120 lines
4.7 KiB
TypeScript
120 lines
4.7 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { CheckCircle2 } from "lucide-react"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { PublicSection, PublicSurface } from "@/components/public-surface"
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<PublicSection
|
|
tone="warm"
|
|
className="relative overflow-hidden"
|
|
containerClassName="relative"
|
|
>
|
|
<div className="grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
|
|
{/* Left Content */}
|
|
<div className="flex flex-col gap-6">
|
|
<Badge
|
|
variant="outline"
|
|
className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-xs font-medium w-fit"
|
|
>
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
|
</span>
|
|
Serving Utah Businesses Since 2019
|
|
</Badge>
|
|
|
|
<h1 className="text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-6xl">
|
|
Free Vending Machine Placement for Utah Businesses
|
|
</h1>
|
|
|
|
<p className="text-lg text-muted-foreground text-pretty leading-relaxed">
|
|
If your breakroom, waiting area, or staff space needs a better
|
|
snack-and-drink option, we can review the location, place the right
|
|
machine, keep it stocked, and handle service after installation.
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-2 text-foreground">
|
|
<CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
|
|
<span className="font-semibold">
|
|
Free placement for qualifying business locations
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-foreground">
|
|
<CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
|
|
<span>
|
|
We review the location, then handle stocking and service
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-foreground">
|
|
<CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
|
|
<span>
|
|
Snack, beverage, and combo machines with cashless payment
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-foreground">
|
|
<CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
|
|
<span>Traditional favorites and healthier product options</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-primary hover:bg-primary/90 text-lg h-14 px-8"
|
|
>
|
|
<Link href="#request-machine">
|
|
See If Your Location Qualifies
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="text-lg h-14 bg-transparent"
|
|
>
|
|
<Link href="#how-it-works">See How It Works</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<p className="text-sm text-muted-foreground pt-2">
|
|
Serving Davis, Salt Lake, and Utah counties
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="relative aspect-[0.94] overflow-hidden rounded-[2rem] border border-border/70 bg-muted shadow-[var(--public-surface-shadow)]">
|
|
<Image
|
|
src="/images/vending-bay-2-scaled.webp"
|
|
alt="Modern vending machines installed at Utah business"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<PublicSurface className="absolute bottom-4 left-4 right-4 p-5 backdrop-blur-sm md:bottom-6 md:left-auto md:right-6 md:w-64">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<div className="text-3xl font-bold text-primary">3</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
Counties Served
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold text-primary">6+</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
Years in Business
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PublicSurface>
|
|
</div>
|
|
</div>
|
|
</PublicSection>
|
|
)
|
|
}
|