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-background 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 intake is just for business locations that want free vending placement. We'll review foot traffic, preferred machine types, and next-step fit before scheduling the consultation.
|
|
</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-background 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-background p-5 md:p-7">
|
|
<RequestMachineForm onSubmit={(data) => console.log("Machine request form submitted:", data)} />
|
|
</PublicSurface>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|