Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,13 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 
 export default function LandingPage() {
   return (
@@ -22,206 +22,100 @@ export default function LandingPage() {
         cardStyle="gradient-mesh"
         primaryButtonStyle="radial-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Services", id: "services" },
-          id: "hero",
+        { name: "Products", id: "products" },
-        },
+        { name: "Testimonials", id: "testimonials" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
-      brandName="Bennys Roofing"
+      brandName="Bennys Roofing and Gutter"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCarouselLogo
+      <HeroSplitKpi
-      logoText="Bennys Roofing & Insulation"
+      title="Bennys Roofing and Gutter"
-      description="Expert roofing and gutter insulation services to keep your home safe, dry, and energy-efficient year-round."
+      description="Expert roofing and classic gutter services to keep your home safe and dry year-round."
-      buttons={[
+      background={{ variant: "gradient-bars" }}
-        {
+      kpis={[
-          text: "Get a Free Quote",
+        { value: "20+", label: "Years Experience" },
-          href: "#contact",
+        { value: "500+", label: "Projects Done" },
-        },
+        { value: "100%", label: "Satisfaction" }
-      ]}
-      slides={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/a-high-quality-professional-photograph-o-1774767914662-80d63541.png?_wi=1",
-          imageAlt: "Professional residential roofing inspection",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/a-high-quality-professional-photograph-o-1774767914662-80d63541.png?_wi=2",
-          imageAlt: "Gutter cleaning and insulation service",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/a-high-quality-professional-photograph-o-1774767914662-80d63541.png?_wi=3",
-          imageAlt: "Modern home roofing system installation",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/a-high-quality-professional-photograph-o-1774767914662-80d63541.png?_wi=4",
-          imageAlt: "Residential roofing maintenance expert",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/a-high-quality-professional-photograph-o-1774767914662-80d63541.png?_wi=5",
-          imageAlt: "Quality guaranteed roof insulation",
-        },
       ]}
+      enableKpiAnimation={true}
+      buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwentySeven
+      <FeatureCardTwentyOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "s1",
-          title: "Roof Repair",
-          description: "Quick, durable repairs for leaks and storm damage.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/close-up-of-roof-shingles-being-inspecte-1774767914855-3cb4749f.png",
-        },
-        {
-          id: "s2",
-          title: "Gutter Systems",
-          description: "Installation and insulation of advanced gutter systems.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/modern-gutter-system-on-a-clean-house-fa-1774767933637-166de80c.png",
-        },
-        {
-          id: "s3",
-          title: "Thermal Insulation",
-          description: "Reduce energy costs with our professional attic insulation.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/insulation-materials-being-installed-in--1774767916004-8f9eeff3.png",
-        },
-      ]}
       title="Professional Services"
-      description="We specialize in high-performance roofing and insulation solutions tailored to your home's needs."
+      description="We specialize in high-performance roofing and traditional gutter solutions tailored to your home's needs."
+      accordionItems={[
+        { id: "s1", title: "Roof Repair", content: "Quick, durable repairs for leaks and storm damage." },
+        { id: "s2", title: "Classic Gutters", content: "Installation and restoration of timeless, high-capacity gutter systems." },
+        { id: "s3", title: "Roof Maintenance", content: "Scheduled inspections and maintenance to prolong roof life." }
+      ]}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/premium-roof-shingles-in-bundles-profess-1774767915165-4a4cabf0.png?_wi=1"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardOne
+      <ProductCardFour
-      animationType="slide-up"
+      title="Quality Materials"
-      textboxLayout="default"
+      description="We use only top-tier, classic materials for long-lasting results."
       gridVariant="three-columns-all-equal-width"
+      animationType="slide-up"
+      textboxLayout="split"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Asphalt Shingles", price: "Request Quote", variant: "Roofing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/premium-roof-shingles-in-bundles-profess-1774767915165-4a4cabf0.png?_wi=2" },
-          id: "p1",
+        { id: "p2", name: "Traditional Gutter Guards", price: "Request Quote", variant: "Gutters", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/professional-gutter-guards-with-protecti-1774767916483-7ade6c86.png" },
-          name: "Asphalt Shingles",
+        { id: "p3", name: "Roofing Accessories", price: "Request Quote", variant: "Accessories", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/high-performance-thermal-spray-foam-insu-1774767917155-aee45914.png" },
-          price: "Request Quote",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/premium-roof-shingles-in-bundles-profess-1774767915165-4a4cabf0.png",
-        },
-        {
-          id: "p2",
-          name: "Gutter Guards",
-          price: "Request Quote",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/professional-gutter-guards-with-protecti-1774767916483-7ade6c86.png",
-        },
-        {
-          id: "p3",
-          name: "Spray Foam Insulation",
-          price: "Request Quote",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/high-performance-thermal-spray-foam-insu-1774767917155-aee45914.png",
-        },
       ]}
-      title="Quality Materials"
-      description="We use only top-tier materials for long-lasting results."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
+      <TestimonialCardTen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah J.",
-          role: "Homeowner",
-          testimonial: "Excellent service and quick repair!",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/portrait-of-a-smiling-homeowner-customer-1774767914601-52a8c52e.png?_wi=1",
-        },
-        {
-          id: "t2",
-          name: "Mark D.",
-          role: "Homeowner",
-          testimonial: "Professional gutter install, very satisfied.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/portrait-of-a-business-professional-clea-1774767914808-2dfbb25f.png",
-        },
-        {
-          id: "t3",
-          name: "Elena R.",
-          role: "Homeowner",
-          testimonial: "Huge difference in energy bills.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/portrait-of-an-elderly-couple-at-home-br-1774767914399-01a711f1.png",
-        },
-        {
-          id: "t4",
-          name: "David K.",
-          role: "Homeowner",
-          testimonial: "Reliable and honest company.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/portrait-of-a-young-family-in-front-of-t-1774767914514-1155e340.png",
-        },
-        {
-          id: "t5",
-          name: "Linda M.",
-          role: "Homeowner",
-          testimonial: "Great experience, efficient team, clean work site.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BbpoL4vCvKRV1wqOpmVD2Kd09f/portrait-of-a-smiling-homeowner-customer-1774767914601-52a8c52e.png?_wi=2",
-        },
-      ]}
       title="What Our Clients Say"
       description="Don't just take our word for it."
+      textboxLayout="split"
+      useInvertedBackground={true}
+      testimonials={[
+        { id: "t1", title: "Excellent Service", quote: "Excellent service and quick repair!", name: "Sarah J.", role: "Homeowner" },
+        { id: "t2", title: "Professional", quote: "Professional gutter installation, very satisfied.", name: "Mark D.", role: "Homeowner" },
+        { id: "t3", title: "Reliable", quote: "Highly recommend their roofing services.", name: "Elena R.", role: "Homeowner" },
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplitForm
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Contact Us"
       title="Get a Free Quote"
-      description="Reach out today to discuss your roofing and insulation needs."
+      description="Reach out today to discuss your roofing and classic gutter needs."
-      buttons={[
+      useInvertedBackground={true}
-        {
+      inputs={[
-          text: "Call Now",
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
-          href: "tel:5550123456",
+        { name: "email", type: "email", placeholder: "Email Address", required: true }
-        },
       ]}
+      textarea={{ name: "message", placeholder: "Tell us about your project" }}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterLogoEmphasis
-      logoText="Bennys Roofing"
+      logoText="Bennys Roofing and Gutter"
-      leftLink={{
+      columns={[
-        text: "Privacy Policy",
+        { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
-        href: "#",
+      ]}
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
     />
   </div>
       </ReactLenis>