Add src/components/sections/testimonials/TestimonialsStorybook.js

src/components/sections/testimonials/TestimonialsStorybook.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+
+function TestimonialsStorybook() {
+  const testimonials = [
+    {
+      name: 'John Doe',
+      role: 'Frontend Developer',
+      company: 'TechCorp',
+      content: 'This component library has saved us countless hours of development time. The quality is exceptional.',
+      rating: 5,
+      avatar: '/images/256-1768917228018.png'
+    },
+    {
+      name: 'Jane Smith',
+      role: 'Product Manager',
+      company: 'StartupXYZ',
+      content: 'Clean, modern components that work perfectly out of the box. Highly recommended!',
+      rating: 5,
+      avatar: '/images/256-1768917228018.png'
+    },
+    {
+      name: 'Mike Johnson',
+      role: 'Full Stack Developer',
+      company: 'WebAgency',
+      content: 'The documentation is excellent and the components are very well designed.',
+      rating: 5,
+      avatar: '/images/256-1768917228018.png'
+    }
+  ];
+
+  return (
+    <section className="py-16 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            What developers are saying
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Join thousands of developers who trust our components
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <div key={index} className="bg-white p-6 rounded-lg shadow-sm">
+              <div className="flex items-center mb-4">
+                {[...Array(testimonial.rating)].map((_, i) => (
+                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                ))}
+              </div>
+              
+              <p className="text-gray-700 mb-4">
+                "{testimonial.content}"
+              </p>
+              
+              <div className="flex items-center">
+                <img src={testimonial.avatar} alt={testimonial.name} className="w-12 h-12 rounded-full mr-4" />
+                <div>
+                  <div className="font-semibold text-gray-900">{testimonial.name}</div>
+                  <div className="text-sm text-gray-600">{testimonial.role} at {testimonial.company}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default TestimonialsStorybook;