73 lines
3 KiB
TypeScript
73 lines
3 KiB
TypeScript
import Image from "next/image"
|
|
import { PublicPageHeader, PublicSurface } from "@/components/public-surface"
|
|
|
|
export function ProductShowcaseSection() {
|
|
const products = [
|
|
{
|
|
title: "Traditional Snacks & Drinks",
|
|
description:
|
|
"Popular brands your employees know and love. From chips and candy to soda and energy drinks.",
|
|
image: "/images/traditional-snacks-utah.webp",
|
|
alt: "Traditional snacks including M&Ms, Oreos, Reeses in vending machine",
|
|
},
|
|
{
|
|
title: "Healthy Options",
|
|
description:
|
|
"Nutritious choices for health-conscious customers. Protein bars, nuts, sparkling water, and more.",
|
|
image: "/images/healthy-vending-utah.webp",
|
|
alt: "Healthy vending options including protein bars and nutritious snacks",
|
|
},
|
|
{
|
|
title: "Cold Beverages",
|
|
description:
|
|
"Refreshing drinks kept at perfect temperature. Soda, water, juice, sports drinks, and energy drinks.",
|
|
image: "/images/img-1432.webp",
|
|
alt: "Cold drinks vending machine with variety of beverages",
|
|
},
|
|
{
|
|
title: "Specialty Products",
|
|
description:
|
|
"Local favorites and specialty items. We can customize your machine with what your team wants.",
|
|
image: "/images/drink-and-snack-delivery-utah-scaled.webp",
|
|
alt: "Specialty Bucked Up Energy drinks available for delivery",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section className="py-16 md:py-24 bg-background">
|
|
<div className="container mx-auto px-4">
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="Product Mix"
|
|
title="What we keep stocked and ready to tailor for your location."
|
|
description="From traditional favorites to healthier options, we can tailor the product mix so the machine feels right for the people using your space."
|
|
className="mb-12"
|
|
/>
|
|
|
|
<div className="mx-auto grid max-w-7xl gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
{products.map((product) => (
|
|
<PublicSurface
|
|
key={product.title}
|
|
className="overflow-hidden p-0 transition-all hover:-translate-y-0.5 hover:shadow-[0_26px_65px_rgba(0,0,0,0.12)]"
|
|
>
|
|
<div className="relative aspect-square overflow-hidden bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.14),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))]">
|
|
<Image
|
|
src={product.image || "/placeholder.svg"}
|
|
alt={product.alt}
|
|
fill
|
|
className="object-cover transition-transform duration-300 hover:scale-105"
|
|
/>
|
|
</div>
|
|
<div className="p-5 md:p-6">
|
|
<h3 className="text-xl font-semibold mb-2">{product.title}</h3>
|
|
<p className="text-sm leading-relaxed text-muted-foreground">
|
|
{product.description}
|
|
</p>
|
|
</div>
|
|
</PublicSurface>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|