DashCaddy.net all files

src/components/FeatureCard.tsx

@@ -0,0 +1,37 @@
+'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>
+  );
+}