init

dmtp/client/app/_sections/badge-showcase.tsx

@@ -0,0 +1,31 @@
+const badges = [
+  { name: "Quick Starter", icon: "⚡", earned: true },
+  { name: "Accuracy Master", icon: "🎯", earned: true },
+  { name: "Streak Champion", icon: "🔥", earned: true },
+  { name: "Top Performer", icon: "👑", earned: false },
+  { name: "Community Helper", icon: "🤝", earned: false },
+  { name: "Legendary Worker", icon: "⭐", earned: false },
+]
+
+export function BadgeShowcase() {
+  return (
+    <div>
+      <h3 className="font-semibold text-lg mb-4">Badges</h3>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
+        {badges.map((badge, index) => (
+          <div
+            key={index}
+            className={`p-4  text-center transition-all ${
+              badge.earned
+                ? "bg-card/80 backdrop-blur-md border border-border  hover:bg-card/90 transition-colors duration-200"
+                : "bg-card/50 opacity-50"
+            }`}
+          >
+            <div className="text-3xl mb-2">{badge.icon}</div>
+            <p className="text-xs font-medium">{badge.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}