111 lines
4.1 KiB
TypeScript
111 lines
4.1 KiB
TypeScript
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { PublicSurface } from "@/components/public-surface"
|
|
|
|
const services = [
|
|
{
|
|
title: "Vending Machines",
|
|
items: [
|
|
{
|
|
name: "Machines for Sale",
|
|
href: "/vending-machines/machines-for-sale",
|
|
},
|
|
{ name: "Machines We Use", href: "/vending-machines/machines-we-use" },
|
|
{ name: "Service Areas", href: "/service-areas" },
|
|
{ name: "Free Placement", href: "/#request-machine" },
|
|
],
|
|
image: "/images/vending-bay-2-scaled.webp",
|
|
},
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{ name: "Vending Machine Moves", href: "/services/moving" },
|
|
{ name: "Repairs & Maintenance", href: "/services/repairs" },
|
|
{ name: "Replacement Parts", href: "/services/parts" },
|
|
{ name: "Vending Machine Manuals", href: "/manuals" },
|
|
],
|
|
image: "/vending-machine-repair-service.jpg",
|
|
},
|
|
{
|
|
title: "Product Options",
|
|
items: [
|
|
{
|
|
name: "Healthy Vending Options",
|
|
href: "/food-and-beverage/healthy-options",
|
|
},
|
|
{
|
|
name: "Traditional Favorites",
|
|
href: "/food-and-beverage/traditional-options",
|
|
},
|
|
{ name: "Supplier Overview", href: "/food-and-beverage/suppliers" },
|
|
{ name: "Contact About Your Mix", href: "/contact-us#contact-form" },
|
|
],
|
|
image: "/variety-of-drinks-and-snacks.jpg",
|
|
},
|
|
{
|
|
title: "Next Steps & Resources",
|
|
items: [
|
|
{ name: "Service Areas", href: "/service-areas" },
|
|
{ name: "Talk to Our Team", href: "/contact-us#contact-form" },
|
|
{ name: "Request Service", href: "/services/repairs#request-service" },
|
|
{ name: "Order Parts", href: "/services/parts#how-to-order" },
|
|
],
|
|
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">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
|
|
Explore
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl text-balance">
|
|
Our services and products
|
|
</h2>
|
|
<p className="mx-auto mt-3 max-w-2xl text-lg text-muted-foreground text-pretty leading-relaxed">
|
|
From free placement to repairs, manuals, and product mix planning,
|
|
this is where to find the machines, service pages, and next steps
|
|
your location may need.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
|
|
{services.map((service) => (
|
|
<PublicSurface
|
|
key={service.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-[4/3] bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.75),rgba(255,255,255,0.96))]">
|
|
<Image
|
|
src={service.image || "/placeholder.svg"}
|
|
alt={service.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-5 md:p-6">
|
|
<h3 className="text-xl font-semibold mb-4">{service.title}</h3>
|
|
<ul className="space-y-2">
|
|
{service.items.map((item) => (
|
|
<li key={item.name}>
|
|
<Link
|
|
href={item.href}
|
|
className="flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-primary hover:underline"
|
|
>
|
|
<span className="h-1.5 w-1.5 rounded-full bg-primary/70" />
|
|
{item.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</PublicSurface>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|