77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import {
|
|
PublicInset,
|
|
PublicPageHeader,
|
|
PublicSection,
|
|
PublicSurface,
|
|
} from "@/components/public-surface"
|
|
|
|
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 (
|
|
<PublicSection id="how-it-works">
|
|
<PublicPageHeader
|
|
align="center"
|
|
className="mb-12 md:mb-16"
|
|
title="How It Works"
|
|
description={
|
|
"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."
|
|
}
|
|
/>
|
|
|
|
<PublicSurface className="relative p-6 md:p-8">
|
|
<div className="relative">
|
|
<div className="absolute left-[16.666%] right-[16.666%] top-16 hidden h-px bg-border/80 lg:block" />
|
|
|
|
<div className="grid gap-5 md:grid-cols-3 md:gap-6">
|
|
{steps.map((step, index) => (
|
|
<PublicInset key={index} className="relative h-full p-5 md:p-6">
|
|
<div className="mb-5">
|
|
<div className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary text-lg font-bold text-primary-foreground shadow-sm md:h-16 md:w-16 md:text-2xl">
|
|
{step.number}
|
|
</div>
|
|
</div>
|
|
<div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-primary">
|
|
{step.timing}
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-3">{step.title}</h3>
|
|
<p className="text-sm leading-relaxed text-muted-foreground">
|
|
{step.description}
|
|
</p>
|
|
</PublicInset>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 text-center">
|
|
<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>
|
|
</PublicSurface>
|
|
</PublicSection>
|
|
)
|
|
}
|