File size: 2,928 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 |
import React from 'react';
const FeatureCard = ({ icon, title, description, delay, isVisible, isNew, isPopular, isPremium }) => {
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 ${
isNew ? 'ring-2 ring-primary-200' : ''
}`}
style={{ animationDelay: delay }}
>
{/* Badge indicators */}
<div className="absolute top-4 right-4 flex gap-2">
{isNew && (
<span className="px-3 py-1 bg-primary-100 text-primary-800 text-xs font-semibold rounded-full">
New
</span>
)}
{isPopular && (
<span className="px-3 py-1 bg-accent-100 text-accent-800 text-xs font-semibold rounded-full">
Popular
</span>
)}
{isPremium && (
<span className="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">
Premium
</span>
)}
</div>
{/* Icon with enhanced styling */}
<div className="relative mb-6">
<div className="w-16 h-16 bg-gradient-to-br from-primary-50 to-accent-50 rounded-2xl flex items-center justify-center text-3xl transition-all duration-300 group-hover:scale-110">
{icon}
</div>
{/* Glow effect on hover */}
<div className="absolute inset-0 bg-gradient-to-br from-primary-200 to-accent-200 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-lg"></div>
</div>
{/* Title with enhanced typography */}
<h3 className="text-xl font-bold text-gray-900 mb-4 leading-tight group-hover:text-primary-600 transition-colors duration-300">
{title}
</h3>
{/* Description with enhanced styling */}
<p className="text-gray-600 leading-relaxed mb-6 group-hover:text-gray-700 transition-colors duration-300">
{description}
</p>
{/* Interactive elements */}
<div className="flex items-center justify-between">
<div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
<div className="mx-4">
<svg className="w-5 h-5 text-primary-600 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>
<div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"></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 FeatureCard; |