113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
"use client"
|
||
|
||
import { ReactNode } from "react"
|
||
import { CheckCircle2 } from "lucide-react"
|
||
import { DropdownPageShell } from "@/components/dropdown-page-shell"
|
||
import { PublicInset } from "@/components/public-surface"
|
||
|
||
interface WhoWeServePageProps {
|
||
title: string
|
||
content: ReactNode
|
||
description?: string
|
||
}
|
||
|
||
const reasons = [
|
||
{
|
||
title: "Placement for Qualifying Locations",
|
||
body: "If your location qualifies, we can place and service machines without pushing daily management onto your staff.",
|
||
},
|
||
{
|
||
title: "Regular Maintenance",
|
||
body: "We handle stocking, cleaning, and routine service so your team can stay focused on the work your location is there to do.",
|
||
},
|
||
{
|
||
title: "Modern Technology",
|
||
body: "Cashless payment options and dependable equipment built for everyday use.",
|
||
},
|
||
{
|
||
title: "Healthy Options",
|
||
body: "Product mixes can include traditional favorites, drinks, and healthier options.",
|
||
},
|
||
{
|
||
title: "Local Service",
|
||
body: "Local service with responsive follow-up when a machine needs attention.",
|
||
},
|
||
{
|
||
title: "Machine Options That Match Your Location",
|
||
body: "Machine types, product mixes, and service plans can be matched to your space, traffic, and audience.",
|
||
},
|
||
]
|
||
|
||
export function WhoWeServePage({
|
||
title,
|
||
content,
|
||
description,
|
||
}: WhoWeServePageProps) {
|
||
return (
|
||
<DropdownPageShell
|
||
breadcrumbs={[
|
||
{ label: "Who We Serve" },
|
||
{ label: title },
|
||
]}
|
||
eyebrow="Who We Serve"
|
||
title={title}
|
||
description={
|
||
description ||
|
||
"See how Rocky Mountain Vending adapts machine placement, product mix, and ongoing service to the way this kind of location actually runs."
|
||
}
|
||
content={
|
||
<div className="text-foreground">{content}</div>
|
||
}
|
||
contentClassName="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-foreground prose-a:underline prose-a:decoration-primary/35 prose-a:underline-offset-4 hover:prose-a:decoration-primary prose-strong:text-foreground"
|
||
sections={
|
||
<section>
|
||
<div className="mx-auto mb-6 max-w-3xl text-center">
|
||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
|
||
Why Rocky
|
||
</p>
|
||
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
||
What locations usually value most after we install
|
||
</h2>
|
||
<p className="mt-3 text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
|
||
We match the machine mix, product selection, and service cadence
|
||
to the pace of the location instead of forcing a generic route.
|
||
</p>
|
||
</div>
|
||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||
{reasons.map((reason) => (
|
||
<PublicInset key={reason.title} className="h-full">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||
<CheckCircle2 className="h-5 w-5" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-foreground">
|
||
{reason.title}
|
||
</h3>
|
||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
||
{reason.body}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</PublicInset>
|
||
))}
|
||
</div>
|
||
</section>
|
||
}
|
||
cta={{
|
||
eyebrow: "Next Step",
|
||
title: "Tell us about your location",
|
||
description:
|
||
"Tell us about your breakroom, customer area, or team traffic and we’ll help you decide whether free placement, machine sales, or service support makes the most sense.",
|
||
actions: [
|
||
{ label: "Talk to Our Team", href: "/contact-us#contact-form" },
|
||
{
|
||
label: "See If You Qualify",
|
||
href: "/#request-machine",
|
||
variant: "outline",
|
||
},
|
||
],
|
||
}}
|
||
/>
|
||
)
|
||
}
|