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

Update src/app/services/page.tsx
2026-03-27 20:49:09 +00:00 · 2026-03-27 20:48:43 +00:00 · 2026-03-27 20:48:42 +00:00 · 2026-03-27 20:45:42 +00:00 · 2026-03-27 20:45:39 +00:00 · 2026-03-27 20:45:38 +00:00
3 changed files with 96 additions and 193 deletions
--- a/src/app/how-it-works/page.tsx
+++ b/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 TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-export default function LandingPage() {
+export default function HowItWorksPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
@@ -15,98 +14,59 @@ 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",          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"},
+            ]}
-        {
+            brandName="Nicks 2 Interlock"
-          name: "About",          id: "/about"},
+          />
-        {
+        </div>
          name: "Contact",          id: "/contact"},
      ]}
      brandName="Nicks 2 Interlock"
    />
  </div>
-  <div id="steps" data-section="steps">
+        <div id="timeline" data-section="timeline" className="py-20">
-      <ProductCardOne
+            <TimelinePhoneView
-      animationType="slide-up"
+                title="Your Journey to Compliance"
-      textboxLayout="default"
+                description="Our process is designed to be simple, respectful, and fully compliant with Colorado DMV requirements."
-      gridVariant="three-columns-all-equal-width"
+                textboxLayout="split"
-      useInvertedBackground={false}
+                animationType="blur-reveal"
-      products={[
+                items={[
-        {
+                    { 
-          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"},
+                        trigger: "1. Schedule Appointment", 
-        {
+                        content: "Contact our team to book your installation. We prioritize urgent needs to get you back on the road quickly.", 
-          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"},
+                        imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.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"},
+                    { 
-        {
+                        trigger: "2. Professional Installation", 
-          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"},
+                        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" 
-      title="Simple 4-Step Process"
+                    },
-      description="We make your requirements clear and easy to follow."
+                    { 
-    />
+                        trigger: "3. Regular Calibration", 
-  </div>
+                        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">
+        <div id="footer" data-section="footer">
-      <PricingCardEight
+            <FooterLogoEmphasis
-      animationType="slide-up"
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] }]}
-      textboxLayout="default"
+            logoText="Nicks 2 Interlock"
-      useInvertedBackground={false}
+            />
-      title="Investment"
+        </div>
      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>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -42,7 +42,7 @@ export default function LandingPage() {
  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{ variant: "glowing-orb" }}
-      title="Get Back on the Road with Confidence"
+      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" },
@@ -52,7 +52,8 @@ export default function LandingPage() {
        { 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" }]}
+      buttons={[{ text: "Call Now to Schedule", href: "tel:+15550102030" }]
      }
    />
  </div>
@@ -106,7 +107,7 @@ export default function LandingPage() {
  <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>
--- a/src/app/services/page.tsx
+++ b/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"
+        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",          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"},
+            ]}
-        {
+            brandName="Nicks 2 Interlock"
-          name: "About",          id: "/about"},
+          />
-        {
+        </div>
          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",          label: "Installation",          title: "Fast Installation",          items: [
+                    { 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" },
-            "Certified technicians",            "Accurate setup",            "Guidance provided"],
+                    { 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" }
-        {
+                ]}
-          id: "s2",          label: "Maintenance",          title: "Regular Calibration",          items: [
+            />
-            "Required maintenance",            "Quick appointments",            "Compliance focused"],
+        </div>
        },
        {
          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
+            <FooterLogoEmphasis
-      animationType="slide-up"
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] }]}
-      textboxLayout="default"
+            logoText="Nicks 2 Interlock"
-      useInvertedBackground={false}
+            />
-      title="Additional Services"
+        </div>
      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>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
Author	SHA1	Message	Date
bender	fb264e3a12	Update src/app/how-it-works/page.tsx	2026-03-27 20:49:09 +00:00
bender	a4eb98e903	Update src/app/services/page.tsx	2026-03-27 20:48:43 +00:00
bender	a39764578f	Update src/app/how-it-works/page.tsx	2026-03-27 20:48:42 +00:00
bender	0525d89441	Merge version_9 into main Merge version_9 into main	2026-03-27 20:45:42 +00:00
bender	c3c5840fc8	Update src/app/page.tsx	2026-03-27 20:45:39 +00:00
bender	68adb506a5	Update src/app/how-it-works/page.tsx	2026-03-27 20:45:38 +00:00
bender	5f09372676	Merge version_8 into main Merge version_8 into main	2026-03-27 20:19:29 +00:00
bender	b226360db6	Update src/app/page.tsx	2026-03-27 20:19:23 +00:00
bender	1a42bfc353	Merge version_7 into main Merge version_7 into main	2026-03-27 19:41:09 +00:00