Merge version_18 into main

Merge version_18 into main

src/app/about/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import { MapPin, Users } from "lucide-react";
@@ -26,26 +26,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Services", id: "/services" },
-          id: "/",
+        { name: "How It Works", id: "/how-it-works" },
-        },
+        { name: "About", id: "/about" },
-        {
+        { name: "Contact", id: "/contact" },
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "How It Works",
-          id: "/how-it-works",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
       ]}
       brandName="Nicks 2 Interlock"
     />
@@ -59,14 +44,10 @@ export default function LandingPage() {
       useInvertedBackground={false}
       members={[
         {
-          id: "m1",
+          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"},
-          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 +60,21 @@ export default function LandingPage() {
       description="Connecting you with reliable, non-judgmental support services."
       features={[
         {
-          title: "Supportive Environment",
+          title: "Supportive Environment",          description: "We provide a safe space for every client.",          icon: Users,
-          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",
+          title: "Local Experts",          description: "Decades of industry experience.",          icon: MapPin,
-          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"},
-            },
           ],
         },
       ]}
@@ -109,26 +82,13 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterBaseCard
+      logoText="Nicks 2 Interlock"
+      copyrightText="© 2025 Nicks 2 Interlock. All rights reserved."
       columns={[
-        {
+        { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] },
-          items: [
+        { title: "Areas Served", items: [{ label: "Longmont", href: "#" }, { label: "Boulder", href: "#" }, { label: "Denver Metro", href: "#" }] }
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
       ]}
-      logoText="Nicks 2 Interlock Services"
     />
   </div>
       </ReactLenis>

src/app/contact/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 
@@ -25,26 +25,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Services", id: "/services" },
-          id: "/",
+        { name: "How It Works", id: "/how-it-works" },
-        },
+        { name: "About", id: "/about" },
-        {
+        { name: "Contact", id: "/contact" },
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "How It Works",
-          id: "/how-it-works",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
       ]}
       brandName="Nicks 2 Interlock"
     />
@@ -54,16 +39,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",
+          text: "Call Now",          href: "tel:+15550102030"},
-          href: "tel:+15550102030",
-        },
       ]}
     />
   </div>
@@ -77,35 +59,19 @@ export default function LandingPage() {
       description="Get in touch today for personalized pricing."
       plans={[
         {
-          id: "q1",
+          id: "q1",          badge: "Standard",          price: "Custom",          subtitle: "Initial Consultation",          features: [
-          badge: "Standard",
+            "Needs assessment",            "Service scheduling"],
-          price: "Custom",
-          subtitle: "Initial Consultation",
-          features: [
-            "Needs assessment",
-            "Service scheduling",
-          ],
           buttons: [
             {
-              text: "Contact",
+              text: "Contact",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          id: "q2",
+          id: "q2",          badge: "Direct",          price: "Call Now",          subtitle: "Speak to Owner",          features: [
-          badge: "Direct",
+            "Direct support",            "Fast response"],
-          price: "Call Now",
-          subtitle: "Speak to Owner",
-          features: [
-            "Direct support",
-            "Fast response",
-          ],
           buttons: [
             {
-              text: "Call",
+              text: "Call",              href: "tel:+15550102030"},
-              href: "tel:+15550102030",
-            },
           ],
         },
       ]}
@@ -113,26 +79,13 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterBaseCard
+      logoText="Nicks 2 Interlock"
+      copyrightText="© 2025 Nicks 2 Interlock. All rights reserved."
       columns={[
-        {
+        { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] },
-          items: [
+        { title: "Areas Served", items: [{ label: "Longmont", href: "#" }, { label: "Boulder", href: "#" }, { label: "Denver Metro", href: "#" }] }
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
       ]}
-      logoText="Nicks 2 Interlock Services"
     />
   </div>
       </ReactLenis>

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

@@ -2,12 +2,12 @@
 
 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 TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Zap, FileCheck, CheckCircle2, Wrench } from "lucide-react";
 
-export default function LandingPage() {
+export default function HowItWorksPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -15,145 +15,51 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumLarge"
-        background="grid"
+        background="floatingGradient"
-        cardStyle="subtle-shadow"
+        cardStyle="glass-depth"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",
+              { name: "Services", id: "/services" },
-          id: "/",
+              { name: "How It Works", id: "/how-it-works" },
-        },
+              { name: "About", id: "/about" },
-        {
+              { name: "Contact", id: "/contact" },
-          name: "Services",
+            ]}
-          id: "/services",
+            brandName="Nicks 2 Interlock"
-        },
+          />
-        {
+        </div>
-          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">
+        <div id="process" data-section="process">
-      <ProductCardOne
+            <TimelineProcessFlow
-      animationType="slide-up"
+                title="Your Path to Compliance"
-      textboxLayout="default"
+                description="Our streamlined four-step process is designed to get you back on the road safely and legally, with personalized support every step of the way."
-      gridVariant="three-columns-all-equal-width"
+                textboxLayout="split"
-      useInvertedBackground={false}
+                animationType="blur-reveal"
-      products={[
+                items={[
-        {
+                    { id: "1", content: "Schedule your installation at our local Longmont facility. We verify your requirements and guide you through the initial appointment preparation.", media: <Zap className="w-12 h-12" />, reverse: false },
-          id: "p1",
+                    { id: "2", content: "Our certified technicians perform a precision installation tailored to your specific vehicle model, ensuring full compliance and reliable operation.", media: <Wrench className="w-12 h-12" />, reverse: true },
-          name: "Step 1: Requirement",
+                    { id: "3", content: "Get thorough, one-on-one training on device usage, reporting requirements, and helpful tips to make your daily driving experience hassle-free.", media: <FileCheck className="w-12 h-12" />, reverse: false },
-          price: "Get Started",
+                    { id: "4", content: "Return for your scheduled monthly calibration services. We provide rapid, accurate data reporting to keep your status compliant without delays.", media: <CheckCircle2 className="w-12 h-12" />, reverse: true },
-          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",
+                ]}
-        },
+            />
-        {
+        </div>
-          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="pricing" data-section="pricing">
+        <div id="footer" data-section="footer">
-      <PricingCardEight
+            <FooterBaseCard
-      animationType="slide-up"
+            logoText="Nicks 2 Interlock"
-      textboxLayout="default"
+            copyrightText="© 2025 Nicks 2 Interlock. All rights reserved."
-      useInvertedBackground={false}
+            columns={[
-      title="Investment"
+              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] },
-      description="Affordable options tailored to your specific compliance needs."
+              { title: "Areas Served", items: [{ label: "Longmont", href: "#" }, { label: "Boulder", href: "#" }, { label: "Denver Metro", href: "#" }] }
-      plans={[
+            ]}
-        {
+            />
-          id: "s1",
+        </div>
-          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>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/page.tsx

@@ -5,11 +5,11 @@ import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 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";
+import { Award, CheckCircle, Heart, ShieldCheck } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -19,26 +19,21 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumLarge"
-        background="grid"
+        background="floatingGradient"
-        cardStyle="subtle-shadow"
+        cardStyle="glass-depth"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",          id: "/"},
+        { name: "Services", id: "/services" },
-        {
+        { name: "How It Works", id: "/how-it-works" },
-          name: "Services",          id: "/services"},
+        { name: "About", id: "/about" },
-        {
+        { name: "Contact", id: "/contact" },
-          name: "How It Works",          id: "/how-it-works"},
-        {
-          name: "About",          id: "/about"},
-        {
-          name: "Contact",          id: "/contact"},
       ]}
       brandName="Nicks 2 Interlock"
     />
@@ -46,165 +41,92 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
+      background={{ variant: "glowing-orb" }}
-        variant: "gradient-bars"}}
+      title="Get Back on the Road Fast with Certified Interlock Services"
-      title="Get Back on the Road with Confidence"
       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?_wi=1", imageAlt: "Professional interlock installation" },
-          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/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"},
       ]}
       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/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" },
-        {
-          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"},
       ]}
+      buttons={[{ text: "Call Now to Schedule", href: "tel:+15550102030" }]}
+    />
+  </div>
+
+  <div id="brand-showcase" data-section="brand-showcase">
+    <SocialProofOne
+      names={["Smart Start", "Guardian", "LifeSafer"]}
+      title="Trusted Industry Partners"
+      description="We work with the most recognized ignition interlock providers in the industry to ensure quality service."
+      textboxLayout="default"
+      useInvertedBackground={true}
     />
   </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: "16+" },
-          icon: CheckCircle,
+        { icon: Award, label: "Dedicated Specialist", value: "Direct" },
-          label: "Years of Experience",          value: "2008"},
+        { icon: ShieldCheck, label: "Compliance Ready", value: "100%" }
-        {
-          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"},
       ]}
-      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}
+      sideTitle="Frequently Asked Questions"
+      sideDescription="Detailed answers to common questions about our ignition interlock installation, calibration, and Colorado state compliance."
+      faqsAnimation="blur-reveal"
+      useInvertedBackground={true}
       faqs={[
-        {
+        { id: "f1", title: "What exactly is an ignition interlock device (IID)?", content: "An Ignition Interlock Device is a breath alcohol monitoring system installed in your vehicle. It prevents the engine from starting if alcohol is detected in your breath sample, ensuring full compliance with state requirements during your restricted driving period. Our team ensures the device is calibrated to meet strict Colorado safety standards at every visit." },
-          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 to visit for calibration and data downloads?", content: "Standard Colorado regulations typically require IID monitoring visits every 30 to 60 days. During these appointments, our certified technicians download data from the device to confirm compliance with your program and ensure the hardware is functioning optimally, ensuring your driving privileges remain uninterrupted and your records stay accurate." },
-        {
+        { id: "f3", title: "Can I get a same-day installation appointment?", content: "We strive to accommodate your schedule whenever possible. Depending on our current service volume and your vehicle model, same-day appointments are often available at our Longmont facility. We recommend calling us early in the morning so we can prioritize your installation and get you back on the road safely and compliant as soon as possible." },
-          id: "f2",          title: "How often do I need calibration?",          content: "Regular calibration is required to ensure accuracy and meet compliance needs."},
+        { id: "f4", title: "Is the device complicated or difficult to operate?", content: "Not at all. We provide comprehensive hands-on training during your installation appointment to ensure you feel confident and comfortable. Our team demonstrates how to perform the breath tests correctly and explains all audio and visual alerts clearly, so you'll be well-prepared for everyday use. We take the time to answer every question you have." },
-        {
+        { id: "f5", title: "What happens if I fail a breath test while driving?", content: "The device is designed to detect alcohol and record all attempts. If a breath test is failed, it will log the event, preventing the vehicle from starting and potentially alerting state monitoring authorities. We strongly advise strictly avoiding all alcohol use when operating a vehicle equipped with an IID to maintain your program status and complete your restricted driving requirements without issue." },
-          id: "f3",          title: "How long does installation take?",          content: "Most installations are efficient. We respect your time."},
+        { id: "f6", title: "Will the installation cause any permanent damage to my car?", content: "Absolutely not. Our professional technicians are experts in modern automotive electronics. We use non-invasive, industry-standard installation techniques that maintain the integrity of your vehicle's ignition and electrical systems, ensuring everything functions exactly as the manufacturer intended while remaining fully compliant with state interlock program regulations." }
-        {
-          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."},
       ]}
-      sideTitle="Answers to Your Questions"
-      sideDescription="We're here to make this process as simple as possible. Reach out anytime. If your question isn't answered here, please contact our team directly for assistance."
-      buttons={[
-        {
-            text: "Contact Us",            href: "/contact"
-        }
-      ]}
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="feature" data-section="feature">
       <FeatureCardTwentyFive
-      animationType="slide-up"
+      animationType="depth-3d"
-      textboxLayout="default"
+      textboxLayout="split-description"
-      useInvertedBackground={false}
+      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: "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" }] },
-          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: "#"},
-          ],
-        },
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterBaseCard
+      logoText="Nicks 2 Interlock"
+      copyrightText="© 2025 Nicks 2 Interlock. All rights reserved."
       columns={[
-        {
+        { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] },
-          items: [
+        { title: "Areas Served", items: [{ label: "Longmont", href: "#" }, { label: "Boulder", href: "#" }, { label: "Denver Metro", href: "#" }] }
-            {
-              label: "Home",              href: "/"},
-            {
-              label: "Services",              href: "/services"},
-            {
-              label: "Contact",              href: "/contact"},
-          ],
-        },
       ]}
-      logoText="Nicks 2 Interlock Services"
     />
   </div>
       </ReactLenis>

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 FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 
-export default function LandingPage() {
+export default function ServicesPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -16,144 +14,50 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumLarge"
-        background="grid"
+        background="floatingGradient"
-        cardStyle="subtle-shadow"
+        cardStyle="glass-depth"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",
+              { name: "Services", id: "/services" },
-          id: "/",
+              { name: "How It Works", id: "/how-it-works" },
-        },
+              { name: "About", id: "/about" },
-        {
+              { name: "Contact", id: "/contact" },
-          name: "Services",
+            ]}
-          id: "/services",
+            brandName="Nicks 2 Interlock"
-        },
+          />
-        {
+        </div>
-          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">
+        <div id="brands" data-section="brands" className="py-20">
-      <FeatureCardTwelve
+            <FeatureCardSix
-      animationType="slide-up"
+                title="Certified Partner Brands"
-      textboxLayout="split"
+                description="We proudly support and maintain the most trusted ignition interlock devices approved in Colorado."
-      useInvertedBackground={false}
+                textboxLayout="split"
-      features={[
+                useInvertedBackground={false}
-        {
+                features={[
-          id: "s1",
+                    { 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?_wi=2" },
-          label: "Installation",
+                    { 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" },
-          title: "Fast Installation",
+                    { 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" }
-          items: [
+                ]}
-            "Certified technicians",
+            />
-            "Accurate setup",
+        </div>
-            "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="feature" data-section="feature">
+        <div id="footer" data-section="footer">
-      <FeatureCardTwentyFive
+            <FooterBaseCard
-      animationType="slide-up"
+            logoText="Nicks 2 Interlock"
-      textboxLayout="default"
+            copyrightText="© 2025 Nicks 2 Interlock. All rights reserved."
-      useInvertedBackground={false}
+            columns={[
-      title="Additional Services"
+              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] },
-      description="We go beyond just installation to ensure your total peace of mind."
+              { title: "Areas Served", items: [{ label: "Longmont", href: "#" }, { label: "Boulder", href: "#" }, { label: "Denver Metro", href: "#" }] }
-      features={[
+            ]}
-        {
+            />
-          title: "Compliance Review",
+        </div>
-          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>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

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