|
|
import React from 'react'; |
|
|
|
|
|
const TestimonialCard = ({ avatar, name, role, company, content, rating, delay, isVisible }) => { |
|
|
|
|
|
const renderStars = (rating) => { |
|
|
return Array.from({ length: 5 }, (_, index) => ( |
|
|
<svg |
|
|
key={index} |
|
|
className={`w-5 h-5 ${ |
|
|
index < rating ? 'text-yellow-400' : 'text-gray-300' |
|
|
}`} |
|
|
fill="currentColor" |
|
|
viewBox="0 0 20 20" |
|
|
> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> |
|
|
</svg> |
|
|
)); |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<div |
|
|
className="group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 animate-slide-up" |
|
|
style={{ animationDelay: delay }} |
|
|
> |
|
|
{/* Quote icon background */} |
|
|
<div className="absolute top-6 right-6 opacity-10 group-hover:opacity-20 transition-opacity duration-300"> |
|
|
<svg className="w-16 h-16 text-primary-600" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" /> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
{/* Rating stars */} |
|
|
<div className="flex items-center gap-1 mb-6"> |
|
|
{renderStars(rating)} |
|
|
</div> |
|
|
|
|
|
{/* Testimonial content */} |
|
|
<blockquote className="text-gray-700 leading-relaxed mb-8 group-hover:text-gray-600 transition-colors duration-300"> |
|
|
<p className="text-lg italic">"{content}"</p> |
|
|
</blockquote> |
|
|
|
|
|
{/* Author information */} |
|
|
<div className="flex items-center"> |
|
|
{/* Avatar with enhanced styling */} |
|
|
<div className="relative mr-4"> |
|
|
<div className="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-lg group-hover:shadow-xl transition-shadow duration-300"> |
|
|
{avatar} |
|
|
</div> |
|
|
{/* Avatar ring effect */} |
|
|
<div className="absolute inset-0 rounded-full border-4 border-white shadow-lg group-hover:border-primary-200 transition-all duration-300"></div> |
|
|
</div> |
|
|
|
|
|
{/* Author details */} |
|
|
<div className="flex-1"> |
|
|
<h4 className="font-bold text-gray-900 text-lg group-hover:text-primary-600 transition-colors duration-300"> |
|
|
{name} |
|
|
</h4> |
|
|
<p className="text-gray-600 text-sm group-hover:text-gray-700 transition-colors duration-300"> |
|
|
{role} |
|
|
</p> |
|
|
<p className="text-gray-500 text-xs group-hover:text-gray-600 transition-colors duration-300"> |
|
|
{company} |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{/* Decorative elements */} |
|
|
<div className="mt-6 pt-6 border-t border-gray-100"> |
|
|
<div className="flex items-center justify-between"> |
|
|
<div className="w-12 h-px bg-gradient-to-r from-transparent via-primary-200 to-transparent"></div> |
|
|
<div className="px-3"> |
|
|
<svg className="w-4 h-4 text-primary-400 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div className="w-12 h-px bg-gradient-to-r from-transparent via-primary-200 to-transparent"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{/* Hover overlay effect */} |
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary-50/20 to-accent-50/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default TestimonialCard; |
