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>
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
import Image from "next/image"
|
|
import { AnimatedNumber } from "@/components/animated-number"
|
|
|
|
interface VendingMachineCardProps {
|
|
name: string
|
|
description: string
|
|
image: string
|
|
alt: string
|
|
selections?: number
|
|
items?: number
|
|
}
|
|
|
|
export function VendingMachineCard({
|
|
name,
|
|
description,
|
|
image,
|
|
alt,
|
|
selections = 0,
|
|
items = 0,
|
|
}: VendingMachineCardProps) {
|
|
return (
|
|
<Card className="border-border/50 overflow-hidden h-full flex flex-col hover:border-secondary/50 transition-colors">
|
|
<div className="relative aspect-[4/3] w-full bg-muted">
|
|
<Image
|
|
src={image}
|
|
alt={alt}
|
|
fill
|
|
className="object-contain p-4"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
priority={false}
|
|
/>
|
|
</div>
|
|
<CardContent className="p-6 flex-1 flex flex-col">
|
|
<h3 className="text-xl font-semibold mb-2">{name}</h3>
|
|
<p className="text-sm text-muted-foreground mb-4 flex-1 overflow-y-auto">{description}</p>
|
|
<div className="flex gap-6 text-sm pt-4 border-t">
|
|
<div>
|
|
<AnimatedNumber
|
|
value={selections}
|
|
className="text-2xl font-bold text-secondary"
|
|
/>
|
|
<div className="text-xs text-muted-foreground uppercase tracking-wide mt-1">Selections</div>
|
|
</div>
|
|
<div>
|
|
<AnimatedNumber
|
|
value={items}
|
|
className="text-2xl font-bold text-secondary"
|
|
/>
|
|
<div className="text-xs text-muted-foreground uppercase tracking-wide mt-1">Items</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|