52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import { LucideIcon } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface FeatureCardProps {
|
|
title: string
|
|
description?: string
|
|
icon: LucideIcon
|
|
href: string
|
|
color: 'green' | 'blue' | 'orange' | 'purple' | 'red'
|
|
className?: string
|
|
}
|
|
|
|
export function FeatureCard({ title, description, icon: Icon, href, color, className }: FeatureCardProps) {
|
|
const colorStyles = {
|
|
green: 'border-green-500 text-green-600',
|
|
blue: 'border-blue-500 text-blue-600',
|
|
orange: 'border-orange-500 text-orange-600',
|
|
purple: 'border-purple-500 text-purple-600',
|
|
red: 'border-red-500 text-red-600',
|
|
}
|
|
|
|
const iconBgStyles = {
|
|
green: 'bg-green-50 text-green-600 border-green-200',
|
|
blue: 'bg-blue-50 text-blue-600 border-blue-200',
|
|
orange: 'bg-orange-50 text-orange-600 border-orange-200',
|
|
purple: 'bg-purple-50 text-purple-600 border-purple-200',
|
|
red: 'bg-red-50 text-red-600 border-red-200',
|
|
}
|
|
|
|
return (
|
|
<Link href={href} className={cn("block group h-full", className)}>
|
|
<div className={cn(
|
|
"h-full bg-white rounded-xl p-6 transition-all duration-300 relative overflow-hidden group-hover:-translate-y-1",
|
|
"border-2 hover:shadow-lg",
|
|
colorStyles[color]
|
|
)}>
|
|
<div className="flex flex-col items-center text-center h-full">
|
|
<div className={cn("w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center mb-4 border-2 transition-transform group-hover:scale-110", iconBgStyles[color])}>
|
|
<Icon className="w-6 h-6 sm:w-8 sm:h-8" />
|
|
</div>
|
|
|
|
<h3 className="text-lg sm:text-xl font-bold mb-2 text-black">{title}</h3>
|
|
{description && (
|
|
<p className="text-gray-500 text-xs sm:text-sm leading-relaxed">{description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|