44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
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; |