Update src/app/page.tsx

src/app/page.tsx

@@ -2,15 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import AboutMetric from '@/components/sections/about/AboutMetric';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import { Users, Zap, CheckCircle, MessageSquare, ArrowRight } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,245 +29,118 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleApple
       navItems={[
-        {
+        { name: "Services", id: "#services" },
-          name: "Services",
+        { name: "About", id: "#about" },
-          id: "#services",
+        { name: "Testimonials", id: "#testimonials" },
-        },
+        { name: "Contact", id: "#contact" }
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
       ]}
       brandName="Mike Simpson's Plumbing & Heating"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroLogoBillboard
+      <HeroPersonalLinks
-      background={{
+      background={{ variant: "downward-rays-animated" }}
-        variant: "plain",
+      title="Professional Plumbing & Heating"
-      }}
+      linkCards={[
-      logoText="Mike Simpson's Plumbing & Heating"
+        { title: "Emergency Support", description: "24/7 rapid response", button: { text: "Call Now", href: "#contact" } },
-      description="Expert plumbing and heating solutions for your home. Reliable, professional service when you need it most."
+        { title: "Boiler Services", description: "High-efficiency solutions", button: { text: "Book Now", href: "#contact" } }
-      buttons={[
-        {
-          text: "Get a Quote",
-          href: "#contact",
-        },
-        {
-          text: "Our Services",
-          href: "#services",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/handsome-man-kitchen_1157-16350.jpg"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
+      <AboutMetric
+      title="Our Commitment"
+      metrics={[
+        { icon: Users, label: "Years Local", value: "15+" },
+        { icon: Zap, label: "Installations", value: "1200+" },
+        { icon: CheckCircle, label: "Satisfaction", value: "100%" }
+      ]}
+      metricsAnimation="slide-up"
       useInvertedBackground={false}
-      title="Expert Local Service"
-      description="With over 15 years of local experience, we pride ourselves on delivering precision work, honest advice, and transparent pricing. From simple leaks to complete system installs, we handle it all with care."
-      imageSrc="http://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990689.jpg"
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardMedia
+      <FeatureCardSixteen
+      title="Expert Plumbing Services"
+      description="Tailored solutions for your home comfort."
+      textboxLayout="inline-image"
       animationType="slide-up"
-      textboxLayout="split"
       useInvertedBackground={true}
-      features={[
+      positiveCard={{ items: ["Emergency Repairs", "Boiler Installation", "System Maintenance"] }}
-        {
+      negativeCard={{ items: ["Kitchen Leaks", "Bathroom Renos", "Pipe Replacement"] }}
-          id: "f1",
-          title: "Emergency Repairs",
-          description: "Rapid response for all plumbing emergencies, day or night.",
-          tag: "Urgent",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-calling-plumber-solve-kitchen-problems_23-2150990674.jpg",
-        },
-        {
-          id: "f2",
-          title: "Heating & Boilers",
-          description: "Professional installation and servicing of high-efficiency boilers.",
-          tag: "Expertise",
-          imageSrc: "http://img.b2bpic.net/free-photo/burst-copper-pipes-from-cold-closeup_169016-3996.jpg",
-        },
-        {
-          id: "f3",
-          title: "Kitchen & Bath",
-          description: "End-to-end installation services for new kitchens and bathrooms.",
-          tag: "Renovations",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-mechanic-working_23-2148480380.jpg",
-        },
-      ]}
-      title="Comprehensive Solutions"
-      description="Whatever the problem, we have the technical solution."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardSeven
+      <MetricCardFourteen
-      animationType="slide-up"
+      title="Proven Track Record"
-      textboxLayout="default"
+      tag="Quality"
-      useInvertedBackground={false}
       metrics={[
-        {
+        { id: "1", value: "24/7", description: "Emergency Availability" },
-          id: "m1",
+        { id: "2", value: "15Y", description: "Industry Expertise" },
-          value: "15+",
+        { id: "3", value: "100%", description: "Guaranteed Work" }
-          title: "Years Experience",
-          items: [
-            "Established 2008",
-            "Local experts",
-          ],
-        },
-        {
-          id: "m2",
-          value: "1200+",
-          title: "Systems Installed",
-          items: [
-            "Boilers and pipes",
-            "High standards",
-          ],
-        },
-        {
-          id: "m3",
-          value: "100%",
-          title: "Satisfaction Rate",
-          items: [
-            "Dedicated support",
-            "Guaranteed work",
-          ],
-        },
       ]}
-      title="Our Track Record"
+      useInvertedBackground={false}
-      description="Hard numbers you can rely on for peace of mind."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+      <TestimonialCardSixteen
+      title="Trusted by Local Families"
+      description="See what your neighbors are saying."
+      kpiItems={[
+        { value: "4.9/5", label: "Customer Rating" },
+        { value: "500+", label: "Happy Clients" },
+        { value: "100%", label: "Referral Rate" }
+      ]}
+      animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "1", name: "Sarah Miller", role: "Homeowner", company: "Local", rating: 5 },
-          id: "1",
+        { id: "2", name: "David Chen", role: "Resident", company: "Local", rating: 5 }
-          title: "Great Service",
-          quote: "Reliable and professional from start to finish.",
-          name: "Sarah Miller",
-          role: "Homeowner",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-hispanic-handyman-writing-work-estimate-before-fixing-kitchen-sink_662251-2690.jpg",
-        },
-        {
-          id: "2",
-          title: "Very Quick",
-          quote: "Fixed our boiler issues in no time at all.",
-          name: "David Chen",
-          role: "Resident",
-          imageSrc: "http://img.b2bpic.net/free-photo/family-showcasing-their-home_23-2151624863.jpg",
-        },
-        {
-          id: "3",
-          title: "Highly Recommend",
-          quote: "The best plumbing service I have ever used.",
-          name: "Emily Watson",
-          role: "Property Manager",
-          imageSrc: "http://img.b2bpic.net/free-photo/long-distance-relationship-couple-meeting_23-2149324599.jpg",
-        },
-        {
-          id: "4",
-          title: "Professional",
-          quote: "Clear, honest advice and high quality work.",
-          name: "Mark Roberts",
-          role: "Homeowner",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-carpenter-woodworking-shop-proud-his-work_482257-84422.jpg",
-        },
-        {
-          id: "5",
-          title: "Excellent Job",
-          quote: "Installed our new bathroom beautifully.",
-          name: "Lisa Brown",
-          role: "Customer",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990680.jpg",
-        },
       ]}
-      title="Happy Customers"
-      description="What our local clients think of our work."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitText
-      textboxLayout="default"
+      sideTitle="Need Help?"
+      faqsAnimation="slide-up"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "Do you offer emergency call-outs?", content: "Yes, we provide 24/7 support." },
-          id: "q1",
+        { id: "2", title: "Are you insured?", content: "Yes, fully licensed and insured." }
-          title: "Do you offer emergency call-outs?",
-          content: "Yes, we provide 24/7 support for all urgent plumbing needs.",
-        },
-        {
-          id: "q2",
-          title: "Are you fully insured?",
-          content: "Yes, our team is fully licensed and insured for all plumbing and heating work.",
-        },
-        {
-          id: "q3",
-          title: "What areas do you cover?",
-          content: "We cover a 30-mile radius around our central office location.",
-        },
       ]}
-      title="Common Questions"
-      description="Quick answers to help you stay informed."
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactCenter
+      title="Let's Connect"
+      description="Request your free consultation today."
+      tag="Contact"
       useInvertedBackground={true}
-      title="Contact Us"
+      background={{ variant: "gradient-bars" }}
-      description="Ready to get started? Send us a message today."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help?",
-        rows: 4,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/steel-kitchen-faucet-vintage-style-closeup_169016-20013.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
+      <FooterMedia
       logoText="Mike Simpson's Plumbing & Heating"
-      copyrightText="© 2025 Mike Simpson's Plumbing & Heating Ltd."
+      imageSrc="http://img.b2bpic.net/free-photo/handsome-man-kitchen_1157-16350.jpg"
+      columns={[
+        { title: "Company", items: [{ label: "About Us", href: "#about" }] },
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }] }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}