64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
import Image from "next/image"
|
|
|
|
const services = [
|
|
{
|
|
title: "Vending Machines",
|
|
items: ["Sales", "Machines We Use", "Custom Solutions", "Latest Technology"],
|
|
image: "/images/vending-bay-2-scaled.webp",
|
|
},
|
|
{
|
|
title: "Services",
|
|
items: ["Vending Machine Moves", "Repairs & Maintenance", "Restocking", "24/7 Support"],
|
|
image: "/vending-machine-repair-service.jpg",
|
|
},
|
|
{
|
|
title: "Product Options",
|
|
items: ["Coca-Cola Products", "Pepsi Products", "Healthy Snacks", "Energy Drinks"],
|
|
image: "/variety-of-drinks-and-snacks.jpg",
|
|
},
|
|
]
|
|
|
|
export function ServicesSection() {
|
|
return (
|
|
<section id="services" className="py-20 md:py-28 bg-muted/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
|
|
Our Services & Products
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
|
|
From traditional vending machines to modern cashless solutions, we offer everything you need to keep your
|
|
team refreshed and productive.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-3">
|
|
{services.map((service, index) => (
|
|
<Card key={index} className="border-border/50 overflow-hidden hover:border-secondary/50 transition-colors">
|
|
<div className="aspect-video relative bg-muted">
|
|
<Image
|
|
src={service.image || "/placeholder.svg"}
|
|
alt={service.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<CardContent className="pt-6">
|
|
<h3 className="text-xl font-semibold mb-4">{service.title}</h3>
|
|
<ul className="space-y-2">
|
|
{service.items.map((item, itemIndex) => (
|
|
<li key={itemIndex} className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<div className="h-1.5 w-1.5 rounded-full bg-secondary" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|