Rocky_Mountain_Vending/components/request-machine-section.tsx

75 lines
3.1 KiB
TypeScript

"use client"
import { ArrowRight, Package } from "lucide-react"
import Link from "next/link"
import { PublicInset, PublicSurface } from "@/components/public-surface"
import { RequestMachineForm } from "@/components/forms/request-machine-form"
import { businessConfig } from "@/lib/seo-config"
export function RequestMachineSection() {
return (
<section id="request-machine" className="bg-background py-16 md:py-24">
<div className="container mx-auto px-4">
<div className="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-start">
<PublicSurface className="p-6 md:p-8 lg:sticky lg:top-28">
<div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-primary">
<Package className="h-4 w-4" />
Free Placement
</div>
<h2 className="mt-4 text-3xl font-bold tracking-tight text-balance md:text-4xl">
Tell us about your location and we'll recommend the right machine
mix.
</h2>
<p className="mt-4 text-base leading-relaxed text-muted-foreground">
This form is for business locations that want free vending
placement. We&apos;ll look at foot traffic, machine preferences,
and the best fit for your space before we schedule the next step.
</p>
<PublicInset className="mt-6 space-y-3 p-5 text-sm text-muted-foreground">
<p className="font-medium text-foreground">What to expect</p>
<ul className="space-y-2">
<li>
We confirm the location type and approximate number of people
on site.
</li>
<li>
We review the best mix of snack, beverage, combo, or micro
market options.
</li>
<li>
We follow up within one business day to schedule the
consultation.
</li>
</ul>
</PublicInset>
<div className="mt-6 flex flex-wrap gap-3">
<a
href={businessConfig.publicCallUrl}
className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-white px-4 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
>
Call Instead
</a>
<Link
href="/contact-us#contact-form"
className="inline-flex min-h-11 items-center gap-2 rounded-full text-sm font-medium text-foreground transition hover:text-primary"
>
Need repairs or moving?
<ArrowRight className="h-4 w-4" />
</Link>
</div>
</PublicSurface>
<PublicSurface className="p-5 md:p-7">
<RequestMachineForm
onSubmit={(data) =>
console.log("Machine request form submitted:", data)
}
/>
</PublicSurface>
</div>
</div>
</section>
)
}