77 lines
3.3 KiB
TypeScript
77 lines
3.3 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
|
import { CheckCircle2, Sparkles, ShieldCheck, Car } from "lucide-react";
|
|
|
|
const services = [
|
|
{
|
|
title: "Interior Detailing",
|
|
description: "Deep cleaning of all surfaces, steam cleaning, leather conditioning, and odor removal.",
|
|
icon: <Sparkles className="w-8 h-8 text-blue-500" />,
|
|
price: "Starting at $149",
|
|
features: ["Vacuum & Steam Clean", "Stain Removal", "Leather Treatment", "Dashboard UV Protection"]
|
|
},
|
|
{
|
|
title: "Exterior Detailing",
|
|
description: "Hand wash, clay bar treatment, iron decontamination, and high-quality wax application.",
|
|
icon: <Car className="w-8 h-8 text-blue-500" />,
|
|
price: "Starting at $129",
|
|
features: ["Foam Cannon Wash", "Wheel & Tire Deep Clean", "Clay Bar Treatment", "Hand Wax/Sealant"]
|
|
},
|
|
{
|
|
title: "Ceramic Coating",
|
|
description: "Long-term protection and extreme gloss with professional-grade ceramic coatings.",
|
|
icon: <ShieldCheck className="w-8 h-8 text-blue-500" />,
|
|
price: "Starting at $599",
|
|
features: ["Multi-year Protection", "Hydrophobic Properties", "UV & Chemical Resistance", "Enhanced Gloss"]
|
|
},
|
|
{
|
|
title: "Full Detail Package",
|
|
description: "The ultimate transformation for your vehicle, combining interior and exterior services.",
|
|
icon: <CheckCircle2 className="w-8 h-8 text-blue-500" />,
|
|
price: "Starting at $249",
|
|
features: ["Complete Interior", "Complete Exterior", "Engine Bay Cleaning", "Paint Sealant"]
|
|
}
|
|
];
|
|
|
|
export function Services() {
|
|
return (
|
|
<section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900">
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<Heading>Our Premium Services</Heading>
|
|
<Subheading className="mt-4">
|
|
Professional detailing solutions tailored to your vehicle's needs in Cedar Rapids and surrounding areas.
|
|
</Subheading>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{services.map((service, index) => (
|
|
<Card key={index} className="border-none shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader>
|
|
<div className="mb-4">{service.icon}</div>
|
|
<CardTitle className="text-xl">{service.title}</CardTitle>
|
|
<CardDescription className="text-blue-600 font-semibold">{service.price}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-neutral-600 dark:text-neutral-400 mb-6 text-sm">
|
|
{service.description}
|
|
</p>
|
|
<ul className="space-y-2">
|
|
{service.features.map((feature, fIndex) => (
|
|
<li key={fIndex} className="flex items-center text-sm text-neutral-700 dark:text-neutral-300">
|
|
<CheckCircle2 className="w-4 h-4 mr-2 text-green-500" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|