Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,17 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { Shield } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,377 +28,119 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarStyleApple
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "hero" },
-          name: "Home",
+              { name: "About", id: "about" },
-          id: "hero",
+              { name: "Services", id: "features" },
-        },
+              { name: "Contact", id: "contact" },
-        {
+            ]}
-          name: "About",
+            brandName="Roofing Near Me"
-          id: "about",
+          />
-        },
+        </div>
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Roofing Near Me"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroCentered
+          <HeroBillboardCarousel
-      background={{
+            background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
+            title="Roofing Experts You Can Trust"
-      }}
+            description="Professional-grade roofing installation and repair services."
-      title="Roofing Experts You Can Trust"
+            mediaItems={[
-      description="Providing top-tier roofing installation, repair, and maintenance services for your home. Quality work, every time."
+              { imageSrc: "http://img.b2bpic.net/free-photo/exterior-home_1203-2241.jpg", imageAlt: "Roofing project" },
-      avatars={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=1", imageAlt: "Roofing professional" }
-        {
+            ]}
-          src: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-talking-phone-while-standing-outside-office-buildings-business-success-concept_58466-12283.jpg",
+            buttons={[{ text: "Get Free Estimate", href: "#contact" }]}
-          alt: "Client",
+          />
-        },
+        </div>
-        {
-          src: "http://img.b2bpic.net/free-photo/enjoying-morning-sun-before-start-work_329181-11779.jpg",
-          alt: "Client",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/specialist-grinds-tile-before-fixing-it-wall-builder-decorates-walls-apartment-finishing-building-with-modern-materials_166373-2086.jpg",
-          alt: "Client",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-male-model-posing-outdoor_23-2148289284.jpg",
-          alt: "Client",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/exterior-home_1203-2241.jpg",
-          alt: "Client",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Get Free Estimate",
-          href: "#contact",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Licensed & Insured",
-        },
-        {
-          type: "text",
-          text: "24/7 Emergency Service",
-        },
-        {
-          type: "text",
-          text: "Lifetime Warranty",
-        },
-        {
-          type: "text",
-          text: "Top Rated Local Pro",
-        },
-        {
-          type: "text",
-          text: "Free Consultations",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <TestimonialAboutCard
+          <MediaAbout
-      useInvertedBackground={false}
+            tag="About Us"
-      tag="About Us"
+            title="Decades of Roofing Excellence"
-      title="Decades of Roofing Excellence"
+            description="We provide premium residential roofing solutions with unmatched quality and service."
-      description="We specialize in residential roofing, offering durable solutions tailored to your home's unique needs."
+            imageSrc="http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=2"
-      subdescription="Our team uses premium materials and certified installation processes for long-lasting protection."
+            useInvertedBackground={false}
-      icon={Shield}
+          />
-      imageSrc="http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=1"
+        </div>
-      mediaAnimation="slide-up"
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardTwentyNine
+          <FeatureCardTwelve
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
+            title="Our Professional Services"
-      useInvertedBackground={false}
+            description="Comprehensive maintenance and installation packages."
-      features={[
+            useInvertedBackground={false}
-        {
+            features={[
-          title: "New Installation",
+              { id: "f1", label: "Installation", title: "New Roofs", items: ["Asphalt Shingles", "Metal Roofing", "Slate Tile"], buttons: [{ text: "View Details" }] },
-          description: "High-quality shingle and metal roof installations.",
+              { id: "f2", label: "Maintenance", title: "Reliable Repairs", items: ["Emergency Leak Fix", "Storm Damage Repair", "Full Inspections"], buttons: [{ text: "Learn More" }] }
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-twist-background_1048-17020.jpg?_wi=1",
+            ]}
-          titleImageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13116.jpg",
+          />
-          buttonText: "Read More",
+        </div>
-        },
-        {
-          title: "Emergency Repairs",
-          description: "Quick, reliable response for storm damage and leaks.",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-roof_23-2149343640.jpg?_wi=1",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/mechanic-filling-out-insurance-contract_482257-85122.jpg",
-          buttonText: "Read More",
-        },
-        {
-          title: "Roof Inspections",
-          description: "Thorough maintenance checks for peace of mind.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=1",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg",
-          buttonText: "Read More",
-        },
-      ]}
-      title="Our Professional Services"
-      description="From complete roof replacements to minor repairs, we have you covered."
-    />
-  </div>
 
-  <div id="process" data-section="process">
+        <div id="process" data-section="process">
-      <ProductCardTwo
+          <ProductCatalog
-      animationType="slide-up"
+            layout="section"
-      textboxLayout="default"
+            products={[
-      gridVariant="three-columns-all-equal-width"
+              { id: "p1", name: "Asphalt Shingles", price: "$5,000+", imageSrc: "http://img.b2bpic.net/free-photo/white-tiled-building-blue-sky_181624-6378.jpg", rating: 5 },
-      useInvertedBackground={false}
+              { id: "p2", name: "Metal Roofing", price: "$12,000+", imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg", rating: 4 }
-      products={[
+            ]}
-        {
+          />
-          id: "p1",
+        </div>
-          brand: "ProRoof",
-          name: "Asphalt Shingles",
-          price: "From $5,000",
-          rating: 5,
-          reviewCount: "120",
-          imageSrc: "http://img.b2bpic.net/free-photo/white-tiled-building-blue-sky_181624-6378.jpg",
-        },
-        {
-          id: "p2",
-          brand: "MetalMax",
-          name: "Standing Seam Metal",
-          price: "From $12,000",
-          rating: 5,
-          reviewCount: "85",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg",
-        },
-        {
-          id: "p3",
-          brand: "EcoTile",
-          name: "Slate Tile Roofing",
-          price: "From $20,000",
-          rating: 5,
-          reviewCount: "45",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg",
-        },
-        {
-          id: "p4",
-          brand: "Composite",
-          name: "Eco-Friendly Shingles",
-          price: "From $7,000",
-          rating: 5,
-          reviewCount: "60",
-          imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530685.jpg",
-        },
-        {
-          id: "p5",
-          brand: "ProRoof",
-          name: "Architectural Shingles",
-          price: "From $6,500",
-          rating: 5,
-          reviewCount: "95",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-weave-abstract-wallpaper-background_1048-9944.jpg",
-        },
-        {
-          id: "p6",
-          brand: "MetalMax",
-          name: "Corrugated Metal",
-          price: "From $9,000",
-          rating: 5,
-          reviewCount: "70",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-blue-lines-perfect-using-as-background_181624-15180.jpg",
-        },
-      ]}
-      title="Our Roofing Solutions"
-      description="We offer a variety of roofing materials tailored to your climate and aesthetic preferences."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
+          <TestimonialCardThirteen
-      textboxLayout="default"
+            showRating={true}
-      useInvertedBackground={false}
+            animationType="slide-up"
-      testimonials={[
+            textboxLayout="split"
-        {
+            title="What Clients Say"
-          id: "t1",
+            description="Hear from our satisfied customers."
-          name: "Mark R.",
+            useInvertedBackground={false}
-          date: "Jan 2024",
+            testimonials={[
-          title: "Great Service!",
+              { id: "t1", name: "Mark R.", handle: "@markr", testimonial: "The roofing team was professional and fast!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blissful-tanned-woman-pajama-waving-hand-with-smile-amazing-caucasian-female-model-standing-balcony_197531-20975.jpg" }
-          quote: "The roofing team was professional and fast. Highly recommended.",
+            ]}
-          tag: "Repair",
+          />
-          avatarSrc: "http://img.b2bpic.net/free-photo/blissful-tanned-woman-pajama-waving-hand-with-smile-amazing-caucasian-female-model-standing-balcony_197531-20975.jpg",
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/old-house-with-tiled-roof_169016-29073.jpg",
-          imageAlt: "happy homeowner looking at new roof",
-        },
-        {
-          id: "t2",
-          name: "Elena M.",
-          date: "Dec 2023",
-          title: "Excellent Job",
-          quote: "Beautiful roof installation, done exactly as promised.",
-          tag: "New Roof",
-          avatarSrc: "http://img.b2bpic.net/free-photo/happy-woman-background-new-house-portrait-first-time-buyer-house-owner-apartment-renter-flat-tenant-landlady-moving-day-buying-own-property-concept_493343-29871.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=2",
-          imageAlt: "happy homeowner looking at new roof",
-        },
-        {
-          id: "t3",
-          name: "John D.",
-          date: "Nov 2023",
-          title: "Expert Team",
-          quote: "Very thorough inspection and detailed repair process.",
-          tag: "Inspection",
-          avatarSrc: "http://img.b2bpic.net/free-photo/country-music-band-singing-outdoors_23-2149498460.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-twist-background_1048-17020.jpg?_wi=2",
-          imageAlt: "happy homeowner looking at new roof",
-        },
-        {
-          id: "t4",
-          name: "Sara W.",
-          date: "Oct 2023",
-          title: "Responsive",
-          quote: "Quickest response to our leak emergency.",
-          tag: "Emergency",
-          avatarSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13336.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-roof_23-2149343640.jpg?_wi=2",
-          imageAlt: "happy homeowner looking at new roof",
-        },
-        {
-          id: "t5",
-          name: "Tom K.",
-          date: "Sep 2023",
-          title: "Professional",
-          quote: "Clear pricing and perfect project completion.",
-          tag: "Full Replace",
-          avatarSrc: "http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=2",
-          imageAlt: "happy homeowner looking at new roof",
-        },
-      ]}
-      title="What Homeowners Say"
-      description="Our satisfied clients trust us for their most important asset."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqDouble
+          <FaqSplitMedia
-      textboxLayout="default"
+            faqs={[{ id: "q1", title: "How long does a roof last?", content: "Typically 20-30 years." }]}
-      useInvertedBackground={false}
+            title="FAQs"
-      faqs={[
+            description="Common questions about our roofing services."
-        {
+            faqsAnimation="slide-up"
-          id: "q1",
+            textboxLayout="split"
-          title: "How long does a roof last?",
+            useInvertedBackground={false}
-          content: "Most asphalt shingle roofs last between 20 to 30 years.",
+            imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg"
-        },
+          />
-        {
+        </div>
-          id: "q2",
-          title: "How do I know I need a new roof?",
-          content: "Look for cracked shingles, leaks, or granule loss.",
-        },
-        {
-          id: "q3",
-          title: "Do you provide estimates?",
-          content: "Yes, we offer free, detailed roofing estimates.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Common questions about our roofing processes."
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="social" data-section="social">
+        <div id="social" data-section="social">
-      <SocialProofOne
+          <SocialProofOne
-      textboxLayout="default"
+            names={["Roofing Masters", "Build Pro", "Shield Roofing"]}
-      useInvertedBackground={false}
+            title="Industry Partners"
-      names={[
+            description="We work with top industry experts."
-        "Roofing Masters",
+            textboxLayout="split"
-        "Build Pro",
+            useInvertedBackground={false}
-        "Shield Roofing",
+          />
-        "Safe Roof",
+        </div>
-        "Pro Installers",
-        "Elite Roofing",
-        "Top Repair",
-      ]}
-      title="Industry Partners"
-      description="Proudly working with industry-leading brands."
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactText
+          <ContactSplitForm
-      useInvertedBackground={false}
+            title="Get Your Estimate"
-      background={{
+            description="Our team is ready to inspect your property."
-        variant: "rotated-rays-static",
+            useInvertedBackground={false}
-      }}
+            inputs={[
-      text="Ready to get started? Contact us today for a free inspection or estimate."
+              { name: "name", type: "text", placeholder: "Full Name", required: true },
-      buttons={[
+              { name: "email", type: "email", placeholder: "Email Address", required: true }
-        {
+            ]}
-          text: "Contact Us Now",
+          />
-          href: "mailto:info@roofing.com",
+        </div>
-        },
-      ]}
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterBase
+          <FooterBaseReveal
-      columns={[
+            logoText="Roofing Near Me"
-        {
+            columns={[{ title: "Links", items: [{ label: "Home", href: "#" }] }]}
-          title: "Company",
+          />
-          items: [
+        </div>
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Installation",
-              href: "#features",
-            },
-            {
-              label: "Repair",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="Roofing Near Me"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );