feat: (ui) new design

web/src/components/info-card.tsx

@@ -0,0 +1,30 @@
+import React, { type ReactNode } from "react";
+import { cn } from "../lib/utils";
+
+interface InfoCardProps {
+    icon: ReactNode;
+    title: string;
+    description: string;
+    iconWrapperClassName?: string;
+    className?: string;
+}
+
+export function InfoCard({
+    icon,
+    title,
+    description,
+    iconWrapperClassName,
+    className,
+}: InfoCardProps) {
+    return (
+        <div className={cn("space-y-4 p-6 glass-card rounded-2xl hover:bg-white/5 transition-colors", className)}>
+            <div className={cn("w-12 h-12 rounded-xl flex items-center justify-center mb-4", iconWrapperClassName)}>
+                {icon}
+            </div>
+            <h3 className="text-xl font-bold text-primary">{title}</h3>
+            <p className="text-muted-foreground text-step--1">
+                {description}
+            </p>
+        </div>
+    );
+}