src/App.tsx

@@ -3,14 +3,18 @@ import HomePage from './pages/HomePage';
 import MenuPage from './pages/MenuPage';
 import AboutPage from './pages/AboutPage';
 import ContactPage from './pages/ContactPage';
+import TestimonialsGrid from './components/sections/testimonials/TestimonialsGrid';
 
 export default function App() {
   return (
-    <Routes>
-      <Route path="/" element={<HomePage />} />
+    <>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
       <Route path="/menu" element={<MenuPage />} />
       <Route path="/about" element={<AboutPage />} />
       <Route path="/contact" element={<ContactPage />} />
     </Routes>
+    <TestimonialsGrid />
+    </>
   );
 }

src/components/sections/testimonials/TestimonialsGrid.tsx

@@ -0,0 +1,44 @@
+import { Star } from 'lucide-react';
+
+const testimonials = [
+  {
+    name: "Sarah L.",
+    rating: 5,
+    text: "The best coffee I've had in a long time! The atmosphere is cozy and the staff is super friendly. A must-visit for any coffee lover."
+  },
+  {
+    name: "Mike R.",
+    rating: 5,
+    text: "Artisan Brew Co. is my go-to spot for my morning espresso. Consistent quality and a great selection of pastries. Highly recommend the almond croissant!"
+  },
+  {
+    name: "Jessica P.",
+    rating: 4,
+    text: "A lovely place to work or catch up with friends. The latte art is always on point. It can get a bit busy, but it's worth the wait."
+  }
+];
+
+const TestimonialsGrid = () => {
+  return (
+    <section className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-8">
+        <h2 className="text-6xl font-medium text-center text-balance">What Our Customers Say</h2>
+        <div className="testimonials-grid">
+          {testimonials.map((testimonial, index) => (
+            <div key={index} className="testimonial-card card">
+              <div className="testimonial-rating">
+                {[...Array(5)].map((_, i) => (
+                  <Star key={i} strokeWidth={1.5} className={`star ${i < testimonial.rating ? 'filled' : ''}`} />
+                ))}
+              </div>
+              <p className="testimonial-text">"{testimonial.text}"</p>
+              <p className="testimonial-name">- {testimonial.name}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TestimonialsGrid;