38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
interface FeatureCardProps {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
export default function FeatureCard({
|
|
icon,
|
|
title,
|
|
description,
|
|
}: FeatureCardProps) {
|
|
return (
|
|
<div className="group relative overflow-hidden rounded-lg border border-surface-700 bg-surface-800/50 backdrop-blur-sm p-6 transition-all duration-300 hover:border-brand-500/50 hover:bg-surface-800/80 hover:shadow-lg hover:shadow-brand-500/10">
|
|
{/* Background gradient effect on hover */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
|
|
|
|
<div className="relative z-10">
|
|
{/* Icon */}
|
|
<div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
|
|
<div className="text-2xl">{icon}</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="mb-2 text-lg font-semibold text-surface-50">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
<p className="text-surface-300 text-sm leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|