78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Check } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
const packages = [
|
|
{
|
|
name: "Express Detail",
|
|
price: "Starting at $149",
|
|
description: "Perfect for regular maintenance.",
|
|
features: ["Hand Wash & Dry", "Interior Vacuum", "Window Cleaning", "Tire Shine", "Spray Wax"],
|
|
},
|
|
{
|
|
name: "The Apex Signature",
|
|
price: "Starting at $299",
|
|
description: "Our most popular comprehensive package.",
|
|
features: ["Everything in Express", "Clay Bar Treatment", "Interior Steam Clean", "Leather Conditioning", "6-Month Sealant"],
|
|
popular: true,
|
|
},
|
|
{
|
|
name: "Ceramic Pro",
|
|
price: "Starting at $899",
|
|
description: "Ultimate protection and gloss.",
|
|
features: ["Single Stage Correction", "Ceramic Coating (3yr)", "Wheel Coating", "Glass Coating", "Interior Protection"],
|
|
},
|
|
];
|
|
|
|
export function Pricing() {
|
|
return (
|
|
<section id="pricing" className="py-24">
|
|
<Container>
|
|
<div className="text-center max-w-2xl mx-auto mb-16">
|
|
<Heading>Detailing Packages</Heading>
|
|
<Subheading className="mt-4">
|
|
Transparent pricing for every level of care. Mobile service available in Cedar Rapids and surrounding areas.
|
|
</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{packages.map((pkg, index) => (
|
|
<Card key={index} className={`relative flex flex-col ${pkg.popular ? 'border-blue-500 border-2 shadow-lg' : ''}`}>
|
|
{pkg.popular && (
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
|
|
Most Popular
|
|
</div>
|
|
)}
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">{pkg.name}</CardTitle>
|
|
<div className="mt-4">
|
|
<span className="text-3xl font-bold">{pkg.price}</span>
|
|
</div>
|
|
<p className="text-neutral-500 mt-2">{pkg.description}</p>
|
|
</CardHeader>
|
|
<CardContent className="flex-grow">
|
|
<ul className="space-y-3">
|
|
{pkg.features.map((feature, i) => (
|
|
<li key={i} className="flex items-center gap-2">
|
|
<Check className="w-4 h-4 text-green-500" />
|
|
<span className="text-sm text-neutral-700">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className={`w-full ${pkg.popular ? 'bg-blue-600 hover:bg-blue-700' : ''}`} variant={pkg.popular ? 'default' : 'outline'} asChild>
|
|
<Link href="/contact">Book Now</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|