117 lines
4.9 KiB
TypeScript
117 lines
4.9 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { CheckCircle2 } from "lucide-react"
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-background py-20 md:py-32">
|
|
<div className="container mx-auto px-4">
|
|
<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="aspect-square relative rounded-2xl overflow-hidden bg-muted">
|
|
<Image
|
|
src="/images/vending-bay-2-scaled.webp"
|
|
alt="Modern vending machines installed at Utah business"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<Card className="absolute bottom-6 left-6 right-6 md:left-auto md:right-6 md:w-64 bg-card border border-border rounded-lg p-6 shadow-lg backdrop-blur-sm">
|
|
<CardContent className="p-0">
|
|
<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>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|