Merge version_3 into main

Merge version_3 into main

src/app/about/page.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Award, CheckCircle, Users, Clock, Zap, Phone, Mail, MapPin, Target, Lightbulb, Heart } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="ProServe"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Why Us", id: "why-us" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Call Now",            href: "tel:+1-555-0123"
+          }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="About ProServe Plumbing"
+          description="Over 20 years of trusted service to residential and commercial customers throughout Texas"
+          tag="Our Story"
+          tagAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/plumbers-in-the-office_1368-4340.jpg"
+          imageAlt="ProServe team"
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          ariaLabel="About page hero section"
+        />
+      </div>
+
+      <div id="trust" data-section="trust">
+        <AboutMetric
+          title="Our Track Record of Excellence"
+          metrics={[
+            { icon: Award, label: "Years in Business", value: "20+" },
+            { icon: Users, label: "Satisfied Customers", value: "5000+" },
+            { icon: CheckCircle, label: "Certified Professionals", value: "50+" },
+            { icon: Clock, label: "Average Response", value: "30 min" }
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={true}
+          ariaLabel="Company metrics and achievements"
+        />
+      </div>
+
+      <div id="mission" data-section="mission">
+        <FeatureCardTwelve
+          title="Our Mission & Values"
+          description="We're dedicated to providing exceptional plumbing services with integrity, expertise, and customer care at the heart of everything we do"
+          features={[
+            {
+              id: "mission",              label: "Mission",              title: "Exceptional Service",              items: ["Deliver reliable plumbing solutions", "Build lasting customer relationships", "Support our community with quality work", "Maintain the highest professional standards"]
+            },
+            {
+              id: "integrity",              label: "Integrity",              title: "Honest & Transparent",              items: ["Transparent pricing and estimates", "No hidden fees or surprises", "Clear communication throughout projects", "Stand behind our work with guarantees"]
+            },
+            {
+              id: "expertise",              label: "Expertise",              title: "Skilled Professionals",              items: ["Licensed and insured technicians", "Ongoing training and certification", "Latest tools and techniques", "Years of industry experience"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Company mission and values"
+        />
+      </div>
+
+      <div id="why-choose" data-section="why-choose">
+        <FeatureCardTwelve
+          title="Why Choose ProServe?"
+          description="We combine experience, reliability, and customer-focused service to deliver exceptional results"
+          tag="Differentiators"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "experience",              label: "Experience",              title: "20+ Years of Expertise",              items: ["Serving residential and commercial clients", "Experienced with all plumbing systems", "Proven track record of success", "Licensed and fully insured"]
+            },
+            {
+              id: "availability",              label: "Available",              title: "24/7 Emergency Service",              items: ["Always available when you need us", "30-minute response guarantee", "Same-day service options", "Emergency hotline support"]
+            },
+            {
+              id: "customer",              label: "Customer",              title: "Customer-Focused Approach",              items: ["Transparent communication", "No hidden fees", "Quality guarantees", "Follow-up support included"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          ariaLabel="Why choose ProServe section"
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardEleven
+          title="Meet Our Team"
+          description="The experienced professionals behind ProServe Plumbing"
+          tag="Our Team"
+          tagIcon={Users}
+          tagAnimation="slide-up"
+          groups={[
+            {
+              id: "management",              groupTitle: "Leadership",              members: [
+                {
+                  id: "1",                  title: "Michael Thompson",                  subtitle: "Founder & CEO",                  detail: "michael@proserve.com",                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-handsome-man-with-beard-looking-thoughtful-upper-left-corner-imaging-smiling_1258-26774.jpg?_wi=2",                  imageAlt: "Michael Thompson"
+                },
+                {
+                  id: "2",                  title: "Sarah Johnson",                  subtitle: "Operations Manager",                  detail: "sarah@proserve.com",                  imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5055.jpg?_wi=2",                  imageAlt: "Sarah Johnson"
+                }
+              ]
+            },
+            {
+              id: "technicians",              groupTitle: "Master Technicians",              members: [
+                {
+                  id: "3",                  title: "James Rodriguez",                  subtitle: "Master Plumber",                  detail: "james@proserve.com",                  imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg?_wi=2",                  imageAlt: "James Rodriguez"
+                },
+                {
+                  id: "4",                  title: "David Williams",                  subtitle: "Master Plumber",                  detail: "david@proserve.com",                  imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-extend-hand-handshake-greeting-business-partner-saleswoman-wel_1258-127442.jpg?_wi=2",                  imageAlt: "David Williams"
+                },
+                {
+                  id: "5",                  title: "Emily Chen",                  subtitle: "Senior Technician",                  detail: "emily@proserve.com",                  imageSrc: "http://img.b2bpic.net/free-photo/beautiful-curly-woman-with-lgbt-flag_23-2149123940.jpg?_wi=2",                  imageAlt: "Emily Chen"
+                }
+              ]
+            },
+            {
+              id: "support",              groupTitle: "Customer Support",              members: [
+                {
+                  id: "6",                  title: "Jennifer Lopez",                  subtitle: "Customer Service Lead",                  detail: "jennifer@proserve.com",                  imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-business-thinking-creative-beauty-black-lady-african-american-girl-isolated-gray-background_640221-36.jpg?_wi=2",                  imageAlt: "Jennifer Lopez"
+                },
+                {
+                  id: "7",                  title: "Lisa Anderson",                  subtitle: "Scheduling Coordinator",                  detail: "lisa@proserve.com",                  imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-extend-hand-handshake-greeting-business-partner-saleswoman-wel_1258-127442.jpg?_wi=3",                  imageAlt: "Lisa Anderson"
+                }
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Team members directory"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="ProServe"
+          copyrightText="© 2025 ProServe Plumbing. All rights reserved."
+          socialLinks={[
+            { icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
+            { icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
+            { icon: MapPin, href: "#", ariaLabel: "Find us on map" }
+          ]}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Phone, Mail, MapPin, Clock, AlertCircle, CheckCircle } from 'lucide-react';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="ProServe"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Why Us", id: "why-us" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Call Now",            href: "tel:+1-555-0123"
+          }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Get in Touch With ProServe"
+          description="We're here to help with your plumbing needs. Reach out for a free quote or emergency service."
+          tag="Contact Us"
+          tagAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/customer-service-employees-having-team-meeting_1368-7524.jpg"
+          imageAlt="Contact us"
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          ariaLabel="Contact page hero section"
+        />
+      </div>
+
+      <div id="contact-info" data-section="contact-info">
+        <FeatureCardTwelve
+          title="Contact Information & Service Area"
+          description="Multiple ways to reach us for your plumbing needs"
+          features={[
+            {
+              id: "phone",              label: "Phone",              title: "Call Us Anytime",              items: ["Local: (555) 0123", "Toll Free: 1-800-PROSERVE", "24/7 Emergency Line", "Quick response guaranteed"]
+            },
+            {
+              id: "service-area",              label: "Service Area",              title: "Serving All of Texas",              items: ["Dallas & Fort Worth", "Houston & Austin", "San Antonio & Suburbs", "Emergency service available statewide"]
+            },
+            {
+              id: "hours",              label: "Hours",              title: "Always Available",              items: ["Monday - Friday: 8AM - 6PM", "Saturday - Sunday: 9AM - 4PM", "24/7 Emergency Response", "Holiday service available"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Contact information and service area"
+        />
+      </div>
+
+      <div id="quote-form" data-section="quote-form">
+        <ContactSplitForm
+          title="Get Your Free Plumbing Quote"
+          description="Fill out the form to receive a detailed estimate from our team. We'll contact you within 30 minutes with pricing and availability. For immediate assistance, call us directly."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "service", type: "text", placeholder: "What service do you need?", required: true }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Describe your plumbing issue in detail. The more details you provide, the more accurate our estimate will be...",            rows: 6,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/technician-checking-heating-system-boiler-room_169016-53010.jpg?_wi=4"
+          imageAlt="Professional plumbing service"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Request Free Quote"
+          ariaLabel="Lead capture quote form"
+        />
+      </div>
+
+      <div id="why-choose" data-section="why-choose">
+        <FeatureCardTwelve
+          title="Why Request a Quote From ProServe?"
+          description="We make the quoting process simple, transparent, and obligation-free"
+          features={[
+            {
+              id: "free",              label: "Free",              title: "100% Free Quotes",              items: ["No cost for estimates", "No hidden charges", "Transparent pricing breakdown", "Obligation-free assessment"]
+            },
+            {
+              id: "fast",              label: "Fast",              title: "Quick Turnaround",              items: ["30-minute response time", "Same-day service available", "Immediate emergency assistance", "No lengthy wait times"]
+            },
+            {
+              id: "professional",              label: "Expert",              title: "Licensed Professionals",              items: ["Certified technicians", "Years of experience", "Quality guaranteed", "Fully insured service"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          ariaLabel="Why choose ProServe for quotes"
+        />
+      </div>
+
+      <div id="emergency" data-section="emergency">
+        <FeatureCardTwelve
+          title="Emergency Plumbing Service"
+          description="For urgent plumbing issues, we're available 24/7 to help you"
+          tag="Emergency"
+          features={[
+            {
+              id: "burst-pipe",              label: "Burst Pipes",              title: "Water Line Emergencies",              items: ["Immediate response", "Water damage mitigation", "Temporary and permanent repairs", "Preventive solutions"]
+            },
+            {
+              id: "backup",              label: "Backup",              title: "Sewage & Drain Backup",              items: ["Quick diagnostic assessment", "Safe cleanup and sanitization", "Fast resolution", "Prevention services"]
+            },
+            {
+              id: "gas",              label: "No Heat",              title: "Water Heater & Gas Issues",              items: ["Gas leak detection", "Water heater repair", "Emergency replacement", "Safety inspection"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Call Emergency Line", href: "tel:+1-555-0123" }]}
+          ariaLabel="Emergency plumbing services"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="ProServe"
+          copyrightText="© 2025 ProServe Plumbing. All rights reserved."
+          socialLinks={[
+            { icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
+            { icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
+            { icon: MapPin, href: "#", ariaLabel: "Find us on map" }
+          ]}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,43 +1,21 @@
 import type { Metadata } from "next";
-import { Mulish } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const mulish = Mulish({
-  variable: "--font-mulish",  subsets: ["latin"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Professional Plumbing Services | ProServe",  description: "Expert plumbing services with 20+ years experience. Fast response, transparent pricing, licensed & insured. Call now for free quote or emergency service.",  keywords: "plumbing services, emergency plumber, drain cleaning, water heater, licensed plumber, affordable plumbing",  openGraph: {
-    title: "Professional Plumbing Services | ProServe",    description: "Get professional plumbing help fast. Licensed, insured, and available 24/7. Free quotes and same-day service available.",    type: "website",    siteName: "ProServe Plumbing"},
-  twitter: {
-    card: "summary_large_image",    title: "Professional Plumbing Services | ProServe",    description: "Expert plumbing solutions for your home or business. Call now for free estimate."},
-  robots: {
-    index: true,
-    follow: true,
-  },
+  title: "ProServe Plumbing - Trusted Plumbing Services",  description: "Professional plumbing solutions for residential and commercial properties. Licensed, insured, and available for emergency service."
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${mulish.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={inter.className}>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1405,7 +1383,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -32,7 +32,8 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Why Us", id: "why-us" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
           ]}
           button={{
             text: "Call Now",            href: "tel:+1-555-0123"
@@ -44,22 +45,22 @@ export default function LandingPage() {
       <div id="hero" data-section="hero">
         <HeroSplitDualMedia
           title="Trusted Plumbing Services in Your Area – Fast, Affordable, Reliable"
-          description="Professional plumbing solutions for residential and commercial properties. Licensed, insured, and available for emergency service. Get a free quote today or call for immediate assistance."
+          description="Professional plumbing solutions for residential and commercial properties. Join 5,000+ satisfied customers who trust our licensed, insured team for emergency service and expert repairs. Get a free quote today or call for immediate assistance."
           tag="Expert Plumbing"
           tagIcon={Wrench}
           tagAnimation="slide-up"
           background={{ variant: "plain" }}
           buttons={[
             { text: "Call Now", href: "tel:+1-555-0123" },
-            { text: "Get Free Quote", href: "#contact" }
+            { text: "Get Free Quote", href: "/contact" }
           ]}
           buttonAnimation="slide-up"
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/profile-man-touching-socket-wall-with-screwdriver_259150-58245.jpg",              imageAlt: "Professional plumber at work"
+              imageSrc: "http://img.b2bpic.net/free-photo/profile-man-touching-socket-wall-with-screwdriver_259150-58245.jpg?_wi=1",              imageAlt: "Professional plumber at work"
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/plumber-covering-his-ears_1368-769.jpg",              imageAlt: "Drain cleaning service"
+              imageSrc: "http://img.b2bpic.net/free-photo/plumber-covering-his-ears_1368-769.jpg?_wi=1",              imageAlt: "Drain cleaning service"
             }
           ]}
           mediaAnimation="slide-up"
@@ -168,27 +169,27 @@ export default function LandingPage() {
           testimonials={[
             {
               id: "1",              name: "Sarah Mitchell",              role: "Homeowner",              company: "Dallas, TX",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg",              imageAlt: "Sarah Mitchell"
+              imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg?_wi=1",              imageAlt: "Sarah Mitchell"
             },
             {
               id: "2",              name: "James Rodriguez",              role: "Property Manager",              company: "Austin, TX",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-handsome-man-with-beard-looking-thoughtful-upper-left-corner-imaging-smiling_1258-26774.jpg",              imageAlt: "James Rodriguez"
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-handsome-man-with-beard-looking-thoughtful-upper-left-corner-imaging-smiling_1258-26774.jpg?_wi=1",              imageAlt: "James Rodriguez"
             },
             {
               id: "3",              name: "Emily Chen",              role: "Business Owner",              company: "Houston, TX",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-curly-woman-with-lgbt-flag_23-2149123940.jpg",              imageAlt: "Emily Chen"
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-curly-woman-with-lgbt-flag_23-2149123940.jpg?_wi=1",              imageAlt: "Emily Chen"
             },
             {
               id: "4",              name: "Michael Thompson",              role: "Homeowner",              company: "San Antonio, TX",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5055.jpg",              imageAlt: "Michael Thompson"
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5055.jpg?_wi=1",              imageAlt: "Michael Thompson"
             },
             {
               id: "5",              name: "Jennifer Lopez",              role: "Restaurant Owner",              company: "Fort Worth, TX",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-business-thinking-creative-beauty-black-lady-african-american-girl-isolated-gray-background_640221-36.jpg",              imageAlt: "Jennifer Lopez"
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-business-thinking-creative-beauty-black-lady-african-american-girl-isolated-gray-background_640221-36.jpg?_wi=1",              imageAlt: "Jennifer Lopez"
             },
             {
               id: "6",              name: "David Williams",              role: "Homeowner",              company: "Arlington, TX",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-extend-hand-handshake-greeting-business-partner-saleswoman-wel_1258-127442.jpg",              imageAlt: "David Williams"
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-extend-hand-handshake-greeting-business-partner-saleswoman-wel_1258-127442.jpg?_wi=1",              imageAlt: "David Williams"
             }
           ]}
           kpiItems={[
@@ -218,7 +219,7 @@ export default function LandingPage() {
             required: true
           }}
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/technician-checking-heating-system-boiler-room_169016-53010.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/technician-checking-heating-system-boiler-room_169016-53010.jpg?_wi=1"
           imageAlt="Professional plumbing service"
           mediaAnimation="slide-up"
           mediaPosition="right"

src/app/services/installation/page.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Phone, Mail, MapPin, Zap, CheckCircle, Award } from 'lucide-react';
+
+export default function InstallationServicePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="ProServe"
+          navItems={[
+            { name: "Services", id: "/services" },
+            { name: "Why Us", id: "/" },
+            { name: "Testimonials", id: "/" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Call Now",            href: "tel:+1-555-0123"
+          }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Professional Plumbing Installation & Upgrades"
+          description="Complete installation services for water heaters, fixtures, remodeling, and new construction. Licensed installers ensure code compliance and expert workmanship. Transform your space with our professional expertise."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "20+", label: "Years Installing" },
+            { value: "100%", label: "Code Compliant" },
+            { value: "30 days", label: "Warranty" }
+          ]}
+          enableKpiAnimation={true}
+          imageSrc="http://img.b2bpic.net/free-photo/plumber-installing-modern-mixer-tap-in-bathroom_1368-27110.jpg"
+          imageAlt="Professional plumbing installation"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Get Free Quote", href: "#contact" },
+            { text: "Call Now", href: "tel:+1-555-0123" }
+          ]}
+          buttonAnimation="slide-up"
+          tag="Installation & Upgrade Services"
+          ariaLabel="Installation service hero"
+        />
+      </div>
+
+      <div id="service-details" data-section="service-details">
+        <FeatureCardTwentyOne
+          title="What We Install & Upgrade"
+          description="Complete range of professional installation services for your home or business"
+          tag="Our Installation Services"
+          imageSrc="http://img.b2bpic.net/free-photo/bathroom-interior_23-2150787266.jpg"
+          imageAlt="Modern bathroom with professional plumbing"
+          mediaAnimation="slide-up"
+          mediaPosition="left"
+          accordionItems={[
+            {
+              id: "1",              title: "Water Heater Installation",              content: "Expert installation of tankless, electric, and gas water heaters. We help you choose the right capacity and type for your needs. Includes all necessary connections, venting, and safety inspections. Energy-efficient models available to reduce utility costs."
+            },
+            {
+              id: "2",              title: "Bathroom Remodeling",              content: "Complete bathroom upgrades including fixture installation, tile work, and plumbing layout redesign. We handle everything from design consultation to final inspection. Code compliant and built to last. Multiple style options and price points available."
+            },
+            {
+              id: "3",              title: "Kitchen Plumbing",              content: "Sink installation, faucet upgrades, garbage disposal installation, and ice maker lines. We ensure proper drainage and water pressure. Design options for modern, traditional, and transitional styles. All work meets current building codes."
+            },
+            {
+              id: "4",              title: "New Construction Plumbing",              content: "Complete rough-in and finish plumbing for new homes and buildings. We work from blueprints and coordinate with general contractors. All work inspected and certified. Budget-friendly packages available for custom builds."
+            },
+            {
+              id: "5",              title: "Fixture & Accessory Installation",              content: "Professional installation of toilets, sinks, faucets, showers, and other fixtures. Expert mounting and connection ensures longevity and proper function. Brand selection and warranty information provided for all installations."
+            }
+          ]}
+          useInvertedBackground={false}
+          buttons={[{ text: "Schedule Installation", href: "#contact" }]}
+          buttonAnimation="slide-up"
+          ariaLabel="Installation service details"
+        />
+      </div>
+
+      <div id="process" data-section="process">
+        <FeatureCardTwentyOne
+          title="Our Installation Process"
+          description="Smooth, professional installation from consultation to completion"
+          imageSrc="http://img.b2bpic.net/free-photo/master-plumber-worker-working-on-sink_1368-27110.jpg"
+          imageAlt="Professional installation process"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          accordionItems={[
+            {
+              id: "1",              title: "1. Initial Consultation",              content: "We discuss your project goals, budget, and timeline. Our experts assess your space and provide professional recommendations. You'll see product options and get a detailed estimate before any work begins."
+            },
+            {
+              id: "2",              title: "2. Planning & Design",              content: "Once approved, we create a detailed plan ensuring all code requirements are met. We coordinate timing and logistics. Any necessary permits are handled by our team to ensure compliance."
+            },
+            {
+              id: "3",              title: "3. Professional Installation",              content: "Licensed technicians complete the installation with minimal disruption. We use quality materials and proven techniques. Regular updates keep you informed of progress. All work is performed to manufacturer and code specifications."
+            },
+            {
+              id: "4",              title: "4. Final Inspection & Testing",              content: "Comprehensive testing ensures everything functions perfectly. We perform pressure tests, leak checks, and code inspections. You'll receive documentation and warranty information. Follow-up support available if needed."
+            }
+          ]}
+          useInvertedBackground={true}
+          ariaLabel="Installation process explanation"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Ready to Upgrade Your Plumbing?"
+          description="Schedule your installation today with ProServe's expert team. We provide free estimates and professional guidance to help you choose the right solutions for your project."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "projectType", type: "text", placeholder: "Type of installation project", required: true }
+          ]}
+          textarea={{
+            name: "projectDetails",            placeholder: "Tell us about your project. What are you looking to install or upgrade?",            rows: 5,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/plumber-installing-kitchen-sink_1368-27110.jpg"
+          imageAlt="Kitchen plumbing installation"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Get Free Estimate"
+          ariaLabel="Installation quote request form"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="ProServe"
+          copyrightText="© 2025 ProServe Plumbing. All rights reserved."
+          socialLinks={[
+            { icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
+            { icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
+            { icon: MapPin, href: "#", ariaLabel: "Find us on map" }
+          ]}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/maintenance/page.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Phone, Mail, MapPin, Shield, Zap, Clock } from 'lucide-react';
+
+export default function MaintenanceServicePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="ProServe"
+          navItems={[
+            { name: "Services", id: "/services" },
+            { name: "Why Us", id: "/" },
+            { name: "Testimonials", id: "/" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Call Now",            href: "tel:+1-555-0123"
+          }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Preventive Plumbing Maintenance Plans"
+          description="Protect your plumbing investment with regular maintenance. Catch problems early before they become expensive emergencies. Affordable plans designed for residential and commercial properties."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "50%", label: "Cost Savings" },
+            { value: "5 year", label: "System Lifespan" },
+            { value: "99%", label: "Prevention Rate" }
+          ]}
+          enableKpiAnimation={true}
+          imageSrc="http://img.b2bpic.net/free-photo/professional-maintenance-service_1368-27110.jpg"
+          imageAlt="Professional plumbing maintenance"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Start Maintenance Plan", href: "#contact" },
+            { text: "Call Now", href: "tel:+1-555-0123" }
+          ]}
+          buttonAnimation="slide-up"
+          tag="Preventive Maintenance"
+          ariaLabel="Maintenance service hero"
+        />
+      </div>
+
+      <div id="service-details" data-section="service-details">
+        <FeatureCardTwentyOne
+          title="What's Included in Our Maintenance Plans"
+          description="Comprehensive care to keep your plumbing system running smoothly"
+          tag="Maintenance Services"
+          imageSrc="http://img.b2bpic.net/free-photo/technician-inspecting-pipes_1368-27110.jpg"
+          imageAlt="Expert plumbing inspection"
+          mediaAnimation="slide-up"
+          mediaPosition="left"
+          accordionItems={[
+            {
+              id: "1",              title: "Annual System Inspection",              content: "Professional technicians perform comprehensive inspections of your entire plumbing system including pipes, fixtures, and connections. We identify potential issues before they become problems. Written reports provided with recommendations and preventive measures."
+            },
+            {
+              id: "2",              title: "Drain Cleaning & Maintenance",              content: "Regular drain cleaning prevents costly clogs and backups. We use professional equipment to maintain optimal flow. Preventive treatment options available to reduce future buildup. Quarterly or semi-annual schedules recommended for best results."
+            },
+            {
+              id: "3",              title: "Water Heater Maintenance",              content: "Scheduled flushing removes sediment buildup that reduces efficiency. We inspect pressure relief valves, thermostats, and connections. Annual maintenance extends tank life and improves performance. Tankless system checks available for newer systems."
+            },
+            {
+              id: "4",              title: "Leak Detection & Repair",              content: "Early leak detection saves money and prevents water damage. We use advanced detection equipment to locate hidden leaks. Repair or replacement performed immediately upon discovery. Regular monitoring prevents small leaks from becoming big problems."
+            },
+            {
+              id: "5",              title: "Seasonal Preparation",              content: "Winterization prevents freeze damage and burst pipes in cold weather. Spring inspections check for freeze damage. Summer efficiency checks ensure optimal performance. Fall preparation readies systems for winter conditions."
+            },
+            {
+              id: "6",              title: "Water Quality Testing",              content: "Professional testing identifies water quality issues including hardness, pH, and contaminants. We recommend filtration or treatment options if needed. Annual testing tracks water quality changes. Custom solutions available for specific concerns."
+            }
+          ]}
+          useInvertedBackground={false}
+          buttons={[{ text: "Enroll in Plan", href: "#contact" }]}
+          buttonAnimation="slide-up"
+          ariaLabel="Maintenance service details"
+        />
+      </div>
+
+      <div id="benefits" data-section="benefits">
+        <FeatureCardTwentyOne
+          title="Why Preventive Maintenance Pays Off"
+          description="Avoid expensive emergency repairs with proactive care"
+          imageSrc="http://img.b2bpic.net/free-photo/save-money-concept_1368-27110.jpg"
+          imageAlt="Money-saving plumbing maintenance"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          accordionItems={[
+            {
+              id: "1",              title: "Save Money on Emergency Repairs",              content: "Emergency plumbing repairs cost 3-5 times more than scheduled maintenance. Prevention reduces emergency calls by up to 75%. Small repairs addressed early prevent major system failures. Extended system lifespan reduces replacement costs significantly."
+            },
+            {
+              id: "2",              title: "Prevent Water Damage",              content: "Water damage claims average $11,000 per incident. Early leak detection prevents catastrophic damage. Regular inspections catch problems before they spread. Maintenance plans include damage prevention strategies."
+            },
+            {
+              id: "3",              title: "Improve Water & System Efficiency",              content: "Well-maintained systems operate 30-40% more efficiently. Water heater maintenance reduces energy consumption. Drain maintenance improves water flow and pressure. Efficiency improvements reduce utility bills monthly."
+            },
+            {
+              id: "4",              title: "Extend System Lifespan",              content: "Proper maintenance adds years to plumbing system life. Regular care prevents premature pipe corrosion. Water heaters last longer with proper maintenance. Fixtures perform optimally with minimal problems."
+            }
+          ]}
+          useInvertedBackground={true}
+          ariaLabel="Benefits of preventive maintenance"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Protect Your Plumbing Investment"
+          description="Enroll in a ProServe maintenance plan today. Our affordable plans keep your system running smoothly and protect you from costly emergency repairs."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "propertyType", type: "text", placeholder: "Property type (residential/commercial)", required: true }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Tell us about your property and any current plumbing concerns...",            rows: 5,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/maintenance-schedule-calendar_1368-27110.jpg"
+          imageAlt="Maintenance plan scheduling"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Start Maintenance Plan"
+          ariaLabel="Maintenance plan enrollment form"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="ProServe"
+          copyrightText="© 2025 ProServe Plumbing. All rights reserved."
+          socialLinks={[
+            { icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
+            { icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
+            { icon: MapPin, href: "#", ariaLabel: "Find us on map" }
+          ]}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { MapPin, Phone, Mail, Wrench, Zap, ArrowRight } from 'lucide-react';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="ProServe"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Why Us", id: "/" },
+            { name: "Testimonials", id: "/" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Call Now",            href: "tel:+1-555-0123"
+          }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Professional Plumbing Services for Every Need"
+          description="From emergency repairs to full system installations, ProServe delivers expert plumbing solutions backed by 20+ years of experience. Licensed, insured, and available 24/7."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "20+", label: "Years of Experience" },
+            { value: "5000+", label: "Satisfied Customers" },
+            { value: "24/7", label: "Emergency Available" }
+          ]}
+          enableKpiAnimation={true}
+          imageSrc="http://img.b2bpic.net/free-photo/profile-man-touching-socket-wall-with-screwdriver_259150-58245.jpg?_wi=2"
+          imageAlt="Professional plumbing services"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Get Free Quote", href: "#contact" },
+            { text: "Call Now", href: "tel:+1-555-0123" }
+          ]}
+          buttonAnimation="slide-up"
+          tag="All Services"
+          ariaLabel="Services page hero section"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTwelve
+          title="Our Complete Range of Plumbing Services"
+          description="Professional solutions tailored to residential and commercial needs"
+          tag="Service Categories"
+          tagIcon={Wrench}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "emergency-repair",              label: "Emergency",              title: "24/7 Emergency Plumbing Repair",              items: [
+                "Burst pipes and leaks",                "Blocked drains and sewage issues",                "Water heater failures",                "Fixture malfunctions",                "Same-day response guaranteed"
+              ],
+              buttons: [{ text: "View Details", href: "/services/repair" }]
+            },
+            {
+              id: "drain-cleaning",              label: "Drains",              title: "Professional Drain Cleaning",              items: [
+                "Clogged drain removal",                "Video drain inspection",                "Hydro jetting services",                "Root removal and treatment",                "Preventive drain maintenance"
+              ],
+              buttons: [{ text: "View Details", href: "/services/repair" }]
+            },
+            {
+              id: "water-heater",              label: "Water Heater",              title: "Water Heater Installation & Repair",              items: [
+                "Tankless water heater installation",                "Traditional tank replacement",                "Water heater maintenance",                "Temperature and pressure relief",                "Energy-efficient upgrades"
+              ],
+              buttons: [{ text: "View Details", href: "/services/installation" }]
+            },
+            {
+              id: "bathroom-remodel",              label: "Remodel",              title: "Bathroom & Kitchen Remodeling",              items: [
+                "Full bathroom renovation",                "Kitchen plumbing upgrades",                "Fixture installation",                "Layout design consultation",                "Permit and code compliance"
+              ],
+              buttons: [{ text: "View Details", href: "/services/installation" }]
+            },
+            {
+              id: "maintenance",              label: "Maintain",              title: "Preventive Maintenance Plans",              items: [
+                "Annual system inspections",                "Pipe and fixture maintenance",                "Seasonal preparation service",                "Leak detection and prevention",                "Water quality testing"
+              ],
+              buttons: [{ text: "View Details", href: "/services/maintenance" }]
+            },
+            {
+              id: "commercial",              label: "Commercial",              title: "Commercial Plumbing Solutions",              items: [
+                "Restaurant plumbing systems",                "Office building maintenance",                "Grease trap services",                "Industrial piping solutions",                "24/7 emergency response"
+              ],
+              buttons: [{ text: "View Details", href: "/services/maintenance" }]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Schedule Service", href: "#contact" }]}
+          buttonAnimation="slide-up"
+          ariaLabel="Complete services overview"
+        />
+      </div>
+
+      <div id="service-areas" data-section="service-areas">
+        <FeatureCardTwelve
+          title="Service Areas We Cover"
+          description="Serving the greater Dallas-Fort Worth metropolitan area with fast, reliable plumbing service"
+          features={[
+            {
+              id: "dallas",              label: "Dallas",              title: "Dallas & Surrounding Areas",              items: [
+                "Downtown Dallas",                "Highland Park",                "University Park",                "Oak Lawn",                "Average response time: 25 minutes"
+              ]
+            },
+            {
+              id: "fort-worth",              label: "Fort Worth",              title: "Fort Worth & Nearby Communities",              items: [
+                "Downtown Fort Worth",                "Clearfork District",                "Cultural District",                "Arlington",                "Average response time: 30 minutes"
+              ]
+            },
+            {
+              id: "suburbs",              label: "Suburbs",              title: "Greater DFW Suburbs",              items: [
+                "Plano",                "Frisco",                "Irving",                "Garland",                "Extended service areas available"
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          tag="Coverage"
+          tagIcon={MapPin}
+          tagAnimation="slide-up"
+          ariaLabel="Service coverage areas"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Ready to Schedule Your Plumbing Service?"
+          description="Contact ProServe today for a free estimate or to schedule emergency service. Our team responds within 30 minutes for emergency calls available 24/7."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "service", type: "text", placeholder: "What service do you need?", required: true }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Describe your plumbing issue or project...",            rows: 5,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/technician-checking-heating-system-boiler-room_169016-53010.jpg?_wi=2"
+          imageAlt="Professional plumbing service"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Request Free Quote"
+          ariaLabel="Contact form for service request"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="ProServe"
+          copyrightText="© 2025 ProServe Plumbing. All rights reserved."
+          socialLinks={[
+            { icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
+            { icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
+            { icon: MapPin, href: "#", ariaLabel: "Find us on map" }
+          ]}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/repair/page.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Phone, Mail, MapPin, Wrench, Clock, Shield } from 'lucide-react';
+
+export default function RepairServicePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="ProServe"
+          navItems={[
+            { name: "Services", id: "/services" },
+            { name: "Why Us", id: "/" },
+            { name: "Testimonials", id: "/" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Call Now",            href: "tel:+1-555-0123"
+          }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Expert Plumbing Repair & Emergency Services"
+          description="Fast, reliable emergency and routine plumbing repairs available 24/7. Same-day service with 30-minute response guarantee. Licensed technicians ready to solve any plumbing problem."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "24/7", label: "Emergency Available" },
+            { value: "30 min", label: "Response Time" },
+            { value: "100%", label: "Licensed & Insured" }
+          ]}
+          enableKpiAnimation={true}
+          imageSrc="http://img.b2bpic.net/free-photo/profile-man-touching-socket-wall-with-screwdriver_259150-58245.jpg?_wi=3"
+          imageAlt="Professional emergency plumbing repair"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Emergency Call", href: "tel:+1-555-0123" },
+            { text: "Get Free Quote", href: "#contact" }
+          ]}
+          buttonAnimation="slide-up"
+          tag="Repair & Emergency Services"
+          ariaLabel="Emergency repair service hero"
+        />
+      </div>
+
+      <div id="service-details" data-section="service-details">
+        <FeatureCardTwentyOne
+          title="Common Plumbing Issues We Fix"
+          description="Expert solutions for all types of residential and commercial plumbing problems"
+          tag="What We Repair"
+          imageSrc="http://img.b2bpic.net/free-photo/plumber-covering-his-ears_1368-769.jpg?_wi=2"
+          imageAlt="Professional drain cleaning and repair"
+          mediaAnimation="slide-up"
+          mediaPosition="left"
+          accordionItems={[
+            {
+              id: "1",              title: "Burst & Leaking Pipes",              content: "Whether it's a small drip or a major burst, our technicians quickly locate and repair all types of pipe damage. We use modern detection equipment and can handle emergency repairs with same-day service. Solutions range from patching to full pipe replacement depending on severity and material type."
+            },
+            {
+              id: "2",              title: "Clogged Drains & Sewage",              content: "From simple clogs to complex sewer line issues, we have the equipment and expertise to clear any obstruction. Our video inspection service pinpoints the exact problem location. We offer both mechanical and hydro-jetting solutions to ensure your drains flow freely."
+            },
+            {
+              id: "3",              title: "Water Heater Problems",              content: "No hot water? Leaking tank? Strange noises? Our technicians diagnose and repair all water heater types and brands. We perform maintenance, repairs, and replacement when necessary. Energy-efficient upgrades available to reduce utility bills."
+            },
+            {
+              id: "4",              title: "Fixture Replacement & Repair",              content: "Broken faucets, leaking toilets, malfunctioning showers? We repair or replace all bathroom and kitchen fixtures. Expert installation ensures proper function and longevity. Wide selection of styles and brands available."
+            },
+            {
+              id: "5",              title: "Emergency Shutoff & Prevention",              content: "In case of major leaks, our emergency shutoff service stops water flow immediately to prevent property damage. We also install and maintain shutoff valves, backflow preventers, and pressure regulators to protect your plumbing system."
+            }
+          ]}
+          useInvertedBackground={false}
+          buttons={[{ text: "Schedule Repair", href: "#contact" }]}
+          buttonAnimation="slide-up"
+          ariaLabel="Detailed repair service information"
+        />
+      </div>
+
+      <div id="why-choose" data-section="why-choose">
+        <FeatureCardTwentyOne
+          title="Why Choose ProServe for Your Repairs?"
+          description="More than just fixing problems—we prevent future issues"
+          imageSrc="http://img.b2bpic.net/free-photo/technician-checking-heating-system-boiler-room_169016-53010.jpg?_wi=3"
+          imageAlt="Expert technician performing quality work"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          accordionItems={[
+            {
+              id: "1",              title: "Expert Technicians",              content: "All our technicians are licensed, insured, and highly trained with 10+ years of experience. We stay current with the latest plumbing codes and techniques. Background checks and credentials available upon request."
+            },
+            {
+              id: "2",              title: "Transparent Pricing",              content: "No surprise charges or hidden fees. We provide free estimates before any work begins. Pricing is upfront and competitive. We stand behind our work with a satisfaction guarantee."
+            },
+            {
+              id: "3",              title: "Fast Response Times",              content: "30-minute response guarantee on emergency calls. Same-day service available for most repairs. Scheduling flexibility to work around your schedule. Emergency line available 24/7."
+            },
+            {
+              id: "4",              title: "Quality Workmanship",              content: "We use only high-quality materials and parts that last. Every repair includes a satisfaction guarantee. Follow-up service available to ensure everything is working perfectly after repair completion."
+            }
+          ]}
+          useInvertedBackground={true}
+          ariaLabel="Why choose us for repair service"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Get Professional Repair Service Today"
+          description="Don't let plumbing problems worsen. Contact ProServe for fast, reliable repair service. Emergency calls answered 24/7 with 30-minute response guarantee."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "issueType", type: "text", placeholder: "Type of plumbing issue", required: true }
+          ]}
+          textarea={{
+            name: "description",            placeholder: "Describe the problem in detail. Is it an emergency?",            rows: 5,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/close-up-hands-plumber-fixing-broken-sink-bathroom_1368-27137.jpg"
+          imageAlt="Professional plumbing repair work"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          buttonText="Request Service"
+          ariaLabel="Plumbing repair quote form"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="ProServe"
+          copyrightText="© 2025 ProServe Plumbing. All rights reserved."
+          socialLinks={[
+            { icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
+            { icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
+            { icon: MapPin, href: "#", ariaLabel: "Find us on map" }
+          ]}
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0798ff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #ff8c42;
   --secondary-cta-text: #0c1325;
-  --accent: #93c7ff;
-  --background-accent: #a8cde8;
+  --accent: #0a7039;
+  --background-accent: #e2e2e2;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);