Update src/app/page.tsx

Merge version_8 into main

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

@@ -2,12 +2,13 @@
 
 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 FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+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 LandingPage() {
+export default function HowItWorksPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -15,97 +16,64 @@ 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="steps" data-section="steps">
-      <ProductCardOne
+          <FeatureHoverPattern
-      animationType="slide-up"
+            title="Our Simple 4-Step Process"
-      textboxLayout="default"
+            description="We make the ignition interlock process stress-free, compliant, and efficient. Follow these steps to get back on the road."
-      gridVariant="three-columns-all-equal-width"
+            textboxLayout="split-description"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      products={[
+            animationType="blur-reveal"
-        {
+            features={[
-          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"},
+              { 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." },
-          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"},
+              { 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." }
-          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"},
+        </div>
-      ]}
-      title="Simple 4-Step Process"
-      description="We make your requirements clear and easy to follow."
-    />
-  </div>
 
-  <div id="pricing" data-section="pricing">
+        <div id="faq" data-section="faq">
-      <PricingCardEight
+          <FaqBase
-      animationType="slide-up"
+            title="Common Questions About the Process"
-      textboxLayout="default"
+            description="Understanding the technical and legal requirements for your interlock program."
-      useInvertedBackground={false}
+            faqsAnimation="blur-reveal"
-      title="Investment"
+            useInvertedBackground={true}
-      description="Affordable options tailored to your specific compliance needs."
+            textboxLayout="split"
-      plans={[
+            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: "s1",          badge: "Plan A",          price: "$100",          subtitle: "Basic",          features: [
+                { 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." },
-            "Fast install",            "Regular checkup"],
+                { 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." },
-          buttons: [
+                { id: "f4", title: "Are there hidden costs?", content: "We pride ourselves on transparency. All costs are explained clearly during your initial consultation." }
-            {
+            ]}
-              text: "Sign Up",              href: "#"},
+          />
-          ],
+        </div>
-        },
-        {
-          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">
+        <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+            <FooterLogoEmphasis
-      columns={[
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] }]}
-        {
+            logoText="Nicks 2 Interlock"
-          items: [
+            />
-            {
+        </div>
-              label: "Home",              href: "/"},
-            {
-              label: "Services",              href: "/services"},
-            {
-              label: "Contact",              href: "/contact"},
-          ],
-        },
-      ]}
-      logoText="Nicks 2 Interlock Services"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

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>