23 lines
1.1 KiB
TypeScript
23 lines
1.1 KiB
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface FeatureItemProps {
|
|
icon: LucideIcon;
|
|
text: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function FeatureItem({ icon: Icon, text, className }: FeatureItemProps) {
|
|
return (
|
|
<div className={`group relative overflow-hidden rounded-lg bg-gradient-to-r from-slate-900/60 via-slate-800/40 to-slate-900/60 p-4 border border-slate-700/40 hover:border-primary-blue/50 transition-all duration-300 hover:shadow-[0_0_25px_rgba(59,130,246,0.15)] ${className || ''}`}>
|
|
<div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-primary-blue/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-9 h-9 rounded-lg bg-gradient-to-br from-primary-blue/20 to-blue-900/20 border border-primary-blue/30 flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform">
|
|
<Icon className="w-5 h-5 text-primary-blue" />
|
|
</div>
|
|
<span className="text-slate-200 leading-relaxed font-light">
|
|
{text}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |