|
|
|
|
@@ -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 ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
|
|
|
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 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"
|
|
|
|
|
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="steps" data-section="steps">
|
|
|
|
|
<ProductCardOne
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
products={[
|
|
|
|
|
{
|
|
|
|
|
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"},
|
|
|
|
|
{
|
|
|
|
|
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="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="pricing" data-section="pricing">
|
|
|
|
|
<PricingCardEight
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
title="Investment"
|
|
|
|
|
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="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"},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
logoText="Nicks 2 Interlock Services"
|
|
|
|
|
/>
|
|
|
|
|
</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"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ReactLenis>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
|
