Deploy

src/components/sections/TestimonialsSection.tsx

@@ -0,0 +1,24 @@
+'use client'
+export default function TestimonialsSection() {
+  const testimonials = [
+    { name: "Maria Lopez", role: "Regular diner", quote: "The paella at La Roc is the closest thing to Valencia I\'ve found in the city." },
+    { name: "Carlos Fernandez", role: "Wine enthusiast", quote: "Their selection of Spanish wines is remarkable, and the sommelier\'s recommendations are always spot on." },
+    { name: "Elena Garcia", role: "First-time visitor", quote: "From the moment you walk in, you feel the passion for Spanish cuisine. The tapas were incredible." },
+  ]
+  return (
+    <section data-vula-section="testimonials" id="testimonials" className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-center mb-12 text-[#111827]">What Our Guests Say</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {testimonials.map((t, i) => (
+            <div key={i} className="rounded-xl border border-[#e5e7eb] bg-white p-8 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
+              <p className="text-[#111827] leading-relaxed mb-4">&ldquo;{t.quote}&rdquo;</p>
+              <p className="font-semibold text-[#111827]">{t.name}</p>
+              <p className="text-sm text-[#6b7280]">{t.role}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}