File size: 4,131 Bytes
25f22bf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import React from 'react';
const TestimonialCard = ({ avatar, name, role, company, content, rating, delay, isVisible }) => {
// Render star rating
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; |