Update components/services.tsx

2026-01-16 16:25:28 +00:00 · 2026-01-16 16:25:28 +00:00 · c1fb2e52fb
parent 39583c86e0
commit c1fb2e52fb
1 changed files with 76 additions and 0 deletions
--- a/components/services.tsx
+++ b/components/services.tsx
@ -0,0 +1,76 @@
+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>
+  );
+}