Update components/testimonials.tsx

components/testimonials.tsx

@@ -0,0 +1,54 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Star } from "lucide-react";
+
+const reviews = [
+  {
+    name: "Michael R.",
+    role: "Tesla Model S Owner",
+    content: "The AI surface scan they did before the ceramic coating was mind-blowing. My car looks better than the day I picked it up from the showroom.",
+    stars: 5
+  },
+  {
+    name: "Sarah J.",
+    role: "BMW X5 Owner",
+    content: "Best detailer in Cedar Rapids. The attention to detail is unmatched. They found and fixed scratches I didn't even know were there.",
+    stars: 5
+  },
+  {
+    name: "David L.",
+    role: "Classic Mustang Owner",
+    content: "I'm very picky about who touches my vintage cars. Apex is the only shop I trust. Their paint correction is pure wizardry.",
+    stars: 5
+  }
+];
+
+export function Testimonials() {
+  return (
+    <section className="py-24 bg-neutral-950">
+      <Container>
+        <div className="text-center mb-16">
+          <Heading className="text-white">Trusted by Cedar Rapids' Elite</Heading>
+          <Subheading className="text-neutral-400">Don't just take our word for it. See what our clients are saying.</Subheading>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {reviews.map((review, i) => (
+            <div key={i} className="p-8 rounded-2xl bg-neutral-900 border border-neutral-800 hover:border-blue-500/50 transition-colors">
+              <div className="flex gap-1 mb-4">
+                {[...Array(review.stars)].map((_, i) => (
+                  <Star key={i} className="w-4 h-4 fill-yellow-500 text-yellow-500" />
+                ))}
+              </div>
+              <p className="text-neutral-300 italic mb-6">"{review.content}"</p>
+              <div>
+                <p className="font-bold text-white">{review.name}</p>
+                <p className="text-sm text-blue-400">{review.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}