initial commit

components/Testimonials.tsx

@@ -0,0 +1,90 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Star, Quote } from 'lucide-react'
+
+const Testimonials = () => {
+  const testimonials = [
+    {
+      name: 'Alex Rodriguez',
+      role: 'Senior DevOps Engineer',
+      company: 'TechCorp',
+      content:
+        "SiliconPin's Kubernetes hosting has been a game-changer for our deployment pipeline. The auto-scaling works flawlessly and the support team is incredibly knowledgeable.",
+      rating: 5,
+      avatar: 'AR',
+    },
+    {
+      name: 'Sarah Chen',
+      role: 'Full Stack Developer',
+      company: 'StartupXYZ',
+      content:
+        "The VPS performance is outstanding and the control panel makes management so easy. I've moved all my client projects here and couldn't be happier.",
+      rating: 5,
+      avatar: 'SC',
+    },
+    {
+      name: 'Marcus Thompson',
+      role: 'CTO',
+      company: 'GrowthLab',
+      content:
+        'Their SMTP service has 99.9% deliverability rates. Our email campaigns have never performed better. The API integration was seamless.',
+      rating: 5,
+      avatar: 'MT',
+    },
+    {
+      name: 'Emily Davis',
+      role: 'Product Manager',
+      company: 'InnovateCo',
+      content:
+        "The web tools suite is incredibly useful. The speech-to-text API powers our transcription service and it's more accurate than any other solution we've tried.",
+      rating: 5,
+      avatar: 'ED',
+    },
+  ]
+
+  return (
+    <section className="py-24 bg-muted/30">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold mb-4">Trusted by Developers</h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            See what our customers say about SiliconPin's services
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <Card key={index} className="hover:shadow-card transition-shadow duration-300">
+              <CardContent className="p-8">
+                <div className="flex items-center mb-4">
+                  {[...Array(testimonial.rating)].map((_, i) => (
+                    <Star key={i} className="w-4 h-4 fill-warning text-warning" />
+                  ))}
+                </div>
+
+                <Quote className="w-8 h-8 text-primary mb-4 opacity-60" />
+
+                <p className="text-foreground mb-6 leading-relaxed italic">
+                  "{testimonial.content}"
+                </p>
+
+                <div className="flex items-center space-x-4">
+                  <div className="w-12 h-12 bg-gradient-hero rounded-full flex items-center justify-center text-white font-semibold">
+                    {testimonial.avatar}
+                  </div>
+                  <div>
+                    <div className="font-semibold text-foreground">{testimonial.name}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {testimonial.role} at {testimonial.company}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonials