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

Merge version_9 into main

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

@@ -3,10 +3,8 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import { FileText, CalendarDays, CheckCheck, HelpCircle, Wrench, ShieldCheck } from "lucide-react";
 
 export default function HowItWorksPage() {
   return (
@@ -26,55 +24,49 @@ export default function HowItWorksPage() {
         <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"
+          />
+        </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="steps" data-section="steps">
-          <FeatureHoverPattern
-            title="Our Simple 4-Step Process"
-            description="We make the ignition interlock process stress-free, compliant, and efficient. Follow these steps to get back on the road."
-            textboxLayout="split-description"
-            useInvertedBackground={false}
-            animationType="blur-reveal"
-            features={[
-              { icon: FileText, title: "1. Initial Setup", description: "Contact our team to schedule your installation appointment and review necessary state requirements." },
-              { icon: Wrench, title: "2. Professional Install", description: "Our certified technicians perform a careful, clean installation of your interlock device in our professional facility." },
-              { icon: CalendarDays, title: "3. Regular Calibration", description: "Return to our shop for timely calibration appointments as required by your specific state compliance program." },
-              { icon: CheckCheck, title: "4. Device Removal", description: "Once your requirement period is successfully completed, we provide authorized, safe removal of the equipment." }
-            ]}
-          />
-        </div>
-
-        <div id="faq" data-section="faq">
-          <FaqBase
-            title="Common Questions About the Process"
-            description="Understanding the technical and legal requirements for your interlock program."
-            faqsAnimation="blur-reveal"
-            useInvertedBackground={true}
-            textboxLayout="split"
-            faqs={[
-                { id: "f1", title: "How long does installation take?", content: "Typically, a professional installation takes about 1-2 hours depending on your vehicle model." },
-                { id: "f2", title: "Does the device damage my car?", content: "No, our technicians are certified professionals who ensure your vehicle's wiring remains intact and fully functional." },
-                { id: "f3", title: "What happens if I miss a calibration?", content: "Missing a calibration appointment can result in a lockout or compliance violation. We always send reminders to keep you on schedule." },
-                { id: "f4", title: "Are there hidden costs?", content: "We pride ourselves on transparency. All costs are explained clearly during your initial consultation." }
-            ]}
-          />
-        </div>
-
         <div id="footer" data-section="footer">
             <FooterLogoEmphasis
-            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] }]}
+            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,103 +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>
   );
-}
+}