feat(web): integrate badge feature into app

Wire up badge page with provider layout, update section cards with
badge previews, and add @tech-stack/badge dependency.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: wontory

apps/web/app/badge/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 
 import { InsetLayout } from '#layouts/inset-layout'
+import { BadgeProvider } from '#stores/badge-context'
 
 export const metadata: Metadata = {
   title: 'badge',
@@ -11,5 +12,9 @@ export default function PageLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  return <InsetLayout title="Badge">{children}</InsetLayout>
+  return (
+    <InsetLayout title="Badge">
+      <BadgeProvider>{children}</BadgeProvider>
+    </InsetLayout>
+  )
 }

apps/web/app/badge/page.tsx

@@ -1,14 +1,11 @@
-import Link from 'next/link'
-
-import { Button } from '@tech-stack/ui/components/button'
+import { BadgeCustomize } from '#components/badge-customize'
+import { BadgePreview } from '#components/badge-preview'
 
 export default function Page() {
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-4">
-      <h1 className="font-bold text-2xl">Work in progress</h1>
-      <Button size="sm" asChild>
-        <Link href="/">Home</Link>
-      </Button>
+    <div className="grid @5xl/main:grid-cols-2 grid-cols-1 gap-4 px-4 lg:px-6">
+      <BadgePreview />
+      <BadgeCustomize />
     </div>
   )
 }

apps/web/next.config.mjs

@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ['@tech-stack/ui', '@tech-stack/orbit'],
+  transpilePackages: [
+    '@tech-stack/ui',
+    '@tech-stack/orbit',
+    '@tech-stack/badge',
+  ],
 }
 
 export default nextConfig

apps/web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.13.8",
+    "@tech-stack/badge": "workspace:*",
     "@tech-stack/orbit": "workspace:*",
     "@tech-stack/ui": "workspace:*",
     "lucide-react": "catalog:icons",

apps/web/src/components/section-cards.tsx

@@ -78,10 +78,17 @@ function BadgeCard() {
       title="Badge"
       description="tech-stack"
       content={
-        <div className="flex flex-1 items-center justify-center">
-          <span className="font-medium text-muted-foreground">
-            Work in progress.
-          </span>
+        <div className="flex flex-1 flex-col items-center justify-center gap-3">
+          <img
+            src="/api/badge?slug=nextdotjs&text=Next.js&highlight=true"
+            alt="Badge highlight"
+            draggable={false}
+          />
+          <img
+            src="/api/badge?slug=typescript&text=TypeScript"
+            alt="Badge"
+            draggable={false}
+          />
         </div>
       }
       footer={