cohorta/src/components/FeatureCard.tsx
2025-12-19 19:26:16 +00:00

30 lines
1,018 B
TypeScript
Executable file

import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
interface FeatureCardProps {
title: string;
description: string;
icon: LucideIcon;
className?: string;
}
export default function FeatureCard({ title, description, icon: Icon, className }: FeatureCardProps) {
return (
<div className={cn(
"relative group glass-card rounded-xl overflow-hidden p-6 hover:shadow-lg hover:translate-y-[-4px] button-transition",
className
)}>
<div className="absolute inset-0 bg-gradient-to-r from-primary/5 to-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="relative">
<div className="rounded-full bg-primary/10 w-12 h-12 flex items-center justify-center mb-4">
<Icon className="h-6 w-6 text-primary" />
</div>
<h3 className="font-sf text-lg font-semibold mb-2">{title}</h3>
<p className="text-gray-600 text-sm">{description}</p>
</div>
</div>
);
}