54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Sparkles, Droplets, Shield, Clock } from "lucide-react";
|
|
|
|
const services = [
|
|
{
|
|
title: "Full Interior Deep Clean",
|
|
description: "Vacuuming, floor mats, dashboard wipe-down, and window cleaning. We get into all the cracks and crevices.",
|
|
icon: Droplets
|
|
},
|
|
{
|
|
title: "Exterior Hand Wash",
|
|
description: "Safe hand wash and dry. No scratchy automatic brushes—just soft microfiber and premium soap.",
|
|
icon: Sparkles
|
|
},
|
|
{
|
|
title: "Wheel & Tire Shine",
|
|
description: "We scrub the brake dust off your rims and apply a long-lasting tire shine for that showroom look.",
|
|
icon: Shield
|
|
},
|
|
{
|
|
title: "Quick Turnaround",
|
|
description: "We work efficiently right in your driveway or ours. Most jobs done in 2-3 hours.",
|
|
icon: Clock
|
|
}
|
|
];
|
|
|
|
export function Services() {
|
|
return (
|
|
<section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900/50">
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<Heading>What We Do</Heading>
|
|
<Subheading className="mt-4">
|
|
Real human service. We use professional-grade tools and a lot of patience to get your car spotless.
|
|
</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{services.map((service, i) => (
|
|
<div key={i} className="p-8 rounded-2xl bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-sm">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6">
|
|
<service.icon className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3">{service.title}</h3>
|
|
<p className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">{service.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|