ai-wpa/components/Testimonials.tsx

91 lines
3.2 KiB
TypeScript

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