feat: (ui) new design

web/src/components/feature-card.tsx

@@ -0,0 +1,48 @@
+import React, { type ReactNode } from "react";
+import { cn } from "../lib/utils";
+import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
+import { Badge } from "./ui/badge";
+
+interface FeatureCardProps {
+    title: string;
+    category: string;
+    description?: string;
+    icon?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    delay?: number; // Animation delay in ms or generic unit
+}
+
+export function FeatureCard({
+    title,
+    category,
+    description,
+    icon,
+    children,
+    className,
+}: FeatureCardProps) {
+    return (
+        <Card className={cn(
+            "glass-card border-none hover-lift transition-all animate-in slide-up group overflow-hidden",
+            className
+        )}>
+            {icon && (
+                <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
+                    {icon}
+                </div>
+            )}
+            <CardHeader>
+                <Badge variant="glass" className="w-fit mb-2">{category}</Badge>
+                <CardTitle className="text-xl text-primary">{title}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                {description && (
+                    <p className="text-muted-foreground text-step--1">
+                        {description}
+                    </p>
+                )}
+                {children}
+            </CardContent>
+        </Card>
+    );
+}