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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { CheckCircle, ListChecks, Phone, Wrench } from "lucide-react";
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import { CheckCircle, ListChecks, Phone, Wrench, Sparkles, ShieldCheck, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="background-highlight"
-        borderRadius="rounded"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
         contentWidth="medium"
-        sizing="medium"
-        background="circleGradient"
+        sizing="large"
+        background="noise"
         cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        { name: "Home", id: "hero" },
-        { name: "Services", id: "services" },
-        { name: "Why Us", id: "why-us" },
-        { name: "Testimonials", id: "testimonials" },
-        { name: "Contact", id: "contact" }
-      ]}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Services", id: "services" },
+              { name: "Why Us", id: "why-us" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "Booking", id: "contact" }
+            ]}
+            brandName="G&S Detailing"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplit
-      background={{ variant: "gradient-bars" }}
-      title="Plumbing Done Right — Without the Runaround"
-      description="When you call, we answer. When we schedule, we show up. Professional plumbing services done clean, fast, and right the first time."
-      buttons={[
-        { text: "Get a Free Estimate", href: "#contact" },
-        { text: "Call Now: (414) 555-0199", href: "tel:4145550199" }
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/plumber-doing-victory-gesture_1368-6312.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        { 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" },
-        { src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg", alt: "Happy client" },
-        { 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" },
-        { 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" }
-      ]}
-      avatarText="Trusted by over 500+ Milwaukee families"
-      marqueeItems={[
-        { type: "text", text: "24/7 Emergency Service" },
-        { type: "text", text: "Fully Licensed & Insured" },
-        { type: "text", text: "Upfront Pricing" },
-        { type: "text", text: "Local Milwaukee Experts" },
-        { type: "text", text: "Family Owned & Operated" }
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardDashboard
+            background={{ variant: "sparkles-gradient" }}
+            title="Precision. Protection. Perfection."
+            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={[
+              { text: "Book Your Detail", href: "#contact" },
+              { text: "View Our Services", href: "#services" }
+            ]}
+            dashboard={{
+              title: "Detailing Progress",              stats: [
+                { title: "Full Details", values: [1, 2, 4], description: "Restored to factory finish" },
+                { title: "Ceramic Coatings", values: [0, 8, 2], description: "Ultimate paint protection" },
+                { title: "Interior Restorations", values: [1, 5, 0], description: "Deep clean rejuvenation" }
+              ],
+              logoIcon: Sparkles,
+              sidebarItems: [{ icon: ShieldCheck, active: true }, { icon: Zap }],
+              listItems: [{ icon: CheckCircle, title: "Inspection Passed", status: "Complete" }, { icon: Wrench, title: "Deep Clean", status: "In Progress" }],
+              buttons: [{ text: "Get Quote" }],
+              imageSrc: "http://img.b2bpic.net/free-photo/shiny-new-car-detailing-service_141793-74591.jpg"
+            }}
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={["Greenfield", "Milwaukee", "Shorewood", "West Allis", "Wauwatosa", "Whitefish Bay", "Fox Point"]}
-      title="Trusted by Milwaukee Area Homeowners"
-      description="Professional service with a 5-star reputation for quality and punctuality."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureCardTwentySix
+            title="Signature Detailing Suites"
+            description="From high-gloss ceramic coatings to interior steam cleaning, our services are engineered to preserve your vehicle's value and aesthetics."
+            features={[
+              { title: "Full Exterior Detail", description: "Hand wash, clay bar, iron decontamination, and premium wax finish.", buttonIcon: Sparkles },
+              { 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 },
+              { 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">
-      <FeatureCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      negativeCard={{ items: ["Basement Remodeling", "Drain & Pipe Work", "Gas Line Maintenance"] }}
-      positiveCard={{ items: ["General Plumbing Repairs", "Installations & Upgrades", "Water Heater Services"] }}
-      title="Complete Plumbing Services — Done Professionally"
-      description="From small leaks to full bathroom remodels, we provide high-quality workmanship in every project."
-    />
-  </div>
+        <div id="why-us" data-section="why-us">
+          <MetricSplitMediaAbout
+            title="Why Luxury Car Owners Choose G&S"
+            description="We treat every vehicle as a masterwork. Our meticulous attention to detail is what sets us apart in the industry."
+            metrics={[
+              { value: "500+", title: "Luxury Vehicles Serviced" },
+              { value: "100%", title: "Satisfaction Guaranteed" },
+              { value: "24/7", title: "Online Booking Support" }
+            ]}
+            useInvertedBackground={false}
+            imageSrc="http://img.b2bpic.net/free-photo/detailer-working-car-interior_141793-74591.jpg"
+          />
+        </div>
 
-  <div id="why-us" data-section="why-us">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={false}
-      heading={[
-        { type: "text", content: "The Plumbing Company People Actually Recommend" },
-        { 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" }
-      ]}
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTen
+            title="Client Highlights"
+            description="Experience the standard of excellence that keeps our clients returning."
+            textboxLayout="split"
+            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" },
+              { 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">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        { 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", 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", 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" },
-        { 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" }
-      ]}
-      showRating={true}
-      title="Real Experiences from Real Customers"
-      description="See why neighbors trust us."
-    />
-  </div>
+        <div id="process" data-section="process">
+          <MetricCardThree
+            title="Our Proven Methodology"
+            description="Every vehicle follows a strict multi-point refinement process."
+            metrics={[
+              { id: "1", icon: ShieldCheck, title: "Assessment", value: "Evaluation" },
+              { id: "2", icon: Zap, title: "Deep Refinement", value: "Restoration" },
+              { id: "3", icon: Sparkles, title: "Final Polish", value: "Protection" }
+            ]}
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="process" data-section="process">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        { id: "step1", value: "01", title: "Inquiry", description: "Call or request your free estimate online.", icon: Phone },
-        { 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 },
-        { id: "step4", value: "04", title: "Result", description: "Reliable plumbing that stands the test of time.", icon: CheckCircle }
-      ]}
-      title="Simple. Clear. Stress-Free."
-      description="Our proven 4-step process ensures a seamless experience for every homeowner."
-    />
-  </div>
+        <div id="service-area" data-section="service-area">
+          <FaqDouble
+            title="Refinement FAQ"
+            description="Everything you need to know about professional detailing."
+            faqs={[
+              { id: "1", title: "How often should I detail?", content: "For protection, every 4-6 months is recommended." },
+              { id: "2", title: "Is your soap paint safe?", content: "Yes, we only use pH-neutral, high-end automotive products." },
+              { id: "3", title: "How do I book?", content: "Use our automated portal below for real-time scheduling." }
+            ]}
+            textboxLayout="split"
+            faqsAnimation="blur-reveal"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="service-area" data-section="service-area">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        { id: "faq1", title: "Do you serve my area?", content: "We cover Greenfield, Milwaukee, Shorewood, West Allis, Wauwatosa, and surrounding areas." },
-        { id: "faq2", title: "Are you licensed?", content: "Yes, our team is fully licensed and insured for all plumbing and gas work." },
-        { id: "faq3", title: "Do you offer free estimates?", content: "Absolutely. Contact us to discuss your project and get a clear, honest estimate." }
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/map-montana-polygonal-mesh-line-map-flag-map_559531-11409.jpg"
-      title="Proudly Serving Southeastern Wisconsin"
-      description="We are committed to delivering top-tier plumbing services to homeowners across our local communities."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Booking"
+            title="Secure Your Detail Today"
+            description="Availability is limited for our signature suites. Claim your spot in our schedule and give your car the treatment it deserves."
+            buttons={[
+              { text: "Schedule Your Service Now", href: "#booking" }
+            ]}
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{ variant: "gradient-bars" }}
-      tag="Get Started Today"
-      title="Need a Plumber You Can Count On?"
-      description="Stop chasing contractors who don’t call back. Work with a team that respects your time and your home."
-    />
-  </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>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="G&S Detailing"
+            columns={[
+              { title: "Detailing", items: [{ label: "Ceramic Coatings", href: "#services" }, { label: "Interior Detail", href: "#services" }] },
+              { title: "Company", items: [{ label: "About", href: "#why-us" }, { label: "Contact", href: "#contact" }] }
+            ]}
+            copyrightText="© 2025 G&S Detailing LLC"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

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