fun improvements (#1)

Reviewed-on: #1

components/badges.tsx

@@ -0,0 +1,85 @@
+import Link from "next/link";
+
+interface BadgeProps {
+  href?: string;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+function Badge({ href, children, style }: BadgeProps) {
+  const base = (
+    <div
+      className="flex items-center justify-center border border-white/40 text-center font-mono leading-tight select-none"
+      style={{ width: 88, height: 31, fontSize: 9, ...style }}
+    >
+      {children}
+    </div>
+  );
+
+  if (href) {
+    if (href.startsWith("http")) {
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity">
+          {base}
+        </a>
+      );
+    }
+    return (
+      <Link href={href} className="hover:opacity-80 transition-opacity">
+        {base}
+      </Link>
+    );
+  }
+  return base;
+}
+
+export default function Badges() {
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      <Badge
+        href="https://nextjs.org"
+        style={{ background: "linear-gradient(135deg, #0d0d0d, #1a1a2e)", color: "#7dd3fc", borderColor: "#334155" }}
+      >
+        <span>⬛ Next.js</span>
+      </Badge>
+
+      <Badge
+        href="https://bun.sh"
+        style={{ background: "linear-gradient(135deg, #1a0a00, #2d1500)", color: "#fb923c", borderColor: "#7c2d12" }}
+      >
+        🍞 Powered by Bun
+      </Badge>
+
+      <Badge
+        style={{ background: "linear-gradient(135deg, #0c1a3a, #1e3a6e)", color: "#93c5fd", borderColor: "#1e40af" }}
+      >
+        <div>
+          <div>Best viewed</div>
+          <div>1024×768</div>
+        </div>
+      </Badge>
+
+      <Badge
+        href="/feed.xml"
+        style={{ background: "linear-gradient(135deg, #431407, #7c2d12)", color: "#fde68a", borderColor: "#b45309" }}
+      >
+        📡 Valid RSS
+      </Badge>
+
+      <Badge
+        style={{ background: "linear-gradient(135deg, #0f172a, #1e1b4b)", color: "#c4b5fd", borderColor: "#4c1d95" }}
+      >
+        Made with ♥
+      </Badge>
+
+      <Badge
+        style={{ background: "linear-gradient(135deg, #0369a1, #0ea5e9)", color: "white", borderColor: "#38bdf8" }}
+      >
+        <div>
+          <div style={{ fontSize: 8 }}>✦ Frutiger</div>
+          <div style={{ fontSize: 8 }}>Aero ✦</div>
+        </div>
+      </Badge>
+    </div>
+  );
+}