fix: revamp all hero section

src/app/(main)/[slug]/page.tsx

@@ -1,9 +1,9 @@
 import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
+import HeroOther from "@/components/HeroOther";
 import Page from "@/components/Pages/Page";
 import { fetchBlogDetail } from "@/services/payload/blog";
 import { fetchPageBySlug } from "@/services/payload/page";
 import { Metadata } from "next";
-import Image from "next/image";
 import { Suspense } from "react";
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
@@ -58,13 +58,7 @@ export default async function SinglePage({ params }: { params: Promise<{ slug: s
 function Loading() {
   return (
     <>
-      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
+      <HeroOther />
-        {/* <!-- Background Shape --> */}
-        <div className="bg-shape-1 opacity-003">
-          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
-        </div>
-        {/* <!-- End Background Shape --> */}
-      </section>
 
       {/* Section */}
       <BlogDetailContentSkeleton />

src/app/(main)/contact/page.tsx

@@ -1,6 +1,6 @@
 import Contact from "@/components/Contacts/Contact";
 import ContactForm from "@/components/Contacts/ContactForm";
-import Image from "next/image";
+import HeroOther from "@/components/HeroOther";
 import { Suspense } from "react";
 
 export const metadata = {
@@ -11,31 +11,7 @@ export const metadata = {
 export default async function ContactPage() {
   return (
     <>
-      <section
+      <HeroOther title="Contact Us" />
-        className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
-        id="home"
-      >
-        {/* <!-- Background Shape --> */}
-        <div className="bg-shape-1 opacity-003">
-          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
-        </div>
-        {/* <!-- End Background Shape --> */}
-
-        <div className="container position-relative pt-sm-40 text-center">
-          <div className="row">
-            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-              <h1 className="hs-title-10 mb-10 wow fadeInUp">Contact Us</h1>
-
-              {/* <p
-                className="section-descr mb-0 wow fadeInUp"
-                data-wow-delay="0.2s"
-              >
-                Crafting immersive digital journeys for brands.
-              </p> */}
-            </div>
-          </div>
-        </div>
-      </section>
 
       <section className="page-section scrollSpysection" id="contact">
         <Contact />

src/components/Blocks/RenderBlocks.tsx

@@ -39,7 +39,7 @@ export const RenderBlocks: React.FC<{
 
             if (blockType === "googleReviewBlock") {
               return (
-                <div className="my-16" key={index}>
+                <div className="my-10" key={index}>
                   <Suspense fallback={<GoogleReviewsSkeleton />}>
                     <GoogleReviewsBlock />
                   </Suspense>
@@ -47,14 +47,14 @@ export const RenderBlocks: React.FC<{
               );
             } else if (blockType === "beforeFooterBlock") {
               return (
-                <div className="mt-16" key={index}>
+                <div className="mt-10" key={index}>
                   {/* @ts-ignore */}
                   <BeforeFooterBlock {...block} />
                 </div>
               );
             } else {
               return (
-                <div className="my-16" key={index}>
+                <div className="my-10" key={index}>
                   {/* @ts-ignore */}
                   <Block {...block} disableInnerContainer />
                 </div>

src/components/Blogs/BlogDetail.tsx

@@ -1,9 +1,9 @@
+import HeroOther from "@/components/HeroOther";
 import { fetchBlogDetail } from "@/services/payload/blog";
 import { RichText } from "@payloadcms/richtext-lexical/react";
 import { headers } from "next/headers";
 import Image from "next/image";
 import { notFound } from "next/navigation";
-import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
 
 export interface BlogDetailProps {
   slug: string | undefined;
@@ -26,41 +26,7 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
 
   return (
     <>
-      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
+      <HeroOther title={data.data.title} createdAt={data?.createdAt} shareUrl={shareUrl} />
-        {/* <!-- Background Shape --> */}
-        <div className="bg-shape-1 opacity-003">
-          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
-        </div>
-        {/* <!-- End Background Shape --> */}
-
-        <div className="container position-relative pt-sm-40 text-center">
-          <div className="row">
-            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-              <h1 className="hs-title-10 mb-10 wow fadeInUp">{data.data.title}</h1>
-              {/* Author, Categories, Comments */}
-              <div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
-                <div className="flex justify-center items-center">
-                  <i className="mi-clock mr-2" />
-                  <a href="#">{data.createdAt}</a>
-                </div>
-              </div>
-              {/* End Author, Categories, Comments */}
-
-              <div className="flex justify-center space-x-5 mt-8 wow fadeIn">
-                <a className="cursor-pointer" href={shareUrl["facebook"]} target="_blank">
-                  <FaFacebook className="text-2xl text-gray-300" />
-                </a>
-                <a className="cursor-pointer" href={shareUrl["linkedin"]} target="_blank">
-                  <FaLinkedin className="text-2xl text-gray-300" />
-                </a>
-                <a className="cursor-pointer" href={shareUrl["twitter"]} target="_blank">
-                  <FaTwitter className="text-2xl text-gray-300" />
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
 
       {/* Section */}
       <section className="page-section">

src/components/HeroOther.tsx

@@ -1,30 +1,57 @@
 import Image from "next/image";
+import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
 
 export interface HeroOtherProps {
-  title: string;
+  title?: string;
+  img?: string;
+  createdAt?: string;
+  shareUrl?: Record<string, string>;
 }
 
-export default function HeroOther({ title }: HeroOtherProps) {
+const shareIcons: Record<string, any> = {
+  facebook: <FaFacebook className="text-2xl text-gray-300" />,
+  linkedin: <FaLinkedin className="text-2xl text-gray-300" />,
+  twitter: <FaTwitter className="text-2xl text-gray-300" />,
+};
+
+export default function HeroOther({ title, img, createdAt, shareUrl }: HeroOtherProps) {
   return (
-    <section
+    <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 md:!py-48 relative">
-      className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-52 relative"
-      // style={{ clipPath: "ellipse(50% 100% at 50% 100%)" }}
-    >
       {/* <!-- Background Shape --> */}
       <div className="bg-shape-1 w-full h-full opacity-50">
-        <Image src="/assets/images/hero-default.webp" fill alt="" />
+        <Image src={!!img ? img : "/assets/images/hero-default.webp"} fill alt="" />
       </div>
       {/* <!-- End Background Shape --> */}
 
       <div className="container position-relative pt-sm-40 text-center">
         <div className="row">
           <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-            <h1 className="hs-title-10 mb-10 wow fadeInUp">{title ?? ""}</h1>
+            <h1 className="hs-title-10 mb-10">{title ?? ""}</h1>
+            {!!createdAt && (
+              <div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
+                <div className="flex justify-center items-center">
+                  <i className="mi-clock mr-2" />
+                  <a href="#">{createdAt}</a>
+                </div>
+              </div>
+            )}
+
+            {!!shareUrl && (
+              <div className="flex justify-center space-x-5 mt-8 wow fadeIn">
+                {Object.keys(shareUrl).map((k, idx) => {
+                  return (
+                    <a key={idx} className="cursor-pointer" href={shareUrl[k]} target="_blank">
+                      {shareIcons[k]}
+                    </a>
+                  );
+                })}
+              </div>
+            )}
           </div>
         </div>
       </div>
 
-      <svg className="absolute bottom-0 left-0 w-full" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg">
+      <svg className="absolute bottom-[-10px] left-0 w-full" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg">
         <path fill="white" d="M0,0 C480,40 960,40 1440,0 L1440,50 L0,50 Z"></path>
       </svg>
     </section>

src/components/Pages/Page.tsx

@@ -2,7 +2,7 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
 import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
 import BlogDetail from "@/components/Blogs/BlogDetail";
 import { fetchPageBySlug } from "@/services/payload/page";
-import Image from "next/image";
+import HeroOther from "@/components/HeroOther";
 
 export interface PageProps {
   slug: string | undefined;
@@ -22,43 +22,7 @@ export default async function Page({ slug }: PageProps) {
 
   return (
     <>
-      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
+      <HeroOther title={page.title} img={page?.heroImg?.url ?? ""} />
-        {/* <!-- Background Shape --> */}
-        {!!page.heroImg?.url && (
-          <div className="absolute top-0 left-0 w-full h-full opacity-20">
-            <Image
-              src={page.heroImg.url}
-              width="0"
-              height="0"
-              sizes="100vw"
-              className="w-full"
-              alt={page.heroImg.alt}
-            />
-          </div>
-        )}
-        {!page?.heroImg?.url && (
-          <div className="absolute top-0 left-0 w-full h-full opacity-20">
-            <Image
-              src="/assets/images/hero-default.webp"
-              width="0"
-              height="0"
-              sizes="100vw"
-              className="w-full"
-              alt=""
-            />
-          </div>
-        )}
-        {/* <!-- End Background Shape --> */}
-
-        <div className="container position-relative pt-sm-40 text-center">
-          <div className="row">
-            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-              <h1 className="hs-title-10 mb-10">{page.title}</h1>
-            </div>
-          </div>
-        </div>
-      </section>
-
       <RenderBlocks blocks={page.layout} />
     </>
   );