Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -29,116 +29,32 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Reviews",
-          id: "/reviews",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "Services", id: "/services" },
+        { name: "About", id: "/about" },
+        { name: "Reviews", id: "/reviews" },
+        { name: "Memberships", id: "/memberships" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Reliable Plumbing"
-      button={{
-        text: "Book Online",
-        href: "/contact",
-      }}
+      button={{ text: "Book Online", href: "/contact" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       title="Your Trusted Local Family Plumbers"
       description="Offering reliable, transparent, and same-day plumbing services. Licensed, insured, and ready for your emergency needs, 24/7."
       kpis={[
-        {
-          value: "4.8/5",
-          label: "Customer Rating",
-        },
-        {
-          value: "2,000+",
-          label: "Five-Star Reviews",
-        },
-        {
-          value: "24/7",
-          label: "Emergency Availability",
-        },
+        { value: "4.8/5", label: "Customer Rating" },
+        { value: "2,000+", label: "Five-Star Reviews" },
+        { value: "24/7", label: "Emergency Availability" },
       ]}
       enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "Book Now",
-          href: "/contact",
-        },
-        {
-          text: "Call Us",
-          href: "tel:5550123456",
-        },
-      ]}
+      buttons={[{ text: "Book Now", href: "/contact" }, { text: "Call Us", href: "tel:5550123456" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rvz7ej"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bg2raw",
-          alt: "Happy client 1",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s1zn1q",
-          alt: "Happy client 2",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b83b0u",
-          alt: "Happy client 3",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnseet",
-          alt: "Happy client 4",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w73ze4",
-          alt: "Happy client 5",
-        },
-      ]}
-      avatarText="Join 2,000+ happy local families"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Licensed & Insured",
-        },
-        {
-          type: "text-icon",
-          text: "24/7 Emergency",
-          icon: Clock,
-        },
-        {
-          type: "text",
-          text: "Family Owned",
-        },
-        {
-          type: "text-icon",
-          text: "Same-Day Service",
-          icon: Zap,
-        },
-        {
-          type: "text",
-          text: "Upfront Pricing",
-        },
-      ]}
     />
   </div>
 
@@ -148,39 +64,13 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          icon: Droplets,
-          title: "Water Heater Replacement",
-          description: "High-efficiency tank and tankless installation.",
-        },
-        {
-          icon: Wrench,
-          title: "Pipe & Repipe Work",
-          description: "Complete professional repiping for longevity.",
-        },
-        {
-          icon: AlertTriangle,
-          title: "Emergency Leak Repair",
-          description: "Same-day service for your urgent pipe bursts.",
-        },
-        {
-          icon: ShieldCheck,
-          title: "Drain Cleaning & Inspection",
-          description: "Keep your systems flowing with thorough inspections.",
-        },
-        {
-          icon: Settings,
-          title: "Sewer Line Repair",
-          description: "Reliable sewer line diagnostics and repairs.",
-        },
-        {
-          icon: Award,
-          title: "Plumbing Maintenance",
-          description: "Preventative care plans for long-term health.",
-        },
+        { icon: Droplets, title: "Water Heater Replacement", description: "High-efficiency tank and tankless installation." },
+        { icon: Wrench, title: "Pipe & Repipe Work", description: "Complete professional repiping for longevity." },
+        { icon: AlertTriangle, title: "Emergency Leak Repair", description: "Same-day service for your urgent pipe bursts." },
+        { icon: ShieldCheck, title: "Drain Cleaning & Inspection", description: "Keep your systems flowing with thorough inspections." },
       ]}
       title="Comprehensive Plumbing Solutions"
-      description="From emergency leaks to full system repipes, we have the tools and expertise to handle every plumbing project with honesty and efficiency."
+      description="From emergency leaks to full system repipes, we handle every plumbing project with honesty and efficiency."
     />
   </div>
 
@@ -190,39 +80,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       plans={[
-        {
-          id: "basic-m",
-          title: "Standard Support",
-          period: "yearly",
-          price: "$99",
-          features: [
-            "Annual Inspection",
-            "10% Off Repairs",
-            "Priority Scheduling",
-          ],
-          button: {
-            text: "Join Now",
-            href: "/contact",
-          },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d6qgpr",
-        },
-        {
-          id: "pro-m",
-          title: "Premium Membership",
-          period: "yearly",
-          price: "$199",
-          features: [
-            "Annual Inspection",
-            "20% Off Repairs",
-            "Emergency Fee Waived",
-            "Priority 24/7 Support",
-          ],
-          button: {
-            text: "Join Now",
-            href: "/contact",
-          },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gtebtz",
-        },
+        { id: "basic-m", title: "Standard Support", period: "yearly", price: "$99", features: ["Annual Inspection", "10% Off Repairs", "Priority Scheduling"], button: { text: "Join Now", href: "/contact" } },
+        { id: "pro-m", title: "Premium Membership", period: "yearly", price: "$199", features: ["Annual Inspection", "20% Off Repairs", "Emergency Fee Waived", "Priority 24/7 Support"], button: { text: "Join Now", href: "/contact" } },
       ]}
       title="Home Protection Membership"
       description="Join our VIP Club for priority service, annual inspections, and exclusive member discounts on all repairs."
@@ -235,84 +94,13 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Sarah J.",
-          handle: "@homeowner",
-          testimonial: "Same-day service was a lifesaver. Honest pricing and very knowledgeable technician.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bg2raw",
-        },
-        {
-          id: "2",
-          name: "Michael D.",
-          handle: "@resident",
-          testimonial: "They arrived exactly on time and fixed my leak in record time. Excellent service!",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s1zn1q",
-        },
-        {
-          id: "3",
-          name: "Emily R.",
-          handle: "@client",
-          testimonial: "Very professional and respectful of my home. The repiping project went perfectly.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b83b0u",
-        },
-        {
-          id: "4",
-          name: "David L.",
-          handle: "@homeowner",
-          testimonial: "Great family-owned business. I trust them completely with all my plumbing needs.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dnseet",
-        },
-        {
-          id: "5",
-          name: "Amanda T.",
-          handle: "@happy",
-          testimonial: "Fast, friendly, and did exactly what they quoted upfront. Highly recommend.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w73ze4",
-        },
+        { id: "1", name: "Sarah J.", handle: "@homeowner", testimonial: "Same-day service was a lifesaver. Honest pricing and very knowledgeable technician.", rating: 5 },
+        { id: "2", name: "Michael D.", handle: "@resident", testimonial: "They arrived exactly on time and fixed my leak in record time. Excellent service!", rating: 5 },
+        { id: "3", name: "Emily R.", handle: "@client", testimonial: "Very professional and respectful of my home. The repiping project went perfectly.", rating: 5 },
       ]}
       showRating={true}
-      title="What Our Neighbors Say"
-      description="Trusted by over 2,000 satisfied families in our community. We treat every home like our own."
-    />
-  </div>
-
-  <div id="metric" data-section="metric">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Our Impact in Numbers"
-      description="We are proud of the work we have accomplished in the community over the past two decades."
-      metrics={[
-        {
-          id: "m1",
-          value: "20+",
-          title: "Years Experience",
-          description: "Serving families since 2005.",
-          icon: Calendar,
-        },
-        {
-          id: "m2",
-          value: "5000+",
-          title: "Jobs Completed",
-          description: "Reliable service every time.",
-          icon: CheckCircle,
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          title: "Support Ready",
-          description: "Always here when you need us.",
-          icon: Phone,
-        },
-      ]}
+      title="Customer Reviews"
+      description="Trusted by over 2,000 satisfied families in our community."
     />
   </div>
 
@@ -320,45 +108,9 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="Reliable Plumbing"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "/about",
-            },
-            {
-              label: "Reviews",
-              href: "/reviews",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Repairs",
-              href: "/services",
-            },
-            {
-              label: "Installations",
-              href: "/services",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Reviews", href: "/reviews" }] },
+        { title: "Services", items: [{ label: "Repairs", href: "/services" }, { label: "Installations", href: "/services" }] },
+        { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "Privacy Policy", href: "#" }] },
       ]}
     />
   </div>

src/app/reviews/page.tsx

@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import { MessageSquare, Star } from "lucide-react";
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
-export default function LandingPage() {
+export default function ReviewsPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
@@ -22,111 +21,48 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Reviews",
-          id: "/reviews",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Reliable Plumbing"
-      button={{
-        text: "Book Online",
-        href: "/contact",
-      }}
-    />
-  </div>
-
-  <div id="metric" data-section="metric">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Proven Quality"
-      description="What our customers are saying across the city."
-      metrics={[
-        {
-          id: "r1",
-          value: "4.8",
-          title: "Avg Rating",
-          description: "Highly rated by local residents.",
-          icon: Star,
-        },
-        {
-          id: "r2",
-          value: "2k+",
-          title: "Reviews",
-          description: "Verified customer feedback.",
-          icon: MessageSquare,
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="Reliable Plumbing"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "/about",
-            },
-            {
-              label: "Reviews",
-              href: "/reviews",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Repairs",
-              href: "/services",
-            },
-            {
-              label: "Installations",
-              href: "/services",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+              navItems={[
+                  { name: "Home", id: "/" },
+                  { name: "Services", id: "/services" },
+                  { name: "About", id: "/about" },
+                  { name: "Reviews", id: "/reviews" },
+                  { name: "Memberships", id: "/memberships" },
+                  { name: "Contact", id: "/contact" },
+              ]}
+              brandName="Reliable Plumbing"
+              button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div className="pt-32 pb-20">
+          <div id="testimonial-section" data-section="testimonial-section">
+            <TestimonialCardThirteen
+                showRating={true}
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={false}
+                title="Detailed Customer Reviews"
+                description="See why 2,000+ local families trust our plumbing services for their homes and businesses."
+                testimonials={[
+                    { id: "r1", name: "Sarah J.", handle: "@homeowner", testimonial: "Fantastic work! The technician was very polite and explained everything before starting. Highly recommended.", rating: 5 },
+                    { id: "r2", name: "Michael D.", handle: "@client", testimonial: "Responsive and quick. Fixed my plumbing emergency on the same day. Great value.", rating: 5 },
+                    { id: "r3", name: "Emily R.", handle: "@resident", testimonial: "Professionalism is key here. They treated our property with respect and cleaned up entirely.", rating: 5 },
+                    { id: "r4", name: "David L.", handle: "@local", testimonial: "Upfront pricing, no hidden fees, and high-quality repairs that stand the test of time.", rating: 5 },
+                ]}
+            />
+          </div>
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Reliable Plumbing"
+            columns={[
+              { title: "Company", items: [{ label: "Home", href: "/" }, { label: "Reviews", href: "/reviews" }] },
+              { title: "Services", items: [{ label: "Repairs", href: "/services" }] },
+              { title: "Support", items: [{ label: "Contact", href: "/contact" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/services/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import { AlertTriangle, ThumbsUp } from "lucide-react";
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { AlertTriangle, Droplets, Gauge, ShieldCheck, Zap, Wrench, ThermometerSun } from "lucide-react";
 
-export default function LandingPage() {
+export default function ServicesPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
@@ -23,121 +22,50 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Reviews",
-          id: "/reviews",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Reliable Plumbing"
-      button={{
-        text: "Book Online",
-        href: "/contact",
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "About", id: "/about" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Reliable Plumbing"
+            button={{ text: "Book Online", href: "/contact" }}
+          />
+        </div>
 
-  <div id="services-page-body" data-section="services-page-body">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="Our Expert Plumbing Services"
-      description="We specialize in modern plumbing solutions with a focus on longevity and energy efficiency. From tankless water heaters to complex underground pipe repairs, our team is licensed, insured, and ready to serve."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2hh8de"
-    />
-  </div>
+        <div id="services-list" data-section="services-list">
+          <FeatureHoverPattern
+            title="Our Plumbing Services"
+            description="Expert solutions for all your residential plumbing needs, available with same-day and emergency support."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { icon: Droplets, title: "Water Heater Replacement", description: "High-efficiency tank replacement for your home." },
+              { icon: ThermometerSun, title: "Tankless Water Heater", description: "Endless hot water with modern tankless installation." },
+              { icon: Wrench, title: "Pipe & Repipe Work", description: "Complete home repiping to fix low pressure and leaks." },
+              { icon: AlertTriangle, title: "Leak Repair", description: "Fast response for emergency pipe bursts and leaks." },
+              { icon: Zap, title: "Sewer Line Repair", description: "Diagnostic and repair services for main sewer lines." },
+              { icon: ShieldCheck, title: "Drain Cleaning", description: "Clear stubborn clogs and restore flow to your pipes." },
+              { icon: Gauge, title: "Plumbing Inspections", description: "Preventative check-ups to identify potential issues early." }
+            ]}
+          />
+        </div>
 
-  <div id="metric" data-section="metric">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Why Choose Us?"
-      description="We provide transparent, high-quality plumbing services for all residential needs."
-      metrics={[
-        {
-          id: "s1",
-          value: "100%",
-          title: "Satisfaction",
-          description: "Guaranteed results on every project.",
-          icon: ThumbsUp,
-        },
-        {
-          id: "s2",
-          value: "24/7",
-          title: "Emergency",
-          description: "Available day or night.",
-          icon: AlertTriangle,
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="Reliable Plumbing"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "/about",
-            },
-            {
-              label: "Reviews",
-              href: "/reviews",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Repairs",
-              href: "/services",
-            },
-            {
-              label: "Installations",
-              href: "/services",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+            logoText="Reliable Plumbing"
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Reviews", href: "/reviews" }] },
+              { title: "Services", items: [{ label: "Repairs", href: "/services" }, { label: "Installations", href: "/services" }] },
+              { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "Privacy Policy", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}