Update src/app/how-it-works/page.tsx

Merge version_9 into main

src/app/about/page.tsx

@@ -27,25 +27,15 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Services",
-          id: "/services",
-        },
+          name: "Services",          id: "/services"},
         {
-          name: "How It Works",
-          id: "/how-it-works",
-        },
+          name: "How It Works",          id: "/how-it-works"},
         {
-          name: "About",
-          id: "/about",
-        },
+          name: "About",          id: "/about"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
       ]}
       brandName="Nicks 2 Interlock"
     />
@@ -59,14 +49,10 @@ export default function LandingPage() {
       useInvertedBackground={false}
       members={[
         {
-          id: "m1",
-          name: "Owner Operator",
-          role: "Direct Access Support",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/professional-owner-operator-portrait-fri-1774639653250-fb822ddf.png?_wi=1",
-        },
+          id: "m1",          name: "Owner Operator",          role: "Direct Access Support",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/professional-owner-operator-portrait-fri-1774639653250-fb822ddf.png?_wi=1"},
       ]}
       title="Local Service You Can Trust"
-      description="Serving Colorado since 2008 with a dedicated, owner-led business approach."
+      description="Serving Colorado for 16+ Years with a dedicated, owner-led business approach."
     />
   </div>
 
@@ -79,29 +65,21 @@ export default function LandingPage() {
       description="Connecting you with reliable, non-judgmental support services."
       features={[
         {
-          title: "Supportive Environment",
-          description: "We provide a safe space for every client.",
-          icon: Users,
+          title: "Supportive Environment",          description: "We provide a safe space for every client.",          icon: Users,
           mediaItems: [
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=3",
-            },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=3"},
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=3",
-            },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=3"},
           ],
         },
         {
-          title: "Local Experts",
-          description: "Decades of industry experience.",
-          icon: MapPin,
+          title: "Local Experts",          description: "Decades of industry experience.",          icon: MapPin,
           mediaItems: [
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/beautiful-outdoor-view-of-longmont-color-1774639654787-e8e05126.png",
-            },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/beautiful-outdoor-view-of-longmont-color-1774639654787-e8e05126.png"},
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/professional-owner-operator-portrait-fri-1774639653250-fb822ddf.png?_wi=2",
-            },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/professional-owner-operator-portrait-fri-1774639653250-fb822ddf.png?_wi=2"},
           ],
         },
       ]}
@@ -114,17 +92,11 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Home",
-              href: "/",
-            },
+              label: "Home",              href: "/"},
             {
-              label: "Services",
-              href: "/services",
-            },
+              label: "Services",              href: "/services"},
             {
-              label: "Contact",
-              href: "/contact",
-            },
+              label: "Contact",              href: "/contact"},
           ],
         },
       ]}

src/app/contact/page.tsx

@@ -26,25 +26,15 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Services",
-          id: "/services",
-        },
+          name: "Services",          id: "/services"},
         {
-          name: "How It Works",
-          id: "/how-it-works",
-        },
+          name: "How It Works",          id: "/how-it-works"},
         {
-          name: "About",
-          id: "/about",
-        },
+          name: "About",          id: "/about"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
       ]}
       brandName="Nicks 2 Interlock"
     />
@@ -54,16 +44,13 @@ export default function LandingPage() {
       <ContactCTA
       useInvertedBackground={false}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       tag="Get in touch"
       title="Need Help? Reach Out Today."
       description="We are ready to guide you through the process with personal, expert service."
       buttons={[
         {
-          text: "Call Now",
-          href: "tel:+15550102030",
-        },
+          text: "Call Now",          href: "tel:+15550102030"},
       ]}
     />
   </div>
@@ -77,35 +64,19 @@ export default function LandingPage() {
       description="Get in touch today for personalized pricing."
       plans={[
         {
-          id: "q1",
-          badge: "Standard",
-          price: "Custom",
-          subtitle: "Initial Consultation",
-          features: [
-            "Needs assessment",
-            "Service scheduling",
-          ],
+          id: "q1",          badge: "Standard",          price: "Custom",          subtitle: "Initial Consultation",          features: [
+            "Needs assessment",            "Service scheduling"],
           buttons: [
             {
-              text: "Contact",
-              href: "#",
-            },
+              text: "Contact",              href: "#"},
           ],
         },
         {
-          id: "q2",
-          badge: "Direct",
-          price: "Call Now",
-          subtitle: "Speak to Owner",
-          features: [
-            "Direct support",
-            "Fast response",
-          ],
+          id: "q2",          badge: "Direct",          price: "Call Now",          subtitle: "Speak to Owner",          features: [
+            "Direct support",            "Fast response"],
           buttons: [
             {
-              text: "Call",
-              href: "tel:+15550102030",
-            },
+              text: "Call",              href: "tel:+15550102030"},
           ],
         },
       ]}
@@ -118,17 +89,11 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Home",
-              href: "/",
-            },
+              label: "Home",              href: "/"},
             {
-              label: "Services",
-              href: "/services",
-            },
+              label: "Services",              href: "/services"},
             {
-              label: "Contact",
-              href: "/contact",
-            },
+              label: "Contact",              href: "/contact"},
           ],
         },
       ]}

src/app/how-it-works/page.tsx

@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
-export default function LandingPage() {
+export default function HowItWorksPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -15,146 +14,59 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumLarge"
-        background="grid"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        background="floatingGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "How It Works",
-          id: "/how-it-works",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Nicks 2 Interlock"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "How It Works", id: "/how-it-works" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Nicks 2 Interlock"
+          />
+        </div>
 
-  <div id="steps" data-section="steps">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Step 1: Requirement",
-          price: "Get Started",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/icon-of-a-legal-document-high-quality-gr-1774639651614-ad88088b.png?_wi=2",
-        },
-        {
-          id: "p2",
-          name: "Step 2: Installation",
-          price: "Schedule Today",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/installation-toolset-professional-and-cl-1774639654423-df9c56cd.png",
-        },
-        {
-          id: "p3",
-          name: "Step 3: Calibration",
-          price: "Stay Compliant",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/calibration-gauge-precise-and-technical-1774639653315-52e976f6.png",
-        },
-        {
-          id: "p4",
-          name: "Step 4: Final Removal",
-          price: "Complete Success",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/success-checkmark-sign-professional-grap-1774639655488-fe8de368.jpg",
-        },
-      ]}
-      title="Simple 4-Step Process"
-      description="We make your requirements clear and easy to follow."
-    />
-  </div>
+        <div id="timeline" data-section="timeline" className="py-20">
+            <TimelinePhoneView
+                title="Your Journey to Compliance"
+                description="Our process is designed to be simple, respectful, and fully compliant with Colorado DMV requirements."
+                textboxLayout="split"
+                animationType="blur-reveal"
+                items={[
+                    { 
+                        trigger: "1. Schedule Appointment", 
+                        content: "Contact our team to book your installation. We prioritize urgent needs to get you back on the road quickly.", 
+                        imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png" 
+                    },
+                    { 
+                        trigger: "2. Professional Installation", 
+                        content: "Our certified technicians perform a precise, non-invasive installation. We walk you through every step of using your new device.", 
+                        imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/modern-interlock-device-inside-a-car-das-1774639652262-ff35b505.png" 
+                    },
+                    { 
+                        trigger: "3. Regular Calibration", 
+                        content: "Stay compliant with mandatory periodic data downloads and calibrations. We make this quick and effortless for you.", 
+                        imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/bright-and-clean-workshop-space-modern-f-1774639652470-f0dc2695.png" 
+                    }
+                ]}
+            />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Investment"
-      description="Affordable options tailored to your specific compliance needs."
-      plans={[
-        {
-          id: "s1",
-          badge: "Plan A",
-          price: "$100",
-          subtitle: "Basic",
-          features: [
-            "Fast install",
-            "Regular checkup",
-          ],
-          buttons: [
-            {
-              text: "Sign Up",
-              href: "#",
-            },
-          ],
-        },
-        {
-          id: "s2",
-          badge: "Plan B",
-          price: "$200",
-          subtitle: "Advanced",
-          features: [
-            "Full documentation",
-            "Priority support",
-          ],
-          buttons: [
-            {
-              text: "Sign Up",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-      ]}
-      logoText="Nicks 2 Interlock Services"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] }]}
+            logoText="Nicks 2 Interlock"
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -8,7 +8,7 @@ import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwen
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import { Award, CheckCircle, Clock, Heart, ShieldCheck, ThumbsUp } from "lucide-react";
 
 export default function LandingPage() {
@@ -19,36 +19,21 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumLarge"
-        background="grid"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        background="floatingGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "How It Works",
-          id: "/how-it-works",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "Services", id: "/services" },
+        { name: "How It Works", id: "/how-it-works" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Nicks 2 Interlock"
     />
@@ -56,241 +41,77 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Get Back on the Road with Confidence"
+      background={{ variant: "glowing-orb" }}
+      title="Get Back on the Road Fast with Certified Interlock Services"
       description="Professional, reliable ignition interlock services in Longmont and surrounding Colorado areas. We provide personal care to help you move forward."
       leftCarouselItems={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/modern-interlock-device-inside-a-car-das-1774639652262-ff35b505.png",
-          imageAlt: "Professional interlock installation",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png?_wi=1",
-          imageAlt: "Certified interlock calibration service",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/close-up-hands-holding-interlock-device--1774639652513-34eed392.png",
-          imageAlt: "Personalized client service experience",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/professional-auto-garage-service-bay-cle-1774639652687-1fcf82c9.png",
-          imageAlt: "Reliable device maintenance",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/car-keys-hanging-from-ignition-bokeh-eff-1774639651688-ca4a0ab4.png",
-          imageAlt: "Helping you get back on the road",
-        },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/modern-interlock-device-inside-a-car-das-1774639652262-ff35b505.png", imageAlt: "Professional interlock installation" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png?_wi=1", imageAlt: "Certified interlock calibration service" },
       ]}
       rightCarouselItems={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/removing-interlock-device-from-car-conso-1774639658277-e5a00ffe.png",
-          imageAlt: "Efficient device removal process",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/detail-shot-of-diagnostic-tool-plugged-i-1774639652644-abb41512.png?_wi=1",
-          imageAlt: "Expert technicians at work",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/bright-and-clean-workshop-space-modern-f-1774639652470-f0dc2695.png?_wi=1",
-          imageAlt: "Clean and professional facilities",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=1",
-          imageAlt: "Dedicated to your success",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=1",
-          imageAlt: "Supportive and non-judgmental care",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Call Now to Schedule",
-          href: "tel:+15550102030",
-        },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/removing-interlock-device-from-car-conso-1774639658277-e5a00ffe.png", imageAlt: "Efficient device removal process" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/bright-and-clean-workshop-space-modern-f-1774639652470-f0dc2695.png?_wi=1", imageAlt: "Clean and professional facilities" },
       ]}
+      buttons={[{ text: "Call Now to Schedule", href: "tel:+15550102030" }]
+      }
     />
   </div>
 
   <div id="why-choose-us" data-section="why-choose-us">
       <AboutMetric
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Why Choose Nicks 2 Interlock?"
       metrics={[
-        {
-          icon: CheckCircle,
-          label: "Years of Experience",
-          value: "2008",
-        },
-        {
-          icon: Award,
-          label: "Dedicated Specialist",
-          value: "Direct Access",
-        },
-        {
-          icon: ThumbsUp,
-          label: "Client Focus",
-          value: "Personalized",
-        },
-        {
-          icon: ShieldCheck,
-          label: "Compliance Ready",
-          value: "100%",
-        },
-        {
-          icon: Clock,
-          label: "Same Day Support",
-          value: "Reliable",
-        },
+        { icon: CheckCircle, label: "Years of Experience", value: "16+" },
+        { icon: Award, label: "Dedicated Specialist", value: "Direct" },
+        { icon: ShieldCheck, label: "Compliance Ready", value: "100%" }
       ]}
-      metricsAnimation="slide-up"
+      metricsAnimation="blur-reveal"
+    />
+  </div>
+
+  <div id="social-proof" data-section="social-proof">
+      <SocialProofOne
+      names={["Trusted by Hundreds", "Verified by State", "Certified Partner"]}
+      title="Trust Index"
+      description="Real feedback from our satisfied clients."
+      textboxLayout="split"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",
-          title: "What is an ignition interlock device?",
-          content: "It is a breath-test device connected to your vehicle's ignition system.",
-        },
-        {
-          id: "f2",
-          title: "How often do I need calibration?",
-          content: "Regular calibration is required to ensure accuracy and meet compliance needs.",
-        },
-        {
-          id: "f3",
-          title: "How long does installation take?",
-          content: "Most installations are efficient. We respect your time.",
-        },
-        {
-          id: "f4",
-          title: "Is the process confidential?",
-          content: "Yes, we prioritize your privacy and provide a non-judgmental environment.",
-        },
-        {
-          id: "f5",
-          title: "Can I remove the device early?",
-          content: "Removal requires specific state-mandated documentation which we assist with.",
-        },
+        { id: "f1", title: "What is an ignition interlock device?", content: "It is a breath-test device connected to your vehicle's ignition system." },
+        { id: "f2", title: "How often do I need calibration?", content: "Regular calibration is required to ensure accuracy." },
       ]}
       sideTitle="Answers to Your Questions"
-      sideDescription="We're here to make this process as simple as possible. Reach out anytime."
-      faqsAnimation="slide-up"
+      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="feature" data-section="feature">
       <FeatureCardTwentyFive
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
+      animationType="depth-3d"
+      textboxLayout="split-description"
+      useInvertedBackground={true}
       title="Why Clients Trust Us"
-      description="We focus on providing a seamless and supportive experience for all our clients."
+      description="We focus on a seamless and supportive experience."
       features={[
-        {
-          title: "Personalized Care",
-          description: "We treat every client with respect and understanding.",
-          icon: Heart,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=2",
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=2",
-            },
-          ],
-        },
-        {
-          title: "Certified Standards",
-          description: "Our work meets all state requirements for interlock devices.",
-          icon: Award,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png?_wi=2",
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/detailed-technical-manual-on-a-clipboard-1774639652630-8adf3acc.png?_wi=1",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Service Plans"
-      description="Clear, transparent pricing for your interlock needs."
-      plans={[
-        {
-          id: "p1",
-          badge: "Essential",
-          price: "$150",
-          subtitle: "Monthly calibration",
-          features: [
-            "Full support",
-            "Device monitoring",
-          ],
-          buttons: [
-            {
-              text: "Select",
-              href: "#",
-            },
-          ],
-        },
-        {
-          id: "p2",
-          badge: "Premium",
-          price: "$250",
-          subtitle: "Full service suite",
-          features: [
-            "All services included",
-            "Priority access",
-          ],
-          buttons: [
-            {
-              text: "Select",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Personalized Care", description: "Respectful and understanding service.", icon: Heart, mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=2" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=2" }] },
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-      ]}
-      logoText="Nicks 2 Interlock Services"
+      columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] }]}
+      logoText="Nicks 2 Interlock"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -2,13 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { FileText, Phone } from "lucide-react";
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 
-export default function LandingPage() {
+export default function ServicesPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -16,145 +14,47 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumLarge"
-        background="grid"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        background="floatingGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "How It Works",
-          id: "/how-it-works",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Nicks 2 Interlock"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "How It Works", id: "/how-it-works" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Nicks 2 Interlock"
+          />
+        </div>
 
-  <div id="services-list" data-section="services-list">
-      <FeatureCardTwelve
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "s1",
-          label: "Installation",
-          title: "Fast Installation",
-          items: [
-            "Certified technicians",
-            "Accurate setup",
-            "Guidance provided",
-          ],
-        },
-        {
-          id: "s2",
-          label: "Maintenance",
-          title: "Regular Calibration",
-          items: [
-            "Required maintenance",
-            "Quick appointments",
-            "Compliance focused",
-          ],
-        },
-        {
-          id: "s3",
-          label: "Removal",
-          title: "Safe Removal",
-          items: [
-            "State compliance checked",
-            "Smooth process",
-            "Documentation help",
-          ],
-        },
-      ]}
-      title="Professional Interlock Services"
-      description="Comprehensive care for your interlock device compliance needs."
-    />
-  </div>
+        <div id="brands" data-section="brands" className="py-20">
+            <FeatureCardSix
+                title="Certified Partner Brands"
+                description="We proudly support and maintain the most trusted ignition interlock devices approved in Colorado."
+                textboxLayout="split"
+                useInvertedBackground={false}
+                features={[
+                    { id: 1, title: "Lifesafer", description: "High-accuracy ignition interlock devices with reliable technology, trusted by courts nationwide.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/modern-interlock-device-inside-a-car-das-1774639652262-ff35b505.png" },
+                    { id: 2, title: "Guardian", description: "Advanced, user-friendly interlock units designed for speed and ease of use in any climate.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png" },
+                    { id: 3, title: "Smart Start", description: "The industry leader in ignition interlock technology, providing durable and compliant solutions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/bright-and-clean-workshop-space-modern-f-1774639652470-f0dc2695.png" }
+                ]}
+            />
+        </div>
 
-  <div id="feature" data-section="feature">
-      <FeatureCardTwentyFive
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Additional Services"
-      description="We go beyond just installation to ensure your total peace of mind."
-      features={[
-        {
-          title: "Compliance Review",
-          description: "We verify all documentation.",
-          icon: FileText,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/icon-of-a-legal-document-high-quality-gr-1774639651614-ad88088b.png?_wi=1",
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/detailed-technical-manual-on-a-clipboard-1774639652630-8adf3acc.png?_wi=2",
-            },
-          ],
-        },
-        {
-          title: "Emergency Support",
-          description: "Quick assistance whenever you need it.",
-          icon: Phone,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/bright-and-clean-workshop-space-modern-f-1774639652470-f0dc2695.png?_wi=2",
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/detail-shot-of-diagnostic-tool-plugged-i-1774639652644-abb41512.png?_wi=2",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-      ]}
-      logoText="Nicks 2 Interlock Services"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] }]}
+            logoText="Nicks 2 Interlock"
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4f0;
-  --card: #ffffff;
-  --foreground: #1a1a1a;
-  --primary-cta: #2c2c2c;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #3b82f6;
   --primary-cta-text: #f5f4f0;
-  --secondary-cta: #f5f4f0;
+  --secondary-cta: #1e293b;
   --secondary-cta-text: #1a1a1a;
-  --accent: #8a8a8a;
-  --background-accent: #e8e6e1;
+  --accent: #60a5fa;
+  --background-accent: #1e3a8a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);