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

@@ -3,8 +3,9 @@
 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 TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Zap, FileCheck, CheckCircle2, Wrench } from "lucide-react";
 
 export default function HowItWorksPage() {
   return (
@@ -34,28 +35,17 @@ export default function HowItWorksPage() {
           />
         </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."
+        <div id="process" data-section="process">
+            <TimelineProcessFlow
+                title="Your Path to Compliance"
+                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."
                 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" 
-                    }
+                    { 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: "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 },
+                    { 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 },
+                    { 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 },
                 ]}
             />
         </div>
@@ -69,4 +59,4 @@ export default function HowItWorksPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -9,7 +9,7 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 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 (
@@ -57,6 +57,16 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="brand-showcase" data-section="brand-showcase">
+    <SocialProofOne
+      names={["Smart Start", "Intoxalock", "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={true}