Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,177 +2,164 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import { CheckCircle, ListChecks, Phone, Wrench, Sparkles, ShieldCheck, Zap } from "lucide-react";
-import { CheckCircle, ListChecks, Phone, Wrench } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="background-highlight"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
+        borderRadius="soft"
         contentWidth="medium"
-        sizing="medium"
+        sizing="large"
-        background="circleGradient"
+        background="noise"
         cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+          <NavbarStyleFullscreen
-      navItems={[
+            navItems={[
-        { name: "Home", id: "hero" },
+              { name: "Home", id: "hero" },
-        { name: "Services", id: "services" },
+              { name: "Services", id: "services" },
-        { name: "Why Us", id: "why-us" },
+              { name: "Why Us", id: "why-us" },
-        { name: "Testimonials", id: "testimonials" },
+              { name: "Testimonials", id: "testimonials" },
-        { name: "Contact", id: "contact" }
+              { name: "Booking", id: "contact" }
-      ]}
+            ]}
-    />
+            brandName="G&S Detailing"
-  </div>
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplit
+          <HeroBillboardDashboard
-      background={{ variant: "gradient-bars" }}
+            background={{ variant: "sparkles-gradient" }}
-      title="Plumbing Done Right — Without the Runaround"
+            title="Precision. Protection. Perfection."
-      description="When you call, we answer. When we schedule, we show up. Professional plumbing services done clean, fast, and right the first time."
+            description="G&S Detailing delivers elite automotive care for discerning enthusiasts. We don't just clean cars; we restore their soul with showroom-grade results."
-      buttons={[
+            buttons={[
-        { text: "Get a Free Estimate", href: "#contact" },
+              { text: "Book Your Detail", href: "#contact" },
-        { text: "Call Now: (414) 555-0199", href: "tel:4145550199" }
+              { text: "View Our Services", href: "#services" }
-      ]}
+            ]}
-      imageSrc="http://img.b2bpic.net/free-photo/plumber-doing-victory-gesture_1368-6312.jpg"
+            dashboard={{
-      mediaAnimation="slide-up"
+              title: "Detailing Progress",              stats: [
-      avatars={[
+                { title: "Full Details", values: [1, 2, 4], description: "Restored to factory finish" },
-        { src: "http://img.b2bpic.net/free-photo/confident-office-employers-thumbing-up-smiling-two-happy-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-cooperation-concept_74855-6924.jpg", alt: "Satisfied client" },
+                { title: "Ceramic Coatings", values: [0, 8, 2], description: "Ultimate paint protection" },
-        { src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg", alt: "Happy client" },
+                { title: "Interior Restorations", values: [1, 5, 0], description: "Deep clean rejuvenation" }
-        { src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-glasses-shaking-hands-with-female-partner-meeting-co-working-space_74855-10006.jpg", alt: "Professional partner" },
+              ],
-        { src: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg", alt: "Professional client" },
+              logoIcon: Sparkles,
-        { src: "http://img.b2bpic.net/free-photo/happy-adult-daughter-mature-father-meeting-with-family-consultant-co-working-shaking-hands_74855-15154.jpg", alt: "Consulted client" }
+              sidebarItems: [{ icon: ShieldCheck, active: true }, { icon: Zap }],
-      ]}
+              listItems: [{ icon: CheckCircle, title: "Inspection Passed", status: "Complete" }, { icon: Wrench, title: "Deep Clean", status: "In Progress" }],
-      avatarText="Trusted by over 500+ Milwaukee families"
+              buttons: [{ text: "Get Quote" }],
-      marqueeItems={[
+              imageSrc: "http://img.b2bpic.net/free-photo/shiny-new-car-detailing-service_141793-74591.jpg"
-        { type: "text", text: "24/7 Emergency Service" },
+            }}
-        { type: "text", text: "Fully Licensed & Insured" },
+          />
-        { type: "text", text: "Upfront Pricing" },
+        </div>
-        { type: "text", text: "Local Milwaukee Experts" },
-        { type: "text", text: "Family Owned & Operated" }
-      ]}
-    />
-  </div>
 
-  <div id="social-proof" data-section="social-proof">
+        <div id="services" data-section="services">
-      <SocialProofOne
+          <FeatureCardTwentySix
-      textboxLayout="default"
+            title="Signature Detailing Suites"
-      useInvertedBackground={false}
+            description="From high-gloss ceramic coatings to interior steam cleaning, our services are engineered to preserve your vehicle's value and aesthetics."
-      names={["Greenfield", "Milwaukee", "Shorewood", "West Allis", "Wauwatosa", "Whitefish Bay", "Fox Point"]}
+            features={[
-      title="Trusted by Milwaukee Area Homeowners"
+              { title: "Full Exterior Detail", description: "Hand wash, clay bar, iron decontamination, and premium wax finish.", buttonIcon: Sparkles },
-      description="Professional service with a 5-star reputation for quality and punctuality."
+              { title: "Interior Deep Clean", description: "Steam extraction, leather conditioning, and total surface sanitization.", buttonIcon: Zap },
-    />
+              { title: "Ceramic Paint Protection", description: "Hard-shell coating providing up to 5 years of UV and grime protection.", buttonIcon: ShieldCheck },
-  </div>
+              { title: "Engine Bay Rejuvenation", description: "Detailed degreasing and dressing of all engine components.", buttonIcon: Wrench }
+            ]}
+            textboxLayout="inline-image"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="services" data-section="services">
+        <div id="why-us" data-section="why-us">
-      <FeatureCardSixteen
+          <MetricSplitMediaAbout
-      animationType="slide-up"
+            title="Why Luxury Car Owners Choose G&S"
-      textboxLayout="default"
+            description="We treat every vehicle as a masterwork. Our meticulous attention to detail is what sets us apart in the industry."
-      useInvertedBackground={false}
+            metrics={[
-      negativeCard={{ items: ["Basement Remodeling", "Drain & Pipe Work", "Gas Line Maintenance"] }}
+              { value: "500+", title: "Luxury Vehicles Serviced" },
-      positiveCard={{ items: ["General Plumbing Repairs", "Installations & Upgrades", "Water Heater Services"] }}
+              { value: "100%", title: "Satisfaction Guaranteed" },
-      title="Complete Plumbing Services — Done Professionally"
+              { value: "24/7", title: "Online Booking Support" }
-      description="From small leaks to full bathroom remodels, we provide high-quality workmanship in every project."
+            ]}
-    />
+            useInvertedBackground={false}
-  </div>
+            imageSrc="http://img.b2bpic.net/free-photo/detailer-working-car-interior_141793-74591.jpg"
+          />
+        </div>
 
-  <div id="why-us" data-section="why-us">
+        <div id="testimonials" data-section="testimonials">
-      <InlineImageSplitTextAbout
+          <TestimonialCardTen
-      useInvertedBackground={false}
+            title="Client Highlights"
-      heading={[
+            description="Experience the standard of excellence that keeps our clients returning."
-        { type: "text", content: "The Plumbing Company People Actually Recommend" },
+            textboxLayout="split"
-        { type: "image", src: "http://img.b2bpic.net/free-photo/pleased-young-male-builder-wearing-uniform-safety-helmet-points-camera-pink_141793-74591.jpg", alt: "Professional plumber smiling friendly" }
+            useInvertedBackground={true}
-      ]}
+            testimonials={[
-    />
+              { id: "1", title: "Showroom Quality", quote: "My car looks better than the day I bought it. The ceramic coating is incredible.", name: "Marcus V.", role: "Porsche 911 Owner" },
-  </div>
+              { id: "2", title: "Impeccable Detail", quote: "I have never seen an interior clean like this. They got every corner.", name: "Sarah L.", role: "Range Rover Owner" }
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="process" data-section="process">
-      <TestimonialCardThirteen
+          <MetricCardThree
-      animationType="slide-up"
+            title="Our Proven Methodology"
-      textboxLayout="default"
+            description="Every vehicle follows a strict multi-point refinement process."
-      useInvertedBackground={false}
+            metrics={[
-      testimonials={[
+              { id: "1", icon: ShieldCheck, title: "Assessment", value: "Evaluation" },
-        { id: "1", name: "Erika E.", handle: "Milwaukee", testimonial: "He was the best plumber I've ever had. Fast, on time, tidy, and professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg" },
+              { id: "2", icon: Zap, title: "Deep Refinement", value: "Restoration" },
-        { id: "2", name: "Aileen R.", handle: "Greenfield", testimonial: "Brad took the time to walk through everything I needed and explain the costs. Smooth experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businesswomen-discussing-having-fun_53876-119798.jpg" },
+              { id: "3", icon: Sparkles, title: "Final Polish", value: "Protection" }
-        { id: "3", name: "Jim B.", handle: "Shorewood", testimonial: "Handled everything from a full bathroom to water heaters. High-quality work across the board.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg" },
+            ]}
-        { id: "4", name: "Sarah J.", handle: "West Allis", testimonial: "Always answer the phone when I call. So refreshing to work with a team that respects my time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/photo-black-woman-caucasian-guy-have-outdoor-walk-stand-closely_273609-18072.jpg" },
+            textboxLayout="split"
-        { id: "5", name: "Mike D.", handle: "Wauwatosa", testimonial: "They showed up exactly on time and fixed the leak quickly. Very clean work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/excited-multiethnic-couple-stand-surrounded-by-moving-boxes-taking-break-capture-selfie-with_482257-134995.jpg" }
+            animationType="slide-up"
-      ]}
+            useInvertedBackground={false}
-      showRating={true}
+          />
-      title="Real Experiences from Real Customers"
+        </div>
-      description="See why neighbors trust us."
-    />
-  </div>
 
-  <div id="process" data-section="process">
+        <div id="service-area" data-section="service-area">
-      <MetricCardOne
+          <FaqDouble
-      animationType="slide-up"
+            title="Refinement FAQ"
-      textboxLayout="default"
+            description="Everything you need to know about professional detailing."
-      gridVariant="uniform-all-items-equal"
+            faqs={[
-      useInvertedBackground={false}
+              { id: "1", title: "How often should I detail?", content: "For protection, every 4-6 months is recommended." },
-      metrics={[
+              { id: "2", title: "Is your soap paint safe?", content: "Yes, we only use pH-neutral, high-end automotive products." },
-        { id: "step1", value: "01", title: "Inquiry", description: "Call or request your free estimate online.", icon: Phone },
+              { id: "3", title: "How do I book?", content: "Use our automated portal below for real-time scheduling." }
-        { id: "step2", value: "02", title: "Assessment", description: "We explain options clearly and honestly.", icon: ListChecks },
+            ]}
-        { id: "step3", value: "03", title: "Execution", description: "High-quality, clean, efficient work.", icon: Wrench },
+            textboxLayout="split"
-        { id: "step4", value: "04", title: "Result", description: "Reliable plumbing that stands the test of time.", icon: CheckCircle }
+            faqsAnimation="blur-reveal"
-      ]}
+            useInvertedBackground={true}
-      title="Simple. Clear. Stress-Free."
+          />
-      description="Our proven 4-step process ensures a seamless experience for every homeowner."
+        </div>
-    />
-  </div>
 
-  <div id="service-area" data-section="service-area">
+        <div id="contact" data-section="contact">
-      <FaqSplitMedia
+          <ContactCTA
-      textboxLayout="split"
+            tag="Booking"
-      useInvertedBackground={false}
+            title="Secure Your Detail Today"
-      faqs={[
+            description="Availability is limited for our signature suites. Claim your spot in our schedule and give your car the treatment it deserves."
-        { id: "faq1", title: "Do you serve my area?", content: "We cover Greenfield, Milwaukee, Shorewood, West Allis, Wauwatosa, and surrounding areas." },
+            buttons={[
-        { id: "faq2", title: "Are you licensed?", content: "Yes, our team is fully licensed and insured for all plumbing and gas work." },
+              { text: "Schedule Your Service Now", href: "#booking" }
-        { id: "faq3", title: "Do you offer free estimates?", content: "Absolutely. Contact us to discuss your project and get a clear, honest estimate." }
+            ]}
-      ]}
+            background={{ variant: "sparkles-gradient" }}
-      imageSrc="http://img.b2bpic.net/free-photo/map-montana-polygonal-mesh-line-map-flag-map_559531-11409.jpg"
+            useInvertedBackground={false}
-      title="Proudly Serving Southeastern Wisconsin"
+          />
-      description="We are committed to delivering top-tier plumbing services to homeowners across our local communities."
+        </div>
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="footer" data-section="footer">
-      <ContactCenter
+          <FooterBase
-      useInvertedBackground={false}
+            logoText="G&S Detailing"
-      background={{ variant: "gradient-bars" }}
+            columns={[
-      tag="Get Started Today"
+              { title: "Detailing", items: [{ label: "Ceramic Coatings", href: "#services" }, { label: "Interior Detail", href: "#services" }] },
-      title="Need a Plumber You Can Count On?"
+              { title: "Company", items: [{ label: "About", href: "#why-us" }, { label: "Contact", href: "#contact" }] }
-      description="Stop chasing contractors who don’t call back. Work with a team that respects your time and your home."
+            ]}
-    />
+            copyrightText="© 2025 G&S Detailing LLC"
-  </div>
+          />
-
+        </div>
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="Greenfield Plumbing LLC"
-      columns={[
-        { title: "Services", items: [{ label: "General Repairs", href: "#services" }, { label: "Installations", href: "#services" }, { label: "Water Heaters", href: "#services" }] },
-        { title: "Company", items: [{ label: "About Us", href: "#why-us" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact", href: "#contact" }] }
-      ]}
-      copyrightText="© 2025 Greenfield Plumbing LLC"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F9FAF9;
+  --background: #0a0a0a;
-  --card: #ffffff;
+  --card: #1a1a1a;
-  --foreground: #2A2A2A;
+  --foreground: #ffffff;
-  --primary-cta: #0F3D2E;
+  --primary-cta: #1f7cff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #C8A96A;
+  --secondary-cta: #010101;
   --secondary-cta-text: #0F3D2E;
-  --accent: #C8A96A;
+  --accent: #1f7cff;
-  --background-accent: #E5E7EB;
+  --background-accent: #f96b2f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);