Update src/app/services/plumbing/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonia
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import { Award, Clock, ShieldCheck, Star, ThumbsUp, Wrench, Zap } from "lucide-react";
 
 export default function LandingPage() {
@@ -30,21 +31,13 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Services",
-          id: "/services",
-        },
+          name: "Services",          id: "/services"},
         {
-          name: "About",
-          id: "/about",
-        },
+          name: "About",          id: "/about"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
       ]}
       brandName="LocalPro"
     />
@@ -53,108 +46,63 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Reliable Local Service in Your City"
       description="Fast, professional, and affordable service. Licensed and insured experts ready to help with your home needs today."
       testimonials={[
         {
-          name: "Sarah J.",
-          handle: "@sarahj",
-          testimonial: "Excellent service and very professional team. Highly recommend!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg?_wi=1",
-        },
+          name: "Sarah J.",          handle: "@sarahj",          testimonial: "Excellent service and very professional team. Highly recommend!",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg?_wi=1"},
         {
-          name: "Mike R.",
-          handle: "@miker",
-          testimonial: "Fast response time and great pricing. Thank you!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-mulatto-woman-with-trendy-make-up-standing-with-arms-crossed-office-indoor-photo-female-black-employee-posing-with-international-colleagues-gently-smile_197531-3788.jpg?_wi=1",
-        },
+          name: "Mike R.",          handle: "@miker",          testimonial: "Fast response time and great pricing. Thank you!",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-mulatto-woman-with-trendy-make-up-standing-with-arms-crossed-office-indoor-photo-female-black-employee-posing-with-international-colleagues-gently-smile_197531-3788.jpg?_wi=1"},
         {
-          name: "Emily D.",
-          handle: "@emilyd",
-          testimonial: "The best local service provider in town, very reliable.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-cute-female-posing-indoor_344912-969.jpg?_wi=1",
-        },
+          name: "Emily D.",          handle: "@emilyd",          testimonial: "The best local service provider in town, very reliable.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/young-cute-female-posing-indoor_344912-969.jpg?_wi=1"},
         {
-          name: "David L.",
-          handle: "@davidl",
-          testimonial: "Professional, on time, and finished under budget.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-green-wall-manager-call-centre-worker-happy-adorable-smiling-welcoming-all-calls_343596-6990.jpg",
-        },
+          name: "David L.",          handle: "@davidl",          testimonial: "Professional, on time, and finished under budget.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-green-wall-manager-call-centre-worker-happy-adorable-smiling-welcoming-all-calls_343596-6990.jpg"},
         {
-          name: "Jessica B.",
-          handle: "@jessb",
-          testimonial: "They made the whole process easy and stress-free.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/airbnb-host-welcoming-guests_23-2149872021.jpg",
-        },
+          name: "Jessica B.",          handle: "@jessb",          testimonial: "They made the whole process easy and stress-free.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/airbnb-host-welcoming-guests_23-2149872021.jpg"},
       ]}
       buttons={[
         {
-          text: "Call Now",
-          href: "tel:5551234567",
-        },
+          text: "Call Now",          href: "tel:5551234567"},
         {
-          text: "Get a Free Quote",
-          href: "/contact",
-        },
+          text: "Get a Free Quote",          href: "/contact"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg?_wi=1"
       imageAlt="Professional service technician at work"
       mediaAnimation="slide-up"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg",
-          alt: "Client 1",
-        },
+          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg",          alt: "Client 1"},
         {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-mulatto-woman-with-trendy-make-up-standing-with-arms-crossed-office-indoor-photo-female-black-employee-posing-with-international-colleagues-gently-smile_197531-3788.jpg",
-          alt: "Client 2",
-        },
+          src: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-mulatto-woman-with-trendy-make-up-standing-with-arms-crossed-office-indoor-photo-female-black-employee-posing-with-international-colleagues-gently-smile_197531-3788.jpg",          alt: "Client 2"},
         {
-          src: "http://img.b2bpic.net/free-photo/young-cute-female-posing-indoor_344912-969.jpg",
-          alt: "Client 3",
-        },
+          src: "http://img.b2bpic.net/free-photo/young-cute-female-posing-indoor_344912-969.jpg",          alt: "Client 3"},
         {
-          src: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-green-wall-manager-call-centre-worker-happy-adorable-smiling-welcoming-all-calls_343596-6990.jpg",
-          alt: "Client 4",
-        },
+          src: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-green-wall-manager-call-centre-worker-happy-adorable-smiling-welcoming-all-calls_343596-6990.jpg",          alt: "Client 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/airbnb-host-welcoming-guests_23-2149872021.jpg",
-          alt: "Client 5",
-        },
+          src: "http://img.b2bpic.net/free-photo/airbnb-host-welcoming-guests_23-2149872021.jpg",          alt: "Client 5"},
       ]}
       avatarText="Trusted by 500+ local homeowners"
       marqueeItems={[
         {
-          type: "text-icon",
-          text: "Licensed & Insured",
-          icon: ShieldCheck,
+          type: "text-icon",          text: "Licensed & Insured",          icon: ShieldCheck,
         },
         {
-          type: "text-icon",
-          text: "24/7 Support",
-          icon: Clock,
+          type: "text-icon",          text: "24/7 Support",          icon: Clock,
         },
         {
-          type: "text-icon",
-          text: "Top Rated",
-          icon: Star,
+          type: "text-icon",          text: "Top Rated",          icon: Star,
         },
         {
-          type: "text-icon",
-          text: "Fast Response",
-          icon: Zap,
+          type: "text-icon",          text: "Fast Response",          icon: Zap,
         },
         {
-          type: "text-icon",
-          text: "Expert Team",
-          icon: Wrench,
+          type: "text-icon",          text: "Expert Team",          icon: Wrench,
         },
       ]}
     />
@@ -167,20 +115,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Plumbing Services",
-          description: "Quick diagnosis and repairs for all pipe and drainage issues.",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg?_wi=2",
-        },
+          title: "Plumbing Services",          description: "Quick diagnosis and repairs for all pipe and drainage issues.",          imageSrc: "http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg?_wi=2"},
         {
-          title: "Electrical Work",
-          description: "Preventative maintenance and safe installations for your home.",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg?_wi=3",
-        },
+          title: "Electrical Work",          description: "Preventative maintenance and safe installations for your home.",          imageSrc: "http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg?_wi=3"},
         {
-          title: "Emergency Repairs",
-          description: "Emergency services available for immediate assistance day or night.",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg?_wi=4",
-        },
+          title: "Emergency Repairs",          description: "Emergency services available for immediate assistance day or night.",          imageSrc: "http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg?_wi=4"},
       ]}
       title="Our Professional Services"
       description="Comprehensive local services handled by our licensed expert team with speed and reliability."
@@ -196,27 +135,31 @@ export default function LandingPage() {
       description="We are proud of the work we have accomplished in our community."
       metrics={[
         {
-          id: "ex1",
-          icon: Wrench,
-          title: "Projects Completed",
-          value: "1200+",
-        },
+          id: "ex1",          icon: Wrench,
+          title: "Projects Completed",          value: "1200+"},
         {
-          id: "ex2",
-          icon: ThumbsUp,
-          title: "Happy Clients",
-          value: "99%",
-        },
+          id: "ex2",          icon: ThumbsUp,
+          title: "Happy Clients",          value: "99%"},
         {
-          id: "ex3",
-          icon: Award,
-          title: "Years Experience",
-          value: "20+",
-        },
+          id: "ex3",          icon: Award,
+          title: "Years Experience",          value: "20+"},
       ]}
     />
   </div>
 
+  <div id="leadCapture" data-section="leadCapture">
+      <ContactSplit
+        tag="Get In Touch"
+        title="Ready to Start Your Project?"
+        description="Contact our team today for a free consultation and personalized service quote."
+        background={{ variant: "sparkles-gradient" }}
+        useInvertedBackground={true}
+        imageSrc="http://img.b2bpic.net/free-photo/young-cute-female-posing-indoor_344912-969.jpg"
+        inputPlaceholder="Enter your email to request a callback"
+        buttonText="Request Callback"
+      />
+  </div>
+
   <div id="faq" data-section="faq">
       <FaqDouble
       textboxLayout="default"
@@ -226,15 +169,9 @@ export default function LandingPage() {
       faqsAnimation="slide-up"
       faqs={[
         {
-          id: "ex1",
-          title: "What payment methods do you accept?",
-          content: "We accept credit cards, cash, and digital wallets.",
-        },
+          id: "ex1",          title: "What payment methods do you accept?",          content: "We accept credit cards, cash, and digital wallets."},
         {
-          id: "ex2",
-          title: "Do you offer financing?",
-          content: "Yes, we have flexible financing options for larger projects.",
-        },
+          id: "ex2",          title: "Do you offer financing?",          content: "Yes, we have flexible financing options for larger projects."},
       ]}
     />
   </div>
@@ -246,11 +183,7 @@ export default function LandingPage() {
       title="Trusted by Local Leaders"
       description="We are the preferred service provider for top local businesses."
       names={[
-        "City Real Estate",
-        "Metro Property Management",
-        "Downtown Business Association",
-        "Home Maintenance Collective",
-      ]}
+        "City Real Estate",        "Metro Property Management",        "Downtown Business Association",        "Home Maintenance Collective"]}
     />
   </div>
 

src/app/services/electrical/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function ElectricalPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} />
+      </div>
+      <div className="pt-32 pb-20 px-6 max-w-5xl mx-auto">
+        <h1 className="text-5xl font-bold mb-6">Electrical Work</h1>
+        <p className="text-xl text-gray-600">Certified electrical services including light installations, panel upgrades, and safety inspections.</p>
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Get Help" title="Electrical Issues?" description="Contact us today to schedule your service." buttons={[{text: "Call Now", href: "tel:5551234567"}]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="LocalPro" />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/emergency/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function EmergencyPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} />
+      </div>
+      <div className="pt-32 pb-20 px-6 max-w-5xl mx-auto">
+        <h1 className="text-5xl font-bold mb-6">Emergency Repairs</h1>
+        <p className="text-xl text-gray-600">24/7 emergency response for critical home service issues when you need us most.</p>
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Get Help" title="Urgent Situation?" description="Call us immediately for emergency assistance." buttons={[{text: "Call Now", href: "tel:5551234567"}]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="LocalPro" />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/plumbing/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function PlumbingPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} />
+      </div>
+      <div className="pt-32 pb-20 px-6 max-w-5xl mx-auto">
+        <h1 className="text-5xl font-bold mb-6">Plumbing Services</h1>
+        <p className="text-xl text-gray-600">Professional plumbing solutions for your residential needs, including leak repairs, pipe installation, and drain clearing.</p>
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Get Help" title="Need a Plumber?" description="Contact us today to schedule your service." buttons={[{text: "Call Now", href: "tel:5551234567"}]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="LocalPro" />
+      </div>
+    </ThemeProvider>
+  );
+}