DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
64 lines
2.7 KiB
TypeScript
64 lines
2.7 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
import Image from "next/image"
|
|
|
|
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">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4 tracking-tight text-balance">What We Offer</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
|
|
From traditional favorites to healthy alternatives, we stock what your employees and customers want
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 max-w-7xl mx-auto">
|
|
{products.map((product, index) => (
|
|
<Card className="border-border/50 overflow-hidden hover:border-secondary/50 hover:shadow-lg transition-shadow transition-colors">
|
|
<div className="aspect-square relative overflow-hidden">
|
|
<Image
|
|
src={product.image || "/placeholder.svg"}
|
|
alt={product.alt}
|
|
fill
|
|
className="object-cover hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<CardContent className="p-6">
|
|
<h3 className="text-xl font-semibold mb-2">{product.title}</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">{product.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|