Update components/services.tsx

components/services.tsx

@@ -1,73 +1,50 @@
 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 { Sparkles, Droplets, Shield, Clock } from "lucide-react";
-import { CheckCircle2, Sparkles, ShieldCheck, Car } from "lucide-react";
 
 const services = [
   {
-    title: "Interior Detailing",
+    title: "Full Interior Deep Clean",
-    description: "Deep cleaning of all surfaces, steam cleaning, leather conditioning, and odor removal.",
+    description: "Vacuuming, floor mats, dashboard wipe-down, and window cleaning. We get into all the cracks and crevices.",
-    icon: <Sparkles className="w-8 h-8 text-blue-500" />,
+    icon: Droplets
-    price: "Starting at $149",
-    features: ["Vacuum & Steam Clean", "Stain Removal", "Leather Treatment", "Dashboard UV Protection"]
   },
   {
-    title: "Exterior Detailing",
+    title: "Exterior Hand Wash",
-    description: "Hand wash, clay bar treatment, iron decontamination, and high-quality wax application.",
+    description: "Safe hand wash and dry. No scratchy automatic brushes—just soft microfiber and premium soap.",
-    icon: <Car className="w-8 h-8 text-blue-500" />,
+    icon: Sparkles
-    price: "Starting at $129",
-    features: ["Foam Cannon Wash", "Wheel & Tire Deep Clean", "Clay Bar Treatment", "Hand Wax/Sealant"]
   },
   {
-    title: "Ceramic Coating",
+    title: "Wheel & Tire Shine",
-    description: "Long-term protection and extreme gloss with professional-grade ceramic coatings.",
+    description: "We scrub the brake dust off your rims and apply a long-lasting tire shine for that showroom look.",
-    icon: <ShieldCheck className="w-8 h-8 text-blue-500" />,
+    icon: Shield
-    price: "Starting at $599",
-    features: ["Multi-year Protection", "Hydrophobic Properties", "UV & Chemical Resistance", "Enhanced Gloss"]
   },
   {
-    title: "Full Detail Package",
+    title: "Quick Turnaround",
-    description: "The ultimate transformation for your vehicle, combining interior and exterior services.",
+    description: "We work efficiently right in your driveway or ours. Most jobs done in 2-3 hours.",
-    icon: <CheckCircle2 className="w-8 h-8 text-blue-500" />,
+    icon: Clock
-    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">
+    <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>Our Premium Services</Heading>
+          <Heading>What We Do</Heading>
           <Subheading className="mt-4">
-            Professional detailing solutions tailored to your vehicle's needs in Cedar Rapids and surrounding areas.
+            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">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {services.map((service, i) => (
-          {services.map((service, index) => (
+            <div key={i} className="p-8 rounded-2xl bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-sm">
-            <Card key={index} className="border-none shadow-lg hover:shadow-xl transition-shadow">
+              <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6">
-              <CardHeader>
+                <service.icon className="w-6 h-6 text-blue-600" />
-                <div className="mb-4">{service.icon}</div>
+              </div>
-                <CardTitle className="text-xl">{service.title}</CardTitle>
+              <h3 className="text-xl font-bold mb-3">{service.title}</h3>
-                <CardDescription className="text-blue-600 font-semibold">{service.price}</CardDescription>
+              <p className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">{service.description}</p>
-              </CardHeader>
+            </div>
-              <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>