74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
|
|
const steps = [
|
|
{
|
|
number: "01",
|
|
title: "Tell Us About Your Location",
|
|
description:
|
|
"Answer a few questions about your location, what you're looking for, and general information so we can see if we're a good fit.",
|
|
timing: "Day 1 - Virtual",
|
|
},
|
|
{
|
|
number: "02",
|
|
title: "Site Visit & Planning",
|
|
description:
|
|
"We schedule a site visit to walk through our plan to get you the right machine or machines for your space.",
|
|
timing: "Day 2-3 - In Person",
|
|
},
|
|
{
|
|
number: "03",
|
|
title: "Free Installation",
|
|
description:
|
|
"Get your machine or machines installed in about a week or less. We just need to get you on the schedule! Completely FREE.",
|
|
timing: "Day 4-7 - Your Location",
|
|
},
|
|
]
|
|
|
|
export function HowItWorksSection() {
|
|
return (
|
|
<section id="how-it-works" className="py-20 md:py-28">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">How It Works</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
|
|
Getting the best vending machine supplier in Utah shouldn't be a difficult process. Your free machine could
|
|
be delivered in as little as 7 days depending on our schedule.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
{/* Connection Line - Desktop */}
|
|
<div className="hidden lg:block absolute top-24 left-[16.666%] right-[16.666%] h-0.5 bg-border" />
|
|
|
|
<div className="grid gap-8 md:grid-cols-3">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="relative">
|
|
<Card className="border-border/50 h-full">
|
|
<CardContent className="pt-8">
|
|
<div className="mb-6">
|
|
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-secondary text-secondary-foreground text-2xl font-bold">
|
|
{step.number}
|
|
</div>
|
|
</div>
|
|
<div className="mb-2 text-xs font-medium text-secondary uppercase tracking-wider">
|
|
{step.timing}
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-3">{step.title}</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">{step.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center mt-12">
|
|
<p className="text-sm text-muted-foreground">
|
|
Our process is as easy as 3 steps. We mentioned <span className="font-semibold text-foreground">FREE</span>,
|
|
right?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|