53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import './TestimonialCard.css';
|
|
|
|
const testimonials = [
|
|
{
|
|
quote: "Their team transformed our yard into a paradise. So professional and creative!",
|
|
author: "Alex & Jamie R.",
|
|
avatar: "https://randomuser.me/api/portraits/women/44.jpg",
|
|
},
|
|
{
|
|
quote: "Incredible attention to detail. Our garden has never looked better. Highly recommend!",
|
|
author: "Casey L.",
|
|
avatar: "https://randomuser.me/api/portraits/men/32.jpg",
|
|
},
|
|
{
|
|
quote: "The best landscaping service in town. They exceeded all our expectations.",
|
|
author: "Jordan P.",
|
|
avatar: "https://randomuser.me/api/portraits/women/65.jpg",
|
|
},
|
|
];
|
|
|
|
const TestimonialCard = () => {
|
|
const [index, setIndex] = useState(0);
|
|
const [visible, setVisible] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setVisible(false);
|
|
setTimeout(() => {
|
|
setIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
|
|
setVisible(true);
|
|
}, 500); // CSS transition duration
|
|
}, 3000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="z-20">
|
|
<div className={`testimonial-card ${visible ? 'fade-in' : 'fade-out'}`}>
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 max-w-sm shadow-lg">
|
|
<p className="text-gray-800 italic">"{testimonials[index].quote}"</p>
|
|
<div className="flex items-center mt-3">
|
|
<img src={testimonials[index].avatar} alt={testimonials[index].author} className="w-10 h-10 rounded-full mr-3" />
|
|
<p className="text-gray-900 font-semibold">{testimonials[index].author}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TestimonialCard;
|