53 lines
2.8 KiB
TypeScript
53 lines
2.8 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="bg-white 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'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="bg-white p-5 md:p-7">
|
|
<RequestMachineForm onSubmit={(data) => console.log("Machine request form submitted:", data)} />
|
|
</PublicSurface>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|