Update components/pricing.tsx

components/pricing.tsx

@@ -0,0 +1,77 @@
+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>
+  );
+}