Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,299 +1,181 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
+import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
-import SplitAbout from "@/components/sections/about/SplitAbout";
+import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
-import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import { Star } from "lucide-react";
-import { Star, CheckCircle, Clock, DollarSign, Sparkles, Brain, Wrench, ListChecks, AlertCircle, Heart } from "lucide-react";
 
-export default function HomePage() {
+const testimonials = [
-  const navItems = [
+  {
-    { name: "Services", id: "services" },
+    id: "1",    name: "John Martinez",    role: "Homeowner, Downtown",    testimonial: "Lavelle Roofing fixed our roof after a storm. They were professional, honest, and finished on time. Highly recommended!",    imageSrc: "/testimonials/john-martinez.jpg?_wi=1",    imageAlt: "John Martinez"
-    { name: "Why Us", id: "why-us" },
+  },
-    { name: "Reviews", id: "reviews" },
+  {
-    { name: "Contact", id: "contact" },
+    id: "2",    name: "Sarah Chen",    role: "Property Manager",    testimonial: "We manage 15 commercial properties. Lavelle Roofing is our go-to contractor. Their quality and reliability are unmatched.",    imageSrc: "/testimonials/sarah-chen.jpg?_wi=1",    imageAlt: "Sarah Chen"
-  ];
+  },
+  {
+    id: "3",    name: "Michael Thompson",    role: "Business Owner",    testimonial: "Emergency roof repair at 2 AM. They responded immediately and saved us from major water damage. Exceptional service!",    imageSrc: "/testimonials/michael-thompson.jpg?_wi=1",    imageAlt: "Michael Thompson"
+  },
+  {
+    id: "4",    name: "Jennifer Rodriguez",    role: "Homeowner, Suburbs",    testimonial: "Got three quotes for a full roof replacement. Lavelle's price was fair and their workmanship is outstanding. 5 stars!",    imageSrc: "/testimonials/jennifer-rodriguez.jpg",    imageAlt: "Jennifer Rodriguez"
+  },
+  {
+    id: "5",    name: "David Kim",    role: "HOA Board Member",    testimonial: "The team coordinated our community roof project perfectly. Professional, punctual, and left no mess. Wonderful to work with.",    imageSrc: "/testimonials/david-kim.jpg",    imageAlt: "David Kim"
+  }
+];
 
-  const handleGetQuoteClick = () => {
+const heroTestimonials = [
-    const contactSection = document.getElementById("contact");
+  {
-    if (contactSection) {
+    name: "John Martinez",    handle: "Homeowner, Downtown",    testimonial: "Lavelle Roofing fixed our roof after a storm. Professional and on time!",    rating: 5,
-      contactSection.scrollIntoView({ behavior: "smooth" });
+    imageSrc: "/testimonials/john-martinez.jpg?_wi=2",    imageAlt: "John Martinez"
-    }
+  },
-  };
+  {
+    name: "Sarah Chen",    handle: "Property Manager",    testimonial: "Their quality and reliability are unmatched. Our go-to contractor.",    rating: 5,
+    imageSrc: "/testimonials/sarah-chen.jpg?_wi=2",    imageAlt: "Sarah Chen"
+  },
+  {
+    name: "Michael Thompson",    handle: "Business Owner",    testimonial: "Emergency response saved us from major water damage. Exceptional!",    rating: 5,
+    imageSrc: "/testimonials/michael-thompson.jpg?_wi=2",    imageAlt: "Michael Thompson"
+  }
+];
 
-  const footerColumns = [
+const metrics = [
-    {
+  {
-      title: "Services",      items: [
+    id: "1",    value: "20+",    description: "Years of Experience"
-        { label: "Roof Repairs", href: "#services" },
+  },
-        { label: "Flat Roof Installation", href: "#services" },
+  {
-        { label: "Chimney Repairs", href: "#services" },
+    id: "2",    value: "5,000+",    description: "Satisfied Customers"
-        { label: "Guttering & Drainage", href: "#services" },
+  },
-        { label: "Emergency Roofing", href: "#services" },
+  {
-      ],
+    id: "3",    value: "98%",    description: "Customer Satisfaction"
-    },
+  },
-    {
+  {
-      title: "Company",      items: [
+    id: "4",    value: "24/7",    description: "Emergency Response"
-        { label: "About Us", href: "#why-us" },
+  }
-        { label: "Reviews", href: "#reviews" },
+];
-        { label: "Contact", href: "#contact" },
-        { label: "FAQ", href: "#" },
-        { label: "Blog", href: "#" },
-      ],
-    },
-    {
-      title: "Legal",      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Insurance & Certifications", href: "#" },
-        { label: "Fully Insured", href: "#" },
-      ],
-    },
-  ];
 
+const faqs = [
+  {
+    id: "1",    title: "How quickly can you respond to emergency repairs?",    content: "We offer 24/7 emergency response. Most emergency calls are responded to within 2 hours during business hours and within 4 hours after hours. We understand that roof damage requires immediate attention to prevent further property damage."
+  },
+  {
+    id: "2",    title: "What is the typical lifespan of a new roof?",    content: "Most modern roofing materials last 15-25 years depending on the material type and climate conditions. We use high-quality materials and expert installation to ensure maximum longevity. We also recommend annual inspections to catch and repair issues early."
+  },
+  {
+    id: "3",    title: "Do you offer warranties on your work?",    content: "Yes! We offer a 10-year workmanship warranty on all our installations and major repairs. We also work with top roofing manufacturers who provide material warranties ranging from 15-30 years depending on the product."
+  },
+  {
+    id: "4",    title: "Will you work with my insurance company?",    content: "Absolutely. We have extensive experience working with insurance adjusters and claims. We can provide detailed estimates, documentation, and coordinate directly with your insurance company to streamline the claims process."
+  },
+  {
+    id: "5",    title: "What types of roofing materials do you install?",    content: "We install asphalt shingles, metal roofing, tile roofing, flat roofing systems, and more. We can recommend the best material for your climate, budget, and aesthetic preferences during a free consultation."
+  },
+  {
+    id: "6",    title: "How can I prepare for a roof installation?",    content: "We'll handle most of the preparation. We recommend clearing the area around your home of vehicles and outdoor furniture. We'll protect your landscaping and ensure minimal disruption. Our team will communicate the timeline and any special instructions during the initial consultation."
+  }
+];
+
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
+      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
+      defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
+      borderRadius="rounded"
-      contentWidth="small"
+      contentWidth="medium"
-      sizing="largeSizeMediumTitles"
+      sizing="medium"
-      background="circleGradient"
+      background="noise"
-      cardStyle="layered-gradient"
+      cardStyle="glass-elevated"
-      primaryButtonStyle="shadow"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "#services" },
+            { name: "Reviews", id: "#reviews" },
+            { name: "FAQ", id: "#faq" },
+            { name: "Contact", id: "#contact" }
+          ]}
           brandName="Lavelle Roofing"
-          navItems={navItems}
           button={{
-            text: "Get Free Quote",            onClick: handleGetQuoteClick,
+            text: "Get Quote",            href: "#contact"
           }}
-          animateOnLoad={true}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitDoubleCarousel
+        <HeroBillboardTestimonial
-          title="Roofing You Can Trust"
-          description="Reliable repairs, honest pricing, and professional workmanship. Local roofing specialists trusted by homeowners for fast response, fair quotes, and quality repairs that last."
-          tag="20+ Five Star Reviews"
-          tagIcon={Star}
-          tagAnimation="slide-up"
           background={{ variant: "glowing-orb" }}
-          leftCarouselItems={[
+          title="Professional Roofing Solutions You Can Trust"
-            {
+          description="20+ years of expert roofing services. Storm repairs, installations, and emergency response available 24/7."
-              imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-building-with-wood_23-2148748856.jpg?_wi=1",              imageAlt: "Professional roofer working on modern home at sunset"},
+          tag="Trusted Local Specialists"
-            {
+          imageSrc="/hero-roofing.jpg"
-              imageSrc: "http://img.b2bpic.net/free-photo/crop-skateboarder-man-ramp_23-2147678250.jpg?_wi=1",              imageAlt: "Expert roof repair work"},
+          imageAlt="Professional roof installation"
-            {
+          mediaAnimation="slide-up"
-              imageSrc: "http://img.b2bpic.net/free-photo/bison-race-obstacle-race-sports-competition-belarus-may-2019_1321-3203.jpg?_wi=1",              imageAlt: "Modern flat roof installation"},
+          testimonials={heroTestimonials}
-            {
+          testimonialRotationInterval={5000}
-              imageSrc: "http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg?_wi=1",              imageAlt: "Professional chimney repair"},
-          ]}
-          rightCarouselItems={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/boy-red-coat-looks-busy-talking-phone_8353-1103.jpg?_wi=1",              imageAlt: "Emergency roof damage response"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/focused-plumber-working-assembling-pipelines-install-plumbing-system-while-building-new-house_662251-539.jpg?_wi=1",              imageAlt: "Professional guttering installation"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-mother-smiling-posing-kitchen_23-2148414936.jpg?_wi=1",              imageAlt: "Satisfied customer testimonial"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg?_wi=1",              imageAlt: "Happy customer review"},
-          ]}
           buttons={[
-            {
+            { text: "Get Free Estimate", href: "#contact" },
-              text: "Get Free Quote",              onClick: handleGetQuoteClick,
+            { text: "Call Now", href: "tel:+1-555-0123" }
-            },
-            {
-              text: "Call Now",              onClick: () => {
-                window.location.href = "tel:+1234567890";
-              },
-            },
-          ]}
-          buttonAnimation="slide-up"
-          carouselPosition="right"
-        />
-      </div>
-
-      <div id="why-us" data-section="why-us">
-        <SplitAbout
-          title="Why Homeowners Trust Lavelle Roofing"
-          description="Based on consistent customer feedback, we've built our reputation on four core promises."
-          tag="Our Commitment"
-          tagIcon={CheckCircle}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          bulletPoints={[
-            {
-              title: "Same Day Quotes",              description: "Most customers hear back within 24 hours with a transparent, honest estimate.",              icon: Clock,
-            },
-            {
-              title: "Honest Pricing",              description: "No hidden costs or inflated prices. Clear, fair quotes you can trust.",              icon: DollarSign,
-            },
-            {
-              title: "Clean & Professional",              description: "Work completed tidily with respect for your property and property lines.",              icon: Sparkles,
-            },
-            {
-              title: "Expert Knowledge",              description: "Problems diagnosed quickly with the right solution, led by Marc's expertise.",              icon: Brain,
-            },
-          ]}
-          mediaAnimation="blur-reveal"
-          imagePosition="right"
-          imageSrc="http://img.b2bpic.net/free-photo/worker-with-hard-hat-building-with-wood_23-2148748856.jpg?_wi=2"
-          imageAlt="Professional roofer working on modern home"
-        />
-      </div>
-
-      <div id="services" data-section="services">
-        <FeatureCardMedia
-          title="Professional Roofing Services"
-          description="From emergency repairs to full installations, we handle all roofing needs with speed and precision."
-          tag="Services"
-          tagIcon={Wrench}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          features={[
-            {
-              id: "1",              title: "Roof Repairs",              description: "Leaks, broken tiles, storm damage and general roof issues fixed quickly and professionally.",              tag: "Emergency",              imageSrc: "http://img.b2bpic.net/free-photo/crop-skateboarder-man-ramp_23-2147678250.jpg?_wi=2",              imageAlt: "Professional roof repair work",              buttons: [
-                {
-                  text: "Learn More",                  onClick: () => {
-                    const servicesSection = document.getElementById("services");
-                    if (servicesSection) {
-                      servicesSection.scrollIntoView({ behavior: "smooth" });
-                    }
-                  },
-                },
-              ],
-            },
-            {
-              id: "2",              title: "Flat Roof Installation",              description: "Durable modern flat roofing systems built to last with professional installation.",              tag: "Installation",              imageSrc: "http://img.b2bpic.net/free-photo/bison-race-obstacle-race-sports-competition-belarus-may-2019_1321-3203.jpg?_wi=2",              imageAlt: "Modern flat roof installation",              buttons: [
-                {
-                  text: "Learn More",                  onClick: () => {
-                    const servicesSection = document.getElementById("services");
-                    if (servicesSection) {
-                      servicesSection.scrollIntoView({ behavior: "smooth" });
-                    }
-                  },
-                },
-              ],
-            },
-            {
-              id: "3",              title: "Chimney Repairs",              description: "Repointing, chimney restoration and leak prevention with expert workmanship.",              tag: "Repairs",              imageSrc: "http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg?_wi=2",              imageAlt: "Professional chimney repair",              buttons: [
-                {
-                  text: "Learn More",                  onClick: () => {
-                    const servicesSection = document.getElementById("services");
-                    if (servicesSection) {
-                      servicesSection.scrollIntoView({ behavior: "smooth" });
-                    }
-                  },
-                },
-              ],
-            },
-            {
-              id: "4",              title: "Guttering & Drainage",              description: "Repairs, replacements and cleaning to prevent damp issues and water damage.",              tag: "Maintenance",              imageSrc: "http://img.b2bpic.net/free-photo/focused-plumber-working-assembling-pipelines-install-plumbing-system-while-building-new-house_662251-539.jpg?_wi=2",              imageAlt: "Professional guttering installation",              buttons: [
-                {
-                  text: "Learn More",                  onClick: () => {
-                    const servicesSection = document.getElementById("services");
-                    if (servicesSection) {
-                      servicesSection.scrollIntoView({ behavior: "smooth" });
-                    }
-                  },
-                },
-              ],
-            },
-            {
-              id: "5",              title: "Emergency Roofing",              description: "Fast response to urgent roof leaks or storm damage when you need it most.",              tag: "24/7 Response",              imageSrc: "http://img.b2bpic.net/free-photo/boy-red-coat-looks-busy-talking-phone_8353-1103.jpg?_wi=2",              imageAlt: "Emergency roof damage response",              buttons: [
-                {
-                  text: "Call Now",                  onClick: () => {
-                    window.location.href = "tel:+1234567890";
-                  },
-                },
-              ],
-            },
           ]}
         />
       </div>
 
       <div id="reviews" data-section="reviews">
-        <TestimonialCardTwelve
+        <TestimonialCardTwo
-          testimonials={[
+          testimonials={testimonials}
-            {
+          title="Customer Reviews"
-              id: "1",              name: "Edward F.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-mother-smiling-posing-kitchen_23-2148414936.jpg?_wi=2",              imageAlt: "Edward F., satisfied customer"},
+          description="Real feedback from satisfied customers across our community"
-            {
+          tag="Verified Reviews"
-              id: "2",              name: "Kate M.",              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg?_wi=2",              imageAlt: "Kate M., happy customer"},
+          textboxLayout="default"
-            {
+          animationType="slide-up"
-              id: "3",              name: "Jimmy L.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133804.jpg?_wi=1",              imageAlt: "Jimmy L., satisfied client"},
-            {
-              id: "4",              name: "Sarah J.",              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-multiracial-business-team_1262-21007.jpg?_wi=1",              imageAlt: "Sarah J., happy homeowner"},
-            {
-              id: "5",              name: "Michael D.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg?_wi=1",              imageAlt: "Michael D., satisfied customer"},
-            {
-              id: "6",              name: "Jennifer R.",              imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-beautiful-confident-young-african-american-woman-dressed-stylish-purple-turtleneck-smiling-joyfully-showing-ok-gesture_344912-1015.jpg?_wi=1",              imageAlt: "Jennifer R., happy customer"},
-          ]}
-          cardTitle="What Customers Say About Lavelle Roofing"
-          cardTag="Trusted by Homeowners"
-          cardTagIcon={Heart}
-          cardAnimation="blur-reveal"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="process" data-section="process">
+      <div id="metrics" data-section="metrics">
-        <FeatureCardMedia
+        <MetricCardTwo
-          title="Simple, Stress-Free Roofing"
+          metrics={metrics}
-          description="Four straightforward steps from first contact to finished project."
+          title="Why Choose Lavelle Roofing"
-          tag="Process"
+          description="Proven track record of excellence and customer satisfaction"
-          tagIcon={ListChecks}
+          tag="Our Impact"
-          tagAnimation="slide-up"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="uniform-all-items-equal"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia
+          faqs={faqs}
+          imageSrc="/faq-hero.jpg"
+          imageAlt="Roofing consultation"
+          mediaAnimation="slide-up"
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about our roofing services"
+          tag="Help Center"
+          faqsAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
+          mediaPosition="left"
-          features={[
-            {
-              id: "1",              title: "Get in Touch",              description: "Call or request a free quote online. We respond quickly.",              tag: "Step 1",              imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-building-with-wood_23-2148748856.jpg?_wi=3",              imageAlt: "Contact us for a quote"},
-            {
-              id: "2",              title: "Free Assessment",              description: "We inspect the issue and explain exactly what needs fixing.",              tag: "Step 2",              imageSrc: "http://img.b2bpic.net/free-photo/crop-skateboarder-man-ramp_23-2147678250.jpg?_wi=3",              imageAlt: "Professional roof assessment"},
-            {
-              id: "3",              title: "Clear Quote",              description: "You receive a fair, honest price with no hidden costs.",              tag: "Step 3",              imageSrc: "http://img.b2bpic.net/free-photo/bison-race-obstacle-race-sports-competition-belarus-may-2019_1321-3203.jpg?_wi=3",              imageAlt: "Transparent pricing quote"},
-            {
-              id: "4",              title: "Job Done Properly",              description: "Professional work completed quickly and cleanly.",              tag: "Step 4",              imageSrc: "http://img.b2bpic.net/free-photo/focused-plumber-working-assembling-pipelines-install-plumbing-system-while-building-new-house_662251-539.jpg?_wi=3",              imageAlt: "Professional completed project"},
-          ]}
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCenter
+        <FooterLogoReveal
-          tag="Emergency Support"
-          title="Got a Roof Leak?"
-          description="Don't wait until it causes more damage. Contact us immediately for fast, professional emergency roofing response."
-          tagIcon={AlertCircle}
-          tagAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          inputPlaceholder="Enter your email"
-          buttonText="Get Emergency Help"
-          termsText="We respond to emergencies 24/7. Contact our team right away or call for immediate assistance."
-          onSubmit={(email) => {
-            console.log("Emergency contact email:", email);
-          }}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
           logoText="Lavelle Roofing"
-          copyrightText="© 2025 Lavelle Roofing. All rights reserved."
+          leftLink={{
-          columns={footerColumns}
+            text: "Privacy Policy",            href: "#"
+          }}
+          rightLink={{
+            text: "Terms of Service",            href: "#"
+          }}
         />
       </div>
     </ThemeProvider>