From 173261b7c1df5500ca1a95509587fba0c079703a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20V=C3=ADt?= <slipiklp@gmail.com>
Date: Wed, 5 Aug 2026 11:19:55 +0200
Subject: [PATCH] refactor(www): move the marketing and design sites to the
 host build

The landing page and the design-system site are cloud-company surfaces
rather than open-core product surface, so they move to the host repository
and this app keeps only what a self-hosted deployment needs.

- `/` now hands off to the studio. The route shell stays here because a
  host cannot add a second `/` route without colliding with this one;
  instead `_marketing/index.tsx` renders `features/www/marketing-home-slot`,
  which hosts replace the same way as the other extension points.
- `features/www/landing` and the whole `features/design` + `routes/design`
  tree move out. `hero-shader` stays as `components/hero-shader` because
  the auth pages use it, and `lib/waitlist` / `lib/paths` stay because the
  studio and auth flows depend on them.
- `source.config.ts` keeps only the product-docs collection. A host that
  adds documentation surfaces replaces this config wholesale, since two
  `mdx()` instances would clobber each other's `.source` output.
- Drop `features/www/{button,logo,refraction-stripes,section,navbar,hero}`
  and the `voidhash-gradient-*` cluster, which were reachable only from the
  unreferenced `hero/hero.tsx` that this change removes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/www/.source/browser.ts                   |    7 -
 apps/www/.source/server.ts                    |   15 -
 .../www/hero => components}/hero-shader.tsx   |    0
 .../voidhash-gradient-background.tsx          |  224 ----
 .../components/voidhash-gradient-canvas.tsx   |  328 -----
 .../components/voidhash-gradient-controls.tsx |  175 ---
 .../components/voidhash-gradient-settings.ts  |  102 --
 .../components/auth-lenticular-background.tsx |    2 +-
 .../design/components/docs/colors/index.tsx   |  282 -----
 .../design/components/docs/colors/tokens.ts   |  452 -------
 .../components/docs/component-overview.tsx    |   14 -
 .../cards/account-access.tsx                  |   86 --
 .../cards/card-overview.tsx                   |   77 --
 .../cards/claimable-balance.tsx               |   51 -
 .../cards/contribution-history.tsx            |   92 --
 .../component-overview/cards/cover-art.tsx    |   48 -
 .../cards/dividend-income.tsx                 |  123 --
 .../cards/empty-connect-bank.tsx              |   40 -
 .../cards/empty-distribute-track.tsx          |   41 -
 .../cards/empty-explore-catalog.tsx           |   40 -
 .../docs/component-overview/cards/faq.tsx     |  103 --
 .../component-overview/cards/front-door.tsx   |   41 -
 .../cards/index-investing.tsx                 |   22 -
 .../cards/kitchen-island.tsx                  |  161 ---
 .../component-overview/cards/loading-card.tsx |   25 -
 .../cards/new-milestone.tsx                   |   50 -
 .../cards/notification-settings.tsx           |   98 --
 .../component-overview/cards/payments.tsx     |  169 ---
 .../cards/payout-threshold.tsx                |  101 --
 .../component-overview/cards/power-usage.tsx  |   81 --
 .../component-overview/cards/preferences.tsx  |   92 --
 .../cards/project-actions.tsx                 |   96 --
 .../component-overview/cards/qr-connect.tsx   |   36 -
 .../cards/receiving-method.tsx                |   90 --
 .../cards/recent-transactions.tsx             |  276 -----
 .../cards/release-catalog.tsx                 |   99 --
 .../cards/roller-shades.tsx                   |   69 --
 .../cards/savings-progress.tsx                |   93 --
 .../cards/savings-targets.tsx                 |  116 --
 .../component-overview/cards/sidebar-nav.tsx  |  285 -----
 .../component-overview/cards/social-links.tsx |   85 --
 .../cards/stock-performance.tsx               |  119 --
 .../cards/syncing-state.tsx                   |   34 -
 .../cards/transfer-funds.tsx                  |  107 --
 .../cards/upcoming-payments.tsx               |   54 -
 .../component-overview/icon-placeholder.tsx   |   31 -
 .../docs/component-overview/index.tsx         |  100 --
 .../docs/component-overview/preview-config.ts |   10 -
 .../components/docs/component-registry.tsx    |   34 -
 .../design/components/docs/preview.tsx        |   24 -
 .../design/components/layout/docs.tsx         |  227 ----
 .../design/components/layout/page.tsx         |  126 --
 .../features/design/components/nav-bar.tsx    |   66 -
 .../design/components/theme-toggle.tsx        |   15 -
 .../content/docs/components/accordion.mdx     |  115 --
 .../content/docs/components/alert-dialog.mdx  |  119 --
 .../design/content/docs/components/alert.mdx  |   85 --
 .../design/content/docs/components/avatar.mdx |  110 --
 .../design/content/docs/components/badge.mdx  |   89 --
 .../content/docs/components/breadcrumb.mdx    |  132 --
 .../design/content/docs/components/button.mdx |  184 ---
 .../content/docs/components/calendar.mdx      |   93 --
 .../design/content/docs/components/card.mdx   |  153 ---
 .../content/docs/components/carousel.mdx      |  126 --
 .../design/content/docs/components/chart.mdx  |  138 ---
 .../content/docs/components/checkbox.mdx      |  105 --
 .../content/docs/components/collapsible.mdx   |  101 --
 .../content/docs/components/command.mdx       |  159 ---
 .../content/docs/components/context-menu.mdx  |  127 --
 .../design/content/docs/components/dialog.mdx |  156 ---
 .../design/content/docs/components/drawer.mdx |  169 ---
 .../content/docs/components/dropdown-menu.mdx |  195 ---
 .../content/docs/components/dropzone.mdx      |  102 --
 .../design/content/docs/components/form.mdx   |  186 ---
 .../content/docs/components/hover-card.mdx    |  137 ---
 .../content/docs/components/input-otp.mdx     |  136 ---
 .../design/content/docs/components/input.mdx  |  113 --
 .../design/content/docs/components/label.mdx  |   81 --
 .../content/docs/components/menubar.mdx       |  136 ---
 .../design/content/docs/components/meta.yaml  |   53 -
 .../docs/components/navigation-menu.mdx       |  156 ---
 .../content/docs/components/overview.mdx      |    7 -
 .../content/docs/components/page-bar.mdx      |   57 -
 .../content/docs/components/pagination.mdx    |  146 ---
 .../design/content/docs/components/phone.mdx  |   57 -
 .../content/docs/components/popover.mdx       |  146 ---
 .../content/docs/components/progress.mdx      |   92 --
 .../content/docs/components/radio-group.mdx   |  146 ---
 .../content/docs/components/resizable.mdx     |  144 ---
 .../content/docs/components/scroll-area.mdx   |  109 --
 .../design/content/docs/components/select.mdx |  185 ---
 .../content/docs/components/separator.mdx     |   84 --
 .../design/content/docs/components/sheet.mdx  |  177 ---
 .../content/docs/components/sidebar.mdx       |  179 ---
 .../content/docs/components/skeleton.mdx      |   91 --
 .../design/content/docs/components/slider.mdx |  105 --
 .../design/content/docs/components/sonner.mdx |  120 --
 .../design/content/docs/components/switch.mdx |  105 --
 .../design/content/docs/components/table.mdx  |  148 ---
 .../design/content/docs/components/tabs.mdx   |  126 --
 .../content/docs/components/textarea.mdx      |   96 --
 .../content/docs/components/toggle-group.mdx  |  136 ---
 .../design/content/docs/components/toggle.mdx |  146 ---
 .../content/docs/components/tooltip.mdx       |  140 ---
 .../docs/components/underline-tabs.mdx        |   97 --
 .../content/docs/foundations/colors.mdx       |  116 --
 .../design/content/docs/foundations/meta.yaml |    4 -
 .../design/content/docs/introduction.mdx      |    4 -
 .../features/design/content/docs/meta.yaml    |    6 -
 apps/www/src/features/design/lib/basepath.ts  |    1 -
 apps/www/src/features/design/lib/cn.ts        |    1 -
 .../src/features/design/lib/layout.shared.tsx |    8 -
 apps/www/src/features/design/lib/source.ts    |   35 -
 apps/www/src/features/design/source.config.ts |   30 -
 .../src/features/design/styles/globals.css    |   32 -
 apps/www/src/features/source.config.ts        |   19 +-
 apps/www/src/features/www/button.tsx          |   58 -
 apps/www/src/features/www/hero/footer.tsx     |   61 -
 apps/www/src/features/www/hero/hero.tsx       |   72 --
 .../assets/agent-icons/antigravity.png        |  Bin 9026 -> 0 bytes
 .../assets/agent-icons/claude-code.png        |  Bin 21744 -> 0 bytes
 .../www/landing/assets/agent-icons/codex.png  |  Bin 17775 -> 0 bytes
 .../www/landing/assets/agent-icons/cursor.png |  Bin 6164 -> 0 bytes
 .../landing/assets/agent-icons/opencode.png   |  Bin 10326 -> 0 bytes
 .../features/www/landing/asteroids/engine.ts  | 1088 -----------------
 .../features/www/landing/asteroids/frame.ts   |    7 -
 .../features/www/landing/asteroids/game.tsx   |  444 -------
 .../features/www/landing/asteroids/post.ts    |  209 ----
 .../src/features/www/landing/landing-page.tsx |   43 -
 .../www/landing/marketing-nav-config.ts       |   14 -
 apps/www/src/features/www/landing/motion.tsx  |  236 ----
 .../paywall-build/agent-transcript.tsx        |  163 ---
 .../landing/paywall-build/lenscal-paywall.tsx |  356 ------
 .../landing/paywall-build/paywall-build.tsx   |  102 --
 .../www/landing/paywall-build/transcript.ts   |  125 --
 .../paywall-build/use-transcript-playback.ts  |  118 --
 .../paywall-build/working-indicator.tsx       |  147 ---
 .../landing/sections/agent-compatibility.tsx  |   57 -
 .../www/landing/sections/analytics.tsx        |  531 --------
 .../www/landing/sections/asteroids.tsx        |  161 ---
 .../src/features/www/landing/sections/crm.tsx |  337 -----
 .../www/landing/sections/developers.tsx       |  168 ---
 .../features/www/landing/sections/divider.tsx |    8 -
 .../www/landing/sections/experimentation.tsx  |  221 ----
 .../features/www/landing/sections/footer.tsx  |  134 --
 .../www/landing/sections/get-started.tsx      |  117 --
 .../features/www/landing/sections/hero.tsx    |   52 -
 .../features/www/landing/sections/navbar.tsx  |  216 ----
 .../www/landing/sections/paywalls.tsx         |  576 ---------
 .../features/www/landing/sections/problem.tsx |   19 -
 apps/www/src/features/www/landing/shared.tsx  |  151 ---
 apps/www/src/features/www/logo.tsx            |   92 --
 .../src/features/www/marketing-home-slot.tsx  |   20 +
 .../src/features/www/navbar/navigation.tsx    |   49 -
 .../src/features/www/refraction-stripes.tsx   |   38 -
 .../www/section/section-container.tsx         |   15 -
 apps/www/src/routeTree.gen.ts                 |   92 --
 apps/www/src/routes/_marketing/index.tsx      |   17 +-
 apps/www/src/routes/design/$.tsx              |  174 ---
 apps/www/src/routes/design/api/search.ts      |   19 -
 apps/www/src/routes/design/index.tsx          |   13 -
 apps/www/src/routes/design/route.tsx          |   42 -
 162 files changed, 29 insertions(+), 18418 deletions(-)
 rename apps/www/src/{features/www/hero => components}/hero-shader.tsx (100%)
 delete mode 100644 apps/www/src/components/voidhash-gradient-background.tsx
 delete mode 100644 apps/www/src/components/voidhash-gradient-canvas.tsx
 delete mode 100644 apps/www/src/components/voidhash-gradient-controls.tsx
 delete mode 100644 apps/www/src/components/voidhash-gradient-settings.ts
 delete mode 100644 apps/www/src/features/design/components/docs/colors/index.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/colors/tokens.ts
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/account-access.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/card-overview.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/claimable-balance.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/contribution-history.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/cover-art.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/dividend-income.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/empty-connect-bank.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/empty-distribute-track.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/empty-explore-catalog.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/faq.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/front-door.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/index-investing.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/kitchen-island.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/loading-card.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/new-milestone.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/notification-settings.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/payments.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/payout-threshold.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/power-usage.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/preferences.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/project-actions.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/qr-connect.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/receiving-method.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/recent-transactions.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/release-catalog.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/roller-shades.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/savings-progress.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/savings-targets.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/sidebar-nav.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/social-links.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/stock-performance.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/syncing-state.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/transfer-funds.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/cards/upcoming-payments.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/icon-placeholder.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/index.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/component-overview/preview-config.ts
 delete mode 100644 apps/www/src/features/design/components/docs/component-registry.tsx
 delete mode 100644 apps/www/src/features/design/components/docs/preview.tsx
 delete mode 100644 apps/www/src/features/design/components/layout/docs.tsx
 delete mode 100644 apps/www/src/features/design/components/layout/page.tsx
 delete mode 100644 apps/www/src/features/design/components/nav-bar.tsx
 delete mode 100644 apps/www/src/features/design/components/theme-toggle.tsx
 delete mode 100644 apps/www/src/features/design/content/docs/components/accordion.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/alert-dialog.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/alert.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/avatar.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/badge.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/breadcrumb.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/button.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/calendar.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/card.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/carousel.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/chart.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/checkbox.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/collapsible.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/command.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/context-menu.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/dialog.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/drawer.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/dropdown-menu.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/dropzone.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/form.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/hover-card.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/input-otp.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/input.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/label.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/menubar.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/meta.yaml
 delete mode 100644 apps/www/src/features/design/content/docs/components/navigation-menu.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/overview.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/page-bar.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/pagination.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/phone.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/popover.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/progress.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/radio-group.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/resizable.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/scroll-area.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/select.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/separator.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/sheet.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/sidebar.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/skeleton.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/slider.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/sonner.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/switch.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/table.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/tabs.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/textarea.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/toggle-group.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/toggle.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/tooltip.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/components/underline-tabs.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/foundations/colors.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/foundations/meta.yaml
 delete mode 100644 apps/www/src/features/design/content/docs/introduction.mdx
 delete mode 100644 apps/www/src/features/design/content/docs/meta.yaml
 delete mode 100644 apps/www/src/features/design/lib/basepath.ts
 delete mode 100644 apps/www/src/features/design/lib/cn.ts
 delete mode 100644 apps/www/src/features/design/lib/layout.shared.tsx
 delete mode 100644 apps/www/src/features/design/lib/source.ts
 delete mode 100644 apps/www/src/features/design/source.config.ts
 delete mode 100644 apps/www/src/features/design/styles/globals.css
 delete mode 100644 apps/www/src/features/www/button.tsx
 delete mode 100644 apps/www/src/features/www/hero/footer.tsx
 delete mode 100644 apps/www/src/features/www/hero/hero.tsx
 delete mode 100644 apps/www/src/features/www/landing/assets/agent-icons/antigravity.png
 delete mode 100644 apps/www/src/features/www/landing/assets/agent-icons/claude-code.png
 delete mode 100644 apps/www/src/features/www/landing/assets/agent-icons/codex.png
 delete mode 100644 apps/www/src/features/www/landing/assets/agent-icons/cursor.png
 delete mode 100644 apps/www/src/features/www/landing/assets/agent-icons/opencode.png
 delete mode 100644 apps/www/src/features/www/landing/asteroids/engine.ts
 delete mode 100644 apps/www/src/features/www/landing/asteroids/frame.ts
 delete mode 100644 apps/www/src/features/www/landing/asteroids/game.tsx
 delete mode 100644 apps/www/src/features/www/landing/asteroids/post.ts
 delete mode 100644 apps/www/src/features/www/landing/landing-page.tsx
 delete mode 100644 apps/www/src/features/www/landing/marketing-nav-config.ts
 delete mode 100644 apps/www/src/features/www/landing/motion.tsx
 delete mode 100644 apps/www/src/features/www/landing/paywall-build/agent-transcript.tsx
 delete mode 100644 apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx
 delete mode 100644 apps/www/src/features/www/landing/paywall-build/paywall-build.tsx
 delete mode 100644 apps/www/src/features/www/landing/paywall-build/transcript.ts
 delete mode 100644 apps/www/src/features/www/landing/paywall-build/use-transcript-playback.ts
 delete mode 100644 apps/www/src/features/www/landing/paywall-build/working-indicator.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/agent-compatibility.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/analytics.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/asteroids.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/crm.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/developers.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/divider.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/experimentation.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/footer.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/get-started.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/hero.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/navbar.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/paywalls.tsx
 delete mode 100644 apps/www/src/features/www/landing/sections/problem.tsx
 delete mode 100644 apps/www/src/features/www/landing/shared.tsx
 delete mode 100644 apps/www/src/features/www/logo.tsx
 create mode 100644 apps/www/src/features/www/marketing-home-slot.tsx
 delete mode 100644 apps/www/src/features/www/navbar/navigation.tsx
 delete mode 100644 apps/www/src/features/www/refraction-stripes.tsx
 delete mode 100644 apps/www/src/features/www/section/section-container.tsx
 delete mode 100644 apps/www/src/routes/design/$.tsx
 delete mode 100644 apps/www/src/routes/design/api/search.ts
 delete mode 100644 apps/www/src/routes/design/index.tsx
 delete mode 100644 apps/www/src/routes/design/route.tsx

diff --git a/apps/www/.source/browser.ts b/apps/www/.source/browser.ts
index a20e34d72..f8c66bc1b 100644
--- a/apps/www/.source/browser.ts
+++ b/apps/www/.source/browser.ts
@@ -15,12 +15,5 @@ const browserCollections = {
     },
     "eager": false
   })),
-  design: create.doc("design", import.meta.glob(["./**/*.{mdx,md}"], {
-    "base": "./../src/features/design/content/docs",
-    "query": {
-      "collection": "design"
-    },
-    "eager": false
-  })),
 };
 export default browserCollections;
\ No newline at end of file
diff --git a/apps/www/.source/server.ts b/apps/www/.source/server.ts
index 25501242d..0b72d6d61 100644
--- a/apps/www/.source/server.ts
+++ b/apps/www/.source/server.ts
@@ -21,19 +21,4 @@ export const docs = await create.docs("docs", "src/features/docs/content/docs",
     "collection": "docs"
   },
   "eager": true
-}));
-
-export const design = await create.docs("design", "src/features/design/content/docs", import.meta.glob(["./**/*.{json,yaml}"], {
-  "base": "./../src/features/design/content/docs",
-  "query": {
-    "collection": "design"
-  },
-  "import": "default",
-  "eager": true
-}), import.meta.glob(["./**/*.{mdx,md}"], {
-  "base": "./../src/features/design/content/docs",
-  "query": {
-    "collection": "design"
-  },
-  "eager": true
 }));
\ No newline at end of file
diff --git a/apps/www/src/features/www/hero/hero-shader.tsx b/apps/www/src/components/hero-shader.tsx
similarity index 100%
rename from apps/www/src/features/www/hero/hero-shader.tsx
rename to apps/www/src/components/hero-shader.tsx
diff --git a/apps/www/src/components/voidhash-gradient-background.tsx b/apps/www/src/components/voidhash-gradient-background.tsx
deleted file mode 100644
index 9450994f6..000000000
--- a/apps/www/src/components/voidhash-gradient-background.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-"use client";
-
-import { lazy, Suspense, useCallback, useEffect, useMemo, useState, type CSSProperties } from "react";
-
-import { cn } from "@/lib/utils";
-
-import { VoidhashGradientControls } from "./voidhash-gradient-controls";
-import {
-  DEFAULT_VOIDHASH_GRADIENT_SETTINGS,
-  mergeVoidhashGradientSettings,
-  VOIDHASH_GRADIENT_CONTROLS_STORAGE_KEY,
-  VOIDHASH_GRADIENT_STORAGE_KEY,
-  type VoidhashGradientSettings,
-} from "./voidhash-gradient-settings";
-
-const VoidhashGradientCanvas = lazy(async () => {
-  const module = await import("./voidhash-gradient-canvas");
-
-  return {
-    default: module.VoidhashGradientCanvas,
-  };
-});
-
-type VoidhashGradientPlacement = "bottom" | "top";
-type ReadyPlacements = Record<VoidhashGradientPlacement, boolean>;
-
-function getFadeMask(settings: VoidhashGradientSettings, placement: VoidhashGradientPlacement) {
-  const start = Math.min(settings.fadeStart, settings.fadeEnd - 1);
-  const end = Math.max(settings.fadeEnd, start + 1);
-  const mid = start + (end - start) * 0.35;
-  const direction = placement === "top" ? "to top" : "to bottom";
-
-  return `linear-gradient(${direction}, transparent 0%, transparent ${start}%, rgba(0, 0, 0, 0.12) ${mid}%, black ${end}%, black 100%)`;
-}
-
-function getLayerStyle(settings: VoidhashGradientSettings, placement: VoidhashGradientPlacement): CSSProperties {
-  return {
-    [placement]: `${placement === "top" ? settings.topOffset : settings.bottomOffset}%`,
-    filter: `blur(${settings.blur}px)`,
-    height: `${settings.effectHeight}%`,
-    maskImage: getFadeMask(settings, placement),
-    WebkitMaskImage: getFadeMask(settings, placement),
-  };
-}
-
-function VoidhashGradientEntryVeil({ isVisible }: { isVisible: boolean }) {
-  return (
-    <div
-      aria-hidden
-      className={cn(
-        "pointer-events-none absolute inset-0 z-20 bg-black transition-opacity duration-1000 ease-out motion-reduce:transition-none",
-        isVisible ? "opacity-100" : "opacity-0",
-      )}
-    />
-  );
-}
-
-function VoidhashGradientLayer({
-  isRevealed,
-  onReady,
-  placement,
-  settings,
-}: {
-  isRevealed: boolean;
-  onReady: (placement: VoidhashGradientPlacement) => void;
-  placement: VoidhashGradientPlacement;
-  settings: VoidhashGradientSettings;
-}) {
-  const [isCanvasReady, setIsCanvasReady] = useState(false);
-
-  return (
-    <div aria-hidden className="absolute inset-x-[-10%] overflow-hidden" style={getLayerStyle(settings, placement)}>
-      <div
-        className={cn(
-          "absolute inset-0 transition-[opacity,transform] duration-1000 ease-out will-change-[opacity,transform]",
-          isCanvasReady && isRevealed ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0",
-        )}
-      >
-        <VoidhashGradientCanvas
-          inverted={placement === "top"}
-          onReady={() => {
-            setIsCanvasReady(true);
-            onReady(placement);
-          }}
-          seed={placement === "top" ? settings.topSeed : settings.bottomSeed}
-          settings={settings}
-        />
-      </div>
-    </div>
-  );
-}
-
-export type VoidhashGradientBackgroundProps = {
-  className?: string;
-  controlsQueryParam?: string;
-  controlsStorageKey?: string;
-  controlsTitle?: string;
-  settings?: Partial<VoidhashGradientSettings>;
-  settingsStorageKey?: string;
-};
-
-/** Renders the reusable blurred Three.js gradient background used across Voidhash surfaces. */
-export function VoidhashGradientBackground({
-  className,
-  controlsQueryParam = "gradientControls",
-  controlsStorageKey = VOIDHASH_GRADIENT_CONTROLS_STORAGE_KEY,
-  controlsTitle = "Gradient FX",
-  settings: settingsProp,
-  settingsStorageKey = VOIDHASH_GRADIENT_STORAGE_KEY,
-}: VoidhashGradientBackgroundProps) {
-  const baseSettings = useMemo(
-    () => mergeVoidhashGradientSettings(settingsProp ?? DEFAULT_VOIDHASH_GRADIENT_SETTINGS),
-    [settingsProp],
-  );
-  const [isMounted, setIsMounted] = useState(false);
-  const [canDropEntryVeil, setCanDropEntryVeil] = useState(false);
-  const [hasRevealed, setHasRevealed] = useState(false);
-  const [readyPlacements, setReadyPlacements] = useState<ReadyPlacements>({ bottom: false, top: false });
-  const [settings, setSettings] = useState<VoidhashGradientSettings>(baseSettings);
-  const [showControls, setShowControls] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-
-    const params = new URLSearchParams(window.location.search);
-    const controlsEnabled = params.has(controlsQueryParam) || localStorage.getItem(controlsStorageKey) === "1";
-    const savedSettings = localStorage.getItem(settingsStorageKey);
-
-    if (savedSettings) {
-      try {
-        setSettings(mergeVoidhashGradientSettings(JSON.parse(savedSettings), baseSettings));
-      } catch {
-        localStorage.removeItem(settingsStorageKey);
-      }
-    }
-
-    if (controlsEnabled) {
-      setShowControls(true);
-      localStorage.setItem(controlsStorageKey, "1");
-    }
-  }, [baseSettings, controlsQueryParam, controlsStorageKey, settingsStorageKey]);
-
-  useEffect(() => {
-    if (!isMounted) {
-      return;
-    }
-
-    const veilTimer = window.setTimeout(() => setCanDropEntryVeil(true), 1800);
-
-    return () => window.clearTimeout(veilTimer);
-  }, [isMounted]);
-
-  useEffect(() => {
-    if (isMounted && showControls) {
-      localStorage.setItem(settingsStorageKey, JSON.stringify(settings));
-    }
-  }, [isMounted, settings, settingsStorageKey, showControls]);
-
-  const handleLayerReady = useCallback((placement: VoidhashGradientPlacement) => {
-    setReadyPlacements((current) => {
-      if (current[placement]) {
-        return current;
-      }
-
-      return { ...current, [placement]: true };
-    });
-  }, []);
-
-  const isShaderReady = readyPlacements.bottom && (!settings.topEnabled || readyPlacements.top);
-
-  useEffect(() => {
-    if (!hasRevealed && isMounted && (isShaderReady || canDropEntryVeil)) {
-      setHasRevealed(true);
-    }
-  }, [canDropEntryVeil, hasRevealed, isMounted, isShaderReady]);
-
-  const rootClassName = cn("relative isolate h-full w-full overflow-hidden bg-black", className);
-
-  if (!isMounted) {
-    return (
-      <div className={rootClassName}>
-        <VoidhashGradientEntryVeil isVisible={!hasRevealed} />
-      </div>
-    );
-  }
-
-  return (
-    <div className={rootClassName}>
-      <Suspense fallback={null}>
-        <VoidhashGradientLayer
-          isRevealed={hasRevealed}
-          onReady={handleLayerReady}
-          placement="bottom"
-          settings={settings}
-        />
-        {settings.topEnabled ? (
-          <VoidhashGradientLayer
-            isRevealed={hasRevealed}
-            onReady={handleLayerReady}
-            placement="top"
-            settings={settings}
-          />
-        ) : null}
-      </Suspense>
-      <VoidhashGradientEntryVeil isVisible={!hasRevealed} />
-
-      {showControls ? (
-        <VoidhashGradientControls
-          onChange={setSettings}
-          onHide={() => {
-            setShowControls(false);
-            localStorage.removeItem(controlsStorageKey);
-          }}
-          onReset={() => {
-            setSettings(baseSettings);
-            localStorage.removeItem(settingsStorageKey);
-          }}
-          settings={settings}
-          title={controlsTitle}
-        />
-      ) : null}
-    </div>
-  );
-}
diff --git a/apps/www/src/components/voidhash-gradient-canvas.tsx b/apps/www/src/components/voidhash-gradient-canvas.tsx
deleted file mode 100644
index 3c437287c..000000000
--- a/apps/www/src/components/voidhash-gradient-canvas.tsx
+++ /dev/null
@@ -1,328 +0,0 @@
-"use client";
-
-import { Canvas, useFrame } from "@react-three/fiber";
-import { useEffect, useMemo, useRef } from "react";
-import * as THREE from "three";
-
-import type { VoidhashGradientSettings } from "./voidhash-gradient-settings";
-
-const vertexShader = `
-uniform float uTime;
-uniform float uAmplitude;
-uniform float uFrequency;
-uniform float uMidFrequency;
-uniform float uHighFrequency;
-uniform float uLift;
-uniform float uSeed;
-
-varying vec2 vUv;
-varying vec3 vNormal;
-varying vec3 vViewPosition;
-varying float vWave;
-
-vec4 mod289(vec4 x) {
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
-
-vec3 mod289(vec3 x) {
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
-
-vec4 permute(vec4 x) {
-  return mod289(((x * 34.0) + 10.0) * x);
-}
-
-vec4 taylorInvSqrt(vec4 r) {
-  return 1.79284291400159 - 0.85373472095314 * r;
-}
-
-float snoise(vec3 v) {
-  const vec2 c = vec2(1.0 / 6.0, 1.0 / 3.0);
-  const vec4 d = vec4(0.0, 0.5, 1.0, 2.0);
-
-  vec3 i = floor(v + dot(v, c.yyy));
-  vec3 x0 = v - i + dot(i, c.xxx);
-
-  vec3 g = step(x0.yzx, x0.xyz);
-  vec3 l = 1.0 - g;
-  vec3 i1 = min(g.xyz, l.zxy);
-  vec3 i2 = max(g.xyz, l.zxy);
-
-  vec3 x1 = x0 - i1 + c.xxx;
-  vec3 x2 = x0 - i2 + c.yyy;
-  vec3 x3 = x0 - d.yyy;
-
-  i = mod289(i);
-  vec4 p = permute(permute(permute(
-    i.z + vec4(0.0, i1.z, i2.z, 1.0))
-    + i.y + vec4(0.0, i1.y, i2.y, 1.0))
-    + i.x + vec4(0.0, i1.x, i2.x, 1.0));
-
-  float n_ = 0.142857142857;
-  vec3 ns = n_ * d.wyz - d.xzx;
-
-  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
-
-  vec4 x_ = floor(j * ns.z);
-  vec4 y_ = floor(j - 7.0 * x_);
-
-  vec4 x = x_ * ns.x + ns.yyyy;
-  vec4 y = y_ * ns.x + ns.yyyy;
-  vec4 h = 1.0 - abs(x) - abs(y);
-
-  vec4 b0 = vec4(x.xy, y.xy);
-  vec4 b1 = vec4(x.zw, y.zw);
-
-  vec4 s0 = floor(b0) * 2.0 + 1.0;
-  vec4 s1 = floor(b1) * 2.0 + 1.0;
-  vec4 sh = -step(h, vec4(0.0));
-
-  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
-  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
-
-  vec3 p0 = vec3(a0.xy, h.x);
-  vec3 p1 = vec3(a0.zw, h.y);
-  vec3 p2 = vec3(a1.xy, h.z);
-  vec3 p3 = vec3(a1.zw, h.w);
-
-  vec4 norm = taylorInvSqrt(vec4(
-    dot(p0, p0),
-    dot(p1, p1),
-    dot(p2, p2),
-    dot(p3, p3)
-  ));
-  p0 *= norm.x;
-  p1 *= norm.y;
-  p2 *= norm.z;
-  p3 *= norm.w;
-
-  vec4 m = max(0.6 - vec4(
-    dot(x0, x0),
-    dot(x1, x1),
-    dot(x2, x2),
-    dot(x3, x3)
-  ), 0.0);
-  m = m * m;
-
-  return 42.0 * dot(m * m, vec4(
-    dot(p0, x0),
-    dot(p1, x1),
-    dot(p2, x2),
-    dot(p3, x3)
-  ));
-}
-
-float surfaceHeight(vec2 p, float time) {
-  vec2 seedOffset = vec2(uSeed * 1.37, uSeed * -0.73);
-  vec2 q = vec2(p.x * uFrequency, p.y * uFrequency * 2.55) + seedOffset;
-  float seedTime = time + uSeed * 0.11;
-  float low = snoise(vec3(q, seedTime));
-  float mid = snoise(vec3(q * uMidFrequency + vec2(7.4, -3.2) + seedOffset * 0.43, seedTime * 1.65));
-  float high = snoise(vec3(q * uHighFrequency + vec2(-2.0, 5.7) - seedOffset * 0.26, seedTime * 2.4));
-
-  return (low * 0.62 + mid * 0.28 + high * 0.1) * uAmplitude;
-}
-
-void main() {
-  vUv = uv;
-
-  float lift = smoothstep(0.02, 0.92, uv.y);
-  float height = surfaceHeight(position.xy, uTime) * (0.72 + lift * 0.62);
-  float epsilon = 0.08;
-  float heightX = surfaceHeight(position.xy + vec2(epsilon, 0.0), uTime);
-  float heightY = surfaceHeight(position.xy + vec2(0.0, epsilon), uTime);
-
-  vec3 displaced = position;
-  displaced.y += lift * uLift;
-  displaced.z += height;
-
-  vec3 displacedNormal = normalize(vec3(
-    (height - heightX) / epsilon,
-    (height - heightY) / epsilon,
-    1.0
-  ));
-
-  vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0);
-
-  vNormal = normalize(normalMatrix * displacedNormal);
-  vViewPosition = -mvPosition.xyz;
-  vWave = height;
-
-  gl_Position = projectionMatrix * mvPosition;
-}
-`;
-
-const fragmentShader = `
-uniform vec3 uBaseColor;
-uniform vec3 uFresnelColor;
-uniform float uFresnelPower;
-uniform float uFresnelStrength;
-uniform float uHorizonStrength;
-uniform float uLateralStrength;
-uniform float uIntensity;
-uniform float uBaseGlow;
-uniform float uOpacity;
-
-varying vec2 vUv;
-varying vec3 vNormal;
-varying vec3 vViewPosition;
-varying float vWave;
-
-void main() {
-  vec3 normal = normalize(vNormal);
-  vec3 viewDirection = normalize(vViewPosition);
-  float fresnel = pow(1.0 - max(dot(normal, viewDirection), 0.0), uFresnelPower);
-  float horizon = smoothstep(0.18, 0.94, vUv.y);
-  float lateralFresnel = smoothstep(0.18, 1.0, vUv.x);
-  float blue = clamp(
-    fresnel * uFresnelStrength
-      + horizon * uHorizonStrength
-      + lateralFresnel * uLateralStrength
-      + vWave * 0.08,
-    0.0,
-    1.0
-  );
-  float alpha = smoothstep(0.0, 0.1, vUv.y) * (1.0 - smoothstep(0.8, 1.0, vUv.y));
-  float intensity = clamp(uIntensity + fresnel * 0.28 + horizon * 0.12, 0.0, 1.0);
-  float purpleBalance = clamp(uBaseGlow, 0.0, 1.5);
-  vec3 color = mix(uBaseColor, uFresnelColor, blue) * intensity;
-  color = mix(color, uBaseColor * intensity, min(purpleBalance, 1.0));
-  color = min(color, max(uBaseColor, uFresnelColor));
-
-  gl_FragColor = vec4(color, alpha * uOpacity);
-}
-`;
-
-function setUniformColor(color: THREE.Color, hex: string) {
-  const value = Number.parseInt(hex.slice(1), 16);
-
-  color.r = ((value >> 16) & 255) / 255;
-  color.g = ((value >> 8) & 255) / 255;
-  color.b = (value & 255) / 255;
-}
-
-function AnimatedPlane({
-  inverted,
-  onReady,
-  seed,
-  settings,
-}: {
-  inverted: boolean;
-  onReady?: () => void;
-  seed: number;
-  settings: VoidhashGradientSettings;
-}) {
-  const materialRef = useRef<THREE.ShaderMaterial>(null);
-  const didReportReadyRef = useRef(false);
-  const isMountedRef = useRef(true);
-  const uniforms = useMemo(() => {
-    const baseColor = new THREE.Color();
-    const fresnelColor = new THREE.Color();
-
-    setUniformColor(baseColor, settings.baseColor);
-    setUniformColor(fresnelColor, settings.fresnelColor);
-
-    return {
-      uBaseColor: { value: baseColor },
-      uFresnelColor: { value: fresnelColor },
-      uAmplitude: { value: settings.amplitude },
-      uBaseGlow: { value: settings.baseGlow },
-      uFresnelPower: { value: settings.fresnelPower },
-      uFresnelStrength: { value: settings.fresnelStrength },
-      uFrequency: { value: settings.frequency },
-      uHighFrequency: { value: settings.highFrequency },
-      uHorizonStrength: { value: settings.horizonStrength },
-      uIntensity: { value: settings.intensity },
-      uLateralStrength: { value: settings.lateralStrength },
-      uLift: { value: settings.lift },
-      uMidFrequency: { value: settings.midFrequency },
-      uOpacity: { value: settings.opacity },
-      uSeed: { value: seed },
-      uTime: { value: 0 },
-    };
-  }, [seed, settings]);
-
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    uniforms.uAmplitude.value = settings.amplitude;
-    setUniformColor(uniforms.uBaseColor.value, settings.baseColor);
-    uniforms.uBaseGlow.value = settings.baseGlow;
-    setUniformColor(uniforms.uFresnelColor.value, settings.fresnelColor);
-    uniforms.uFresnelPower.value = settings.fresnelPower;
-    uniforms.uFresnelStrength.value = settings.fresnelStrength;
-    uniforms.uFrequency.value = settings.frequency;
-    uniforms.uHighFrequency.value = settings.highFrequency;
-    uniforms.uHorizonStrength.value = settings.horizonStrength;
-    uniforms.uIntensity.value = settings.intensity;
-    uniforms.uLateralStrength.value = settings.lateralStrength;
-    uniforms.uLift.value = settings.lift;
-    uniforms.uMidFrequency.value = settings.midFrequency;
-    uniforms.uOpacity.value = settings.opacity;
-    uniforms.uSeed.value = seed;
-  }, [seed, settings, uniforms]);
-
-  useFrame(({ clock }) => {
-    if (materialRef.current) {
-      materialRef.current.uniforms.uTime.value = clock.elapsedTime * settings.speed;
-    }
-
-    if (!didReportReadyRef.current) {
-      didReportReadyRef.current = true;
-      requestAnimationFrame(() => {
-        if (isMountedRef.current) {
-          onReady?.();
-        }
-      });
-    }
-  });
-
-  return (
-    <group scale={[1, inverted ? -1 : 1, 1]}>
-      <mesh position={[0, settings.planeY, 0]} rotation={[settings.rotationX, 0, 0]} scale={[settings.scaleX, settings.scaleY, 1]}>
-        <planeGeometry args={[14, 6.4, 180, 90]} />
-        <shaderMaterial
-          ref={materialRef}
-          blending={THREE.NormalBlending}
-          depthWrite={false}
-          fragmentShader={fragmentShader}
-          side={THREE.DoubleSide}
-          transparent
-          uniforms={uniforms}
-          vertexShader={vertexShader}
-        />
-      </mesh>
-    </group>
-  );
-}
-
-/** Renders the WebGL plane used by reusable Voidhash gradient backgrounds. */
-export function VoidhashGradientCanvas({
-  inverted = false,
-  onReady,
-  seed,
-  settings,
-}: {
-  inverted?: boolean;
-  onReady?: () => void;
-  seed: number;
-  settings: VoidhashGradientSettings;
-}) {
-  return (
-    <Canvas
-      camera={{ fov: 34, position: [0, 0, 6] }}
-      dpr={[1, 1.5]}
-      gl={{ alpha: true, antialias: true, powerPreference: "high-performance" }}
-      onCreated={({ gl }) => {
-        gl.outputColorSpace = THREE.SRGBColorSpace;
-        gl.setClearColor(0x000000, 0);
-      }}
-    >
-      <AnimatedPlane inverted={inverted} onReady={onReady} seed={seed} settings={settings} />
-    </Canvas>
-  );
-}
diff --git a/apps/www/src/components/voidhash-gradient-controls.tsx b/apps/www/src/components/voidhash-gradient-controls.tsx
deleted file mode 100644
index 2f49f5f00..000000000
--- a/apps/www/src/components/voidhash-gradient-controls.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-"use client";
-
-import { useState, type Dispatch, type SetStateAction } from "react";
-
-import type { VoidhashGradientSettings } from "./voidhash-gradient-settings";
-
-type NumericSettingKey = {
-  [Key in keyof VoidhashGradientSettings]: VoidhashGradientSettings[Key] extends number ? Key : never;
-}[keyof VoidhashGradientSettings];
-
-type BooleanSettingKey = {
-  [Key in keyof VoidhashGradientSettings]: VoidhashGradientSettings[Key] extends boolean ? Key : never;
-}[keyof VoidhashGradientSettings];
-
-type ColorSettingKey = {
-  [Key in keyof VoidhashGradientSettings]: VoidhashGradientSettings[Key] extends string ? Key : never;
-}[keyof VoidhashGradientSettings];
-
-const booleanControls: Array<{ key: BooleanSettingKey; label: string }> = [
-  { key: "topEnabled", label: "Top effect" },
-];
-
-const numericControls: Array<{
-  key: NumericSettingKey;
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-}> = [
-  { key: "blur", label: "Blur", min: 0, max: 90, step: 1 },
-  { key: "effectHeight", label: "Height", min: 70, max: 180, step: 1 },
-  { key: "bottomOffset", label: "Bottom", min: -60, max: 20, step: 1 },
-  { key: "topOffset", label: "Top", min: -20, max: 60, step: 1 },
-  { key: "bottomSeed", label: "Bottom seed", min: 0, max: 80, step: 0.1 },
-  { key: "topSeed", label: "Top seed", min: 0, max: 80, step: 0.1 },
-  { key: "fadeStart", label: "Fade start", min: 0, max: 80, step: 1 },
-  { key: "fadeEnd", label: "Fade full", min: 10, max: 100, step: 1 },
-  { key: "planeY", label: "Plane Y", min: -2.4, max: 0.2, step: 0.01 },
-  { key: "rotationX", label: "Tilt", min: -1.4, max: -0.25, step: 0.01 },
-  { key: "scaleX", label: "Width", min: 0.8, max: 2.2, step: 0.01 },
-  { key: "scaleY", label: "Depth", min: 0.5, max: 1.8, step: 0.01 },
-  { key: "amplitude", label: "Amplitude", min: 0, max: 1.8, step: 0.01 },
-  { key: "frequency", label: "Frequency", min: 0.05, max: 0.5, step: 0.01 },
-  { key: "midFrequency", label: "Mid noise", min: 0.8, max: 4, step: 0.01 },
-  { key: "highFrequency", label: "Fine noise", min: 1.5, max: 7, step: 0.01 },
-  { key: "speed", label: "Speed", min: 0, max: 0.2, step: 0.001 },
-  { key: "lift", label: "Lift", min: 0, max: 1, step: 0.01 },
-  { key: "fresnelPower", label: "Fresnel pow", min: 0.5, max: 4, step: 0.01 },
-  { key: "fresnelStrength", label: "Fresnel", min: 0, max: 3, step: 0.01 },
-  { key: "horizonStrength", label: "Horizon", min: 0, max: 2, step: 0.01 },
-  { key: "lateralStrength", label: "Blue bias", min: 0, max: 1.5, step: 0.01 },
-  { key: "intensity", label: "Intensity", min: 0.2, max: 2, step: 0.01 },
-  { key: "baseGlow", label: "Purple mix", min: 0, max: 1.5, step: 0.01 },
-  { key: "opacity", label: "Opacity", min: 0, max: 1, step: 0.01 },
-];
-
-const colorControls: Array<{ key: ColorSettingKey; label: string }> = [
-  { key: "baseColor", label: "Base" },
-  { key: "fresnelColor", label: "Fresnel" },
-];
-
-function formatValue(value: number) {
-  if (Math.abs(value) >= 10) {
-    return value.toFixed(0);
-  }
-
-  return value.toFixed(2);
-}
-
-/** Renders the debug tuner for Voidhash gradient background settings. */
-export function VoidhashGradientControls({
-  onChange,
-  onHide,
-  onReset,
-  settings,
-  title = "Gradient FX",
-}: {
-  onChange: Dispatch<SetStateAction<VoidhashGradientSettings>>;
-  onHide: () => void;
-  onReset: () => void;
-  settings: VoidhashGradientSettings;
-  title?: string;
-}) {
-  const [copied, setCopied] = useState(false);
-
-  return (
-    <div className="fixed right-4 bottom-4 z-50 flex max-h-[calc(100vh-2rem)] w-[320px] flex-col overflow-hidden rounded-lg border border-border bg-background/95 text-foreground shadow-2xl backdrop-blur-xl">
-      <div className="flex items-center justify-between border-border border-b px-3 py-2">
-        <div className="font-medium text-sm">{title}</div>
-        <button className="text-muted-foreground text-xs hover:text-foreground" onClick={onHide} type="button">
-          Hide
-        </button>
-      </div>
-
-      <div className="flex-1 space-y-3 overflow-auto p-3">
-        {booleanControls.map((control) => (
-          <label className="grid grid-cols-[88px_1fr_44px] items-center gap-2 text-xs" key={control.key}>
-            <span className="text-muted-foreground">{control.label}</span>
-            <input
-              aria-label={control.label}
-              checked={settings[control.key]}
-              className="h-4 w-4 accent-primary"
-              onChange={(event) => {
-                onChange((current) => ({
-                  ...current,
-                  [control.key]: event.target.checked,
-                }));
-              }}
-              type="checkbox"
-            />
-            <span className="text-right font-mono text-muted-foreground">{settings[control.key] ? "on" : "off"}</span>
-          </label>
-        ))}
-
-        {colorControls.map((control) => (
-          <label className="grid grid-cols-[88px_1fr_76px] items-center gap-2 text-xs" key={control.key}>
-            <span className="text-muted-foreground">{control.label}</span>
-            <input
-              aria-label={control.label}
-              className="h-8 w-full cursor-pointer rounded border border-border bg-transparent"
-              onChange={(event) => {
-                onChange((current) => ({
-                  ...current,
-                  [control.key]: event.target.value,
-                }));
-              }}
-              type="color"
-              value={settings[control.key]}
-            />
-            <span className="font-mono text-muted-foreground">{settings[control.key]}</span>
-          </label>
-        ))}
-
-        {numericControls.map((control) => (
-          <label className="grid grid-cols-[88px_1fr_44px] items-center gap-2 text-xs" key={control.key}>
-            <span className="text-muted-foreground">{control.label}</span>
-            <input
-              aria-label={control.label}
-              className="accent-primary"
-              max={control.max}
-              min={control.min}
-              onChange={(event) => {
-                onChange((current) => ({
-                  ...current,
-                  [control.key]: Number(event.target.value),
-                }));
-              }}
-              step={control.step}
-              type="range"
-              value={settings[control.key]}
-            />
-            <span className="text-right font-mono text-muted-foreground">{formatValue(settings[control.key])}</span>
-          </label>
-        ))}
-      </div>
-
-      <div className="flex gap-2 border-border border-t p-3">
-        <button
-          className="flex-1 rounded-md border border-border px-3 py-2 text-xs hover:bg-card"
-          onClick={async () => {
-            await navigator.clipboard.writeText(JSON.stringify(settings, null, 2));
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1200);
-          }}
-          type="button"
-        >
-          {copied ? "Copied" : "Copy JSON"}
-        </button>
-        <button className="rounded-md border border-border px-3 py-2 text-xs hover:bg-card" onClick={onReset} type="button">
-          Reset
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/www/src/components/voidhash-gradient-settings.ts b/apps/www/src/components/voidhash-gradient-settings.ts
deleted file mode 100644
index bf826f336..000000000
--- a/apps/www/src/components/voidhash-gradient-settings.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-export type VoidhashGradientSettings = {
-  blur: number;
-  effectHeight: number;
-  bottomOffset: number;
-  topEnabled: boolean;
-  topOffset: number;
-  bottomSeed: number;
-  topSeed: number;
-  fadeStart: number;
-  fadeEnd: number;
-  planeY: number;
-  rotationX: number;
-  scaleX: number;
-  scaleY: number;
-  amplitude: number;
-  frequency: number;
-  midFrequency: number;
-  highFrequency: number;
-  speed: number;
-  lift: number;
-  fresnelPower: number;
-  fresnelStrength: number;
-  horizonStrength: number;
-  lateralStrength: number;
-  intensity: number;
-  baseGlow: number;
-  opacity: number;
-  baseColor: string;
-  fresnelColor: string;
-};
-
-export const VOIDHASH_GRADIENT_STORAGE_KEY = "voidhash:gradient-background-settings";
-export const VOIDHASH_GRADIENT_CONTROLS_STORAGE_KEY = "voidhash:gradient-background-controls";
-
-export const DEFAULT_VOIDHASH_GRADIENT_SETTINGS: VoidhashGradientSettings = {
-  blur: 7,
-  effectHeight: 98,
-  bottomOffset: 0,
-  topEnabled: false,
-  topOffset: 0,
-  bottomSeed: 0,
-  topSeed: 28.7,
-  fadeStart: 22,
-  fadeEnd: 58,
-  planeY: -2.4,
-  rotationX: -0.86,
-  scaleX: 1.42,
-  scaleY: 0.96,
-  amplitude: 1.42,
-  frequency: 0.19,
-  midFrequency: 0.8,
-  highFrequency: 1.5,
-  speed: 0.072,
-  lift: 0.58,
-  fresnelPower: 0.96,
-  fresnelStrength: 1.7,
-  horizonStrength: 0,
-  lateralStrength: 0.52,
-  intensity: 1.03,
-  baseGlow: 0,
-  opacity: 1,
-  baseColor: "#7f14ff",
-  fresnelColor: "#0673ff",
-};
-
-const HEX_COLOR_PATTERN = /^#[0-9a-f]{6}$/i;
-
-/** Merges persisted or caller-provided values with the supported gradient settings. */
-export function mergeVoidhashGradientSettings(
-  value: unknown,
-  defaults: VoidhashGradientSettings = DEFAULT_VOIDHASH_GRADIENT_SETTINGS,
-): VoidhashGradientSettings {
-  if (!value || typeof value !== "object") {
-    return defaults;
-  }
-
-  const settings: VoidhashGradientSettings = { ...defaults };
-  const entries = Object.entries(value as Partial<Record<keyof VoidhashGradientSettings, unknown>>);
-
-  for (const [key, entryValue] of entries) {
-    if (!(key in settings)) {
-      continue;
-    }
-
-    const settingKey = key as keyof VoidhashGradientSettings;
-    const defaultValue = settings[settingKey];
-
-    if (typeof defaultValue === "number" && typeof entryValue === "number" && Number.isFinite(entryValue)) {
-      settings[settingKey] = entryValue as never;
-    }
-
-    if (typeof defaultValue === "boolean" && typeof entryValue === "boolean") {
-      settings[settingKey] = entryValue as never;
-    }
-
-    if (typeof defaultValue === "string" && typeof entryValue === "string" && HEX_COLOR_PATTERN.test(entryValue)) {
-      settings[settingKey] = entryValue.toLowerCase() as never;
-    }
-  }
-
-  return settings;
-}
diff --git a/apps/www/src/features/auth/components/auth-lenticular-background.tsx b/apps/www/src/features/auth/components/auth-lenticular-background.tsx
index 6ace73fe9..c92abc7eb 100644
--- a/apps/www/src/features/auth/components/auth-lenticular-background.tsx
+++ b/apps/www/src/features/auth/components/auth-lenticular-background.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { HeroShader } from "@/features/www/hero/hero-shader";
+import { HeroShader } from "@/components/hero-shader";
 import { cn } from "@/lib/utils";
 
 /** Renders the landing lenticular composition with the animated Perlin surface as its source. */
diff --git a/apps/www/src/features/design/components/docs/colors/index.tsx b/apps/www/src/features/design/components/docs/colors/index.tsx
deleted file mode 100644
index 0b50c638b..000000000
--- a/apps/www/src/features/design/components/docs/colors/index.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-"use client";
-
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { useCallback, useState } from "react";
-
-import { cn } from "@/features/design/lib/cn";
-
-import {
-  BRAND_SCALES,
-  isLightColor,
-  resolveToken,
-  scaleSteps,
-  SEMANTIC_GROUPS,
-  type SemanticToken,
-  type ThemeName,
-} from "./tokens";
-
-const THEMES: ThemeName[] = ["light", "dark"];
-
-const useCopyValue = () => {
-  const [copied, setCopied] = useState<string | undefined>(undefined);
-
-  const copy = useCallback((value: string) => {
-    void navigator.clipboard.writeText(value).then(() => {
-      setCopied(value);
-      setTimeout(() => setCopied((current) => (current === value ? undefined : current)), 1200);
-    });
-  }, []);
-
-  return { copied, copy };
-};
-
-interface CopyButtonProps {
-  className?: string;
-  copied: boolean;
-  label: string;
-  onCopy: () => void;
-  value: string;
-}
-
-function CopyButton({ className, copied, label, onCopy, value }: CopyButtonProps) {
-  return (
-    <button
-      className={cn(
-        "group inline-flex items-center gap-1.5 rounded-sm font-mono text-xs transition-colors hover:text-foreground",
-        className,
-      )}
-      onClick={onCopy}
-      title={`Copy ${label}`}
-      type="button"
-    >
-      <span>{value}</span>
-      {copied ? (
-        <CheckIcon className="size-3 text-success" />
-      ) : (
-        <CopyIcon className="size-3 opacity-0 transition-opacity group-hover:opacity-60" />
-      )}
-    </button>
-  );
-}
-
-interface TokenSwatchProps {
-  theme: ThemeName;
-  token: SemanticToken;
-}
-
-function TokenSwatch({ theme, token }: TokenSwatchProps) {
-  const resolved = resolveToken(token.name, theme);
-  if (!resolved) {
-    return null;
-  }
-
-  const on = token.on ? resolveToken(token.on, theme) : undefined;
-  const fallbackText = isLightColor(resolved.value) ? "oklch(0% 0 0)" : "oklch(100% 0 0)";
-
-  return (
-    <div
-      className="flex h-16 flex-1 items-center justify-center"
-      style={{ backgroundColor: resolved.value }}
-    >
-      <span
-        className="font-medium text-sm"
-        style={{ color: on?.value ?? fallbackText, opacity: token.on ? 1 : 0.55 }}
-      >
-        {token.on ? "Aa" : theme === "light" ? "L" : "D"}
-      </span>
-    </div>
-  );
-}
-
-interface TokenValueProps {
-  copiedValue: string | undefined;
-  onCopy: (value: string) => void;
-  theme: ThemeName;
-  token: SemanticToken;
-}
-
-function TokenValue({ copiedValue, onCopy, theme, token }: TokenValueProps) {
-  const resolved = resolveToken(token.name, theme);
-  if (!resolved) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-muted-foreground text-xs">
-      <span className="w-9 shrink-0 uppercase tracking-wide">{theme}</span>
-      <CopyButton
-        copied={copiedValue === resolved.value}
-        label={`${theme} value`}
-        onCopy={() => onCopy(resolved.value)}
-        value={resolved.value}
-      />
-      {resolved.alias ? <span className="opacity-70">via {resolved.alias}</span> : null}
-    </div>
-  );
-}
-
-interface SemanticTokenCardProps {
-  copiedValue: string | undefined;
-  onCopy: (value: string) => void;
-  token: SemanticToken;
-}
-
-function SemanticTokenCard({ copiedValue, onCopy, token }: SemanticTokenCardProps) {
-  const variable = `var(--${token.name})`;
-
-  return (
-    <div className="flex flex-col overflow-hidden rounded-lg border bg-card">
-      <div className="flex">
-        {THEMES.map((theme) => (
-          <TokenSwatch key={theme} theme={theme} token={token} />
-        ))}
-      </div>
-
-      <div className="flex flex-1 flex-col gap-2 border-t p-3">
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-          <CopyButton
-            className="font-medium text-foreground text-sm"
-            copied={copiedValue === variable}
-            label="variable"
-            onCopy={() => onCopy(variable)}
-            value={`--${token.name}`}
-          />
-          {token.on ? (
-            <span className="text-muted-foreground text-xs">
-              on <span className="font-mono">--{token.on}</span>
-            </span>
-          ) : null}
-        </div>
-
-        <p className="text-muted-foreground text-sm leading-snug">{token.meaning}</p>
-
-        <div className="flex flex-wrap gap-1">
-          {token.utilities.map((utility) => (
-            <code
-              className="rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
-              key={utility}
-            >
-              {utility}
-            </code>
-          ))}
-        </div>
-
-        <div className="mt-auto flex flex-col gap-0.5 pt-1">
-          {THEMES.map((theme) => (
-            <TokenValue
-              copiedValue={copiedValue}
-              key={theme}
-              onCopy={onCopy}
-              theme={theme}
-              token={token}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Renders every semantic theme token grouped by intent, with its light and dark
- * value, the alias it resolves through, and the Tailwind utilities that map to
- * it. Values are read from `@voidhash/ui/styles/brand-theme.css`, so this page
- * cannot drift from the theme.
- */
-export function SemanticColorTokens() {
-  const { copied, copy } = useCopyValue();
-
-  return (
-    <div className="not-prose flex flex-col gap-10">
-      {SEMANTIC_GROUPS.map((group) => (
-        <section className="flex flex-col gap-4" key={group.title}>
-          <div className="flex flex-col gap-1">
-            <h3 className="font-semibold text-lg tracking-tight">{group.title}</h3>
-            <p className="max-w-[70ch] text-muted-foreground text-sm">{group.description}</p>
-          </div>
-
-          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-            {group.tokens.map((token) => (
-              <SemanticTokenCard
-                copiedValue={copied}
-                key={token.name}
-                onCopy={copy}
-                token={token}
-              />
-            ))}
-          </div>
-        </section>
-      ))}
-    </div>
-  );
-}
-
-/**
- * Renders the raw brand ramps every semantic token is built from. Scales are
- * theme-independent — only the semantic tokens above remap between light and
- * dark.
- */
-export function BrandColorScales() {
-  const { copied, copy } = useCopyValue();
-
-  return (
-    <div className="not-prose flex flex-col gap-10">
-      {BRAND_SCALES.map((scale) => {
-        const steps = scaleSteps(scale.prefix);
-
-        return (
-          <section className="flex flex-col gap-3" key={scale.prefix}>
-            <div className="flex flex-col gap-1">
-              <h3 className="font-semibold text-lg tracking-tight">{scale.title}</h3>
-              <p className="max-w-[70ch] text-muted-foreground text-sm">{scale.meaning}</p>
-            </div>
-
-            <div className="grid grid-cols-4 gap-2 sm:grid-cols-6 lg:grid-cols-11">
-              {steps.map((step) => {
-                const name = `${scale.prefix}-${step}`;
-                const resolved = resolveToken(name, "light");
-                if (!resolved) {
-                  return null;
-                }
-
-                const variable = `var(--${name})`;
-
-                return (
-                  <button
-                    className="group flex flex-col gap-1.5 text-left"
-                    key={step}
-                    onClick={() => copy(variable)}
-                    title={`Copy ${variable}`}
-                    type="button"
-                  >
-                    <span
-                      className="flex h-14 items-center justify-center rounded-md border border-black/5 transition-transform group-hover:scale-[1.03] dark:border-white/10"
-                      style={{ backgroundColor: resolved.value }}
-                    >
-                      {copied === variable ? (
-                        <CheckIcon
-                          className="size-4"
-                          style={{
-                            color: isLightColor(resolved.value)
-                              ? "oklch(0% 0 0)"
-                              : "oklch(100% 0 0)",
-                          }}
-                        />
-                      ) : null}
-                    </span>
-                    <span className="flex flex-col leading-tight">
-                      <span className="font-medium text-xs">{step}</span>
-                      <span className="break-all font-mono text-[10px] text-muted-foreground">
-                        {resolved.value}
-                      </span>
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-          </section>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/colors/tokens.ts b/apps/www/src/features/design/components/docs/colors/tokens.ts
deleted file mode 100644
index 9f9124708..000000000
--- a/apps/www/src/features/design/components/docs/colors/tokens.ts
+++ /dev/null
@@ -1,452 +0,0 @@
-import brandThemeCss from "@voidhash/ui/styles/brand-theme.css?raw";
-
-export type ThemeName = "light" | "dark";
-
-export interface ResolvedToken {
-  /** Final color value with every `var()` indirection followed. */
-  value: string;
-  /** The variable this token points at, when it is defined as an alias. */
-  alias?: string;
-}
-
-export interface SemanticToken {
-  /** Custom property name without the leading dashes, e.g. `primary`. */
-  name: string;
-  /** What the token is for and when to reach for it. */
-  meaning: string;
-  /** Tailwind utilities that map onto this token. */
-  utilities: string[];
-  /** Token used for text/icons placed on top of this one, if there is a pair. */
-  on?: string;
-}
-
-export interface SemanticGroup {
-  title: string;
-  description: string;
-  tokens: SemanticToken[];
-}
-
-export interface BrandScale {
-  /** Custom property prefix, e.g. `blue-ribbon` for `--blue-ribbon-500`. */
-  prefix: string;
-  title: string;
-  meaning: string;
-}
-
-const SELECTOR_LIGHT = ":root";
-const SELECTOR_DARK = ".dark";
-const ALIAS_PATTERN = /^var\((--[\w-]+)\)$/;
-
-/**
- * Reads the custom properties declared in a single flat rule block. The brand
- * theme keeps `:root` and `.dark` free of nested rules, so a brace scan is
- * enough — no CSS parser needed.
- */
-const readDeclarations = (css: string, selector: string): Record<string, string> => {
-  const selectorStart = css.indexOf(`${selector} {`);
-  if (selectorStart === -1) {
-    return {};
-  }
-
-  const blockStart = css.indexOf("{", selectorStart);
-  const blockEnd = css.indexOf("}", blockStart);
-  const declarations: Record<string, string> = {};
-
-  for (const declaration of css.slice(blockStart + 1, blockEnd).split(";")) {
-    const separator = declaration.indexOf(":");
-    if (separator === -1) {
-      continue;
-    }
-
-    const name = declaration.slice(0, separator).trim();
-    if (name.startsWith("--")) {
-      declarations[name] = declaration.slice(separator + 1).trim();
-    }
-  }
-
-  return declarations;
-};
-
-const LIGHT_DECLARATIONS = readDeclarations(brandThemeCss, SELECTOR_LIGHT);
-const DARK_DECLARATIONS = {
-  ...LIGHT_DECLARATIONS,
-  ...readDeclarations(brandThemeCss, SELECTOR_DARK),
-};
-
-const declarationsFor = (theme: ThemeName) =>
-  theme === "dark" ? DARK_DECLARATIONS : LIGHT_DECLARATIONS;
-
-const follow = (declarations: Record<string, string>, value: string, depth = 0): string => {
-  const alias = ALIAS_PATTERN.exec(value);
-  const target = alias ? declarations[alias[1]] : undefined;
-  if (!target || depth > 10) {
-    return value;
-  }
-
-  return follow(declarations, target, depth + 1);
-};
-
-/**
- * Resolves a theme token to its literal color, following alias chains such as
- * `--primary` → `--blue-ribbon-600` → `oklch(…)`. Returns `undefined` when the
- * token is not declared for the given theme.
- */
-export const resolveToken = (name: string, theme: ThemeName): ResolvedToken | undefined => {
-  const declarations = declarationsFor(theme);
-  const raw = declarations[`--${name}`];
-  if (!raw) {
-    return undefined;
-  }
-
-  const alias = ALIAS_PATTERN.exec(raw);
-  return {
-    alias: alias?.[1],
-    value: follow(declarations, raw),
-  };
-};
-
-/** Lists the steps declared for a scale prefix, ordered light to dark. */
-export const scaleSteps = (prefix: string): number[] =>
-  Object.keys(LIGHT_DECLARATIONS)
-    .map((name) => {
-      const match = new RegExp(`^--${prefix}-(\\d+)$`).exec(name);
-      return match ? Number(match[1]) : undefined;
-    })
-    .filter((step): step is number => step !== undefined)
-    .sort((a, b) => a - b);
-
-/**
- * Estimates whether a color is light enough to need dark text on top. Handles
- * the two literal formats used by the theme: `oklch(L% C H)` and hex.
- */
-export const isLightColor = (value: string): boolean => {
-  const oklch = /^oklch\(\s*([\d.]+)%/.exec(value);
-  if (oklch) {
-    return Number(oklch[1]) >= 62;
-  }
-
-  const hex = /^#([\da-f]{6})$/i.exec(value);
-  if (hex) {
-    const int = Number.parseInt(hex[1], 16);
-    const luminance =
-      (0.2126 * ((int >> 16) & 0xff) + 0.7152 * ((int >> 8) & 0xff) + 0.0722 * (int & 0xff)) / 255;
-    return luminance >= 0.55;
-  }
-
-  return true;
-};
-
-export const SEMANTIC_GROUPS: SemanticGroup[] = [
-  {
-    description:
-      "The stack of neutral surfaces, from the page canvas up to floating layers. Pick the one that matches how far the element is lifted off the page, not the color you want.",
-    title: "Surfaces",
-    tokens: [
-      {
-        meaning:
-          "The app canvas. Everything else sits on top of it. Set once on `body` — components should not repaint it.",
-        name: "background",
-        on: "foreground",
-        utilities: ["bg-background"],
-      },
-      {
-        meaning:
-          "A neutral surface raised off the canvas: toolbars, inspector rails, list rows that need separation without a card border.",
-        name: "surface",
-        on: "foreground",
-        utilities: ["bg-surface"],
-      },
-      {
-        meaning:
-          "A recessed surface for wells and tracks — slider rails, progress backgrounds, inset code blocks.",
-        name: "surface-muted",
-        on: "foreground",
-        utilities: ["bg-surface-muted"],
-      },
-      {
-        meaning:
-          "Content containers. Use with `--border` for the outline; in dark mode it reads lighter than the canvas so cards float.",
-        name: "card",
-        on: "card-foreground",
-        utilities: ["bg-card"],
-      },
-      {
-        meaning: "Text and icons inside a card.",
-        name: "card-foreground",
-        utilities: ["text-card-foreground"],
-      },
-      {
-        meaning:
-          "App chrome around the workspace — designer and editor panels. Slightly darker than `--card` in dark mode so tooling recedes behind content.",
-        name: "panel",
-        on: "foreground",
-        utilities: ["bg-panel"],
-      },
-      {
-        meaning:
-          "Layers that float above the page: dropdowns, menus, tooltips, comboboxes, date pickers.",
-        name: "popover",
-        on: "popover-foreground",
-        utilities: ["bg-popover"],
-      },
-      {
-        meaning: "Text and icons inside a popover layer.",
-        name: "popover-foreground",
-        utilities: ["text-popover-foreground"],
-      },
-    ],
-  },
-  {
-    description:
-      "Text and icon colors. Body copy is `--foreground`; anything quieter steps down to `--muted-foreground` rather than lowering opacity.",
-    title: "Content",
-    tokens: [
-      {
-        meaning: "Default body text, headings, and icons on the canvas.",
-        name: "foreground",
-        utilities: ["text-foreground"],
-      },
-      {
-        meaning:
-          "Secondary text: labels, helper copy, placeholders, timestamps, inactive icons. The lowest-emphasis text that still meets contrast.",
-        name: "muted-foreground",
-        utilities: ["text-muted-foreground"],
-      },
-      {
-        meaning:
-          "Quiet neutral fill for badges, skeletons, disabled controls, and hovered table rows.",
-        name: "muted",
-        on: "muted-foreground",
-        utilities: ["bg-muted"],
-      },
-    ],
-  },
-  {
-    description:
-      "Interactive intent. One primary action per view; everything competing with it drops to secondary or ghost styling.",
-    title: "Actions",
-    tokens: [
-      {
-        meaning:
-          "The primary action and brand accent — solid buttons, selected states, links, active nav items.",
-        name: "primary",
-        on: "primary-foreground",
-        utilities: ["bg-primary", "text-primary", "border-primary"],
-      },
-      {
-        meaning: "Text and icons on a primary fill. Stays white in both themes.",
-        name: "primary-foreground",
-        utilities: ["text-primary-foreground"],
-      },
-      {
-        meaning: "Neutral, lower-emphasis actions that sit next to a primary button.",
-        name: "secondary",
-        on: "secondary-foreground",
-        utilities: ["bg-secondary"],
-      },
-      {
-        meaning: "Text and icons on a secondary fill.",
-        name: "secondary-foreground",
-        utilities: ["text-secondary-foreground"],
-      },
-      {
-        meaning:
-          "Hover and highlight state for list-like surfaces: menu items, command results, sidebar rows, ghost buttons.",
-        name: "accent",
-        on: "accent-foreground",
-        utilities: ["bg-accent", "hover:bg-accent"],
-      },
-      {
-        meaning: "Text and icons on an accent highlight.",
-        name: "accent-foreground",
-        utilities: ["text-accent-foreground"],
-      },
-    ],
-  },
-  {
-    description:
-      "Status colors. Reserved for outcomes and risk — never used decoratively, so their appearance always carries meaning.",
-    title: "Feedback",
-    tokens: [
-      {
-        meaning:
-          "Destructive and irreversible actions, error states, invalid fields. Pair with a confirmation for anything unrecoverable.",
-        name: "destructive",
-        on: "destructive-foreground",
-        utilities: ["bg-destructive", "text-destructive", "border-destructive"],
-      },
-      {
-        meaning: "Text and icons on a destructive fill.",
-        name: "destructive-foreground",
-        utilities: ["text-destructive-foreground"],
-      },
-      {
-        meaning: "Successful outcomes and healthy status — completed steps, live deployments.",
-        name: "success",
-        on: "success-foreground",
-        utilities: ["bg-success", "text-success"],
-      },
-      {
-        meaning: "Text and icons on a success fill.",
-        name: "success-foreground",
-        utilities: ["text-success-foreground"],
-      },
-    ],
-  },
-  {
-    description:
-      "Hairlines, control outlines, and focus. These are the only tokens allowed to draw structure — do not fake borders with a background color.",
-    title: "Borders and focus",
-    tokens: [
-      {
-        meaning:
-          "Default hairline between surfaces. Applied globally by the base layer, so most elements inherit it without a border utility.",
-        name: "border",
-        utilities: ["border-border"],
-      },
-      {
-        meaning: "Outline of form controls — inputs, textareas, selects, checkboxes.",
-        name: "input",
-        utilities: ["border-input"],
-      },
-      {
-        meaning:
-          "Keyboard focus ring. The base layer renders it at 50% opacity (`outline-ring/50`), so focus reads clearly without shouting.",
-        name: "ring",
-        utilities: ["ring-ring", "outline-ring/50"],
-      },
-    ],
-  },
-  {
-    description:
-      "The sidebar runs its own surface stack so navigation can go darker than the app without dragging the rest of the UI with it.",
-    title: "Sidebar",
-    tokens: [
-      {
-        meaning: "Sidebar background. Pure black in dark mode, pinning navigation to the far edge.",
-        name: "sidebar",
-        on: "sidebar-foreground",
-        utilities: ["bg-sidebar"],
-      },
-      {
-        meaning: "Sidebar labels and icons.",
-        name: "sidebar-foreground",
-        utilities: ["text-sidebar-foreground"],
-      },
-      {
-        meaning:
-          "Active navigation item. Deliberately neutral rather than brand blue so the sidebar does not compete with in-page primary actions.",
-        name: "sidebar-primary",
-        on: "sidebar-primary-foreground",
-        utilities: ["bg-sidebar-primary"],
-      },
-      {
-        meaning: "Text on an active navigation item.",
-        name: "sidebar-primary-foreground",
-        utilities: ["text-sidebar-primary-foreground"],
-      },
-      {
-        meaning: "Hovered navigation item.",
-        name: "sidebar-accent",
-        on: "sidebar-accent-foreground",
-        utilities: ["bg-sidebar-accent"],
-      },
-      {
-        meaning: "Text on a hovered navigation item.",
-        name: "sidebar-accent-foreground",
-        utilities: ["text-sidebar-accent-foreground"],
-      },
-      {
-        meaning: "Dividers inside the sidebar and the seam against the app canvas.",
-        name: "sidebar-border",
-        utilities: ["border-sidebar-border"],
-      },
-      {
-        meaning: "Focus ring for sidebar controls.",
-        name: "sidebar-ring",
-        utilities: ["ring-sidebar-ring"],
-      },
-    ],
-  },
-  {
-    description:
-      "Categorical series colors, ordered by how they should be assigned. Use them in sequence so the same series index keeps the same color across charts.",
-    title: "Data visualization",
-    tokens: [
-      {
-        meaning: "First series — the metric the chart is about.",
-        name: "chart-1",
-        utilities: ["fill-chart-1", "stroke-chart-1"],
-      },
-      {
-        meaning: "Second series.",
-        name: "chart-2",
-        utilities: ["fill-chart-2", "stroke-chart-2"],
-      },
-      {
-        meaning: "Third series.",
-        name: "chart-3",
-        utilities: ["fill-chart-3", "stroke-chart-3"],
-      },
-      {
-        meaning: "Fourth series.",
-        name: "chart-4",
-        utilities: ["fill-chart-4", "stroke-chart-4"],
-      },
-      {
-        meaning: "Fifth series. Beyond five categories, group the tail into an “Other” bucket.",
-        name: "chart-5",
-        utilities: ["fill-chart-5", "stroke-chart-5"],
-      },
-    ],
-  },
-];
-
-export const BRAND_SCALES: BrandScale[] = [
-  {
-    meaning:
-      "The Voidhash brand hue. Step 600 is `--primary`, step 500 is `--ring`. Lighter steps back tinted surfaces; darker steps are for text on tinted backgrounds.",
-    prefix: "blue-ribbon",
-    title: "Blue Ribbon",
-  },
-  {
-    meaning:
-      "Secondary brand hue. Used for the second chart series and for AI/agent surfaces that need to read as distinct from primary actions.",
-    prefix: "electric-violet",
-    title: "Electric Violet",
-  },
-  {
-    meaning: "Third chart series and accent illustrations. Not used for interactive states.",
-    prefix: "fuchsia-pink",
-    title: "Fuchsia Pink",
-  },
-  {
-    meaning:
-      "Danger. Step 600 is `--destructive` in light mode, step 500 in dark mode where the surface is darker.",
-    prefix: "radical-red",
-    title: "Radical Red",
-  },
-  {
-    meaning:
-      "Reserved for high-urgency, non-destructive states. No semantic token maps to it yet, so reference the scale directly and document the usage.",
-    prefix: "blaze-orange",
-    title: "Blaze Orange",
-  },
-  {
-    meaning:
-      "Warnings and pending states — there is no `--warning` token, so use `amber-500`/`amber-600` when you need caution without danger. Also the fourth chart series.",
-    prefix: "amber",
-    title: "Amber",
-  },
-  {
-    meaning: "Success and healthy status. Step 600 is `--success`; step 500 is the fifth series.",
-    prefix: "pistachio",
-    title: "Pistachio",
-  },
-  {
-    meaning:
-      "The neutral ramp every surface, border, and text token is built from. Light mode maps 50–200 to surfaces and 500–900 to text; dark mode inverts that.",
-    prefix: "zinc",
-    title: "Zinc",
-  },
-];
diff --git a/apps/www/src/features/design/components/docs/component-overview.tsx b/apps/www/src/features/design/components/docs/component-overview.tsx
deleted file mode 100644
index f2488d0cc..000000000
--- a/apps/www/src/features/design/components/docs/component-overview.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-"use client";
-
-import Preview02Example from "./component-overview/index";
-
-/**
- * Renders shadcn's preview-02 composition using the Voidhash UI primitives.
- */
-export function ComponentOverview() {
-  return (
-    <div className="not-prose">
-      <Preview02Example />
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/account-access.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/account-access.tsx
deleted file mode 100644
index 24981f391..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/account-access.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Field, FieldGroup, FieldLabel } from "@voidhash/ui";
-import { Input } from "@voidhash/ui";
-import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function AccountAccess() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Account Access</CardTitle>
-        <CardDescription>Update your credentials or re-authenticate.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="email-address">Email Address</FieldLabel>
-            <Input id="email-address" type="email" defaultValue="artist@studio.inc" />
-          </Field>
-          <Field>
-            <div className="flex items-center justify-between">
-              <FieldLabel htmlFor="current-password">Current Password</FieldLabel>
-              <a
-                href="#"
-                className="text-xs font-medium tracking-wider text-muted-foreground uppercase hover:text-foreground"
-              >
-                Forgot?
-              </a>
-            </div>
-            <Input id="current-password" type="password" defaultValue="password123" />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter className="flex-col gap-4">
-        <Button className="w-full">
-          <IconPlaceholder
-            lucide="LockKeyholeIcon"
-            tabler="IconLock"
-            hugeicons="SquareLock02Icon"
-            phosphor="LockKeyIcon"
-            remixicon="RiLockLine"
-          />
-          Update Security
-        </Button>
-        <Item asChild variant="muted">
-          <a href="#">
-            <ItemMedia variant="icon">
-              <IconPlaceholder
-                lucide="AlertCircleIcon"
-                tabler="IconAlertCircle"
-                hugeicons="AlertCircleIcon"
-                phosphor="WarningCircleIcon"
-                remixicon="RiErrorWarningLine"
-                className="text-destructive"
-              />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Danger Zone</ItemTitle>
-              <ItemDescription className="line-clamp-1">
-                Archive account and remove catalog
-              </ItemDescription>
-            </ItemContent>
-            <IconPlaceholder
-              lucide="ArrowRightIcon"
-              tabler="IconArrowRight"
-              hugeicons="ArrowRight01Icon"
-              phosphor="ArrowRightIcon"
-              remixicon="RiArrowRightLine"
-              className="size-4"
-            />
-          </a>
-        </Item>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/card-overview.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/card-overview.tsx
deleted file mode 100644
index 74c81fe07..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/card-overview.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import { Bar, BarChart, XAxis } from "recharts";
-
-import { Badge } from "@voidhash/ui";
-import { Button } from "@voidhash/ui";
-import { Card, CardContent, CardDescription, CardTitle } from "@voidhash/ui";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@voidhash/ui";
-
-const activityData = [
-  { month: "Jan", amount: 40 },
-  { month: "Feb", amount: 55 },
-  { month: "Mar", amount: 35 },
-  { month: "Apr", amount: 60 },
-  { month: "May", amount: 45 },
-  { month: "Jun", amount: 50 },
-  { month: "Jul", amount: 65 },
-  { month: "Aug", amount: 40 },
-  { month: "Sep", amount: 55 },
-  { month: "Oct", amount: 70 },
-  { month: "Nov", amount: 45 },
-  { month: "Dec", amount: 80 },
-];
-
-const chartConfig = {
-  amount: {
-    label: "Activity",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig;
-
-export function CardOverview() {
-  return (
-    <div className="grid grid-cols-2 gap-3">
-      <Card>
-        <CardContent>
-          <CardDescription>Card Balance</CardDescription>
-          <CardTitle className="text-2xl tabular-nums">US$12.94</CardTitle>
-          <CardDescription className="tabular-nums">US$11,337.06 Available</CardDescription>
-        </CardContent>
-      </Card>
-      <Card className="flex flex-col justify-between">
-        <CardContent className="flex flex-1 flex-col justify-between">
-          <div className="flex flex-col gap-1">
-            <CardDescription>Payment Due</CardDescription>
-            <CardTitle className="text-2xl">1 Apr</CardTitle>
-          </div>
-          <Button variant="outline" size="sm" className="mt-3 w-full">
-            Pay Early
-          </Button>
-        </CardContent>
-      </Card>
-      <Card className="col-span-2">
-        <CardContent className="flex flex-col gap-2">
-          <div className="flex items-center justify-between">
-            <CardDescription>Yearly Activity</CardDescription>
-            <Badge variant="secondary">+US$0.25 Daily Cash</Badge>
-          </div>
-          <ChartContainer config={chartConfig} className="h-20 w-full">
-            <BarChart data={activityData} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
-              <XAxis
-                dataKey="month"
-                tickLine={false}
-                tickMargin={4}
-                axisLine={false}
-                tickFormatter={(v) => String(v).slice(0, 1)}
-                className="text-[10px]"
-              />
-              <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-              <Bar dataKey="amount" fill="var(--color-amount)" radius={[3, 3, 0, 0]} />
-            </BarChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/claimable-balance.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/claimable-balance.tsx
deleted file mode 100644
index 1c7e3f98f..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/claimable-balance.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Badge } from "@voidhash/ui";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Item, ItemContent } from "@voidhash/ui";
-import { Separator } from "@voidhash/ui";
-
-export function ClaimableBalance() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardDescription>Claimable Balance</CardDescription>
-        <CardTitle className="text-5xl tabular-nums">$0.00</CardTitle>
-        <Badge variant="outline">
-          <span className="size-2 rounded-full bg-yellow-500" />
-          Pending Setup
-        </Badge>
-      </CardHeader>
-      <CardContent className="flex flex-1 flex-col justify-end">
-        <Item variant="muted" className="flex-col items-stretch">
-          <ItemContent className="gap-3">
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Net Royalties</span>
-              <span className="text-sm font-medium tabular-nums">$0.00</span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Processing Fee</span>
-              <span className="text-sm font-medium tabular-nums">-$0.00</span>
-            </div>
-            <Separator />
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Total Ready to Claim</span>
-              <span className="text-sm font-semibold tabular-nums">$0.00 USD</span>
-            </div>
-          </ItemContent>
-        </Item>
-      </CardContent>
-      <CardFooter>
-        <CardDescription>
-          Once your bank is connected, balances over $10.00 are automatically eligible for monthly
-          distribution on the 15th of each month.
-        </CardDescription>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/contribution-history.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/contribution-history.tsx
deleted file mode 100644
index 120fb2ecf..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/contribution-history.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { Bar, BarChart, XAxis } from "recharts";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@voidhash/ui";
-import { Item, ItemContent, ItemDescription } from "@voidhash/ui";
-import { useDesignSystemSearchParams } from "../preview-config";
-
-const chartData = [
-  { month: "Dec", amount: 800 },
-  { month: "Jan", amount: 1100 },
-  { month: "Feb", amount: 900 },
-  { month: "Mar", amount: 1300 },
-  { month: "Apr", amount: 750 },
-  { month: "May", amount: 1400 },
-];
-
-const chartConfig = {
-  amount: {
-    label: "Contribution",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig;
-
-export function ContributionHistory() {
-  const [params] = useDesignSystemSearchParams();
-  const isRounded = !["lyra", "sera"].includes(params.style);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Contribution History</CardTitle>
-        <CardDescription>Last 6 months of activity</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="h-[200px] w-full">
-          <BarChart
-            accessibilityLayer
-            data={chartData}
-            margin={{ left: 0, right: 0, top: 8, bottom: 0 }}
-          >
-            <XAxis dataKey="month" tickLine={false} tickMargin={8} axisLine={false} />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel className="min-w-40" />}
-            />
-            <Bar
-              dataKey="amount"
-              fill="var(--color-amount)"
-              radius={isRounded ? [6, 6, 0, 0] : 0}
-              maxBarSize={40}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardContent>
-        <div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
-          <Item variant="muted" className="flex-col items-stretch">
-            <ItemContent className="gap-1">
-              <ItemDescription className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                Upcoming
-              </ItemDescription>
-              <span className="cn-font-heading text-lg font-semibold">May 25, 2024</span>
-              <span className="text-sm text-muted-foreground">$1,000 scheduled</span>
-            </ItemContent>
-          </Item>
-          <Item variant="muted" className="flex-col items-stretch">
-            <ItemContent className="gap-1">
-              <ItemDescription className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                Auto-Save Plan
-              </ItemDescription>
-              <span className="cn-font-heading text-lg font-semibold">Accelerated</span>
-              <span className="text-sm text-muted-foreground">Recurring weekly</span>
-            </ItemContent>
-          </Item>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">View Full Report</Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/cover-art.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/cover-art.tsx
deleted file mode 100644
index 383abf71e..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/cover-art.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { Card, CardContent, CardDescription, CardFooter } from "@voidhash/ui";
-import { Item } from "@voidhash/ui";
-import { Label } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function CoverArt() {
-  return (
-    <Card>
-      <CardContent className="flex flex-col gap-3">
-        <Label
-          htmlFor="cover-art"
-          className="text-center text-xs font-normal tracking-wider text-muted-foreground uppercase"
-        >
-          Cover Art
-        </Label>
-        <Item className="aspect-square" variant="outline">
-          <label
-            htmlFor="cover-art"
-            className="flex size-full cursor-pointer items-center justify-center"
-          >
-            <IconPlaceholder
-              lucide="ImageIcon"
-              tabler="IconPhoto"
-              hugeicons="Image01Icon"
-              phosphor="ImageIcon"
-              remixicon="RiImageLine"
-              className="size-10 text-muted-foreground/50"
-            />
-          </label>
-        </Item>
-        <input id="cover-art" type="file" accept="image/jpeg,image/png" className="sr-only" />
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <Button variant="outline" className="w-full" asChild>
-          <label htmlFor="cover-art" className="cursor-pointer">
-            Upload Artwork
-          </label>
-        </Button>
-        <CardDescription className="text-center text-xs">
-          Minimum 3000 × 3000px
-          <br />
-          JPEG or PNG only
-        </CardDescription>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/dividend-income.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/dividend-income.tsx
deleted file mode 100644
index d1c67686c..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/dividend-income.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import { Bar, BarChart } from "recharts";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@voidhash/ui";
-import { Item, ItemContent, ItemDescription, ItemGroup, ItemTitle } from "@voidhash/ui";
-import { useDesignSystemSearchParams } from "../preview-config";
-import { IconPlaceholder } from "../icon-placeholder";
-
-const HOLDINGS = [
-  {
-    name: "Vanguard VIG",
-    shares: "450 Shares",
-    amount: "$1,842.10",
-    data: [
-      { q: "Q1", value: 380 },
-      { q: "Q2", value: 420 },
-      { q: "Q3", value: 390 },
-      { q: "Q4", value: 652 },
-    ],
-  },
-  {
-    name: "S&P 500 VOO",
-    shares: "112 Shares",
-    amount: "$928.40",
-    data: [
-      { q: "Q1", value: 180 },
-      { q: "Q2", value: 210 },
-      { q: "Q3", value: 320 },
-      { q: "Q4", value: 218 },
-    ],
-  },
-  {
-    name: "Apple AAPL",
-    shares: "85 Shares",
-    amount: "$340.00",
-    data: [
-      { q: "Q1", value: 60 },
-      { q: "Q2", value: 70 },
-      { q: "Q3", value: 120 },
-      { q: "Q4", value: 90 },
-    ],
-  },
-  {
-    name: "Realty Income",
-    shares: "320 Shares",
-    amount: "$1,139.50",
-    data: [
-      { q: "Q1", value: 240 },
-      { q: "Q2", value: 260 },
-      { q: "Q3", value: 280 },
-      { q: "Q4", value: 360 },
-    ],
-  },
-];
-
-const miniChartConfig = {
-  value: {
-    label: "Dividend",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig;
-
-export function DividendIncome() {
-  const [params] = useDesignSystemSearchParams();
-  const isRounded = !["lyra", "sera"].includes(params.style);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Q2 Dividend Income</CardTitle>
-        <CardDescription>
-          Quarterly dividend payouts across your portfolio holdings.
-        </CardDescription>
-        <CardAction>
-          <Button variant="ghost" size="icon-sm" className="bg-muted">
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <ItemGroup>
-          {HOLDINGS.map((holding) => (
-            <Item key={holding.name} variant="muted">
-              <ItemContent>
-                <ItemTitle>{holding.name}</ItemTitle>
-                <ItemDescription>{holding.shares}</ItemDescription>
-              </ItemContent>
-              <ChartContainer config={miniChartConfig} className="hidden h-8 w-24 md:block">
-                <BarChart data={holding.data} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-                  <Bar
-                    dataKey="value"
-                    fill="var(--color-value)"
-                    radius={isRounded ? [3, 3, 0, 0] : 0}
-                  />
-                </BarChart>
-              </ChartContainer>
-              <span className="hidden text-sm font-semibold tabular-nums md:block">
-                {holding.amount}
-              </span>
-            </Item>
-          ))}
-        </ItemGroup>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/empty-connect-bank.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/empty-connect-bank.tsx
deleted file mode 100644
index 9f37a47ed..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/empty-connect-bank.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { Card, CardContent } from "@voidhash/ui";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function EmptyConnectBank() {
-  return (
-    <Card>
-      <CardContent>
-        <Empty className="p-4">
-          <EmptyMedia variant="icon">
-            <IconPlaceholder
-              lucide="CreditCardIcon"
-              tabler="IconCreditCard"
-              hugeicons="CreditCardIcon"
-              phosphor="CreditCardIcon"
-              remixicon="RiBankCardLine"
-            />
-          </EmptyMedia>
-          <EmptyHeader>
-            <EmptyTitle>Connect Bank</EmptyTitle>
-            <EmptyDescription>
-              Link your payout method to receive monthly royalty distributions automatically.
-            </EmptyDescription>
-          </EmptyHeader>
-          <EmptyContent>
-            <Button>Set Up Payouts</Button>
-          </EmptyContent>
-        </Empty>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/empty-distribute-track.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/empty-distribute-track.tsx
deleted file mode 100644
index 7f79c0ed0..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/empty-distribute-track.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { Card, CardContent } from "@voidhash/ui";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function EmptyDistributeTrack() {
-  return (
-    <Card>
-      <CardContent>
-        <Empty className="p-4">
-          <EmptyMedia variant="icon">
-            <IconPlaceholder
-              lucide="PlusIcon"
-              tabler="IconPlus"
-              hugeicons="Add01Icon"
-              phosphor="PlusIcon"
-              remixicon="RiAddLine"
-            />
-          </EmptyMedia>
-          <EmptyHeader>
-            <EmptyTitle>Distribute Track</EmptyTitle>
-            <EmptyDescription>
-              Upload your first master to start reaching listeners on Spotify, Apple Music, and
-              more.
-            </EmptyDescription>
-          </EmptyHeader>
-          <EmptyContent>
-            <Button>Create Release</Button>
-          </EmptyContent>
-        </Empty>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/empty-explore-catalog.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/empty-explore-catalog.tsx
deleted file mode 100644
index 7411baae8..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/empty-explore-catalog.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { Card, CardContent } from "@voidhash/ui";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function EmptyExploreCatalog() {
-  return (
-    <Card>
-      <CardContent>
-        <Empty className="p-4">
-          <EmptyMedia variant="icon">
-            <IconPlaceholder
-              lucide="AudioLinesIcon"
-              tabler="IconPlayerRecordFilled"
-              hugeicons="AudioWave01Icon"
-              phosphor="RecordIcon"
-              remixicon="RiRecordCircleLine"
-            />
-          </EmptyMedia>
-          <EmptyHeader>
-            <EmptyTitle>Explore Catalog</EmptyTitle>
-            <EmptyDescription>
-              Check your ISRC codes, metadata, and visual assets before going live.
-            </EmptyDescription>
-          </EmptyHeader>
-          <EmptyContent>
-            <Button>View Catalog</Button>
-          </EmptyContent>
-        </Empty>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/faq.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/faq.tsx
deleted file mode 100644
index b895b6033..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/faq.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client";
-
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@voidhash/ui";
-import { Button } from "@voidhash/ui";
-import { Card, CardContent, CardFooter } from "@voidhash/ui";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voidhash/ui";
-
-const GENERAL_QUESTIONS = [
-  {
-    q: "How secure is my financial data with Ledger?",
-    a: "We use bank-level AES-256 encryption, SOC 2 Type II certified infrastructure, and never store your credentials. All connections use read-only access tokens. We are a SEC registered investment advisor.",
-  },
-  {
-    q: "How do I connect my bank or investment accounts?",
-    a: "Go to Settings > Linked Accounts and search for your institution. We support over 12,000 banks and brokerages via Plaid and MX.",
-  },
-  {
-    q: "Can I export my data for tax purposes?",
-    a: "Yes. Navigate to Reports > Tax Export to download a CSV or PDF summary of your transactions, dividends, and capital gains for any tax year.",
-  },
-];
-
-const SYNC_QUESTIONS = [
-  {
-    q: "How often does data refresh?",
-    a: "Connected institutions sync every six hours, and you can pull a manual refresh from the account detail view at any time.",
-  },
-  {
-    q: "Why is a transaction missing?",
-    a: "Pending transactions appear once the institution posts them. If a posted transaction is still missing after 48 hours, reconnect the account from Settings.",
-  },
-  {
-    q: "Can I import a statement manually?",
-    a: "Yes. Upload a CSV or OFX file from the account detail view and map the columns once — the mapping is remembered for later imports.",
-  },
-];
-
-const GOALS_QUESTIONS = [
-  {
-    q: "How do I set up a custom financial goal?",
-    a: "Click New Goal from the Savings Targets card. Choose a category, set a target amount and date, and we'll calculate the monthly contribution needed.",
-  },
-  {
-    q: "Can I track multiple goals at once?",
-    a: "Yes. Pro accounts can track unlimited goals. Basic accounts support up to 3 active goals.",
-  },
-  {
-    q: "How are monthly contributions calculated?",
-    a: "We divide the remaining amount by the number of months until your target date, adjusted for your current savings rate and any auto-transfer schedules.",
-  },
-];
-
-function QuestionList({ questions }: { questions: { q: string; a: string }[] }) {
-  return (
-    <Accordion type="single" collapsible defaultValue="item-0">
-      {questions.map((item, index) => (
-        <AccordionItem key={index} value={`item-${index}`}>
-          <AccordionTrigger>{item.q}</AccordionTrigger>
-          <AccordionContent>{item.a}</AccordionContent>
-        </AccordionItem>
-      ))}
-    </Accordion>
-  );
-}
-
-export function Faq() {
-  return (
-    <Card>
-      <CardContent>
-        <Tabs defaultValue="general">
-          <TabsList className="w-full">
-            <TabsTrigger value="general" className="flex-1">
-              General
-            </TabsTrigger>
-            <TabsTrigger value="sync" className="flex-1">
-              Sync
-            </TabsTrigger>
-            <TabsTrigger value="goals" className="flex-1">
-              Goals
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="general">
-            <QuestionList questions={GENERAL_QUESTIONS} />
-          </TabsContent>
-          <TabsContent value="sync">
-            <QuestionList questions={SYNC_QUESTIONS} />
-          </TabsContent>
-          <TabsContent value="goals">
-            <QuestionList questions={GOALS_QUESTIONS} />
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-      <CardFooter>
-        <Button variant="outline" className="w-full">
-          Contact Support
-        </Button>
-        <Button variant="link" className="w-full">
-          Learn More
-        </Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/front-door.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/front-door.tsx
deleted file mode 100644
index 240d3a142..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/front-door.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Badge } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function FrontDoor() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Front Door</CardTitle>
-        <CardDescription>Smart Lock Pro</CardDescription>
-        <CardAction>
-          <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-            Locked
-            <IconPlaceholder
-              lucide="LockIcon"
-              tabler="IconLock"
-              hugeicons="SquareLock02Icon"
-              phosphor="LockKeyIcon"
-              remixicon="RiLockLine"
-              className="size-4"
-            />
-          </div>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <div className="relative flex aspect-video items-center justify-center overflow-hidden rounded-lg bg-muted bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,var(--border)_10px,var(--border)_11px)]">
-          <Badge variant="destructive" className="absolute top-2 right-2">
-            Live
-          </Badge>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/index-investing.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/index-investing.tsx
deleted file mode 100644
index d5d5b2cc3..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/index-investing.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@voidhash/ui";
-
-export function IndexInvesting() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Dollar-Cost Averaging</CardTitle>
-        <CardDescription>A strategy for building wealth over time.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <CardDescription className="mt-3 text-sm leading-relaxed style-sera:mt-0">
-          <a href="#" className="underline underline-offset-4 hover:text-primary">
-            Over time
-          </a>
-          , this smooths out the average cost of your investments. When prices drop, your fixed
-          amount buys more shares. When prices rise, you buy fewer. The result is a lower average
-          cost per share compared to lump-sum investing during volatile periods.
-        </CardDescription>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/kitchen-island.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/kitchen-island.tsx
deleted file mode 100644
index db97fc696..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/kitchen-island.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "@voidhash/ui";
-import { Slider } from "@voidhash/ui";
-import { Switch } from "@voidhash/ui";
-import { ToggleGroup, ToggleGroupItem } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-const SCENES = {
-  cooking: { brightness: [90], colorTemp: [70], volume: [30], fade: [0] },
-  dining: { brightness: [50], colorTemp: [40], volume: [20], fade: [60] },
-  nightlight: { brightness: [15], colorTemp: [20], volume: [0], fade: [80] },
-  focus: { brightness: [100], colorTemp: [85], volume: [0], fade: [0] },
-} as const;
-
-export function KitchenIsland() {
-  const [enabled, setEnabled] = React.useState(true);
-  const [scene, setScene] = React.useState("cooking");
-  const [brightness, setBrightness] = React.useState([90]);
-  const [colorTemp, setColorTemp] = React.useState([70]);
-  const [volume, setVolume] = React.useState([30]);
-  const [fade, setFade] = React.useState([0]);
-
-  const handleSceneChange = (value: string) => {
-    if (!value) return;
-    setScene(value);
-    const preset = SCENES[value as keyof typeof SCENES];
-    setBrightness([...preset.brightness]);
-    setColorTemp([...preset.colorTemp]);
-    setVolume([...preset.volume]);
-    setFade([...preset.fade]);
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Kitchen Island</CardTitle>
-        <CardDescription>Hue Color Ambient</CardDescription>
-        <CardAction>
-          <Switch checked={enabled} onCheckedChange={setEnabled} />
-        </CardAction>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <span className="sr-only">Scenes</span>
-          <ToggleGroup
-            type="single"
-            value={scene}
-            onValueChange={handleSceneChange}
-            spacing={1}
-            className="flex-wrap"
-          >
-            <ToggleGroupItem value="cooking" disabled={!enabled}>
-              Cooking
-            </ToggleGroupItem>
-            <ToggleGroupItem value="dining" disabled={!enabled}>
-              Dining
-            </ToggleGroupItem>
-            <ToggleGroupItem value="nightlight" disabled={!enabled}>
-              Nightlight
-            </ToggleGroupItem>
-            <ToggleGroupItem value="focus" disabled={!enabled}>
-              Focus
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-        <ItemGroup>
-          <Item size="sm" variant="outline">
-            <ItemMedia variant="icon">
-              <IconPlaceholder
-                lucide="SunIcon"
-                tabler="IconSun"
-                hugeicons="Sun03Icon"
-                phosphor="SunIcon"
-                remixicon="RiSunLine"
-              />
-            </ItemMedia>
-            <ItemContent className="flex-row items-center gap-3">
-              <ItemTitle className="shrink-0">Brightness</ItemTitle>
-            </ItemContent>
-            <ItemActions className="flex-1">
-              <Slider
-                value={brightness}
-                onValueChange={setBrightness}
-                max={100}
-                disabled={!enabled}
-                className="w-full"
-              />
-            </ItemActions>
-          </Item>
-          <Item size="sm" variant="outline">
-            <ItemMedia variant="icon">
-              <IconPlaceholder
-                lucide="ThermometerIcon"
-                tabler="IconThermometer"
-                hugeicons="ThermometerWarmIcon"
-                phosphor="ThermometerIcon"
-                remixicon="RiThermometerLine"
-              />
-            </ItemMedia>
-            <ItemContent className="flex-row items-center gap-3">
-              <ItemTitle className="shrink-0">Color Temp</ItemTitle>
-            </ItemContent>
-            <ItemActions className="flex-1">
-              <Slider
-                value={colorTemp}
-                onValueChange={setColorTemp}
-                max={100}
-                disabled={!enabled}
-              />
-            </ItemActions>
-          </Item>
-          <Item size="sm" variant="outline">
-            <ItemMedia variant="icon">
-              <IconPlaceholder
-                lucide="Volume2Icon"
-                tabler="IconVolume"
-                hugeicons="VolumeHighIcon"
-                phosphor="SpeakerHighIcon"
-                remixicon="RiVolumeUpLine"
-              />
-            </ItemMedia>
-            <ItemContent className="flex-row items-center gap-3">
-              <ItemTitle className="shrink-0">Volume</ItemTitle>
-            </ItemContent>
-            <ItemActions className="flex-1">
-              <Slider value={volume} onValueChange={setVolume} max={100} disabled={!enabled} />
-            </ItemActions>
-          </Item>
-          <Item size="sm" variant="outline">
-            <ItemMedia variant="icon">
-              <IconPlaceholder
-                lucide="TimerIcon"
-                tabler="IconClock"
-                hugeicons="Clock03Icon"
-                phosphor="TimerIcon"
-                remixicon="RiTimerLine"
-              />
-            </ItemMedia>
-            <ItemContent className="flex-row items-center gap-3">
-              <ItemTitle className="shrink-0">Fade</ItemTitle>
-            </ItemContent>
-            <ItemActions className="flex-1">
-              <Slider value={fade} onValueChange={setFade} max={100} disabled={!enabled} />
-            </ItemActions>
-          </Item>
-        </ItemGroup>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/loading-card.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/loading-card.tsx
deleted file mode 100644
index 38dc57158..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/loading-card.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Card, CardContent, CardHeader } from "@voidhash/ui";
-import { Skeleton } from "@voidhash/ui";
-
-export function LoadingCard() {
-  return (
-    <Card>
-      <CardHeader>
-        <Skeleton className="h-5 w-32" />
-        <Skeleton className="h-4 w-48" />
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <Skeleton className="h-32 w-full rounded-lg" />
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-4 w-1/2" />
-        </div>
-        <div className="flex gap-2">
-          <Skeleton className="h-9 flex-1 rounded-md" />
-          <Skeleton className="h-9 flex-1 rounded-md" />
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/new-milestone.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/new-milestone.tsx
deleted file mode 100644
index 0bc6c3d2f..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/new-milestone.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Field, FieldGroup, FieldLabel } from "@voidhash/ui";
-import { Input } from "@voidhash/ui";
-
-export function NewMilestone() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Set a new milestone</CardTitle>
-        <CardDescription>
-          Define your financial target and we&apos;ll help you pace your savings.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="goal-name">Goal Name</FieldLabel>
-            <Input id="goal-name" placeholder="e.g. New Car, Home Downpayment" />
-          </Field>
-          <div className="grid grid-cols-2 gap-3">
-            <Field>
-              <FieldLabel htmlFor="target-amount">Target Amount</FieldLabel>
-              <Input id="target-amount" defaultValue="$15,000" />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="target-date">Target Date</FieldLabel>
-              <Input id="target-date" defaultValue="Dec 2025" />
-            </Field>
-          </div>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <Button className="w-full">Create Goal</Button>
-        <Button variant="outline" className="w-full">
-          Cancel
-        </Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/notification-settings.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/notification-settings.tsx
deleted file mode 100644
index 3074bebb6..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/notification-settings.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Checkbox } from "@voidhash/ui";
-import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from "@voidhash/ui";
-
-const NOTIFICATIONS = [
-  {
-    id: "transactions",
-    label: "Transaction alerts",
-    description: "Deposits, withdrawals, and transfers.",
-    defaultChecked: true,
-  },
-  {
-    id: "security",
-    label: "Security alerts",
-    description: "Login attempts and account changes.",
-    defaultChecked: true,
-  },
-  {
-    id: "goals",
-    label: "Goal milestones",
-    description: "Updates at 25%, 50%, 75%, and 100%.",
-    defaultChecked: false,
-  },
-  {
-    id: "market",
-    label: "Market updates",
-    description: "Daily portfolio summary and price alerts.",
-    defaultChecked: false,
-  },
-];
-
-export function NotificationSettings() {
-  const [checked, setChecked] = React.useState<Record<string, boolean>>(
-    Object.fromEntries(NOTIFICATIONS.map((n) => [n.id, n.defaultChecked])),
-  );
-
-  const allChecked = NOTIFICATIONS.every((n) => checked[n.id]);
-  const someChecked = NOTIFICATIONS.some((n) => checked[n.id]) && !allChecked;
-
-  const handleSelectAll = (value: boolean) => {
-    setChecked(Object.fromEntries(NOTIFICATIONS.map((n) => [n.id, value])));
-  };
-
-  const handleToggle = (id: string, value: boolean) => {
-    setChecked((prev) => ({ ...prev, [id]: value }));
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>Choose what you want to be notified about.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field orientation="horizontal">
-            <Checkbox
-              id="notify-all"
-              checked={someChecked ? "indeterminate" : allChecked}
-              onCheckedChange={(v) => handleSelectAll(!!v)}
-            />
-            <FieldContent>
-              <FieldLabel htmlFor="notify-all">Select all</FieldLabel>
-            </FieldContent>
-          </Field>
-          {NOTIFICATIONS.map((n) => (
-            <Field key={n.id} orientation="horizontal">
-              <Checkbox
-                id={`notify-${n.id}`}
-                checked={checked[n.id]}
-                onCheckedChange={(v) => handleToggle(n.id, !!v)}
-              />
-              <FieldContent>
-                <FieldLabel htmlFor={`notify-${n.id}`}>{n.label}</FieldLabel>
-                <FieldDescription>{n.description}</FieldDescription>
-              </FieldContent>
-            </Field>
-          ))}
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Save Preferences</Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/payments.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/payments.tsx
deleted file mode 100644
index 0e7be017d..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/payments.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-"use client";
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@voidhash/ui";
-import { Button } from "@voidhash/ui";
-import { Card, CardContent, CardHeader } from "@voidhash/ui";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@voidhash/ui";
-import { Item, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function Payments() {
-  return (
-    <Card>
-      <CardHeader className="flex flex-col gap-3">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="#">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button size="icon-sm" variant="ghost">
-                    <IconPlaceholder
-                      lucide="MoreHorizontalIcon"
-                      tabler="IconDots"
-                      hugeicons="MoreHorizontalCircle01Icon"
-                      phosphor="DotsThreeIcon"
-                      remixicon="RiMoreLine"
-                    />
-                    <span className="sr-only">Account options</span>
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem>Profile</DropdownMenuItem>
-                    <DropdownMenuItem>Statements</DropdownMenuItem>
-                    <DropdownMenuItem>Documents</DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Payments</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </CardHeader>
-      <CardContent>
-        <ItemGroup>
-          <Item asChild variant="muted">
-            <a href="#">
-              <ItemMedia variant="icon">
-                <IconPlaceholder
-                  lucide="GaugeIcon"
-                  tabler="IconGauge"
-                  hugeicons="Settings01Icon"
-                  phosphor="GaugeIcon"
-                  remixicon="RiDashboardLine"
-                />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Change transfer limit</ItemTitle>
-                <ItemDescription>Adjust how much you can send from your balance.</ItemDescription>
-              </ItemContent>
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRight01Icon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
-                className="size-4 shrink-0 text-muted-foreground"
-              />
-            </a>
-          </Item>
-          <Item asChild variant="muted">
-            <a href="#">
-              <ItemMedia variant="icon">
-                <IconPlaceholder
-                  lucide="CalendarIcon"
-                  tabler="IconCalendar"
-                  hugeicons="Calendar03Icon"
-                  phosphor="CalendarIcon"
-                  remixicon="RiCalendarLine"
-                />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Scheduled transfers</ItemTitle>
-                <ItemDescription>Set up a transfer to send at a later date.</ItemDescription>
-              </ItemContent>
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRight01Icon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
-                className="size-4 shrink-0 text-muted-foreground"
-              />
-            </a>
-          </Item>
-          <Item asChild variant="muted">
-            <a href="#">
-              <ItemMedia variant="icon">
-                <IconPlaceholder
-                  lucide="RepeatIcon"
-                  tabler="IconRepeat"
-                  hugeicons="RepeatIcon"
-                  phosphor="RepeatIcon"
-                  remixicon="RiRepeatLine"
-                />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Direct Debits</ItemTitle>
-                <ItemDescription>Set up and manage regular payments.</ItemDescription>
-              </ItemContent>
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRight01Icon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
-                className="size-4 shrink-0 text-muted-foreground"
-              />
-            </a>
-          </Item>
-          <Item asChild variant="muted">
-            <a href="#">
-              <ItemMedia variant="icon">
-                <IconPlaceholder
-                  lucide="RefreshCwIcon"
-                  tabler="IconRefresh"
-                  hugeicons="RepeatIcon"
-                  phosphor="ArrowsClockwiseIcon"
-                  remixicon="RiRefreshLine"
-                />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Recurring card payments</ItemTitle>
-                <ItemDescription>Manage your repeated card transactions.</ItemDescription>
-              </ItemContent>
-              <IconPlaceholder
-                lucide="ChevronRightIcon"
-                tabler="IconChevronRight"
-                hugeicons="ArrowRight01Icon"
-                phosphor="CaretRightIcon"
-                remixicon="RiArrowRightSLine"
-                className="size-4 shrink-0 text-muted-foreground"
-              />
-            </a>
-          </Item>
-        </ItemGroup>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/payout-threshold.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/payout-threshold.tsx
deleted file mode 100644
index a8a402735..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/payout-threshold.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Field, FieldDescription, FieldGroup, FieldLabel } from "@voidhash/ui";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@voidhash/ui";
-import { Slider } from "@voidhash/ui";
-import { Textarea } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function PayoutThreshold() {
-  const [amount, setAmount] = React.useState([2500]);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Payout Threshold</CardTitle>
-        <CardDescription>
-          Set the minimum balance required before a payout is triggered.
-        </CardDescription>
-        <CardAction>
-          <Button variant="ghost" size="icon-sm" className="bg-muted">
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="preferred-currency">Preferred Currency</FieldLabel>
-            <Select defaultValue="usd">
-              <SelectTrigger id="preferred-currency" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value="usd">USD — United States Dollar</SelectItem>
-                  <SelectItem value="eur">EUR — Euro</SelectItem>
-                  <SelectItem value="gbp">GBP — British Pound</SelectItem>
-                  <SelectItem value="jpy">JPY — Japanese Yen</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </Field>
-          <Field>
-            <div className="flex items-baseline justify-between">
-              <FieldLabel htmlFor="min-payout">Minimum Payout Amount</FieldLabel>
-              <span className="text-2xl font-semibold tabular-nums">${amount[0].toFixed(2)}</span>
-            </div>
-            <Slider
-              id="min-payout"
-              value={amount}
-              onValueChange={setAmount}
-              min={50}
-              max={10000}
-              step={50}
-            />
-            <div className="flex items-center justify-between">
-              <FieldDescription>$50 (MIN)</FieldDescription>
-              <FieldDescription>$10,000 (MAX)</FieldDescription>
-            </div>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="payout-notes">Notes</FieldLabel>
-            <Textarea
-              id="payout-notes"
-              placeholder="Add any notes for this payout configuration..."
-              className="min-h-[100px]"
-            />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Save Threshold</Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/power-usage.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/power-usage.tsx
deleted file mode 100644
index d5cdc2426..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/power-usage.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { Bar, BarChart, XAxis } from "recharts";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@voidhash/ui";
-import { Progress } from "@voidhash/ui";
-import { Separator } from "@voidhash/ui";
-import { useDesignSystemSearchParams } from "../preview-config";
-
-const chartData = [
-  { hour: "6a", usage: 1.2 },
-  { hour: "8a", usage: 2.8 },
-  { hour: "10a", usage: 3.1 },
-  { hour: "12p", usage: 2.4 },
-  { hour: "2p", usage: 3.4 },
-  { hour: "4p", usage: 2.9 },
-  { hour: "6p", usage: 3.8 },
-  { hour: "8p", usage: 3.2 },
-];
-
-const chartConfig = {
-  usage: {
-    label: "Usage (kW)",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig;
-
-export function PowerUsage() {
-  const [params] = useDesignSystemSearchParams();
-  const isRounded = !["lyra", "sera"].includes(params.style);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Power Usage</CardTitle>
-        <CardDescription>Whole Home</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <ChartContainer config={chartConfig} className="h-[140px] w-full">
-          <BarChart data={chartData} margin={{ left: 0, right: 0, top: 4, bottom: 0 }}>
-            <XAxis
-              dataKey="hour"
-              tickLine={false}
-              tickMargin={6}
-              axisLine={false}
-              className="text-xs"
-            />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-            <Bar dataKey="usage" fill="var(--color-usage)" radius={isRounded ? [4, 4, 0, 0] : 0} />
-          </BarChart>
-        </ChartContainer>
-        <Separator />
-        <div className="grid grid-cols-2 gap-4">
-          <div className="flex flex-col gap-0.5">
-            <span className="text-sm text-muted-foreground">Currently Using</span>
-            <span className="text-lg font-semibold tabular-nums">3.4 kW</span>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            <span className="text-sm text-muted-foreground">Solar Gen</span>
-            <span className="text-lg font-semibold text-chart-1 tabular-nums">+1.2 kW</span>
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-1">
-        <span className="text-sm text-muted-foreground">Battery Level</span>
-        <div className="flex w-full items-center gap-2">
-          <Progress value={85} className="flex-1" />
-          <span className="text-sm font-medium tabular-nums">85%</span>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/preferences.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/preferences.tsx
deleted file mode 100644
index b7f37da80..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/preferences.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldSeparator,
-} from "@voidhash/ui";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@voidhash/ui";
-import { Switch } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function Preferences() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Preferences</CardTitle>
-        <CardDescription>Manage your account settings and notifications.</CardDescription>
-        <CardAction>
-          <Button variant="ghost" size="icon-sm" className="bg-muted">
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="default-currency">Default Currency</FieldLabel>
-            <Select defaultValue="usd">
-              <SelectTrigger id="default-currency" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value="usd">USD — United States Dollar</SelectItem>
-                  <SelectItem value="eur">EUR — Euro</SelectItem>
-                  <SelectItem value="gbp">GBP — British Pound</SelectItem>
-                  <SelectItem value="jpy">JPY — Japanese Yen</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </Field>
-          <FieldSeparator className="-my-4 style-sera:hidden" />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="public-statistics">Public Statistics</FieldLabel>
-              <FieldDescription>
-                Allow others to see your total stream count and listening activity
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="public-statistics" defaultChecked />
-          </Field>
-          <FieldSeparator className="-my-4 style-sera:hidden" />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="email-notifications">Email Notifications</FieldLabel>
-              <FieldDescription>Monthly royalty reports and distribution updates</FieldDescription>
-            </FieldContent>
-            <Switch id="email-notifications" defaultChecked />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button variant="outline">Reset</Button>
-        <Button className="ml-auto">Save Preferences</Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/project-actions.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/project-actions.tsx
deleted file mode 100644
index 2134d675a..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/project-actions.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function ProjectActions() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Project Actions</CardTitle>
-        <CardDescription>Manage and publish your current project.</CardDescription>
-      </CardHeader>
-      <CardContent className="overflow-x-auto">
-        <div className="flex min-w-max items-center gap-2">
-          <Button variant="ghost" size="icon-sm" aria-label="More actions">
-            <IconPlaceholder
-              lucide="MoreHorizontalIcon"
-              tabler="IconDots"
-              hugeicons="MoreHorizontalCircle01Icon"
-              phosphor="DotsThreeIcon"
-              remixicon="RiMoreLine"
-            />
-          </Button>
-          <Button variant="outline" size="icon-sm" aria-label="Filter project">
-            <IconPlaceholder
-              lucide="ListFilterIcon"
-              tabler="IconFilter"
-              hugeicons="FilterHorizontalIcon"
-              phosphor="FunnelIcon"
-              remixicon="RiFilter3Line"
-            />
-          </Button>
-          <Button variant="outline" size="sm">
-            <IconPlaceholder
-              lucide="PlusIcon"
-              tabler="IconPlus"
-              hugeicons="Add01Icon"
-              phosphor="PlusIcon"
-              remixicon="RiAddLine"
-              data-icon="inline-start"
-            />
-            Add
-          </Button>
-
-          <Button variant="ghost" size="sm">
-            Cancel
-          </Button>
-          <Button variant="outline" size="sm">
-            Preview
-          </Button>
-          <Button variant="outline" size="sm">
-            Copy
-          </Button>
-          <Button size="sm">Publish</Button>
-
-          <ToggleGroup type="single" defaultValue="grid">
-            <ToggleGroupItem value="list" aria-label="List view">
-              <IconPlaceholder
-                lucide="ListIcon"
-                tabler="IconList"
-                hugeicons="LeftToRightListBulletIcon"
-                phosphor="ListBulletsIcon"
-                remixicon="RiListUnordered"
-              />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="grid" aria-label="Grid view">
-              <IconPlaceholder
-                lucide="LayoutGridIcon"
-                tabler="IconLayoutGrid"
-                hugeicons="GridViewIcon"
-                phosphor="GridFourIcon"
-                remixicon="RiGridFill"
-              />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="columns" aria-label="Columns view">
-              <IconPlaceholder
-                lucide="Columns3Icon"
-                tabler="IconColumns3"
-                hugeicons="Layout3ColumnIcon"
-                phosphor="ColumnsIcon"
-                remixicon="RiLayoutColumnLine"
-              />
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/qr-connect.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/qr-connect.tsx
deleted file mode 100644
index da6d2b02b..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/qr-connect.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import QRCode from "react-qr-code";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-
-export function QrConnect() {
-  return (
-    <Card>
-      <CardContent className="flex justify-center pt-6">
-        <div className="rounded-xl border bg-white p-4">
-          <QRCode value="https://ledger.app/connect/jd-4829" size={160} level="M" />
-        </div>
-      </CardContent>
-      <CardHeader className="text-center">
-        <CardTitle>Scan to connect your mobile device</CardTitle>
-        <CardDescription>
-          Open the Ledger mobile app and scan this code to link your device.
-        </CardDescription>
-      </CardHeader>
-      <CardFooter>
-        <Button variant="outline" className="w-full">
-          Got it
-        </Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/receiving-method.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/receiving-method.tsx
deleted file mode 100644
index 4c6849ccb..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/receiving-method.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-  FieldTitle,
-} from "@voidhash/ui";
-import { Input } from "@voidhash/ui";
-import { RadioGroup, RadioGroupItem } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function ReceivingMethod() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardDescription>Payout Preferences</CardDescription>
-        <CardTitle>Receiving Method</CardTitle>
-        <CardAction>
-          <Button variant="ghost" size="icon-sm" className="bg-muted">
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="account-holder">Account Holder Name</FieldLabel>
-            <Input id="account-holder" defaultValue="Synthetic Horizons Music LLC" />
-          </Field>
-          <FieldSet>
-            <FieldLegend variant="label">Receiving Method</FieldLegend>
-            <RadioGroup
-              defaultValue="bank"
-              className="grid grid-cols-1 items-start gap-3 md:grid-cols-2 style-sera:grid-cols-1"
-            >
-              <FieldLabel htmlFor="method-bank">
-                <Field orientation="horizontal" className="pb-2.5">
-                  <RadioGroupItem value="bank" id="method-bank" />
-                  <FieldContent>
-                    <FieldTitle>Bank Transfer</FieldTitle>
-                    <FieldDescription>SWIFT / IBAN</FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="method-paypal">
-                <Field orientation="horizontal" className="pb-2.5">
-                  <RadioGroupItem value="paypal" id="method-paypal" />
-                  <FieldContent>
-                    <FieldTitle>PayPal</FieldTitle>
-                    <FieldDescription className="line-clamp-1">Instant Payout</FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <Field>
-            <FieldLabel htmlFor="iban">IBAN / Account Number</FieldLabel>
-            <Input id="iban" placeholder="DE89 3704 0044 ...." />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full" disabled>
-          Save Payout Settings
-        </Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/recent-transactions.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/recent-transactions.tsx
deleted file mode 100644
index ce77ee3cb..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/recent-transactions.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@voidhash/ui";
-import { Table, TableBody, TableCell, TableRow } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function RecentTransactions() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Recent Transactions</CardTitle>
-        <CardDescription>Your latest account activity.</CardDescription>
-        <CardAction>
-          <Button variant="outline" size="sm">
-            View All
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell className="w-10">
-                <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
-                  <IconPlaceholder
-                    className="size-4 shrink-0"
-                    lucide="CoffeeIcon"
-                    tabler="IconCoffee"
-                    hugeicons="CoffeeIcon"
-                    phosphor="CoffeeIcon"
-                    remixicon="RiCupLine"
-                  />
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className="flex flex-col">
-                  <span className="font-medium">Blue Bottle Coffee</span>
-                  <span className="text-sm text-muted-foreground">Food & Drink</span>
-                </div>
-              </TableCell>
-              <TableCell className="text-sm text-muted-foreground">Today, 10:24 AM</TableCell>
-              <TableCell className="text-right">
-                <span className="text-sm font-semibold tabular-nums">-$6.50</span>
-              </TableCell>
-              <TableCell className="w-8">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon-sm">
-                      <IconPlaceholder
-                        lucide="MoreHorizontalIcon"
-                        tabler="IconDotsVertical"
-                        hugeicons="MoreVerticalCircle01Icon"
-                        phosphor="DotsThreeIcon"
-                        remixicon="RiMore2Line"
-                      />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View details</DropdownMenuItem>
-                    <DropdownMenuItem>Add note</DropdownMenuItem>
-                    <DropdownMenuItem>Categorize</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Dispute</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="w-10">
-                <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
-                  <IconPlaceholder
-                    className="size-4 shrink-0"
-                    lucide="ShoppingCartIcon"
-                    tabler="IconShoppingCart"
-                    hugeicons="ShoppingCart01Icon"
-                    phosphor="ShoppingCartIcon"
-                    remixicon="RiShoppingCartLine"
-                  />
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className="flex flex-col">
-                  <span className="font-medium">Whole Foods Market</span>
-                  <span className="text-sm text-muted-foreground">Groceries</span>
-                </div>
-              </TableCell>
-              <TableCell className="text-sm text-muted-foreground">Yesterday</TableCell>
-              <TableCell className="text-right">
-                <span className="text-sm font-semibold tabular-nums">-$142.30</span>
-              </TableCell>
-              <TableCell className="w-8">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon-sm">
-                      <IconPlaceholder
-                        lucide="MoreHorizontalIcon"
-                        tabler="IconDotsVertical"
-                        hugeicons="MoreVerticalCircle01Icon"
-                        phosphor="DotsThreeIcon"
-                        remixicon="RiMore2Line"
-                      />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View details</DropdownMenuItem>
-                    <DropdownMenuItem>Add note</DropdownMenuItem>
-                    <DropdownMenuItem>Categorize</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Dispute</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="w-10">
-                <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
-                  <IconPlaceholder
-                    className="size-4 shrink-0"
-                    lucide="WalletIcon"
-                    tabler="IconWallet"
-                    hugeicons="Wallet01Icon"
-                    phosphor="WalletIcon"
-                    remixicon="RiWalletLine"
-                  />
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className="flex flex-col">
-                  <span className="font-medium">Stripe Payout</span>
-                  <span className="text-sm text-muted-foreground">Income</span>
-                </div>
-              </TableCell>
-              <TableCell className="text-sm text-muted-foreground">Oct 12</TableCell>
-              <TableCell className="text-right">
-                <span className="text-sm font-semibold text-emerald-500 tabular-nums">
-                  +$4,200.00
-                </span>
-              </TableCell>
-              <TableCell className="w-8">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon-sm">
-                      <IconPlaceholder
-                        lucide="MoreHorizontalIcon"
-                        tabler="IconDotsVertical"
-                        hugeicons="MoreVerticalCircle01Icon"
-                        phosphor="DotsThreeIcon"
-                        remixicon="RiMore2Line"
-                      />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View details</DropdownMenuItem>
-                    <DropdownMenuItem>Add note</DropdownMenuItem>
-                    <DropdownMenuItem>Categorize</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Dispute</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="w-10">
-                <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
-                  <IconPlaceholder
-                    className="size-4 shrink-0"
-                    lucide="CarIcon"
-                    tabler="IconCar"
-                    hugeicons="Car01Icon"
-                    phosphor="CarIcon"
-                    remixicon="RiCarLine"
-                  />
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className="flex flex-col">
-                  <span className="font-medium">Uber Technologies</span>
-                  <span className="text-sm text-muted-foreground">Transport</span>
-                </div>
-              </TableCell>
-              <TableCell className="text-sm text-muted-foreground">Oct 11</TableCell>
-              <TableCell className="text-right">
-                <span className="text-sm font-semibold tabular-nums">-$24.10</span>
-              </TableCell>
-              <TableCell className="w-8">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon-sm">
-                      <IconPlaceholder
-                        lucide="MoreHorizontalIcon"
-                        tabler="IconDotsVertical"
-                        hugeicons="MoreVerticalCircle01Icon"
-                        phosphor="DotsThreeIcon"
-                        remixicon="RiMore2Line"
-                      />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View details</DropdownMenuItem>
-                    <DropdownMenuItem>Add note</DropdownMenuItem>
-                    <DropdownMenuItem>Categorize</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Dispute</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="w-10">
-                <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
-                  <IconPlaceholder
-                    className="size-4 shrink-0"
-                    lucide="TvIcon"
-                    tabler="IconDeviceTv"
-                    hugeicons="Tv01Icon"
-                    phosphor="TelevisionIcon"
-                    remixicon="RiTvLine"
-                  />
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className="flex flex-col">
-                  <span className="font-medium">Netflix Subscription</span>
-                  <span className="text-sm text-muted-foreground">Entertainment</span>
-                </div>
-              </TableCell>
-              <TableCell className="text-sm text-muted-foreground">Oct 10</TableCell>
-              <TableCell className="text-right">
-                <span className="text-sm font-semibold tabular-nums">-$19.99</span>
-              </TableCell>
-              <TableCell className="w-8">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon-sm">
-                      <IconPlaceholder
-                        lucide="MoreHorizontalIcon"
-                        tabler="IconDotsVertical"
-                        hugeicons="MoreVerticalCircle01Icon"
-                        phosphor="DotsThreeIcon"
-                        remixicon="RiMore2Line"
-                      />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View details</DropdownMenuItem>
-                    <DropdownMenuItem>Add note</DropdownMenuItem>
-                    <DropdownMenuItem>Categorize</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Dispute</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/release-catalog.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/release-catalog.tsx
deleted file mode 100644
index 6be85e158..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/release-catalog.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import { Badge } from "@voidhash/ui";
-import { Card, CardContent, CardHeader } from "@voidhash/ui";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "@voidhash/ui";
-import { Item, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@voidhash/ui";
-import { ToggleGroup, ToggleGroupItem } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-const HOLDINGS = [
-  {
-    ticker: "VOO",
-    name: "Vanguard S&P 500 ETF",
-    type: "ETF",
-    added: "Jan 2021",
-    shares: "112",
-    value: "$48,230.40",
-  },
-  {
-    ticker: "VIG",
-    name: "Vanguard Dividend Appreciation",
-    type: "ETF",
-    added: "Mar 2022",
-    shares: "450",
-    value: "$26,033.79",
-  },
-  {
-    ticker: "AAPL",
-    name: "Apple Inc.",
-    type: "Stock",
-    added: "Nov 2020",
-    shares: "85",
-    value: "$18,488.90",
-  },
-  {
-    ticker: "O",
-    name: "Realty Income Corp",
-    type: "REIT",
-    added: "Jun 2023",
-    shares: "320",
-    value: "$15,136.59",
-  },
-];
-
-export function ReleaseCatalog() {
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between gap-3">
-          <InputGroup className="max-w-sm">
-            <InputGroupAddon>
-              <IconPlaceholder
-                lucide="SearchIcon"
-                tabler="IconSearch"
-                hugeicons="Search01Icon"
-                phosphor="MagnifyingGlassIcon"
-                remixicon="RiSearchLine"
-              />
-            </InputGroupAddon>
-            <InputGroupInput placeholder="Search holdings or tickers..." />
-          </InputGroup>
-          <ToggleGroup type="single" defaultValue="etfs" spacing={1}>
-            <ToggleGroupItem value="stocks">Stocks</ToggleGroupItem>
-            <ToggleGroupItem value="etfs">ETFs</ToggleGroupItem>
-            <ToggleGroupItem value="reits">REITs</ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <ItemGroup>
-          {HOLDINGS.map((holding) => (
-            <Item key={holding.ticker} variant="muted">
-              <ItemMedia>
-                <div className="flex size-12 items-center justify-center rounded-lg border text-sm font-semibold">
-                  {holding.ticker}
-                </div>
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>{holding.name}</ItemTitle>
-                <ItemDescription className="text-xs tracking-wider uppercase">
-                  {holding.shares} Shares · {holding.added}
-                </ItemDescription>
-              </ItemContent>
-              <div className="flex shrink-0 items-center gap-6">
-                <Badge variant="outline">{holding.type}</Badge>
-                <div className="flex flex-col items-end gap-0.5">
-                  <span className="text-xs tracking-wider text-muted-foreground uppercase">
-                    Value
-                  </span>
-                  <span className="font-medium tabular-nums">{holding.value}</span>
-                </div>
-              </div>
-            </Item>
-          ))}
-        </ItemGroup>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/roller-shades.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/roller-shades.tsx
deleted file mode 100644
index 9bd1136f2..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/roller-shades.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Slider } from "@voidhash/ui";
-import { ToggleGroup, ToggleGroupItem } from "@voidhash/ui";
-
-export function RollerShades() {
-  const [position, setPosition] = React.useState([50]);
-
-  const preset = position[0] <= 10 ? "open" : position[0] >= 90 ? "closed" : "half";
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Living Room</CardTitle>
-        <CardDescription>Roller Shades</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="flex h-32 flex-col overflow-hidden rounded-lg border bg-muted">
-          <div
-            className="bg-muted-foreground transition-all duration-300"
-            style={{ height: `${position[0]}%` }}
-          />
-        </div>
-        <div className="flex items-center gap-3">
-          <span className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
-            Open
-          </span>
-          <Slider value={position} onValueChange={setPosition} max={100} className="flex-1" />
-          <span className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
-            Close
-          </span>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <ToggleGroup
-          type="single"
-          value={preset}
-          onValueChange={(value) => {
-            if (value === "open") setPosition([0]);
-            if (value === "half") setPosition([50]);
-            if (value === "closed") setPosition([100]);
-          }}
-          spacing={1}
-          className="w-full"
-        >
-          <ToggleGroupItem value="open" className="flex-1">
-            Open
-          </ToggleGroupItem>
-          <ToggleGroupItem value="half" className="flex-1">
-            Half
-          </ToggleGroupItem>
-          <ToggleGroupItem value="closed" className="flex-1">
-            Closed
-          </ToggleGroupItem>
-        </ToggleGroup>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/savings-progress.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/savings-progress.tsx
deleted file mode 100644
index aad759d97..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/savings-progress.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-
-import { Label, Pie, PieChart } from "recharts";
-
-import { Card, CardContent, CardFooter } from "@voidhash/ui";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@voidhash/ui";
-import { Separator } from "@voidhash/ui";
-
-const chartData = [
-  { name: "saved", value: 24000, fill: "var(--color-saved)" },
-  { name: "remaining", value: 6000, fill: "var(--color-remaining)" },
-];
-
-const chartConfig = {
-  saved: {
-    label: "Saved",
-    color: "var(--chart-2)",
-  },
-  remaining: {
-    label: "Remaining",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig;
-
-export function SavingsProgress() {
-  return (
-    <Card>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[220px]">
-          <PieChart>
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-            <Pie
-              data={chartData}
-              dataKey="value"
-              nameKey="name"
-              innerRadius={70}
-              outerRadius={95}
-              strokeWidth={0}
-              startAngle={90}
-              endAngle={-270}
-            >
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) - 12}
-                          className="fill-foreground text-2xl font-bold"
-                        >
-                          $24,000
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 12}
-                          className="fill-muted-foreground text-xs"
-                        >
-                          80% of $30,000
-                        </tspan>
-                      </text>
-                    );
-                  }
-                }}
-              />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-0">
-        <div className="flex w-full items-center justify-between py-3">
-          <span className="text-sm text-muted-foreground">Projected Finish</span>
-          <span className="text-sm font-semibold">October 2024</span>
-        </div>
-        <Separator />
-        <div className="flex w-full items-center justify-between py-3">
-          <span className="text-sm text-muted-foreground">Monthly Average</span>
-          <span className="text-sm font-semibold tabular-nums">$1,250</span>
-        </div>
-        <Separator />
-        <div className="flex w-full items-center justify-between py-3">
-          <span className="text-sm text-muted-foreground">Top Contributor</span>
-          <span className="text-sm font-semibold">Auto-Transfer</span>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/savings-targets.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/savings-targets.tsx
deleted file mode 100644
index 5d1ceb7c7..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/savings-targets.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Field, FieldDescription, FieldGroup, FieldLabel } from "@voidhash/ui";
-import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@voidhash/ui";
-import { Item, ItemContent, ItemDescription, ItemFooter, ItemGroup } from "@voidhash/ui";
-import { NativeSelect, NativeSelectOption } from "@voidhash/ui";
-import { Progress } from "@voidhash/ui";
-
-export function SavingsTargets() {
-  return (
-    <div className="grid grid-cols-2 gap-(--gap)">
-      <Card>
-        <CardHeader>
-          <CardTitle>Savings Targets</CardTitle>
-          <CardDescription>Active milestones for 2024</CardDescription>
-          <CardAction>
-            <Button variant="outline" size="sm">
-              New Goal
-            </Button>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <ItemGroup className="gap-3">
-            <Item variant="muted" className="flex-col items-stretch">
-              <ItemContent className="gap-3">
-                <ItemDescription className="cn-font-heading text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                  Retirement
-                </ItemDescription>
-                <span className="text-3xl font-semibold tabular-nums">$420,000</span>
-                <Progress value={65} />
-              </ItemContent>
-              <ItemFooter>
-                <span className="text-sm text-muted-foreground">65% achieved</span>
-                <span className="text-sm font-medium tabular-nums">$273,000</span>
-              </ItemFooter>
-            </Item>
-            <Item variant="muted" className="flex-col items-stretch">
-              <ItemContent className="gap-3">
-                <ItemDescription className="cn-font-heading text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                  Real Estate
-                </ItemDescription>
-                <span className="text-3xl font-semibold tabular-nums">$85,000</span>
-                <Progress value={32} />
-              </ItemContent>
-              <ItemFooter>
-                <span className="text-sm text-muted-foreground">32% achieved</span>
-                <span className="text-sm font-medium tabular-nums">$27,200</span>
-              </ItemFooter>
-            </Item>
-          </ItemGroup>
-        </CardContent>
-        <CardFooter>
-          <CardDescription className="text-center">
-            You have not met your targets for this year.
-          </CardDescription>
-        </CardFooter>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Buy Investment</CardTitle>
-          <CardAction>
-            <Button variant="outline" size="sm">
-              View Orders
-            </Button>
-          </CardAction>
-        </CardHeader>
-        <CardContent className="flex flex-1 flex-col gap-3">
-          <FieldGroup className="flex-1">
-            <Field>
-              <FieldLabel htmlFor="invest-amount">Amount to Invest</FieldLabel>
-              <InputGroup>
-                <InputGroupAddon>
-                  <InputGroupText>$</InputGroupText>
-                </InputGroupAddon>
-                <InputGroupInput id="invest-amount" defaultValue="1,000.00" />
-              </InputGroup>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="invest-type">Order Type</FieldLabel>
-              <NativeSelect id="invest-type" defaultValue="market">
-                <NativeSelectOption value="market">Market Order</NativeSelectOption>
-                <NativeSelectOption value="limit">Limit Order</NativeSelectOption>
-                <NativeSelectOption value="stop">Stop Order</NativeSelectOption>
-              </NativeSelect>
-              <FieldDescription>Market orders execute at the current price.</FieldDescription>
-            </Field>
-            <div className="flex flex-col gap-2">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Estimated Shares</span>
-                <span className="text-sm font-semibold tabular-nums">1.95</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Buying Power</span>
-                <span className="text-sm font-semibold tabular-nums">$12,450.00</span>
-              </div>
-            </div>
-          </FieldGroup>
-        </CardContent>
-        <CardFooter className="flex-col gap-3">
-          <Button className="w-full">Review Order</Button>
-          <CardDescription className="text-center">
-            Trades are typically executed within minutes during market hours.
-          </CardDescription>
-        </CardFooter>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/sidebar-nav.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/sidebar-nav.tsx
deleted file mode 100644
index ab3e6b1b9..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/sidebar-nav.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-"use client";
-
-import { Card } from "@voidhash/ui";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarSeparator,
-} from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function SidebarNav() {
-  return (
-    <div className="grid grid-cols-2 items-start gap-6">
-      <Card className="overflow-hidden py-0">
-        <SidebarProvider className="min-h-0">
-          <Sidebar collapsible="none" className="w-full bg-transparent">
-            <SidebarContent className="gap-0">
-              <SidebarGroup className="pb-1">
-                <SidebarGroupLabel>Overview</SidebarGroupLabel>
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton isActive>
-                        <IconPlaceholder
-                          lucide="LayoutDashboardIcon"
-                          tabler="IconLayoutDashboard"
-                          hugeicons="DashboardSquare01Icon"
-                          phosphor="SquaresFourIcon"
-                          remixicon="RiDashboardLine"
-                        />
-                        Dashboard
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="ArrowLeftRightIcon"
-                          tabler="IconArrowsLeftRight"
-                          hugeicons="ArrowDataTransferHorizontalIcon"
-                          phosphor="ArrowsLeftRightIcon"
-                          remixicon="RiArrowLeftRightLine"
-                        />
-                        Transactions
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="TrendingUpIcon"
-                          tabler="IconTrendingUp"
-                          hugeicons="AnalyticsUpIcon"
-                          phosphor="TrendUpIcon"
-                          remixicon="RiLineChartLine"
-                        />
-                        Investments
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="Building2Icon"
-                          tabler="IconBuildingBank"
-                          hugeicons="BankIcon"
-                          phosphor="BankIcon"
-                          remixicon="RiBankLine"
-                        />
-                        Accounts
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="PieChartIcon"
-                          tabler="IconChartPie"
-                          hugeicons="PieChartIcon"
-                          phosphor="ChartPieIcon"
-                          remixicon="RiPieChartLine"
-                        />
-                        Spending
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
-              <SidebarSeparator className="w-auto!" />
-              <SidebarGroup className="pt-1">
-                <SidebarGroupLabel>Planning</SidebarGroupLabel>
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="TargetIcon"
-                          tabler="IconTarget"
-                          hugeicons="Target02Icon"
-                          phosphor="TargetIcon"
-                          remixicon="RiFocus3Line"
-                        />
-                        Goals
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="WalletIcon"
-                          tabler="IconWallet"
-                          hugeicons="Wallet01Icon"
-                          phosphor="WalletIcon"
-                          remixicon="RiWalletLine"
-                        />
-                        Budget
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="FileBarChartIcon"
-                          tabler="IconReportAnalytics"
-                          hugeicons="ChartBarLineIcon"
-                          phosphor="ChartBarIcon"
-                          remixicon="RiBarChartLine"
-                        />
-                        Reports
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="FileTextIcon"
-                          tabler="IconFileText"
-                          hugeicons="File02Icon"
-                          phosphor="FileTextIcon"
-                          remixicon="RiFileTextLine"
-                        />
-                        Documents
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
-            </SidebarContent>
-          </Sidebar>
-        </SidebarProvider>
-      </Card>
-      <Card className="overflow-hidden py-0">
-        <SidebarProvider className="min-h-0">
-          <Sidebar collapsible="none" className="w-full bg-transparent">
-            <SidebarContent className="gap-0">
-              <SidebarGroup className="pb-1">
-                <SidebarGroupLabel>Account</SidebarGroupLabel>
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="UserIcon"
-                          tabler="IconUser"
-                          hugeicons="UserIcon"
-                          phosphor="UserIcon"
-                          remixicon="RiUserLine"
-                        />
-                        Profile
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton isActive>
-                        <IconPlaceholder
-                          lucide="UsersIcon"
-                          tabler="IconUsers"
-                          hugeicons="UserMultipleIcon"
-                          phosphor="UsersIcon"
-                          remixicon="RiTeamLine"
-                        />
-                        Members
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="BellIcon"
-                          tabler="IconBell"
-                          hugeicons="Notification03Icon"
-                          phosphor="BellIcon"
-                          remixicon="RiBellLine"
-                        />
-                        Notifications
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="ShieldIcon"
-                          tabler="IconShield"
-                          hugeicons="ShieldIcon"
-                          phosphor="ShieldIcon"
-                          remixicon="RiShieldLine"
-                        />
-                        Security
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="PaintbrushIcon"
-                          tabler="IconPalette"
-                          hugeicons="PaintBoardIcon"
-                          phosphor="PaletteIcon"
-                          remixicon="RiPaletteLine"
-                        />
-                        Appearance
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
-              <SidebarSeparator className="w-auto!" />
-              <SidebarGroup className="pt-1">
-                <SidebarGroupLabel>Support</SidebarGroupLabel>
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="CircleHelpIcon"
-                          tabler="IconHelp"
-                          hugeicons="HelpCircleIcon"
-                          phosphor="QuestionIcon"
-                          remixicon="RiQuestionLine"
-                        />
-                        Help Center
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="MessageSquareIcon"
-                          tabler="IconMessage"
-                          hugeicons="Message01Icon"
-                          phosphor="ChatIcon"
-                          remixicon="RiChat1Line"
-                        />
-                        Contact Us
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="BookOpenIcon"
-                          tabler="IconBook"
-                          hugeicons="BookOpen02Icon"
-                          phosphor="BookOpenIcon"
-                          remixicon="RiBookOpenLine"
-                        />
-                        Documentation
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                    <SidebarMenuItem>
-                      <SidebarMenuButton>
-                        <IconPlaceholder
-                          lucide="ActivityIcon"
-                          tabler="IconActivity"
-                          hugeicons="ActivityIcon"
-                          phosphor="ActivityIcon"
-                          remixicon="RiPulseLine"
-                        />
-                        Status
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
-            </SidebarContent>
-          </Sidebar>
-        </SidebarProvider>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/social-links.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/social-links.tsx
deleted file mode 100644
index 178cab282..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/social-links.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@voidhash/ui";
-import { Field, FieldGroup, FieldLabel } from "@voidhash/ui";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function SocialLinks() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Social Links</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="spotify-url">Spotify Artist URL</FieldLabel>
-            <InputGroup>
-              <InputGroupAddon>
-                <IconPlaceholder
-                  lucide="CirclePlusIcon"
-                  tabler="IconCirclePlus"
-                  hugeicons="PlusSignCircleIcon"
-                  phosphor="PlusCircleIcon"
-                  remixicon="RiAddCircleLine"
-                />
-              </InputGroupAddon>
-              <InputGroupInput id="spotify-url" defaultValue="spotify.com/artist/3j...2k" />
-            </InputGroup>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="instagram-handle">Instagram Handle</FieldLabel>
-            <InputGroup>
-              <InputGroupAddon>
-                <IconPlaceholder
-                  lucide="CameraIcon"
-                  tabler="IconCamera"
-                  hugeicons="Camera01Icon"
-                  phosphor="CameraIcon"
-                  remixicon="RiCameraLine"
-                />
-              </InputGroupAddon>
-              <InputGroupInput id="instagram-handle" defaultValue="@julianduryea_music" />
-            </InputGroup>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="soundcloud-url">SoundCloud URL</FieldLabel>
-            <InputGroup>
-              <InputGroupAddon>
-                <IconPlaceholder
-                  lucide="CloudIcon"
-                  tabler="IconCloud"
-                  hugeicons="CloudUploadIcon"
-                  phosphor="CloudIcon"
-                  remixicon="RiCloudLine"
-                />
-              </InputGroupAddon>
-              <InputGroupInput id="soundcloud-url" placeholder="soundcloud.com/username" />
-            </InputGroup>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="website-url">Website</FieldLabel>
-            <InputGroup>
-              <InputGroupAddon>
-                <IconPlaceholder
-                  lucide="GlobeIcon"
-                  tabler="IconWorld"
-                  hugeicons="Globe02Icon"
-                  phosphor="GlobeIcon"
-                  remixicon="RiGlobalLine"
-                />
-              </InputGroupAddon>
-              <InputGroupInput id="website-url" placeholder="https://yoursite.com" />
-            </InputGroup>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter className="justify-end gap-2 style-sera:justify-center">
-        <Button variant="outline" className="style-sera:flex-1">
-          Discard
-        </Button>
-        <Button className="style-sera:flex-1">Save Changes</Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/stock-performance.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/stock-performance.tsx
deleted file mode 100644
index d02f5cd48..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/stock-performance.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Area, AreaChart, CartesianGrid } from "recharts";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@voidhash/ui";
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@voidhash/ui";
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "@voidhash/ui";
-import { Field, FieldGroup, FieldLabel } from "@voidhash/ui";
-import { Separator } from "@voidhash/ui";
-
-const TICKERS = ["VOO", "VIG", "AAPL", "MSFT", "GOOGL", "AMZN", "TSLA"];
-
-const CHART_DATA: Record<string, { month: string; price: number }[]> = {
-  VOO: [
-    { month: "Jan", price: 412 },
-    { month: "Feb", price: 438 },
-    { month: "Mar", price: 395 },
-    { month: "Apr", price: 450 },
-    { month: "May", price: 420 },
-    { month: "Jun", price: 462 },
-  ],
-  AAPL: [
-    { month: "Jan", price: 185 },
-    { month: "Feb", price: 210 },
-    { month: "Mar", price: 172 },
-    { month: "Apr", price: 198 },
-    { month: "May", price: 178 },
-    { month: "Jun", price: 215 },
-  ],
-};
-
-const DEFAULT_DATA = [
-  { month: "Jan", price: 100 },
-  { month: "Feb", price: 118 },
-  { month: "Mar", price: 95 },
-  { month: "Apr", price: 125 },
-  { month: "May", price: 108 },
-  { month: "Jun", price: 130 },
-];
-
-const chartConfig = {
-  price: {
-    label: "Price",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig;
-
-export function StockPerformance() {
-  const [ticker, setTicker] = React.useState("VOO");
-
-  const data = CHART_DATA[ticker] ?? DEFAULT_DATA;
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Stock Performance</CardTitle>
-        <CardDescription>6-month price history.</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="ticker-select">Ticker</FieldLabel>
-            <Combobox
-              items={TICKERS}
-              value={ticker}
-              onValueChange={(value) => {
-                if (value !== null) setTicker(value);
-              }}
-            >
-              <ComboboxInput id="ticker-select" placeholder="Search ticker..." />
-              <ComboboxContent>
-                <ComboboxEmpty>No tickers found.</ComboboxEmpty>
-                <ComboboxList>
-                  {(item) => (
-                    <ComboboxItem key={item} value={item}>
-                      {item}
-                    </ComboboxItem>
-                  )}
-                </ComboboxList>
-              </ComboboxContent>
-            </Combobox>
-          </Field>
-        </FieldGroup>
-        <Separator className="style-sera:hidden" />
-        <ChartContainer config={chartConfig} className="h-[200px] w-full">
-          <AreaChart
-            accessibilityLayer
-            data={data}
-            margin={{ left: 0, right: 0, top: 8, bottom: 0 }}
-          >
-            <defs>
-              <linearGradient id="fillPrice" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="var(--color-price)" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="var(--color-price)" stopOpacity={0.05} />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} strokeDasharray="3 3" />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-            <Area
-              type="monotone"
-              dataKey="price"
-              stroke="var(--color-price)"
-              strokeWidth={2}
-              fill="url(#fillPrice)"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/syncing-state.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/syncing-state.tsx
deleted file mode 100644
index e2de49252..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/syncing-state.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { Card, CardContent } from "@voidhash/ui";
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@voidhash/ui";
-import { Spinner } from "@voidhash/ui/spinner";
-
-export function SyncingState() {
-  return (
-    <Card>
-      <CardContent className="p-0">
-        <Empty className="p-4">
-          <EmptyHeader>
-            <EmptyMedia variant="icon">
-              <Spinner />
-            </EmptyMedia>
-            <EmptyTitle>Syncing your accounts</EmptyTitle>
-            <EmptyDescription>
-              We&apos;re pulling in your latest transactions. This usually takes a few seconds.
-            </EmptyDescription>
-          </EmptyHeader>
-          <EmptyContent>
-            <Button variant="outline">Cancel</Button>
-          </EmptyContent>
-        </Empty>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/transfer-funds.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/transfer-funds.tsx
deleted file mode 100644
index 17ea2f0b5..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/transfer-funds.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Button } from "@voidhash/ui";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-import { Field, FieldGroup, FieldLabel } from "@voidhash/ui";
-import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@voidhash/ui";
-import { Item, ItemContent } from "@voidhash/ui";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@voidhash/ui";
-import { Separator } from "@voidhash/ui";
-import { IconPlaceholder } from "../icon-placeholder";
-
-export function TransferFunds() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Transfer Funds</CardTitle>
-        <CardDescription>Move money between your connected accounts.</CardDescription>
-        <CardAction>
-          <Button variant="ghost" size="icon-sm" className="bg-muted">
-            <IconPlaceholder
-              lucide="XIcon"
-              tabler="IconX"
-              hugeicons="Cancel01Icon"
-              phosphor="XIcon"
-              remixicon="RiCloseLine"
-            />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="transfer-amount">Amount to Transfer</FieldLabel>
-            <InputGroup>
-              <InputGroupAddon>
-                <InputGroupText>$</InputGroupText>
-              </InputGroupAddon>
-              <InputGroupInput id="transfer-amount" defaultValue="1,200.00" />
-            </InputGroup>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="from-account">From Account</FieldLabel>
-            <Select defaultValue="checking">
-              <SelectTrigger id="from-account" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value="checking">Main Checking (··8402) — $12,450.00</SelectItem>
-                  <SelectItem value="business">Business (··7731) — $8,920.00</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="to-account">To Account</FieldLabel>
-            <Select defaultValue="savings">
-              <SelectTrigger id="to-account" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value="savings">High Yield Savings (··1192) — $42,100.00</SelectItem>
-                  <SelectItem value="investment">Investment (··3349) — $18,200.00</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </Field>
-          <Item variant="muted" className="flex-col items-stretch">
-            <ItemContent className="gap-3">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Estimated arrival</span>
-                <span className="text-sm font-medium">Today, Apr 14</span>
-              </div>
-              <Separator />
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Transaction fee</span>
-                <span className="text-sm font-medium tabular-nums">$0.00</span>
-              </div>
-              <Separator />
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">Total amount</span>
-                <span className="text-sm font-semibold tabular-nums">$1,200.00</span>
-              </div>
-            </ItemContent>
-          </Item>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Confirm Transfer</Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/cards/upcoming-payments.tsx b/apps/www/src/features/design/components/docs/component-overview/cards/upcoming-payments.tsx
deleted file mode 100644
index a5d323fb0..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/cards/upcoming-payments.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { Badge } from "@voidhash/ui";
-import { Calendar } from "@voidhash/ui";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@voidhash/ui";
-import { Item, ItemContent, ItemDescription, ItemGroup, ItemTitle } from "@voidhash/ui";
-
-export function UpcomingPayments() {
-  const [date, setDate] = React.useState<Date | undefined>(new Date());
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Upcoming Payments</CardTitle>
-        <CardDescription>Select a date to view scheduled payments.</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <Item variant="outline" className="justify-center">
-          <Calendar
-            mode="single"
-            selected={date}
-            onSelect={setDate}
-            className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)] style-sera:md:[--cell-size:--spacing(9)]"
-          />
-        </Item>
-        <ItemGroup className="w-full">
-          <Item variant="muted">
-            <ItemContent>
-              <ItemTitle>Netflix Subscription</ItemTitle>
-              <ItemDescription>Apr 15, 2024</ItemDescription>
-            </ItemContent>
-            <Badge variant="secondary">$19.99</Badge>
-          </Item>
-          <Item variant="muted">
-            <ItemContent>
-              <ItemTitle>Rent Payment</ItemTitle>
-              <ItemDescription>Apr 1, 2024</ItemDescription>
-            </ItemContent>
-            <Badge variant="secondary">$2,400.00</Badge>
-          </Item>
-          <Item variant="muted">
-            <ItemContent>
-              <ItemTitle>Auto Insurance</ItemTitle>
-              <ItemDescription>Apr 22, 2024</ItemDescription>
-            </ItemContent>
-            <Badge variant="secondary">$186.00</Badge>
-          </Item>
-        </ItemGroup>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/icon-placeholder.tsx b/apps/www/src/features/design/components/docs/component-overview/icon-placeholder.tsx
deleted file mode 100644
index 6112a5d76..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/icon-placeholder.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import type { ComponentProps, ComponentType } from "react";
-import * as LucideIcons from "lucide-react";
-import { SquareIcon } from "lucide-react";
-
-type IconPlaceholderProps = ComponentProps<"svg"> & {
-  lucide: string;
-  tabler?: string;
-  hugeicons?: string;
-  phosphor?: string;
-  remixicon?: string;
-};
-
-/**
- * Resolves the Lucide icon selected by the Voidhash design system.
- */
-export function IconPlaceholder({
-  lucide,
-  tabler: _tabler,
-  hugeicons: _hugeicons,
-  phosphor: _phosphor,
-  remixicon: _remixicon,
-  ...props
-}: IconPlaceholderProps) {
-  const Icon = LucideIcons[lucide as keyof typeof LucideIcons] as
-    | ComponentType<ComponentProps<"svg">>
-    | undefined;
-
-  return Icon ? <Icon {...props} /> : <SquareIcon {...props} />;
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/index.tsx b/apps/www/src/features/design/components/docs/component-overview/index.tsx
deleted file mode 100644
index 0297eb504..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { AccountAccess } from "./cards/account-access";
-import { CardOverview } from "./cards/card-overview";
-import { ClaimableBalance } from "./cards/claimable-balance";
-import { ContributionHistory } from "./cards/contribution-history";
-import { CoverArt } from "./cards/cover-art";
-import { DividendIncome } from "./cards/dividend-income";
-import { EmptyConnectBank } from "./cards/empty-connect-bank";
-import { EmptyDistributeTrack } from "./cards/empty-distribute-track";
-import { EmptyExploreCatalog } from "./cards/empty-explore-catalog";
-import { Faq } from "./cards/faq";
-import { FrontDoor } from "./cards/front-door";
-import { IndexInvesting } from "./cards/index-investing";
-import { KitchenIsland } from "./cards/kitchen-island";
-import { LoadingCard } from "./cards/loading-card";
-import { NewMilestone } from "./cards/new-milestone";
-import { NotificationSettings } from "./cards/notification-settings";
-import { Payments } from "./cards/payments";
-import { PayoutThreshold } from "./cards/payout-threshold";
-import { PowerUsage } from "./cards/power-usage";
-import { Preferences } from "./cards/preferences";
-import { ProjectActions } from "./cards/project-actions";
-import { QrConnect } from "./cards/qr-connect";
-import { ReceivingMethod } from "./cards/receiving-method";
-import { RecentTransactions } from "./cards/recent-transactions";
-import { ReleaseCatalog } from "./cards/release-catalog";
-import { RollerShades } from "./cards/roller-shades";
-import { SavingsProgress } from "./cards/savings-progress";
-import { SavingsTargets } from "./cards/savings-targets";
-import { SidebarNav } from "./cards/sidebar-nav";
-import { SocialLinks } from "./cards/social-links";
-import { StockPerformance } from "./cards/stock-performance";
-import { SyncingState } from "./cards/syncing-state";
-import { TransferFunds } from "./cards/transfer-funds";
-import { UpcomingPayments } from "./cards/upcoming-payments";
-
-export default function Preview02Example() {
-  return (
-    <div className="overflow-x-auto overflow-y-hidden bg-muted contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)] dark:bg-background style-lyra:md:[--gap:--spacing(6)] style-mira:md:[--gap:--spacing(6)]">
-      <div className="flex w-full min-w-max justify-center">
-        <div
-          className="grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background style-lyra:md:w-[2600px] style-mira:md:w-[2600px] *:[div]:gap-(--gap)"
-          data-slot="capture-target"
-        >
-          <div className="flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
-            <ContributionHistory />
-            <EmptyDistributeTrack />
-            <QrConnect />
-            <DividendIncome />
-            <IndexInvesting />
-            <SyncingState />
-          </div>
-          <div className="flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
-            <PayoutThreshold />
-            <ClaimableBalance />
-            <Preferences />
-            <SavingsProgress />
-            <KitchenIsland />
-          </div>
-          <div className="col-span-2 flex flex-col p-1 [contain-intrinsic-size:760px_1200px] [content-visibility:auto]">
-            <SavingsTargets />
-            <ProjectActions />
-            <RecentTransactions />
-            <div className="grid grid-cols-2 items-start gap-(--gap)">
-              <div className="flex flex-col gap-(--gap)">
-                <SidebarNav />
-                <Faq />
-              </div>
-              <div className="flex flex-col gap-(--gap)">
-                <Payments />
-                <FrontDoor />
-              </div>
-            </div>
-            <ReleaseCatalog />
-          </div>
-          <div className="flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
-            <AccountAccess />
-            <CardOverview />
-            <TransferFunds />
-            <CoverArt />
-            <LoadingCard />
-          </div>
-          <div className="flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
-            <ReceivingMethod />
-            <PowerUsage />
-            <EmptyConnectBank />
-            <UpcomingPayments />
-            <RollerShades />
-          </div>
-          <div className="flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
-            <StockPerformance />
-            <EmptyExploreCatalog />
-            <NewMilestone />
-            <SocialLinks />
-            <NotificationSettings />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/docs/component-overview/preview-config.ts b/apps/www/src/features/design/components/docs/component-overview/preview-config.ts
deleted file mode 100644
index 576ec62ae..000000000
--- a/apps/www/src/features/design/components/docs/component-overview/preview-config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-const previewConfig = {
-  style: "nova",
-} as const;
-
-/**
- * Provides the upstream preview's default style selection.
- */
-export function useDesignSystemSearchParams() {
-  return [previewConfig] as const;
-}
diff --git a/apps/www/src/features/design/components/docs/component-registry.tsx b/apps/www/src/features/design/components/docs/component-registry.tsx
deleted file mode 100644
index 678242302..000000000
--- a/apps/www/src/features/design/components/docs/component-registry.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-
-// Re-export all UI components from @voidhash/ui for use in MDX
-export * from "@voidhash/ui";
-export { BrandColorScales, SemanticColorTokens } from "./colors";
-export { ComponentOverview } from "./component-overview";
-
-// Export common icons used in examples
-export {
-  AlertCircleIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  BoldIcon,
-  CalendarIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-  CopyIcon,
-  ItalicIcon,
-  LoaderIcon,
-  MailIcon,
-  MenuIcon,
-  MoonIcon,
-  PlusIcon,
-  SearchIcon,
-  SettingsIcon,
-  SunIcon,
-  TrashIcon,
-  UnderlineIcon,
-  UserIcon,
-  XIcon,
-} from "lucide-react";
diff --git a/apps/www/src/features/design/components/docs/preview.tsx b/apps/www/src/features/design/components/docs/preview.tsx
deleted file mode 100644
index 06a4dc86d..000000000
--- a/apps/www/src/features/design/components/docs/preview.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import { cn } from "@/features/design/lib/cn";
-import type { ReactNode } from "react";
-
-interface PreviewProps {
-  children: ReactNode;
-  className?: string;
-  centered?: boolean;
-}
-
-export function Preview({ children, className, centered = true }: PreviewProps) {
-  return (
-    <div
-      className={cn(
-        "not-prose rounded-lg border bg-background p-6",
-        centered && "flex items-center justify-center",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/layout/docs.tsx b/apps/www/src/features/design/components/layout/docs.tsx
deleted file mode 100644
index 29761cc5e..000000000
--- a/apps/www/src/features/design/components/layout/docs.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-"use client";
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@voidhash/ui";
-import { Link as FrameworkLink, usePathname } from "fumadocs-core/framework";
-import type * as PageTree from "fumadocs-core/page-tree";
-import { TreeContextProvider, useTreeContext } from "fumadocs-ui/contexts/tree";
-import { ChevronRight } from "lucide-react";
-import { CirclePlay } from "lucide-static";
-import {
-  type ComponentProps,
-  type ComponentType,
-  type ReactElement,
-  type ReactNode,
-  useMemo,
-} from "react";
-
-import { NavBar } from "../nav-bar";
-import { DocsThemeToggle } from "../theme-toggle";
-
-export interface DocsLayoutProps {
-  tree: PageTree.Root;
-  children: ReactNode;
-}
-
-export function DocsLayout({ tree, children }: DocsLayoutProps) {
-  return (
-    <SidebarProvider
-      className="flex flex-col [--header-height:calc(theme(spacing.14))]"
-      defaultOpen={true}
-    >
-      <TreeContextProvider tree={tree}>
-        <NavBar />
-
-        <div className="flex flex-1">
-          <DocsSidebar />
-
-          <SidebarInset className="top-[var(--header-height)] flex-1 transition-all duration-75">
-            <div className="flex w-full">{children}</div>
-          </SidebarInset>
-        </div>
-      </TreeContextProvider>
-    </SidebarProvider>
-  );
-}
-
-function DocsSidebar() {
-  const { root } = useTreeContext();
-  const pathname = usePathname();
-
-  const groups = useMemo(() => {
-    function transformNode(node: PageTree.Node): {
-      icon?: ReactElement;
-      title: string;
-      url: string;
-      isActive?: () => boolean;
-      items?: {
-        title: string;
-        url: string;
-        isActive?: () => boolean;
-      }[];
-    } | null {
-      if (node.type === "page") {
-        return {
-          icon: node.icon as ReactElement,
-          isActive: () => pathname === node.url,
-          title: typeof node.name === "string" ? node.name : String(node.name),
-          url: node.url,
-        };
-      }
-
-      if (node.type === "folder") {
-        const items = node.children
-          .map(transformNode)
-          .filter((item): item is NonNullable<typeof item> => item !== null);
-
-        if (node.index) {
-          return {
-            icon: node.icon as ReactElement,
-            isActive: () => pathname === node.index?.url || items.some((item) => item.isActive?.()),
-            items: items.length > 0 ? items : undefined,
-            title: typeof node.name === "string" ? node.name : String(node.name),
-            url: node.index.url,
-          };
-        }
-
-        if (items.length > 0) {
-          return {
-            icon: node.icon as ReactElement,
-            isActive: () => items.some((item) => item.isActive?.()),
-            items,
-            title: typeof node.name === "string" ? node.name : String(node.name),
-            url: "#",
-          };
-        }
-      }
-
-      return null;
-    }
-
-    const itemsWithDefaultGroup: PageTree.Node[] = [
-      {
-        $id: "get-started",
-        children: root.children.filter((item) => item.type === "page"),
-        icon: CirclePlay as unknown as ReactElement,
-        index: {
-          $id: "index.mdx",
-          $ref: "index.mdx",
-          name: "Index",
-          type: "page",
-          url: "/design",
-        },
-        name: "Get Started",
-        type: "folder",
-      },
-      ...root.children.filter((item) => item.type === "folder"),
-    ];
-
-    return itemsWithDefaultGroup
-      .map(transformNode)
-      .filter((item): item is NonNullable<typeof item> => item !== null);
-  }, [root, pathname]);
-
-  return (
-    <Sidebar className="!top-[var(--header-height)] !h-[calc(100svh-var(--header-height))] fixed min-w-64 border-r bg-background transition-all duration-75">
-      <SidebarContent className="gap-0">
-        <NavMain groups={groups} link={SidebarLink} />
-        <DocsThemeToggle className="mt-2 ml-5 block md:hidden" />
-      </SidebarContent>
-    </Sidebar>
-  );
-}
-
-function SidebarLink(props: ComponentProps<typeof FrameworkLink>) {
-  const href = props.href ?? "#";
-  return <FrameworkLink {...props} href={href} />;
-}
-
-export function NavMain({
-  link: Link,
-  groups,
-}: {
-  link: ComponentType<ComponentProps<"a">> | "a";
-  defaultOpenNested?: boolean;
-  groups: {
-    title: string;
-    icon?: ReactElement;
-    items?: {
-      title: string;
-      url: string;
-      icon?: ReactElement;
-      isActive?: () => boolean;
-      items?: {
-        title: string;
-        url: string;
-        isActive?: () => boolean;
-      }[];
-    }[];
-  }[];
-  tooltips?: "enabled" | "disabled";
-}) {
-  return (
-    <>
-      {groups.map((group) => (
-        <Collapsible
-          className="group/collapsible"
-          defaultOpen
-          key={group.title}
-          title={group.title}
-        >
-          <SidebarGroup className="p-0">
-            <SidebarGroupLabel
-              asChild
-              className="group/label -mt-px rounded-none border-border border-y px-6 py-5 text-sidebar-foreground text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-            >
-              <CollapsibleTrigger className="cursor-pointer">
-                <div
-                  className="*:-ml-0.5 *:mr-2 *:size-4 *:text-muted-foreground"
-                  // biome-ignore lint/security/noDangerouslySetInnerHtml: It is safe - static icon markup
-                  dangerouslySetInnerHTML={{
-                    __html: group.icon as unknown as string,
-                  }}
-                />
-                {group.title}
-                <ChevronRight className="ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-90" />
-              </CollapsibleTrigger>
-            </SidebarGroupLabel>
-            <CollapsibleContent className="pt-1">
-              <SidebarGroupContent className="p-2 pb-[9px]">
-                <SidebarMenu>
-                  {group.items?.map((item) => (
-                    <SidebarMenuItem
-                      className="px-1 font-normal text-muted-foreground"
-                      key={item.title}
-                    >
-                      <SidebarMenuButton asChild isActive={item.isActive?.()}>
-                        <Link
-                          className="px-3 font-normal data-[active=true]:bg-muted data-[active=true]:font-normal data-[active=true]:text-foreground"
-                          href={item.url}
-                        >
-                          {item.title}
-                        </Link>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  ))}
-                </SidebarMenu>
-              </SidebarGroupContent>
-            </CollapsibleContent>
-          </SidebarGroup>
-        </Collapsible>
-      ))}
-    </>
-  );
-}
diff --git a/apps/www/src/features/design/components/layout/page.tsx b/apps/www/src/features/design/components/layout/page.tsx
deleted file mode 100644
index 68c401e4b..000000000
--- a/apps/www/src/features/design/components/layout/page.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client";
-import type * as PageTree from "fumadocs-core/page-tree";
-
-import { Card, CardContent, CardDescription, CardTitle } from "@voidhash/ui";
-import { Link, usePathname } from "fumadocs-core/framework";
-import { useTreeContext } from "fumadocs-ui/contexts/tree";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { type ComponentProps, type ReactNode, useMemo } from "react";
-
-import { cn } from "../../lib/cn";
-
-export interface DocsPageProps {
-  children: ReactNode;
-  full?: boolean;
-}
-
-export function DocsPage({ full = false, ...props }: DocsPageProps) {
-  return (
-    <main className="flex w-full min-w-0 flex-col">
-      <article
-        className={cn(
-          "flex w-full flex-1 flex-col gap-6 px-4 py-8 md:mx-auto md:px-6",
-          full ? "max-w-none" : "max-w-[860px]",
-        )}
-      >
-        {props.children}
-        <Footer />
-      </article>
-    </main>
-  );
-}
-
-export function DocsBody(props: ComponentProps<"div">) {
-  return (
-    <div {...props} className={cn("prose ", props.className)}>
-      {props.children}
-    </div>
-  );
-}
-
-export function DocsDescription(props: ComponentProps<"p">) {
-  // don't render if no description provided
-  if (props.children === undefined) {
-    return null;
-  }
-
-  return (
-    <p {...props} className={cn("mt-1 text-muted-foreground", props.className)}>
-      {props.children}
-    </p>
-  );
-}
-
-export function DocsTitle(props: ComponentProps<"h1">) {
-  return (
-    <h1 {...props} className={cn("mt-8 font-semibold text-3xl tracking-right", props.className)}>
-      {props.children}
-    </h1>
-  );
-}
-
-function Footer() {
-  const { root } = useTreeContext();
-  const pathname = usePathname();
-  const flatten = useMemo(() => {
-    const result: PageTree.Item[] = [];
-
-    function scan(items: PageTree.Node[]) {
-      for (const item of items) {
-        if (item.type === "page") {
-          result.push(item);
-        } else if (item.type === "folder") {
-          if (item.index) {
-            result.push(item.index);
-          }
-          scan(item.children);
-        }
-      }
-    }
-
-    scan(root.children);
-    return result;
-  }, [root]);
-
-  const { previous, next } = useMemo(() => {
-    const idx = flatten.findIndex((item) => item.url === pathname);
-
-    if (idx === -1) {
-      return {};
-    }
-    return {
-      next: flatten[idx + 1],
-      previous: flatten[idx - 1],
-    };
-  }, [flatten, pathname]);
-
-  return (
-    <div className="flex flex-row items-center justify-between gap-8">
-      {previous ? (
-        <Link className="flex-1" href={previous.url}>
-          <Card className="rounded-none hover:bg-card">
-            <CardContent>
-              <CardDescription className="mt-1 flex items-center">
-                <ChevronLeftIcon className="-ml-1 mr-1 size-4" /> <span>Previous Page</span>
-              </CardDescription>
-              <CardTitle className="mt-2 font-normal text-md">{previous.name}</CardTitle>
-            </CardContent>
-          </Card>
-        </Link>
-      ) : null}
-      {next ? (
-        <Link className="flex-1" href={next.url}>
-          <Card className="rounded-none hover:bg-card">
-            <CardContent className="flex w-full flex-col items-end">
-              <CardDescription className="mt-1 flex items-center">
-                <span>Next Page</span>
-                <ChevronRightIcon className="-mr-1 ml-1 size-4" />{" "}
-              </CardDescription>
-              <CardTitle className="mt-2 font-normal text-md">{next.name}</CardTitle>
-            </CardContent>
-          </Card>
-        </Link>
-      ) : null}
-    </div>
-  );
-}
diff --git a/apps/www/src/features/design/components/nav-bar.tsx b/apps/www/src/features/design/components/nav-bar.tsx
deleted file mode 100644
index 8160e1b29..000000000
--- a/apps/www/src/features/design/components/nav-bar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import { Button, CommandShortcut, Logo, cn, useSidebar } from "@voidhash/ui";
-import { useSearchContext } from "fumadocs-ui/contexts/search";
-import { MenuIcon, SearchIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-
-import { DocsThemeToggle } from "./theme-toggle";
-
-function SearchToggle(props: ComponentProps<"button">) {
-  const { enabled, setOpenSearch } = useSearchContext();
-  if (!enabled) {
-    return;
-  }
-
-  return (
-    <button
-      {...props}
-      className={cn(
-        "flex min-w-[200px] items-center gap-2 bg-transparent text-sm md:bg-muted",
-        props.className,
-      )}
-      onClick={() => setOpenSearch(true)}
-    >
-      <SearchIcon className="size-4 cursor-pointer text-muted-foreground " />
-      <span className="mr-4 hidden flex-1 text-left text-muted-foreground md:block">Search...</span>
-      <CommandShortcut className="hidden md:block">⌘K</CommandShortcut>
-    </button>
-  );
-}
-
-export function NavBar() {
-  return (
-    <div className="fixed z-10 flex h-[var(--header-height)] w-full flex-row items-center justify-between border-border border-b bg-background transition-all duration-75">
-      <div className="flex flex-1 items-center justify-between px-4 py-2">
-        <div className="mr-7 flex items-center">
-          <a className="flex items-center gap-3" href="/">
-            <Logo className="ml-2 h-4" color="mono" variant="symbol" />
-            <span className="rounded-md border-border bg-muted p-1 px-2 font-semibold text-foreground text-xs uppercase">
-              Design System
-            </span>
-          </a>
-        </div>
-        <div className="flex items-center gap-2 md:flex-1">
-          <div className="md:flex-1">
-            <SearchToggle className="ml-8 cursor-pointer rounded-lg bg-muted p-2 px-3 hover:bg-accent" />
-          </div>
-          <DocsThemeToggle />
-          <SidebarToggle />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SidebarToggle() {
-  const { openMobile, setOpenMobile } = useSidebar();
-  const handleToggle = () => {
-    setOpenMobile(!openMobile);
-  };
-  return (
-    <Button className={cn("md:hidden")} onClick={handleToggle} variant="ghost">
-      <MenuIcon className="size-4" />
-    </Button>
-  );
-}
diff --git a/apps/www/src/features/design/components/theme-toggle.tsx b/apps/www/src/features/design/components/theme-toggle.tsx
deleted file mode 100644
index 87c810b14..000000000
--- a/apps/www/src/features/design/components/theme-toggle.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-import { ThemeToggle, cn } from "@voidhash/ui";
-import { useTheme } from "next-themes";
-
-export function DocsThemeToggle({ className }: { className?: string }) {
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <ThemeToggle
-      className={cn("hidden md:block", className)}
-      setTheme={setTheme}
-      theme={theme ?? "system"}
-    />
-  );
-}
diff --git a/apps/www/src/features/design/content/docs/components/accordion.mdx b/apps/www/src/features/design/content/docs/components/accordion.mdx
deleted file mode 100644
index 9f384c78f..000000000
--- a/apps/www/src/features/design/content/docs/components/accordion.mdx
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: Accordion
-description: A vertically stacked set of interactive headings that reveal content.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Accordion type="single" collapsible className="w-full">
-    <AccordionItem value="item-1">
-      <AccordionTrigger>Is it accessible?</AccordionTrigger>
-      <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-2">
-      <AccordionTrigger>Is it styled?</AccordionTrigger>
-      <AccordionContent>
-        Yes. It comes with default styles that match your design system.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-3">
-      <AccordionTrigger>Is it animated?</AccordionTrigger>
-      <AccordionContent>
-        Yes. It's animated by default with smooth expand/collapse transitions.
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-```tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@voidhash/ui";
-
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-  </AccordionItem>
-</Accordion>;
-```
-
-## Components
-
-### Accordion
-
-The root container that manages the accordion state.
-
-### AccordionItem
-
-A single collapsible item within the accordion.
-
-### AccordionTrigger
-
-The button that toggles the accordion item's content.
-
-### AccordionContent
-
-The content revealed when the accordion item is expanded.
-
-## Examples
-
-### Multiple Items Open
-
-<Preview centered={false}>
-  <Accordion type="multiple" className="w-full">
-    <AccordionItem value="item-1">
-      <AccordionTrigger>First Item</AccordionTrigger>
-      <AccordionContent>Content for the first item.</AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-2">
-      <AccordionTrigger>Second Item</AccordionTrigger>
-      <AccordionContent>Content for the second item.</AccordionContent>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-```tsx
-<Accordion type="multiple">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>First Item</AccordionTrigger>
-    <AccordionContent>Content for the first item.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Second Item</AccordionTrigger>
-    <AccordionContent>Content for the second item.</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Props
-
-### Accordion Props
-
-<TypeTable
-  type={{
-    type: {
-      description: "Whether single or multiple items can be opened",
-      type: "'single' | 'multiple'",
-      default: "Required",
-    },
-    collapsible: {
-      description: "Allow closing all items (only for type='single')",
-      type: "boolean",
-      default: "false",
-    },
-    defaultValue: {
-      description: "Default expanded item(s)",
-      type: "string | string[]",
-      default: "undefined",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/alert-dialog.mdx b/apps/www/src/features/design/content/docs/components/alert-dialog.mdx
deleted file mode 100644
index 045d41615..000000000
--- a/apps/www/src/features/design/content/docs/components/alert-dialog.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: Alert Dialog
-description: A modal dialog that interrupts the user with important content and expects a response.
----
-
-## Usage
-
-<Preview>
-  <AlertDialog>
-    <AlertDialogTrigger asChild>
-      <Button variant="outline">Delete Account</Button>
-    </AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-        <AlertDialogDescription>
-          This action cannot be undone. This will permanently delete your account and remove your
-          data from our servers.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction>Continue</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-</Preview>
-
-```tsx
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@voidhash/ui";
-
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button variant="outline">Delete Account</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Continue</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>;
-```
-
-## Components
-
-### AlertDialog
-
-The root component that manages dialog state.
-
-### AlertDialogTrigger
-
-The element that opens the dialog.
-
-### AlertDialogContent
-
-The modal content container with overlay.
-
-### AlertDialogHeader
-
-Container for title and description.
-
-### AlertDialogTitle
-
-The title of the alert dialog.
-
-### AlertDialogDescription
-
-A description of the alert dialog's purpose.
-
-### AlertDialogFooter
-
-Container for action buttons.
-
-### AlertDialogAction
-
-The primary action button (styled as default button).
-
-### AlertDialogCancel
-
-The cancel button (styled as outline button).
-
-## Props
-
-### AlertDialog Props
-
-<TypeTable
-  type={{
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-    defaultOpen: {
-      description: "Initial open state for uncontrolled usage",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/alert.mdx b/apps/www/src/features/design/content/docs/components/alert.mdx
deleted file mode 100644
index f3bb020d9..000000000
--- a/apps/www/src/features/design/content/docs/components/alert.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Alert
-description: Displays a callout for user attention with different severity levels.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Alert>
-    <AlertCircleIcon />
-    <AlertTitle>Heads up!</AlertTitle>
-    <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
-  </Alert>
-</Preview>
-
-```tsx
-import { Alert, AlertDescription, AlertTitle } from "@voidhash/ui";
-import { AlertCircleIcon } from "lucide-react";
-
-<Alert>
-  <AlertCircleIcon />
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
-</Alert>;
-```
-
-## Variants
-
-<div className="grid gap-4">
-  <Preview centered={false}>
-    <Alert variant="default">
-      <AlertCircleIcon />
-      <AlertTitle>Default</AlertTitle>
-      <AlertDescription>This is a default alert.</AlertDescription>
-    </Alert>
-  </Preview>
-  <Preview centered={false}>
-    <Alert variant="success">
-      <CheckIcon />
-      <AlertTitle>Success</AlertTitle>
-      <AlertDescription>Your changes have been saved.</AlertDescription>
-    </Alert>
-  </Preview>
-  <Preview centered={false}>
-    <Alert variant="destructive">
-      <XIcon />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>Something went wrong.</AlertDescription>
-    </Alert>
-  </Preview>
-</div>
-
-```tsx
-<Alert variant="default">...</Alert>
-<Alert variant="success">...</Alert>
-<Alert variant="destructive">...</Alert>
-```
-
-## Components
-
-### Alert
-
-The main container component with variant styling.
-
-### AlertTitle
-
-The title of the alert message.
-
-### AlertDescription
-
-The description or body text of the alert.
-
-## Props
-
-### Alert Props
-
-<TypeTable
-  type={{
-    variant: {
-      description: "The visual style of the alert",
-      type: "'default' | 'success' | 'destructive'",
-      default: "'default'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/avatar.mdx b/apps/www/src/features/design/content/docs/components/avatar.mdx
deleted file mode 100644
index 353d2d3eb..000000000
--- a/apps/www/src/features/design/content/docs/components/avatar.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Avatar
-description: An image element with a fallback for representing the user.
----
-
-## Usage
-
-<Preview>
-  <Avatar>
-    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-    <AvatarFallback>CN</AvatarFallback>
-  </Avatar>
-</Preview>
-
-```tsx
-import { Avatar, AvatarFallback, AvatarImage } from "@voidhash/ui";
-
-<Avatar>
-  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-  <AvatarFallback>CN</AvatarFallback>
-</Avatar>;
-```
-
-## Components
-
-### Avatar
-
-The root container that wraps the image and fallback.
-
-### AvatarImage
-
-The image element that displays the user's avatar.
-
-### AvatarFallback
-
-A fallback element shown when the image fails to load.
-
-## Examples
-
-### With Fallback
-
-<Preview>
-  <Avatar>
-    <AvatarImage src="/broken-image.jpg" alt="User" />
-    <AvatarFallback>JD</AvatarFallback>
-  </Avatar>
-</Preview>
-
-```tsx
-<Avatar>
-  <AvatarImage src="/broken-image.jpg" alt="User" />
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>
-```
-
-### Different Sizes
-
-<Preview>
-  <div className="flex items-center gap-4">
-    <Avatar className="size-6">
-      <AvatarImage src="https://github.com/shadcn.png" />
-      <AvatarFallback>S</AvatarFallback>
-    </Avatar>
-    <Avatar className="size-8">
-      <AvatarImage src="https://github.com/shadcn.png" />
-      <AvatarFallback>M</AvatarFallback>
-    </Avatar>
-    <Avatar className="size-12">
-      <AvatarImage src="https://github.com/shadcn.png" />
-      <AvatarFallback>L</AvatarFallback>
-    </Avatar>
-  </div>
-</Preview>
-
-```tsx
-<Avatar className="size-6">...</Avatar>
-<Avatar className="size-8">...</Avatar>
-<Avatar className="size-12">...</Avatar>
-```
-
-## Props
-
-### Avatar Props
-
-<TypeTable
-  type={{
-    className: {
-      description: "Additional CSS classes for sizing",
-      type: "string",
-      default: "size-8",
-    },
-  }}
-/>
-
-### AvatarImage Props
-
-<TypeTable
-  type={{
-    src: {
-      description: "The image source URL",
-      type: "string",
-      default: "Required",
-    },
-    alt: {
-      description: "Alternative text for the image",
-      type: "string",
-      default: "undefined",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/badge.mdx b/apps/www/src/features/design/content/docs/components/badge.mdx
deleted file mode 100644
index dfae9b3cf..000000000
--- a/apps/www/src/features/design/content/docs/components/badge.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Badge
-description: Displays a small label or indicator for status, categories, or counts.
----
-
-## Usage
-
-<Preview>
-  <Badge>Badge</Badge>
-</Preview>
-
-```tsx
-import { Badge } from "@voidhash/ui";
-
-<Badge>Badge</Badge>;
-```
-
-## Variants
-
-<div className="flex flex-wrap gap-4">
-  <Preview className="p-4">
-    <Badge variant="default">Default</Badge>
-  </Preview>
-  <Preview className="p-4">
-    <Badge variant="secondary">Secondary</Badge>
-  </Preview>
-  <Preview className="p-4">
-    <Badge variant="destructive">Destructive</Badge>
-  </Preview>
-  <Preview className="p-4">
-    <Badge variant="outline">Outline</Badge>
-  </Preview>
-</div>
-
-```tsx
-<Badge variant="default">Default</Badge>
-<Badge variant="secondary">Secondary</Badge>
-<Badge variant="destructive">Destructive</Badge>
-<Badge variant="outline">Outline</Badge>
-```
-
-## Examples
-
-### With Icon
-
-<Preview>
-  <Badge>
-    <CheckIcon /> Verified
-  </Badge>
-</Preview>
-
-```tsx
-<Badge>
-  <CheckIcon /> Verified
-</Badge>
-```
-
-### As Link
-
-Use the `asChild` prop to render the badge as a link:
-
-<Preview>
-  <Badge asChild>
-    <a href="#">Clickable Badge</a>
-  </Badge>
-</Preview>
-
-```tsx
-<Badge asChild>
-  <a href="/category">Category</a>
-</Badge>
-```
-
-## Props
-
-<TypeTable
-  type={{
-    variant: {
-      description: "The visual style of the badge",
-      type: "'default' | 'secondary' | 'destructive' | 'outline'",
-      default: "'default'",
-    },
-    asChild: {
-      description: "Render as a child element using Radix Slot",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/breadcrumb.mdx b/apps/www/src/features/design/content/docs/components/breadcrumb.mdx
deleted file mode 100644
index 497641d38..000000000
--- a/apps/www/src/features/design/content/docs/components/breadcrumb.mdx
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: Breadcrumb
-description: Displays the path to the current resource using a hierarchy of links.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Breadcrumb>
-    <BreadcrumbList>
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/">Home</BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-      </BreadcrumbItem>
-    </BreadcrumbList>
-  </Breadcrumb>
-</Preview>
-
-```tsx
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@voidhash/ui";
-
-<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/">Home</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>;
-```
-
-## Components
-
-### Breadcrumb
-
-The root navigation element.
-
-### BreadcrumbList
-
-The ordered list container for breadcrumb items.
-
-### BreadcrumbItem
-
-A single item in the breadcrumb trail.
-
-### BreadcrumbLink
-
-A clickable link within a breadcrumb item.
-
-### BreadcrumbPage
-
-The current page indicator (non-clickable).
-
-### BreadcrumbSeparator
-
-The separator between breadcrumb items (default: chevron).
-
-### BreadcrumbEllipsis
-
-An ellipsis indicator for collapsed breadcrumb items.
-
-## Examples
-
-### With Ellipsis
-
-<Preview centered={false}>
-  <Breadcrumb>
-    <BreadcrumbList>
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/">Home</BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbEllipsis />
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Current</BreadcrumbPage>
-      </BreadcrumbItem>
-    </BreadcrumbList>
-  </Breadcrumb>
-</Preview>
-
-```tsx
-<BreadcrumbItem>
-  <BreadcrumbEllipsis />
-</BreadcrumbItem>
-```
-
-## Props
-
-### BreadcrumbLink Props
-
-<TypeTable
-  type={{
-    href: {
-      description: "The URL to navigate to",
-      type: "string",
-      default: "undefined",
-    },
-    asChild: {
-      description: "Render as child element",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/button.mdx b/apps/www/src/features/design/content/docs/components/button.mdx
deleted file mode 100644
index cf71e6dfc..000000000
--- a/apps/www/src/features/design/content/docs/components/button.mdx
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: Button
-description: A versatile button component with multiple variants and sizes.
----
-
-## Usage
-
-<Preview>
-  <Button>Click me</Button>
-</Preview>
-
-```tsx
-import { Button } from "@voidhash/ui";
-
-<Button>Click me</Button>;
-```
-
-## Variants
-
-The Button component supports the following visual variants:
-
-<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-  <Preview className="p-4">
-    <Button variant="default">Default</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button variant="destructive">Destructive</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button variant="success">Success</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button variant="outline">Outline</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button variant="ghost">Ghost</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button variant="link">Link</Button>
-  </Preview>
-</div>
-
-```tsx
-<Button variant="default">Default</Button>
-<Button variant="destructive">Destructive</Button>
-<Button variant="success">Success</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-<Button variant="link">Link</Button>
-```
-
-## Sizes
-
-<div className="flex flex-wrap items-center gap-4">
-  <Preview className="p-4">
-    <Button size="sm">Small</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button size="default">Default</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button size="lg">Large</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button size="icon">
-      <PlusIcon />
-    </Button>
-  </Preview>
-</div>
-
-```tsx
-<Button size="sm">Small</Button>
-<Button size="default">Default</Button>
-<Button size="lg">Large</Button>
-<Button size="icon"><PlusIcon /></Button>
-```
-
-## Examples
-
-### With Icon
-
-<Preview>
-  <Button>
-    <MailIcon /> Login with Email
-  </Button>
-</Preview>
-
-```tsx
-<Button>
-  <MailIcon /> Login with Email
-</Button>
-```
-
-### Disabled State
-
-<Preview>
-  <Button disabled>Disabled</Button>
-</Preview>
-
-```tsx
-<Button disabled>Disabled</Button>
-```
-
-### Loading State
-
-Use the `loading` prop to show a spinner and disable the button:
-
-<Preview>
-  <Button loading>Loading</Button>
-</Preview>
-
-```tsx
-<Button loading>Loading</Button>
-```
-
-<div className="flex flex-wrap items-center gap-4">
-  <Preview className="p-4">
-    <Button loading>Saving...</Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button variant="ghost" loading>
-      Processing
-    </Button>
-  </Preview>
-  <Preview className="p-4">
-    <Button variant="outline" loading>
-      Loading
-    </Button>
-  </Preview>
-</div>
-
-```tsx
-<Button loading>Saving...</Button>
-<Button variant="ghost" loading>Processing</Button>
-<Button variant="outline" loading>Loading</Button>
-```
-
-### As Link
-
-Use the `asChild` prop to render the button as a child element, like a link:
-
-<Preview>
-  <Button asChild>
-    <a href="#">Link Button</a>
-  </Button>
-</Preview>
-
-```tsx
-<Button asChild>
-  <a href="/dashboard">Go to Dashboard</a>
-</Button>
-```
-
-## Props
-
-<TypeTable
-  type={{
-    variant: {
-      description: "The visual style of the button",
-      type: "'default' | 'destructive' | 'success' | 'outline' | 'ghost' | 'link'",
-      default: "'default'",
-    },
-    size: {
-      description: "The size of the button",
-      type: "'default' | 'sm' | 'lg' | 'icon'",
-      default: "'default'",
-    },
-    asChild: {
-      description: "Render as a child element using Radix Slot",
-      type: "boolean",
-      default: "false",
-    },
-    disabled: {
-      description: "Whether the button is disabled",
-      type: "boolean",
-      default: "false",
-    },
-    loading: {
-      description: "Whether the button is in a loading state (shows spinner and disables button)",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/calendar.mdx b/apps/www/src/features/design/content/docs/components/calendar.mdx
deleted file mode 100644
index 264279b4a..000000000
--- a/apps/www/src/features/design/content/docs/components/calendar.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Calendar
-description: A date picker component for selecting dates.
----
-
-## Usage
-
-<Preview>
-  <Calendar mode="single" className="rounded-md border" />
-</Preview>
-
-```tsx
-import { Calendar } from "@voidhash/ui";
-
-<Calendar mode="single" />;
-```
-
-## Examples
-
-### Single Date Selection
-
-<Preview>
-  <Calendar mode="single" className="rounded-md border" />
-</Preview>
-
-```tsx
-const [date, setDate] = useState<Date | undefined>(new Date());
-
-<Calendar mode="single" selected={date} onSelect={setDate} />;
-```
-
-### Range Selection
-
-<Preview>
-  <Calendar mode="range" numberOfMonths={2} className="rounded-md border" />
-</Preview>
-
-```tsx
-<Calendar mode="range" numberOfMonths={2} selected={dateRange} onSelect={setDateRange} />
-```
-
-### Multiple Months
-
-<Preview>
-  <Calendar mode="single" numberOfMonths={2} className="rounded-md border" />
-</Preview>
-
-```tsx
-<Calendar mode="single" numberOfMonths={2} />
-```
-
-### Disabled Dates
-
-```tsx
-<Calendar mode="single" disabled={(date) => date < new Date()} />
-```
-
-## Props
-
-<TypeTable
-  type={{
-    mode: {
-      description: "Selection mode",
-      type: "'single' | 'range' | 'multiple'",
-      default: "'single'",
-    },
-    selected: {
-      description: "Selected date(s)",
-      type: "Date | DateRange | Date[]",
-      default: "undefined",
-    },
-    onSelect: {
-      description: "Callback when selection changes",
-      type: "(date: Date | DateRange | Date[]) => void",
-      default: "undefined",
-    },
-    numberOfMonths: {
-      description: "Number of months to display",
-      type: "number",
-      default: "1",
-    },
-    disabled: {
-      description: "Disable specific dates",
-      type: "Matcher | Matcher[]",
-      default: "undefined",
-    },
-    defaultMonth: {
-      description: "Initial month to display",
-      type: "Date",
-      default: "new Date()",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/card.mdx b/apps/www/src/features/design/content/docs/components/card.mdx
deleted file mode 100644
index 5b6d9720d..000000000
--- a/apps/www/src/features/design/content/docs/components/card.mdx
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: Card
-description: A container component for grouping related content and actions.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Card className="w-full max-w-md">
-    <CardHeader>
-      <CardTitle>Card Title</CardTitle>
-      <CardDescription>Card description with additional context.</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p>Card content goes here. This can contain any content you need.</p>
-    </CardContent>
-    <CardFooter>
-      <Button>Action</Button>
-    </CardFooter>
-  </Card>
-</Preview>
-
-```tsx
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@voidhash/ui";
-
-<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card description.</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card content goes here.</p>
-  </CardContent>
-  <CardFooter>
-    <Button>Action</Button>
-  </CardFooter>
-</Card>;
-```
-
-## Components
-
-### Card
-
-The main container with optional variant styling.
-
-### CardHeader
-
-Container for title, description, and optional action.
-
-### CardTitle
-
-The card's heading text.
-
-### CardDescription
-
-Secondary text describing the card's purpose.
-
-### CardAction
-
-An action element positioned in the header.
-
-### CardContent
-
-The main content area of the card.
-
-### CardFooter
-
-Container for action buttons at the bottom.
-
-## Variants
-
-<div className="grid gap-4">
-  <Preview centered={false}>
-    <Card variant="default" className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle>Default Card</CardTitle>
-        <CardDescription>Standard card styling.</CardDescription>
-      </CardHeader>
-      <CardContent>Default variant content.</CardContent>
-    </Card>
-  </Preview>
-  <Preview centered={false}>
-    <Card variant="destructive" className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle>Destructive Card</CardTitle>
-        <CardDescription>Card with destructive border.</CardDescription>
-      </CardHeader>
-      <CardContent>Destructive variant content.</CardContent>
-    </Card>
-  </Preview>
-</div>
-
-```tsx
-<Card variant="default">...</Card>
-<Card variant="destructive">...</Card>
-```
-
-## Examples
-
-### With Action Button
-
-<Preview centered={false}>
-  <Card className="w-full max-w-md">
-    <CardHeader>
-      <CardTitle>Settings</CardTitle>
-      <CardDescription>Manage your account settings.</CardDescription>
-      <CardAction>
-        <Button variant="outline" size="sm">
-          Edit
-        </Button>
-      </CardAction>
-    </CardHeader>
-    <CardContent>
-      <p>Your current settings are displayed here.</p>
-    </CardContent>
-  </Card>
-</Preview>
-
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Settings</CardTitle>
-    <CardDescription>Manage your account settings.</CardDescription>
-    <CardAction>
-      <Button variant="outline" size="sm">
-        Edit
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>...</CardContent>
-</Card>
-```
-
-## Props
-
-### Card Props
-
-<TypeTable
-  type={{
-    variant: {
-      description: "The visual style of the card",
-      type: "'default' | 'destructive'",
-      default: "'default'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/carousel.mdx b/apps/www/src/features/design/content/docs/components/carousel.mdx
deleted file mode 100644
index efa44ca04..000000000
--- a/apps/www/src/features/design/content/docs/components/carousel.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Carousel
-description: A slideshow component for cycling through elements.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Carousel className="w-full max-w-sm">
-    <CarouselContent>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <CarouselItem key={index}>
-          <Card>
-            <CardContent className="flex aspect-square items-center justify-center p-6">
-              <span className="text-4xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-</Preview>
-
-```tsx
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@voidhash/ui";
-
-<Carousel>
-  <CarouselContent>
-    <CarouselItem>Slide 1</CarouselItem>
-    <CarouselItem>Slide 2</CarouselItem>
-    <CarouselItem>Slide 3</CarouselItem>
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>;
-```
-
-## Components
-
-### Carousel
-
-The root container with carousel state.
-
-### CarouselContent
-
-The scrollable container for items.
-
-### CarouselItem
-
-A single slide in the carousel.
-
-### CarouselPrevious
-
-Button to go to the previous slide.
-
-### CarouselNext
-
-Button to go to the next slide.
-
-## Examples
-
-### Multiple Items Per View
-
-<Preview centered={false}>
-  <Carousel className="w-full max-w-md">
-    <CarouselContent className="-ml-4">
-      {Array.from({ length: 5 }).map((_, index) => (
-        <CarouselItem key={index} className="basis-1/3 pl-4">
-          <Card>
-            <CardContent className="flex aspect-square items-center justify-center p-6">
-              <span className="text-2xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-</Preview>
-
-```tsx
-<CarouselItem className="basis-1/3">...</CarouselItem>
-```
-
-### Vertical Orientation
-
-```tsx
-<Carousel orientation="vertical">
-  <CarouselContent className="h-[200px]">
-    <CarouselItem>...</CarouselItem>
-  </CarouselContent>
-</Carousel>
-```
-
-## Props
-
-### Carousel Props
-
-<TypeTable
-  type={{
-    orientation: {
-      description: "Scroll orientation",
-      type: "'horizontal' | 'vertical'",
-      default: "'horizontal'",
-    },
-    opts: {
-      description: "Embla Carousel options",
-      type: "EmblaOptionsType",
-      default: "{}",
-    },
-    setApi: {
-      description: "Callback to receive carousel API",
-      type: "(api: EmblaCarouselType) => void",
-      default: "undefined",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/chart.mdx b/apps/www/src/features/design/content/docs/components/chart.mdx
deleted file mode 100644
index 0b30dcc3f..000000000
--- a/apps/www/src/features/design/content/docs/components/chart.mdx
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Chart
-description: A wrapper around Recharts for consistent chart styling.
----
-
-## Usage
-
-The Chart components provide a styled wrapper around Recharts library.
-
-```tsx
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-} from "@voidhash/ui";
-import { Bar, BarChart, XAxis, YAxis } from "recharts";
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "hsl(var(--chart-1))",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "hsl(var(--chart-2))",
-  },
-};
-
-const data = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-];
-
-<ChartContainer config={chartConfig} className="h-[300px]">
-  <BarChart data={data}>
-    <XAxis dataKey="month" />
-    <YAxis />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <ChartLegend content={<ChartLegendContent />} />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" />
-  </BarChart>
-</ChartContainer>;
-```
-
-## Components
-
-### ChartContainer
-
-The main wrapper that provides chart configuration and styling.
-
-### ChartTooltip
-
-A styled tooltip for displaying data on hover.
-
-### ChartTooltipContent
-
-The content rendered inside the tooltip.
-
-### ChartLegend
-
-A legend component for the chart.
-
-### ChartLegendContent
-
-The content rendered inside the legend.
-
-## Configuration
-
-Define a chart config object to map data keys to labels and colors:
-
-```tsx
-const chartConfig = {
-  revenue: {
-    label: "Revenue",
-    color: "hsl(var(--chart-1))",
-  },
-  expenses: {
-    label: "Expenses",
-    color: "hsl(var(--chart-2))",
-  },
-};
-```
-
-## Available Chart Types
-
-You can use any Recharts chart type:
-
-- AreaChart
-- BarChart
-- LineChart
-- PieChart
-- RadarChart
-- RadialBarChart
-
-## Props
-
-### ChartContainer Props
-
-<TypeTable
-  type={{
-    config: {
-      description: "Chart configuration object",
-      type: "ChartConfig",
-      default: "Required",
-    },
-    className: {
-      description: "CSS classes for sizing",
-      type: "string",
-      default: "undefined",
-    },
-  }}
-/>
-
-### ChartTooltipContent Props
-
-<TypeTable
-  type={{
-    hideLabel: {
-      description: "Hide the label in tooltip",
-      type: "boolean",
-      default: "false",
-    },
-    hideIndicator: {
-      description: "Hide the color indicator",
-      type: "boolean",
-      default: "false",
-    },
-    indicator: {
-      description: "Indicator style",
-      type: "'line' | 'dot' | 'dashed'",
-      default: "'dot'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/checkbox.mdx b/apps/www/src/features/design/content/docs/components/checkbox.mdx
deleted file mode 100644
index 909059860..000000000
--- a/apps/www/src/features/design/content/docs/components/checkbox.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Checkbox
-description: A control that allows the user to toggle between checked and not checked.
----
-
-## Usage
-
-<Preview>
-  <div className="flex items-center gap-2">
-    <Checkbox id="terms" />
-    <Label htmlFor="terms">Accept terms and conditions</Label>
-  </div>
-</Preview>
-
-```tsx
-import { Checkbox } from "@voidhash/ui";
-import { Label } from "@voidhash/ui";
-
-<div className="flex items-center gap-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>;
-```
-
-## Examples
-
-### Checked by Default
-
-<Preview>
-  <div className="flex items-center gap-2">
-    <Checkbox id="default-checked" defaultChecked />
-    <Label htmlFor="default-checked">Checked by default</Label>
-  </div>
-</Preview>
-
-```tsx
-<Checkbox defaultChecked />
-```
-
-### Disabled
-
-<Preview>
-  <div className="flex flex-col gap-4">
-    <div className="flex items-center gap-2">
-      <Checkbox id="disabled" disabled />
-      <Label htmlFor="disabled">Disabled unchecked</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox id="disabled-checked" disabled defaultChecked />
-      <Label htmlFor="disabled-checked">Disabled checked</Label>
-    </div>
-  </div>
-</Preview>
-
-```tsx
-<Checkbox disabled />
-<Checkbox disabled defaultChecked />
-```
-
-### With Form
-
-<Preview centered={false}>
-  <div className="grid gap-4">
-    <div className="flex items-center gap-2">
-      <Checkbox id="newsletter" />
-      <Label htmlFor="newsletter">Subscribe to newsletter</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Checkbox id="marketing" />
-      <Label htmlFor="marketing">Receive marketing emails</Label>
-    </div>
-  </div>
-</Preview>
-
-## Props
-
-<TypeTable
-  type={{
-    checked: {
-      description: "Controlled checked state",
-      type: "boolean | 'indeterminate'",
-      default: "undefined",
-    },
-    defaultChecked: {
-      description: "Initial checked state",
-      type: "boolean",
-      default: "false",
-    },
-    onCheckedChange: {
-      description: "Callback when checked state changes",
-      type: "(checked: boolean | 'indeterminate') => void",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the checkbox is disabled",
-      type: "boolean",
-      default: "false",
-    },
-    required: {
-      description: "Whether the checkbox is required",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/collapsible.mdx b/apps/www/src/features/design/content/docs/components/collapsible.mdx
deleted file mode 100644
index fb3bbca1e..000000000
--- a/apps/www/src/features/design/content/docs/components/collapsible.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Collapsible
-description: An interactive component that expands and collapses content.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Collapsible className="w-full max-w-md space-y-2">
-    <div className="flex items-center justify-between space-x-4 px-4">
-      <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
-      <CollapsibleTrigger asChild>
-        <Button variant="ghost" size="sm">
-          <ChevronDownIcon className="h-4 w-4" />
-          <span className="sr-only">Toggle</span>
-        </Button>
-      </CollapsibleTrigger>
-    </div>
-    <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-      @radix-ui/primitives
-    </div>
-    <CollapsibleContent className="space-y-2">
-      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
-        @radix-ui/colors
-      </div>
-      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@stitches/react</div>
-    </CollapsibleContent>
-  </Collapsible>
-</Preview>
-
-```tsx
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@voidhash/ui";
-
-<Collapsible>
-  <div className="flex items-center justify-between">
-    <span>Toggle content</span>
-    <CollapsibleTrigger asChild>
-      <Button variant="ghost" size="sm">
-        <ChevronDownIcon />
-      </Button>
-    </CollapsibleTrigger>
-  </div>
-  <CollapsibleContent>Hidden content here</CollapsibleContent>
-</Collapsible>;
-```
-
-## Components
-
-### Collapsible
-
-The root component managing collapse state.
-
-### CollapsibleTrigger
-
-The element that toggles the collapsed state.
-
-### CollapsibleContent
-
-The content that is shown/hidden.
-
-## Examples
-
-### Controlled
-
-```tsx
-const [isOpen, setIsOpen] = useState(false);
-
-<Collapsible open={isOpen} onOpenChange={setIsOpen}>
-  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
-  <CollapsibleContent>Content</CollapsibleContent>
-</Collapsible>;
-```
-
-## Props
-
-### Collapsible Props
-
-<TypeTable
-  type={{
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    defaultOpen: {
-      description: "Initial open state",
-      type: "boolean",
-      default: "false",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the collapsible is disabled",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/command.mdx b/apps/www/src/features/design/content/docs/components/command.mdx
deleted file mode 100644
index 87cfa6e99..000000000
--- a/apps/www/src/features/design/content/docs/components/command.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: Command
-description: A command palette component for searching and selecting commands.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Command className="rounded-lg border shadow-md w-full max-w-md">
-    <CommandInput placeholder="Type a command or search..." />
-    <CommandList>
-      <CommandEmpty>No results found.</CommandEmpty>
-      <CommandGroup heading="Suggestions">
-        <CommandItem>
-          <CalendarIcon className="mr-2 h-4 w-4" /> Calendar
-        </CommandItem>
-        <CommandItem>
-          <SearchIcon className="mr-2 h-4 w-4" /> Search
-        </CommandItem>
-        <CommandItem>
-          <SettingsIcon className="mr-2 h-4 w-4" /> Settings
-        </CommandItem>
-      </CommandGroup>
-      <CommandSeparator />
-      <CommandGroup heading="Actions">
-        <CommandItem>
-          <UserIcon className="mr-2 h-4 w-4" /> Profile
-        </CommandItem>
-        <CommandItem>
-          <MailIcon className="mr-2 h-4 w-4" /> Mail
-        </CommandItem>
-      </CommandGroup>
-    </CommandList>
-  </Command>
-</Preview>
-
-```tsx
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@voidhash/ui";
-
-<Command>
-  <CommandInput placeholder="Search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Command>;
-```
-
-## Components
-
-### Command
-
-The root command palette container.
-
-### CommandInput
-
-The search input field.
-
-### CommandList
-
-The scrollable list of results.
-
-### CommandEmpty
-
-Message shown when no results match.
-
-### CommandGroup
-
-A group of related items with a heading.
-
-### CommandItem
-
-An individual selectable item.
-
-### CommandSeparator
-
-A visual divider between groups.
-
-### CommandShortcut
-
-Displays keyboard shortcut text.
-
-### CommandDialog
-
-A dialog-wrapped command palette.
-
-## Examples
-
-### Command Dialog
-
-<Preview>
-  <Button variant="outline" className="text-muted-foreground">
-    <SearchIcon className="mr-2 h-4 w-4" />
-    <span>Search...</span>
-    <CommandShortcut className="ml-4">⌘K</CommandShortcut>
-  </Button>
-</Preview>
-
-```tsx
-import { CommandDialog } from "@voidhash/ui";
-
-const [open, setOpen] = useState(false);
-
-<CommandDialog open={open} onOpenChange={setOpen}>
-  <CommandInput placeholder="Search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Actions">
-      <CommandItem>New File</CommandItem>
-      <CommandItem>New Folder</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</CommandDialog>;
-```
-
-### With Keyboard Shortcut
-
-```tsx
-useEffect(() => {
-  const down = (e: KeyboardEvent) => {
-    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      setOpen((open) => !open);
-    }
-  };
-  document.addEventListener("keydown", down);
-  return () => document.removeEventListener("keydown", down);
-}, []);
-```
-
-## Props
-
-### CommandItem Props
-
-<TypeTable
-  type={{
-    onSelect: {
-      description: "Callback when item is selected",
-      type: "(value: string) => void",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the item is disabled",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/context-menu.mdx b/apps/www/src/features/design/content/docs/components/context-menu.mdx
deleted file mode 100644
index 8307b555e..000000000
--- a/apps/www/src/features/design/content/docs/components/context-menu.mdx
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: Context Menu
-description: A menu that appears on right-click or long-press.
----
-
-## Usage
-
-<Preview centered={false}>
-  <ContextMenu>
-    <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-      Right click here
-    </ContextMenuTrigger>
-    <ContextMenuContent className="w-64">
-      <ContextMenuItem>
-        Back
-        <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-      </ContextMenuItem>
-      <ContextMenuItem disabled>
-        Forward
-        <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-      </ContextMenuItem>
-      <ContextMenuItem>
-        Reload
-        <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-      </ContextMenuItem>
-      <ContextMenuSeparator />
-      <ContextMenuCheckboxItem checked>
-        Show Bookmarks Bar
-        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-      </ContextMenuCheckboxItem>
-      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-      <ContextMenuSeparator />
-      <ContextMenuRadioGroup value="pedro">
-        <ContextMenuLabel inset>People</ContextMenuLabel>
-        <ContextMenuSeparator />
-        <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
-        <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-      </ContextMenuRadioGroup>
-    </ContextMenuContent>
-  </ContextMenu>
-</Preview>
-
-```tsx
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuTrigger,
-} from "@voidhash/ui";
-
-<ContextMenu>
-  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
-  <ContextMenuContent>
-    <ContextMenuItem>Back</ContextMenuItem>
-    <ContextMenuItem>Forward</ContextMenuItem>
-    <ContextMenuSeparator />
-    <ContextMenuCheckboxItem checked>Show Toolbar</ContextMenuCheckboxItem>
-  </ContextMenuContent>
-</ContextMenu>;
-```
-
-## Components
-
-### ContextMenu
-
-The root component.
-
-### ContextMenuTrigger
-
-The element that triggers the menu on right-click.
-
-### ContextMenuContent
-
-The popup menu content.
-
-### ContextMenuItem
-
-A clickable menu item.
-
-### ContextMenuCheckboxItem
-
-A menu item with a checkbox.
-
-### ContextMenuRadioGroup / ContextMenuRadioItem
-
-Radio button items for single selection.
-
-### ContextMenuLabel
-
-A non-interactive label.
-
-### ContextMenuSeparator
-
-A visual divider.
-
-### ContextMenuShortcut
-
-Displays keyboard shortcut text.
-
-### ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent
-
-Submenu components.
-
-## Props
-
-### ContextMenuItem Props
-
-<TypeTable
-  type={{
-    inset: {
-      description: "Add left padding for alignment",
-      type: "boolean",
-      default: "false",
-    },
-    disabled: {
-      description: "Disable the item",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/dialog.mdx b/apps/www/src/features/design/content/docs/components/dialog.mdx
deleted file mode 100644
index 87d66544b..000000000
--- a/apps/www/src/features/design/content/docs/components/dialog.mdx
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Dialog
-description: A modal window that appears on top of the main content.
----
-
-## Usage
-
-<Preview>
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button variant="outline">Open Dialog</Button>
-    </DialogTrigger>
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Edit Profile</DialogTitle>
-        <DialogDescription>
-          Make changes to your profile here. Click save when you're done.
-        </DialogDescription>
-      </DialogHeader>
-      <div className="grid gap-4 py-4">
-        <div className="grid gap-2">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="John Doe" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" defaultValue="john@example.com" />
-        </div>
-      </div>
-      <DialogFooter>
-        <Button type="submit">Save changes</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</Preview>
-
-```tsx
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@voidhash/ui";
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">Open Dialog</Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Edit Profile</DialogTitle>
-      <DialogDescription>Make changes to your profile here.</DialogDescription>
-    </DialogHeader>
-    <div className="py-4">{/* Dialog content */}</div>
-    <DialogFooter>
-      <Button type="submit">Save changes</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>;
-```
-
-## Components
-
-### Dialog
-
-The root component that manages dialog state.
-
-### DialogTrigger
-
-The element that opens the dialog when clicked.
-
-### DialogContent
-
-The modal content container with close button and overlay.
-
-### DialogHeader
-
-Container for title and description.
-
-### DialogTitle
-
-The dialog's heading text.
-
-### DialogDescription
-
-A description of the dialog's purpose.
-
-### DialogFooter
-
-Container for action buttons at the bottom.
-
-### DialogClose
-
-An element that closes the dialog when clicked.
-
-## Examples
-
-### Simple Confirmation
-
-<Preview>
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button>Confirm Action</Button>
-    </DialogTrigger>
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Confirm</DialogTitle>
-        <DialogDescription>Are you sure you want to continue?</DialogDescription>
-      </DialogHeader>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <Button>Continue</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</Preview>
-
-```tsx
-<DialogClose asChild>
-  <Button variant="outline">Cancel</Button>
-</DialogClose>
-```
-
-## Props
-
-### Dialog Props
-
-<TypeTable
-  type={{
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-    defaultOpen: {
-      description: "Initial open state",
-      type: "boolean",
-      default: "false",
-    },
-    modal: {
-      description: "Whether to render as modal",
-      type: "boolean",
-      default: "true",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/drawer.mdx b/apps/www/src/features/design/content/docs/components/drawer.mdx
deleted file mode 100644
index 8e7603a80..000000000
--- a/apps/www/src/features/design/content/docs/components/drawer.mdx
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: Drawer
-description: A touch-friendly panel that slides from any edge with gesture support.
----
-
-## Usage
-
-<Preview>
-  <Drawer>
-    <DrawerTrigger asChild>
-      <Button variant="outline">Open Drawer</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Drawer Title</DrawerTitle>
-        <DrawerDescription>This is a drawer with touch gestures support.</DrawerDescription>
-      </DrawerHeader>
-      <div className="p-4">
-        <p>Drawer content goes here.</p>
-      </div>
-      <DrawerFooter>
-        <Button>Submit</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
-</Preview>
-
-```tsx
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@voidhash/ui";
-
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button variant="outline">Open Drawer</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    <DrawerHeader>
-      <DrawerTitle>Drawer Title</DrawerTitle>
-      <DrawerDescription>Description here.</DrawerDescription>
-    </DrawerHeader>
-    <div className="p-4">Content</div>
-    <DrawerFooter>
-      <Button>Submit</Button>
-      <DrawerClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </DrawerClose>
-    </DrawerFooter>
-  </DrawerContent>
-</Drawer>;
-```
-
-## Components
-
-### Drawer
-
-The root component managing drawer state.
-
-### DrawerTrigger
-
-The element that opens the drawer.
-
-### DrawerContent
-
-The sliding panel with a handle indicator.
-
-### DrawerHeader
-
-Container for title and description.
-
-### DrawerTitle
-
-The drawer's heading.
-
-### DrawerDescription
-
-A description of the drawer's purpose.
-
-### DrawerFooter
-
-Container for action buttons.
-
-### DrawerClose
-
-An element that closes the drawer.
-
-## Examples
-
-### Different Directions
-
-<Preview>
-  <div className="flex gap-2">
-    <Drawer direction="bottom">
-      <DrawerTrigger asChild>
-        <Button variant="outline">Bottom</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Bottom Drawer</DrawerTitle>
-        </DrawerHeader>
-      </DrawerContent>
-    </Drawer>
-    <Drawer direction="left">
-      <DrawerTrigger asChild>
-        <Button variant="outline">Left</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Left Drawer</DrawerTitle>
-        </DrawerHeader>
-      </DrawerContent>
-    </Drawer>
-    <Drawer direction="right">
-      <DrawerTrigger asChild>
-        <Button variant="outline">Right</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Right Drawer</DrawerTitle>
-        </DrawerHeader>
-      </DrawerContent>
-    </Drawer>
-  </div>
-</Preview>
-
-```tsx
-<Drawer direction="bottom">...</Drawer>
-<Drawer direction="left">...</Drawer>
-<Drawer direction="right">...</Drawer>
-```
-
-## Props
-
-### Drawer Props
-
-<TypeTable
-  type={{
-    direction: {
-      description: "The edge to slide from",
-      type: "'top' | 'right' | 'bottom' | 'left'",
-      default: "'bottom'",
-    },
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-    shouldScaleBackground: {
-      description: "Whether to scale the background",
-      type: "boolean",
-      default: "true",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/dropdown-menu.mdx b/apps/www/src/features/design/content/docs/components/dropdown-menu.mdx
deleted file mode 100644
index cd33c5250..000000000
--- a/apps/www/src/features/design/content/docs/components/dropdown-menu.mdx
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Dropdown Menu
-description: A menu with a set of actions triggered by a button.
----
-
-## Usage
-
-<Preview>
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="outline">Open Menu</Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuLabel>My Account</DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem>
-        <UserIcon /> Profile
-      </DropdownMenuItem>
-      <DropdownMenuItem>
-        <SettingsIcon /> Settings
-      </DropdownMenuItem>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem variant="destructive">
-        <TrashIcon /> Delete
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</Preview>
-
-```tsx
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@voidhash/ui";
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open Menu</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Settings</DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-## Components
-
-### DropdownMenu
-
-The root component managing menu state.
-
-### DropdownMenuTrigger
-
-The element that opens the menu.
-
-### DropdownMenuContent
-
-The popup content container.
-
-### DropdownMenuItem
-
-A clickable menu item.
-
-### DropdownMenuLabel
-
-A non-interactive label.
-
-### DropdownMenuSeparator
-
-A visual divider between items.
-
-### DropdownMenuCheckboxItem
-
-A menu item with a checkbox.
-
-### DropdownMenuRadioGroup / DropdownMenuRadioItem
-
-Radio button items for single selection.
-
-### DropdownMenuShortcut
-
-Displays keyboard shortcut text.
-
-### DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent
-
-Nested submenu components.
-
-## Examples
-
-### With Checkbox Items
-
-<Preview>
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="outline">View Options</Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <DropdownMenuCheckboxItem checked>Show Toolbar</DropdownMenuCheckboxItem>
-      <DropdownMenuCheckboxItem>Show Sidebar</DropdownMenuCheckboxItem>
-      <DropdownMenuCheckboxItem>Show Status Bar</DropdownMenuCheckboxItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</Preview>
-
-```tsx
-<DropdownMenuCheckboxItem checked>Show Toolbar</DropdownMenuCheckboxItem>
-```
-
-### With Keyboard Shortcuts
-
-<Preview>
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="outline">Edit</Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent className="w-56">
-      <DropdownMenuItem>
-        Cut
-        <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
-      </DropdownMenuItem>
-      <DropdownMenuItem>
-        Copy
-        <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
-      </DropdownMenuItem>
-      <DropdownMenuItem>
-        Paste
-        <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</Preview>
-
-```tsx
-<DropdownMenuItem>
-  Cut
-  <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
-</DropdownMenuItem>
-```
-
-### Destructive Item
-
-<Preview>
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="outline">Actions</Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem>Edit</DropdownMenuItem>
-      <DropdownMenuItem>Duplicate</DropdownMenuItem>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem variant="destructive">
-        <TrashIcon /> Delete
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</Preview>
-
-```tsx
-<DropdownMenuItem variant="destructive">
-  <TrashIcon /> Delete
-</DropdownMenuItem>
-```
-
-## Props
-
-### DropdownMenuItem Props
-
-<TypeTable
-  type={{
-    variant: {
-      description: "Visual variant",
-      type: "'default' | 'destructive'",
-      default: "'default'",
-    },
-    inset: {
-      description: "Add left padding for alignment",
-      type: "boolean",
-      default: "false",
-    },
-    disabled: {
-      description: "Disable the item",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/dropzone.mdx b/apps/www/src/features/design/content/docs/components/dropzone.mdx
deleted file mode 100644
index 1ae1f3641..000000000
--- a/apps/www/src/features/design/content/docs/components/dropzone.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Dropzone
-description: A file upload zone with drag and drop support.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Dropzone className="w-full max-w-md" />
-</Preview>
-
-```tsx
-import { Dropzone } from "@voidhash/ui";
-
-<Dropzone
-  onDrop={(files) => console.log(files)}
-  accept={{ "image/*": [".png", ".jpg", ".jpeg"] }}
-/>;
-```
-
-## Examples
-
-### With Custom Content
-
-```tsx
-<Dropzone>
-  <div className="flex flex-col items-center gap-2">
-    <UploadIcon className="h-8 w-8 text-muted-foreground" />
-    <p className="text-sm text-muted-foreground">Drag and drop files here, or click to browse</p>
-  </div>
-</Dropzone>
-```
-
-### Accept Specific File Types
-
-```tsx
-<Dropzone
-  accept={{
-    "image/*": [".png", ".jpg", ".jpeg", ".gif"],
-    "application/pdf": [".pdf"],
-  }}
-/>
-```
-
-### With Max File Size
-
-```tsx
-<Dropzone
-  maxSize={5 * 1024 * 1024} // 5MB
-  onDropRejected={(files) => {
-    toast.error("File too large");
-  }}
-/>
-```
-
-### Multiple Files
-
-```tsx
-<Dropzone
-  multiple
-  onDrop={(files) => {
-    console.log("Dropped files:", files);
-  }}
-/>
-```
-
-## Props
-
-<TypeTable
-  type={{
-    onDrop: {
-      description: "Callback when files are dropped",
-      type: "(files: File[]) => void",
-      default: "undefined",
-    },
-    onDropRejected: {
-      description: "Callback when files are rejected",
-      type: "(files: FileRejection[]) => void",
-      default: "undefined",
-    },
-    accept: {
-      description: "Accepted file types",
-      type: "Accept",
-      default: "undefined",
-    },
-    maxSize: {
-      description: "Maximum file size in bytes",
-      type: "number",
-      default: "undefined",
-    },
-    multiple: {
-      description: "Allow multiple files",
-      type: "boolean",
-      default: "false",
-    },
-    disabled: {
-      description: "Disable the dropzone",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/form.mdx b/apps/www/src/features/design/content/docs/components/form.mdx
deleted file mode 100644
index 89986f6b4..000000000
--- a/apps/www/src/features/design/content/docs/components/form.mdx
+++ /dev/null
@@ -1,186 +0,0 @@
----
-title: Form
-description: Form components with validation using react-hook-form and zod.
----
-
-## Usage
-
-The Form components integrate with react-hook-form for validation and error handling.
-
-```tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import * as z from "zod";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@voidhash/ui";
-
-const formSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-});
-
-function ProfileForm() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      username: "",
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="username" {...field} />
-              </FormControl>
-              <FormDescription>This is your public display name.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  );
-}
-```
-
-## Components
-
-### Form
-
-The root form provider that wraps react-hook-form.
-
-### FormField
-
-Connects a form field to react-hook-form's control.
-
-### FormItem
-
-Container for a single form field.
-
-### FormLabel
-
-The label for a form field.
-
-### FormControl
-
-Wrapper for the form input element.
-
-### FormDescription
-
-Helper text for the form field.
-
-### FormMessage
-
-Displays validation error messages.
-
-## Examples
-
-### With Multiple Fields
-
-```tsx
-<Form {...form}>
-  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-    <FormField
-      control={form.control}
-      name="email"
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>Email</FormLabel>
-          <FormControl>
-            <Input type="email" {...field} />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-    <FormField
-      control={form.control}
-      name="password"
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>Password</FormLabel>
-          <FormControl>
-            <Input type="password" {...field} />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-    <Button type="submit">Submit</Button>
-  </form>
-</Form>
-```
-
-### With Select
-
-```tsx
-<FormField
-  control={form.control}
-  name="role"
-  render={({ field }) => (
-    <FormItem>
-      <FormLabel>Role</FormLabel>
-      <Select onValueChange={field.onChange} defaultValue={field.value}>
-        <FormControl>
-          <SelectTrigger>
-            <SelectValue placeholder="Select a role" />
-          </SelectTrigger>
-        </FormControl>
-        <SelectContent>
-          <SelectItem value="admin">Admin</SelectItem>
-          <SelectItem value="user">User</SelectItem>
-        </SelectContent>
-      </Select>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
-### With Checkbox
-
-```tsx
-<FormField
-  control={form.control}
-  name="terms"
-  render={({ field }) => (
-    <FormItem className="flex items-start space-x-3 space-y-0">
-      <FormControl>
-        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
-      </FormControl>
-      <div className="space-y-1 leading-none">
-        <FormLabel>Accept terms and conditions</FormLabel>
-        <FormDescription>You agree to our Terms of Service.</FormDescription>
-      </div>
-    </FormItem>
-  )}
-/>
-```
-
-## Dependencies
-
-The Form component requires:
-
-```bash
-npm install react-hook-form @hookform/resolvers zod
-```
diff --git a/apps/www/src/features/design/content/docs/components/hover-card.mdx b/apps/www/src/features/design/content/docs/components/hover-card.mdx
deleted file mode 100644
index 66405abc1..000000000
--- a/apps/www/src/features/design/content/docs/components/hover-card.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: Hover Card
-description: A card that appears when hovering over an element.
----
-
-## Usage
-
-<Preview>
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="link">@nextjs</Button>
-    </HoverCardTrigger>
-    <HoverCardContent>
-      <div className="flex justify-between space-x-4">
-        <Avatar>
-          <AvatarImage src="https://github.com/vercel.png" />
-          <AvatarFallback>VC</AvatarFallback>
-        </Avatar>
-        <div className="space-y-1">
-          <h4 className="text-sm font-semibold">@nextjs</h4>
-          <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
-          <div className="flex items-center pt-2">
-            <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />
-            <span className="text-xs text-muted-foreground">Joined December 2021</span>
-          </div>
-        </div>
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-</Preview>
-
-```tsx
-import { HoverCard, HoverCardContent, HoverCardTrigger } from "@voidhash/ui";
-
-<HoverCard>
-  <HoverCardTrigger asChild>
-    <Button variant="link">@nextjs</Button>
-  </HoverCardTrigger>
-  <HoverCardContent>
-    <div className="space-y-1">
-      <h4 className="text-sm font-semibold">@nextjs</h4>
-      <p className="text-sm">The React Framework.</p>
-    </div>
-  </HoverCardContent>
-</HoverCard>;
-```
-
-## Components
-
-### HoverCard
-
-The root component managing hover state.
-
-### HoverCardTrigger
-
-The element that triggers the card on hover.
-
-### HoverCardContent
-
-The popup card content.
-
-## Examples
-
-### Simple Hover Card
-
-<Preview>
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <span className="text-primary underline cursor-pointer">Hover me</span>
-    </HoverCardTrigger>
-    <HoverCardContent>
-      <p className="text-sm">This is additional information.</p>
-    </HoverCardContent>
-  </HoverCard>
-</Preview>
-
-```tsx
-<HoverCard>
-  <HoverCardTrigger asChild>
-    <span className="underline cursor-pointer">Hover me</span>
-  </HoverCardTrigger>
-  <HoverCardContent>
-    <p>Additional information.</p>
-  </HoverCardContent>
-</HoverCard>
-```
-
-## Props
-
-### HoverCard Props
-
-<TypeTable
-  type={{
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-    openDelay: {
-      description: "Delay before opening in ms",
-      type: "number",
-      default: "700",
-    },
-    closeDelay: {
-      description: "Delay before closing in ms",
-      type: "number",
-      default: "300",
-    },
-  }}
-/>
-
-### HoverCardContent Props
-
-<TypeTable
-  type={{
-    side: {
-      description: "Side to display the card",
-      type: "'top' | 'right' | 'bottom' | 'left'",
-      default: "'bottom'",
-    },
-    align: {
-      description: "Alignment along the side",
-      type: "'start' | 'center' | 'end'",
-      default: "'center'",
-    },
-    sideOffset: {
-      description: "Distance from trigger in pixels",
-      type: "number",
-      default: "4",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/input-otp.mdx b/apps/www/src/features/design/content/docs/components/input-otp.mdx
deleted file mode 100644
index 4cddb0fa0..000000000
--- a/apps/www/src/features/design/content/docs/components/input-otp.mdx
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: Input OTP
-description: A one-time password input component for verification codes.
----
-
-## Usage
-
-<Preview>
-  <InputOTP maxLength={6}>
-    <InputOTPGroup>
-      <InputOTPSlot index={0} />
-      <InputOTPSlot index={1} />
-      <InputOTPSlot index={2} />
-    </InputOTPGroup>
-    <InputOTPSeparator />
-    <InputOTPGroup>
-      <InputOTPSlot index={3} />
-      <InputOTPSlot index={4} />
-      <InputOTPSlot index={5} />
-    </InputOTPGroup>
-  </InputOTP>
-</Preview>
-
-```tsx
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@voidhash/ui";
-
-<InputOTP maxLength={6}>
-  <InputOTPGroup>
-    <InputOTPSlot index={0} />
-    <InputOTPSlot index={1} />
-    <InputOTPSlot index={2} />
-  </InputOTPGroup>
-  <InputOTPSeparator />
-  <InputOTPGroup>
-    <InputOTPSlot index={3} />
-    <InputOTPSlot index={4} />
-    <InputOTPSlot index={5} />
-  </InputOTPGroup>
-</InputOTP>;
-```
-
-## Components
-
-### InputOTP
-
-The root component managing OTP input state.
-
-### InputOTPGroup
-
-A group of OTP slots.
-
-### InputOTPSlot
-
-A single input slot for one character.
-
-### InputOTPSeparator
-
-A visual separator between groups.
-
-## Examples
-
-### 4-Digit Code
-
-<Preview>
-  <InputOTP maxLength={4}>
-    <InputOTPGroup>
-      <InputOTPSlot index={0} />
-      <InputOTPSlot index={1} />
-      <InputOTPSlot index={2} />
-      <InputOTPSlot index={3} />
-    </InputOTPGroup>
-  </InputOTP>
-</Preview>
-
-```tsx
-<InputOTP maxLength={4}>
-  <InputOTPGroup>
-    <InputOTPSlot index={0} />
-    <InputOTPSlot index={1} />
-    <InputOTPSlot index={2} />
-    <InputOTPSlot index={3} />
-  </InputOTPGroup>
-</InputOTP>
-```
-
-### Controlled
-
-```tsx
-const [value, setValue] = useState("");
-
-<InputOTP maxLength={6} value={value} onChange={setValue}>
-  ...
-</InputOTP>;
-```
-
-### Pattern Validation
-
-```tsx
-<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
-  ...
-</InputOTP>
-```
-
-## Props
-
-### InputOTP Props
-
-<TypeTable
-  type={{
-    maxLength: {
-      description: "Maximum number of characters",
-      type: "number",
-      default: "Required",
-    },
-    value: {
-      description: "Controlled value",
-      type: "string",
-      default: "undefined",
-    },
-    onChange: {
-      description: "Callback when value changes",
-      type: "(value: string) => void",
-      default: "undefined",
-    },
-    pattern: {
-      description: "Regex pattern for validation",
-      type: "string | RegExp",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Disable the input",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/input.mdx b/apps/www/src/features/design/content/docs/components/input.mdx
deleted file mode 100644
index 5e4072f5a..000000000
--- a/apps/www/src/features/design/content/docs/components/input.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Input
-description: A basic text input field for user data entry.
----
-
-## Usage
-
-<Preview>
-  <Input placeholder="Enter text..." />
-</Preview>
-
-```tsx
-import { Input } from "@voidhash/ui";
-
-<Input placeholder="Enter text..." />;
-```
-
-## Examples
-
-### With Label
-
-<Preview centered={false}>
-  <div className="grid gap-2 w-full max-w-sm">
-    <Label htmlFor="email">Email</Label>
-    <Input id="email" type="email" placeholder="email@example.com" />
-  </div>
-</Preview>
-
-```tsx
-<div className="grid gap-2">
-  <Label htmlFor="email">Email</Label>
-  <Input id="email" type="email" placeholder="email@example.com" />
-</div>
-```
-
-### Input Types
-
-<Preview centered={false}>
-  <div className="grid gap-4 w-full max-w-sm">
-    <Input type="text" placeholder="Text input" />
-    <Input type="email" placeholder="Email input" />
-    <Input type="password" placeholder="Password input" />
-    <Input type="number" placeholder="Number input" />
-    <Input type="search" placeholder="Search input" />
-  </div>
-</Preview>
-
-```tsx
-<Input type="text" placeholder="Text input" />
-<Input type="email" placeholder="Email input" />
-<Input type="password" placeholder="Password input" />
-<Input type="number" placeholder="Number input" />
-<Input type="search" placeholder="Search input" />
-```
-
-### Disabled
-
-<Preview>
-  <Input disabled placeholder="Disabled input" />
-</Preview>
-
-```tsx
-<Input disabled placeholder="Disabled input" />
-```
-
-### With Error State
-
-<Preview>
-  <Input aria-invalid placeholder="Invalid input" />
-</Preview>
-
-```tsx
-<Input aria-invalid placeholder="Invalid input" />
-```
-
-### File Input
-
-<Preview>
-  <Input type="file" />
-</Preview>
-
-```tsx
-<Input type="file" />
-```
-
-## Props
-
-The Input component accepts all standard HTML input attributes.
-
-<TypeTable
-  type={{
-    type: {
-      description: "The input type",
-      type: "string",
-      default: "'text'",
-    },
-    placeholder: {
-      description: "Placeholder text",
-      type: "string",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the input is disabled",
-      type: "boolean",
-      default: "false",
-    },
-    "aria-invalid": {
-      description: "Indicates an error state",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/label.mdx b/apps/www/src/features/design/content/docs/components/label.mdx
deleted file mode 100644
index eb2344556..000000000
--- a/apps/www/src/features/design/content/docs/components/label.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Label
-description: Renders an accessible label associated with form controls.
----
-
-## Usage
-
-<Preview>
-  <div className="grid gap-2">
-    <Label htmlFor="name">Name</Label>
-    <Input id="name" placeholder="Enter your name" />
-  </div>
-</Preview>
-
-```tsx
-import { Label } from "@voidhash/ui";
-import { Input } from "@voidhash/ui";
-
-<div className="grid gap-2">
-  <Label htmlFor="name">Name</Label>
-  <Input id="name" placeholder="Enter your name" />
-</div>;
-```
-
-## Examples
-
-### With Checkbox
-
-<Preview>
-  <div className="flex items-center gap-2">
-    <Checkbox id="agree" />
-    <Label htmlFor="agree">I agree to the terms</Label>
-  </div>
-</Preview>
-
-```tsx
-<div className="flex items-center gap-2">
-  <Checkbox id="agree" />
-  <Label htmlFor="agree">I agree to the terms</Label>
-</div>
-```
-
-### With Required Indicator
-
-<Preview>
-  <div className="grid gap-2">
-    <Label htmlFor="required-field">
-      Email <span className="text-destructive">*</span>
-    </Label>
-    <Input id="required-field" type="email" required />
-  </div>
-</Preview>
-
-```tsx
-<Label htmlFor="email">
-  Email <span className="text-destructive">*</span>
-</Label>
-```
-
-### Disabled State
-
-The label automatically adjusts its style when associated with a disabled input.
-
-<Preview>
-  <div className="grid gap-2">
-    <Label htmlFor="disabled-input">Disabled Field</Label>
-    <Input id="disabled-input" disabled placeholder="Disabled" />
-  </div>
-</Preview>
-
-## Props
-
-<TypeTable
-  type={{
-    htmlFor: {
-      description: "The ID of the form element this label is for",
-      type: "string",
-      default: "undefined",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/menubar.mdx b/apps/www/src/features/design/content/docs/components/menubar.mdx
deleted file mode 100644
index a8d6bd2ef..000000000
--- a/apps/www/src/features/design/content/docs/components/menubar.mdx
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: Menubar
-description: A horizontal menu bar with dropdown menus.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>File</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>
-          New Window <MenubarShortcut>⌘N</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Share</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Print</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-    <MenubarMenu>
-      <MenubarTrigger>Edit</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>
-          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Cut</MenubarItem>
-        <MenubarItem>Copy</MenubarItem>
-        <MenubarItem>Paste</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-    <MenubarMenu>
-      <MenubarTrigger>View</MenubarTrigger>
-      <MenubarContent>
-        <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
-        <MenubarCheckboxItem checked>Show Statusbar</MenubarCheckboxItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-</Preview>
-
-```tsx
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from "@voidhash/ui";
-
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>New Tab</MenubarItem>
-      <MenubarItem>New Window</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>;
-```
-
-## Components
-
-### Menubar
-
-The root horizontal menu container.
-
-### MenubarMenu
-
-A single menu in the menubar.
-
-### MenubarTrigger
-
-The trigger button for a menu.
-
-### MenubarContent
-
-The dropdown content of a menu.
-
-### MenubarItem
-
-A clickable menu item.
-
-### MenubarCheckboxItem
-
-A menu item with a checkbox.
-
-### MenubarRadioGroup / MenubarRadioItem
-
-Radio button items.
-
-### MenubarLabel
-
-A non-interactive label.
-
-### MenubarSeparator
-
-A visual divider.
-
-### MenubarShortcut
-
-Displays keyboard shortcut text.
-
-### MenubarSub / MenubarSubTrigger / MenubarSubContent
-
-Submenu components.
-
-## Props
-
-### MenubarItem Props
-
-<TypeTable
-  type={{
-    inset: {
-      description: "Add left padding for alignment",
-      type: "boolean",
-      default: "false",
-    },
-    disabled: {
-      description: "Disable the item",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/meta.yaml b/apps/www/src/features/design/content/docs/components/meta.yaml
deleted file mode 100644
index 6edb3f8b6..000000000
--- a/apps/www/src/features/design/content/docs/components/meta.yaml
+++ /dev/null
@@ -1,53 +0,0 @@
-icon: Component
-title: Components
-pages:
-  - overview
-  - accordion
-  - alert
-  - alert-dialog
-  - avatar
-  - badge
-  - breadcrumb
-  - button
-  - calendar
-  - card
-  - carousel
-  - chart
-  - checkbox
-  - collapsible
-  - command
-  - context-menu
-  - dialog
-  - drawer
-  - dropdown-menu
-  - dropzone
-  - form
-  - hover-card
-  - input
-  - input-otp
-  - label
-  - menubar
-  - navigation-menu
-  - page-bar
-  - pagination
-  - phone
-  - popover
-  - progress
-  - radio-group
-  - resizable
-  - scroll-area
-  - select
-  - separator
-  - sheet
-  - sidebar
-  - skeleton
-  - slider
-  - sonner
-  - switch
-  - table
-  - tabs
-  - textarea
-  - toggle
-  - toggle-group
-  - tooltip
-  - underline-tabs
diff --git a/apps/www/src/features/design/content/docs/components/navigation-menu.mdx b/apps/www/src/features/design/content/docs/components/navigation-menu.mdx
deleted file mode 100644
index 51a914de6..000000000
--- a/apps/www/src/features/design/content/docs/components/navigation-menu.mdx
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Navigation Menu
-description: A collection of links for navigating websites with dropdown menus.
----
-
-## Usage
-
-<Preview centered={false}>
-  <NavigationMenu>
-    <NavigationMenuList>
-      <NavigationMenuItem>
-        <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
-        <NavigationMenuContent>
-          <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-            <li className="row-span-3">
-              <NavigationMenuLink asChild>
-                <a
-                  className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6"
-                  href="/"
-                >
-                  <div className="mb-2 mt-4 text-lg font-medium">Voidhash</div>
-                  <p className="text-sm leading-tight text-muted-foreground">
-                    Build your next project faster.
-                  </p>
-                </a>
-              </NavigationMenuLink>
-            </li>
-            <li>
-              <NavigationMenuLink asChild>
-                <a href="/docs">Introduction</a>
-              </NavigationMenuLink>
-            </li>
-            <li>
-              <NavigationMenuLink asChild>
-                <a href="/docs/installation">Installation</a>
-              </NavigationMenuLink>
-            </li>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-      <NavigationMenuItem>
-        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-        <NavigationMenuContent>
-          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
-            <li>
-              <NavigationMenuLink asChild>
-                <a href="/docs/components/button">Button</a>
-              </NavigationMenuLink>
-            </li>
-            <li>
-              <NavigationMenuLink asChild>
-                <a href="/docs/components/card">Card</a>
-              </NavigationMenuLink>
-            </li>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-      <NavigationMenuItem>
-        <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
-      </NavigationMenuItem>
-    </NavigationMenuList>
-  </NavigationMenu>
-</Preview>
-
-```tsx
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from "@voidhash/ui";
-
-<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid gap-3 p-4 w-[400px]">
-          <li>
-            <NavigationMenuLink href="/link1">Link 1</NavigationMenuLink>
-          </li>
-          <li>
-            <NavigationMenuLink href="/link2">Link 2</NavigationMenuLink>
-          </li>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-</NavigationMenu>;
-```
-
-## Components
-
-### NavigationMenu
-
-The root navigation container.
-
-### NavigationMenuList
-
-The list of navigation items.
-
-### NavigationMenuItem
-
-A single navigation item.
-
-### NavigationMenuTrigger
-
-A button that opens a dropdown.
-
-### NavigationMenuContent
-
-The dropdown content area.
-
-### NavigationMenuLink
-
-A navigation link.
-
-### NavigationMenuIndicator
-
-Visual indicator for the active item.
-
-### NavigationMenuPositioner
-
-The portaled popup that dropdown content animates through. `NavigationMenu` renders one
-automatically; render it yourself only when you need custom positioning.
-
-## Props
-
-### NavigationMenu Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "Controlled active item",
-      type: "string",
-      default: "undefined",
-    },
-    defaultValue: {
-      description: "Initial active item",
-      type: "string",
-      default: "undefined",
-    },
-    onValueChange: {
-      description: "Callback when active item changes",
-      type: "(value: string) => void",
-      default: "undefined",
-    },
-    orientation: {
-      description: "Menu orientation",
-      type: "'horizontal' | 'vertical'",
-      default: "'horizontal'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/overview.mdx b/apps/www/src/features/design/content/docs/components/overview.mdx
deleted file mode 100644
index 21322b7ae..000000000
--- a/apps/www/src/features/design/content/docs/components/overview.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Component Overview
-description: Real product examples composed from the Voidhash design system.
-full: true
----
-
-<ComponentOverview />
diff --git a/apps/www/src/features/design/content/docs/components/page-bar.mdx b/apps/www/src/features/design/content/docs/components/page-bar.mdx
deleted file mode 100644
index c90ca367e..000000000
--- a/apps/www/src/features/design/content/docs/components/page-bar.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Page Bar
-description: A full-width secondary bar below the page header with tabs and actions on either side.
----
-
-## Usage
-
-`PageBar` shares the horizontal spacing and bottom border of `PageHeader`, so its underline runs edge to edge. Both sides accept tabs and buttons: the left side via `children`, the right side via `rightActions`.
-
-<Preview centered={false} className="overflow-hidden p-0">
-  <PageTabs defaultValue="all">
-    <PageHeader rightActions={<Button size="sm"><PlusIcon data-icon="inline-start" />New paywall</Button>}>
-      <PageHeaderTitle>Paywalls</PageHeaderTitle>
-    </PageHeader>
-    <PageBar rightActions={<Button size="sm" variant="ghost">Filter</Button>}>
-      <PageBarTabs>
-        <PageBarTab value="all">All</PageBarTab>
-        <PageBarTab value="active">Active</PageBarTab>
-        <PageBarTab value="inactive">Inactive</PageBarTab>
-        <PageBarTab value="archived">Archived</PageBarTab>
-      </PageBarTabs>
-    </PageBar>
-    <div className="p-4 text-muted-foreground text-sm">Page content</div>
-  </PageTabs>
-</Preview>
-
-```tsx
-import { PageBar, PageBarTab, PageBarTabs, PageTabs } from "@voidhash/ui";
-
-<PageTabs defaultValue="all">
-  <PageBar rightActions={<Button size="sm">Action</Button>}>
-    <PageBarTabs>
-      <PageBarTab value="all">All</PageBarTab>
-      <PageBarTab value="archived">Archived</PageBarTab>
-    </PageBarTabs>
-  </PageBar>
-  {/* tab content rendered anywhere below the bar */}
-</PageTabs>;
-```
-
-## Components
-
-### PageTabs
-
-Unstyled tabs root. Wrap it around the `PageBar` and the tab content so `PageBarTab` triggers can control content rendered anywhere below the bar. Omit it when the bar holds no tabs.
-
-### PageBar
-
-The bar itself. `children` render on the left, `rightActions` on the right; both sides vertically center buttons while tabs stretch to the full bar height.
-
-### PageBarTabs
-
-Tab strip for use inside a `PageBar`. The active underline sits on the bar's bottom border.
-
-### PageBarTab
-
-A single tab trigger inside `PageBarTabs`.
diff --git a/apps/www/src/features/design/content/docs/components/pagination.mdx b/apps/www/src/features/design/content/docs/components/pagination.mdx
deleted file mode 100644
index 458dc1758..000000000
--- a/apps/www/src/features/design/content/docs/components/pagination.mdx
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Pagination
-description: Navigation component for paginated content.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">1</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          2
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationEllipsis />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-</Preview>
-
-```tsx
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@voidhash/ui";
-
-<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationPrevious href="#" />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#" isActive>
-        2
-      </PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationNext href="#" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>;
-```
-
-## Components
-
-### Pagination
-
-The root navigation container.
-
-### PaginationContent
-
-The list container for pagination items.
-
-### PaginationItem
-
-A single item in the pagination.
-
-### PaginationLink
-
-A page number link.
-
-### PaginationPrevious
-
-The previous page button.
-
-### PaginationNext
-
-The next page button.
-
-### PaginationEllipsis
-
-An ellipsis indicator for skipped pages.
-
-## Examples
-
-### Simple Pagination
-
-<Preview centered={false}>
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">2</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-</Preview>
-
-## Props
-
-### PaginationLink Props
-
-<TypeTable
-  type={{
-    href: {
-      description: "The URL for the page",
-      type: "string",
-      default: "undefined",
-    },
-    isActive: {
-      description: "Whether this is the current page",
-      type: "boolean",
-      default: "false",
-    },
-    size: {
-      description: "Size of the link button",
-      type: "'default' | 'sm' | 'lg' | 'icon'",
-      default: "'icon'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/phone.mdx b/apps/www/src/features/design/content/docs/components/phone.mdx
deleted file mode 100644
index cf796e051..000000000
--- a/apps/www/src/features/design/content/docs/components/phone.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Phone
-description: A phone mockup that frames arbitrary screen content and scales to any width.
----
-
-## Usage
-
-`Phone` renders a black device body with a 9:19.5 screen, dynamic island, home indicator and side buttons. Every dimension is expressed in container-query units against the device's own width, so the same component reads correctly from a dashboard thumbnail up to a full-size preview. Children are clipped to the rounded screen — give them `size-full` to fill it.
-
-<Preview>
-  <Phone className="w-[220px]" screenClassName="bg-linear-150 from-blue-ribbon-700 to-electric-violet-800" />
-</Preview>
-
-```tsx
-import { Phone } from "@voidhash/ui";
-
-<Phone className="w-[220px]">
-  <img alt="" className="size-full object-cover object-top" src={thumbnailUrl} />
-</Phone>;
-```
-
-## Sizing from height
-
-By default the device fills the available width. Pass `fitHeight` to derive the width from the available height instead — pair it with `h-full` or `max-h-*` on `className`.
-
-<Preview className="h-[320px]">
-  <Phone className="h-full" fitHeight screenClassName="bg-zinc-800" />
-</Preview>
-
-```tsx
-<Phone className="h-full max-h-[832px]" fitHeight>
-  <iframe className="size-full" srcDoc={html} title="Preview" />
-</Phone>
-```
-
-## Browser toolbar
-
-Passing `url` floats a Safari-style toolbar over the bottom of the screen, together with a scrim that keeps it legible against light content.
-
-<Preview>
-  <Phone className="w-[220px]" screenClassName="bg-zinc-700" url="voidha.sh" />
-</Preview>
-
-```tsx
-<Phone url="voidha.sh">{content}</Phone>
-```
-
-## Props
-
-| Prop              | Type        | Default | Description                                                             |
-| ----------------- | ----------- | ------- | ----------------------------------------------------------------------- |
-| `children`        | `ReactNode` | —       | Screen content, clipped to the rounded display.                          |
-| `fitHeight`       | `boolean`   | `false` | Derive the device size from the available height instead of the width.   |
-| `screenClassName` | `string`    | —       | Extra classes for the screen surface, e.g. its background colour.        |
-| `url`             | `string`    | —       | Renders the floating browser toolbar showing this URL.                   |
-
-`PHONE_ASPECT_RATIO` is exported alongside the component for layouts that need to reserve the device's footprint themselves.
diff --git a/apps/www/src/features/design/content/docs/components/popover.mdx b/apps/www/src/features/design/content/docs/components/popover.mdx
deleted file mode 100644
index 94a9e7385..000000000
--- a/apps/www/src/features/design/content/docs/components/popover.mdx
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Popover
-description: Displays rich content in a portal, triggered by a button.
----
-
-## Usage
-
-<Preview>
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button variant="outline">Open Popover</Button>
-    </PopoverTrigger>
-    <PopoverContent>
-      <div className="grid gap-4">
-        <div className="space-y-2">
-          <h4 className="font-medium leading-none">Dimensions</h4>
-          <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-        </div>
-        <div className="grid gap-2">
-          <div className="grid grid-cols-3 items-center gap-4">
-            <Label htmlFor="width">Width</Label>
-            <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
-          </div>
-          <div className="grid grid-cols-3 items-center gap-4">
-            <Label htmlFor="height">Height</Label>
-            <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
-          </div>
-        </div>
-      </div>
-    </PopoverContent>
-  </Popover>
-</Preview>
-
-```tsx
-import { Popover, PopoverContent, PopoverTrigger } from "@voidhash/ui";
-
-<Popover>
-  <PopoverTrigger asChild>
-    <Button variant="outline">Open Popover</Button>
-  </PopoverTrigger>
-  <PopoverContent>Popover content here.</PopoverContent>
-</Popover>;
-```
-
-## Components
-
-### Popover
-
-The root component that manages popover state.
-
-### PopoverTrigger
-
-The element that opens the popover when clicked.
-
-### PopoverContent
-
-The content displayed in the popover.
-
-### PopoverAnchor
-
-An optional anchor element to position the popover.
-
-## Examples
-
-### Different Alignments
-
-<Preview>
-  <div className="flex gap-4">
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Start</Button>
-      </PopoverTrigger>
-      <PopoverContent align="start" className="w-48">
-        <p>Aligned to start</p>
-      </PopoverContent>
-    </Popover>
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Center</Button>
-      </PopoverTrigger>
-      <PopoverContent align="center" className="w-48">
-        <p>Aligned to center</p>
-      </PopoverContent>
-    </Popover>
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">End</Button>
-      </PopoverTrigger>
-      <PopoverContent align="end" className="w-48">
-        <p>Aligned to end</p>
-      </PopoverContent>
-    </Popover>
-  </div>
-</Preview>
-
-```tsx
-<PopoverContent align="start">...</PopoverContent>
-<PopoverContent align="center">...</PopoverContent>
-<PopoverContent align="end">...</PopoverContent>
-```
-
-## Props
-
-### Popover Props
-
-<TypeTable
-  type={{
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-    defaultOpen: {
-      description: "Initial open state",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
-
-### PopoverContent Props
-
-<TypeTable
-  type={{
-    side: {
-      description: "Side of the trigger to display",
-      type: "'top' | 'right' | 'bottom' | 'left'",
-      default: "'bottom'",
-    },
-    align: {
-      description: "Alignment along the side",
-      type: "'start' | 'center' | 'end'",
-      default: "'center'",
-    },
-    sideOffset: {
-      description: "Distance from trigger in pixels",
-      type: "number",
-      default: "4",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/progress.mdx b/apps/www/src/features/design/content/docs/components/progress.mdx
deleted file mode 100644
index 81bc6240f..000000000
--- a/apps/www/src/features/design/content/docs/components/progress.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Progress
-description: Displays an indicator showing the completion progress of a task.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Progress value={33} className="w-full max-w-md" />
-</Preview>
-
-```tsx
-import { Progress } from "@voidhash/ui";
-
-<Progress value={33} />;
-```
-
-## Examples
-
-### Different Values
-
-<Preview centered={false}>
-  <div className="grid gap-4 w-full max-w-md">
-    <div className="space-y-1">
-      <p className="text-sm">0%</p>
-      <Progress value={0} />
-    </div>
-    <div className="space-y-1">
-      <p className="text-sm">25%</p>
-      <Progress value={25} />
-    </div>
-    <div className="space-y-1">
-      <p className="text-sm">50%</p>
-      <Progress value={50} />
-    </div>
-    <div className="space-y-1">
-      <p className="text-sm">75%</p>
-      <Progress value={75} />
-    </div>
-    <div className="space-y-1">
-      <p className="text-sm">100%</p>
-      <Progress value={100} />
-    </div>
-  </div>
-</Preview>
-
-```tsx
-<Progress value={0} />
-<Progress value={25} />
-<Progress value={50} />
-<Progress value={75} />
-<Progress value={100} />
-```
-
-### With Label
-
-<Preview centered={false}>
-  <div className="w-full max-w-md space-y-2">
-    <div className="flex justify-between text-sm">
-      <span>Uploading...</span>
-      <span>66%</span>
-    </div>
-    <Progress value={66} />
-  </div>
-</Preview>
-
-```tsx
-<div className="space-y-2">
-  <div className="flex justify-between text-sm">
-    <span>Uploading...</span>
-    <span>66%</span>
-  </div>
-  <Progress value={66} />
-</div>
-```
-
-## Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "Current progress value (0-100)",
-      type: "number",
-      default: "0",
-    },
-    max: {
-      description: "Maximum value",
-      type: "number",
-      default: "100",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/radio-group.mdx b/apps/www/src/features/design/content/docs/components/radio-group.mdx
deleted file mode 100644
index 5e908a336..000000000
--- a/apps/www/src/features/design/content/docs/components/radio-group.mdx
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Radio Group
-description: A set of checkable buttons where only one can be checked at a time.
----
-
-## Usage
-
-<Preview centered={false}>
-  <RadioGroup defaultValue="option-one">
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-one" id="option-one" />
-      <Label htmlFor="option-one">Option One</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-two" id="option-two" />
-      <Label htmlFor="option-two">Option Two</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-three" id="option-three" />
-      <Label htmlFor="option-three">Option Three</Label>
-    </div>
-  </RadioGroup>
-</Preview>
-
-```tsx
-import { RadioGroup, RadioGroupItem } from "@voidhash/ui";
-import { Label } from "@voidhash/ui";
-
-<RadioGroup defaultValue="option-one">
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-one" id="option-one" />
-    <Label htmlFor="option-one">Option One</Label>
-  </div>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-two" id="option-two" />
-    <Label htmlFor="option-two">Option Two</Label>
-  </div>
-</RadioGroup>;
-```
-
-## Components
-
-### RadioGroup
-
-The root container that manages the radio group state.
-
-### RadioGroupItem
-
-An individual radio button within the group.
-
-## Examples
-
-### Horizontal Layout
-
-<Preview>
-  <RadioGroup defaultValue="sm" className="flex gap-4" orientation="horizontal">
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="sm" id="sm" />
-      <Label htmlFor="sm">Small</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="md" id="md" />
-      <Label htmlFor="md">Medium</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="lg" id="lg" />
-      <Label htmlFor="lg">Large</Label>
-    </div>
-  </RadioGroup>
-</Preview>
-
-```tsx
-<RadioGroup className="flex gap-4" orientation="horizontal">
-  ...
-</RadioGroup>
-```
-
-### Disabled
-
-<Preview centered={false}>
-  <RadioGroup defaultValue="option-one" disabled>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-one" id="disabled-one" />
-      <Label htmlFor="disabled-one">Disabled One</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-two" id="disabled-two" />
-      <Label htmlFor="disabled-two">Disabled Two</Label>
-    </div>
-  </RadioGroup>
-</Preview>
-
-```tsx
-<RadioGroup disabled>...</RadioGroup>
-```
-
-## Props
-
-### RadioGroup Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "Controlled selected value",
-      type: "string",
-      default: "undefined",
-    },
-    defaultValue: {
-      description: "Initial selected value",
-      type: "string",
-      default: "undefined",
-    },
-    onValueChange: {
-      description: "Callback when selection changes",
-      type: "(value: string) => void",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Disable all items in the group",
-      type: "boolean",
-      default: "false",
-    },
-    orientation: {
-      description: "Layout orientation",
-      type: "'horizontal' | 'vertical'",
-      default: "'vertical'",
-    },
-  }}
-/>
-
-### RadioGroupItem Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "The unique value for this item",
-      type: "string",
-      default: "Required",
-    },
-    disabled: {
-      description: "Disable this specific item",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/resizable.mdx b/apps/www/src/features/design/content/docs/components/resizable.mdx
deleted file mode 100644
index 43e43ca94..000000000
--- a/apps/www/src/features/design/content/docs/components/resizable.mdx
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: Resizable
-description: A component for creating resizable panel layouts.
----
-
-## Usage
-
-<Preview centered={false}>
-  <ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-full items-center justify-center p-6">
-        <span className="font-semibold">Panel One</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-full items-center justify-center p-6">
-        <span className="font-semibold">Panel Two</span>
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-</Preview>
-
-```tsx
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@voidhash/ui";
-
-<ResizablePanelGroup direction="horizontal">
-  <ResizablePanel defaultSize={50}>Left Panel</ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={50}>Right Panel</ResizablePanel>
-</ResizablePanelGroup>;
-```
-
-## Components
-
-### ResizablePanelGroup
-
-The root container for resizable panels.
-
-### ResizablePanel
-
-An individual resizable panel.
-
-### ResizableHandle
-
-The draggable handle between panels.
-
-## Examples
-
-### Vertical Layout
-
-<Preview centered={false}>
-  <ResizablePanelGroup direction="vertical" className="min-h-[300px] max-w-md rounded-lg border">
-    <ResizablePanel defaultSize={25}>
-      <div className="flex h-full items-center justify-center p-6">
-        <span className="font-semibold">Header</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={75}>
-      <div className="flex h-full items-center justify-center p-6">
-        <span className="font-semibold">Content</span>
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-</Preview>
-
-```tsx
-<ResizablePanelGroup direction="vertical">
-  <ResizablePanel defaultSize={25}>Header</ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={75}>Content</ResizablePanel>
-</ResizablePanelGroup>
-```
-
-### Three Panels
-
-<Preview centered={false}>
-  <ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-lg rounded-lg border">
-    <ResizablePanel defaultSize={25}>
-      <div className="flex h-full items-center justify-center p-4">
-        <span className="font-semibold">Sidebar</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-full items-center justify-center p-4">
-        <span className="font-semibold">Main</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={25}>
-      <div className="flex h-full items-center justify-center p-4">
-        <span className="font-semibold">Panel</span>
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-</Preview>
-
-## Props
-
-### ResizablePanelGroup Props
-
-<TypeTable
-  type={{
-    direction: {
-      description: "Layout direction",
-      type: "'horizontal' | 'vertical'",
-      default: "Required",
-    },
-    onLayout: {
-      description: "Callback when layout changes",
-      type: "(sizes: number[]) => void",
-      default: "undefined",
-    },
-  }}
-/>
-
-### ResizablePanel Props
-
-<TypeTable
-  type={{
-    defaultSize: {
-      description: "Initial size as percentage",
-      type: "number",
-      default: "undefined",
-    },
-    minSize: {
-      description: "Minimum size as percentage",
-      type: "number",
-      default: "10",
-    },
-    maxSize: {
-      description: "Maximum size as percentage",
-      type: "number",
-      default: "undefined",
-    },
-    collapsible: {
-      description: "Allow panel to collapse",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/scroll-area.mdx b/apps/www/src/features/design/content/docs/components/scroll-area.mdx
deleted file mode 100644
index 56827d09b..000000000
--- a/apps/www/src/features/design/content/docs/components/scroll-area.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Scroll Area
-description: A custom scrollbar component with consistent styling across browsers.
----
-
-## Usage
-
-<Preview centered={false}>
-  <ScrollArea className="h-72 w-48 rounded-md border">
-    <div className="p-4">
-      <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-      {Array.from({ length: 50 }).map((_, i) => (
-        <div key={i} className="text-sm py-1">
-          Tag {i + 1}
-        </div>
-      ))}
-    </div>
-  </ScrollArea>
-</Preview>
-
-```tsx
-import { ScrollArea } from "@voidhash/ui";
-
-<ScrollArea className="h-72 w-48 rounded-md border">
-  <div className="p-4">{/* Long content here */}</div>
-</ScrollArea>;
-```
-
-## Components
-
-### ScrollArea
-
-The main scrollable container with custom scrollbars.
-
-### ScrollBar
-
-The scrollbar track and thumb, customizable for horizontal or vertical.
-
-## Examples
-
-### Horizontal Scroll
-
-<Preview centered={false}>
-  <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-    <div className="flex w-max space-x-4 p-4">
-      {Array.from({ length: 20 }).map((_, i) => (
-        <div key={i} className="w-32 h-24 rounded-md bg-muted flex items-center justify-center">
-          Item {i + 1}
-        </div>
-      ))}
-    </div>
-    <ScrollBar orientation="horizontal" />
-  </ScrollArea>
-</Preview>
-
-```tsx
-<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-  <div className="flex w-max space-x-4 p-4">{/* Horizontal content */}</div>
-  <ScrollBar orientation="horizontal" />
-</ScrollArea>
-```
-
-### Card List
-
-<Preview centered={false}>
-  <ScrollArea className="h-80 w-full max-w-md rounded-md border">
-    <div className="p-4 space-y-4">
-      {Array.from({ length: 10 }).map((_, i) => (
-        <Card key={i}>
-          <CardHeader>
-            <CardTitle>Card {i + 1}</CardTitle>
-            <CardDescription>Card description</CardDescription>
-          </CardHeader>
-        </Card>
-      ))}
-    </div>
-  </ScrollArea>
-</Preview>
-
-## Props
-
-### ScrollArea Props
-
-<TypeTable
-  type={{
-    className: {
-      description: "CSS classes for the container",
-      type: "string",
-      default: "undefined",
-    },
-    type: {
-      description: "Scrollbar visibility behavior",
-      type: "'auto' | 'always' | 'scroll' | 'hover'",
-      default: "'hover'",
-    },
-  }}
-/>
-
-### ScrollBar Props
-
-<TypeTable
-  type={{
-    orientation: {
-      description: "Scrollbar orientation",
-      type: "'vertical' | 'horizontal'",
-      default: "'vertical'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/select.mdx b/apps/www/src/features/design/content/docs/components/select.mdx
deleted file mode 100644
index a80da32d8..000000000
--- a/apps/www/src/features/design/content/docs/components/select.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: Select
-description: A dropdown component for selecting from a list of options.
----
-
-## Usage
-
-<Preview>
-  <Select>
-    <SelectTrigger className="w-[180px]">
-      <SelectValue placeholder="Select a fruit" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="apple">Apple</SelectItem>
-      <SelectItem value="banana">Banana</SelectItem>
-      <SelectItem value="orange">Orange</SelectItem>
-      <SelectItem value="grape">Grape</SelectItem>
-    </SelectContent>
-  </Select>
-</Preview>
-
-```tsx
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@voidhash/ui";
-
-<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Select a fruit" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="apple">Apple</SelectItem>
-    <SelectItem value="banana">Banana</SelectItem>
-    <SelectItem value="orange">Orange</SelectItem>
-  </SelectContent>
-</Select>;
-```
-
-## Components
-
-### Select
-
-The root component managing select state.
-
-### SelectTrigger
-
-The button that toggles the dropdown.
-
-### SelectValue
-
-Displays the selected value or placeholder.
-
-### SelectContent
-
-The dropdown content container.
-
-### SelectItem
-
-An individual selectable option.
-
-### SelectGroup
-
-Groups related options together.
-
-### SelectLabel
-
-A label for a group of options.
-
-### SelectSeparator
-
-A visual separator between options.
-
-## Examples
-
-### With Groups
-
-<Preview>
-  <Select>
-    <SelectTrigger className="w-[200px]">
-      <SelectValue placeholder="Select a timezone" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectGroup>
-        <SelectLabel>North America</SelectLabel>
-        <SelectItem value="est">Eastern Time (ET)</SelectItem>
-        <SelectItem value="cst">Central Time (CT)</SelectItem>
-        <SelectItem value="pst">Pacific Time (PT)</SelectItem>
-      </SelectGroup>
-      <SelectSeparator />
-      <SelectGroup>
-        <SelectLabel>Europe</SelectLabel>
-        <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-        <SelectItem value="cet">Central European Time (CET)</SelectItem>
-      </SelectGroup>
-    </SelectContent>
-  </Select>
-</Preview>
-
-```tsx
-<SelectGroup>
-  <SelectLabel>North America</SelectLabel>
-  <SelectItem value="est">Eastern Time</SelectItem>
-  <SelectItem value="cst">Central Time</SelectItem>
-</SelectGroup>
-<SelectSeparator />
-```
-
-### Small Size
-
-<Preview>
-  <Select>
-    <SelectTrigger size="sm" className="w-[150px]">
-      <SelectValue placeholder="Size" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="sm">Small</SelectItem>
-      <SelectItem value="md">Medium</SelectItem>
-      <SelectItem value="lg">Large</SelectItem>
-    </SelectContent>
-  </Select>
-</Preview>
-
-```tsx
-<SelectTrigger size="sm">
-  <SelectValue placeholder="Size" />
-</SelectTrigger>
-```
-
-### Disabled
-
-<Preview>
-  <Select disabled>
-    <SelectTrigger className="w-[180px]">
-      <SelectValue placeholder="Disabled" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="option">Option</SelectItem>
-    </SelectContent>
-  </Select>
-</Preview>
-
-## Props
-
-### Select Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "Controlled value",
-      type: "string",
-      default: "undefined",
-    },
-    onValueChange: {
-      description: "Callback when value changes",
-      type: "(value: string) => void",
-      default: "undefined",
-    },
-    defaultValue: {
-      description: "Initial value",
-      type: "string",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the select is disabled",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
-
-### SelectTrigger Props
-
-<TypeTable
-  type={{
-    size: {
-      description: "Size of the trigger",
-      type: "'default' | 'sm'",
-      default: "'default'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/separator.mdx b/apps/www/src/features/design/content/docs/components/separator.mdx
deleted file mode 100644
index ffe2ddb9e..000000000
--- a/apps/www/src/features/design/content/docs/components/separator.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Separator
-description: Visually separates content into distinct groups.
----
-
-## Usage
-
-<Preview centered={false}>
-  <div className="w-full max-w-md">
-    <div className="space-y-1">
-      <h4 className="font-medium text-sm leading-none">Radix Primitives</h4>
-      <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
-    </div>
-    <Separator className="my-4" />
-    <div className="flex h-5 items-center space-x-4 text-sm">
-      <div>Blog</div>
-      <Separator orientation="vertical" />
-      <div>Docs</div>
-      <Separator orientation="vertical" />
-      <div>Source</div>
-    </div>
-  </div>
-</Preview>
-
-```tsx
-import { Separator } from "@voidhash/ui";
-
-<div>
-  <div>Content above</div>
-  <Separator className="my-4" />
-  <div>Content below</div>
-</div>;
-```
-
-## Examples
-
-### Horizontal
-
-<Preview centered={false}>
-  <div className="w-full max-w-md space-y-4">
-    <p>First section</p>
-    <Separator />
-    <p>Second section</p>
-    <Separator />
-    <p>Third section</p>
-  </div>
-</Preview>
-
-```tsx
-<Separator />
-```
-
-### Vertical
-
-<Preview>
-  <div className="flex h-5 items-center space-x-4 text-sm">
-    <div>Home</div>
-    <Separator orientation="vertical" />
-    <div>About</div>
-    <Separator orientation="vertical" />
-    <div>Contact</div>
-  </div>
-</Preview>
-
-```tsx
-<Separator orientation="vertical" />
-```
-
-## Props
-
-<TypeTable
-  type={{
-    orientation: {
-      description: "The orientation of the separator",
-      type: "'horizontal' | 'vertical'",
-      default: "'horizontal'",
-    },
-    decorative: {
-      description: "Whether the separator is purely decorative",
-      type: "boolean",
-      default: "true",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/sheet.mdx b/apps/www/src/features/design/content/docs/components/sheet.mdx
deleted file mode 100644
index 1f1e6fe0e..000000000
--- a/apps/www/src/features/design/content/docs/components/sheet.mdx
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: Sheet
-description: A panel that slides out from the edge of the screen.
----
-
-## Usage
-
-<Preview>
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Open Sheet</Button>
-    </SheetTrigger>
-    <SheetContent>
-      <SheetHeader>
-        <SheetTitle>Sheet Title</SheetTitle>
-        <SheetDescription>
-          This is a sheet description. Make changes to your settings here.
-        </SheetDescription>
-      </SheetHeader>
-      <div className="p-4">
-        <p>Sheet content goes here.</p>
-      </div>
-      <SheetFooter>
-        <Button>Save changes</Button>
-      </SheetFooter>
-    </SheetContent>
-  </Sheet>
-</Preview>
-
-```tsx
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@voidhash/ui";
-
-<Sheet>
-  <SheetTrigger asChild>
-    <Button variant="outline">Open Sheet</Button>
-  </SheetTrigger>
-  <SheetContent>
-    <SheetHeader>
-      <SheetTitle>Sheet Title</SheetTitle>
-      <SheetDescription>Sheet description.</SheetDescription>
-    </SheetHeader>
-    <div className="p-4">Content here</div>
-    <SheetFooter>
-      <Button>Save</Button>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>;
-```
-
-## Components
-
-### Sheet
-
-The root component managing sheet state.
-
-### SheetTrigger
-
-The element that opens the sheet.
-
-### SheetContent
-
-The sliding panel content.
-
-### SheetHeader
-
-Container for title and description.
-
-### SheetTitle
-
-The sheet's heading.
-
-### SheetDescription
-
-A description of the sheet's purpose.
-
-### SheetFooter
-
-Container for action buttons.
-
-### SheetClose
-
-An element that closes the sheet.
-
-## Examples
-
-### Different Sides
-
-<Preview>
-  <div className="flex gap-2">
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Left</Button>
-      </SheetTrigger>
-      <SheetContent side="left">
-        <SheetHeader>
-          <SheetTitle>Left Side</SheetTitle>
-        </SheetHeader>
-      </SheetContent>
-    </Sheet>
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Right</Button>
-      </SheetTrigger>
-      <SheetContent side="right">
-        <SheetHeader>
-          <SheetTitle>Right Side</SheetTitle>
-        </SheetHeader>
-      </SheetContent>
-    </Sheet>
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Top</Button>
-      </SheetTrigger>
-      <SheetContent side="top">
-        <SheetHeader>
-          <SheetTitle>Top Side</SheetTitle>
-        </SheetHeader>
-      </SheetContent>
-    </Sheet>
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Bottom</Button>
-      </SheetTrigger>
-      <SheetContent side="bottom">
-        <SheetHeader>
-          <SheetTitle>Bottom Side</SheetTitle>
-        </SheetHeader>
-      </SheetContent>
-    </Sheet>
-  </div>
-</Preview>
-
-```tsx
-<SheetContent side="left">...</SheetContent>
-<SheetContent side="right">...</SheetContent>
-<SheetContent side="top">...</SheetContent>
-<SheetContent side="bottom">...</SheetContent>
-```
-
-## Props
-
-### SheetContent Props
-
-<TypeTable
-  type={{
-    side: {
-      description: "The edge of the screen to slide from",
-      type: "'top' | 'right' | 'bottom' | 'left'",
-      default: "'right'",
-    },
-  }}
-/>
-
-### Sheet Props
-
-<TypeTable
-  type={{
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/sidebar.mdx b/apps/www/src/features/design/content/docs/components/sidebar.mdx
deleted file mode 100644
index 1fbcde07b..000000000
--- a/apps/www/src/features/design/content/docs/components/sidebar.mdx
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: Sidebar
-description: A collapsible sidebar component for application navigation.
----
-
-## Usage
-
-The Sidebar component provides a complete sidebar navigation system with collapsible behavior.
-
-```tsx
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@voidhash/ui";
-
-<SidebarProvider>
-  <Sidebar>
-    <SidebarHeader>
-      <h2>App Name</h2>
-    </SidebarHeader>
-    <SidebarContent>
-      <SidebarGroup>
-        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-        <SidebarGroupContent>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <a href="/dashboard">
-                  <HomeIcon /> Dashboard
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <a href="/settings">
-                  <SettingsIcon /> Settings
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroupContent>
-      </SidebarGroup>
-    </SidebarContent>
-  </Sidebar>
-  <main>Content</main>
-</SidebarProvider>;
-```
-
-## Components
-
-### SidebarProvider
-
-Provides context for sidebar state management.
-
-### Sidebar
-
-The main sidebar container.
-
-### SidebarHeader
-
-The header section of the sidebar.
-
-### SidebarContent
-
-The main content area with scroll support.
-
-### SidebarFooter
-
-The footer section of the sidebar.
-
-### SidebarGroup
-
-A group of related menu items.
-
-### SidebarGroupLabel
-
-A label for a group of items.
-
-### SidebarGroupContent
-
-The content of a group.
-
-### SidebarMenu
-
-A navigation menu container.
-
-### SidebarMenuItem
-
-A single menu item.
-
-### SidebarMenuButton
-
-A clickable button within a menu item.
-
-### SidebarTrigger
-
-A button to toggle sidebar visibility.
-
-### SidebarRail
-
-The collapsed rail for the sidebar.
-
-## Examples
-
-### With useSidebar Hook
-
-```tsx
-import { useSidebar } from "@voidhash/ui";
-
-function SidebarToggle() {
-  const { open, setOpen, toggleSidebar } = useSidebar();
-
-  return <Button onClick={toggleSidebar}>{open ? "Close" : "Open"} Sidebar</Button>;
-}
-```
-
-### Controlled State
-
-```tsx
-const [open, setOpen] = useState(true);
-
-<SidebarProvider open={open} onOpenChange={setOpen}>
-  <Sidebar>...</Sidebar>
-</SidebarProvider>;
-```
-
-## Props
-
-### SidebarProvider Props
-
-<TypeTable
-  type={{
-    open: {
-      description: "Controlled open state",
-      type: "boolean",
-      default: "undefined",
-    },
-    onOpenChange: {
-      description: "Callback when open state changes",
-      type: "(open: boolean) => void",
-      default: "undefined",
-    },
-    defaultOpen: {
-      description: "Initial open state",
-      type: "boolean",
-      default: "true",
-    },
-  }}
-/>
-
-### Sidebar Props
-
-<TypeTable
-  type={{
-    side: {
-      description: "Which side to display",
-      type: "'left' | 'right'",
-      default: "'left'",
-    },
-    variant: {
-      description: "Sidebar variant",
-      type: "'sidebar' | 'floating' | 'inset'",
-      default: "'sidebar'",
-    },
-    collapsible: {
-      description: "Collapse behavior",
-      type: "'offcanvas' | 'icon' | 'none'",
-      default: "'offcanvas'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/skeleton.mdx b/apps/www/src/features/design/content/docs/components/skeleton.mdx
deleted file mode 100644
index 225bce0e8..000000000
--- a/apps/www/src/features/design/content/docs/components/skeleton.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Skeleton
-description: A placeholder loading state for content that is still loading.
----
-
-## Usage
-
-<Preview centered={false}>
-  <div className="flex items-center space-x-4">
-    <Skeleton className="h-12 w-12 rounded-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-[250px]" />
-      <Skeleton className="h-4 w-[200px]" />
-    </div>
-  </div>
-</Preview>
-
-```tsx
-import { Skeleton } from "@voidhash/ui";
-
-<div className="flex items-center space-x-4">
-  <Skeleton className="h-12 w-12 rounded-full" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[250px]" />
-    <Skeleton className="h-4 w-[200px]" />
-  </div>
-</div>;
-```
-
-## Examples
-
-### Card Skeleton
-
-<Preview centered={false}>
-  <div className="flex flex-col space-y-3 w-full max-w-md">
-    <Skeleton className="h-[125px] w-full rounded-xl" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-4/5" />
-    </div>
-  </div>
-</Preview>
-
-```tsx
-<div className="flex flex-col space-y-3">
-  <Skeleton className="h-[125px] w-full rounded-xl" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-full" />
-    <Skeleton className="h-4 w-4/5" />
-  </div>
-</div>
-```
-
-### List Skeleton
-
-<Preview centered={false}>
-  <div className="space-y-4 w-full max-w-md">
-    {[1, 2, 3].map((i) => (
-      <div key={i} className="flex items-center space-x-4">
-        <Skeleton className="h-10 w-10 rounded-full" />
-        <div className="space-y-2 flex-1">
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-3 w-1/2" />
-        </div>
-      </div>
-    ))}
-  </div>
-</Preview>
-
-### Table Skeleton
-
-<Preview centered={false}>
-  <div className="w-full max-w-md space-y-2">
-    <Skeleton className="h-8 w-full" />
-    <Skeleton className="h-12 w-full" />
-    <Skeleton className="h-12 w-full" />
-    <Skeleton className="h-12 w-full" />
-  </div>
-</Preview>
-
-## Props
-
-<TypeTable
-  type={{
-    className: {
-      description: "CSS classes for width, height, and shape",
-      type: "string",
-      default: "undefined",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/slider.mdx b/apps/www/src/features/design/content/docs/components/slider.mdx
deleted file mode 100644
index 4430ab1fc..000000000
--- a/apps/www/src/features/design/content/docs/components/slider.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Slider
-description: An input component for selecting a value from a range.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Slider defaultValue={[50]} max={100} step={1} className="w-full max-w-md" />
-</Preview>
-
-```tsx
-import { Slider } from "@voidhash/ui";
-
-<Slider defaultValue={[50]} max={100} step={1} />;
-```
-
-## Examples
-
-### Range Slider
-
-<Preview centered={false}>
-  <Slider defaultValue={[25, 75]} max={100} step={1} className="w-full max-w-md" />
-</Preview>
-
-```tsx
-<Slider defaultValue={[25, 75]} max={100} step={1} />
-```
-
-### With Step
-
-<Preview centered={false}>
-  <Slider defaultValue={[50]} max={100} step={10} className="w-full max-w-md" />
-</Preview>
-
-```tsx
-<Slider defaultValue={[50]} max={100} step={10} />
-```
-
-### Disabled
-
-<Preview centered={false}>
-  <Slider defaultValue={[50]} max={100} disabled className="w-full max-w-md" />
-</Preview>
-
-```tsx
-<Slider disabled defaultValue={[50]} />
-```
-
-### Vertical Orientation
-
-<Preview>
-  <Slider defaultValue={[50]} max={100} orientation="vertical" className="h-44" />
-</Preview>
-
-```tsx
-<Slider defaultValue={[50]} orientation="vertical" className="h-44" />
-```
-
-## Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "Controlled value(s)",
-      type: "number[]",
-      default: "undefined",
-    },
-    defaultValue: {
-      description: "Initial value(s)",
-      type: "number[]",
-      default: "[min, max]",
-    },
-    onValueChange: {
-      description: "Callback when value changes",
-      type: "(value: number[]) => void",
-      default: "undefined",
-    },
-    min: {
-      description: "Minimum value",
-      type: "number",
-      default: "0",
-    },
-    max: {
-      description: "Maximum value",
-      type: "number",
-      default: "100",
-    },
-    step: {
-      description: "Step increment",
-      type: "number",
-      default: "1",
-    },
-    orientation: {
-      description: "Slider orientation",
-      type: "'horizontal' | 'vertical'",
-      default: "'horizontal'",
-    },
-    disabled: {
-      description: "Whether the slider is disabled",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/sonner.mdx b/apps/www/src/features/design/content/docs/components/sonner.mdx
deleted file mode 100644
index 090024575..000000000
--- a/apps/www/src/features/design/content/docs/components/sonner.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Sonner (Toast)
-description: A toast notification component for displaying brief messages.
----
-
-## Usage
-
-To use toasts, add the `Toaster` component to your app layout:
-
-```tsx
-import { Toaster } from "@voidhash/ui";
-
-export default function Layout({ children }) {
-  return (
-    <>
-      {children}
-      <Toaster />
-    </>
-  );
-}
-```
-
-Then use the `toast` function from sonner to show notifications:
-
-```tsx
-import { toast } from "sonner";
-
-toast("Event has been created", {
-  description: "Sunday, December 03, 2023 at 9:00 AM",
-});
-```
-
-## Examples
-
-### Success Toast
-
-```tsx
-toast.success("Success!", {
-  description: "Your changes have been saved.",
-});
-```
-
-### Error Toast
-
-```tsx
-toast.error("Error!", {
-  description: "Something went wrong.",
-});
-```
-
-### Warning Toast
-
-```tsx
-toast.warning("Warning!", {
-  description: "Please check your input.",
-});
-```
-
-### Info Toast
-
-```tsx
-toast.info("Info", {
-  description: "Here's some information.",
-});
-```
-
-### With Action
-
-```tsx
-toast("Event deleted", {
-  action: {
-    label: "Undo",
-    onClick: () => console.log("Undo"),
-  },
-});
-```
-
-### Promise Toast
-
-```tsx
-toast.promise(saveData(), {
-  loading: "Saving...",
-  success: "Data saved!",
-  error: "Failed to save.",
-});
-```
-
-## Props
-
-### Toaster Props
-
-<TypeTable
-  type={{
-    position: {
-      description: "Position of the toasts",
-      type: "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'",
-      default: "'bottom-right'",
-    },
-    richColors: {
-      description: "Use rich colors for toast types",
-      type: "boolean",
-      default: "false",
-    },
-    expand: {
-      description: "Expand toasts by default",
-      type: "boolean",
-      default: "false",
-    },
-    duration: {
-      description: "Default duration in ms",
-      type: "number",
-      default: "4000",
-    },
-    closeButton: {
-      description: "Show close button",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/switch.mdx b/apps/www/src/features/design/content/docs/components/switch.mdx
deleted file mode 100644
index 4aed7def8..000000000
--- a/apps/www/src/features/design/content/docs/components/switch.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Switch
-description: A control that allows the user to toggle between on and off states.
----
-
-## Usage
-
-<Preview>
-  <div className="flex items-center gap-2">
-    <Switch id="airplane-mode" />
-    <Label htmlFor="airplane-mode">Airplane Mode</Label>
-  </div>
-</Preview>
-
-```tsx
-import { Switch } from "@voidhash/ui";
-import { Label } from "@voidhash/ui";
-
-<div className="flex items-center gap-2">
-  <Switch id="airplane-mode" />
-  <Label htmlFor="airplane-mode">Airplane Mode</Label>
-</div>;
-```
-
-## Examples
-
-### Checked by Default
-
-<Preview>
-  <div className="flex items-center gap-2">
-    <Switch id="default-on" defaultChecked />
-    <Label htmlFor="default-on">Notifications enabled</Label>
-  </div>
-</Preview>
-
-```tsx
-<Switch defaultChecked />
-```
-
-### Disabled
-
-<Preview>
-  <div className="flex flex-col gap-4">
-    <div className="flex items-center gap-2">
-      <Switch id="disabled-off" disabled />
-      <Label htmlFor="disabled-off">Disabled off</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <Switch id="disabled-on" disabled defaultChecked />
-      <Label htmlFor="disabled-on">Disabled on</Label>
-    </div>
-  </div>
-</Preview>
-
-```tsx
-<Switch disabled />
-<Switch disabled defaultChecked />
-```
-
-### In a Form
-
-<Preview centered={false}>
-  <div className="grid gap-4 w-full max-w-sm">
-    <div className="flex items-center justify-between">
-      <Label htmlFor="marketing">Marketing emails</Label>
-      <Switch id="marketing" />
-    </div>
-    <div className="flex items-center justify-between">
-      <Label htmlFor="security">Security alerts</Label>
-      <Switch id="security" defaultChecked />
-    </div>
-  </div>
-</Preview>
-
-## Props
-
-<TypeTable
-  type={{
-    checked: {
-      description: "Controlled checked state",
-      type: "boolean",
-      default: "undefined",
-    },
-    defaultChecked: {
-      description: "Initial checked state",
-      type: "boolean",
-      default: "false",
-    },
-    onCheckedChange: {
-      description: "Callback when checked state changes",
-      type: "(checked: boolean) => void",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the switch is disabled",
-      type: "boolean",
-      default: "false",
-    },
-    required: {
-      description: "Whether the switch is required",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/table.mdx b/apps/www/src/features/design/content/docs/components/table.mdx
deleted file mode 100644
index 94266f5c5..000000000
--- a/apps/www/src/features/design/content/docs/components/table.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: Table
-description: A responsive table component for displaying tabular data.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead>Name</TableHead>
-        <TableHead>Email</TableHead>
-        <TableHead>Role</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      <TableRow>
-        <TableCell>John Doe</TableCell>
-        <TableCell>john@example.com</TableCell>
-        <TableCell>Admin</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Jane Smith</TableCell>
-        <TableCell>jane@example.com</TableCell>
-        <TableCell>User</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Bob Wilson</TableCell>
-        <TableCell>bob@example.com</TableCell>
-        <TableCell>User</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</Preview>
-
-```tsx
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@voidhash/ui";
-
-<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Name</TableHead>
-      <TableHead>Email</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>John Doe</TableCell>
-      <TableCell>john@example.com</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>;
-```
-
-## Components
-
-### Table
-
-The root table container with horizontal scroll support.
-
-### TableHeader
-
-The table header section containing column headers.
-
-### TableBody
-
-The table body section containing data rows.
-
-### TableFooter
-
-The table footer section for summary data.
-
-### TableRow
-
-A single row in the table.
-
-### TableHead
-
-A header cell in the table.
-
-### TableCell
-
-A data cell in the table.
-
-### TableCaption
-
-An optional caption describing the table.
-
-## Examples
-
-### With Caption and Footer
-
-<Preview centered={false}>
-  <Table>
-    <TableCaption>A list of recent invoices.</TableCaption>
-    <TableHeader>
-      <TableRow>
-        <TableHead>Invoice</TableHead>
-        <TableHead>Status</TableHead>
-        <TableHead className="text-right">Amount</TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      <TableRow>
-        <TableCell>INV001</TableCell>
-        <TableCell>Paid</TableCell>
-        <TableCell className="text-right">$250.00</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>INV002</TableCell>
-        <TableCell>Pending</TableCell>
-        <TableCell className="text-right">$150.00</TableCell>
-      </TableRow>
-    </TableBody>
-    <TableFooter>
-      <TableRow>
-        <TableCell colSpan={2}>Total</TableCell>
-        <TableCell className="text-right">$400.00</TableCell>
-      </TableRow>
-    </TableFooter>
-  </Table>
-</Preview>
-
-```tsx
-<Table>
-  <TableCaption>A list of recent invoices.</TableCaption>
-  <TableHeader>...</TableHeader>
-  <TableBody>...</TableBody>
-  <TableFooter>
-    <TableRow>
-      <TableCell colSpan={2}>Total</TableCell>
-      <TableCell className="text-right">$400.00</TableCell>
-    </TableRow>
-  </TableFooter>
-</Table>
-```
-
-## Props
-
-All table components accept standard HTML table element props.
diff --git a/apps/www/src/features/design/content/docs/components/tabs.mdx b/apps/www/src/features/design/content/docs/components/tabs.mdx
deleted file mode 100644
index fd1c2bce0..000000000
--- a/apps/www/src/features/design/content/docs/components/tabs.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Tabs
-description: A set of layered sections of content that display one panel at a time.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Tabs defaultValue="account" className="w-full max-w-md">
-    <TabsList>
-      <TabsTrigger value="account">Account</TabsTrigger>
-      <TabsTrigger value="password">Password</TabsTrigger>
-    </TabsList>
-    <TabsContent value="account">
-      <Card>
-        <CardHeader>
-          <CardTitle>Account</CardTitle>
-          <CardDescription>Manage your account settings.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>Account settings content here.</p>
-        </CardContent>
-      </Card>
-    </TabsContent>
-    <TabsContent value="password">
-      <Card>
-        <CardHeader>
-          <CardTitle>Password</CardTitle>
-          <CardDescription>Change your password.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>Password settings content here.</p>
-        </CardContent>
-      </Card>
-    </TabsContent>
-  </Tabs>
-</Preview>
-
-```tsx
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voidhash/ui";
-
-<Tabs defaultValue="account">
-  <TabsList>
-    <TabsTrigger value="account">Account</TabsTrigger>
-    <TabsTrigger value="password">Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">Account content here.</TabsContent>
-  <TabsContent value="password">Password content here.</TabsContent>
-</Tabs>;
-```
-
-## Components
-
-### Tabs
-
-The root container that manages tab state.
-
-### TabsList
-
-The container for tab triggers.
-
-### TabsTrigger
-
-A button that activates its associated content panel.
-
-### TabsContent
-
-The content panel associated with a trigger.
-
-## Examples
-
-### With Icons
-
-<Preview centered={false}>
-  <Tabs defaultValue="overview" className="w-full max-w-md">
-    <TabsList>
-      <TabsTrigger value="overview">
-        <UserIcon /> Overview
-      </TabsTrigger>
-      <TabsTrigger value="settings">
-        <SettingsIcon /> Settings
-      </TabsTrigger>
-    </TabsList>
-    <TabsContent value="overview" className="p-4">
-      Overview content
-    </TabsContent>
-    <TabsContent value="settings" className="p-4">
-      Settings content
-    </TabsContent>
-  </Tabs>
-</Preview>
-
-```tsx
-<TabsTrigger value="overview">
-  <UserIcon /> Overview
-</TabsTrigger>
-```
-
-## Props
-
-### Tabs Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "Controlled active tab",
-      type: "string",
-      default: "undefined",
-    },
-    defaultValue: {
-      description: "Initial active tab",
-      type: "string",
-      default: "undefined",
-    },
-    onValueChange: {
-      description: "Callback when active tab changes",
-      type: "(value: string) => void",
-      default: "undefined",
-    },
-    orientation: {
-      description: "Orientation of the tabs",
-      type: "'horizontal' | 'vertical'",
-      default: "'horizontal'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/textarea.mdx b/apps/www/src/features/design/content/docs/components/textarea.mdx
deleted file mode 100644
index f08c262d2..000000000
--- a/apps/www/src/features/design/content/docs/components/textarea.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Textarea
-description: A multi-line text input for longer form content.
----
-
-## Usage
-
-<Preview centered={false}>
-  <Textarea placeholder="Type your message here..." className="w-full max-w-md" />
-</Preview>
-
-```tsx
-import { Textarea } from "@voidhash/ui";
-
-<Textarea placeholder="Type your message here..." />;
-```
-
-## Examples
-
-### With Label
-
-<Preview centered={false}>
-  <div className="grid gap-2 w-full max-w-md">
-    <Label htmlFor="message">Message</Label>
-    <Textarea id="message" placeholder="Enter your message..." />
-  </div>
-</Preview>
-
-```tsx
-<div className="grid gap-2">
-  <Label htmlFor="message">Message</Label>
-  <Textarea id="message" placeholder="Enter your message..." />
-</div>
-```
-
-### Disabled
-
-<Preview centered={false}>
-  <Textarea disabled placeholder="Disabled textarea" className="w-full max-w-md" />
-</Preview>
-
-```tsx
-<Textarea disabled placeholder="Disabled textarea" />
-```
-
-### With Error State
-
-<Preview centered={false}>
-  <Textarea aria-invalid placeholder="Invalid textarea" className="w-full max-w-md" />
-</Preview>
-
-```tsx
-<Textarea aria-invalid placeholder="Invalid textarea" />
-```
-
-### With Default Value
-
-<Preview centered={false}>
-  <Textarea
-    defaultValue="This is the default content of the textarea."
-    className="w-full max-w-md"
-  />
-</Preview>
-
-```tsx
-<Textarea defaultValue="This is the default content..." />
-```
-
-## Props
-
-The Textarea component accepts all standard HTML textarea attributes.
-
-<TypeTable
-  type={{
-    placeholder: {
-      description: "Placeholder text",
-      type: "string",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the textarea is disabled",
-      type: "boolean",
-      default: "false",
-    },
-    rows: {
-      description: "Number of visible text lines",
-      type: "number",
-      default: "undefined",
-    },
-    "aria-invalid": {
-      description: "Indicates an error state",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/toggle-group.mdx b/apps/www/src/features/design/content/docs/components/toggle-group.mdx
deleted file mode 100644
index 442ae0d77..000000000
--- a/apps/www/src/features/design/content/docs/components/toggle-group.mdx
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: Toggle Group
-description: A set of two-state buttons that can be toggled on or off.
----
-
-## Usage
-
-<Preview>
-  <ToggleGroup type="single" defaultValue="center">
-    <ToggleGroupItem value="left" aria-label="Align left">
-      <ChevronLeftIcon />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="center" aria-label="Align center">
-      <MenuIcon />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="right" aria-label="Align right">
-      <ChevronRightIcon />
-    </ToggleGroupItem>
-  </ToggleGroup>
-</Preview>
-
-```tsx
-import { ToggleGroup, ToggleGroupItem } from "@voidhash/ui";
-
-<ToggleGroup type="single" defaultValue="center">
-  <ToggleGroupItem value="left" aria-label="Align left">
-    <AlignLeftIcon />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Align center">
-    <AlignCenterIcon />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="right" aria-label="Align right">
-    <AlignRightIcon />
-  </ToggleGroupItem>
-</ToggleGroup>;
-```
-
-## Components
-
-### ToggleGroup
-
-The root container managing toggle group state.
-
-### ToggleGroupItem
-
-An individual toggle button within the group.
-
-## Examples
-
-### Multiple Selection
-
-<Preview>
-  <ToggleGroup type="multiple">
-    <ToggleGroupItem value="bold" aria-label="Bold">
-      <BoldIcon />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="italic" aria-label="Italic">
-      <ItalicIcon />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="underline" aria-label="Underline">
-      <UnderlineIcon />
-    </ToggleGroupItem>
-  </ToggleGroup>
-</Preview>
-
-```tsx
-<ToggleGroup type="multiple">
-  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
-  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
-</ToggleGroup>
-```
-
-### With Spacing
-
-<Preview>
-  <ToggleGroup type="single" spacing={4} defaultValue="a">
-    <ToggleGroupItem value="a">A</ToggleGroupItem>
-    <ToggleGroupItem value="b">B</ToggleGroupItem>
-    <ToggleGroupItem value="c">C</ToggleGroupItem>
-  </ToggleGroup>
-</Preview>
-
-```tsx
-<ToggleGroup type="single" spacing={4}>
-  ...
-</ToggleGroup>
-```
-
-## Props
-
-### ToggleGroup Props
-
-<TypeTable
-  type={{
-    type: {
-      description: "Single or multiple selection",
-      type: "'single' | 'multiple'",
-      default: "Required",
-    },
-    value: {
-      description: "Controlled value(s)",
-      type: "string | string[]",
-      default: "undefined",
-    },
-    defaultValue: {
-      description: "Initial value(s)",
-      type: "string | string[]",
-      default: "undefined",
-    },
-    onValueChange: {
-      description: "Callback when value changes",
-      type: "(value: string | string[]) => void",
-      default: "undefined",
-    },
-    variant: {
-      description: "Visual variant",
-      type: "'default' | 'primary'",
-      default: "'default'",
-    },
-    size: {
-      description: "Size of toggle items",
-      type: "'default' | 'sm' | 'lg'",
-      default: "'default'",
-    },
-    spacing: {
-      description: "Gap between items in pixels",
-      type: "number",
-      default: "0",
-    },
-    disabled: {
-      description: "Disable all items",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/toggle.mdx b/apps/www/src/features/design/content/docs/components/toggle.mdx
deleted file mode 100644
index 78599b86a..000000000
--- a/apps/www/src/features/design/content/docs/components/toggle.mdx
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Toggle
-description: A two-state button that can be either on or off.
----
-
-## Usage
-
-<Preview>
-  <Toggle aria-label="Toggle bold">
-    <BoldIcon />
-  </Toggle>
-</Preview>
-
-```tsx
-import { Toggle } from "@voidhash/ui";
-import { BoldIcon } from "lucide-react";
-
-<Toggle aria-label="Toggle bold">
-  <BoldIcon />
-</Toggle>;
-```
-
-## Variants
-
-<div className="flex flex-wrap gap-4">
-  <Preview className="p-4">
-    <Toggle variant="default" aria-label="Default">
-      <BoldIcon />
-    </Toggle>
-  </Preview>
-  <Preview className="p-4">
-    <Toggle variant="primary" aria-label="Primary">
-      <UnderlineIcon />
-    </Toggle>
-  </Preview>
-</div>
-
-```tsx
-<Toggle variant="default">...</Toggle>
-<Toggle variant="primary">...</Toggle>
-```
-
-## Sizes
-
-<div className="flex flex-wrap items-center gap-4">
-  <Preview className="p-4">
-    <Toggle size="sm" aria-label="Small">
-      <BoldIcon />
-    </Toggle>
-  </Preview>
-  <Preview className="p-4">
-    <Toggle size="default" aria-label="Default">
-      <BoldIcon />
-    </Toggle>
-  </Preview>
-  <Preview className="p-4">
-    <Toggle size="lg" aria-label="Large">
-      <BoldIcon />
-    </Toggle>
-  </Preview>
-</div>
-
-```tsx
-<Toggle size="sm">...</Toggle>
-<Toggle size="default">...</Toggle>
-<Toggle size="lg">...</Toggle>
-```
-
-## Examples
-
-### With Text
-
-<Preview>
-  <Toggle aria-label="Toggle italic">
-    <ItalicIcon /> Italic
-  </Toggle>
-</Preview>
-
-```tsx
-<Toggle aria-label="Toggle italic">
-  <ItalicIcon /> Italic
-</Toggle>
-```
-
-### Pressed by Default
-
-<Preview>
-  <Toggle defaultPressed aria-label="Toggle">
-    <BoldIcon />
-  </Toggle>
-</Preview>
-
-```tsx
-<Toggle defaultPressed>
-  <BoldIcon />
-</Toggle>
-```
-
-### Disabled
-
-<Preview>
-  <Toggle disabled aria-label="Disabled">
-    <BoldIcon />
-  </Toggle>
-</Preview>
-
-```tsx
-<Toggle disabled>...</Toggle>
-```
-
-## Props
-
-<TypeTable
-  type={{
-    variant: {
-      description: "The visual style of the toggle",
-      type: "'default' | 'primary'",
-      default: "'default'",
-    },
-    size: {
-      description: "The size of the toggle",
-      type: "'default' | 'sm' | 'lg'",
-      default: "'default'",
-    },
-    pressed: {
-      description: "Controlled pressed state",
-      type: "boolean",
-      default: "undefined",
-    },
-    defaultPressed: {
-      description: "Initial pressed state",
-      type: "boolean",
-      default: "false",
-    },
-    onPressedChange: {
-      description: "Callback when pressed state changes",
-      type: "(pressed: boolean) => void",
-      default: "undefined",
-    },
-    disabled: {
-      description: "Whether the toggle is disabled",
-      type: "boolean",
-      default: "false",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/tooltip.mdx b/apps/www/src/features/design/content/docs/components/tooltip.mdx
deleted file mode 100644
index bf4f9ddad..000000000
--- a/apps/www/src/features/design/content/docs/components/tooltip.mdx
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: Tooltip
-description: A popup that displays information related to an element when focused or hovered.
----
-
-## Usage
-
-<Preview>
-  <Tooltip>
-    <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
-    <TooltipPopup>
-      <p>This is a tooltip</p>
-    </TooltipPopup>
-  </Tooltip>
-</Preview>
-
-```tsx
-import { Tooltip, TooltipPopup, TooltipTrigger } from "@voidhash/ui";
-
-<Tooltip>
-  <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
-  <TooltipPopup>
-    <p>This is a tooltip</p>
-  </TooltipPopup>
-</Tooltip>;
-```
-
-## Components
-
-### Tooltip
-
-The root component that wraps the trigger and popup. Automatically provides a
-`TooltipProvider` with a zero open delay, so isolated tooltips work without any
-extra setup.
-
-### TooltipTrigger
-
-The element that triggers the tooltip on hover/focus. Pass the rendered element
-via the `render` prop, or use the legacy `asChild` pattern for backwards
-compatibility.
-
-### TooltipPopup
-
-The popup content displayed when triggered. Internally renders a Base UI
-`Portal`, `Positioner`, `Popup`, and `Viewport`. `TooltipContent` is exported as
-an alias for backwards compatibility.
-
-### TooltipProvider
-
-Provides shared delay / grouping behavior for nested tooltips. Mount this once
-near the root of the app (or sidebar) when many tooltips should share a single
-delay timer.
-
-### IconButtonTooltip
-
-Convenience wrapper for the common pattern of tooltipping an icon button.
-
-## Examples
-
-### Icon button
-
-<Preview>
-  <IconButtonTooltip label="Add item">
-    <Button variant="ghost" size="icon">
-      <PlusIcon />
-    </Button>
-  </IconButtonTooltip>
-</Preview>
-
-```tsx
-import { IconButtonTooltip } from "@voidhash/ui";
-
-<IconButtonTooltip label="Add item">
-  <Button variant="ghost" size="icon">
-    <PlusIcon />
-  </Button>
-</IconButtonTooltip>;
-```
-
-### Different Positions
-
-<Preview>
-  <div className="flex gap-4">
-    <Tooltip>
-      <TooltipTrigger render={<Button variant="outline" size="icon"><ChevronUpIcon /></Button>} />
-      <TooltipPopup side="top">
-        <p>Top</p>
-      </TooltipPopup>
-    </Tooltip>
-    <Tooltip>
-      <TooltipTrigger render={<Button variant="outline" size="icon"><ChevronRightIcon /></Button>} />
-      <TooltipPopup side="right">
-        <p>Right</p>
-      </TooltipPopup>
-    </Tooltip>
-    <Tooltip>
-      <TooltipTrigger render={<Button variant="outline" size="icon"><ChevronDownIcon /></Button>} />
-      <TooltipPopup side="bottom">
-        <p>Bottom</p>
-      </TooltipPopup>
-    </Tooltip>
-    <Tooltip>
-      <TooltipTrigger render={<Button variant="outline" size="icon"><ChevronLeftIcon /></Button>} />
-      <TooltipPopup side="left">
-        <p>Left</p>
-      </TooltipPopup>
-    </Tooltip>
-  </div>
-</Preview>
-
-```tsx
-<TooltipPopup side="top">Top</TooltipPopup>
-<TooltipPopup side="right">Right</TooltipPopup>
-<TooltipPopup side="bottom">Bottom</TooltipPopup>
-<TooltipPopup side="left">Left</TooltipPopup>
-```
-
-## Props
-
-### TooltipPopup Props
-
-<TypeTable
-  type={{
-    side: {
-      description: "The side of the trigger to show the tooltip",
-      type: "'top' | 'right' | 'bottom' | 'left'",
-      default: "'top'",
-    },
-    sideOffset: {
-      description: "Distance from the trigger in pixels",
-      type: "number",
-      default: "4",
-    },
-    align: {
-      description: "Alignment along the side",
-      type: "'start' | 'center' | 'end'",
-      default: "'center'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/components/underline-tabs.mdx b/apps/www/src/features/design/content/docs/components/underline-tabs.mdx
deleted file mode 100644
index 6c70e8c49..000000000
--- a/apps/www/src/features/design/content/docs/components/underline-tabs.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Underline Tabs
-description: A tabs component with an underline indicator style.
----
-
-## Usage
-
-<Preview centered={false}>
-  <UnderlineTabs defaultValue="account" className="w-full max-w-md">
-    <UnderlineTabsList>
-      <UnderlineTabsTrigger value="account">Account</UnderlineTabsTrigger>
-      <UnderlineTabsTrigger value="password">Password</UnderlineTabsTrigger>
-      <UnderlineTabsTrigger value="settings">Settings</UnderlineTabsTrigger>
-    </UnderlineTabsList>
-    <UnderlineTabsContent value="account" className="pt-4">
-      <p>Account settings content.</p>
-    </UnderlineTabsContent>
-    <UnderlineTabsContent value="password" className="pt-4">
-      <p>Password settings content.</p>
-    </UnderlineTabsContent>
-    <UnderlineTabsContent value="settings" className="pt-4">
-      <p>Other settings content.</p>
-    </UnderlineTabsContent>
-  </UnderlineTabs>
-</Preview>
-
-```tsx
-import {
-  UnderlineTabs,
-  UnderlineTabsContent,
-  UnderlineTabsList,
-  UnderlineTabsTrigger,
-} from "@voidhash/ui";
-
-<UnderlineTabs defaultValue="account">
-  <UnderlineTabsList>
-    <UnderlineTabsTrigger value="account">Account</UnderlineTabsTrigger>
-    <UnderlineTabsTrigger value="password">Password</UnderlineTabsTrigger>
-  </UnderlineTabsList>
-  <UnderlineTabsContent value="account">Account content</UnderlineTabsContent>
-  <UnderlineTabsContent value="password">Password content</UnderlineTabsContent>
-</UnderlineTabs>;
-```
-
-## Components
-
-### UnderlineTabs
-
-The root container managing tab state.
-
-### UnderlineTabsList
-
-The container for tab triggers with underline styling.
-
-### UnderlineTabsTrigger
-
-A tab button with underline indicator.
-
-### UnderlineTabsContent
-
-The content panel for each tab.
-
-## Comparison with Tabs
-
-The UnderlineTabs component uses an underline indicator style, while the regular Tabs component uses a pill/segment style. Choose based on your design needs:
-
-- **UnderlineTabs**: Minimal, underline indicator, good for content sections
-- **Tabs**: Pill/segment style, good for switching between views
-
-## Props
-
-### UnderlineTabs Props
-
-<TypeTable
-  type={{
-    value: {
-      description: "Controlled active tab",
-      type: "string",
-      default: "undefined",
-    },
-    defaultValue: {
-      description: "Initial active tab",
-      type: "string",
-      default: "undefined",
-    },
-    onValueChange: {
-      description: "Callback when active tab changes",
-      type: "(value: string) => void",
-      default: "undefined",
-    },
-    orientation: {
-      description: "Layout orientation",
-      type: "'horizontal' | 'vertical'",
-      default: "'horizontal'",
-    },
-  }}
-/>
diff --git a/apps/www/src/features/design/content/docs/foundations/colors.mdx b/apps/www/src/features/design/content/docs/foundations/colors.mdx
deleted file mode 100644
index bc5051330..000000000
--- a/apps/www/src/features/design/content/docs/foundations/colors.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: Colors
-description: The Voidhash color system — semantic tokens, what each one means, and the brand scales behind them.
-full: true
----
-
-Colors are exposed as CSS custom properties on `:root`, remapped under `.dark`, and re-exported to Tailwind through `@theme inline` in [`@voidhash/ui/styles/brand-theme.css`](https://github.com/voidhashcom/voidhash/blob/main/packages/ui/styles/brand-theme.css). Every token below therefore exists in three forms:
-
-<DocsTabs items={["CSS variable", "Tailwind utility", "Inline style"]}>
-  <DocsTab value="CSS variable">
-    ```css
-    .thing {
-      background: var(--card);
-      color: var(--card-foreground);
-      border-color: var(--border);
-    }
-    ```
-  </DocsTab>
-  <DocsTab value="Tailwind utility">
-    ```tsx
-    <div className="border bg-card text-card-foreground" />
-    ```
-  </DocsTab>
-  <DocsTab value="Inline style">
-    ```tsx
-    <div style={{ background: "var(--card)" }} />
-    ```
-  </DocsTab>
-</DocsTabs>
-
-There are two layers. **Semantic tokens** (`--primary`, `--muted-foreground`, `--border`) describe a role and swap value between light and dark. **Brand scales** (`--blue-ribbon-600`, `--zinc-200`) are the fixed ramps those roles point at. Product UI uses the semantic layer; the scales exist to build tokens from, and for the rare case where a specific step is genuinely the right answer.
-
-<Callout type="warn">
-  Reaching for a scale step directly in product UI is how dark mode breaks — `bg-zinc-100` stays
-  near-white when the theme flips. If nothing in the semantic layer fits, that is usually a missing
-  token, not a reason to skip it.
-</Callout>
-
-## Semantic tokens
-
-Click any variable or value to copy it. Each card shows the light value on the left and the dark value on the right, with `Aa` rendered in the token's paired foreground so you can see the contrast the pairing produces.
-
-<SemanticColorTokens />
-
-## Brand scales
-
-These are theme-independent — the same value in light and dark. Steps run 50 (lightest) to 950 (darkest); the 500–600 range is where the hue is at full strength and where most semantic tokens land.
-
-Two literals sit outside the ramps: `--white` (`oklch(100% 0 0)`) and `--black` (`oklch(0% 0 0)`). They back the canvas in light mode and the sidebar in dark mode — reference the semantic token rather than the literal, or the surface will not flip with the theme.
-
-<BrandColorScales />
-
-## Choosing a color
-
-<Steps>
-
-<Step>
-
-### Start from the role, not the hue
-
-Ask what the element _is_ — a raised surface, secondary text, a danger action — and take the token for that role. `--destructive` says "this deletes something" in a way `--radical-red-600` does not, and it keeps the meaning if the palette is retuned later.
-
-</Step>
-
-<Step>
-
-### Take the paired foreground
-
-Backgrounds with a `-foreground` partner (`--primary`/`--primary-foreground`, `--card`/`--card-foreground`) are contrast-checked as pairs. Mixing across pairs — `--foreground` on a `--primary` fill — is where contrast quietly fails, usually only in one theme.
-
-</Step>
-
-<Step>
-
-### Step down for emphasis, don't fade out
-
-Quieter text is `--muted-foreground`, not `--foreground` at 60% opacity. Opacity compounds against whatever surface it lands on, so the result is unpredictable across the surface stack; the muted token is tuned per theme.
-
-</Step>
-
-<Step>
-
-### Check both themes
-
-Dark mode is not a filter — `--card` goes _lighter_ than the canvas while `--sidebar` goes to pure black. Anything hardcoded, or built out of opacity over a hardcoded color, will look wrong in exactly one of the two.
-
-</Step>
-
-</Steps>
-
-## Gaps worth knowing
-
-- **No `--warning` token.** Use `--amber-500` (dark surfaces) or `--amber-600` (light surfaces) for caution states, and keep `--destructive` for genuine danger.
-- **No info token.** Informational states use `--primary` or the muted surface stack.
-- **`--blaze-orange-*` is unmapped.** It ships in the theme but no semantic token points at it yet.
-- **Charts don't use the semantic layer.** `--chart-1` through `--chart-5` are assigned in order so a given series index keeps its color across every chart in the product.
-
-## Adding a token
-
-Semantic tokens are added in three places in `brand-theme.css`, and all three are required — a token missing from `@theme inline` exists in CSS but has no Tailwind utility:
-
-```css
-:root {
-  --warning: var(--amber-600);
-}
-
-.dark {
-  --warning: var(--amber-500);
-}
-
-@theme inline {
-  --color-warning: var(--warning);
-}
-```
-
-Point new tokens at a scale step rather than a literal color, so the ramp stays the single source of truth. This page reads the stylesheet directly, so a new token shows up here as soon as it is added to `SEMANTIC_GROUPS` with its meaning.
diff --git a/apps/www/src/features/design/content/docs/foundations/meta.yaml b/apps/www/src/features/design/content/docs/foundations/meta.yaml
deleted file mode 100644
index bea8cd0ff..000000000
--- a/apps/www/src/features/design/content/docs/foundations/meta.yaml
+++ /dev/null
@@ -1,4 +0,0 @@
-icon: Palette
-title: Foundations
-pages:
-  - colors
diff --git a/apps/www/src/features/design/content/docs/introduction.mdx b/apps/www/src/features/design/content/docs/introduction.mdx
deleted file mode 100644
index abb6a1772..000000000
--- a/apps/www/src/features/design/content/docs/introduction.mdx
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Voidhash Design System
-description: Introduction to Voidhash Design System.
----
diff --git a/apps/www/src/features/design/content/docs/meta.yaml b/apps/www/src/features/design/content/docs/meta.yaml
deleted file mode 100644
index 090061631..000000000
--- a/apps/www/src/features/design/content/docs/meta.yaml
+++ /dev/null
@@ -1,6 +0,0 @@
-title: guide
-root: true
-pages:
-  - introduction
-  - foundations
-  - components
diff --git a/apps/www/src/features/design/lib/basepath.ts b/apps/www/src/features/design/lib/basepath.ts
deleted file mode 100644
index c99d371e3..000000000
--- a/apps/www/src/features/design/lib/basepath.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DESIGN_PATH as BASE_PATH } from "@/lib/paths";
diff --git a/apps/www/src/features/design/lib/cn.ts b/apps/www/src/features/design/lib/cn.ts
deleted file mode 100644
index 8e473dac8..000000000
--- a/apps/www/src/features/design/lib/cn.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { twMerge as cn } from "tailwind-merge";
diff --git a/apps/www/src/features/design/lib/layout.shared.tsx b/apps/www/src/features/design/lib/layout.shared.tsx
deleted file mode 100644
index 5d392edbb..000000000
--- a/apps/www/src/features/design/lib/layout.shared.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
-
-export const baseOptions: BaseLayoutProps = {
-  links: [],
-  nav: {
-    title: "Voidhash Design System",
-  },
-};
diff --git a/apps/www/src/features/design/lib/source.ts b/apps/www/src/features/design/lib/source.ts
deleted file mode 100644
index 6765ecb8e..000000000
--- a/apps/www/src/features/design/lib/source.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { loader } from "fumadocs-core/source";
-import * as icons from "lucide-static";
-
-import { design } from "@generated/server";
-import { DESIGN_PATH } from "@/lib/paths";
-
-type DesignSource = ReturnType<typeof loader>;
-
-let sourcePromise: Promise<DesignSource> | undefined;
-
-/**
- * Returns the loaded design documentation source. fumadocs-mdx's server runtime
- * builds the collection eagerly (top-level await in the generated
- * `.source/server.ts`), so `toFumadocsSource()` is synchronous here; the promise
- * memoizes the loader.
- */
-export const getSource = (): Promise<DesignSource> => {
-  sourcePromise ??= Promise.resolve(
-    loader({
-      baseUrl: DESIGN_PATH,
-      icon(icon) {
-        if (!icon) {
-          return;
-        }
-
-        if (icon in icons) {
-          return icons[icon as keyof typeof icons] as unknown as React.ReactElement;
-        }
-      },
-      source: design.toFumadocsSource(),
-    }),
-  );
-
-  return sourcePromise;
-};
diff --git a/apps/www/src/features/design/source.config.ts b/apps/www/src/features/design/source.config.ts
deleted file mode 100644
index a5283b326..000000000
--- a/apps/www/src/features/design/source.config.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  defineConfig,
-  defineDocs,
-  frontmatterSchema,
-  metaSchema,
-} from "../fumadocs-config.ts";
-
-// You can customise Zod schemas for frontmatter and `meta.json` here
-// see https://fumadocs.vercel.app/docs/mdx/collections#define-docs
-export const docs = defineDocs({
-  dir: "src/features/design/content/docs",
-  docs: {
-    schema: frontmatterSchema,
-  },
-  meta: {
-    schema: metaSchema,
-  },
-});
-
-export default defineConfig({
-  mdxOptions: {
-    // MDX options
-    remarkNpmOptions: {
-      persist: {
-        id: "package-manager",
-      },
-    },
-    valueToExport: ["elementIds", "toc"],
-  },
-});
diff --git a/apps/www/src/features/design/styles/globals.css b/apps/www/src/features/design/styles/globals.css
deleted file mode 100644
index f3ca99483..000000000
--- a/apps/www/src/features/design/styles/globals.css
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "@fontsource-variable/geist";
-@import "tailwindcss";
-@import "fumadocs-ui/css/shadcn.css";
-@import "fumadocs-ui/css/preset.css";
-@import "@voidhash/ui/styles/brand-theme.css";
-
-@source "../../../../packages/ui";
-@source "../../src";
-
-@custom-variant dark (&:is(.dark *));
-
-::selection {
-  background: var(--blue-ribbon-600);
-  color: #fff;
-}
-
-:root {
-  --color-fd-primary: var(--primary);
-}
-
-.dark {
-  --color-fd-primary: var(--primary);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/apps/www/src/features/source.config.ts b/apps/www/src/features/source.config.ts
index 081da7c30..bc1cbe7ee 100644
--- a/apps/www/src/features/source.config.ts
+++ b/apps/www/src/features/source.config.ts
@@ -1,10 +1,11 @@
 import { defineConfig, defineDocs, frontmatterSchema, metaSchema } from "./fumadocs-config.ts";
 import { voidhashShikiDark, voidhashShikiLight } from "./docs/lib/shiki-theme.ts";
 
-// Both documentation surfaces (product docs + design system) are declared as
-// collections in a single config so fumadocs-mdx emits one `.source` runtime
-// bundle. Keeping them in one config avoids running two `mdx()` plugin
-// instances against the same output directory (which would clobber each other).
+// A host that adds documentation surfaces of its own replaces this config
+// wholesale rather than registering a second `mdx()` plugin — two instances
+// writing the same output directory clobber each other. See
+// `apps/www/src/features/source.config.ts` in voidhash-mono, which re-declares
+// this collection alongside its own.
 export const docs = defineDocs({
   dir: "src/features/docs/content/docs",
   docs: {
@@ -15,16 +16,6 @@ export const docs = defineDocs({
   },
 });
 
-export const design = defineDocs({
-  dir: "src/features/design/content/docs",
-  docs: {
-    schema: frontmatterSchema,
-  },
-  meta: {
-    schema: metaSchema,
-  },
-});
-
 export default defineConfig({
   mdxOptions: {
     remarkNpmOptions: {
diff --git a/apps/www/src/features/www/button.tsx b/apps/www/src/features/www/button.tsx
deleted file mode 100644
index 40db04fcc..000000000
--- a/apps/www/src/features/www/button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type * as React from "react";
-
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        icon: "size-9",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-      },
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-        outline:
-          "border bg-card shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-border dark:bg-input/30 dark:hover:bg-input/80",
-        success:
-          "bg-success text-success-foreground shadow-xs hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 ",
-      },
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      className={cn(buttonVariants({ className, size, variant }))}
-      data-slot="button"
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
diff --git a/apps/www/src/features/www/hero/footer.tsx b/apps/www/src/features/www/hero/footer.tsx
deleted file mode 100644
index 1d3a34d57..000000000
--- a/apps/www/src/features/www/hero/footer.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Logo } from "../logo";
-
-export function Footer() {
-  return (
-    <footer className="flex w-full max-w-7xl flex-col md:mx-auto">
-      <div className="w-full">
-        <div className="flex w-full justify-between px-4 py-12">
-          <p className="text-center text-muted-foreground text-sm">
-            &copy; {new Date().getFullYear()} Voidhash s.r.o. All rights reserved.
-          </p>
-          <div className="flex gap-9 ">
-            <a
-              className="text-muted-foreground hover:text-foreground"
-              href="https://x.com/voidhashcom"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                className="h-6"
-                fill="none"
-                viewBox="0 0 1200 1227"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>X.com (Twitter) Logo</title>
-                <path
-                  d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </a>
-            <a
-              className="text-muted-foreground hover:text-foreground"
-              href="https://github.com/voidhashcom/voidhash"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                className="h-6"
-                fill="none"
-                viewBox="0 0 1024 1024"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>GitHub Logo</title>
-                <path
-                  clipRule="evenodd"
-                  d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
-                  fill="currentColor"
-                  fillRule="evenodd"
-                  transform="scale(64)"
-                />
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div className="pb-12">
-          <Logo className="h-auto w-full text-muted dark:text-muted" />
-        </div>
-      </div>
-    </footer>
-  );
-}
diff --git a/apps/www/src/features/www/hero/hero.tsx b/apps/www/src/features/www/hero/hero.tsx
deleted file mode 100644
index a26b6fc25..000000000
--- a/apps/www/src/features/www/hero/hero.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-// import { ChevronRight } from 'lucide-react';
-
-import { VoidhashGradientBackground } from "@/components/voidhash-gradient-background";
-
-import { Button } from "../button";
-// import { Button } from '../button';
-import { SectionContainer } from "../section/section-container";
-
-export function Hero() {
-  return (
-    <SectionContainer className="w-full">
-      <section className="relative isolate flex min-h-[760px] flex-col items-center overflow-hidden pt-26 sm:min-h-[780px] lg:min-h-[820px]">
-        <div className="absolute inset-x-0 bottom-0 z-0 h-[430px] sm:h-[470px] lg:h-[520px]">
-          <VoidhashGradientBackground
-            controlsQueryParam="heroControls"
-            controlsStorageKey="voidhash:hero-three-controls"
-            controlsTitle="Hero FX"
-            settingsStorageKey="voidhash:hero-three-settings"
-          />
-        </div>
-
-        <div className="relative z-10 flex flex-col items-center justify-center">
-          <div className="rounded-full border border-border bg-card px-4 py-1 font-semibold text-muted-foreground text-sm">
-            Closed Alpha Preview - Now Available
-          </div>
-          <h1 className="mt-6 max-w-xl text-balance text-center font-semibold text-5xl leading-tight tracking-tight">
-            Add in-app purchases to React Native in seconds.
-          </h1>
-          <p className="mt-4 max-w-2xl text-balance text-center text-muted-foreground">
-            Voidhash is an open-source subscription management platform for React Native that allows
-            you to integrate Google Play and App Store purchases with single command.
-          </p>
-          <div className="mt-10 flex w-full items-center justify-center gap-4">
-            <form
-              action="https://formspree.io/f/mpwjvpve"
-              aria-label="Join waitlist"
-              className="flex w-full max-w-md flex-col items-center gap-2 rounded-xl border bg-card p-1 sm:flex-row"
-              method="POST"
-            >
-              <label className="sr-only" htmlFor="waitlist-email">
-                Email address
-              </label>
-              <input
-                aria-label="Email address"
-                autoComplete="email"
-                className="flex-1 rounded-md bg-background px-4 py-2 text-base text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
-                id="waitlist-email"
-                name="email"
-                placeholder="Enter your email"
-                required
-                type="email"
-              />
-
-              <Button className="w-full sm:w-auto" type="submit">
-                Join Waitlist
-              </Button>
-            </form>
-            {/* <Button>
-              <span>Get Started</span>
-              <ChevronRight className="size-4 opacity-50" />
-            </Button>
-            <Button variant="ghost">
-              <span>Documentation</span>
-              <ChevronRight className="size-4 opacity-50" />
-            </Button> */}
-          </div>
-        </div>
-      </section>
-    </SectionContainer>
-  );
-}
diff --git a/apps/www/src/features/www/landing/assets/agent-icons/antigravity.png b/apps/www/src/features/www/landing/assets/agent-icons/antigravity.png
deleted file mode 100644
index 83e7e53703ec1b7df74484eb4cf16009d91325b2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9026
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
K^(s~S*#7}Hl_Jmp

diff --git a/apps/www/src/features/www/landing/assets/agent-icons/claude-code.png b/apps/www/src/features/www/landing/assets/agent-icons/claude-code.png
deleted file mode 100644
index a551af3de7adc9b36ad3e35abb62e0fe44c02198..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 21744
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

diff --git a/apps/www/src/features/www/landing/assets/agent-icons/codex.png b/apps/www/src/features/www/landing/assets/agent-icons/codex.png
deleted file mode 100644
index 8eb519927020f892d4434682385f75a47ea2990a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 17775
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
M>FVdQ&MBb@07I-O?*IS*

diff --git a/apps/www/src/features/www/landing/assets/agent-icons/cursor.png b/apps/www/src/features/www/landing/assets/agent-icons/cursor.png
deleted file mode 100644
index 22b3da450712aa34c250d920fa3daa9efa8e804e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6164
zcma)A2Q-}9xBo^bx<rXKjNV2NZAML$DA9$89)mF2jGh=o5H*Ps#3+#<qJ|)dHljvJ
zlqk`O-i1N%xHs?K`~K^`x8Aqb`S$*P`}f;>pLNdq);j00{!I-kipvxL08rh~yl!}A
zgU<&U$=MsHXxnvWh#XaPRREwY{=zR?;<InCy{4fq00i)z@xlP$@SML00N&yNuxtYW
z@+kno<dI%u06z=(Ihfr*=;{JOXFeG~1iB2IX8@fIMG)&>zB)(%Ap8R-0DuT*fao{p
z=9xWzo}7(y&7YPq3-p_PhGh}_#SYFQ{M$d5r4iN*of&cuO>-0gF!G)c&<#VLO#mQB
zcQ!Udo9XJv+q)yhZ11|;If(foJ<e4C+)w_@MLM8u!G1_rH<Y}e0{0&b`7{3<hH``d
zprBn8xXpC+!Pnfq9Kh0I;$q_5iWFcl818i!A#ZqH{kQz=OM%-7jrNd-LVbOG#e5~j
z+`Sy3SLEd6pyCox2?^0NhA7J44Q=Zu>V|^+ndHCoTz5d(dpUcco!#BQ=Xq`I+`Z8X
z+}!7d{(AoG6YY%nyOJB~_q5I?2tAKLuZW35|4ruL=ls9O&Le-y{+QRF<>2SZ<jo8n
zQ0}hY=WQuok&=S{QR07~e>eE2!u($q|3v>&@wdRl%^9sI@w>=>!2eL4_badO?C0QW
ze%%@A;D$Qy?&_5@;lD=yRcZFWD*qArPvtdtS9dQX4_kW&#Vfyy{R8^VhC|QS?;q>=
z=Vti>J=-mc6maNYJ5P~<0A;uh02i%pTvsvn1Fcy)d$4I-3Mzk#8%+|?79NS?ne?%<
zh$~?u@}g^|3nllw$q=P~(d1XQkcs{i?rFS=3K*nnA{)iYCa6l6B~TDEE9=R25Q&m~
zCOTGjx9zEDN3y7S)m@icUpa6`0fU|DPv67J%V7#HmV}%Uj*d0f4f{U>ORO7~c)g;#
zK+g%qNbgWrvw6r(c{R=l|DV8<F19|`^>oJruTD;OUOg+0CF%ZWgFhg2UlH9e&9pDX
zqHvWz72W~@!os&x^88D_T|JiPM)EEl!q<Pfp6no!j+Uhuzi6^@M`7dX*uTMdr4xqw
z##mQBGd^Y^Rd#T2DB~bUeuW?2LSx<LNV+sDJFBax4o7A@p7{_7^WmF*ap~r`Av!rM
zzh%C-b?N)a0FTu5XSY9NMAdBT!@HDHtywlPk6=6OjQGK7Dt5HC7qvJUQHdF>u4AEL
zdA)Xba!xO`76JiMEPhzC?)3HFIan+1>n11BQ;}tsyu5VE65q<fe)%%;lecj6e5J2j
z<Ecrd<LTYGp_=9@b>p<$qCKaK?i2Ha4H6BU=+MCBl23*}X(uM;(Fx_Pwen}0Rbovc
zhTS>iE6~mj%JAk`)2$W>z?kH|l8wVpNj?z>;!^=NtS$qN*x(~ki7)||UN=jcKPf3M
zIxH9dwb~fn?GlN77#MJ<VWm~|sRE>LFkKsNcblCd^q|h-U0X<;rbs~l)Ra@8yl%i(
z|LWZEs0!xeIJzYYC3f{Rzhr-_gpDnDcYH1{u7ZQ(!X?Z@2$M|pL_Ilq?g5!!vCF8!
z4gs&VPM%OdkpCvtvgb>|MoqI`#PO2Cg(LPs`}myzt?ZFB9YPzl)E@9QTMfbLlc}9a
z$b4Vq;R@-ImZE*7bUD!8Z(kOHg&&#+8i+75U=XQ!ov1X%<23WzIv|?~_^D9bO{COV
z{&=rijzQ<_&xOv;4^oajY#eH7_94M4`3ZX+om!{&CGXEShHlY6c9IFygw9p6n~2YF
ztqK?CzvR_^{<L=?C%Z|d#&3(;+Z&rVJ#G7i^ZV?p<~h?+^;uq@QADDf5wO{^8~<A7
zKwJwEu&?c{lvfy&ENXc(B#NS}oqoQMGPrqTzyF<su#=6AGQf3_f;>x>oGgRcfePTT
z%y~;h+Ml4^nwcC5725tX!>j$KpdhNwY9nGmVf~sQ6q+|u?r7xhPUG!so#i2`!x1ki
zoVr!7i&W;<TN`kBb6>g;B-@0`(|Cw7dh@*}&}Lz0XUBQES*^lpi$3ks!L90WI?RXA
z4e;i{PKnKAR*cx4#aAaML0d6jl_O`XqK=5i9NHyVNrH2Uj|)Lju~$)Y$rcz(3crcE
zgXW&+$;lKTRs0*q0RuBL&1gnZ+ai4xEOsF*6G+H<X&$M4C)3hG`#@bXl9CY2*sqY*
zLvHoPOHzCPhBr+J)Pc0bODr*wPyHhcy*}rOmX_AAM)kAfhe3NZ^3E4o3OOjH=Gi{g
zJ*At?NVNr0Y!SJcO^e}C5d|gF#8Gv1zsQ^NXpG(%5QI?d(P)jxEFw6wUvRG~3n3W|
z@7Cmiz{ov<%AII)e9Dko&XxY0Aij)j(H820w{IVnM><0gR02Y2k5Uhx;js{qxSWu`
ze1tQ5u5UG>rH5aFYY^qkn1xK<EaawTMx0K;Eo;ynp8e`0jv654(F426uF@TkUGYN+
zQNIom{}{p$2JkQs{+JhTv^dXljVU%ZR<1`xmIR=cfTQw{h%Yc2s;Gp}!ozHDg$&vL
zdi=!8d5Mh<rc4Q{kpHBl&jHv-q?lV;;`(b|!)Kz(U#`anQ%G_D&^Ibq#*<>PSScwf
zfdc(;C4ENV>qK%=5-P<<F3B^I`rEsrbtB@?S4;*PDf|GSOh%%SxJQ#n2rxgUo1ewQ
z*+fOYD-%woF;FaOsPL4%nmaDt#^bA>Ayfnb8}zj#JFO~@FLt&&p521YdPD+F;fE19
zmuZB34Xmw87NfOJLg;}fpH(S?mfkto%}u2hEGruHb@Y6pku5Y!5P;GMRIR$gfJQJ~
zy#vhJz(5e6dLdMgD14V@s<HJsc9KSTY>j7>0w8NBC`dCcDxPnbZ&+(w*(6~qr$2DT
zv#miYp=*`X6qHJhA7HMGQ^VZheM3HJ*iT#*4+t$l!SDTt0}{8D<sQtmzEF!%upm%@
zW!vaiWX57>PsmD!SI25Ch+=>AU}aJtCC2XMx!_EJU@nhHFquekp_%8UaSvQuUXG+=
z@!4v4E&8SGt&iXy>{G<rI4-yn2d~O12R};U$7~tht_mVlz)xMPxHow3!22c})QT-v
zF^-;Fv2SQpNFw2h=Ura|0>FkqIk*8A8?oqzVi@-sTdO$8IP$;z2pN`c(K_6=xb&g1
zAV^ckWq)m47|?IOpe1zC0RX3l2r{IXv%{>iswRV?*AKrUYG&hL{vR7OCuSlcI=8K@
zX{dJhA1{f_u(qH5Ws;r?#`l^CY9ZjwG6Ev$yz1T7r`!AizsfY0x@D|yJ#v)%3c`?#
zTtgO#4vgWB6t*0lq@iO+OjYhoxzw2^f}PI6*IOHJ2#M@&qu(S29Srm?)vOffkq#?0
zjs{0LgzXSyt!t>y9Doe_n2$Fy;7#D5YebKXUs^f?n(AB(r1Om-Rf~%-jU~y<6Or+c
z2Uc|E3H!tTYzy$<46Di=c;0h})mK6!<KyejW2co-Qm9~+*E3{*W_XiQWa&bk_X=jI
zsA?js`^84i7z<^!n}$luyUf`mO|qwQp|pN>9lg*j8LLUX?(S|oEMyCIsb}ztx}ev!
zL(&Hi9_+R$on!><;x_uTA5sY_A_tN34TjR-)%(7_-yE3yYzV}*R}f=W?hHY}CPfzJ
z@v{IJ7B9dp5q2}<{__mK8UEcBYlRz*Jr!Lgl0GemL4kq7SeUQ0GX?X&@mud&`~=Ew
zBJ;}2uld6Ud^R;fp&g~QM|*48t*sByZ3_*`zT@6ik?-|<8%A7gt$H=&@!<ITmTiU`
zpY7Yag0wX>NC!XGbV)NLX<4(=0B8v}Mv70(Jq@Qn>q<ZDPwWHZ0V_!EB-kbOJL?=R
zJmSyW(yi)+Q*`k8UAX$jy)|g0Ow{VOf!MdamK8Y=Fv2x_=auU$wtiA^hjq04$b`<+
z3ib20e{?qFrEf}CgsKWiLas>Ll)S=_p&@5b|FrUJ4(D;ZAfVag_tD=K^*D|lrp14g
zEziR3fM+~#^5M*yjeoCBn}Jnw>wS)`z(ix>_`vMgCnt}bIT0iUx<|_Pb{#i>c4|8c
zl2e;+#n=Il(hO;2P4s%*PPCm8;IB7xg`Pb67LHWzS%hE)T~k*;*1GRTF+<Or&I0SN
zFZuyx{@0jbf$_=Az+|gHBy=2e%2>0MYtiCcP3jZmQEFW{)G?<k+1w^+Hu!yO#>e4f
z(5_6`92~go$i-F&MW-uh>zy777R)Y<;Ak+|eS#D{%U=P{bta`Dej_9U$30kRIgOW!
zj={WlQamRMpveU;q%8NC^MELH-3#hUhDP@;k#TtESQVPDj+a~bx9M%G_F?f{-+E^~
z1EBobGuTr*TLRkKJ&v`p8(&4oDv#r@-smG%u8FBQ^e1Dg2g2eg@8&Oee4Z673zS6S
zMqubgTK;k=c`f{+OWX@!bz7x*@7kuC+SV(2Vf9)fir`1CKbR_!@2^L<2b6n%HV2g3
zOS?21#Khv>1_~2HiFtA#c$XLoFC56(j`A-hx1|#TVU!Wn8}qhZG9s6!Z}Wx4`vk}u
z;<vk?ui3ql2|D(!IG!CH?Rh5_b}qo;zoZB@X>+OI>MHC>OBi<L5TpFgXM5)Ch-;~@
z-ww5H?rFo62r)pcB&amV8eY#Uj5c5zASMl~(K#T1>l&^8e(8>WM=E38UAEDtdy|V!
z?PWQf4^sUNEcQ&xASpB(tf6fy-%5Yt(?zEV(Ruh=nYii5VUvri(`!4IW)1Jn$!Za5
zg6!oZ6#SpiwV1W1O*I(;RM5mB8L7zE3!k+8WWE3md)?D_SLNe2wiXg+m;q(H$Lb6W
zbwG^a1;6WXjX6=L#@k2=5G9sAA)+E;80dWrvBVCGQr13}zxF|h1|VZGlFJWt9ZS=N
zDP1yiVtxBSBc9`+v4RGy+;l=>S0!#mxojJ30}B`o$r1s;e))zmBI1`IG~ZU4f6|lD
z{%E>Js#eFjt0M{!6yMtMc|SZ*5H0gqm6|K605OgGm@@iS1d~jlevgSL9uifT;o!yh
z;vu7|&qg4>UXabM-h{X(w+e+4@!06J1KlcL)B}+5E=?i<kV0A;RjoiEZ<8_}`kbJ3
zv3P+^NrW3j*%9@sHW8CR276)mF#m$3CAXyxZ+R9G&?rL2O3kr)pAT2nK_oN2ufNh3
zFB2`bv1ELT?rnDgs1L)(mHB)xti*0G@@<suI0*xD0wLIlgorQkF55NOn5W2Ver9Vp
zFL!weld|$@X}74)1>8h)yL9r@^EHPfr<FUz=H)5!(+guWsKea^i9!TeA|{?qt{J_T
zM-224+Y*wcNQ+JDia&*i_WCedTm_7eYtt*)?~*#>T3uMklA2o!UV_ADY-{7$10B`d
zpeCS~im@2v-1iUELjqKG$xot`p58k~te0N`z|2C7AJ7ZEnK?<qx4xvkU&&9YvWZuR
zRK6hS^Lb(oSDWk2U(>rtvK+$4a`|!=E<M^Wis`ALHy^`FN6UvbKsm4RjyMsBk;k;q
zqAJ7mj{o4?PaQPe9Gms#<45dGtb9`Pra|xGV#=ZgLqk5n`*;_h`1>Q6v-=J^ajiz?
z)#5VDsbWCMJP-1_hv=Y)nYc5I_e-i`C}SO|nYA_4wSvWVn&l)!lte$;&-r~Oio}EJ
zf$^JsH7XQ|4?Sj_?dJFgRD?(Jko&Lz+|lW=E1s10qBOd(B#h-!$}7$d5~+7srNF(<
zJk=)jb+6Rq0L|vP{A*v;G}_F|u&ZfTZ$*dEeCCia5kK5wRgSH*WDiTd_tb}DgMmZA
zE5(`$#x+5ec&zz8!*w!G1mJ;)6J*D+%8^V49A0$i`C#BmPu!{sF|*X)n8rnXqISR^
zd@!bPY7utmu4|ZvY0z8%vN;AH#n%hc0JMU~guiO`>lM5QwkK|6NL%5Q_zb%FxDX?E
zZl`dZSSpjzTLr$OpIlCA5g`H8LIuLy23&bu_!B1iHyrpZWX!7cI|`GpI9%sJj%;75
z2pT65nzvpky*E1Crw>)%(NT?g8(7j#-q@3y(%LMOy2SF(vU_wbjv#n0%D9M(8$16X
z<ep1O?%-P&^0AV%pEO{&&cW#DsF<*3&rdG*j9Z1P?12lBW}LyxzAvYEq3q<rH)hP8
z@J029hlJ=u^o1g83{~&tWRHq&`*x+qNDfX;NX$uBw**i_Mw)k1I&-SeBWL)>xbw2r
zw&>QP6OaY@s-&EI({fzcu8jBu^h}M;QIB_sT7`RJvcG>P`wM0HLuq<kRrQZKgG@#M
z|Gd1(Xx<bVhG|s5nR;qAR&RGERU|{A%pB4?lp0a^LFzE4*UnEHLm{%_ef&P+O5KvQ
z=sUJe8s=P=lcQ~^Xdhn;hf7H}>lA2Se<rj*OG`93fHszObn!<{3t8DKt1h8WKw)um
zN)kS=JUm<IJy88BWg`q;r=Fs8;DTM>XVkG`+(r+!QBnLIMi#loEisSr_laq?<_iR^
z1$XF#SdA(){nC3pc-FrkP;Vi`=_N`(v97{TN{M3c5Df>xA;d9L3_(N0o}~4t?HUR8
zbXBs19yJ&<Wvr6Y{M%QYRD{7U0}s@QGiTJl@f3~!V4YFkq}?M86@MBiPAYi&6K|-5
z-)2z}@;*mqGuLjkLRj2Z_<#pR*$8A=|D(>6>Z{BY8xmS?Z5hPBC@XMQF(W@0AI-PB
zAr(aFVOuDvVHj-=XBwagzypa=jLmbeb_(mptMG+K3;NwM#uvX%+2gB1Fe-<Wzh4HC
zv8k$`oSpWf1zH!@){qQ}z{Qt>$!2O9BLU$QyThY9gxQkn!s6e?ZVTlv?s87G4zVKj
zlaA<A<J4!D%=&0=>i_KDqF&Cta%|^*+Rk?}u_*%nIbYl|^uj6q#bE^DXM65JPT2@a
zvR)3%%}e#Gv>F1Ztqb9g;upF>fL_4Q22=u*$1>xQY-3KtNCIYwxcp*DDsg0GXwxRI
zwLuVFe8$*k>2<~D9Hdzx2OELo3bsbn;M+0_ggSlQMg?;I8R9`b!c{@@o-Z*%oMCJH
zqy1wt+j6<6?;=G%bb%__cC~MdbbN@<BA|8D581{7Oe1TK2Hv^9S)(ggH<$-@k)n$6
zfTB5l{lwY7TLF<ycx7**exzT?PIgl=>0JdVn1Y4K9sl4FXo%>W9<uS+Rg^UA@L+?q
z@bJ_|tveY2!aUdxFEv0L(y^*cM5daELwU4rKW3nx>Au}zNv!pIO5i&>#{LWJSAD2~
z`eHYwahn=>Y&jIBXEU%<&H013*u88N)7oiTL=>DAt+E;5X#jc|#+tJE!Ib{UpirC4
z`kNKM-YS>r(OA)ska++Ifn;wkg{q$JaEM->6ByK5zkdIq``$9DLXph!*HfP~y`Vdb
zwYzJ@#ha-*=vxBMb&N$;D2bv9-lr^Z#nrh@zv;TYo+3_le?6I;y5;IG9$2ev^<-oA
zGG_Dpawa<tcbqVJcZz2g(9HS(rrj*+N3ZeK`>;o3C8Gpb_?l@N`M>W!m78a#c(x+u
z8Bv=G;vWuC%=)x@%tWG|hQDnpO<kI>m9f3OJyTa##vSxnq9{1gi0<JpEzA8_4+$Z|
s)jQZlW0e|o?f>hB?)M$uBe_kCy&CO_8+CTZ`MviIwVT(ARc%853pH5lYXATM

diff --git a/apps/www/src/features/www/landing/assets/agent-icons/opencode.png b/apps/www/src/features/www/landing/assets/agent-icons/opencode.png
deleted file mode 100644
index b70bcbe2176ebb3090dd23d85a3a6564d68fcb55..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10326
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

diff --git a/apps/www/src/features/www/landing/asteroids/engine.ts b/apps/www/src/features/www/landing/asteroids/engine.ts
deleted file mode 100644
index b2cb52b04..000000000
--- a/apps/www/src/features/www/landing/asteroids/engine.ts
+++ /dev/null
@@ -1,1088 +0,0 @@
-/**
- * Vector-arcade engine behind the landing page's Asteroids easter egg.
- *
- * Deliberately framework-free and allocation-free: every entity lives in a pre-sized typed array,
- * the loop only runs while the board is on screen and being played, and `destroy()` hands the
- * canvas' backing store back to the browser. Nothing here touches React, so the whole module can
- * be code-split away from the landing bundle.
- */
-
-const TAU = Math.PI * 2;
-
-/** Fixed simulation step. Decoupling it from the display refresh keeps a 120Hz screen fair. */
-const STEP_SECONDS = 1 / 60;
-
-/** Clamp on a single frame's delta, so a backgrounded tab does not resume with a huge catch-up. */
-const MAX_FRAME_SECONDS = 0.1;
-
-const MAX_BULLETS = 16;
-const MAX_ASTEROIDS = 48;
-const MAX_PARTICLES = 320;
-const STAR_COUNT = 70;
-
-/** Radius per asteroid tier: large, medium, small. */
-const TIER_RADII = [44, 25, 13];
-const TIER_SCORES = [20, 50, 100];
-const TIER_SPEEDS = [46, 68, 96];
-const SHAPE_VARIANTS = 4;
-
-const SHIP_TURN = 3.4;
-const SHIP_THRUST = 330;
-const SHIP_DRAG = 0.35;
-const SHIP_MAX_SPEED = 400;
-const SHIP_RADIUS = 11;
-
-const BULLET_SPEED = 520;
-const BULLET_LIFE = 1.05;
-const FIRE_INTERVAL = 0.2;
-
-const START_LIVES = 3;
-const RESPAWN_DELAY = 1.1;
-const INVULNERABLE_SECONDS = 2.4;
-const WAVE_DELAY = 1.4;
-
-/** Radius around the spawn point that must be clear of rocks before the ship comes back. */
-const SPAWN_CLEARANCE = 90;
-
-/**
- * Cap on the backing store so a wide monitor at dpr 3 does not allocate a 30MB canvas. Kept modest
- * because the CRT pass doubles the buffers (2D scene + WebGL target) and uploads the scene as a
- * texture every frame; the shader's softness hides the reduced sampling anyway.
- */
-const MAX_DEVICE_PIXELS = 2_600_000;
-
-const BACKDROP = "#000000";
-const STAR_DIM = "#27272a";
-const STAR_BRIGHT = "#3f3f46";
-const SHIP_COLOR = "#fafafa";
-const BULLET_COLOR = "#1e93ff";
-const BULLET_HALO = "rgba(30, 147, 255, 0.3)";
-const THRUST_COLOR = "#e4e4e7";
-
-/** Grayscale per tier — large rocks read as background, small ones as threats. */
-const TIER_COLORS = ["#52525c", "#71717b", "#a1a1aa"];
-
-/** Monochrome sparks: the missiles stay the only colour on the board. */
-const PARTICLE_COLORS = ["#fafafa", "#a1a1aa", "#52525c"];
-
-/**
- * Distance of the virtual camera from a rock's centre, in radii. Governs how hard the wireframe's
- * near side is magnified against its far side — lower reads more 3D, higher more orthographic.
- */
-const ROCK_FOCAL_RADII = 6;
-
-export type AsteroidsStatus = "idle" | "playing" | "paused" | "over";
-
-export type AsteroidsHud = {
-  score: number;
-  lives: number;
-  wave: number;
-};
-
-export type AsteroidsAction = "left" | "right" | "thrust" | "fire";
-
-/**
- * Optional post-processing stage: the engine renders the scene into its own 2D canvas and hands
- * every finished frame over instead of showing that canvas directly.
- */
-export type AsteroidsCompositor = {
-  resize: (width: number, height: number, scale: number) => void;
-  draw: (scene: HTMLCanvasElement, timeSeconds: number) => void;
-};
-
-export type AsteroidsEngineOptions = {
-  canvas: HTMLCanvasElement;
-  compositor?: AsteroidsCompositor | null;
-  reducedMotion: boolean;
-  onHud: (hud: AsteroidsHud) => void;
-  onStatus: (status: AsteroidsStatus) => void;
-};
-
-/** Small deterministic PRNG, used so the rock silhouettes are identical on every visit. */
-function mulberry32(seed: number): () => number {
-  let state = seed >>> 0;
-  return () => {
-    state = (state + 0x6d_2b_79_f5) | 0;
-    let t = Math.imul(state ^ (state >>> 15), 1 | state);
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;
-  };
-}
-
-const GOLDEN = (1 + Math.sqrt(5)) / 2;
-
-/** Unit icosahedron vertices; every rock mesh is a radially deformed copy of these 12 points. */
-const ICO_VERTICES = [
-  [-1, GOLDEN, 0],
-  [1, GOLDEN, 0],
-  [-1, -GOLDEN, 0],
-  [1, -GOLDEN, 0],
-  [0, -1, GOLDEN],
-  [0, 1, GOLDEN],
-  [0, -1, -GOLDEN],
-  [0, 1, -GOLDEN],
-  [GOLDEN, 0, -1],
-  [GOLDEN, 0, 1],
-  [-GOLDEN, 0, -1],
-  [-GOLDEN, 0, 1],
-] as const;
-
-const ROCK_VERTEX_COUNT = ICO_VERTICES.length;
-
-/**
- * The icosahedron's 30 edges as flat index pairs. Radial deformation moves vertices along their own
- * axis only, so the connectivity is shared by every variant.
- */
-let sharedRockEdges: Uint8Array | null = null;
-
-function rockEdges(): Uint8Array {
-  if (sharedRockEdges) {
-    return sharedRockEdges;
-  }
-
-  const pairs: number[] = [];
-  for (let a = 0; a < ROCK_VERTEX_COUNT; a += 1) {
-    for (let b = a + 1; b < ROCK_VERTEX_COUNT; b += 1) {
-      const dx = ICO_VERTICES[a][0] - ICO_VERTICES[b][0];
-      const dy = ICO_VERTICES[a][1] - ICO_VERTICES[b][1];
-      const dz = ICO_VERTICES[a][2] - ICO_VERTICES[b][2];
-      // Adjacent icosahedron vertices sit exactly 2 apart at this scale.
-      if (dx * dx + dy * dy + dz * dz < 4.1) {
-        pairs.push(a, b);
-      }
-    }
-  }
-
-  sharedRockEdges = new Uint8Array(pairs);
-  return sharedRockEdges;
-}
-
-/**
- * Deformed rock meshes per tier and variant, as flat `x, y, z` vertex triples.
- *
- * Built lazily so the module stays importable during server rendering, and seeded so every visit
- * tumbles the same rocks.
- */
-let sharedRockMeshes: Float32Array[][] | null = null;
-
-function rockMeshes(): Float32Array[][] {
-  if (sharedRockMeshes) {
-    return sharedRockMeshes;
-  }
-
-  const random = mulberry32(0x5e_ed_10_23);
-  const norm = Math.hypot(1, GOLDEN);
-
-  sharedRockMeshes = TIER_RADII.map((radius) => {
-    const variants: Float32Array[] = [];
-    for (let variant = 0; variant < SHAPE_VARIANTS; variant += 1) {
-      const mesh = new Float32Array(ROCK_VERTEX_COUNT * 3);
-      for (let vertex = 0; vertex < ROCK_VERTEX_COUNT; vertex += 1) {
-        const reach = (radius * (0.74 + random() * 0.38)) / norm;
-        mesh[vertex * 3] = ICO_VERTICES[vertex][0] * reach;
-        mesh[vertex * 3 + 1] = ICO_VERTICES[vertex][1] * reach;
-        mesh[vertex * 3 + 2] = ICO_VERTICES[vertex][2] * reach;
-      }
-      variants.push(mesh);
-    }
-    return variants;
-  });
-
-  return sharedRockMeshes;
-}
-
-let sharedShipPath: Path2D | null = null;
-let sharedFlamePath: Path2D | null = null;
-
-function shipPath(): Path2D {
-  if (!sharedShipPath) {
-    const path = new Path2D();
-    path.moveTo(15, 0);
-    path.lineTo(-10, 9);
-    path.lineTo(-6, 0);
-    path.lineTo(-10, -9);
-    path.closePath();
-    sharedShipPath = path;
-  }
-  return sharedShipPath;
-}
-
-function flamePath(): Path2D {
-  if (!sharedFlamePath) {
-    const path = new Path2D();
-    path.moveTo(-7, 5);
-    path.lineTo(-17, 0);
-    path.lineTo(-7, -5);
-    sharedFlamePath = path;
-  }
-  return sharedFlamePath;
-}
-
-/** Shortest signed distance between two coordinates on a wrapping axis. */
-function wrapDelta(delta: number, size: number): number {
-  if (delta > size * 0.5) {
-    return delta - size;
-  }
-  if (delta < -size * 0.5) {
-    return delta + size;
-  }
-  return delta;
-}
-
-export class AsteroidsEngine {
-  private readonly canvas: HTMLCanvasElement;
-  private readonly ctx: CanvasRenderingContext2D;
-  private readonly compositor: AsteroidsCompositor | null;
-  private readonly reducedMotion: boolean;
-  private readonly onHud: (hud: AsteroidsHud) => void;
-  private readonly onStatus: (status: AsteroidsStatus) => void;
-
-  private width = 0;
-  private height = 0;
-  private scale = 1;
-
-  private status: AsteroidsStatus = "idle";
-  private destroyed = false;
-  private frameHandle = 0;
-  private lastFrameTime = 0;
-  private accumulator = 0;
-  private elapsed = 0;
-
-  private score = 0;
-  private lives = START_LIVES;
-  private wave = 0;
-
-  private readonly input = { left: false, right: false, thrust: false, fire: false };
-
-  private shipX = 0;
-  private shipY = 0;
-  private shipVx = 0;
-  private shipVy = 0;
-  private shipAngle = -Math.PI / 2;
-  private shipAlive = false;
-  private respawnTimer = 0;
-  private invulnerableTimer = 0;
-  private fireTimer = 0;
-  private waveTimer = 0;
-  private shake = 0;
-
-  private readonly bulletX = new Float32Array(MAX_BULLETS);
-  private readonly bulletY = new Float32Array(MAX_BULLETS);
-  private readonly bulletVx = new Float32Array(MAX_BULLETS);
-  private readonly bulletVy = new Float32Array(MAX_BULLETS);
-  private readonly bulletLife = new Float32Array(MAX_BULLETS);
-  private bulletCount = 0;
-
-  private readonly rockX = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockY = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockVx = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockVy = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockPitch = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockYaw = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockPitchSpin = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockYawSpin = new Float32Array(MAX_ASTEROIDS);
-  private readonly rockTier = new Uint8Array(MAX_ASTEROIDS);
-  private readonly rockVariant = new Uint8Array(MAX_ASTEROIDS);
-  private rockCount = 0;
-
-  /** Scratch for a single rock's projected vertices during rendering. */
-  private readonly projectedX = new Float32Array(ROCK_VERTEX_COUNT);
-  private readonly projectedY = new Float32Array(ROCK_VERTEX_COUNT);
-
-  private readonly particleX = new Float32Array(MAX_PARTICLES);
-  private readonly particleY = new Float32Array(MAX_PARTICLES);
-  private readonly particleVx = new Float32Array(MAX_PARTICLES);
-  private readonly particleVy = new Float32Array(MAX_PARTICLES);
-  private readonly particleLife = new Float32Array(MAX_PARTICLES);
-  private readonly particleSpan = new Float32Array(MAX_PARTICLES);
-  private readonly particleColor = new Uint8Array(MAX_PARTICLES);
-  private particleCount = 0;
-
-  /** Star field as flat `x, y, size` triples — cheaper to keep than an offscreen canvas. */
-  private readonly stars = new Float32Array(STAR_COUNT * 3);
-
-  /** Scratch buffers for `spreadWrapped`, at most one copy per screen corner. */
-  private readonly wrapSpreadX = new Float32Array(4);
-  private readonly wrapSpreadY = new Float32Array(4);
-
-  constructor({ canvas, compositor, reducedMotion, onHud, onStatus }: AsteroidsEngineOptions) {
-    const ctx = canvas.getContext("2d", { alpha: false });
-    if (!ctx) {
-      throw new Error("Asteroids needs a 2D canvas context");
-    }
-
-    this.canvas = canvas;
-    this.ctx = ctx;
-    this.compositor = compositor ?? null;
-    this.reducedMotion = reducedMotion;
-    this.onHud = onHud;
-    this.onStatus = onStatus;
-  }
-
-  /** Resizes the backing store to `width` x `height` CSS pixels and repaints once. */
-  resize(width: number, height: number): void {
-    if (this.destroyed || width <= 0 || height <= 0) {
-      return;
-    }
-
-    const requested = Math.min(window.devicePixelRatio || 1, 2);
-    const budget = Math.sqrt(MAX_DEVICE_PIXELS / (width * height));
-    const scale = Math.max(1, Math.min(requested, budget));
-    const sizeChanged = width !== this.width || height !== this.height;
-
-    this.width = width;
-    this.height = height;
-    this.scale = scale;
-    this.canvas.width = Math.round(width * scale);
-    this.canvas.height = Math.round(height * scale);
-    this.ctx.setTransform(scale, 0, 0, scale, 0, 0);
-    this.compositor?.resize(width, height, scale);
-
-    if (sizeChanged) {
-      this.seedStars();
-      if (this.status === "idle") {
-        this.layoutAttractField();
-      } else {
-        this.containEntities();
-      }
-    }
-
-    this.render();
-  }
-
-  /** Starts a fresh run from wave one. */
-  start(): void {
-    if (this.destroyed) {
-      return;
-    }
-
-    this.score = 0;
-    this.lives = START_LIVES;
-    this.wave = 0;
-    this.elapsed = 0;
-    this.accumulator = 0;
-    this.shake = 0;
-    this.bulletCount = 0;
-    this.rockCount = 0;
-    this.particleCount = 0;
-    this.input.left = false;
-    this.input.right = false;
-    this.input.thrust = false;
-    this.input.fire = false;
-
-    this.spawnShip();
-    this.startWave();
-    this.emitHud();
-    this.setStatus("playing");
-    this.runLoop();
-  }
-
-  /** Suspends the loop, keeping the board exactly as it stands. */
-  pause(): void {
-    if (this.status !== "playing") {
-      return;
-    }
-    this.setStatus("paused");
-    this.stopLoop();
-    this.render();
-  }
-
-  /** Resumes a paused run. */
-  resume(): void {
-    if (this.status !== "paused" || this.destroyed) {
-      return;
-    }
-    this.setStatus("playing");
-    this.runLoop();
-  }
-
-  /**
-   * Gates the render loop on the board being worth animating — on screen, in a visible tab.
-   *
-   * Separate from `pause()`: that is the player's own pause and shows an overlay, whereas this is
-   * the page telling the engine nobody can see it, which should cost nothing at all.
-   */
-  setActive(active: boolean): void {
-    if (this.destroyed) {
-      return;
-    }
-
-    if (!active) {
-      this.stopLoop();
-      return;
-    }
-    if (this.status === "idle" || this.status === "playing") {
-      this.runLoop();
-    }
-  }
-
-  setInput(action: AsteroidsAction, pressed: boolean): void {
-    this.input[action] = pressed;
-  }
-
-  /** Cancels the loop, drops listeners' last frame and releases the canvas' backing store. */
-  destroy(): void {
-    this.destroyed = true;
-    this.stopLoop();
-    this.canvas.width = 0;
-    this.canvas.height = 0;
-  }
-
-  private setStatus(status: AsteroidsStatus): void {
-    if (this.status !== status) {
-      this.status = status;
-      this.onStatus(status);
-    }
-  }
-
-  private emitHud(): void {
-    this.onHud({ lives: this.lives, score: this.score, wave: this.wave });
-  }
-
-  private runLoop(): void {
-    if (this.frameHandle !== 0 || this.destroyed) {
-      return;
-    }
-    this.lastFrameTime = performance.now();
-    this.frameHandle = requestAnimationFrame(this.frame);
-  }
-
-  private stopLoop(): void {
-    if (this.frameHandle !== 0) {
-      cancelAnimationFrame(this.frameHandle);
-      this.frameHandle = 0;
-    }
-  }
-
-  private readonly frame = (time: number): void => {
-    this.frameHandle = requestAnimationFrame(this.frame);
-
-    const delta = Math.min((time - this.lastFrameTime) / 1000, MAX_FRAME_SECONDS);
-    this.lastFrameTime = time;
-    this.accumulator += delta;
-
-    while (this.accumulator >= STEP_SECONDS) {
-      this.step(STEP_SECONDS);
-      this.accumulator -= STEP_SECONDS;
-    }
-
-    this.render();
-
-    // Once the wreckage has settled there is nothing left to animate on the game-over board, so the
-    // loop retires itself instead of burning a frame budget behind the overlay.
-    if (this.status === "over" && this.particleCount === 0 && this.shake === 0) {
-      this.stopLoop();
-    }
-  };
-
-  private step(delta: number): void {
-    this.elapsed += delta;
-    this.shake = Math.max(0, this.shake - delta * 26);
-
-    if (this.status === "playing") {
-      this.stepShip(delta);
-      this.stepBullets(delta);
-    }
-
-    this.stepRocks(delta);
-    this.stepParticles(delta);
-
-    if (this.status !== "playing") {
-      return;
-    }
-
-    this.resolveBulletHits();
-    this.resolveShipHits();
-
-    if (this.rockCount === 0) {
-      this.waveTimer -= delta;
-      if (this.waveTimer <= 0) {
-        this.startWave();
-      }
-    }
-
-    if (!this.shipAlive && this.lives > 0) {
-      this.respawnTimer -= delta;
-      if (this.respawnTimer <= 0 && this.spawnPointIsClear()) {
-        this.spawnShip();
-      }
-    }
-  }
-
-  private stepShip(delta: number): void {
-    this.invulnerableTimer = Math.max(0, this.invulnerableTimer - delta);
-    this.fireTimer = Math.max(0, this.fireTimer - delta);
-
-    if (!this.shipAlive) {
-      return;
-    }
-
-    if (this.input.left) {
-      this.shipAngle -= SHIP_TURN * delta;
-    }
-    if (this.input.right) {
-      this.shipAngle += SHIP_TURN * delta;
-    }
-
-    if (this.input.thrust) {
-      this.shipVx += Math.cos(this.shipAngle) * SHIP_THRUST * delta;
-      this.shipVy += Math.sin(this.shipAngle) * SHIP_THRUST * delta;
-
-      const speed = Math.hypot(this.shipVx, this.shipVy);
-      if (speed > SHIP_MAX_SPEED) {
-        const clamp = SHIP_MAX_SPEED / speed;
-        this.shipVx *= clamp;
-        this.shipVy *= clamp;
-      }
-      if (!this.reducedMotion) {
-        this.emitThrustSpark();
-      }
-    }
-
-    const drag = Math.max(0, 1 - SHIP_DRAG * delta);
-    this.shipVx *= drag;
-    this.shipVy *= drag;
-    this.shipX = this.wrapX(this.shipX + this.shipVx * delta);
-    this.shipY = this.wrapY(this.shipY + this.shipVy * delta);
-
-    if (this.input.fire && this.fireTimer === 0) {
-      this.fireBullet();
-    }
-  }
-
-  private stepBullets(delta: number): void {
-    for (let index = this.bulletCount - 1; index >= 0; index -= 1) {
-      this.bulletLife[index] -= delta;
-      if (this.bulletLife[index] <= 0) {
-        this.removeBullet(index);
-        continue;
-      }
-      this.bulletX[index] = this.wrapX(this.bulletX[index] + this.bulletVx[index] * delta);
-      this.bulletY[index] = this.wrapY(this.bulletY[index] + this.bulletVy[index] * delta);
-    }
-  }
-
-  private stepRocks(delta: number): void {
-    for (let index = 0; index < this.rockCount; index += 1) {
-      this.rockX[index] = this.wrapX(this.rockX[index] + this.rockVx[index] * delta);
-      this.rockY[index] = this.wrapY(this.rockY[index] + this.rockVy[index] * delta);
-      this.rockPitch[index] += this.rockPitchSpin[index] * delta;
-      this.rockYaw[index] += this.rockYawSpin[index] * delta;
-    }
-  }
-
-  private stepParticles(delta: number): void {
-    for (let index = this.particleCount - 1; index >= 0; index -= 1) {
-      this.particleLife[index] -= delta;
-      if (this.particleLife[index] <= 0) {
-        this.removeParticle(index);
-        continue;
-      }
-      this.particleX[index] += this.particleVx[index] * delta;
-      this.particleY[index] += this.particleVy[index] * delta;
-      this.particleVx[index] *= 0.98;
-      this.particleVy[index] *= 0.98;
-    }
-  }
-
-  private resolveBulletHits(): void {
-    for (let bullet = this.bulletCount - 1; bullet >= 0; bullet -= 1) {
-      for (let rock = this.rockCount - 1; rock >= 0; rock -= 1) {
-        const radius = TIER_RADII[this.rockTier[rock]];
-        const dx = wrapDelta(this.bulletX[bullet] - this.rockX[rock], this.width);
-        const dy = wrapDelta(this.bulletY[bullet] - this.rockY[rock], this.height);
-        if (dx * dx + dy * dy > radius * radius) {
-          continue;
-        }
-
-        this.removeBullet(bullet);
-        this.breakRock(rock);
-        break;
-      }
-    }
-  }
-
-  private resolveShipHits(): void {
-    if (!this.shipAlive || this.invulnerableTimer > 0) {
-      return;
-    }
-
-    for (let rock = this.rockCount - 1; rock >= 0; rock -= 1) {
-      const radius = TIER_RADII[this.rockTier[rock]] + SHIP_RADIUS * 0.7;
-      const dx = wrapDelta(this.shipX - this.rockX[rock], this.width);
-      const dy = wrapDelta(this.shipY - this.rockY[rock], this.height);
-      if (dx * dx + dy * dy > radius * radius) {
-        continue;
-      }
-
-      this.breakRock(rock);
-      this.destroyShip();
-      return;
-    }
-  }
-
-  private breakRock(index: number): void {
-    const tier = this.rockTier[index];
-    const x = this.rockX[index];
-    const y = this.rockY[index];
-
-    this.score += TIER_SCORES[tier];
-    this.shake = Math.min(this.shake + (tier === 0 ? 6 : 3), 12);
-    this.emitBurst(x, y, tier === 0 ? 16 : 10, 130 + tier * 40);
-    this.removeRock(index);
-
-    if (tier < TIER_RADII.length - 1) {
-      const childTier = tier + 1;
-      const base = Math.random() * TAU;
-      for (let child = 0; child < 2; child += 1) {
-        this.addRock(x, y, childTier, base + child * Math.PI + (Math.random() - 0.5));
-      }
-    }
-
-    this.emitHud();
-    if (this.rockCount === 0) {
-      this.waveTimer = WAVE_DELAY;
-    }
-  }
-
-  private destroyShip(): void {
-    this.shipAlive = false;
-    this.lives -= 1;
-    this.shake = 14;
-    this.emitBurst(this.shipX, this.shipY, 26, 190);
-    this.emitHud();
-
-    if (this.lives <= 0) {
-      this.setStatus("over");
-      return;
-    }
-    this.respawnTimer = RESPAWN_DELAY;
-  }
-
-  private spawnShip(): void {
-    this.shipX = this.width * 0.5;
-    this.shipY = this.height * 0.5;
-    this.shipVx = 0;
-    this.shipVy = 0;
-    this.shipAngle = -Math.PI / 2;
-    this.shipAlive = true;
-    this.invulnerableTimer = INVULNERABLE_SECONDS;
-  }
-
-  private spawnPointIsClear(): boolean {
-    const centerX = this.width * 0.5;
-    const centerY = this.height * 0.5;
-
-    for (let rock = 0; rock < this.rockCount; rock += 1) {
-      const reach = SPAWN_CLEARANCE + TIER_RADII[this.rockTier[rock]];
-      const dx = wrapDelta(centerX - this.rockX[rock], this.width);
-      const dy = wrapDelta(centerY - this.rockY[rock], this.height);
-      if (dx * dx + dy * dy < reach * reach) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private startWave(): void {
-    this.wave += 1;
-    const count = Math.min(3 + this.wave, 9);
-
-    for (let index = 0; index < count; index += 1) {
-      // Rocks enter from the rim so a wave never materialises on top of the ship.
-      const alongEdge = Math.random();
-      const onVerticalEdge = Math.random() < 0.5;
-      const x = onVerticalEdge ? (Math.random() < 0.5 ? 0 : this.width) : alongEdge * this.width;
-      const y = onVerticalEdge ? alongEdge * this.height : Math.random() < 0.5 ? 0 : this.height;
-      this.addRock(x, y, 0, Math.random() * TAU);
-    }
-
-    this.emitHud();
-  }
-
-  private addRock(x: number, y: number, tier: number, heading: number): void {
-    if (this.rockCount >= MAX_ASTEROIDS) {
-      return;
-    }
-
-    const index = this.rockCount;
-    this.rockCount += 1;
-
-    const speed = TIER_SPEEDS[tier] * (0.7 + Math.random() * 0.6) * (1 + this.wave * 0.04);
-    this.rockX[index] = x;
-    this.rockY[index] = y;
-    this.rockVx[index] = Math.cos(heading) * speed;
-    this.rockVy[index] = Math.sin(heading) * speed;
-    this.rockPitch[index] = Math.random() * TAU;
-    this.rockYaw[index] = Math.random() * TAU;
-    this.rockPitchSpin[index] = (Math.random() - 0.5) * 1.4;
-    this.rockYawSpin[index] = (Math.random() - 0.5) * 1.4;
-    this.rockTier[index] = tier;
-    this.rockVariant[index] = Math.floor(Math.random() * SHAPE_VARIANTS);
-  }
-
-  private fireBullet(): void {
-    if (this.bulletCount >= MAX_BULLETS) {
-      return;
-    }
-
-    const index = this.bulletCount;
-    this.bulletCount += 1;
-    this.fireTimer = FIRE_INTERVAL;
-
-    const cos = Math.cos(this.shipAngle);
-    const sin = Math.sin(this.shipAngle);
-    this.bulletX[index] = this.shipX + cos * SHIP_RADIUS;
-    this.bulletY[index] = this.shipY + sin * SHIP_RADIUS;
-    this.bulletVx[index] = this.shipVx + cos * BULLET_SPEED;
-    this.bulletVy[index] = this.shipVy + sin * BULLET_SPEED;
-    this.bulletLife[index] = BULLET_LIFE;
-  }
-
-  private emitBurst(x: number, y: number, count: number, speed: number): void {
-    for (let index = 0; index < count; index += 1) {
-      const heading = Math.random() * TAU;
-      const reach = speed * (0.3 + Math.random() * 0.7);
-      this.addParticle(
-        x,
-        y,
-        Math.cos(heading) * reach,
-        Math.sin(heading) * reach,
-        0.4 + Math.random() * 0.5,
-        index % PARTICLE_COLORS.length,
-      );
-    }
-  }
-
-  private emitThrustSpark(): void {
-    const heading = this.shipAngle + Math.PI + (Math.random() - 0.5) * 0.6;
-    this.addParticle(
-      this.shipX + Math.cos(heading) * 9,
-      this.shipY + Math.sin(heading) * 9,
-      this.shipVx * 0.4 + Math.cos(heading) * 110,
-      this.shipVy * 0.4 + Math.sin(heading) * 110,
-      0.22,
-      1,
-    );
-  }
-
-  private addParticle(
-    x: number,
-    y: number,
-    vx: number,
-    vy: number,
-    span: number,
-    color: number,
-  ): void {
-    // The pool is a hard cap rather than a growable list: past it the newest spark is simply
-    // dropped, which is invisible in a burst and keeps the frame's memory ceiling fixed.
-    if (this.particleCount >= MAX_PARTICLES) {
-      return;
-    }
-
-    const index = this.particleCount;
-    this.particleCount += 1;
-    this.particleX[index] = x;
-    this.particleY[index] = y;
-    this.particleVx[index] = vx;
-    this.particleVy[index] = vy;
-    this.particleLife[index] = span;
-    this.particleSpan[index] = span;
-    this.particleColor[index] = color;
-  }
-
-  private removeBullet(index: number): void {
-    this.bulletCount -= 1;
-    const last = this.bulletCount;
-    if (index === last) {
-      return;
-    }
-    this.bulletX[index] = this.bulletX[last];
-    this.bulletY[index] = this.bulletY[last];
-    this.bulletVx[index] = this.bulletVx[last];
-    this.bulletVy[index] = this.bulletVy[last];
-    this.bulletLife[index] = this.bulletLife[last];
-  }
-
-  private removeRock(index: number): void {
-    this.rockCount -= 1;
-    const last = this.rockCount;
-    if (index === last) {
-      return;
-    }
-    this.rockX[index] = this.rockX[last];
-    this.rockY[index] = this.rockY[last];
-    this.rockVx[index] = this.rockVx[last];
-    this.rockVy[index] = this.rockVy[last];
-    this.rockPitch[index] = this.rockPitch[last];
-    this.rockYaw[index] = this.rockYaw[last];
-    this.rockPitchSpin[index] = this.rockPitchSpin[last];
-    this.rockYawSpin[index] = this.rockYawSpin[last];
-    this.rockTier[index] = this.rockTier[last];
-    this.rockVariant[index] = this.rockVariant[last];
-  }
-
-  private removeParticle(index: number): void {
-    this.particleCount -= 1;
-    const last = this.particleCount;
-    if (index === last) {
-      return;
-    }
-    this.particleX[index] = this.particleX[last];
-    this.particleY[index] = this.particleY[last];
-    this.particleVx[index] = this.particleVx[last];
-    this.particleVy[index] = this.particleVy[last];
-    this.particleLife[index] = this.particleLife[last];
-    this.particleSpan[index] = this.particleSpan[last];
-    this.particleColor[index] = this.particleColor[last];
-  }
-
-  private wrapX(value: number): number {
-    if (value < 0) {
-      return value + this.width;
-    }
-    if (value >= this.width) {
-      return value - this.width;
-    }
-    return value;
-  }
-
-  private wrapY(value: number): number {
-    if (value < 0) {
-      return value + this.height;
-    }
-    if (value >= this.height) {
-      return value - this.height;
-    }
-    return value;
-  }
-
-  private containEntities(): void {
-    this.shipX = Math.min(this.shipX, this.width);
-    this.shipY = Math.min(this.shipY, this.height);
-    for (let rock = 0; rock < this.rockCount; rock += 1) {
-      this.rockX[rock] = Math.min(this.rockX[rock], this.width);
-      this.rockY[rock] = Math.min(this.rockY[rock], this.height);
-    }
-  }
-
-  private seedStars(): void {
-    for (let index = 0; index < STAR_COUNT; index += 1) {
-      const offset = index * 3;
-      this.stars[offset] = Math.random() * this.width;
-      this.stars[offset + 1] = Math.random() * this.height;
-      this.stars[offset + 2] = Math.random() < 0.2 ? 2 : 1;
-    }
-  }
-
-  /** Drifting rocks behind the idle overlay, so the board is never an empty rectangle. */
-  private layoutAttractField(): void {
-    this.rockCount = 0;
-    this.bulletCount = 0;
-    this.particleCount = 0;
-    this.shipAlive = false;
-
-    for (let index = 0; index < 5; index += 1) {
-      this.addRock(
-        Math.random() * this.width,
-        Math.random() * this.height,
-        index % 2,
-        Math.random() * TAU,
-      );
-    }
-  }
-
-  private render(): void {
-    const ctx = this.ctx;
-    ctx.fillStyle = BACKDROP;
-    ctx.fillRect(0, 0, this.width, this.height);
-
-    this.renderStars();
-
-    const shakeX = this.shake === 0 ? 0 : (Math.random() - 0.5) * this.shake;
-    const shakeY = this.shake === 0 ? 0 : (Math.random() - 0.5) * this.shake;
-    ctx.save();
-    ctx.translate(shakeX, shakeY);
-
-    ctx.lineJoin = "round";
-    this.renderRocks();
-    this.renderBullets();
-    this.renderParticles();
-    if (this.shipAlive) {
-      this.renderShip();
-    }
-
-    ctx.restore();
-
-    this.compositor?.draw(this.canvas, this.elapsed);
-  }
-
-  private renderStars(): void {
-    const ctx = this.ctx;
-    ctx.fillStyle = STAR_DIM;
-    for (let index = 0; index < STAR_COUNT; index += 1) {
-      const offset = index * 3;
-      const size = this.stars[offset + 2];
-      if (size > 1) {
-        continue;
-      }
-      ctx.fillRect(this.stars[offset], this.stars[offset + 1], 1, 1);
-    }
-
-    ctx.fillStyle = STAR_BRIGHT;
-    for (let index = 0; index < STAR_COUNT; index += 1) {
-      const offset = index * 3;
-      if (this.stars[offset + 2] <= 1) {
-        continue;
-      }
-      ctx.fillRect(this.stars[offset], this.stars[offset + 1], 2, 2);
-    }
-  }
-
-  /**
-   * Draws each rock as a tumbling 3D wireframe: the mesh is rotated around two axes, projected
-   * with a mild perspective, and its 30 edges stroked in a single path per rock.
-   */
-  private renderRocks(): void {
-    const ctx = this.ctx;
-    const meshes = rockMeshes();
-    const edges = rockEdges();
-    ctx.lineWidth = 1.25;
-
-    for (let index = 0; index < this.rockCount; index += 1) {
-      const tier = this.rockTier[index];
-      const mesh = meshes[tier][this.rockVariant[index]];
-      const radius = TIER_RADII[tier];
-      const focal = radius * ROCK_FOCAL_RADII;
-
-      const cosPitch = Math.cos(this.rockPitch[index]);
-      const sinPitch = Math.sin(this.rockPitch[index]);
-      const cosYaw = Math.cos(this.rockYaw[index]);
-      const sinYaw = Math.sin(this.rockYaw[index]);
-
-      for (let vertex = 0; vertex < ROCK_VERTEX_COUNT; vertex += 1) {
-        const x = mesh[vertex * 3];
-        const y = mesh[vertex * 3 + 1];
-        const z = mesh[vertex * 3 + 2];
-        const rotatedY = y * cosPitch - z * sinPitch;
-        const pitchedZ = y * sinPitch + z * cosPitch;
-        const rotatedX = x * cosYaw + pitchedZ * sinYaw;
-        const rotatedZ = -x * sinYaw + pitchedZ * cosYaw;
-        const perspective = focal / (focal - rotatedZ);
-        this.projectedX[vertex] = rotatedX * perspective;
-        this.projectedY[vertex] = rotatedY * perspective;
-      }
-
-      const copies = this.spreadWrapped(this.rockX[index], this.rockY[index], radius * 1.4);
-      ctx.strokeStyle = TIER_COLORS[tier];
-      ctx.beginPath();
-      for (let copy = 0; copy < copies; copy += 1) {
-        const offsetX = this.wrapSpreadX[copy];
-        const offsetY = this.wrapSpreadY[copy];
-        for (let edge = 0; edge < edges.length; edge += 2) {
-          const a = edges[edge];
-          const b = edges[edge + 1];
-          ctx.moveTo(offsetX + this.projectedX[a], offsetY + this.projectedY[a]);
-          ctx.lineTo(offsetX + this.projectedX[b], offsetY + this.projectedY[b]);
-        }
-      }
-      ctx.stroke();
-    }
-  }
-
-  private renderBullets(): void {
-    const ctx = this.ctx;
-
-    ctx.fillStyle = BULLET_HALO;
-    for (let index = 0; index < this.bulletCount; index += 1) {
-      ctx.beginPath();
-      ctx.arc(this.bulletX[index], this.bulletY[index], 6, 0, TAU);
-      ctx.fill();
-    }
-
-    ctx.fillStyle = BULLET_COLOR;
-    for (let index = 0; index < this.bulletCount; index += 1) {
-      ctx.beginPath();
-      ctx.arc(this.bulletX[index], this.bulletY[index], 2.4, 0, TAU);
-      ctx.fill();
-    }
-  }
-
-  private renderParticles(): void {
-    const ctx = this.ctx;
-
-    // Grouped by colour so a 300-spark burst costs three `fillStyle` writes instead of three
-    // hundred.
-    for (let color = 0; color < PARTICLE_COLORS.length; color += 1) {
-      ctx.fillStyle = PARTICLE_COLORS[color];
-      for (let index = 0; index < this.particleCount; index += 1) {
-        if (this.particleColor[index] !== color) {
-          continue;
-        }
-        ctx.globalAlpha = this.particleLife[index] / this.particleSpan[index];
-        ctx.fillRect(this.particleX[index] - 1, this.particleY[index] - 1, 2, 2);
-      }
-    }
-
-    ctx.globalAlpha = 1;
-  }
-
-  private renderShip(): void {
-    // Blink through the grace period so the player can see they are not yet solid.
-    if (this.invulnerableTimer > 0 && Math.floor(this.elapsed * 10) % 2 === 0) {
-      return;
-    }
-
-    const ctx = this.ctx;
-    const flaming = this.input.thrust && Math.floor(this.elapsed * 30) % 2 === 0;
-    ctx.lineWidth = 2;
-
-    const copies = this.spreadWrapped(this.shipX, this.shipY, SHIP_RADIUS + 6);
-    for (let copy = 0; copy < copies; copy += 1) {
-      ctx.save();
-      ctx.translate(this.wrapSpreadX[copy], this.wrapSpreadY[copy]);
-      ctx.rotate(this.shipAngle);
-      if (flaming) {
-        ctx.strokeStyle = THRUST_COLOR;
-        ctx.stroke(flamePath());
-      }
-      ctx.strokeStyle = SHIP_COLOR;
-      ctx.stroke(shipPath());
-      ctx.restore();
-    }
-  }
-
-  /**
-   * Fills `wrapSpreadX/Y` with the entity's position plus a mirrored copy for every board edge it
-   * currently straddles, so shapes cross the seam whole instead of popping to the other side.
-   *
-   * Returns the number of copies to draw. Writing into shared buffers rather than returning a list
-   * — or taking a draw callback — keeps the render pass free of per-entity allocations.
-   */
-  private spreadWrapped(x: number, y: number, radius: number): number {
-    this.wrapSpreadX[0] = x;
-    this.wrapSpreadY[0] = y;
-    let count = 1;
-
-    const offsetX = x < radius ? this.width : x > this.width - radius ? -this.width : 0;
-    const offsetY = y < radius ? this.height : y > this.height - radius ? -this.height : 0;
-
-    if (offsetX !== 0) {
-      this.wrapSpreadX[count] = x + offsetX;
-      this.wrapSpreadY[count] = y;
-      count += 1;
-    }
-    if (offsetY !== 0) {
-      this.wrapSpreadX[count] = x;
-      this.wrapSpreadY[count] = y + offsetY;
-      count += 1;
-    }
-    if (offsetX !== 0 && offsetY !== 0) {
-      this.wrapSpreadX[count] = x + offsetX;
-      this.wrapSpreadY[count] = y + offsetY;
-      count += 1;
-    }
-
-    return count;
-  }
-}
diff --git a/apps/www/src/features/www/landing/asteroids/frame.ts b/apps/www/src/features/www/landing/asteroids/frame.ts
deleted file mode 100644
index b7ea49fa0..000000000
--- a/apps/www/src/features/www/landing/asteroids/frame.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Stage shared by the board and the placeholder that stands in for it.
- *
- * Kept in its own module so the section can reserve the board's exact full-screen footprint
- * without importing — and therefore eagerly bundling — the game itself.
- */
-export const ASTEROIDS_STAGE_CLASS = "relative h-svh w-full overflow-hidden bg-black";
diff --git a/apps/www/src/features/www/landing/asteroids/game.tsx b/apps/www/src/features/www/landing/asteroids/game.tsx
deleted file mode 100644
index 202f3a48c..000000000
--- a/apps/www/src/features/www/landing/asteroids/game.tsx
+++ /dev/null
@@ -1,444 +0,0 @@
-"use client";
-
-import { cn } from "@voidhash/ui";
-import { useReducedMotion } from "motion/react";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-import { type AsteroidsAction, AsteroidsEngine, type AsteroidsStatus } from "./engine";
-import { ASTEROIDS_STAGE_CLASS } from "./frame";
-import { createCrtCompositor } from "./post";
-
-/** Keyed by `KeyboardEvent.code`, so the layout works the same on QWERTZ and AZERTY. */
-const KEY_ACTIONS: Record<string, AsteroidsAction> = {
-  ArrowLeft: "left",
-  ArrowRight: "right",
-  ArrowUp: "thrust",
-  KeyA: "left",
-  KeyD: "right",
-  KeyW: "thrust",
-  Space: "fire",
-};
-
-const ALL_ACTIONS = ["left", "right", "thrust", "fire"] as const;
-
-const BEST_SCORE_KEY = "voidhash.asteroids.best";
-
-function readBestScore(): number {
-  try {
-    return Number(window.localStorage.getItem(BEST_SCORE_KEY)) || 0;
-  } catch {
-    // Private-mode Safari and blocked-storage setups throw on access; a missing high score is not
-    // worth breaking the game over.
-    return 0;
-  }
-}
-
-function writeBestScore(score: number): void {
-  try {
-    window.localStorage.setItem(BEST_SCORE_KEY, String(score));
-  } catch {
-    // Ignored for the same reason as above.
-  }
-}
-
-function pad(value: number, digits: number): string {
-  return String(value).padStart(digits, "0");
-}
-
-function ShipGlyph({ className }: { className?: string }) {
-  return (
-    <svg aria-hidden="true" className={className} fill="none" viewBox="0 0 12 14" width="11">
-      <path d="M6 1 11 13 6 10.2 1 13Z" stroke="currentColor" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-const HUD_ALIGN = {
-  center: "items-center",
-  end: "items-end",
-  start: "items-start",
-} as const;
-
-function HudStat({
-  align = "start",
-  label,
-  children,
-}: {
-  align?: keyof typeof HUD_ALIGN;
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className={cn("flex flex-col gap-1", HUD_ALIGN[align])}>
-      <div className="text-[11px]/3.5 text-zinc-600 tracking-[0.06em]">{label}</div>
-      <div className="text-white text-xl/6 tabular-nums">{children}</div>
-    </div>
-  );
-}
-
-/**
- * One button of the on-screen pad, held for as long as the finger stays down.
- *
- * Pointer capture keeps the hold alive when the thumb drifts off the circle, which it always does
- * during a long burn.
- */
-function TouchButton({
-  className,
-  label,
-  onHold,
-  children,
-}: {
-  className?: string;
-  label: string;
-  onHold: (pressed: boolean) => void;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      aria-label={label}
-      className={cn(
-        // `touch-none` is what makes the pad playable rather than merely present: without it a
-        // thumb that drifts while held pans the page, and panning scrolls the board out of view,
-        // which pauses the run mid-press.
-        "flex size-16 touch-none select-none items-center justify-center rounded-full border border-zinc-700 bg-black/40 text-[15px] text-zinc-300 backdrop-blur-sm transition-colors active:border-zinc-300 active:bg-zinc-300/15 active:text-white",
-        className,
-      )}
-      onContextMenu={(event) => event.preventDefault()}
-      onPointerCancel={() => onHold(false)}
-      onPointerDown={(event) => {
-        event.preventDefault();
-        onHold(true);
-        // Capture is an optimisation for the drifting thumb, not a precondition for the press:
-        // it throws NotFoundError when the pointer is already gone, which must not cost the hold.
-        try {
-          event.currentTarget.setPointerCapture(event.pointerId);
-        } catch {
-          // Without capture the button still gets its own pointerup; only drift stops working.
-        }
-      }}
-      onPointerUp={() => onHold(false)}
-      type="button"
-    >
-      {children}
-    </button>
-  );
-}
-
-/**
- * Full-screen playable board for the landing page's unexplained finale.
- *
- * Owns the canvases and the arcade chrome; all simulation lives in {@link AsteroidsEngine} and the
- * CRT look in the `post` shader pass. The loop is gated on the board being on screen in a visible
- * tab, and a run that scrolls out of view pauses itself so the page never quietly holds the arrow
- * keys hostage. With `autoStart` the run begins the moment the board has a size — the section only
- * mounts this component once the player has already pressed play.
- */
-export function AsteroidsGame({ autoStart = false }: { autoStart?: boolean }) {
-  const frameRef = useRef<HTMLDivElement>(null);
-  const engineRef = useRef<AsteroidsEngine | null>(null);
-  const prefersReducedMotion = useReducedMotion();
-
-  const [status, setStatus] = useState<AsteroidsStatus>("idle");
-  const [hud, setHud] = useState({ lives: 3, score: 0, wave: 1 });
-  const [bestScore, setBestScore] = useState(0);
-  const [isTouch, setIsTouch] = useState(false);
-
-  useEffect(() => {
-    setBestScore(readBestScore());
-    setIsTouch(window.matchMedia("(pointer: coarse)").matches);
-  }, []);
-
-  // Hybrids (touch laptops, tablets with a trackpad) report a fine pointer until a finger actually
-  // lands, so the first touch anywhere on the page arms the pad as well.
-  useEffect(() => {
-    if (isTouch) {
-      return;
-    }
-
-    const onPointerDown = (event: PointerEvent) => {
-      if (event.pointerType === "touch") {
-        setIsTouch(true);
-      }
-    };
-
-    window.addEventListener("pointerdown", onPointerDown, { passive: true });
-    return () => window.removeEventListener("pointerdown", onPointerDown);
-  }, [isTouch]);
-
-  useEffect(() => {
-    const frame = frameRef.current;
-    if (!frame) {
-      return;
-    }
-
-    // The visible canvas is created per effect run rather than rendered once and held in a ref: a
-    // canvas keeps its context type for life, so a board that reruns this effect (reduced-motion
-    // resolving after mount, a remount in dev) would hand a canvas whose WebGL context the previous
-    // compositor already lost to a fresh compositor that cannot use it — and then to the engine,
-    // whose `getContext("2d")` on a WebGL canvas returns null. A new element sidesteps all of it.
-    const canvas = document.createElement("canvas");
-    canvas.className = "block size-full";
-    frame.prepend(canvas);
-
-    // With the CRT pass the visible canvas is WebGL and the engine draws into an offscreen scene;
-    // without it the engine draws straight onto the visible canvas.
-    const compositor = createCrtCompositor(canvas, prefersReducedMotion === true);
-    const engine = new AsteroidsEngine({
-      canvas: compositor ? document.createElement("canvas") : canvas,
-      compositor,
-      onHud: setHud,
-      onStatus: setStatus,
-      reducedMotion: prefersReducedMotion === true,
-    });
-    engineRef.current = engine;
-
-    let onScreen = false;
-    const syncActive = () => engine.setActive(onScreen && !document.hidden);
-
-    let started = false;
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      const box = entry.contentRect;
-      engine.resize(Math.round(box.width), Math.round(box.height));
-      if (autoStart && !started && box.width > 0) {
-        started = true;
-        engine.start();
-      }
-    });
-    resizeObserver.observe(frame);
-
-    // A run that leaves the viewport pauses rather than merely freezing, so the overlay tells the
-    // player why the ship stopped — and so the key handler unbinds with it.
-    const intersectionObserver = new IntersectionObserver(
-      ([entry]) => {
-        onScreen = entry.isIntersecting;
-        if (!onScreen) {
-          engine.pause();
-        }
-        syncActive();
-      },
-      { threshold: 0.35 },
-    );
-    intersectionObserver.observe(frame);
-
-    const onVisibilityChange = () => {
-      if (document.hidden) {
-        engine.pause();
-      }
-      syncActive();
-    };
-    const onBlur = () => engine.pause();
-
-    document.addEventListener("visibilitychange", onVisibilityChange);
-    window.addEventListener("blur", onBlur);
-
-    return () => {
-      resizeObserver.disconnect();
-      intersectionObserver.disconnect();
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-      window.removeEventListener("blur", onBlur);
-      engine.destroy();
-      compositor?.destroy();
-      canvas.remove();
-      engineRef.current = null;
-    };
-  }, [autoStart, prefersReducedMotion]);
-
-  // Bound only while a run is live: the arrow keys and space belong to the page the rest of the
-  // time, and an unbound handler cannot swallow a scroll.
-  useEffect(() => {
-    if (status !== "playing") {
-      return;
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.metaKey || event.ctrlKey || event.altKey) {
-        return;
-      }
-      if (event.code === "Escape") {
-        engineRef.current?.pause();
-        return;
-      }
-      // ArrowDown/S do nothing but must not scroll the page away from a live game.
-      if (event.code === "ArrowDown" || event.code === "KeyS") {
-        event.preventDefault();
-        return;
-      }
-      const action = KEY_ACTIONS[event.code];
-      if (!action) {
-        return;
-      }
-      event.preventDefault();
-      engineRef.current?.setInput(action, true);
-    };
-
-    const onKeyUp = (event: KeyboardEvent) => {
-      const action = KEY_ACTIONS[event.code];
-      if (action) {
-        event.preventDefault();
-        engineRef.current?.setInput(action, false);
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    window.addEventListener("keyup", onKeyUp);
-
-    return () => {
-      window.removeEventListener("keydown", onKeyDown);
-      window.removeEventListener("keyup", onKeyUp);
-    };
-  }, [status]);
-
-  // A pad button that unmounts mid-press — a scroll pauses the run while thrust is held — never
-  // sees its own pointerup, so without this the action stays latched into the resumed run. Same
-  // for a key still down when the window blurs.
-  useEffect(() => {
-    if (status === "playing") {
-      return;
-    }
-    for (const action of ALL_ACTIONS) {
-      engineRef.current?.setInput(action, false);
-    }
-  }, [status]);
-
-  // Space/Enter starts or resumes a run, but only while the board fills the view — half a screen
-  // up the page those keys still belong to scrolling.
-  useEffect(() => {
-    if (status === "playing") {
-      return;
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (
-        (event.code !== "Space" && event.code !== "Enter") ||
-        event.metaKey ||
-        event.ctrlKey ||
-        event.altKey
-      ) {
-        return;
-      }
-      const rect = frameRef.current?.getBoundingClientRect();
-      const midscreen = window.innerHeight * 0.5;
-      if (!rect || rect.top > midscreen || rect.bottom < midscreen) {
-        return;
-      }
-      event.preventDefault();
-      if (status === "paused") {
-        engineRef.current?.resume();
-      } else {
-        engineRef.current?.start();
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [status]);
-
-  useEffect(() => {
-    if (status === "over" && hud.score > bestScore) {
-      setBestScore(hud.score);
-      writeBestScore(hud.score);
-    }
-  }, [bestScore, hud.score, status]);
-
-  const hold = useCallback((action: AsteroidsAction, pressed: boolean) => {
-    engineRef.current?.setInput(action, pressed);
-  }, []);
-
-  const primaryAction = useCallback(() => {
-    if (status === "paused") {
-      engineRef.current?.resume();
-    } else {
-      engineRef.current?.start();
-    }
-  }, [status]);
-
-  const showPad = isTouch && status === "playing";
-
-  return (
-    <div className={cn(ASTEROIDS_STAGE_CLASS, "select-none font-mono")} ref={frameRef}>
-      {/* The board's canvas is prepended here by the engine effect above. */}
-
-      {/* The landing navbar stays sticky over the stage, so the HUD starts below it. */}
-      <div className="pointer-events-none absolute inset-x-0 top-20 flex items-start justify-between px-6 md:px-10">
-        <HudStat label="SCORE">{pad(hud.score, 6)}</HudStat>
-        <HudStat align="center" label="WAVE">
-          {pad(hud.wave, 2)}
-        </HudStat>
-        <HudStat align="end" label="SHIPS">
-          <div className="flex h-6 items-center gap-1.5">
-            {hud.lives > 0 ? (
-              Array.from({ length: hud.lives }, (_, index) => <ShipGlyph key={index} />)
-            ) : (
-              <span className="text-zinc-600">—</span>
-            )}
-          </div>
-        </HudStat>
-      </div>
-
-      {/* One bar, so the pad, the high score and the home indicator never fight for the same
-          corner. Each pointer captures its own button, so steering while thrusting and firing is
-          just three fingers. */}
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-4 px-6 pb-[max(1.25rem,env(safe-area-inset-bottom))] md:px-10">
-        {/* High score above the steering pad, so both clusters still bottom-align on the bar. */}
-        <div className="flex flex-col items-start gap-4">
-          <div className="text-[11px]/3.5 text-zinc-700 tracking-[0.06em]">
-            HI {pad(Math.max(bestScore, hud.score), 6)}
-          </div>
-          {showPad ? (
-            <div className="pointer-events-auto flex gap-3">
-              <TouchButton label="Rotate left" onHold={(down) => hold("left", down)}>
-                <span aria-hidden="true">◀</span>
-              </TouchButton>
-              <TouchButton label="Rotate right" onHold={(down) => hold("right", down)}>
-                <span aria-hidden="true">▶</span>
-              </TouchButton>
-            </div>
-          ) : null}
-        </div>
-        {showPad ? (
-          <div className="pointer-events-auto flex gap-3">
-            <TouchButton label="Thrust" onHold={(down) => hold("thrust", down)}>
-              <span aria-hidden="true">▲</span>
-            </TouchButton>
-            <TouchButton
-              className="border-blue-ribbon-600/70 text-blue-ribbon-400 active:border-blue-ribbon-400 active:bg-blue-ribbon-500/20 active:text-blue-ribbon-200"
-              label="Fire"
-              onHold={(down) => hold("fire", down)}
-            >
-              <span aria-hidden="true">●</span>
-            </TouchButton>
-          </div>
-        ) : null}
-      </div>
-
-      {/* No idle overlay: with autoStart the run begins before a frame of idle is ever visible. */}
-      {status === "paused" || status === "over" ? (
-        <div className="absolute inset-0 flex flex-col items-center justify-center gap-10 bg-black/55 px-6 text-center">
-          <div className="flex flex-col items-center gap-4">
-            <div className="text-4xl text-white tracking-[0.3em] md:text-6xl">
-              {status === "paused" ? "PAUSED" : "GAME OVER"}
-            </div>
-            {status === "over" ? (
-              <div className="text-[15px] text-zinc-400 tabular-nums tracking-[0.1em]">
-                SCORE {pad(hud.score, 6)}
-                {hud.score > 0 && hud.score >= bestScore ? " · NEW RECORD" : ""}
-              </div>
-            ) : null}
-          </div>
-          <button
-            className="border border-zinc-500 px-10 py-3.5 text-sm text-white tracking-[0.25em] transition-colors hover:border-white hover:bg-white hover:text-black"
-            onClick={primaryAction}
-            type="button"
-          >
-            {status === "paused" ? "RESUME" : "PLAY AGAIN"}
-          </button>
-          {isTouch ? null : (
-            <div className="animate-pulse text-[12px] text-zinc-500 tracking-[0.25em]">
-              {status === "paused" ? "PRESS SPACE TO RESUME" : "PRESS SPACE TO PLAY AGAIN"}
-            </div>
-          )}
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/asteroids/post.ts b/apps/www/src/features/www/landing/asteroids/post.ts
deleted file mode 100644
index cb3e2286d..000000000
--- a/apps/www/src/features/www/landing/asteroids/post.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * CRT-style WebGL post-processing pass for the Asteroids board.
- *
- * The engine renders the scene into an offscreen 2D canvas; every finished frame is uploaded here
- * as a texture and redrawn onto the visible canvas with barrel curvature, bloom, chromatic
- * aberration, scanlines and a vignette. Kept dependency-free (raw WebGL1, one program, one
- * texture, a single fullscreen triangle) so the whole pass costs one draw call per frame and no
- * per-frame allocations.
- */
-
-const VERTEX_SOURCE = `
-attribute vec2 aPosition;
-varying vec2 vUv;
-
-void main() {
-  vUv = aPosition * 0.5 + 0.5;
-  gl_Position = vec4(aPosition, 0.0, 1.0);
-}
-`;
-
-const FRAGMENT_SOURCE = `
-precision mediump float;
-
-uniform sampler2D uScene;
-uniform vec2 uResolution;
-uniform float uTime;
-uniform float uMotion;
-
-varying vec2 vUv;
-
-void main() {
-  vec2 centered = vUv - 0.5;
-  float r2 = dot(centered, centered);
-
-  // Barrel curvature: samples pull outward towards the edges, leaving a thin curved black rim.
-  vec2 uv = 0.5 + centered * (1.0 + 0.06 * r2);
-  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
-    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
-    return;
-  }
-
-  // Chromatic aberration grows with distance from the centre; frozen under reduced motion. Kept
-  // subtle so the monochrome wireframes fringe rather than visibly split into colours.
-  vec2 fringe = centered * r2 * 0.015 * uMotion;
-  vec3 color = vec3(
-    texture2D(uScene, uv + fringe).r,
-    texture2D(uScene, uv).g,
-    texture2D(uScene, uv - fringe).b
-  );
-
-  // Cheap bloom: eight taps, squared so only bright strokes glow and the void stays black.
-  vec2 px = 1.0 / uResolution;
-  vec3 glow = texture2D(uScene, uv + px * vec2(2.0, 2.0)).rgb
-    + texture2D(uScene, uv + px * vec2(-2.0, 2.0)).rgb
-    + texture2D(uScene, uv + px * vec2(2.0, -2.0)).rgb
-    + texture2D(uScene, uv + px * vec2(-2.0, -2.0)).rgb
-    + texture2D(uScene, uv + px * vec2(5.0, 0.0)).rgb
-    + texture2D(uScene, uv + px * vec2(-5.0, 0.0)).rgb
-    + texture2D(uScene, uv + px * vec2(0.0, 5.0)).rgb
-    + texture2D(uScene, uv + px * vec2(0.0, -5.0)).rgb;
-  glow *= 0.125;
-  color += glow * glow * 1.2;
-
-  float scanline = 0.92 + 0.08 * sin(uv.y * uResolution.y * 3.14159);
-  float flicker = 1.0 + 0.012 * uMotion * sin(uTime * 82.0);
-  float vignette = 1.0 - 0.55 * r2 * 1.6;
-
-  gl_FragColor = vec4(color * scanline * flicker * vignette, 1.0);
-}
-`;
-
-function compileShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader {
-  const shader = gl.createShader(type);
-  if (!shader) {
-    throw new Error("CRT pass: shader allocation failed");
-  }
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(shader);
-    gl.deleteShader(shader);
-    throw new Error(`CRT pass: shader compile failed: ${info}`);
-  }
-  return shader;
-}
-
-/** Implements the engine's `AsteroidsCompositor` contract on a WebGL canvas. */
-export class CrtCompositor {
-  private readonly canvas: HTMLCanvasElement;
-  private readonly gl: WebGLRenderingContext;
-  private readonly texture: WebGLTexture;
-  private readonly timeUniform: WebGLUniformLocation | null;
-  private readonly resolutionUniform: WebGLUniformLocation | null;
-
-  private textureWidth = 0;
-  private textureHeight = 0;
-  private destroyed = false;
-
-  constructor(canvas: HTMLCanvasElement, reducedMotion: boolean) {
-    const gl = canvas.getContext("webgl", {
-      alpha: false,
-      antialias: false,
-      depth: false,
-      powerPreference: "high-performance",
-      stencil: false,
-    });
-    if (!gl) {
-      throw new Error("CRT pass: WebGL unavailable");
-    }
-
-    const program = gl.createProgram();
-    if (!program) {
-      throw new Error("CRT pass: program allocation failed");
-    }
-    gl.attachShader(program, compileShader(gl, gl.VERTEX_SHADER, VERTEX_SOURCE));
-    gl.attachShader(program, compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SOURCE));
-    gl.linkProgram(program);
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-      throw new Error(`CRT pass: program link failed: ${gl.getProgramInfoLog(program)}`);
-    }
-    gl.useProgram(program);
-
-    // One triangle overshooting the viewport beats a quad: no index buffer, no diagonal seam.
-    const buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
-    const position = gl.getAttribLocation(program, "aPosition");
-    gl.enableVertexAttribArray(position);
-    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
-
-    const texture = gl.createTexture();
-    if (!texture) {
-      throw new Error("CRT pass: texture allocation failed");
-    }
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-
-    gl.uniform1i(gl.getUniformLocation(program, "uScene"), 0);
-    gl.uniform1f(gl.getUniformLocation(program, "uMotion"), reducedMotion ? 0 : 1);
-    this.timeUniform = gl.getUniformLocation(program, "uTime");
-    this.resolutionUniform = gl.getUniformLocation(program, "uResolution");
-
-    this.canvas = canvas;
-    this.gl = gl;
-    this.texture = texture;
-  }
-
-  /** Matches the visible canvas to the scene canvas' device-pixel size. */
-  resize(width: number, height: number, scale: number): void {
-    if (this.destroyed) {
-      return;
-    }
-    this.canvas.width = Math.round(width * scale);
-    this.canvas.height = Math.round(height * scale);
-    this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);
-    this.gl.uniform2f(this.resolutionUniform, this.canvas.width, this.canvas.height);
-  }
-
-  /** Uploads the finished scene frame and redraws it through the CRT shader. */
-  draw(scene: HTMLCanvasElement, timeSeconds: number): void {
-    if (this.destroyed || scene.width === 0 || scene.height === 0) {
-      return;
-    }
-    const gl = this.gl;
-
-    // texSubImage2D skips the driver-side reallocation that texImage2D does per call, so the full
-    // upload only happens when the scene canvas actually changed size.
-    if (scene.width === this.textureWidth && scene.height === this.textureHeight) {
-      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, scene);
-    } else {
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, scene);
-      this.textureWidth = scene.width;
-      this.textureHeight = scene.height;
-    }
-
-    gl.uniform1f(this.timeUniform, timeSeconds);
-    gl.drawArrays(gl.TRIANGLES, 0, 3);
-  }
-
-  /** Releases the GL context and the canvas' backing store. */
-  destroy(): void {
-    if (this.destroyed) {
-      return;
-    }
-    this.destroyed = true;
-    this.gl.getExtension("WEBGL_lose_context")?.loseContext();
-    this.canvas.width = 0;
-    this.canvas.height = 0;
-  }
-}
-
-/**
- * Builds the CRT pass, or returns `null` where WebGL is unavailable so the caller can fall back to
- * showing the engine's own canvas — the game is fully playable without the shader.
- */
-export function createCrtCompositor(
-  canvas: HTMLCanvasElement,
-  reducedMotion: boolean,
-): CrtCompositor | null {
-  try {
-    return new CrtCompositor(canvas, reducedMotion);
-  } catch {
-    return null;
-  }
-}
diff --git a/apps/www/src/features/www/landing/landing-page.tsx b/apps/www/src/features/www/landing/landing-page.tsx
deleted file mode 100644
index b498c284f..000000000
--- a/apps/www/src/features/www/landing/landing-page.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import { LandingAnalytics } from "./sections/analytics";
-import { LandingAsteroids } from "./sections/asteroids";
-import { LandingCrm } from "./sections/crm";
-import { LandingDevelopers } from "./sections/developers";
-import { LandingDivider } from "./sections/divider";
-import { LandingExperimentation } from "./sections/experimentation";
-import { LandingFooter } from "./sections/footer";
-import { LandingGetStarted } from "./sections/get-started";
-import { LandingHero } from "./sections/hero";
-import { LandingNavbar } from "./sections/navbar";
-import { LandingPaywalls } from "./sections/paywalls";
-import { LandingProblem } from "./sections/problem";
-
-/** Renders the Voidhash marketing landing page. */
-export function LandingPage() {
-  return (
-    <div className="dark w-full overflow-x-clip bg-zinc-950 text-xs/4 antialiased [font-synthesis:none]">
-      <LandingNavbar />
-      <div className="flex w-full flex-col items-start gap-px">
-        <LandingHero />
-        <LandingDivider />
-        <LandingProblem />
-        <LandingDivider />
-        <LandingPaywalls />
-        <LandingDivider />
-        <LandingAnalytics />
-        <LandingDivider />
-        <LandingExperimentation />
-        <LandingDivider />
-        <LandingCrm />
-        <LandingDivider />
-        <LandingDevelopers />
-        <LandingDivider />
-        <LandingGetStarted />
-        <LandingDivider />
-        <LandingFooter />
-        <LandingAsteroids />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/marketing-nav-config.ts b/apps/www/src/features/www/landing/marketing-nav-config.ts
deleted file mode 100644
index 3b31c5c67..000000000
--- a/apps/www/src/features/www/landing/marketing-nav-config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-
-/** A marketing navigation link. Hrefs are plain strings so hosts can add pages the OSS build has no route for. */
-export interface MarketingNavLink {
-  label: string;
-  href: string;
-  icon: LucideIcon;
-}
-
-/**
- * Company links rendered in the marketing navbar and footer. The community build
- * ships none; hosts replace this module to add the pages their deployment has.
- */
-export const MARKETING_COMPANY_LINKS: MarketingNavLink[] = [];
diff --git a/apps/www/src/features/www/landing/motion.tsx b/apps/www/src/features/www/landing/motion.tsx
deleted file mode 100644
index e700a5c36..000000000
--- a/apps/www/src/features/www/landing/motion.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-"use client";
-
-import {
-  animate,
-  type MotionValue,
-  motion,
-  useInView,
-  useReducedMotion,
-  useScroll,
-  useTransform,
-} from "motion/react";
-import {
-  createContext,
-  type CSSProperties,
-  type ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-
-/** Long, soft deceleration — reads well on data that is counting or growing towards a value. */
-const EASE_OUT = [0.16, 1, 0.3, 1] as const;
-
-/**
- * Whether the surrounding illustration has scrolled into view, or `null` outside one.
- *
- * The illustration owns the single observer and every animated part reads from it, so a mock's
- * charts, bars and figures all start together instead of tripping one by one. The `null` default
- * makes the parts render as plain static values when used outside an `Illustration`.
- */
-const IllustrationInViewContext = createContext<boolean | null>(null);
-
-/**
- * Marks a product mock whose contents animate in once it scrolls into view.
- *
- * Takes over an existing wrapper's `className` rather than adding a node of its own, because the
- * mocks are pixel-faithful exports whose layout is sensitive to extra boxes.
- */
-export function Illustration({
-  children,
-  className,
-  style,
-}: {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const inView = useInView(ref, { amount: 0.2, once: true });
-
-  return (
-    <div className={className} ref={ref} style={style}>
-      <IllustrationInViewContext.Provider value={inView}>
-        {children}
-      </IllustrationInViewContext.Provider>
-    </div>
-  );
-}
-
-type ParsedValue = { amount: number; format: (value: number) => string };
-
-/** Splits "−$2,130" or "+25.9%" into prefix, number and suffix so the count-up can reformat it. */
-function parseValue(value: string): ParsedValue | null {
-  const match = /^([^\d]*)(\d[\d,]*(?:\.\d+)?)(.*)$/.exec(value);
-  if (!match) {
-    return null;
-  }
-
-  const [, prefix, digits, suffix] = match;
-  const decimals = digits.includes(".") ? digits.split(".")[1].length : 0;
-  const useGrouping = digits.includes(",");
-
-  return {
-    amount: Number(digits.replace(/,/g, "")),
-    format: (current) =>
-      prefix +
-      current.toLocaleString("en-US", {
-        maximumFractionDigits: decimals,
-        minimumFractionDigits: decimals,
-        useGrouping,
-      }) +
-      suffix,
-  };
-}
-
-/**
- * Counts a figure up to its final value when its illustration scrolls into view.
- *
- * Renders the real value on the server and writes to the DOM node directly while animating, so a
- * mock full of figures neither breaks hydration nor re-renders React on every frame.
- */
-export function CountUp({
-  className,
-  delay = 0,
-  value,
-}: {
-  className?: string;
-  delay?: number;
-  value: string;
-}) {
-  const ref = useRef<HTMLSpanElement>(null);
-  const inView = useContext(IllustrationInViewContext);
-  const prefersReducedMotion = useReducedMotion();
-  const parsed = useMemo(() => parseValue(value), [value]);
-
-  useEffect(() => {
-    const node = ref.current;
-    if (!node || !parsed || inView === null || prefersReducedMotion) {
-      return;
-    }
-
-    if (!inView) {
-      node.textContent = parsed.format(0);
-      return;
-    }
-
-    const controls = animate(0, parsed.amount, {
-      delay,
-      duration: 1.2,
-      ease: EASE_OUT,
-      onUpdate: (current) => {
-        node.textContent = parsed.format(current);
-      },
-    });
-
-    return () => controls.stop();
-  }, [delay, inView, parsed, prefersReducedMotion]);
-
-  return (
-    <span className={className} ref={ref}>
-      {value}
-    </span>
-  );
-}
-
-/** Wipes a chart in from the left once its illustration scrolls into view. */
-export function ChartWipe({
-  children,
-  className,
-  delay = 0,
-}: {
-  children: ReactNode;
-  className?: string;
-  delay?: number;
-}) {
-  const inView = useContext(IllustrationInViewContext);
-  const prefersReducedMotion = useReducedMotion();
-  const drawn = inView !== false || prefersReducedMotion;
-
-  return (
-    <motion.div
-      animate={{ clipPath: drawn ? "inset(0 0% 0 0)" : "inset(0 100% 0 0)" }}
-      className={className}
-      initial={false}
-      transition={{ delay, duration: 1.3, ease: [0.33, 1, 0.68, 1] }}
-    >
-      {children}
-    </motion.div>
-  );
-}
-
-/** Grows a fixed-width bar out from its left edge once its illustration scrolls into view. */
-export function GrowBar({ className, delay = 0 }: { className?: string; delay?: number }) {
-  const inView = useContext(IllustrationInViewContext);
-  const prefersReducedMotion = useReducedMotion();
-  const grown = inView !== false || prefersReducedMotion;
-
-  return (
-    <motion.div
-      animate={{ scaleX: grown ? 1 : 0 }}
-      className={className}
-      initial={false}
-      style={{ transformOrigin: "left" }}
-      transition={{ delay, duration: 1, ease: EASE_OUT }}
-    />
-  );
-}
-
-// zinc-600 and white. Kept as literal hex rather than `var(--zinc-600)` because
-// these are motion tween endpoints — the interpolator needs a concrete colour.
-// Keep in sync with the ramp in packages/ui/styles/brand-theme.css.
-const WORD_DIM = "#52525C";
-const WORD_BRIGHT = "#FFFFFF";
-
-/** How many word slots a single word takes to go from dim to bright; >1 overlaps neighbours. */
-const WORD_WINDOW_SLOTS = 1.8;
-
-/**
- * Brightens copy word by word as the block scrolls through the viewport.
- *
- * Each word owns a slice of the block's scroll progress and neighbouring slices overlap, so the
- * sweep reads as a continuous wipe rather than a row of words flipping one at a time.
- */
-export function ScrollBrightenText({ className, text }: { className?: string; text: string }) {
-  const ref = useRef<HTMLParagraphElement>(null);
-  const { scrollYProgress } = useScroll({
-    offset: ["start 0.9", "end 0.3"],
-    target: ref,
-  });
-  const words = useMemo(() => text.split(" "), [text]);
-
-  const windowSize = Math.min(1, WORD_WINDOW_SLOTS / words.length);
-  const step = words.length > 1 ? (1 - windowSize) / (words.length - 1) : 0;
-
-  return (
-    <p className={className} ref={ref}>
-      {words.map((word, index) => (
-        <BrightenedWord
-          end={index * step + windowSize}
-          key={`${index}-${word}`}
-          progress={scrollYProgress}
-          start={index * step}
-        >
-          {index === words.length - 1 ? word : `${word} `}
-        </BrightenedWord>
-      ))}
-    </p>
-  );
-}
-
-function BrightenedWord({
-  children,
-  end,
-  progress,
-  start,
-}: {
-  children: string;
-  end: number;
-  progress: MotionValue<number>;
-  start: number;
-}) {
-  const color = useTransform(progress, [start, end], [WORD_DIM, WORD_BRIGHT]);
-
-  return <motion.span style={{ color }}>{children}</motion.span>;
-}
diff --git a/apps/www/src/features/www/landing/paywall-build/agent-transcript.tsx b/apps/www/src/features/www/landing/paywall-build/agent-transcript.tsx
deleted file mode 100644
index e584a7212..000000000
--- a/apps/www/src/features/www/landing/paywall-build/agent-transcript.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-"use client";
-
-import { cn } from "@voidhash/ui";
-import { useEffect, useRef, useState } from "react";
-
-import { AGENT_INTRO, AGENT_OUTRO, AGENT_PROMPT, TRANSCRIPT_STEPS } from "./transcript";
-import { PROMPT_CHAR_MS, type TranscriptPlayback } from "./use-transcript-playback";
-
-const TERMINAL_BACKGROUND =
-  "radial-gradient(ellipse 156.12% 100% at 100% -0.86% in oklab, var(--color-zinc-900) 0%, var(--color-zinc-950) 100%)";
-
-/** Types a string out one character at a time; renders it whole when `typing` is false. */
-function TypedText({ typing, text }: { typing: boolean; text: string }) {
-  const [count, setCount] = useState(typing ? 0 : text.length);
-
-  useEffect(() => {
-    if (!typing) {
-      setCount(text.length);
-      return;
-    }
-
-    setCount(0);
-    let typed = 0;
-    const interval = setInterval(() => {
-      typed += 1;
-      setCount(typed);
-      if (typed >= text.length) {
-        clearInterval(interval);
-      }
-    }, PROMPT_CHAR_MS);
-
-    return () => clearInterval(interval);
-  }, [typing, text]);
-
-  return <>{text.slice(0, count)}</>;
-}
-
-/** Renders a `key: value` argument line with the value picked out; free-form lines stay dim. */
-function ArgumentLine({ argument }: { argument: string }) {
-  const [, key, value] = /^([A-Za-z]+):\s(.*)$/.exec(argument) ?? [];
-
-  return (
-    <div className="pl-4 text-zinc-500">
-      {key ? (
-        <>
-          {key}: <span className="text-blue-ribbon-300">{value}</span>
-        </>
-      ) : (
-        argument
-      )}
-    </div>
-  );
-}
-
-/** One `⏺ voidhash – tool (MCP)` block with its arguments and result line. */
-function ToolCallBlock({
-  index,
-  playback,
-}: {
-  index: number;
-  playback: TranscriptPlayback;
-}) {
-  const step = TRANSCRIPT_STEPS[index];
-  const settled = index < playback.index || playback.phase !== "running";
-
-  return (
-    <div className="pt-3">
-      <div className="text-zinc-400">
-        {/* The marker goes green the moment the call comes back, as it does in Claude Code. */}
-        <span className={settled ? "text-pistachio-600" : "text-blue-ribbon-500"}>⏺</span> voidhash –{" "}
-        <span className="font-medium text-zinc-100">{step.tool}</span>{" "}
-        <span className="text-zinc-600">(MCP)</span>
-      </div>
-      {step.args.map((argument) => (
-        <ArgumentLine argument={argument} key={argument} />
-      ))}
-      <div className="text-zinc-400">
-        <span className="pl-1.5 text-zinc-700">⎿</span>
-        {"  "}
-        {settled ? (
-          step.result
-        ) : (
-          <span className="shimmer shimmer-duration-1600 text-zinc-500">Running…</span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * The Claude Code pane of the illustration: one user prompt followed by the Voidhash
- * MCP calls that compose the paywall. Scrolls itself so the newest call stays in view.
- * Fills its container's width; only the height is fixed.
- */
-export function AgentTranscript({ playback }: { playback: TranscriptPlayback }) {
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const [scrolled, setScrolled] = useState(false);
-  const started = playback.phase !== "idle";
-
-  useEffect(() => {
-    const scroller = scrollerRef.current;
-    if (scroller) {
-      scroller.scrollTo({ behavior: "smooth", top: scroller.scrollHeight });
-    }
-  }, [playback.index, playback.phase]);
-
-  return (
-    <div
-      className="relative h-129.25 w-full rounded-[16px] border border-zinc-800 border-solid bg-origin-border bg-zinc-950 [box-shadow:#00000040_0px_2px_16px]"
-      style={{ backgroundImage: TERMINAL_BACKGROUND }}
-    >
-      <div className="absolute top-3 left-3.25 size-3.25 rounded-full bg-zinc-700" />
-      <div className="absolute top-3 left-8.5 size-3.25 rounded-full bg-zinc-700" />
-      <div className="absolute top-3 left-13.75 size-3.25 rounded-full bg-zinc-700" />
-      <div className="absolute inset-x-0 top-2.5 text-center font-sans text-xs text-zinc-600 leading-[142.857%]">
-        Claude Code
-      </div>
-
-      <div
-        className="absolute inset-x-6 top-9.75 h-114.5 overflow-hidden font-mono text-xs text-zinc-400 leading-[142.857%]"
-        onScroll={(event) => setScrolled(event.currentTarget.scrollTop > 4)}
-        ref={scrollerRef}
-      >
-        {started ? (
-          <>
-            <div className="text-zinc-100">
-              <span className="text-blue-ribbon-500">&gt;</span>{" "}
-              <TypedText text={AGENT_PROMPT} typing={playback.phase === "prompt"} />
-            </div>
-            {playback.phase === "prompt" ? null : (
-              <div className="pt-3 text-zinc-400">
-                <span className="text-pistachio-600">⏺</span> {AGENT_INTRO}
-              </div>
-            )}
-            {TRANSCRIPT_STEPS.slice(0, playback.index + 1).map((step, index) => (
-              <ToolCallBlock index={index} key={step.tool + String(index)} playback={playback} />
-            ))}
-            {playback.phase === "done" ? (
-              <div className="pt-3 text-zinc-300">
-                <span className="text-pistachio-600">⏺</span> {AGENT_OUTRO}
-              </div>
-            ) : null}
-          </>
-        ) : null}
-      </div>
-
-      {/* Fades transcript lines out as they scroll past the top of the pane. Held back until
-          the pane actually scrolls so it never sits over the prompt as it types. Spans the whole
-          window (`-inset-px` covers the border box) so it repaints the window's own gradient in
-          the same coordinate space; the mask keeps only the fading band at the pane's top edge. */}
-      <div
-        className={cn(
-          "pointer-events-none absolute -inset-px rounded-[16px] transition-opacity duration-500",
-          scrolled ? "opacity-100" : "opacity-0",
-        )}
-        style={{
-          backgroundImage: TERMINAL_BACKGROUND,
-          maskImage: "linear-gradient(to bottom, transparent 39px, black 39px, transparent 63px)",
-        }}
-      />
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx b/apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx
deleted file mode 100644
index 8e2429c59..000000000
--- a/apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx
+++ /dev/null
@@ -1,356 +0,0 @@
-import { cn } from "@voidhash/ui";
-import type { ReactNode } from "react";
-
-import type { PaywallPart } from "./transcript";
-
-export const PAYWALL_WIDTH = 402;
-export const PAYWALL_HEIGHT = 874;
-
-interface PartProps {
-  children?: ReactNode;
-  className?: string;
-  /** Stagger within a group that lands on the same call, in milliseconds. */
-  delay?: number;
-  part: PaywallPart;
-  revealed: ReadonlySet<PaywallPart>;
-}
-
-/** Settles a paywall fragment onto the canvas once the edit that inserts it comes back. */
-function Part({ children, className, delay = 0, part, revealed }: PartProps) {
-  const shown = revealed.has(part);
-
-  return (
-    <div
-      className={cn(
-        "transition-[opacity,filter,translate] duration-700 ease-out",
-        shown ? "translate-y-0 opacity-100 blur-none" : "translate-y-1 opacity-0 blur-[6px]",
-        className,
-      )}
-      style={{ transitionDelay: shown ? `${delay}ms` : "0ms" }}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** The concentric scan rings behind the app icon, widest to tightest. */
-const SCAN_RINGS = [
-  "left-32.25 top-32.75 size-36 [border-width:1.5px] border-[#6E9BFFB3]",
-  "left-24.25 top-24.75 size-52 border border-[#5A8AFF73]",
-  "left-14.75 top-15.25 h-71 w-71 border border-[#5A8AFF45]",
-  "left-3.25 top-3.75 h-94 w-94 border border-[#5A8AFF30]",
-  "-left-10.25 -top-9.75 h-121 w-121 border border-[#5A8AFF21]",
-  "-left-25.75 -top-25.25 h-152 w-152 border border-[#5A8AFF17]",
-  "-left-43.25 -top-42.75 h-187 w-187 border border-[#5A8AFF0F]",
-  "-left-62.75 -top-62.25 h-226 w-226 border border-[#5A8AFF0A]",
-];
-
-/** The camera-detection chips floating over the hero. */
-const DETECTION_CHIPS = [
-  { className: "left-5.5 top-27.5", delay: 0, label: "Avocado toast · 412 kcal" },
-  { className: "left-41.5 top-80.5", delay: 140, label: "Protein 32 g · Carbs 41 g" },
-];
-
-/** The laurel that brackets each award badge; `flipped` mirrors it for the right side. */
-function Laurel({ flipped }: { flipped?: boolean }) {
-  return (
-    <svg
-      aria-hidden="true"
-      height="44"
-      style={{ flexShrink: 0, transform: flipped ? "scaleX(-1)" : undefined }}
-      viewBox="0 0 14 44"
-      width="14"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M11 4 C3 13, 2 27, 8 41" fill="none" stroke="#6B6B72" strokeWidth="1.3" />
-      <circle cx="9.2" cy="8" fill="#6B6B72" r="2" />
-      <circle cx="6" cy="12.5" fill="#6B6B72" r="2" />
-      <circle cx="4" cy="18" fill="#6B6B72" r="2" />
-      <circle cx="3.2" cy="24" fill="#6B6B72" r="2" />
-      <circle cx="3.6" cy="30" fill="#6B6B72" r="2" />
-      <circle cx="5" cy="35.5" fill="#6B6B72" r="2" />
-    </svg>
-  );
-}
-
-function AwardBadge({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex h-18 grow basis-[0%] items-center justify-center gap-1 rounded-[12px] border border-[#1B2133] border-solid bg-[#0A0D15] px-2">
-      <Laurel />
-      {children}
-      <Laurel flipped />
-    </div>
-  );
-}
-
-function AppleMark() {
-  return (
-    <svg
-      aria-hidden="true"
-      height="18"
-      style={{ flexShrink: 0 }}
-      viewBox="0 0 15 18"
-      width="15"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12.4 9.5c0-2 1.6-3 1.7-3.1-.9-1.4-2.4-1.5-2.9-1.6-1.2-.1-2.4.7-3 .7s-1.6-.7-2.6-.7c-1.3 0-2.6.8-3.2 2-1.4 2.4-.4 6 1 8 .7 1 1.5 2.1 2.5 2 1 0 1.4-.6 2.6-.6s1.5.6 2.6.6c1.1 0 1.8-1 2.4-2 .8-1.1 1.1-2.3 1.1-2.3s-2.2-.9-2.2-3zM10.4 3.3c.5-.7.9-1.6.8-2.5-.8 0-1.8.5-2.4 1.2-.5.6-1 1.6-.8 2.5.9.1 1.8-.4 2.4-1.2z"
-        fill="#E4E4E7"
-      />
-    </svg>
-  );
-}
-
-/**
- * The Lenscal Pro paywall the landing-page agent builds, rendered at its native
- * 402×874 so the fragments can settle in one by one as the MCP calls land.
- */
-export function LenscalPaywall({ revealed }: { revealed: ReadonlySet<PaywallPart> }) {
-  return (
-    <div className="flex h-218.5 w-100.5 flex-col overflow-clip bg-black">
-      <div className="relative h-106 w-100.5 shrink-0 overflow-clip">
-        <Part className="absolute top-0 left-0 h-106 w-100.5" part="backdrop" revealed={revealed}>
-          <div
-            className="size-full"
-            style={{
-              backgroundImage:
-                "radial-gradient(ellipse 114.99999999999999% 80% at 50% 48% in oklab, oklab(29.5% -0.007 -0.103) 0%, oklab(20.6% -0.004 -0.061) 32%, oklab(11.7% -0.004 -0.027) 62%, oklab(0% 0 0) 82%)",
-            }}
-          />
-        </Part>
-
-        <div className="absolute top-0 left-0 h-106 w-100.5">
-          {SCAN_RINGS.map((ring, index) => (
-            <Part
-              className={cn("absolute rounded-[999px] border-solid", ring)}
-              delay={index * 70}
-              key={ring}
-              part="rings"
-              revealed={revealed}
-            />
-          ))}
-        </div>
-
-        <Part
-          className="absolute top-39.5 left-39 flex size-22.5 items-center justify-center rounded-[24px] border border-[#23325E] border-solid bg-[#0B1020] [box-shadow:#3A6EFF61_0px_0px_84px_24px,#000000B3_0px_18px_44px]"
-          part="appIcon"
-          revealed={revealed}
-        >
-          <svg
-            aria-hidden="true"
-            height="54"
-            style={{ flexShrink: 0 }}
-            viewBox="0 0 54 54"
-            width="54"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="27" cy="27" fill="none" r="22" stroke="#22304F" strokeWidth="5" />
-            <path
-              d="M27 5 A22 22 0 1 1 6.33 34.52"
-              fill="none"
-              stroke="var(--color-brand-primary)"
-              strokeLinecap="round"
-              strokeWidth="5"
-            />
-            <circle cx="27" cy="27" fill="none" r="9" stroke="#F4F4F5" strokeWidth="4" />
-          </svg>
-        </Part>
-
-        <Part className="absolute top-75 left-0 h-31 w-100.5" part="backdrop" revealed={revealed}>
-          <div
-            className="size-full"
-            style={{
-              backgroundImage:
-                "linear-gradient(in oklab 180deg, oklab(0% 0 0 / 0%) 0%, oklab(0% 0 0 / 55%) 46%, oklab(0% 0 0 / 92%) 78%, oklab(0% 0 0) 100%)",
-            }}
-          />
-        </Part>
-
-        <Part
-          className="absolute top-0 left-0 flex w-100.5 items-center gap-38.5 px-6 pt-5.25 pb-4.75"
-          part="statusBar"
-          revealed={revealed}
-        >
-          <div className="flex grow basis-[0%] flex-col items-center justify-center">
-            <div className="flex w-fit flex-wrap justify-center text-center font-sans font-semibold text-[17px]/5.5 text-white">
-              9:41
-            </div>
-          </div>
-          <div className="flex grow basis-[0%] flex-col items-center justify-center">
-            <svg
-              aria-hidden="true"
-              height="22"
-              style={{ flexShrink: 0 }}
-              viewBox="0 0 82 22"
-              width="82"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.7 13H2.5a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h1.2a1 1 0 0 0 1-1V14a1 1 0 0 0-1-1m5.2-2.5H7.7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h1.2a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1M14.1 8h-1.2a1 1 0 0 0-1 1v7.5a1 1 0 0 0 1 1h1.2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1m5.2-2.5h-1.2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1.2a1 1 0 0 0 1-1v-10a1 1 0 0 0-1-1"
-                fill="#FFFFFF"
-              />
-              <path
-                clipRule="evenodd"
-                d="M36.57 7.8c2.49 0 4.88.92 6.68 2.58.14.13.36.12.49 0l1.3-1.27a.34.34 0 0 0 0-.5 12.55 12.55 0 0 0-16.93 0 .34.34 0 0 0 0 .5l1.3 1.26c.13.13.34.14.48 0a10 10 0 0 1 6.68-2.57m0 4.22a5.4 5.4 0 0 1 3.67 1.44c.14.13.35.13.48 0l1.3-1.33a.37.37 0 0 0-.01-.52 7.9 7.9 0 0 0-10.88 0 .37.37 0 0 0 0 .52l1.29 1.32c.13.14.34.14.48 0 1-.92 2.31-1.43 3.67-1.43m2.52 2.8q0 .15-.1.28l-2.18 2.45a.3.3 0 0 1-.24.11.3.3 0 0 1-.24-.1l-2.18-2.46a.43.43 0 0 1 .01-.56 3.44 3.44 0 0 1 4.82 0 .4.4 0 0 1 .11.28"
-                fill="#FFFFFF"
-                fillRule="evenodd"
-              />
-              <path
-                clipRule="evenodd"
-                d="M70.5 5c2.05 0 3.08 0 3.88.34a4.3 4.3 0 0 1 2.28 2.28c.34.8.34 1.83.34 3.88s0 3.08-.34 3.88a4.3 4.3 0 0 1-2.28 2.28c-.8.34-1.83.34-3.88.34h-12c-2.05 0-3.08 0-3.88-.34a4.3 4.3 0 0 1-2.28-2.28c-.34-.8-.34-1.83-.34-3.88s0-3.08.34-3.88a4.3 4.3 0 0 1 2.28-2.28C55.42 5 56.45 5 58.5 5zM58.28 6c-1.85 0-2.77 0-3.48.36a3.3 3.3 0 0 0-1.44 1.44C53 8.5 53 9.43 53 11.28v.44c0 1.85 0 2.77.36 3.48a3.3 3.3 0 0 0 1.44 1.44c.7.36 1.63.36 3.48.36h12.44c1.85 0 2.77 0 3.48-.36a3.3 3.3 0 0 0 1.44-1.44c.36-.7.36-1.63.36-3.48v-.44c0-1.85 0-2.77-.36-3.48a3.3 3.3 0 0 0-1.44-1.44C73.5 6 72.57 6 70.72 6z"
-                fill="#FFFFFF"
-                fillRule="evenodd"
-                style={{ opacity: "0.35" }}
-              />
-              <path
-                d="M54 11c0-1.4 0-2.1.27-2.63a2.5 2.5 0 0 1 1.1-1.1C55.9 7 56.6 7 58 7h13c1.4 0 2.1 0 2.64.27q.72.37 1.09 1.1C75 8.9 75 9.6 75 11v1c0 1.4 0 2.1-.27 2.64a2.5 2.5 0 0 1-1.1 1.09C73.1 16 72.4 16 71 16H58c-1.4 0-2.1 0-2.63-.27a2.5 2.5 0 0 1-1.1-1.1C54 14.1 54 13.4 54 12z"
-                fill="#FFFFFF"
-              />
-              <path
-                d="M78 9.5v4.08a2.2 2.2 0 0 0 1.33-2.04A2.2 2.2 0 0 0 78 9.5"
-                fill="#FFFFFF"
-                style={{ opacity: "0.35" }}
-              />
-            </svg>
-          </div>
-        </Part>
-
-        {DETECTION_CHIPS.map((chip) => (
-          <Part
-            className={cn(
-              "absolute flex items-center gap-2 rounded-[999px] border border-[#5A8AFF3D] border-solid bg-[#090F21C7] py-1.75 pr-3.25 pl-2.75",
-              chip.className,
-            )}
-            delay={chip.delay}
-            key={chip.label}
-            part="chips"
-            revealed={revealed}
-          >
-            <div className="size-1.5 shrink-0 rounded-[999px] [background-color:var(--color-brand-primary)]" />
-            <div className="font-medium font-sans text-[#D3DCF0] text-xs/4 tracking-[-0.005em]">
-              {chip.label}
-            </div>
-          </Part>
-        ))}
-      </div>
-
-      {/* Vertical rhythm is tuned so the whole column clears the 450px left under the hero —
-          the artboard's own spacing overflowed and clipped the pricing terms. */}
-      <div className="flex w-100.5 grow basis-[0%] flex-col bg-black px-5 pt-2 pb-4">
-        <Part className="flex gap-2.5" part="badges" revealed={revealed}>
-          <AwardBadge>
-            <div className="flex grow basis-[0%] flex-col items-center gap-1.25">
-              <AppleMark />
-              <div className="flex flex-wrap justify-center whitespace-pre-wrap text-center font-sans font-semibold text-[#E4E4E7] text-xs/4 tracking-[-0.01em]">
-                Editors'
-                <br />
-                Choice
-              </div>
-            </div>
-          </AwardBadge>
-          <AwardBadge>
-            <div className="flex grow basis-[0%] flex-col items-center gap-1.25">
-              <AppleMark />
-              <div className="flex flex-wrap justify-center whitespace-pre-wrap text-center font-sans font-semibold text-[#E4E4E7] text-xs/4 tracking-[-0.01em]">
-                App of
-                <br />
-                the Day
-              </div>
-            </div>
-          </AwardBadge>
-          <AwardBadge>
-            <div className="flex grow basis-[0%] flex-col items-center gap-0.5">
-              <div className="font-medium font-sans text-[#8F8F96] text-[10px]/3">80k Ratings</div>
-              <div className="font-sans font-semibold text-[#F4F4F5] text-xl/normal tracking-[-0.02em]">
-                4.9
-              </div>
-              <svg
-                aria-hidden="true"
-                height="11"
-                style={{ flexShrink: 0 }}
-                viewBox="0 0 62 11"
-                width="62"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                {[0, 13, 26, 39, 52].map((offset) => (
-                  <path
-                    d={`M${5.5 + offset} 0.5 L${6.9 + offset} 3.9 L${10.5 + offset} 4.2 L${7.8 + offset} 6.6 L${8.6 + offset} 10.2 L${5.5 + offset} 8.3 L${2.4 + offset} 10.2 L${3.2 + offset} 6.6 L${0.5 + offset} 4.2 L${4.1 + offset} 3.9 Z`}
-                    fill="#6F9DFF"
-                    key={offset}
-                  />
-                ))}
-              </svg>
-            </div>
-          </AwardBadge>
-        </Part>
-
-        <Part className="flex flex-col items-center pt-6" part="title" revealed={revealed}>
-          <div className="flex flex-wrap justify-center whitespace-pre-wrap text-center font-bold font-sans text-[#FAFAFA] text-[27px]/8.5 [letter-spacing:-0.025em]">
-            Lenscal Pro
-            <br />
-            7-Day Free Trial
-          </div>
-        </Part>
-
-        <Part
-          className="flex flex-col items-center gap-0.75 pt-3"
-          delay={120}
-          part="offer"
-          revealed={revealed}
-        >
-          <div className="font-sans text-[#A1A1AA] text-[15px]/5.5">
-            Subscribe to Pro for just $29.99/year for a
-          </div>
-          <div className="flex items-baseline">
-            <div className="font-sans text-[#A1A1AA] text-[15px]/5.5">limited time</div>
-            <div className="font-sans text-[#71717A] text-[15px]/5.5 [text-decoration:line-through_1px] [text-underline-position:from-font]">
-              ($49.99/year)
-            </div>
-            <div className="font-sans text-[#A1A1AA] text-[15px]/5.5">and unlock</div>
-          </div>
-          <div className="flex items-baseline gap-1.25">
-            <div className="font-sans text-[#A1A1AA] text-[15px]/5.5">unlimited scans.</div>
-            <div className="font-medium font-sans text-[#6F9DFF] text-[15px]/5.5">View More &gt;</div>
-          </div>
-        </Part>
-
-        <Part className="flex items-center gap-3.5 pt-5" part="toggle" revealed={revealed}>
-          <div className="flex h-7.75 w-12.75 shrink-0 items-center rounded-[999px] border border-[#2C3450] border-solid bg-[#0F121C] p-0.5">
-            <div className="size-6.25 shrink-0 rounded-[999px] bg-[#FAFAFA] [box-shadow:#00000080_0px_1px_3px]" />
-          </div>
-          <div className="font-sans text-[#E4E4E7] text-[15px]/5">
-            Remind me before free trial ends
-          </div>
-        </Part>
-
-        <Part className="flex pt-4" delay={120} part="cta" revealed={revealed}>
-          <div className="flex h-14 grow basis-[0%] items-center justify-center rounded-[999px] [background-color:var(--color-brand-primary)]">
-            <div className="font-sans font-semibold text-[17px]/5.5 [color:var(--color-primary-foreground)] tracking-[-0.01em]">
-              Try It Free
-            </div>
-          </div>
-        </Part>
-
-        <Part className="flex items-start gap-1.75 pt-3.5" part="finePrint" revealed={revealed}>
-          <div className="size-3.25 shrink-0 rounded-[999px] border border-[#4B5570] border-solid" />
-          <div className="flex grow basis-[0%] flex-col gap-0.5">
-            <div className="flex flex-wrap items-baseline">
-              <div className="font-sans text-[#8B8B93] text-[11px]/3.75">
-                I have read and accept
-              </div>
-              <div className="font-sans text-[#C4C4CB] text-[11px]/3.75 [text-decoration:underline_1px] [text-underline-position:from-font]">
-                Pricing Terms.
-              </div>
-              <div className="font-sans text-[#8B8B93] text-[11px]/3.75">
-                Auto renew plans, cancel
-              </div>
-            </div>
-            <div className="font-sans text-[#8B8B93] text-[11px]/3.75">
-              anytime. Auto renew at $29.99 / Y after the trial, cancel anytime.
-            </div>
-          </div>
-        </Part>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/paywall-build/paywall-build.tsx b/apps/www/src/features/www/landing/paywall-build/paywall-build.tsx
deleted file mode 100644
index fb21159e0..000000000
--- a/apps/www/src/features/www/landing/paywall-build/paywall-build.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client";
-
-import { useInView } from "motion/react";
-import { createContext, type ReactNode, useContext, useRef } from "react";
-
-import { AgentTranscript } from "./agent-transcript";
-import { LenscalPaywall, PAYWALL_HEIGHT, PAYWALL_WIDTH } from "./lenscal-paywall";
-import { type TranscriptPlayback, useTranscriptPlayback } from "./use-transcript-playback";
-import { WorkingIndicator } from "./working-indicator";
-
-/**
- * How far down the paywall is displayed inside the designer mock. Matches the 242×525
- * slot the exported artboard occupied, so the surrounding chrome stays pixel-faithful.
- */
-const PAYWALL_SCALE = 0.6015;
-
-const PlaybackContext = createContext<TranscriptPlayback | null>(null);
-
-/**
- * Hosts the shared Claude Code session driving both halves of the paywalls illustration:
- * the full-width terminal and the designer canvas the paywall assembles on.
- */
-export function PaywallBuildProvider({
-  className,
-  children,
-}: {
-  className?: string;
-  children: ReactNode;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const started = useInView(ref, { amount: 0.35, once: true });
-  // The session would otherwise loop (timers, typing interval, pixi ticker) for the rest of the
-  // page's life once seen — pausing offscreen costs nothing visually because the loop replays
-  // from the prompt anyway.
-  const visible = useInView(ref);
-  const playback = useTranscriptPlayback(started && visible);
-
-  return (
-    <div className={className} ref={ref}>
-      <PlaybackContext.Provider value={playback}>{children}</PlaybackContext.Provider>
-    </div>
-  );
-}
-
-function usePlayback(): TranscriptPlayback {
-  const playback = useContext(PlaybackContext);
-  if (!playback) {
-    throw new Error("PaywallBuild pieces must render inside PaywallBuildProvider");
-  }
-  return playback;
-}
-
-/**
- * The Claude Code terminal rendered at natural size above the designer mock. Only shown
- * below xl — scaling the terminal down with the rest of the mock made it unreadable, so
- * small screens get it full width while desktop keeps it floating on the canvas.
- */
-export function PaywallBuildTerminal() {
-  return (
-    <div className="xl:hidden">
-      <AgentTranscript playback={usePlayback()} />
-    </div>
-  );
-}
-
-/**
- * Overlay for the designer mock: the paywall assembling itself on the canvas as each MCP
- * call comes back. On xl the terminal floats over the canvas as in the original design and
- * the phone keeps its artboard position. Below xl the terminal lives above the mock, the
- * mock's side panels and tab bar are trimmed, and the phone (with its working-indicator
- * effect) is bumped up 25% and centered on the now-free canvas — `top-35` leaves an even
- * 48px of artboard padding under the toolbar and above the window's bottom edge.
- */
-export function PaywallBuildCanvas() {
-  const playback = usePlayback();
-
-  return (
-    <div className="absolute inset-0">
-      <div className="absolute top-48.25 left-15.75 hidden h-129.25 w-99.75 xl:block">
-        <AgentTranscript playback={playback} />
-      </div>
-
-      <div
-        className="absolute top-35 left-1/2 origin-top -translate-x-1/2 scale-125 xl:top-37.75 xl:left-140.75 xl:translate-x-0 xl:scale-100"
-        style={{ height: PAYWALL_HEIGHT * PAYWALL_SCALE, width: PAYWALL_WIDTH * PAYWALL_SCALE }}
-      >
-        <div
-          className="origin-top-left"
-          style={{ transform: `scale(${PAYWALL_SCALE})`, width: PAYWALL_WIDTH }}
-        >
-          <LenscalPaywall revealed={playback.revealed} />
-        </div>
-        <WorkingIndicator
-          active={playback.working}
-          height={PAYWALL_HEIGHT}
-          scale={PAYWALL_SCALE}
-          width={PAYWALL_WIDTH}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/paywall-build/transcript.ts b/apps/www/src/features/www/landing/paywall-build/transcript.ts
deleted file mode 100644
index 0c40a68c7..000000000
--- a/apps/www/src/features/www/landing/paywall-build/transcript.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * One fragment of the Lenscal paywall, revealed when the `edit_paywall` call that
- * inserts it comes back. Ordered the way the agent builds the screen.
- */
-export type PaywallPart =
-  | "backdrop"
-  | "statusBar"
-  | "rings"
-  | "appIcon"
-  | "chips"
-  | "badges"
-  | "title"
-  | "offer"
-  | "toggle"
-  | "cta"
-  | "finePrint";
-
-/** A single Voidhash MCP call as it appears in the agent transcript. */
-export interface TranscriptStep {
-  /** MCP tool name, as advertised by `apps/backend/src/mcp/tool-manifest.ts`. */
-  readonly tool: string;
-  /** Argument lines shown under the call header. */
-  readonly args: readonly string[];
-  /** The `⎿` result line shown once the call returns. */
-  readonly result: string;
-  /** Paywall fragments that appear on the canvas when this call returns. */
-  readonly reveals?: readonly PaywallPart[];
-  /** How long the call spends in flight before its result lands. */
-  readonly runningMs: number;
-}
-
-export const AGENT_PROMPT =
-  "Build the Lenscal Pro paywall: dark scan-ring hero, App Store awards, 7-day free trial at $29.99/year.";
-
-export const AGENT_INTRO = "I'll compose it on the live document, then preview before publishing.";
-
-export const AGENT_OUTRO = "Lenscal Pro is live at 402×874 — trial toggle wired, pricing terms in place.";
-
-export const TRANSCRIPT_STEPS: readonly TranscriptStep[] = [
-  {
-    args: [],
-    result: "3 paywalls · lenscal-pro → pw_9f2a41",
-    runningMs: 900,
-    tool: "list_paywalls",
-  },
-  {
-    args: ['paywallId: "pw_9f2a41"'],
-    result: "editSessionId edit_7c31 · baseline v0",
-    runningMs: 900,
-    tool: "begin_paywall_edit",
-  },
-  {
-    args: ['editSessionId: "edit_7c31"', "depth: 3"],
-    result: 'screen "Paywall" 402×874 · 0 children',
-    runningMs: 850,
-    tool: "get_paywall",
-  },
-  {
-    args: ['editSessionId: "edit_7c31"'],
-    result: "9 builtin · 4 catalog · 0 local",
-    runningMs: 850,
-    tool: "get_components",
-  },
-  {
-    args: ["insert · column + radial backdrop, status bar"],
-    result: "ok · 6 nodes minted · v1",
-    reveals: ["backdrop", "statusBar"],
-    runningMs: 1500,
-    tool: "edit_paywall",
-  },
-  {
-    args: ["insert · scan rings ×8, app icon"],
-    result: "ok · 11 nodes minted · v2",
-    reveals: ["rings", "appIcon"],
-    runningMs: 1500,
-    tool: "edit_paywall",
-  },
-  {
-    args: ["insert · detection chips ×2"],
-    result: "ok · 6 nodes minted · v3",
-    reveals: ["chips"],
-    runningMs: 1250,
-    tool: "edit_paywall",
-  },
-  {
-    args: ["insert · award badges ×3"],
-    result: "ok · 9 nodes minted · v4",
-    reveals: ["badges"],
-    runningMs: 1400,
-    tool: "edit_paywall",
-  },
-  {
-    args: ["insert · headline, offer copy"],
-    result: "ok · 8 nodes minted · v5",
-    reveals: ["title", "offer"],
-    runningMs: 1400,
-    tool: "edit_paywall",
-  },
-  {
-    args: ['insert · reminder toggle, "Try It Free"'],
-    result: "ok · 7 nodes minted · v6",
-    reveals: ["toggle", "cta"],
-    runningMs: 1400,
-    tool: "edit_paywall",
-  },
-  {
-    args: ["insert · pricing terms"],
-    result: "ok · 5 nodes minted · v7",
-    reveals: ["finePrint"],
-    runningMs: 1200,
-    tool: "edit_paywall",
-  },
-  {
-    args: ['editSessionId: "edit_7c31"'],
-    result: "PNG 402×874 · sig 4b91c0",
-    runningMs: 1900,
-    tool: "get_paywall_preview",
-  },
-  {
-    args: ['verdict: "matches the brief"', "unresolvedIssues: []"],
-    result: "session closed · published v7",
-    runningMs: 1100,
-    tool: "finish_paywall_edit",
-  },
-];
diff --git a/apps/www/src/features/www/landing/paywall-build/use-transcript-playback.ts b/apps/www/src/features/www/landing/paywall-build/use-transcript-playback.ts
deleted file mode 100644
index a6becf831..000000000
--- a/apps/www/src/features/www/landing/paywall-build/use-transcript-playback.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import { useReducedMotion } from "motion/react";
-import { useEffect, useMemo, useState } from "react";
-
-import { AGENT_PROMPT, type PaywallPart, TRANSCRIPT_STEPS } from "./transcript";
-
-/** Milliseconds each character of the user prompt takes to type. */
-export const PROMPT_CHAR_MS = 22;
-
-/** Beat between the prompt landing and the first tool call going out. */
-const INTRO_MS = 900;
-
-/** Beat between one call's result and the next call going out. */
-const SETTLE_GAP_MS = 240;
-
-/** How long the finished paywall is held before the session replays. */
-const LOOP_HOLD_MS = 5000;
-
-type Phase = "idle" | "prompt" | "running" | "settled" | "done";
-
-export interface TranscriptPlayback {
-  /** Index of the call currently on screen; `-1` while the prompt is still typing. */
-  readonly index: number;
-  readonly phase: Phase;
-  /** Paywall fragments whose insert has already come back. */
-  readonly revealed: ReadonlySet<PaywallPart>;
-  /** Whether the agent holds an open edit session — drives the canvas working indicator. */
-  readonly working: boolean;
-}
-
-const ALL_PARTS: ReadonlySet<PaywallPart> = new Set(
-  TRANSCRIPT_STEPS.flatMap((step) => step.reveals ?? []),
-);
-
-const FINISHED: TranscriptPlayback = {
-  index: TRANSCRIPT_STEPS.length - 1,
-  phase: "done",
-  revealed: ALL_PARTS,
-  working: false,
-};
-
-/**
- * Loops the scripted agent session once `active` turns true: the prompt types out, each
- * Voidhash MCP call goes out, hangs for its `runningMs`, and returns; the finished paywall
- * is held for a beat, then the whole session starts over. Turning `active` off rewinds to
- * the blank state, so a paused illustration schedules no timers and drives no animation.
- *
- * Under `prefers-reduced-motion` the session is presented already finished and never loops,
- * so the transcript and the paywall still read as a complete story without any movement.
- */
-export function useTranscriptPlayback(active: boolean): TranscriptPlayback {
-  const prefersReducedMotion = useReducedMotion();
-  const [cursor, setCursor] = useState<{ index: number; phase: Phase }>({
-    index: -1,
-    phase: "idle",
-  });
-
-  useEffect(() => {
-    if (!active) {
-      setCursor((current) =>
-        current.phase === "idle" ? current : { index: -1, phase: "idle" },
-      );
-      return;
-    }
-
-    if (prefersReducedMotion) {
-      setCursor({ index: FINISHED.index, phase: "done" });
-      return;
-    }
-
-    let timer: ReturnType<typeof setTimeout>;
-
-    const runStep = (index: number) => {
-      const step = TRANSCRIPT_STEPS[index];
-      if (!step) {
-        setCursor({ index: TRANSCRIPT_STEPS.length - 1, phase: "done" });
-        timer = setTimeout(startSession, LOOP_HOLD_MS);
-        return;
-      }
-
-      setCursor({ index, phase: "running" });
-      timer = setTimeout(() => {
-        setCursor({ index, phase: "settled" });
-        timer = setTimeout(() => runStep(index + 1), SETTLE_GAP_MS);
-      }, step.runningMs);
-    };
-
-    // Named so the last step can schedule the next run; the transcript and every
-    // revealed fragment fall back to their empty state while the prompt retypes.
-    function startSession() {
-      setCursor({ index: -1, phase: "prompt" });
-      timer = setTimeout(() => runStep(0), AGENT_PROMPT.length * PROMPT_CHAR_MS + INTRO_MS);
-    }
-
-    startSession();
-
-    return () => clearTimeout(timer);
-  }, [active, prefersReducedMotion]);
-
-  return useMemo(() => {
-    if (cursor.phase === "idle") {
-      return { index: -1, phase: "idle", revealed: new Set<PaywallPart>(), working: false };
-    }
-    if (cursor.phase === "done") {
-      return FINISHED;
-    }
-
-    // An insert only shows on the canvas once its call has come back.
-    const landed = cursor.phase === "settled" ? cursor.index : cursor.index - 1;
-    return {
-      index: cursor.index,
-      phase: cursor.phase,
-      revealed: new Set(TRANSCRIPT_STEPS.slice(0, landed + 1).flatMap((step) => step.reveals ?? [])),
-      working: cursor.phase !== "prompt",
-    };
-  }, [cursor]);
-}
diff --git a/apps/www/src/features/www/landing/paywall-build/working-indicator.tsx b/apps/www/src/features/www/landing/paywall-build/working-indicator.tsx
deleted file mode 100644
index 7d7d100ed..000000000
--- a/apps/www/src/features/www/landing/paywall-build/working-indicator.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-
-import {
-  advanceWorkingIndicator,
-  createWorkingIndicatorAnimation,
-  forEachWorkingIndicatorDot,
-  getWorkingIndicatorDotRadius,
-  setWorkingIndicatorActive,
-  syncWorkingIndicatorScreens,
-} from "@/features/studio/paywalls/designer/canvas/overlay/working-indicator-animation";
-
-const BLUE_RIBBON_600 = 0x06_73_ff;
-
-/** Room around the screen for the three dot rows that sit outside it. */
-const PADDING = 44;
-
-interface WorkingIndicatorProps {
-  /** Whether the agent is mid-session; drives the entry and exit sweeps. */
-  active: boolean;
-  /** Screen size in paywall coordinates. */
-  height: number;
-  width: number;
-  /** Factor the paywall is displayed at, so dot size tracks the canvas zoom. */
-  scale: number;
-}
-
-/**
- * The designer's "agent is working" indicator, rendered over the landing page's paywall.
- *
- * Shares the exact animation module the real canvas overlay uses, so the marketing
- * illustration and the product stay in step. Pixi is imported on demand to keep it out
- * of the marketing bundle.
- */
-export function WorkingIndicator({ active, height, scale, width }: WorkingIndicatorProps) {
-  const hostRef = useRef<HTMLDivElement>(null);
-  const activeRef = useRef(active);
-  const startRef = useRef<(() => void) | null>(null);
-
-  activeRef.current = active;
-
-  useEffect(() => {
-    const host = hostRef.current;
-    if (!host) {
-      return;
-    }
-
-    let disposed = false;
-    let dispose: (() => void) | null = null;
-
-    const initialize = async () => {
-      const { Application, Graphics } = await import("pixi.js");
-      if (disposed) {
-        return;
-      }
-
-      const app = new Application();
-      await app.init({
-        antialias: true,
-        autoDensity: true,
-        backgroundAlpha: 0,
-        height: height * scale + PADDING * 2,
-        resolution: window.devicePixelRatio || 1,
-        width: width * scale + PADDING * 2,
-      });
-
-      if (disposed) {
-        app.destroy(true, { children: true });
-        return;
-      }
-
-      app.canvas.style.display = "block";
-      host.append(app.canvas);
-
-      const graphics = new Graphics();
-      graphics.eventMode = "none";
-      app.stage.addChild(graphics);
-
-      const animation = createWorkingIndicatorAnimation({ scale, x: PADDING, y: PADDING });
-      syncWorkingIndicatorScreens(animation, [{ height, id: "paywall", width, x: 0, y: 0 }]);
-
-      const tick = (ticker: { deltaMS: number }) => {
-        const now = performance.now();
-        setWorkingIndicatorActive(animation, activeRef.current, now);
-        advanceWorkingIndicator(animation, now, ticker.deltaMS);
-
-        graphics.clear();
-        forEachWorkingIndicatorDot(animation, (dot, viewport) => {
-          if (dot.alpha <= 0.001) {
-            return;
-          }
-
-          const radius = getWorkingIndicatorDotRadius(dot, viewport.scale);
-          graphics.circle(dot.x, dot.y, radius);
-          graphics.fill({ alpha: dot.alpha * 0.24, color: 0xff_ff_ff });
-          if (dot.proximity > 0.001) {
-            graphics.circle(dot.x, dot.y, radius);
-            graphics.fill({ alpha: dot.alpha * dot.proximity * 0.96, color: BLUE_RIBBON_600 });
-          }
-        });
-
-        if (animation.phase === "idle" && !activeRef.current) {
-          app.stop();
-          app.render();
-        }
-      };
-
-      app.ticker.add(tick);
-      startRef.current = () => app.start();
-      if (activeRef.current) {
-        app.start();
-      } else {
-        app.stop();
-        app.render();
-      }
-
-      dispose = () => {
-        startRef.current = null;
-        app.ticker.remove(tick);
-        app.destroy(true, { children: true });
-      };
-    };
-
-    void initialize();
-
-    return () => {
-      disposed = true;
-      dispose?.();
-    };
-  }, [height, scale, width]);
-
-  useEffect(() => {
-    if (active) {
-      startRef.current?.();
-    }
-  }, [active]);
-
-  return (
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute"
-      ref={hostRef}
-      style={{ left: -PADDING, top: -PADDING }}
-    />
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/agent-compatibility.tsx b/apps/www/src/features/www/landing/sections/agent-compatibility.tsx
deleted file mode 100644
index 6906d5e68..000000000
--- a/apps/www/src/features/www/landing/sections/agent-compatibility.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from "@voidhash/ui";
-
-import antigravityIcon from "../assets/agent-icons/antigravity.png";
-import claudeCodeIcon from "../assets/agent-icons/claude-code.png";
-import codexIcon from "../assets/agent-icons/codex.png";
-import cursorIcon from "../assets/agent-icons/cursor.png";
-import openCodeIcon from "../assets/agent-icons/opencode.png";
-
-const agents = [
-  { name: "Claude Code", src: claudeCodeIcon },
-  { name: "Codex", src: codexIcon },
-  { name: "Cursor", src: cursorIcon },
-  { name: "Antigravity", src: antigravityIcon },
-  { name: "OpenCode", src: openCodeIcon },
-] as const;
-
-/** Renders the AI agent compatibility band below the paywall designer. */
-export function LandingAgentCompatibility() {
-  return (
-    <div className="flex min-h-20 items-center gap-3 border-zinc-800 border-t px-6 py-3 md:h-35.25 md:gap-4 md:px-12 md:py-0 xl:px-32">
-      <TooltipProvider>
-        <ul aria-label="Supported AI agent examples" className="flex shrink-0 items-start">
-          {agents.map((agent, index) => (
-            <li
-              className={index === 0 ? undefined : "-ml-[17px] md:-ml-[27px]"}
-              key={agent.name}
-            >
-              <TooltipRoot>
-                <TooltipTrigger asChild>
-                  <span className="block size-10 shrink-0 -rotate-[10deg] md:size-16" tabIndex={0}>
-                    <img
-                      alt={agent.name}
-                      className="size-full max-w-none object-contain"
-                      height={64}
-                      src={agent.src}
-                      width={64}
-                    />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent
-                  className="border-zinc-800 bg-zinc-900 text-zinc-50"
-                  side="top"
-                  sideOffset={8}
-                >
-                  {agent.name}
-                </TooltipContent>
-              </TooltipRoot>
-            </li>
-          ))}
-        </ul>
-      </TooltipProvider>
-      <p className="min-w-0 max-w-[421px] flex-1 font-sans text-xs/4 text-zinc-400 md:w-[421px] md:flex-none md:text-base/5">
-        Works with any AI agent or model. You can even use your Claude Code or Codex subscription.
-      </p>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/analytics.tsx b/apps/www/src/features/www/landing/sections/analytics.tsx
deleted file mode 100644
index 0de7f7e95..000000000
--- a/apps/www/src/features/www/landing/sections/analytics.tsx
+++ /dev/null
@@ -1,531 +0,0 @@
-import { ChartWipe, CountUp, Illustration } from "../motion";
-import { LandingSection, ScaledMock, SectionHeader } from "../shared";
-
-/** Renders the analytics product section. */
-export function LandingAnalytics() {
-  return (
-    <LandingSection id="analytics">
-      <div className="flex flex-col items-start justify-center gap-12 px-6 py-16 md:gap-23 md:px-12 md:py-24 xl:p-32">
-        <SectionHeader
-          description="See how people move from download to trial to paying customer. Find what is working, where people drop off and where your next opportunity is."
-          eyebrow="Analytics"
-          title="Understand what drives your revenue."
-        />
-        <div className="flex flex-col items-start gap-10 self-stretch xl:flex-row xl:gap-14">
-          <Illustration className="flex flex-col w-full max-w-98 shrink-0 rounded-xl overflow-clip bg-origin-border border border-solid border-[#FFFFFF12]" style={{ backgroundImage: 'radial-gradient(ellipse 156.12% 100% at 100% -0.8599999999999941% in oklab, var(--color-zinc-900) 0%, var(--color-zinc-950) 100%)' }}>
-            <div className="flex items-center justify-between self-stretch pt-5.5 pb-4.75 px-5.5 border-b border-b-solid border-b-[#FFFFFF0F]">
-              <div className="tracking-[-0.02em] font-sans font-medium text-[#FFFFFFED] text-base/tight">
-                Metrics
-              </div>
-            </div>
-            <div className="flex flex-col self-stretch pt-2.5 pb-4">
-              <div className="flex items-center self-stretch py-2.75 px-5.5 gap-3">
-                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <circle cx="9" cy="9" r="8.25" fill="rgb(6 115 255 / 18%)" stroke="rgb(6 115 255 / 55%)" />
-                  <path d="M5.2 11.2 L8 8.2 L10 10 L12.9 6.6" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFED] text-[15px]/5">
-                  Revenue
-                </div>
-                <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF80] text-xs/tight">
-                  <CountUp value="$248,190" />
-                </div>
-              </div>
-              <div className="flex flex-col self-stretch pl-8">
-                <div className="flex flex-col self-stretch pl-3.5 border-l border-l-solid border-l-[#FFFFFF17]">
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <path d="M12 7a5 5 0 1 1-1.6-3.7" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.3" strokeLinecap="round" />
-                      <path d="M12.2 1.6v2.6h-2.6" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                    </svg>
-                    <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFE0] text-[15px]/5">
-                      Subscriptions
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.05} value="$214,730" />
-                    </div>
-                  </div>
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <rect x="1.4" y="3.4" width="11.2" height="8" rx="1.6" fill="none" stroke="var(--color-amber-500)" strokeWidth="1.3" />
-                      <path d="M1.4 6.4h11.2" fill="none" stroke="var(--color-amber-500)" strokeWidth="1.3" />
-                    </svg>
-                    <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFE0] text-[15px]/5">
-                      One-time purchases
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.1} value="$35,590" />
-                    </div>
-                  </div>
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <path d="M2 7a5 5 0 1 0 1.6-3.7" fill="none" stroke="var(--color-radical-red-400)" strokeWidth="1.3" strokeLinecap="round" />
-                      <path d="M1.8 1.6v2.6h2.6" fill="none" stroke="var(--color-radical-red-400)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                    </svg>
-                    <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFE0] text-[15px]/5">
-                      Refunds
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.15} value="−$2,130" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="self-stretch h-px shrink-0 bg-[#FFFFFF0F]" />
-            <div className="flex flex-col self-stretch pt-2.5 pb-4">
-              <div className="flex items-center self-stretch py-2.75 px-5.5 gap-3">
-                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <circle cx="9" cy="9" r="8.25" fill="rgb(139 92 246 / 18%)" stroke="rgb(139 92 246 / 50%)" />
-                  <circle cx="9" cy="7.1" r="2" fill="none" stroke="var(--color-electric-violet-300)" strokeWidth="1.3" />
-                  <path d="M5.3 12.9c0-1.7 1.7-2.7 3.7-2.7s3.7 1 3.7 2.7" fill="none" stroke="var(--color-electric-violet-300)" strokeWidth="1.3" strokeLinecap="round" />
-                </svg>
-                <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFED] text-[15px]/5">
-                  Subscribers
-                </div>
-                <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF80] text-xs/tight">
-                  <CountUp delay={0.15} value="41,208" />
-                </div>
-              </div>
-              <div className="flex flex-col self-stretch pl-8">
-                <div className="flex flex-col self-stretch pl-3.5 border-l border-l-solid border-l-[#FFFFFF17]">
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <path d="M7 1.8v7.4" fill="none" stroke="var(--color-pistachio-600)" strokeWidth="1.3" strokeLinecap="round" />
-                      <path d="M4.3 6.6 7 9.3l2.7-2.7" fill="none" stroke="var(--color-pistachio-600)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                      <path d="M2 11.9h10" fill="none" stroke="var(--color-pistachio-600)" strokeWidth="1.3" strokeLinecap="round" />
-                    </svg>
-                    <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFE0] text-[15px]/5">
-                      Installs
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.2} value="412,806" />
-                    </div>
-                  </div>
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <path d="M7 1.6 8.5 5l3.6.4-2.7 2.5.8 3.5L7 9.7l-3.2 1.7.8-3.5L1.9 5.4 5.5 5 7 1.6Z" fill="none" stroke="var(--color-amber-500)" strokeWidth="1.2" strokeLinejoin="round" />
-                    </svg>
-                    <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFE0] text-[15px]/5">
-                      Trial → paid
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.25} value="38.2%" />
-                    </div>
-                  </div>
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <path d="M2.2 4.6 7 9.4l4.8-4.8" fill="none" stroke="var(--color-radical-red-400)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                      <path d="M11.8 8.2V4.6H8.2" fill="none" stroke="var(--color-radical-red-400)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                    </svg>
-                    <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFE0] text-[15px]/5">
-                      Churn
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.3} value="4.6%" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="self-stretch h-px shrink-0 bg-[#FFFFFF0F]" />
-            <div className="flex flex-col self-stretch pt-2.5 pb-4">
-              <div className="flex items-center self-stretch py-2.75 px-5.5 gap-3">
-                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <circle cx="9" cy="9" r="8.25" fill="rgb(232 86 203 / 16%)" stroke="rgb(232 86 203 / 45%)" />
-                  <path d="M4.6 9.4h2.1l1.4-3.2 1.8 6 1.3-2.8h2.2" fill="none" stroke="var(--color-fuchsia-pink-300)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <div className="grow tracking-[-0.015em] w-max font-sans text-[#FFFFFFED] text-[15px]/5">
-                  Events
-                </div>
-                <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF80] text-xs/tight">
-                  <CountUp delay={0.35} value="6,342,428" />
-                </div>
-              </div>
-              <div className="flex flex-col self-stretch pl-8">
-                <div className="flex flex-col self-stretch pl-3.5 border-l border-l-solid border-l-[#FFFFFF17]">
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <rect x="3.6" y="1.6" width="6.8" height="10.8" rx="1.6" fill="none" stroke="var(--color-electric-violet-300)" strokeWidth="1.3" />
-                      <path d="M6.2 10.6h1.6" fill="none" stroke="var(--color-electric-violet-300)" strokeWidth="1.3" strokeLinecap="round" />
-                    </svg>
-                    <div className="grow tracking-[0.005em] w-max font-mono text-[#FFFFFFCC] text-[13px]/5">
-                      app_open
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.4} value="6,204,880" />
-                    </div>
-                  </div>
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <path d="M1.2 7S3.3 3.2 7 3.2 12.8 7 12.8 7 10.7 10.8 7 10.8 1.2 7 1.2 7Z" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.3" strokeLinejoin="round" />
-                      <circle cx="7" cy="7" r="1.6" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.3" />
-                    </svg>
-                    <div className="grow tracking-[0.005em] w-max font-mono text-[#FFFFFFCC] text-[13px]/5">
-                      paywall_view
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.45} value="96,340" />
-                    </div>
-                  </div>
-                  <div className="flex items-center self-stretch pr-5.5 gap-2.5 py-2.25">
-                    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                      <path d="M2 3.2h1.9l1.5 6.6h5.2l1.4-4.7H4.4" fill="none" stroke="var(--color-pistachio-600)" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                      <circle cx="6.2" cy="11.6" r="0.9" fill="var(--color-pistachio-600)" />
-                      <circle cx="10.2" cy="11.6" r="0.9" fill="var(--color-pistachio-600)" />
-                    </svg>
-                    <div className="grow tracking-[0.005em] w-max font-mono text-[#FFFFFFCC] text-[13px]/5">
-                      purchase
-                    </div>
-                    <div className="shrink-0 w-22.5 text-right tracking-[0.01em] font-mono flex justify-end flex-wrap text-[#FFFFFF73] text-xs/tight">
-                      <CountUp delay={0.5} value="41,208" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Illustration>
-          <ScaledMock className="min-w-0 flex-1" designWidth={952}>
-          <Illustration className="flex flex-col self-stretch relative">
-            <svg aria-hidden="true" width="952" height="664" viewBox="0 0 952 664" xmlns="http://www.w3.org/2000/svg" style={{ position: 'absolute', left: '0px', top: '0px' }}>
-              <defs><linearGradient id="_cbl8kr0" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.008"/><stop offset="16%" stopColor="#FFFFFF" stopOpacity="0.038"/><stop offset="88%" stopColor="#FFFFFF" stopOpacity="0.03"/><stop offset="100%" stopColor="#FFFFFF" stopOpacity="0"/></linearGradient><linearGradient id="_cbl8kr1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.02"/><stop offset="16%" stopColor="#FFFFFF" stopOpacity="0.085"/><stop offset="88%" stopColor="#FFFFFF" stopOpacity="0.07"/><stop offset="100%" stopColor="#FFFFFF" stopOpacity="0"/></linearGradient><linearGradient id="_cbl8kr2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#FFFFFF" stopOpacity="0"/><stop offset="18%" stopColor="#FFFFFF" stopOpacity="0.115"/><stop offset="88%" stopColor="#FFFFFF" stopOpacity="0.085"/><stop offset="100%" stopColor="#FFFFFF" stopOpacity="0"/></linearGradient></defs>
-              <rect x="816" y="0" width="136" height="664" fill="rgb(255 255 255 / 1.4%)" />
-              <path d="M68 0V664 M204 0V664 M340 0V664 M476 0V664 M612 0V664 M748 0V664 M884 0V664" fill="none" stroke="url(#_cbl8kr0)" strokeDasharray="2 6" />
-              <path d="M136 0V664 M272 0V664 M408 0V664 M544 0V664 M680 0V664" fill="none" stroke="url(#_cbl8kr1)" strokeDasharray="2 6" />
-              <path d="M816 0V664" fill="none" stroke="url(#_cbl8kr2)" />
-            </svg>
-            <div className="flex self-stretch pb-6 relative">
-              <div className="flex flex-col w-34 shrink-0 gap-2.25">
-                <div className="w-max font-sans font-medium text-[#FFFFFF80] text-xs/4">
-                  Feb
-                </div>
-                <div className="flex">
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF1F] text-[11px]/3.25">
-                    2
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF1F] text-[11px]/3.25">
-                    9
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF1F] text-[11px]/3.25">
-                    16
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF1F] text-[11px]/3.25">
-                    23
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col w-34 shrink-0 gap-2.25">
-                <div className="w-max font-sans font-medium text-[#FFFFFF80] text-xs/4">
-                  Mar
-                </div>
-                <div className="flex">
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    2
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    9
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    16
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    23
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col w-34 shrink-0 gap-2.25">
-                <div className="w-max font-sans font-medium text-[#FFFFFF80] text-xs/4">
-                  Apr
-                </div>
-                <div className="flex">
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    6
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    13
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    20
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    27
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col w-34 shrink-0 gap-2.25">
-                <div className="w-max font-sans font-medium text-[#FFFFFF80] text-xs/4">
-                  May
-                </div>
-                <div className="flex">
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    4
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    11
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    18
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    25
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col w-34 shrink-0 gap-2.25">
-                <div className="w-max font-sans font-medium text-[#FFFFFF80] text-xs/4">
-                  Jun
-                </div>
-                <div className="flex">
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    1
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    8
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    15
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    22
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col w-34 shrink-0 gap-2.25">
-                <div className="w-max font-sans font-medium text-[#FFFFFF80] text-xs/4">
-                  Jul
-                </div>
-                <div className="flex">
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    6
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    13
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    20
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF3D] text-[11px]/3.25">
-                    27
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col w-34 shrink-0 gap-2.25">
-                <div className="w-max font-sans font-medium text-[#FFFFFF80] text-xs/4">
-                  Aug
-                </div>
-                <div className="flex">
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF21] text-[11px]/3.25">
-                    3
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF21] text-[11px]/3.25">
-                    10
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF21] text-[11px]/3.25">
-                    17
-                  </div>
-                  <div className="w-8.5 shrink-0 tracking-[0.04em] font-mono text-[#FFFFFF21] text-[11px]/3.25">
-                    24
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex items-end justify-between self-stretch pb-6.5 relative">
-              <div className="flex flex-col gap-3">
-                <div className="tracking-[-0.01em] w-max font-sans font-medium text-[#FFFFFFB2] text-[13px]/4">
-                  Monthly recurring revenue
-                </div>
-                <div className="flex items-end gap-3.5">
-                  <div className="tracking-[-0.04em] w-max shrink-0 font-sans font-semibold text-zinc-300 text-[46px]/11.5">
-                    <CountUp value="$48,190" />
-                  </div>
-                  <div className="pb-1.25">
-                    <div className="tracking-[-0.01em] w-max font-sans font-medium [color:var(--color-pistachio-600)] text-[13px]/4">
-                      <CountUp delay={0.15} value="+12.4%" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <ChartWipe className="relative shrink-0">
-            <svg aria-hidden="true" width="952" height="220" viewBox="0 0 952 220" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
-              <defs><linearGradient id="_7gznpr0" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="var(--blue-ribbon-600)" stopOpacity="0.2"/><stop offset="72%" stopColor="var(--blue-ribbon-600)" stopOpacity="0.02"/><stop offset="100%" stopColor="var(--blue-ribbon-600)" stopOpacity="0"/></linearGradient><linearGradient id="_7gznpr1" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="var(--blue-ribbon-600)" stopOpacity="0"/><stop offset="14%" stopColor="var(--blue-ribbon-600)"/><stop offset="100%" stopColor="var(--blue-ribbon-600)"/></linearGradient><linearGradient id="_7gznpr2" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#FFFFFF" stopOpacity="0"/><stop offset="16%" stopColor="#FFFFFF" stopOpacity="0.22"/><stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.22"/></linearGradient></defs>
-              <path d="M0 188 L68 180 L136 184 L204 166 L272 158 L340 164 L408 142 L476 130 L544 136 L612 112 L680 96 L748 100 L816 66 L816 220 L0 220 Z" fill="url(#_7gznpr0)" />
-              <path d="M0 206 L68 202 L136 205 L204 196 L272 192 L340 195 L408 186 L476 180 L544 183 L612 174 L680 168 L748 170 L816 158" fill="none" stroke="url(#_7gznpr2)" strokeWidth="1.3" strokeLinecap="round" strokeDasharray="3 4" />
-              <path d="M0 188 L68 180 L136 184 L204 166 L272 158 L340 164 L408 142 L476 130 L544 136 L612 112 L680 96 L748 100 L816 66" fill="none" stroke="url(#_7gznpr1)" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
-              <path d="M816 66 L884 52 L952 36" fill="none" stroke="#0673FF6B" strokeWidth="1.5" strokeLinecap="round" strokeDasharray="4 5" />
-              <path d="M816 59.5 L822.5 66 L816 72.5 L809.5 66 Z" fill="var(--zinc-950)" stroke="var(--blue-ribbon-600)" strokeWidth="1.3" />
-            </svg>
-            </ChartWipe>
-            <div className="flex items-center justify-between self-stretch pt-4 relative">
-              <div className="flex items-center gap-5.5">
-                <div className="flex items-center gap-2">
-                  <div className="w-1.75 h-1.75 shrink-0 rounded-[999px] [background-color:var(--color-blue-ribbon-500)]" />
-                  <div className="w-max shrink-0 font-sans text-[#FFFFFF8A] text-xs/4">
-                    Subscription revenue
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <svg aria-hidden="true" width="14" height="7" viewBox="0 0 14 7" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                    <path d="M0 3.5h14" fill="none" stroke="rgb(255 255 255 / 26%)" strokeWidth="1.4" strokeDasharray="3 3" />
-                  </svg>
-                  <div className="w-max shrink-0 font-sans text-[#FFFFFF8A] text-xs/4">
-                    Previous period
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <svg aria-hidden="true" width="14" height="7" viewBox="0 0 14 7" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <path d="M0 3.5h14" fill="none" stroke="rgb(6 115 255 / 50%)" strokeWidth="1.4" strokeDasharray="3 3" />
-                </svg>
-                <div className="w-max shrink-0 font-sans text-[#0673FFCC] text-xs/4">
-                  Projected
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-col self-stretch pt-9.5 gap-5 relative">
-              <div className="flex flex-col self-stretch gap-1.75">
-                <div className="tracking-[-0.01em] w-max font-sans font-medium text-[#FFFFFFB2] text-[13px]/4">
-                  Retention by cohort
-                </div>
-              </div>
-              <div className="flex flex-col self-stretch gap-1.5">
-                <div className="flex self-stretch h-7 shrink-0">
-                  <div className="w-34 shrink-0 flex items-center justify-end pr-3">
-                    <div className="w-max shrink-0 font-sans text-[#FFFFFF8A] text-xs/4">
-                      Mar · 3,180
-                    </div>
-                  </div>
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF33] border border-solid border-[#0673FF4D]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFD1] text-[11px]/3.25">
-                      <CountUp delay={0.3} value="100" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF29] border border-solid border-[#0673FF47]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFB3] text-[11px]/3.25">
-                      <CountUp delay={0.335} value="82" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF24] border border-solid border-[#0673FF42]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFA8] text-[11px]/3.25">
-                      <CountUp delay={0.37} value="71" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF1F] border border-solid border-[#0673FF3D]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFA1] text-[11px]/3.25">
-                      <CountUp delay={0.405} value="64" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF1A] border border-solid border-[#0673FF38]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFF99] text-[11px]/3.25">
-                      <CountUp delay={0.44} value="59" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 h-7 rounded-[5px] bg-[#0673FF08] border border-dashed border-[#0673FF52]" />
-                </div>
-                <div className="flex self-stretch h-7 shrink-0">
-                  <div className="w-68 shrink-0 flex items-center justify-end pr-3">
-                    <div className="w-max shrink-0 font-sans text-[#FFFFFF8A] text-xs/4">
-                      Apr · 3,940
-                    </div>
-                  </div>
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF33] border border-solid border-[#0673FF4D]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFD1] text-[11px]/3.25">
-                      <CountUp delay={0.475} value="100" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF2A] border border-solid border-[#0673FF47]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFB3] text-[11px]/3.25">
-                      <CountUp delay={0.51} value="84" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF25] border border-solid border-[#0673FF42]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFA8] text-[11px]/3.25">
-                      <CountUp delay={0.545} value="74" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF21] border border-solid border-[#0673FF3D]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFA1] text-[11px]/3.25">
-                      <CountUp delay={0.58} value="68" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 h-7 rounded-[5px] bg-[#0673FF08] border border-dashed border-[#0673FF52]" />
-                </div>
-                <div className="flex self-stretch h-7 shrink-0">
-                  <div className="w-102 shrink-0 flex items-center justify-end pr-3">
-                    <div className="w-max shrink-0 font-sans text-[#FFFFFF8A] text-xs/4">
-                      May · 4,610
-                    </div>
-                  </div>
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF33] border border-solid border-[#0673FF4D]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFD1] text-[11px]/3.25">
-                      <CountUp delay={0.615} value="100" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF2B] border border-solid border-[#0673FF47]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFB3] text-[11px]/3.25">
-                      <CountUp delay={0.65} value="86" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF26] border border-solid border-[#0673FF42]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFA8] text-[11px]/3.25">
-                      <CountUp delay={0.685} value="77" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 h-7 rounded-[5px] bg-[#0673FF08] border border-dashed border-[#0673FF52]" />
-                </div>
-                <div className="flex self-stretch h-7 shrink-0">
-                  <div className="w-136 shrink-0 flex items-center justify-end pr-3">
-                    <div className="w-max shrink-0 font-sans text-[#FFFFFF8A] text-xs/4">
-                      Jun · 5,120
-                    </div>
-                  </div>
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF33] border border-solid border-[#0673FF4D]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFD1] text-[11px]/3.25">
-                      <CountUp delay={0.72} value="100" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF2B] border border-solid border-[#0673FF47]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFB3] text-[11px]/3.25">
-                      <CountUp delay={0.755} value="88" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 h-7 rounded-[5px] bg-[#0673FF08] border border-dashed border-[#0673FF52]" />
-                </div>
-                <div className="flex self-stretch h-7 shrink-0">
-                  <div className="w-170 shrink-0 flex items-center justify-end pr-3">
-                    <div className="w-max shrink-0 font-sans text-[#FFFFFF8A] text-xs/4">
-                      Jul · 5,860
-                    </div>
-                  </div>
-                  <div className="w-33 shrink-0 flex items-center justify-center h-7 rounded-[5px] bg-[#0673FF33] border border-solid border-[#0673FF4D]">
-                    <div className="tracking-[0.02em] font-mono text-[#FFFFFFD1] text-[11px]/3.25">
-                      <CountUp delay={0.79} value="100" />
-                    </div>
-                  </div>
-                  <div className="w-1 shrink-0" />
-                  <div className="w-33 shrink-0 h-7 rounded-[5px] bg-[#0673FF08] border border-dashed border-[#0673FF52]" />
-                </div>
-              </div>
-            </div>
-            <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(ellipse 78.55% 116.835% at 22.040000000000003% 0% in oklab, oklab(17.1% 0 0 / 0%) 30.12%, oklab(14.1% 0.001 -0.004) 100%)' }} />
-          </Illustration>
-          </ScaledMock>
-        </div>
-      </div>
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/asteroids.tsx b/apps/www/src/features/www/landing/sections/asteroids.tsx
deleted file mode 100644
index f97c47f36..000000000
--- a/apps/www/src/features/www/landing/sections/asteroids.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-"use client";
-
-import { cn, Logo } from "@voidhash/ui";
-import { motion, useMotionValue, useMotionValueEvent, useTransform } from "motion/react";
-import { lazy, Suspense, useEffect, useRef, useState } from "react";
-
-import { ASTEROIDS_STAGE_CLASS } from "../asteroids/frame";
-
-/**
- * The game must cost nothing until someone actually plays it: the engine, the CRT shader and the
- * chrome live in their own chunk, and nothing mounts — no canvas, no loop — until the play button
- * is pressed. The chunk itself is only prefetched once the finale scrolls near.
- */
-const AsteroidsGame = lazy(async () => ({
-  default: (await import("../asteroids/game")).AsteroidsGame,
-}));
-
-/** How far ahead of the viewport the chunk starts downloading. */
-const PREFETCH_MARGIN = "600px";
-
-/** Scroll progress past which the play button is interactive and armed for the keyboard. */
-const REVEAL_PROGRESS = 0.6;
-
-/**
- * The section is one viewport taller than the sticky stage inside it, so the last stretch of the
- * page scrubs the logo-to-play transition instead of flipping it: the giant wordmark dissolves as
- * the extra viewport scrolls by, and the unexplained play button condenses out of the same scroll.
- * Once pressed, the stage swaps to the live game.
- */
-export function LandingAsteroids() {
-  const sectionRef = useRef<HTMLElement>(null);
-  const [stage, setStage] = useState<"scroll" | "game">("scroll");
-  const [revealed, setRevealed] = useState(false);
-
-  // Progress through the runway, computed by hand: how far the extra viewport of section has been
-  // scrolled past the point where the sticky stage pins.
-  const scrollProgress = useMotionValue(0);
-  const logoOpacity = useTransform(scrollProgress, [0, 0.5], [1, 0]);
-  const logoScale = useTransform(scrollProgress, [0, 0.5], [1, 0.96]);
-  const logoLift = useTransform(scrollProgress, [0, 0.5], [0, -48]);
-  const buttonOpacity = useTransform(scrollProgress, [0.45, 0.85], [0, 1]);
-
-  useEffect(() => {
-    const section = sectionRef.current;
-    if (!section || stage !== "scroll") {
-      return;
-    }
-
-    // Geometry is cached outside the scroll handler: reading offsets on every scroll event can
-    // force a reflow mid-scroll, janking the very scrub the handler drives.
-    let runway = 0;
-    let sectionTop = 0;
-
-    const update = () => {
-      const raw = runway > 0 ? (window.scrollY - sectionTop) / runway : 1;
-      scrollProgress.set(Math.min(1, Math.max(0, raw)));
-    };
-
-    const measure = () => {
-      runway = section.offsetHeight - window.innerHeight;
-      sectionTop = section.offsetTop;
-      update();
-    };
-
-    measure();
-    // The section sits at the very bottom of the page, so anything above it resizing (images
-    // loading, fonts swapping) moves its offset.
-    const resizeObserver = new ResizeObserver(measure);
-    resizeObserver.observe(document.body);
-    window.addEventListener("scroll", update, { passive: true });
-    window.addEventListener("resize", measure);
-
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", update);
-      window.removeEventListener("resize", measure);
-    };
-  }, [scrollProgress, stage]);
-
-  // Interactivity needs a boolean, not a motion value: the button must ignore clicks and focus
-  // while it is still invisible mid-scrub.
-  useMotionValueEvent(scrollProgress, "change", (progress) => {
-    setRevealed(progress >= REVEAL_PROGRESS);
-  });
-
-  // Warm the chunk once the finale approaches, so pressing play starts the game instantly.
-  useEffect(() => {
-    const section = sectionRef.current;
-    if (!section) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          import("../asteroids/game");
-          observer.disconnect();
-        }
-      },
-      { rootMargin: PREFETCH_MARGIN },
-    );
-    observer.observe(section);
-
-    return () => observer.disconnect();
-  }, []);
-
-  // Once the button has condensed in, the keys that scrolled here also press it.
-  useEffect(() => {
-    if (stage !== "scroll" || !revealed) {
-      return;
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.code === "Space" || event.code === "Enter") {
-        event.preventDefault();
-        setStage("game");
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [revealed, stage]);
-
-  return (
-    <section className="relative h-[200svh] w-full self-stretch bg-zinc-950" ref={sectionRef}>
-      <div className="sticky top-0 h-svh w-full overflow-hidden">
-        {stage === "game" ? (
-          <Suspense fallback={<div className={ASTEROIDS_STAGE_CLASS} />}>
-            <AsteroidsGame autoStart />
-          </Suspense>
-        ) : (
-          <>
-            <motion.div
-              className="absolute inset-x-0 top-0 flex justify-center px-6 pt-16 md:px-12 md:pt-20 xl:px-32"
-              style={{ opacity: logoOpacity, scale: logoScale, y: logoLift }}
-            >
-              {/* The Logo default carries `dark:text-white`, so the dark override must be explicit. */}
-              <Logo className="h-auto w-full max-w-[1656px] text-zinc-800 dark:text-zinc-800" />
-            </motion.div>
-            <motion.div
-              className={cn(
-                "absolute inset-0 flex items-center justify-center",
-                !revealed && "pointer-events-none",
-              )}
-              style={{ opacity: buttonOpacity }}
-            >
-              <button
-                className="border border-zinc-500 px-10 py-3.5 font-mono text-sm text-white tracking-[0.25em] transition-colors hover:border-white hover:bg-white hover:text-black"
-                onClick={() => setStage("game")}
-                tabIndex={revealed ? 0 : -1}
-                type="button"
-              >
-                PLAY
-              </button>
-            </motion.div>
-          </>
-        )}
-      </div>
-    </section>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/crm.tsx b/apps/www/src/features/www/landing/sections/crm.tsx
deleted file mode 100644
index 44df4ed63..000000000
--- a/apps/www/src/features/www/landing/sections/crm.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-import { LandingSection, ScaledMock, SectionHeader } from "../shared";
-
-/** Renders the CRM product section. */
-export function LandingCrm() {
-  return (
-    <LandingSection id="crm">
-      <div className="flex flex-col items-start justify-center gap-12 px-6 py-16 md:gap-23 md:px-12 md:py-24 xl:p-32">
-        <SectionHeader
-          description="See each customer's journey in one place, from their first visit to purchases, renewals and refunds, even when they switch devices."
-          eyebrow="CRM"
-          title="Know the people behind your growth."
-        />
-        <ScaledMock compactDesignWidth={1010} designWidth={1400}>
-          {/* Below xl the detail card stops floating over the table and stacks above it, so the
-              two panels become an ordinary flex column instead of the artboard's overlap. */}
-          <div className="w-full xl:w-350 xl:h-125 mt-6 shrink-0 relative flex flex-col gap-10 xl:block">
-          <div className="xl:left-97.5 xl:top-0 w-full xl:w-252.5 flex flex-col items-start rounded-lg overflow-clip relative xl:absolute">
-            <div className="self-stretch flex items-center py-3.5 px-6 gap-4 border-b border-b-solid [border-bottom-color:var(--color-zinc-900)]">
-              <div className="w-75 shrink-0 font-sans text-zinc-400 text-xs/4">
-                Person
-              </div>
-              <div className="w-40 shrink-0 font-sans text-zinc-400 text-xs/4">
-                Product
-              </div>
-              <div className="w-30 shrink-0 font-sans text-zinc-400 text-xs/4">
-                Status
-              </div>
-              <div className="w-25 shrink-0 text-right font-sans flex justify-end flex-wrap text-zinc-400 text-xs/4">
-                LTV
-              </div>
-              <div className="grow basis-[0%] text-right font-sans flex justify-end flex-wrap text-zinc-400 text-xs/4">
-                Last seen
-              </div>
-            </div>
-            <div className="self-stretch flex items-center py-3.75 px-6 gap-4 border-b border-b-solid [border-bottom-color:var(--color-zinc-900)]">
-              <div className="w-75 shrink-0 flex items-center gap-3">
-                <div className="w-7.5 h-7.5 shrink-0 rounded-[999px]" style={{ backgroundImage: 'linear-gradient(in oklab 135deg, oklab(85.7% 0.018 0.147) 0%, oklab(88% -0.200 0.140) 100%)' }} />
-                <div className="flex flex-col gap-0.5">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Mara Keller
-                  </div>
-                  <div className="tracking-[-0.01em] font-sans text-zinc-500 text-xs/4">
-                    mara.keller@hey.com
-                  </div>
-                </div>
-              </div>
-              <div className="w-40 shrink-0 font-sans text-[#FFFFFFB8] text-[13px]/4">
-                Pro Annual
-              </div>
-              <div className="w-30 shrink-0 flex">
-                <div className="flex items-center py-1 px-2.5 rounded-[999px] gap-1.5 bg-[#14532D33] border border-solid border-[#16653D]">
-                  <div className="font-sans font-medium [color:var(--color-pistachio-600)] text-xs/4">
-                    Active
-                  </div>
-                </div>
-              </div>
-              <div className="w-25 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-[13px]/4">
-                $149.97
-              </div>
-              <div className="grow basis-[0%] text-right font-sans flex justify-end flex-wrap text-zinc-400 text-[13px]/4">
-                2 min ago
-              </div>
-            </div>
-            <div className="self-stretch flex items-center py-3.75 px-6 gap-4 border-b border-b-solid [border-bottom-color:var(--color-zinc-900)]">
-              <div className="w-75 shrink-0 flex items-center gap-3">
-                <div className="w-7.5 h-7.5 shrink-0 rounded-[999px]" style={{ backgroundImage: 'linear-gradient(in oklab 135deg, oklab(87.3% -0.210 0.125) 0%, oklab(46.2% -0.031 -0.305) 100%)' }} />
-                <div className="flex flex-col gap-0.5">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Jonas Ortega
-                  </div>
-                  <div className="tracking-[-0.01em] font-sans text-zinc-500 text-xs/4">
-                    j.ortega@fastmail.com
-                  </div>
-                </div>
-              </div>
-              <div className="w-40 shrink-0 font-sans text-[#FFFFFFB8] text-[13px]/4">
-                Pro Monthly
-              </div>
-              <div className="w-30 shrink-0 flex">
-                <div className="flex items-center py-1 px-2.5 rounded-[999px] gap-1.5 bg-[#1E3A8A40] border border-solid border-blue-ribbon-800">
-                  <div className="font-sans font-medium text-blue-ribbon-400 text-xs/4">
-                    In trial
-                  </div>
-                </div>
-              </div>
-              <div className="w-25 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-[13px]/4">
-                $0.00
-              </div>
-              <div className="grow basis-[0%] text-right font-sans flex justify-end flex-wrap text-zinc-400 text-[13px]/4">
-                18 min ago
-              </div>
-            </div>
-            <div className="self-stretch flex items-center py-3.75 px-6 gap-4 relative bg-[#FFFFFF0A] border-b border-b-solid [border-bottom-color:var(--color-zinc-900)]">
-              <div className="w-75 shrink-0 flex items-center gap-3">
-                <div className="w-7.5 h-7.5 shrink-0 rounded-[999px]" style={{ backgroundImage: 'linear-gradient(in oklab 135deg, oklab(68.1% -0.134 0.027) 0%, oklab(36.1% 0.011 -0.231) 100%)' }} />
-                <div className="flex flex-col gap-0.5">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Amara Lindqvist
-                  </div>
-                  <div className="tracking-[-0.01em] font-sans text-zinc-500 text-xs/4">
-                    amara@lindqvist.se
-                  </div>
-                </div>
-              </div>
-              <div className="w-40 shrink-0 font-sans text-[#FFFFFFB8] text-[13px]/4">
-                Pro Annual
-              </div>
-              <div className="w-30 shrink-0 flex">
-                <div className="flex items-center py-1 px-2.5 rounded-[999px] gap-1.5 bg-[#14532D33] border border-solid border-[#16653D]">
-                  <div className="font-sans font-medium [color:var(--color-pistachio-600)] text-xs/4">
-                    Active
-                  </div>
-                </div>
-              </div>
-              <div className="w-25 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-[13px]/4">
-                $299.94
-              </div>
-              <div className="grow basis-[0%] text-right font-sans flex justify-end flex-wrap text-zinc-400 text-[13px]/4">
-                1 hr ago
-              </div>
-              <div className="absolute left-0 top-0 w-0.5 h-16.75" style={{ backgroundImage: 'linear-gradient(in oklab 180deg, oklab(68.1% -0.134 0.027) 0%, oklab(36.1% 0.011 -0.231) 100%)' }} />
-            </div>
-            <div className="self-stretch flex items-center py-3.75 px-6 gap-4 border-b border-b-solid [border-bottom-color:var(--color-zinc-900)]">
-              <div className="w-75 shrink-0 flex items-center gap-3">
-                <div className="w-7.5 h-7.5 shrink-0 rounded-[999px]" style={{ backgroundImage: 'linear-gradient(in oklab 135deg, oklab(48.1% -0.041 -0.151) 0%, oklab(51.9% 0.198 -0.141) 100%)' }} />
-                <div className="flex flex-col gap-0.5">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Diego Tran
-                  </div>
-                  <div className="tracking-[-0.01em] font-sans text-zinc-500 text-xs/4">
-                    dtran@proton.me
-                  </div>
-                </div>
-              </div>
-              <div className="w-40 shrink-0 font-sans text-[#FFFFFFB8] text-[13px]/4">
-                Pro Monthly
-              </div>
-              <div className="w-30 shrink-0 flex">
-                <div className="flex items-center py-1 px-2.5 rounded-[999px] gap-1.5 bg-[#78350F40] border border-solid border-[#A16207]">
-                  <div className="font-sans font-medium text-[#FBBF24] text-xs/4">
-                    Grace period
-                  </div>
-                </div>
-              </div>
-              <div className="w-25 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-[13px]/4">
-                $59.88
-              </div>
-              <div className="grow basis-[0%] text-right font-sans flex justify-end flex-wrap text-zinc-400 text-[13px]/4">
-                4 hrs ago
-              </div>
-            </div>
-            <div className="self-stretch flex items-center py-3.75 px-6 gap-4 border-b border-b-solid [border-bottom-color:var(--color-zinc-900)]">
-              <div className="w-75 shrink-0 flex items-center gap-3">
-                <div className="w-7.5 h-7.5 shrink-0 rounded-[999px]" style={{ backgroundImage: 'linear-gradient(in oklab 135deg, oklab(63.1% 0.235 0.099) 0%, oklab(92.5% -0.134 0.190) 100%)' }} />
-                <div className="flex flex-col gap-0.5">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Sofia Baumann
-                  </div>
-                  <div className="tracking-[-0.01em] font-sans text-zinc-500 text-xs/4">
-                    sofia.b@icloud.com
-                  </div>
-                </div>
-              </div>
-              <div className="w-40 shrink-0 font-sans text-[#FFFFFFB8] text-[13px]/4">
-                Lifetime
-              </div>
-              <div className="w-30 shrink-0 flex">
-                <div className="flex items-center py-1 px-2.5 rounded-[999px] gap-1.5 bg-[#14532D33] border border-solid border-[#16653D]">
-                  <div className="font-sans font-medium [color:var(--color-pistachio-600)] text-xs/4">
-                    Active
-                  </div>
-                </div>
-              </div>
-              <div className="w-25 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-[13px]/4">
-                $199.00
-              </div>
-              <div className="grow basis-[0%] text-right font-sans flex justify-end flex-wrap text-zinc-400 text-[13px]/4">
-                Yesterday
-              </div>
-            </div>
-            <div className="self-stretch flex items-center py-3.75 px-6 gap-4">
-              <div className="w-75 shrink-0 flex items-center gap-3">
-                <div className="w-7.5 h-7.5 shrink-0 rounded-[999px]" style={{ backgroundImage: 'linear-gradient(in oklab 135deg, oklab(54.9% -0.036 -0.247) 0%, oklab(69% 0.276 -0.140) 100%)' }} />
-                <div className="flex flex-col gap-0.5">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Ravi Nandakumar
-                  </div>
-                  <div className="tracking-[-0.01em] font-sans text-zinc-500 text-xs/4">
-                    ravi.n@gmail.com
-                  </div>
-                </div>
-              </div>
-              <div className="w-40 shrink-0 font-sans text-[#FFFFFFB8] text-[13px]/4">
-                Pro Annual
-              </div>
-              <div className="w-30 shrink-0 flex">
-                <div className="flex items-center py-1 px-2.5 rounded-[999px] gap-1.5 border border-solid border-zinc-700">
-                  <div className="font-sans font-medium text-zinc-400 text-xs/4">
-                    Churned
-                  </div>
-                </div>
-              </div>
-              <div className="w-25 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-[13px]/4">
-                $49.99
-              </div>
-              <div className="grow basis-[0%] text-right font-sans flex justify-end flex-wrap text-zinc-400 text-[13px]/4">
-                6 days ago
-              </div>
-            </div>
-            {/* Blends the table under the floating detail card — its focal point sits where the
-                card overlaps, so it only makes sense while the two are stacked in z, not in flow. */}
-            <div className="hidden xl:block absolute top-px -bottom-2 inset-x-px" style={{ backgroundImage: 'radial-gradient(ellipse 67.23% 100% at 21.92% 0% in oklab, oklab(17.1% 0 0 / 0%) 17.44%, oklab(16.1% .0004 -0.001 / 33.8%) 45.31%, oklab(14.1% 0.001 -0.004) 100%)' }} />
-            {/* Mobile keeps just the bottom fade, so the row list still reads as continuing. */}
-            <div className="xl:hidden absolute top-px -bottom-2 inset-x-px" style={{ backgroundImage: 'linear-gradient(to bottom, oklab(17.1% 0 0 / 0%) 55%, oklab(14.1% 0.001 -0.004) 100%)' }} />
-          </div>
-          <div className="relative xl:absolute -order-1 xl:order-none xl:left-0 xl:-top-6 w-full xl:w-126 flex flex-col items-start rounded-2xl overflow-clip [box-shadow:#000000B8_0px_28px_90px] bg-origin-border border border-solid [border-color:var(--color-zinc-800)]" style={{ backgroundImage: 'radial-gradient(ellipse 87.36% 97.41499999999999% at 100% 0% in oklab, var(--color-zinc-900) 0%, var(--color-zinc-950) 100%)' }}>
-            <div className="self-stretch flex items-center pt-6 pb-4 overflow-clip gap-4.5 px-7">
-              <div className="shrink-0 rounded-[999px] size-14" style={{ backgroundImage: 'linear-gradient(in oklab 135deg, oklab(68.1% -0.134 0.027) 0%, oklab(36.1% 0.011 -0.231) 100%)' }} />
-              <div className="flex flex-col grow basis-[0%] gap-1">
-                <div className="flex items-center gap-2.5">
-                  <div className="tracking-[-0.03em] font-sans font-semibold text-white text-xl/relaxed">
-                    Amara Lindqvist
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="font-sans text-zinc-400 text-[13px]/4.25">
-                    Stockholm, Sweden
-                  </div>
-                  <div className="w-0.75 h-0.75 shrink-0 rounded-[999px] bg-zinc-700" />
-                  <div className="font-sans text-zinc-400 text-[13px]/4.25">
-                    iPhone 16 Pro · iOS 18.4
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="self-stretch flex">
-              <div className="flex flex-col w-40.25 shrink-0 py-4 px-7">
-                <div className="font-sans text-zinc-400 text-[13px]/4">
-                  Lifetime value
-                </div>
-                <div className="flex items-baseline gap-2">
-                  <div className="tracking-[-0.035em] font-sans font-semibold text-white text-xl/8">
-                    $299.94
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col grow basis-[0%] py-4 px-6">
-                <div className="font-sans text-zinc-400 text-[13px]/4">
-                  Subscribed
-                </div>
-                <div className="tracking-[-0.02em] font-sans font-medium text-white text-xl/8">
-                  3 yrs
-                </div>
-              </div>
-              <div className="flex flex-col grow basis-[0%] items-end py-4 px-6">
-                <div className="self-stretch text-right font-sans flex justify-end flex-wrap text-zinc-400 text-[13px]/4">
-                  Renews
-                </div>
-                <div className="tracking-[-0.02em] self-stretch text-right font-sans font-medium flex justify-end flex-wrap text-white text-xl/8">
-                  Mar 4
-                </div>
-              </div>
-            </div>
-            <div className="self-stretch flex flex-col pb-6 gap-4.5 pt-4 relative px-7">
-              <div className="absolute left-8 top-16 w-px h-41.25" style={{ backgroundImage: 'linear-gradient(in oklab 180deg, oklab(37% 0.003 -0.011) 0%, oklab(27.4% 0.002 -0.005) 70%, oklab(27.4% 0.002 -0.005 / 0%) 100%)' }} />
-              <div className="flex items-center gap-3 justify-between relative">
-                <div className="shrink-0 [letter-spacing:var(--tracking-normal)] font-sans font-medium [color:var(--color-white)] text-base/3.5">
-                  Activity
-                </div>
-                <div className="shrink-0 font-sans text-zinc-400 text-xs/3.5">
-                  Since Feb 2023
-                </div>
-              </div>
-              <div className="flex items-start gap-4 relative">
-                <div className="w-2.25 h-2.25 mt-1.25 shrink-0 rounded-[999px] [background-color:var(--color-pistachio-600)]" />
-                <div className="flex flex-col grow basis-[0%] gap-0.75">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Renewed Pro Annual
-                  </div>
-                  <div className="font-sans text-zinc-400 text-xs/4">
-                    App Store · Mar 4, 2026
-                  </div>
-                </div>
-                <div className="shrink-0 mt-px font-sans font-medium [color:var(--color-pistachio-600)] text-sm/4.5">
-                  +$99.99
-                </div>
-              </div>
-              <div className="flex items-start gap-4 relative">
-                <div className="w-2.25 h-2.25 mt-1.25 shrink-0 rounded-[999px] [background-color:var(--color-blue-ribbon-500)]" />
-                <div className="flex flex-col grow basis-[0%] gap-0.75">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Saw paywall · Onboarding, Variant C
-                  </div>
-                  <div className="font-sans text-zinc-400 text-xs/4">
-                    iOS app · Mar 2, 2026
-                  </div>
-                </div>
-                <div className="shrink-0 mt-px font-sans font-medium text-blue-ribbon-400 text-[13px]/4.5">
-                  Converted
-                </div>
-              </div>
-              <div className="flex items-start gap-4 relative">
-                <div className="w-2.25 h-2.25 mt-1.25 shrink-0 rounded-[999px] bg-electric-violet-400" />
-                <div className="flex flex-col grow basis-[0%] gap-0.75">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Switched Monthly → Annual
-                  </div>
-                  <div className="font-sans text-zinc-400 text-xs/4">
-                    App Store · Nov 18, 2025
-                  </div>
-                </div>
-                <div className="shrink-0 mt-px font-sans font-medium [color:var(--color-pistachio-600)] text-sm/4.5">
-                  +$39.99
-                </div>
-              </div>
-              <div className="flex items-start gap-4 relative">
-                <div className="w-2.25 h-2.25 mt-1.25 shrink-0 rounded-[999px] bg-zinc-600" />
-                <div className="flex flex-col grow basis-[0%] gap-0.75">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                    Started 7-day free trial
-                  </div>
-                  <div className="font-sans text-zinc-400 text-xs/4">
-                    App Store · Feb 26, 2023
-                  </div>
-                </div>
-                <div className="shrink-0 mt-px font-sans text-zinc-400 text-[13px]/4.5">
-                  First touch
-                </div>
-              </div>
-            </div>
-          </div>
-          </div>
-        </ScaledMock>
-      </div>
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/developers.tsx b/apps/www/src/features/www/landing/sections/developers.tsx
deleted file mode 100644
index a0192af7c..000000000
--- a/apps/www/src/features/www/landing/sections/developers.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-"use client";
-
-import { Button } from "@voidhash/ui";
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
-
-import { LandingSection, SectionHeader } from "../shared";
-
-const INSTALL_COMMAND = "npx voidhash-cli init";
-
-function CopyCommandButton() {
-  const [copied, setCopied] = useState(false);
-
-  return (
-    <Button
-      aria-label="Copy install command"
-      onClick={() => {
-        navigator.clipboard.writeText(INSTALL_COMMAND);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
-      }}
-      size="icon-sm"
-      variant="outline"
-    >
-      {copied ? <CheckIcon className="text-blue-ribbon-400" /> : <CopyIcon />}
-    </Button>
-  );
-}
-
-/** Renders the developer platform section. */
-export function LandingDevelopers() {
-  return (
-    <LandingSection id="developers">
-      <div className="flex flex-col items-start justify-center gap-12 px-6 py-16 md:gap-23 md:px-12 md:py-24 xl:p-32">
-        <SectionHeader
-          description="Connect your app in minutes, then build it yourself or ask your AI coding agent to create, preview and publish it for you."
-          eyebrow="Developers"
-          title="Your first paywall is one command away."
-        />
-        <div className="w-full max-w-[1400px] flex flex-col items-start gap-5">
-          <div className="self-stretch min-w-0 flex gap-12">
-            <div className="flex flex-col rounded-[16px] overflow-clip flex-1 min-w-0 h-fit grow basis-[0%] self-stretch [box-shadow:#00000059_0px_2px_24px] bg-zinc-950 border border-solid border-zinc-800">
-              <div className="self-stretch flex items-center py-2.5 px-3.5 gap-1.5 overflow-x-auto border-b border-b-solid border-b-zinc-900">
-                <div className="flex items-center py-2 px-3.25 rounded-md gap-2.25 bg-zinc-900">
-                  <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                    <circle cx="12" cy="12" r="2.1" fill="var(--color-blue-ribbon-400)" />
-                    <ellipse cx="12" cy="12" rx="10" ry="3.9" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.4" />
-                    <ellipse cx="12" cy="12" rx="10" ry="3.9" transform="rotate(60 12 12)" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.4" />
-                    <ellipse cx="12" cy="12" rx="10" ry="3.9" transform="rotate(120 12 12)" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="1.4" />
-                  </svg>
-                  <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans font-medium text-zinc-50">
-                    React Native
-                  </div>
-                </div>
-                <div className="flex items-center py-2 px-3.25 gap-2.25">
-                  <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                    <path d="M17.05 12.54c-.03-2.91 2.38-4.31 2.49-4.38-1.36-1.99-3.47-2.26-4.22-2.29-1.8-.18-3.51 1.06-4.42 1.06-.91 0-2.32-1.03-3.81-1-1.96.03-3.77 1.14-4.78 2.89-2.04 3.54-.52 8.78 1.46 11.65.97 1.4 2.12 2.98 3.63 2.92 1.46-.06 2.01-.94 3.77-.94 1.76 0 2.26.94 3.8.91 1.57-.03 2.56-1.43 3.52-2.84 1.11-1.63 1.57-3.21 1.6-3.29-.04-.02-3.07-1.18-3.04-4.69Z" fill="var(--zinc-500)" />
-                    <path d="M14.13 4.06c.8-.98 1.35-2.33 1.2-3.68-1.16.05-2.57.78-3.4 1.75-.74.86-1.4 2.24-1.22 3.56 1.3.1 2.62-.66 3.42-1.63Z" fill="var(--zinc-500)" />
-                  </svg>
-                  <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-400">
-                    Swift
-                  </div>
-                  <div className="text-[13px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-500">
-                    Soon
-                  </div>
-                </div>
-                <div className="flex items-center py-2 px-3.25 gap-2.25">
-                  <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                    <path d="M24 24H0V0h24L12 12l12 12Z" fill="var(--zinc-500)" />
-                  </svg>
-                  <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-400">
-                    Kotlin
-                  </div>
-                  <div className="text-[13px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-500">
-                    Soon
-                  </div>
-                </div>
-                <div className="grow basis-[0%] h-px" />
-                <CopyCommandButton />
-              </div>
-              <div className="self-stretch flex flex-col py-8 md:py-11.5">
-                <div className="self-stretch flex items-center px-5 md:px-7 gap-3.5">
-                  <div className="w-max inline-block shrink-0 font-mono text-zinc-600 text-base/6 md:text-xl/7.5">
-                    $
-                  </div>
-                  <div className="flex flex-wrap items-center gap-x-2">
-                    <div className="w-max inline-block shrink-0 font-mono text-zinc-400 text-base/6 md:text-xl/7.5">
-                      npx
-                    </div>
-                    <div className="w-max inline-block shrink-0 font-mono font-medium text-zinc-50 text-base/6 md:text-xl/7.5">
-                      voidhash-cli
-                    </div>
-                    <div className="w-max inline-block shrink-0 font-mono font-medium text-blue-ribbon-400 text-base/6 md:text-xl/7.5">
-                      init
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="self-stretch flex flex-wrap items-center py-4 px-5 md:px-7 gap-x-7 gap-y-2 border-t border-t-solid border-t-zinc-900">
-                <a className="flex items-center gap-2.25 transition-opacity hover:opacity-80" href="/docs">
-                  <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                    <path d="M4 4.5A1.5 1.5 0 0 1 5.5 3H10a2 2 0 0 1 2 2v15a2 2 0 0 0-2-2H5.5A1.5 1.5 0 0 1 4 16.5v-12Z" fill="none" stroke="var(--zinc-400)" strokeWidth="1.7" strokeLinejoin="round" />
-                    <path d="M20 4.5A1.5 1.5 0 0 0 18.5 3H14a2 2 0 0 0-2 2v15a2 2 0 0 1 2-2h4.5a1.5 1.5 0 0 0 1.5-1.5v-12Z" fill="none" stroke="var(--zinc-400)" strokeWidth="1.7" strokeLinejoin="round" />
-                  </svg>
-                  <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-300">
-                    Read the docs
-                  </div>
-                </a>
-                <div className="grow basis-[0%] h-px" />
-                <div className="text-[13px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-mono text-zinc-500">
-                  Expo SDK 52+ · New Architecture ready
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="self-stretch flex flex-wrap items-center gap-y-3 pt-5 px-0.5">
-            <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-400">
-              Wired automatically, zero config
-            </div>
-            <div className="grow basis-[0%] h-px" />
-            <div className="flex flex-wrap items-center gap-x-7.5 gap-y-3">
-              <div className="flex items-center gap-2">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <path d="M4.5 12.5 9.5 17.5 19.5 6.5" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-300">
-                  Paywalls
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <path d="M4.5 12.5 9.5 17.5 19.5 6.5" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-300">
-                  Purchases
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <path d="M4.5 12.5 9.5 17.5 19.5 6.5" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-300">
-                  Entitlements
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <path d="M4.5 12.5 9.5 17.5 19.5 6.5" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-300">
-                  Experiments
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-                  <path d="M4.5 12.5 9.5 17.5 19.5 6.5" fill="none" stroke="var(--color-blue-ribbon-400)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                <div className="text-[15px] tracking-[-0.01em] leading-[120%] w-max shrink-0 font-sans text-zinc-300">
-                  Analytics
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/divider.tsx b/apps/www/src/features/www/landing/sections/divider.tsx
deleted file mode 100644
index 61d75750e..000000000
--- a/apps/www/src/features/www/landing/sections/divider.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/** Renders the hairline band that separates two landing page sections. */
-export function LandingDivider() {
-  return (
-    <div className="flex flex-col items-center gap-2.5 self-stretch border-zinc-800 border-b py-2.5">
-      <div className="flex h-3 shrink-0 items-center self-stretch border-zinc-800 border-t border-b" />
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/experimentation.tsx b/apps/www/src/features/www/landing/sections/experimentation.tsx
deleted file mode 100644
index e25d21cd0..000000000
--- a/apps/www/src/features/www/landing/sections/experimentation.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-"use client";
-
-import { Button, cn, Switch } from "@voidhash/ui";
-import { useState } from "react";
-
-import { CountUp, GrowBar, Illustration } from "../motion";
-import { LandingSection, ScaledMock, SectionHeader } from "../shared";
-
-const FEATURE_FLAGS = [
-  {
-    name: "new_onboarding_flow",
-    enabledDetail: "iOS · 25% rollout",
-    disabledDetail: "iOS · off",
-    defaultEnabled: true,
-  },
-  {
-    name: "annual_price_test",
-    enabledDetail: "Backing flag · experiment · 100%",
-    disabledDetail: "Backing flag · experiment paused",
-    defaultEnabled: true,
-  },
-  {
-    name: "winback_offer_v2",
-    enabledDetail: "Churned subscribers · 50% rollout",
-    disabledDetail: "Churned subscribers · off",
-    defaultEnabled: true,
-  },
-  {
-    name: "family_sharing",
-    enabledDetail: "Internal testers only · on",
-    disabledDetail: "Internal testers only · off",
-    defaultEnabled: false,
-  },
-  {
-    name: "paywall_v4_layout",
-    enabledDetail: "All platforms · live",
-    disabledDetail: "All platforms · draft",
-    defaultEnabled: false,
-  },
-];
-
-function FlagRow({
-  flag,
-  withBorder,
-}: {
-  flag: (typeof FEATURE_FLAGS)[number];
-  withBorder: boolean;
-}) {
-  const [enabled, setEnabled] = useState(flag.defaultEnabled);
-
-  return (
-    <div
-      className={cn(
-        "self-stretch flex items-center py-4.5 px-6 gap-4",
-        withBorder && "border-b border-b-solid border-b-zinc-900",
-      )}
-    >
-      <div className="grow basis-[0%] flex flex-col gap-1">
-        <div
-          className={cn(
-            "font-mono font-medium text-[13px]/4 transition-colors duration-300",
-            enabled ? "text-white" : "text-zinc-400",
-          )}
-        >
-          {flag.name}
-        </div>
-        <div className="tracking-[-0.01em] font-sans text-zinc-400 text-xs/4">
-          {enabled ? flag.enabledDetail : flag.disabledDetail}
-        </div>
-      </div>
-      <Switch checked={enabled} onCheckedChange={setEnabled} />
-    </div>
-  );
-}
-
-/** Renders the experimentation product section. */
-export function LandingExperimentation() {
-  return (
-    <LandingSection id="experimentation">
-      <div className="flex flex-col items-start justify-center gap-12 px-6 py-16 md:gap-23 md:px-12 md:py-24 xl:p-32">
-        <SectionHeader
-          description="Try different paywalls, prices and product experiences with real customers. Compare the results, choose the winner and launch it with confidence."
-          eyebrow="Experimentation"
-          title="Learn what works before you roll it out."
-        />
-        <div className="flex flex-col items-start gap-6 self-stretch xl:flex-row">
-          <ScaledMock className="min-w-0 flex-1" designWidth={944}>
-            <Illustration className="w-236 flex flex-col items-start rounded-lg overflow-clip relative shrink-0">
-              <div className="self-stretch flex items-center justify-between py-5 px-6">
-                <div className="flex flex-col gap-2">
-                  <div className="tracking-[-0.02em] font-sans font-medium text-white text-[15px]/4.5">
-                    Onboarding paywall: annual price
-                  </div>
-                  <div className="font-sans text-zinc-400 text-xs/4">
-                    Running · 14 days · 48,204 exposures
-                  </div>
-                </div>
-              </div>
-              <div className="self-stretch flex flex-col py-6.5 px-6 gap-5.5 grow items-start">
-                <div className="flex items-center gap-5 self-stretch">
-                  <div className="w-50 shrink-0 font-sans text-zinc-400 text-xs/4">
-                    Variant
-                  </div>
-                  <div className="grow basis-[0%] font-sans text-zinc-400 text-xs/4">
-                    Trial start rate
-                  </div>
-                  <div className="w-24 shrink-0 text-right font-sans flex justify-end flex-wrap text-zinc-400 text-xs/4">
-                    ARPU
-                  </div>
-                  <div className="w-21 shrink-0 text-right font-sans flex justify-end flex-wrap text-zinc-400 text-xs/4">
-                    Lift
-                  </div>
-                </div>
-                <div className="flex items-center gap-5 self-stretch">
-                  <div className="w-50 shrink-0 flex flex-col gap-0.75">
-                    <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                      Control
-                    </div>
-                    <div className="tracking-[-0.01em] font-sans text-zinc-400 text-[13px]/4">
-                      $49.99 / year · 33%
-                    </div>
-                  </div>
-                  <div className="grow basis-[0%] flex items-center gap-3">
-                    <GrowBar className="h-6.5 w-56 shrink-0 rounded-lg [background-color:var(--color-zinc-800)]" />
-                    <div className="font-sans font-medium text-[#FFFFFFB8] text-sm/4.5">
-                      <CountUp value="21.4%" />
-                    </div>
-                  </div>
-                  <div className="w-24 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-sm/4.5">
-                    <CountUp value="$1.62" />
-                  </div>
-                  <div className="w-21 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-zinc-500 text-sm/4.5">
-                    0%
-                  </div>
-                </div>
-                <div className="flex items-center gap-5 self-stretch">
-                  <div className="w-50 shrink-0 flex flex-col gap-0.75">
-                    <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                      Variant B
-                    </div>
-                    <div className="tracking-[-0.01em] font-sans text-zinc-400 text-[13px]/4">
-                      $59.99 / year · 33%
-                    </div>
-                  </div>
-                  <div className="grow basis-[0%] flex items-center gap-3">
-                    <GrowBar className="h-6.5 w-51.75 shrink-0 rounded-lg [background-color:var(--color-zinc-800)]" delay={0.08} />
-                    <div className="font-sans font-medium text-[#FFFFFFB8] text-sm/4.5">
-                      <CountUp delay={0.08} value="19.8%" />
-                    </div>
-                  </div>
-                  <div className="w-24 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-sm/4.5">
-                    <CountUp delay={0.08} value="$1.71" />
-                  </div>
-                  <div className="w-21 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap [color:var(--color-pistachio-600)] text-sm/4.5">
-                    <CountUp delay={0.08} value="+5.6%" />
-                  </div>
-                </div>
-                <div className="flex items-center gap-5 self-stretch">
-                  <div className="w-50 shrink-0 flex flex-col gap-0.75">
-                    <div className="tracking-[-0.02em] font-sans font-medium text-white text-sm/4.5">
-                      Variant C
-                    </div>
-                    <div className="tracking-[-0.01em] font-sans text-zinc-400 text-[13px]/4">
-                      $39.99 / year + 7d trial · 34%
-                    </div>
-                  </div>
-                  <div className="grow basis-[0%] flex items-center gap-3">
-                    <GrowBar className="h-6.5 w-73 shrink-0 rounded-lg [box-shadow:var(--color-blue-ribbon-300)_0px_0px_6px_inset] [background-color:var(--color-blue-ribbon-600)]" delay={0.16} />
-                    <div className="font-sans font-medium text-white text-sm/4.5">
-                      <CountUp delay={0.16} value="27.9%" />
-                    </div>
-                  </div>
-                  <div className="w-24 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap text-white text-sm/4.5">
-                    <CountUp delay={0.16} value="$2.04" />
-                  </div>
-                  <div className="w-21 shrink-0 text-right font-sans font-medium flex justify-end flex-wrap [color:var(--color-pistachio-600)] text-sm/4.5">
-                    <CountUp delay={0.16} value="+25.9%" />
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-center justify-between py-6.5 px-6 rounded-lg overflow-clip gap-12 w-236 [background-color:var(--color-zinc-950)]">
-                <div className="w-179 flex flex-col gap-2.25 shrink-0">
-                  <div className="self-stretch h-6.5 flex rounded-lg shrink-0 [background-color:var(--color-zinc-800)]">
-                    <GrowBar className="w-55.75 rounded-lg shrink-0 [box-shadow:var(--color-blue-ribbon-300)_0px_0px_6px_inset] [background-color:var(--color-blue-ribbon-600)]" delay={0.24} />
-                  </div>
-                  <div className="self-stretch flex items-center justify-between">
-                    <div className="font-sans text-zinc-400 text-xs/4">
-                      Rollout <CountUp delay={0.24} value="34%" />
-                    </div>
-                    <div className="font-sans text-zinc-400 text-xs/4">
-                      Target 100%
-                    </div>
-                  </div>
-                </div>
-                <Button className="relative shrink-0">Ship Variant C</Button>
-              </div>
-              <div className="absolute top-0 -bottom-2.25 inset-x-0 pointer-events-none" style={{ backgroundImage: 'radial-gradient(ellipse 114.14500000000001% 169.79% at 37.84% 1.6199999999999992% in oklab, oklab(17.1% 0 0 / 0%) 17.64%, oklab(14.1% 0.001 -0.004) 100%)' }} />
-            </Illustration>
-          </ScaledMock>
-          <div className="w-full max-w-107.25 flex flex-col items-start rounded-lg overflow-clip shrink-0 bg-origin-border border border-solid [border-color:var(--color-zinc-800)]" style={{ backgroundImage: 'radial-gradient(ellipse 100.22999999999999% 100% at 0% 0% in oklab, var(--color-zinc-900) 0%, var(--color-zinc-950) 100%)' }}>
-              <div className="self-stretch flex items-center justify-between py-5 px-6 border-b border-b-solid [border-bottom-color:var(--color-zinc-800)]">
-                <div className="tracking-[-0.02em] font-sans font-medium text-white text-[15px]/4.5">
-                  Feature flags
-                </div>
-                <div className="font-sans text-zinc-400 text-xs/4">
-                  Production
-                </div>
-              </div>
-              {FEATURE_FLAGS.map((flag, index) => (
-                <FlagRow
-                  flag={flag}
-                  key={flag.name}
-                  withBorder={index < FEATURE_FLAGS.length - 1}
-                />
-              ))}
-            </div>
-        </div>
-      </div>
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/footer.tsx b/apps/www/src/features/www/landing/sections/footer.tsx
deleted file mode 100644
index 9842d065f..000000000
--- a/apps/www/src/features/www/landing/sections/footer.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Logo } from "@voidhash/ui";
-
-import { MARKETING_COMPANY_LINKS } from "@/features/www/landing/marketing-nav-config";
-
-const GITHUB_REPO = "https://github.com/voidhashcom/voidhash";
-
-const LINK_COLUMNS: {
-  title: string;
-  links: { label: string; href?: string }[];
-}[] = [
-  {
-    title: "PRODUCT",
-    links: [
-      { label: "Paywalls", href: "/#paywalls" },
-      { label: "Analytics", href: "/#analytics" },
-      { label: "Experiments", href: "/#experimentation" },
-      { label: "Feature flags", href: "/#experimentation" },
-      { label: "CRM", href: "/#crm" },
-    ],
-  },
-  {
-    title: "DEVELOPERS",
-    links: [
-      { label: "Documentation", href: "/docs" },
-      { label: "React Native SDK", href: "/docs/react-native" },
-      { label: "MCP server", href: "/docs/mcp" },
-      { label: "CLI", href: "/docs/cli" },
-      { label: "API reference", href: "/docs/api" },
-    ],
-  },
-  {
-    title: "OPEN SOURCE",
-    links: [
-      { label: "GitHub", href: GITHUB_REPO },
-      { label: "Self-hosting", href: GITHUB_REPO },
-      { label: "Licensing", href: `${GITHUB_REPO}/blob/main/LICENSE.md` },
-      { label: "Contributing", href: `${GITHUB_REPO}/blob/main/CONTRIBUTING.md` },
-      { label: "Changelog", href: `${GITHUB_REPO}/releases` },
-    ],
-  },
-  {
-    title: "COMPANY",
-    links: [
-      ...MARKETING_COMPANY_LINKS.map((link) => ({ label: link.label, href: link.href })),
-      { label: "Blog" },
-      { label: "Security" },
-      { label: "Privacy" },
-      { label: "Contact" },
-    ],
-  },
-];
-
-const BOTTOM_LINKS: { label: string; href?: string }[] = [
-  { label: "Status" },
-  { label: "Terms" },
-  { label: "X", href: "https://x.com/voidhashcom" },
-  { label: "Discord", href: "https://discord.gg/voidhash" },
-  { label: "GitHub", href: GITHUB_REPO },
-];
-
-function FooterLink({
-  label,
-  href,
-  className,
-}: {
-  label: string;
-  href?: string;
-  className: string;
-}) {
-  if (!href) {
-    return <div className={className}>{label}</div>;
-  }
-  const external = href.startsWith("http");
-  return (
-    <a
-      className={`${className} transition-colors hover:text-white`}
-      href={href}
-      rel={external ? "noreferrer" : undefined}
-      target={external ? "_blank" : undefined}
-    >
-      {label}
-    </a>
-  );
-}
-
-/** Renders the landing page footer. */
-export function LandingFooter() {
-  return (
-    <footer className="flex min-w-0 flex-col items-center self-stretch">
-      <div className="flex w-full max-w-[1656px] flex-col gap-14 px-6 pt-16 pb-16 md:px-12 md:pt-24 lg:flex-row lg:items-start lg:justify-between lg:gap-20 xl:px-32">
-        <div className="flex w-full max-w-85 shrink-0 flex-col gap-5.5">
-          <a aria-label="Voidhash home" href="/">
-            <Logo className="h-[17px] w-auto text-white" />
-          </a>
-          <div className="font-sans text-zinc-400 text-sm/normal tracking-[-0.01em]">
-            The open-source growth platform for mobile apps.
-          </div>
-        </div>
-        <div className="grid grow grid-cols-2 gap-x-8 gap-y-12 sm:grid-cols-4 lg:flex lg:items-start lg:justify-end lg:gap-20">
-          {LINK_COLUMNS.map((column) => (
-            <div className="flex flex-col gap-3.5 lg:w-42.5 lg:shrink-0" key={column.title}>
-              <div className="font-mono text-zinc-500 text-[11px]/3.5 tracking-[0.06em]">
-                {column.title}
-              </div>
-              {column.links.map((link) => (
-                <FooterLink
-                  className="w-max font-sans text-zinc-200 text-sm/4.5 tracking-[-0.01em]"
-                  href={link.href}
-                  key={link.label}
-                  label={link.label}
-                />
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex w-full max-w-[1656px] flex-col gap-4 px-6 pt-6.5 pb-10 sm:flex-row sm:items-center sm:justify-between sm:gap-10 md:px-12 xl:px-32">
-        <div className="font-sans text-zinc-500 text-[13px]/4 tracking-[-0.01em]">
-          © 2026 Voidhash s.r.o.
-        </div>
-        <div className="flex flex-wrap items-center gap-7">
-          {BOTTOM_LINKS.map((link) => (
-            <FooterLink
-              className="font-sans text-zinc-500 text-[13px]/4 tracking-[-0.01em]"
-              href={link.href}
-              key={link.label}
-              label={link.label}
-            />
-          ))}
-        </div>
-      </div>
-    </footer>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/get-started.tsx b/apps/www/src/features/www/landing/sections/get-started.tsx
deleted file mode 100644
index 94a3fadd4..000000000
--- a/apps/www/src/features/www/landing/sections/get-started.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { ArrowUpRightIcon, ChevronRightIcon } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { HeroShader } from "@/features/www/hero/hero-shader";
-import { signUpCtaLabel } from "@/lib/waitlist";
-
-import { LandingSection } from "../shared";
-
-const COMMUNITY_CARDS: {
-  title: string;
-  description: string;
-  action: string;
-  href: string;
-  icon: ReactNode;
-}[] = [
-  {
-    title: "GitHub",
-    description: "The full platform, SDKs and paywall examples in one repo.",
-    action: "Star the repo",
-    href: "https://github.com/voidhashcom/voidhash",
-    icon: (
-      <svg aria-hidden="true" width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-        <path d="M12 2C6.48 2 2 6.58 2 12.24c0 4.53 2.87 8.37 6.84 9.72.5.1.68-.22.68-.49v-1.7c-2.78.62-3.37-1.37-3.37-1.37-.46-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.89 1.57 2.34 1.12 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.05 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05a9.3 9.3 0 0 1 5 0c1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.92-2.34 4.79-4.57 5.04.36.32.68.94.68 1.9v2.82c0 .27.18.6.69.49A10.06 10.06 0 0 0 22 12.24C22 6.58 17.52 2 12 2Z" fill="var(--zinc-400)" />
-      </svg>
-    ),
-  },
-  {
-    title: "Discord",
-    description: "Ask questions, share paywalls and get support straight from the team.",
-    action: "Join the server",
-    href: "https://discord.gg/voidhash",
-    icon: (
-      <svg aria-hidden="true" width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-        <path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.79.037c-.21.375-.444.865-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.32.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .31.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.94.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .78.009c.12.099.246.198.373.292a.077.077 0 0 1-.6.127 12.3 12.3 0 0 1-1.873.891.077.077 0 0 0-.41.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .84.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028ZM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z" fill="var(--zinc-400)" />
-      </svg>
-    ),
-  },
-  {
-    title: "Docs",
-    description: "Guides, API reference and a hello-world integration for every SDK.",
-    action: "Browse docs",
-    href: "/docs",
-    icon: (
-      <svg aria-hidden="true" width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: '0' }}>
-        <path d="M4 4.5A1.5 1.5 0 0 1 5.5 3H10a2 2 0 0 1 2 2v15a2 2 0 0 0-2-2H5.5A1.5 1.5 0 0 1 4 16.5v-12Z" fill="none" stroke="var(--zinc-400)" strokeWidth="1.6" strokeLinejoin="round" />
-        <path d="M20 4.5A1.5 1.5 0 0 0 18.5 3H14a2 2 0 0 0-2 2v15a2 2 0 0 1 2-2h4.5a1.5 1.5 0 0 0 1.5-1.5v-12Z" fill="none" stroke="var(--zinc-400)" strokeWidth="1.6" strokeLinejoin="round" />
-      </svg>
-    ),
-  },
-];
-
-/** Renders the closing call to action, backed by the lenticular gradient shader. */
-export function LandingGetStarted() {
-  return (
-    <LandingSection>
-      <div className="relative flex flex-col items-center justify-center overflow-clip px-6 py-24 md:py-36 xl:py-44">
-        <div className="absolute inset-0">
-          <HeroShader />
-        </div>
-        <div className="relative flex flex-col items-center gap-8 md:gap-11">
-          <div className="flex flex-col items-center gap-6">
-            <h2 className="text-balance text-center font-medium font-sans text-[36px] text-white leading-[110%] tracking-[-0.03em] md:text-[48px] xl:text-[56px]">
-              Start selling in an afternoon
-            </h2>
-            <p className="max-w-[500px] text-center font-sans text-zinc-400 text-base/6.5 tracking-[-0.03em] md:text-xl/8">
-              Connect your app, publish your first paywall and start turning your product into a
-              business.
-            </p>
-          </div>
-          <div className="flex flex-col items-center gap-3 pt-1 sm:flex-row">
-            <Button asChild size="lg">
-              <a href="/auth/sign-up">
-                {signUpCtaLabel("Get started for free")}
-                <ChevronRightIcon data-icon="inline-end" />
-              </a>
-            </Button>
-            <Button asChild size="lg" variant="ghost">
-              <a href="/docs">
-                View docs
-                <ChevronRightIcon data-icon="inline-end" />
-              </a>
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div className="grid grid-cols-1 divide-y divide-zinc-800 border-zinc-800 border-t md:grid-cols-3 md:divide-x md:divide-y-0">
-        {COMMUNITY_CARDS.map((card) => (
-          <div
-            className="flex flex-col items-center gap-5 px-8 py-12 md:px-14 md:py-18"
-            key={card.title}
-          >
-            {card.icon}
-            <div className="flex flex-col items-center gap-2.5">
-              <div className="font-medium font-sans text-zinc-50 text-xl leading-[120%] tracking-[-0.02em]">
-                {card.title}
-              </div>
-              <p className="max-w-[340px] text-center font-sans text-zinc-400 text-base/6.5 tracking-[-0.01em]">
-                {card.description}
-              </p>
-            </div>
-            <Button asChild variant="outline">
-              <a
-                href={card.href}
-                rel={card.href.startsWith("http") ? "noreferrer" : undefined}
-                target={card.href.startsWith("http") ? "_blank" : undefined}
-              >
-                {card.action}
-                <ArrowUpRightIcon data-icon="inline-end" />
-              </a>
-            </Button>
-          </div>
-        ))}
-      </div>
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/hero.tsx b/apps/www/src/features/www/landing/sections/hero.tsx
deleted file mode 100644
index d98712fa0..000000000
--- a/apps/www/src/features/www/landing/sections/hero.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from "@voidhash/ui";
-import { ChevronRightIcon } from "lucide-react";
-
-import { HeroShader } from "@/features/www/hero/hero-shader";
-import { signUpCtaLabel } from "@/lib/waitlist";
-
-import { LandingSection } from "../shared";
-
-/** Renders the landing page hero, backed by the lenticular gradient shader. */
-export function LandingHero() {
-  return (
-    <LandingSection>
-      <div className="relative flex flex-col items-center overflow-clip px-6 py-24 md:py-40 xl:py-56">
-        <div className="absolute inset-0">
-          <HeroShader />
-        </div>
-        <div className="relative flex w-full max-w-[826px] flex-col items-center gap-8 md:gap-11.5">
-          <div className="flex items-center justify-center rounded-[23px] bg-zinc-900 px-4 py-1.75 [outline:1px_solid_var(--zinc-800)] -outline-offset-1">
-            <div className="font-sans font-semibold text-zinc-400 text-sm/normal tracking-[-0.03em]">
-              Currently available in Alpha preview
-            </div>
-          </div>
-          <div className="flex flex-col items-center gap-10 md:gap-12">
-            <div className="flex flex-col items-center gap-6">
-              <h1 className="text-balance text-center font-medium font-sans text-[40px] text-white leading-[110%] tracking-[-0.03em] md:text-[56px] xl:text-[64px]">
-                The AI-native growth platform for mobile apps
-              </h1>
-              <p className="max-w-[628px] text-center font-sans text-zinc-400 text-base/6.5 tracking-[-0.03em] md:text-xl/8">
-                Build paywalls, manage customers, analyze data, A/B test and much more – all in a
-                single integrated platform.
-              </p>
-            </div>
-            <div className="flex flex-col items-center gap-3 sm:flex-row">
-              <Button asChild size="lg">
-                <a href="/auth/sign-up">
-                  {signUpCtaLabel("Get Started")}
-                  <ChevronRightIcon data-icon="inline-end" />
-                </a>
-              </Button>
-              <Button asChild size="lg" variant="ghost">
-                <a href="/docs">
-                  Documentation
-                  <ChevronRightIcon data-icon="inline-end" />
-                </a>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/navbar.tsx b/apps/www/src/features/www/landing/sections/navbar.tsx
deleted file mode 100644
index cdf1a92cf..000000000
--- a/apps/www/src/features/www/landing/sections/navbar.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-"use client";
-
-import {
-  Button,
-  Logo,
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetTitle,
-  SheetTrigger,
-  navigationMenuTriggerStyle,
-} from "@voidhash/ui";
-import {
-  BookOpenIcon,
-  BracesIcon,
-  ChartColumnIcon,
-  FlaskConicalIcon,
-  LayoutTemplateIcon,
-  type LucideIcon,
-  MenuIcon,
-  UsersIcon,
-} from "lucide-react";
-
-import { MARKETING_COMPANY_LINKS } from "@/features/www/landing/marketing-nav-config";
-import { signUpCtaLabel } from "@/lib/waitlist";
-
-type NavLink = {
-  label: string;
-  href: string;
-  description?: string;
-  icon: LucideIcon;
-};
-
-/**
- * Product links point at landing page sections, so they stay root-relative: from a standalone
- * marketing page a bare `#paywalls` fragment resolves against a page that has no such section
- * and goes nowhere.
- */
-const PRODUCT_LINKS: NavLink[] = [
-  {
-    label: "Paywalls",
-    href: "/#paywalls",
-    description: "No-code designer with AI, shipped without a release.",
-    icon: LayoutTemplateIcon,
-  },
-  {
-    label: "Analytics",
-    href: "/#analytics",
-    description: "See what drives conversion and revenue.",
-    icon: ChartColumnIcon,
-  },
-  {
-    label: "Experimentation",
-    href: "/#experimentation",
-    description: "Try ideas, compare results and launch what works.",
-    icon: FlaskConicalIcon,
-  },
-  {
-    label: "CRM",
-    href: "/#crm",
-    description: "See the full journey behind every customer.",
-    icon: UsersIcon,
-  },
-];
-
-const DEVELOPER_LINKS: NavLink[] = [
-  { label: "Documentation", href: "/docs", icon: BookOpenIcon },
-  { label: "API reference", href: "/docs/api", icon: BracesIcon },
-];
-
-/** Shared look for the top-level triggers and links. */
-const NAV_ITEM_CLASS =
-  "h-auto rounded-lg px-3 py-2 font-normal font-sans text-zinc-400 text-sm/4.5 tracking-[-0.03em] transition-colors hover:bg-white/5 hover:text-white focus:bg-white/5 focus:text-white data-pressed:bg-white/10 data-popup-open:bg-white/5 data-popup-open:text-white data-popup-open:hover:bg-white/5";
-
-/** Shared look for the links inside a menu panel. */
-const PANEL_ITEM_CLASS =
-  "items-start gap-3 p-3 transition-colors hover:bg-zinc-900 focus:bg-zinc-900";
-
-function ProductItem({ link }: { link: NavLink }) {
-  const Icon = link.icon;
-  return (
-    <li>
-      <NavigationMenuLink className={PANEL_ITEM_CLASS} render={<a href={link.href} />}>
-        <Icon className="mt-0.5 size-4 shrink-0 text-zinc-500" />
-        <div className="flex flex-col gap-1">
-          <div className="font-medium font-sans text-white text-sm/4.5 tracking-[-0.02em]">
-            {link.label}
-          </div>
-          <div className="font-sans text-zinc-400 text-xs/4 tracking-[-0.01em]">
-            {link.description}
-          </div>
-        </div>
-      </NavigationMenuLink>
-    </li>
-  );
-}
-
-function DeveloperItem({ link }: { link: NavLink }) {
-  const Icon = link.icon;
-  return (
-    <li>
-      <NavigationMenuLink
-        className={`${PANEL_ITEM_CLASS} items-center gap-2.5 p-2.5`}
-        render={<a href={link.href} />}
-      >
-        <Icon className="size-4 shrink-0 text-zinc-500" />
-        <div className="font-sans text-zinc-200 text-sm/4.5 tracking-[-0.02em]">{link.label}</div>
-      </NavigationMenuLink>
-    </li>
-  );
-}
-
-/** Renders the landing page navigation bar. */
-export function LandingNavbar() {
-  return (
-    <div className="sticky top-0 z-50 flex min-w-0 flex-col items-center self-stretch border-zinc-800 border-b bg-zinc-950/85 backdrop-blur-md">
-      <div className="flex w-full max-w-[1656px] items-center justify-between gap-4 border-zinc-800 p-4 md:p-6 xl:border-x">
-        <a aria-label="Voidhash home" href="/">
-          <Logo className="h-[17px] w-auto text-white" />
-        </a>
-        <NavigationMenu className="hidden lg:flex" popupClassName="dark">
-          <NavigationMenuList className="-mx-3 gap-1">
-            <NavigationMenuItem>
-              <NavigationMenuTrigger className={NAV_ITEM_CLASS}>Product</NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <ul className="grid w-[540px] grid-cols-2 gap-1">
-                  {PRODUCT_LINKS.map((link) => (
-                    <ProductItem key={link.href} link={link} />
-                  ))}
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger className={NAV_ITEM_CLASS}>Developers</NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <ul className="grid w-[240px] gap-1">
-                  {DEVELOPER_LINKS.map((link) => (
-                    <DeveloperItem key={link.href} link={link} />
-                  ))}
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-            {MARKETING_COMPANY_LINKS.map((link) => (
-              <NavigationMenuItem key={link.href}>
-                <NavigationMenuLink
-                  className={`${navigationMenuTriggerStyle()} ${NAV_ITEM_CLASS}`}
-                  render={<a href={link.href} />}
-                >
-                  {link.label}
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-            ))}
-          </NavigationMenuList>
-        </NavigationMenu>
-        <div className="hidden items-center gap-4 lg:flex">
-          <Button asChild variant="outline">
-            <a href="/auth/login">Log in</a>
-          </Button>
-          <Button asChild>
-            <a href="/auth/sign-up">{signUpCtaLabel("Sign up")}</a>
-          </Button>
-        </div>
-        <Sheet>
-          <SheetTrigger asChild className="lg:hidden">
-            <Button aria-label="Open menu" size="icon" variant="ghost">
-              <MenuIcon />
-            </Button>
-          </SheetTrigger>
-          <SheetContent className="dark flex flex-col border-zinc-800 bg-zinc-950" side="right">
-            <SheetTitle className="sr-only">Menu</SheetTitle>
-            <nav className="flex flex-1 flex-col gap-8 overflow-y-auto px-6 pt-12">
-              {[
-                { title: "Product", links: PRODUCT_LINKS },
-                { title: "Developers", links: DEVELOPER_LINKS },
-                { title: "Company", links: MARKETING_COMPANY_LINKS },
-              ]
-                .filter((group) => group.links.length > 0)
-                .map((group) => (
-                  <div className="flex flex-col gap-4" key={group.title}>
-                    <div className="font-sans text-zinc-500 text-xs/4 tracking-[-0.01em]">
-                      {group.title}
-                    </div>
-                    {group.links.map((link) => (
-                      <SheetClose asChild key={link.href}>
-                        <a
-                          className="flex items-center gap-3 font-sans text-zinc-200 text-base tracking-[-0.02em] transition-colors hover:text-white"
-                          href={link.href}
-                        >
-                          <link.icon className="size-4 shrink-0 text-zinc-500" />
-                          {link.label}
-                        </a>
-                      </SheetClose>
-                    ))}
-                  </div>
-                ))}
-            </nav>
-            <div className="mt-auto flex flex-col gap-3 px-6 pb-8">
-              <Button asChild size="lg" variant="outline">
-                <a href="/auth/login">Log in</a>
-              </Button>
-              <Button asChild size="lg">
-                <a href="/auth/sign-up">{signUpCtaLabel("Sign up")}</a>
-              </Button>
-            </div>
-          </SheetContent>
-        </Sheet>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/paywalls.tsx b/apps/www/src/features/www/landing/sections/paywalls.tsx
deleted file mode 100644
index 70100be80..000000000
--- a/apps/www/src/features/www/landing/sections/paywalls.tsx
+++ /dev/null
@@ -1,576 +0,0 @@
-import {
-  PaywallBuildCanvas,
-  PaywallBuildProvider,
-  PaywallBuildTerminal,
-} from "../paywall-build/paywall-build";
-import { LandingSection, ScaledMock, SectionHeader } from "../shared";
-import { LandingAgentCompatibility } from "./agent-compatibility";
-
-/** Renders the paywalls product section. */
-export function LandingPaywalls() {
-  return (
-    <LandingSection id="paywalls">
-      <div className="flex flex-col items-start justify-center gap-12 px-6 pt-16 pb-10 md:gap-23 md:px-12 md:pt-24 md:pb-14 xl:px-32 xl:pt-32 xl:pb-16">
-        <SectionHeader
-          description="Maximize your revenue by quickly testing your paywall designs and pricing with a familiar no-code paywall builder."
-          eyebrow="Paywalls"
-          title="Ship paywalls in minutes with our no-code designer and full AI integration."
-        />
-        <PaywallBuildProvider className="flex flex-col gap-6 self-stretch">
-        <PaywallBuildTerminal />
-        <ScaledMock compactDesignWidth={520} designWidth={1368}>
-          <div className="h-211 xl:h-195.5 w-130 xl:w-342 relative shrink-0">
-          <div className="flex absolute w-130 xl:w-342 left-0 top-0 flex-col items-start rounded-lg overflow-clip [background-color:var(--color-zinc-950)] border border-solid [border-color:var(--zinc-800)]">
-            <div className="flex items-start gap-6.5 self-stretch p-3 border-b border-b-solid border-b-zinc-800/50">
-              <div className="flex w-3.25 items-start gap-2.5 shrink-0">
-                <div className="h-3.25 rounded-full self-stretch w-3.25 shrink-0 bg-zinc-700" />
-                <div className="h-3.25 rounded-full self-stretch w-3.25 shrink-0 bg-zinc-700" />
-                <div className="h-3.25 rounded-full self-stretch w-3.25 shrink-0 bg-zinc-700" />
-              </div>
-            </div>
-            <div className="h-201.5 xl:h-186 w-130 xl:w-342 relative shrink-0 border border-solid border-zinc-800/50">
-              <div className="w-130 xl:w-342 h-201.5 xl:h-186 top-[50%] left-[50%] absolute bg-zinc-900" style={{ translate: '-50% -50%' }} />
-              <div className="items-center h-13.5 flex top-0 justify-between absolute px-3 bg-zinc-900 border-b border-b-solid border-b-zinc-800 -inset-x-px">
-                <div className="items-center flex justify-center absolute gap-2 inset-0">
-                  <div className="text-sm leading-[142.857%] font-sans text-zinc-50">
-                    Example
-                  </div>
-                </div>
-                <div className="items-center flex gap-2 relative">
-                  <div className="items-center flex py-3 px-2 rounded-lg">
-                    <svg aria-hidden="true" viewBox="0 0 120 61" xmlns="http://www.w3.org/2000/svg" fontSize="16px" width="120" height="61" style={{ height: '16px', width: '31.4688px', overflow: 'clip', flexShrink: '0' }}>
-                      <path d="M60 30.5L90 0L120 0L120 30.5L90 30.5V61H60L60 30.5ZM0 30.5L30 30.5L30 0L60 0V30.5L30 61H0V30.5Z" fontSize="16px" fill="#FFFFFF" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                    </svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '16px', width: '16px', marginLeft: '8px', overflow: 'clip', flexShrink: '0' }}>
-                      <path d="m6 9 6 6 6-6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                    </svg>
-                  </div>
-                  <div className="items-center hidden xl:flex w-fit rounded-lg relative [box-shadow:#0000000D_0px_1px_2px] bg-[#27272A4D] border border-solid border-zinc-800">
-                    <div className="h-full w-[91.5px] top-0 left-0 absolute rounded-[9px] bg-zinc-800" />
-                    <div className="items-center h-7 flex shrink-0 justify-center min-w-0 px-3 rounded-[9px] gap-1.5 relative">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '16px', flexShrink: '0', width: '16px', overflow: 'clip' }}>
-                        <path d="m14.622 17.897-10.68-2.913" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                      </svg>
-                      <div className="inline-block text-sm leading-[142.857%] text-center w-max shrink-0 font-sans font-medium text-zinc-50">
-                        Design
-                      </div>
-                    </div>
-                    <div className="items-center h-7 flex shrink-0 justify-center min-w-0 px-3 rounded-[9px] gap-1.5 relative">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '16px', flexShrink: '0', width: '16px', overflow: 'clip' }}>
-                        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <circle cx="12" cy="12" r="3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                      </svg>
-                      <div className="inline-block text-sm leading-[142.857%] text-center w-max shrink-0 font-sans font-medium text-zinc-400">
-                        Preview
-                      </div>
-                    </div>
-                    <div className="items-center h-7 flex shrink-0 justify-center min-w-0 px-3 rounded-[9px] gap-1.5 relative">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '16px', flexShrink: '0', width: '16px', overflow: 'clip' }}>
-                        <path d="m18 16 4-4-4-4" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="m6 8-4 4 4 4" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="m14.5 4-5 16" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                      </svg>
-                      <div className="inline-block text-sm leading-[142.857%] text-center w-max shrink-0 font-sans font-medium text-zinc-400">
-                        Code
-                      </div>
-                    </div>
-                    <div className="items-center h-7 flex shrink-0 justify-center min-w-0 px-3 rounded-[9px] gap-1.5 relative">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '16px', flexShrink: '0', width: '16px', overflow: 'clip' }}>
-                        <path d="m5 8 6 6" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="m4 14 6-6 2-3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="M2 5h12" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="M7 2h1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="m22 22-5-10-5 10" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                        <path d="M14 18h6" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                      </svg>
-                      <div className="inline-block text-sm leading-[142.857%] text-center w-max shrink-0 font-sans font-medium text-zinc-400">
-                        Translate
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="items-center flex gap-2 relative">
-                  <div className="items-center h-7 flex shrink-0 justify-center px-2.5 rounded-md gap-1 bg-zinc-800 border border-solid border-[#00000000]">
-                    <div className="flex text-[12.8px] leading-[150%] text-center w-max shrink-0 font-sans font-medium text-zinc-50">
-                      Share
-                    </div>
-                  </div>
-                  <div className="items-center h-7 flex shrink-0 justify-center px-2.5 rounded-md gap-1 bg-blue-ribbon-600 border border-solid border-[#00000000]">
-                    <div className="flex text-[12.8px] leading-[150%] text-center w-max shrink-0 font-sans font-medium text-white">
-                      Publish
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="-bottom-0.5 hidden xl:flex flex-col w-69 top-13.5 -right-px absolute bg-zinc-900 border-l border-l-solid border-l-zinc-800">
-                <div className="flex basis-[0%] flex-col grow overflow-clip relative">
-                  <div className="absolute inset-0">
-                    <div className="h-full">
-                      <div className="overflow-clip size-full">
-                        <div className="table min-w-full">
-                          <div className="">
-                            <div className="border-b border-b-solid border-b-zinc-800">
-                              <div className="items-center h-7 flex justify-between px-4 my-2">
-                                <div className="text-sm leading-[142.857%] font-sans font-medium text-zinc-50">
-                                  Variables
-                                </div>
-                                <div className="items-center flex justify-end gap-2">
-                                  <div className="items-center flex shrink-0 justify-center rounded-md border border-solid border-[#00000000] size-7">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', flexShrink: '0', width: '14px', opacity: '0.7', overflow: 'clip' }}>
-                                      <path d="m6 9 6 6 6-6" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                    </svg>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="border-b border-b-solid border-b-zinc-800">
-                              <div className="items-center h-7 flex justify-between px-4 my-2">
-                                <div className="text-sm leading-[142.857%] font-sans font-medium text-zinc-50">
-                                  States
-                                </div>
-                                <div className="items-center flex justify-end gap-2">
-                                  <div className="items-center flex shrink-0 justify-center rounded-md bg-zinc-800 border border-solid border-[#00000000] size-7">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', flexShrink: '0', width: '14px', opacity: '0.7', overflow: 'clip' }}>
-                                      <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      <circle cx="12" cy="12" r="3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                    </svg>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="border-b border-b-solid border-b-zinc-800">
-                              <div className="items-center h-7 flex justify-between px-4 my-2">
-                                <div className="text-sm leading-[142.857%] font-sans font-medium text-zinc-50">
-                                  Layout
-                                </div>
-                              </div>
-                              <div className="pb-4 px-4">
-                                <div className="mb-4">
-                                  <div className="pt-2">
-                                    <div className="flex gap-2">
-                                      <div className="flex flex-col gap-2">
-                                        <div className="">
-                                          <div className="items-center flex w-fit rounded-lg relative [box-shadow:#0000000D_0px_1px_2px] bg-[#27272A4D] border border-solid border-zinc-800">
-                                            <div className="h-full w-9.5 top-0 left-0 absolute rounded-[9px] bg-zinc-800" />
-                                            <div className="items-center h-7 flex basis-[0%] grow justify-center min-w-0 px-3 rounded-[9px] gap-2 relative">
-                                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', flexShrink: '0', width: '14px', overflow: 'clip' }}>
-                                                <path d="M12 5v14" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                <path d="m19 12-7 7-7-7" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                              </svg>
-                                            </div>
-                                            <div className="items-center h-7 flex basis-[0%] grow justify-center min-w-0 px-3 rounded-[9px] gap-2 relative">
-                                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', flexShrink: '0', width: '14px', overflow: 'clip' }}>
-                                                <path d="M5 12h14" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                <path d="m12 5 7 7-7 7" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                              </svg>
-                                            </div>
-                                          </div>
-                                        </div>
-                                        <div className="">
-                                          <div className="items-center h-7 flex w-full rounded-sm bg-[#27272A99]">
-                                            <div className="h-7 flex basis-[0%] grow w-full min-w-0 items-center pr-1 pl-1.5 overflow-clip [box-shadow:#FAFAFA_0px_0px_0px]">
-                                              <div className="h-fit w-full overflow-clip">
-                                                <div className="text-sm leading-[142.857%] font-sans text-zinc-50 line-clamp-1">
-                                                  0
-                                                </div>
-                                              </div>
-                                            </div>
-                                            <div className="items-center flex justify-center order-first pr-0.5 pl-2 gap-2 py-1">
-                                              <div className="items-center flex justify-center shrink-0 size-3.5">
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                                  <rect width="13" height="7" x="8" y="3" rx="1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '7px', boxSizing: 'border-box', width: '13px', transformOrigin: '0px 0px' }} />
-                                                  <path d="m2 9 3 3-3 3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                  <rect width="13" height="7" x="8" y="14" rx="1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '7px', boxSizing: 'border-box', width: '13px', transformOrigin: '0px 0px' }} />
-                                                </svg>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div className="">
-                                        <div className="flex rounded-sm bg-[#27272A99]">
-                                          <div className="flex basis-[0%] flex-col grow">
-                                            <div className="items-center flex basis-[0%] grow w-21 justify-center py-1 bg-[#27272ACC]">
-                                              <div className="flex basis-[0%] flex-col grow justify-around">
-                                                <div className="h-0.5 w-2 rounded-md shrink-0 bg-white" />
-                                                <div className="h-0.5 w-2 rounded-md shrink-0 bg-white" />
-                                                <div className="h-0.5 w-2 rounded-md shrink-0 bg-white" />
-                                              </div>
-                                            </div>
-                                            <div className="items-center flex basis-[0%] grow w-21 justify-center py-1 relative">
-                                              <div className="top-[50%] left-[50%] absolute" style={{ translate: '-50% -50%' }}>
-                                                <div className="-bottom-0.5 top-0 -right-0.5 left-0 rounded-full absolute bg-zinc-400 size-0.5" style={{ translate: '-50% -50%' }} />
-                                              </div>
-                                            </div>
-                                            <div className="items-center flex basis-[0%] grow w-21 justify-center py-1 relative">
-                                              <div className="top-[50%] left-[50%] absolute" style={{ translate: '-50% -50%' }}>
-                                                <div className="-bottom-0.5 top-0 -right-0.5 left-0 rounded-full absolute bg-zinc-400 size-0.5" style={{ translate: '-50% -50%' }} />
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                        <div className="items-center inline-flex justify-center rounded-md bg-zinc-800 border border-solid border-[#00000000] size-7">
-                                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', flexShrink: '0', width: '14px', opacity: '0.7', overflow: 'clip' }}>
-                                            <path d="M14 17H5" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                            <path d="M19 7h-9" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                            <circle cx="17" cy="17" r="3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                            <circle cx="7" cy="7" r="3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                          </svg>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div className="mb-4">
-                                  <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-400">
-                                    Dimensions
-                                  </div>
-                                  <div className="pt-2">
-                                    <div className="flex gap-2">
-                                      <div className="">
-                                        <div className="items-center h-7 flex w-full opacity-[0.5] rounded-sm bg-[#27272ACC]">
-                                          <div className="h-7 flex basis-[0%] grow w-full min-w-0 opacity-[0.5] items-center pr-1 pl-1.5 overflow-clip [box-shadow:#FAFAFA_0px_0px_0px]">
-                                            <div className="h-fit w-full overflow-clip">
-                                              <div className="text-sm leading-[142.857%] font-sans text-zinc-50 line-clamp-1">
-                                                375
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <div className="items-center flex justify-center order-first pr-0.5 pl-2 gap-2 py-1">
-                                            <div className="items-center flex justify-center opacity-[0.5] shrink-0 size-3.5">
-                                              <div className="text-xs leading-[133.333%] font-sans font-bold text-zinc-400">
-                                                W
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div className="">
-                                        <div className="items-center h-7 flex w-full opacity-[0.5] rounded-sm bg-[#27272ACC]">
-                                          <div className="h-7 flex basis-[0%] grow w-full min-w-0 opacity-[0.5] items-center pr-1 pl-1.5 overflow-clip [box-shadow:#FAFAFA_0px_0px_0px]">
-                                            <div className="h-fit w-full overflow-clip">
-                                              <div className="text-sm leading-[142.857%] font-sans text-zinc-50 line-clamp-1">
-                                                812
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <div className="items-center flex justify-center order-first pr-0.5 pl-2 gap-2 py-1">
-                                            <div className="items-center flex justify-center opacity-[0.5] shrink-0 size-3.5">
-                                              <div className="text-xs leading-[133.333%] font-sans font-bold text-zinc-400">
-                                                H
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div className="">
-                                  <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-400">
-                                    Padding
-                                  </div>
-                                  <div className="pt-2">
-                                    <div className="flex gap-2">
-                                      <div className="flex flex-col gap-2">
-                                        <div className="flex gap-2">
-                                          <div className="">
-                                            <div className="items-center h-7 flex w-full rounded-sm bg-[#27272A99]">
-                                              <div className="h-7 flex basis-[0%] grow w-full min-w-0 items-center pr-1 pl-1.5 overflow-clip [box-shadow:#FAFAFA_0px_0px_0px]">
-                                                <div className="h-fit w-full overflow-clip">
-                                                  <div className="text-sm leading-[142.857%] font-sans text-zinc-50 line-clamp-1">
-                                                    0
-                                                  </div>
-                                                </div>
-                                              </div>
-                                              <div className="items-center flex justify-center order-first pr-0.5 pl-2 gap-2 py-1">
-                                                <div className="items-center flex justify-center shrink-0 size-3.5">
-                                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                                    <path d="M15 10V9" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M15 15v-1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M15 21v-2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M15 5V3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M9 10V9" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M9 15v-1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M9 21v-2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M9 5V3" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <rect x="3" y="3" width="18" height="18" rx="2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '18px', boxSizing: 'border-box', width: '18px', transformOrigin: '0px 0px' }} />
-                                                  </svg>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <div className="">
-                                            <div className="items-center h-7 flex w-full rounded-sm bg-[#27272A99]">
-                                              <div className="h-7 flex basis-[0%] grow w-full min-w-0 items-center pr-1 pl-1.5 overflow-clip [box-shadow:#FAFAFA_0px_0px_0px]">
-                                                <div className="h-fit w-full overflow-clip">
-                                                  <div className="text-sm leading-[142.857%] font-sans text-zinc-50 line-clamp-1">
-                                                    0
-                                                  </div>
-                                                </div>
-                                              </div>
-                                              <div className="items-center flex justify-center order-first pr-0.5 pl-2 gap-2 py-1">
-                                                <div className="items-center flex justify-center shrink-0 size-3.5">
-                                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                                    <path d="M14 15h1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M14 9h1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M19 15h2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M19 9h2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M3 15h2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M3 9h2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M9 15h1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <path d="M9 9h1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                                    <rect x="3" y="3" width="18" height="18" rx="2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '18px', boxSizing: 'border-box', width: '18px', transformOrigin: '0px 0px' }} />
-                                                  </svg>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div className="items-center flex shrink-0 justify-center rounded-md bg-zinc-800 border border-solid border-[#00000000] size-7">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', flexShrink: '0', width: '14px', opacity: '0.7', overflow: 'clip' }}>
-                                          <path d="M3 7V5a2 2 0 0 1 2-2h2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                          <path d="M17 3h2a2 2 0 0 1 2 2v2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                          <path d="M21 17v2a2 2 0 0 1-2 2h-2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                          <path d="M7 21H5a2 2 0 0 1-2-2v-2" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                          <rect width="10" height="8" x="7" y="8" rx="1" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '8px', boxSizing: 'border-box', width: '10px', transformOrigin: '0px 0px' }} />
-                                        </svg>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="border-b border-b-solid border-b-zinc-800">
-                              <div className="items-center h-7 flex justify-between px-4 my-2">
-                                <div className="text-sm leading-[142.857%] font-sans font-medium text-zinc-50">
-                                  Fill
-                                </div>
-                              </div>
-                              <div className="pb-4 px-4">
-                                <div className="">
-                                  <div className="items-center flex gap-2">
-                                    <div className="items-center h-7 flex basis-[0%] grow px-1.5 rounded-sm gap-2 bg-[#27272A99]">
-                                      <div className="shrink-0 rounded-[3px] overflow-clip relative size-5">
-                                        <div className="absolute inset-0" style={{ backgroundImage: 'linear-gradient(in oklab 45deg, oklab(60% 0 0) 25%, oklab(0% 0 0 / 0%) 25%), linear-gradient(in oklab 315deg, oklab(60% 0 0) 25%, oklab(0% 0 0 / 0%) 25%), linear-gradient(in oklab 45deg, oklab(0% 0 0 / 0%) 75%, oklab(60% 0 0) 75%), linear-gradient(in oklab 315deg, oklab(0% 0 0 / 0%) 75%, oklab(60% 0 0) 75%)' }} />
-                                        <div className="absolute bg-white inset-0" />
-                                        <div className="rounded-[3px] absolute [box-shadow:#FFFFFF33_0px_0px_0px_1px_inset] inset-0" />
-                                      </div>
-                                      <div className="text-xs leading-[133.333%] text-center font-sans flex [-webkit-box-orient:vertical] [-webkit-line-clamp:1] overflow-hidden justify-center flex-wrap text-zinc-50">
-                                        #FFFFFF
-                                      </div>
-                                    </div>
-                                    <div className="items-center flex shrink-0 justify-center rounded-md bg-zinc-800 border border-solid border-[#00000000] size-7">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="14px" fontWeight="500" style={{ height: '14px', flexShrink: '0', width: '14px', opacity: '0.7', overflow: 'clip' }}>
-                                        <path d="M5 12h14" fontSize="14px" fontWeight="500" fill="none" stroke="var(--zinc-50)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="w-2 -left-1 absolute inset-y-0">
-                  <div className="h-full w-px mx-auto" />
-                </div>
-              </div>
-              <div className="-bottom-0.75 hidden xl:flex flex-col w-60.75 top-13.5 left-0 absolute bg-zinc-900 border-r border-r-solid border-r-zinc-800">
-                <div className="flex basis-[0%] flex-col grow overflow-clip relative">
-                  <div className="absolute inset-0">
-                    <div className="h-full">
-                      <div className="overflow-clip size-full">
-                        <div className="table min-w-full">
-                          <div className="p-2">
-                            <div className="">
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 gap-1 rounded-t-sm">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="items-center flex justify-center shrink-0 size-3">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '12px', width: '12px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="m6 9 6 6 6-6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <rect width="14" height="20" x="5" y="2" rx="2" ry="2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '20px', boxSizing: 'border-box', width: '14px', transformOrigin: '0px 0px' }} />
-                                        <path d="M12 18h.01" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      Screen
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 pl-4 gap-1 rounded-t-sm">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="items-center flex justify-center shrink-0 size-3">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '12px', width: '12px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="m6 9 6 6 6-6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <rect width="18" height="18" x="3" y="3" rx="2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '18px', boxSizing: 'border-box', width: '18px', transformOrigin: '0px 0px' }} />
-                                        <path d="M3 12h18" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      Column
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 pl-8 gap-1 rounded-t-sm">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="shrink-0 size-3" />
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="M12 4v16" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M9 20h6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      Text
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 pl-4 gap-1 rounded-t-sm">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="items-center flex justify-center shrink-0 size-3">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '12px', width: '12px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="m6 9 6 6 6-6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="M3 2h18" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <rect width="18" height="12" x="3" y="6" rx="2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '12px', boxSizing: 'border-box', width: '18px', transformOrigin: '0px 0px' }} />
-                                        <path d="M3 22h18" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      ScrollView
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 pl-8 gap-1 rounded-t-sm">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="shrink-0 size-3" />
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="M12 4v16" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M9 20h6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      Text
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 pl-8 gap-1 rounded-t-sm">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="shrink-0 size-3" />
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="M12 4v16" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M9 20h6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      Text
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 pl-8 gap-1 rounded-t-sm">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="shrink-0 size-3" />
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <rect x="14" y="2" width="8" height="8" rx="1" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ height: '8px', boxSizing: 'border-box', width: '8px', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      Sample Badge
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="">
-                                <div className="items-center h-7 flex pr-1 pl-4 rounded-sm gap-1">
-                                  <div className="items-center flex shrink-0 p-0.5 rounded-sm">
-                                    <div className="shrink-0 size-3" />
-                                  </div>
-                                  <div className="items-center flex basis-[0%] grow overflow-clip gap-1.5">
-                                    <div className="items-center flex shrink-0 justify-center size-3.5">
-                                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" fontSize="16px" style={{ height: '14px', width: '14px', overflow: 'clip', flexShrink: '0' }}>
-                                        <path d="M12 4v16" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                        <path d="M9 20h6" fontSize="16px" fill="none" stroke="var(--zinc-400)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ boxSizing: 'border-box', transformOrigin: '0px 0px' }} />
-                                      </svg>
-                                    </div>
-                                    <div className="text-xs leading-[133.333%] font-sans font-medium text-zinc-50 line-clamp-1">
-                                      Text
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="w-2 -right-1 absolute inset-y-0">
-                  <div className="h-full w-px mx-auto" />
-                </div>
-              </div>
-              <div className="w-130 xl:w-342 h-201.5 xl:h-186 top-0 left-0 absolute" style={{ backgroundImage: 'radial-gradient(ellipse 50.4% 92.66499999999999% at 50% -5.790000000000006% in oklab, oklab(18.2% 0 0 / 0%) 0.14%, oklab(14.1% 0.001 -0.004) 100%)' }} />
-            </div>
-          </div>
-          <PaywallBuildCanvas />
-          </div>
-        </ScaledMock>
-        </PaywallBuildProvider>
-      </div>
-      <LandingAgentCompatibility />
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/sections/problem.tsx b/apps/www/src/features/www/landing/sections/problem.tsx
deleted file mode 100644
index d3fcad4cd..000000000
--- a/apps/www/src/features/www/landing/sections/problem.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ScrollBrightenText } from "../motion";
-import { LandingSection } from "../shared";
-
-const PROBLEM_COPY =
-  "Building apps is easier than ever. Growing them has never been harder. Voidhash helps you test what works, understand your customers and turn more users into paying customers.";
-
-/** Renders the landing page positioning statement. */
-export function LandingProblem() {
-  return (
-    <LandingSection>
-      <div className="flex items-center px-6 py-24 md:px-12 md:py-32 xl:px-32 xl:py-48">
-        <ScrollBrightenText
-          className="max-w-[899px] font-medium font-sans text-[28px] leading-[130%] tracking-[-0.03em] md:text-[34px] xl:text-[40px]"
-          text={PROBLEM_COPY}
-        />
-      </div>
-    </LandingSection>
-  );
-}
diff --git a/apps/www/src/features/www/landing/shared.tsx b/apps/www/src/features/www/landing/shared.tsx
deleted file mode 100644
index 0648f4112..000000000
--- a/apps/www/src/features/www/landing/shared.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-"use client";
-
-import { cn } from "@voidhash/ui";
-import { type ReactNode, useEffect, useRef, useState } from "react";
-
-/** Full-bleed landing section: bottom hairline plus a centered, side-bordered content column. */
-export function LandingSection({
-  id,
-  className,
-  innerClassName,
-  children,
-}: {
-  id?: string;
-  className?: string;
-  innerClassName?: string;
-  children: ReactNode;
-}) {
-  return (
-    <section
-      className={cn(
-        "flex min-w-0 scroll-mt-24 flex-col items-center self-stretch border-zinc-800 border-b",
-        className,
-      )}
-      id={id}
-    >
-      <div className={cn("w-full max-w-[1656px] border-zinc-800 xl:border-x", innerClassName)}>
-        {children}
-      </div>
-    </section>
-  );
-}
-
-/**
- * Eyebrow + headline + optional supporting copy header shared by the product sections.
- *
- * The eyebrow and headline are top-aligned so their gap stays identical in every section — the
- * description hangs off the same top edge instead of bottom-aligning to the headline, which used
- * to push the headline down by however many lines the description happened to wrap to.
- */
-export function SectionHeader({
-  eyebrow,
-  title,
-  description,
-}: {
-  eyebrow: string;
-  title: string;
-  description?: string;
-}) {
-  return (
-    <div className="flex flex-col items-start gap-4 self-stretch">
-      <div className="font-medium font-sans text-zinc-400 text-base leading-[120%] tracking-[-0.01em]">
-        {eyebrow}
-      </div>
-      <div className="flex flex-col gap-6 self-stretch lg:flex-row lg:items-start lg:justify-between lg:gap-12">
-        <h2 className="max-w-[627px] font-sans font-semibold text-[28px] text-white leading-[120%] tracking-[-0.03em] md:text-[36px]">
-          {title}
-        </h2>
-        {description ? (
-          <p className="max-w-[465px] font-sans text-[#FFFFFFB8] text-base/6.5 tracking-[-0.03em] md:text-xl/8">
-            {description}
-          </p>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Scales a fixed-width design fragment down to fit its container.
- *
- * The product mockups are pixel-faithful exports from the 1810px artboard, so instead of
- * re-flowing their internals we shrink each one with `transform: scale`. `zoom` would keep
- * layout height in sync for free, but iOS Safari shrinks only the boxes and re-renders the
- * text near its original size, leaving the copy overlapping — a transform scales the rendered
- * pixels wholesale, text included. The wrapper's height is synced to the scaled frame instead.
- *
- * @param designWidth Intrinsic width of the exported fragment, in artboard pixels.
- * @param compactDesignWidth Narrower intrinsic width used below `xl`, for mockups whose markup
- *   drops its outer columns there. Scaling to the trimmed width rather than the full artboard is
- *   what actually buys the phone-sized viewport its resolution back.
- */
-export function ScaledMock({
-  designWidth,
-  compactDesignWidth,
-  className,
-  children,
-}: {
-  designWidth: number;
-  compactDesignWidth?: number;
-  className?: string;
-  children: ReactNode;
-}) {
-  const frameRef = useRef<HTMLDivElement>(null);
-  const sizerRef = useRef<HTMLDivElement>(null);
-  const viewportRef = useRef<HTMLDivElement>(null);
-  const [compact, setCompact] = useState(false);
-
-  useEffect(() => {
-    if (compactDesignWidth === undefined) {
-      return;
-    }
-
-    // Matches Tailwind's `xl` breakpoint, which is where the mockups drop their outer columns.
-    const query = window.matchMedia("(width < 80rem)");
-    const sync = () => setCompact(query.matches);
-
-    sync();
-    query.addEventListener("change", sync);
-    return () => query.removeEventListener("change", sync);
-  }, [compactDesignWidth]);
-
-  const width = compact && compactDesignWidth !== undefined ? compactDesignWidth : designWidth;
-
-  useEffect(() => {
-    const frame = frameRef.current;
-    const sizer = sizerRef.current;
-    const viewport = viewportRef.current;
-    if (!frame || !sizer || !viewport) {
-      return;
-    }
-
-    const applyScale = () => {
-      const scale = Math.min(1, viewport.clientWidth / width);
-      frame.style.transform = `scale(${scale})`;
-      sizer.style.height = `${frame.offsetHeight * scale}px`;
-    };
-
-    applyScale();
-
-    // The frame is observed too: offsetHeight ignores the transform, so a content-height
-    // change (fonts loading, animated blocks) must re-sync the sizer height.
-    const observer = new ResizeObserver(applyScale);
-    observer.observe(viewport);
-    observer.observe(frame);
-    return () => observer.disconnect();
-  }, [width]);
-
-  return (
-    <div className={cn("w-full min-w-0", className)} ref={viewportRef}>
-      {/* The scaled height lives on this inner div: callers pass flex classes for the outer
-          wrapper, and a flex-basis would override an inline height set directly on it. */}
-      <div ref={sizerRef}>
-        {/* flow-root keeps child margins inside the frame's box, so they get measured and
-            scaled with the rest of the mockup instead of collapsing out past the transform. */}
-        <div className="flow-root origin-top-left" ref={frameRef} style={{ width }}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/logo.tsx b/apps/www/src/features/www/logo.tsx
deleted file mode 100644
index 385c804d2..000000000
--- a/apps/www/src/features/www/logo.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import type { SVGProps } from "react";
-
-import { cn } from "@/lib/utils";
-
-export const Logo = ({
-  className,
-  variant = "default",
-  color = "mono",
-}: SVGProps<SVGSVGElement> & {
-  variant?: "default" | "short" | "symbol";
-  color?: "dual-tone" | "mono";
-}) => {
-  const symbolColor = color === "dual-tone" ? "#005EFF" : "currentColor";
-  if (variant === "short") {
-    return (
-      <svg
-        className={cn("h-4 text-black dark:text-white", className)}
-        fill="none"
-        viewBox="0 0 321 108"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>Voidhash</title>
-        <path
-          d="M12.419 22.23L30.689 73.473L48.785 22.23H58.877L36.518 84H24.773L2.414 22.23H12.419ZM79.7183 85.044C75.3103 85.044 71.4533 84.058 68.1473 82.086C64.8413 80.114 62.2603 77.33 60.4043 73.734C58.6063 70.08 57.7073 65.817 57.7073 60.945C57.7073 56.073 58.6063 51.839 60.4043 48.243C62.2603 44.589 64.8413 41.776 68.1473 39.804C71.4533 37.832 75.3103 36.846 79.7183 36.846C84.0683 36.846 87.8963 37.832 91.2023 39.804C94.5083 41.776 97.0603 44.589 98.8583 48.243C100.714 51.839 101.642 56.073 101.642 60.945C101.642 65.817 100.714 70.08 98.8583 73.734C97.0603 77.33 94.5083 80.114 91.2023 82.086C87.8963 84.058 84.0683 85.044 79.7183 85.044ZM79.7183 77.04C83.6043 77.04 86.6203 75.619 88.7663 72.777C90.9703 69.935 92.0723 65.991 92.0723 60.945C92.0723 55.899 90.9703 51.955 88.7663 49.113C86.6203 46.271 83.6043 44.85 79.7183 44.85C75.8323 44.85 72.7873 46.271 70.5833 49.113C68.3793 51.897 67.2773 55.841 67.2773 60.945C67.2773 66.049 68.3793 70.022 70.5833 72.864C72.7873 75.648 75.8323 77.04 79.7183 77.04ZM117.058 37.89V84H107.836V37.89H117.058ZM117.319 22.317V31.104H107.662V22.317H117.319ZM158.286 22.23H167.508V84H158.895L158.634 77.388C157.3 79.766 155.357 81.651 152.805 83.043C150.253 84.377 147.411 85.044 144.279 85.044C140.335 85.044 136.884 84.058 133.926 82.086C130.968 80.114 128.706 77.33 127.14 73.734C125.574 70.08 124.791 65.817 124.791 60.945C124.791 56.073 125.574 51.839 127.14 48.243C128.706 44.589 130.968 41.776 133.926 39.804C136.884 37.832 140.335 36.846 144.279 36.846C147.295 36.846 150.05 37.484 152.544 38.76C155.038 40.036 156.952 41.805 158.286 44.067V22.23ZM157.416 69.471C158.46 67.035 158.982 64.193 158.982 60.945C158.982 57.639 158.46 54.739 157.416 52.245C156.43 49.751 155.009 47.837 153.153 46.503C151.297 45.169 149.122 44.502 146.628 44.502C142.858 44.502 139.871 46.01 137.667 49.026C135.463 51.984 134.361 55.957 134.361 60.945C134.361 65.875 135.463 69.819 137.667 72.777C139.929 75.677 142.916 77.127 146.628 77.127C149.122 77.127 151.297 76.46 153.153 75.126C155.009 73.792 156.43 71.907 157.416 69.471Z"
-          fill="currentColor"
-        />
-        <path
-          d="M316.143 23.5C318.549 23.5 320.5 25.4508 320.5 27.8571V49.6429C320.5 52.0492 318.549 54 316.143 54H290V80.1429C290 82.5492 288.049 84.5 285.643 84.5H263.857C261.451 84.5 259.5 82.5492 259.5 80.1429V54L290 23.5H316.143Z"
-          fill={symbolColor}
-        />
-        <path
-          d="M229 84.5L259.5 54V27.8571C259.5 25.4508 257.549 23.5 255.143 23.5H233.357C230.951 23.5 229 25.4508 229 27.8571V54H202.857C200.451 54 198.5 55.9508 198.5 58.3571V80.1429C198.5 82.5492 200.451 84.5 202.857 84.5H229Z"
-          fill={symbolColor}
-        />
-      </svg>
-    );
-  }
-
-  if (variant === "symbol") {
-    return (
-      <svg
-        className={cn("h-4 text-black dark:text-white", className)}
-        fill="none"
-        viewBox="0 0 112 56"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>Voidhash</title>
-        <path
-          d="M112 4C112 1.79086 110.209 0 108 0H84V28H108C110.209 28 112 26.2091 112 24V4Z"
-          fill={symbolColor}
-        />
-        <path
-          d="M84 28H56V52C56 54.2091 57.7909 56 60 56H80C82.2091 56 84 54.2091 84 52V28Z"
-          fill={symbolColor}
-        />
-        <path d="M84 0L56 28H84V0Z" fill={symbolColor} />
-        <path
-          d="M0 52C0 54.2091 1.79086 56 4 56H28V28H4C1.79086 28 0 29.7909 0 32V52Z"
-          fill={symbolColor}
-        />
-        <path
-          d="M28 28H56V4C56 1.79086 54.2091 0 52 0H32C29.7909 0 28 1.79086 28 4V28Z"
-          fill={symbolColor}
-        />
-        <path d="M28 56L56 28H28V56Z" fill={symbolColor} />
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      className={cn("h-6 text-black dark:text-white", className)}
-      fill="none"
-      viewBox="0 0 505 108"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Voidhash</title>
-      <path
-        d="M11.919 22.23L30.189 73.473L48.285 22.23H58.377L36.018 84H24.273L1.914 22.23H11.919ZM79.2183 85.044C74.8103 85.044 70.9533 84.058 67.6473 82.086C64.3413 80.114 61.7603 77.33 59.9043 73.734C58.1063 70.08 57.2073 65.817 57.2073 60.945C57.2073 56.073 58.1063 51.839 59.9043 48.243C61.7603 44.589 64.3413 41.776 67.6473 39.804C70.9533 37.832 74.8103 36.846 79.2183 36.846C83.5683 36.846 87.3963 37.832 90.7023 39.804C94.0083 41.776 96.5603 44.589 98.3583 48.243C100.214 51.839 101.142 56.073 101.142 60.945C101.142 65.817 100.214 70.08 98.3583 73.734C96.5603 77.33 94.0083 80.114 90.7023 82.086C87.3963 84.058 83.5683 85.044 79.2183 85.044ZM79.2183 77.04C83.1043 77.04 86.1203 75.619 88.2663 72.777C90.4703 69.935 91.5723 65.991 91.5723 60.945C91.5723 55.899 90.4703 51.955 88.2663 49.113C86.1203 46.271 83.1043 44.85 79.2183 44.85C75.3323 44.85 72.2873 46.271 70.0833 49.113C67.8793 51.897 66.7773 55.841 66.7773 60.945C66.7773 66.049 67.8793 70.022 70.0833 72.864C72.2873 75.648 75.3323 77.04 79.2183 77.04ZM116.558 37.89V84H107.336V37.89H116.558ZM116.819 22.317V31.104H107.162V22.317H116.819ZM157.786 22.23H167.008V84H158.395L158.134 77.388C156.8 79.766 154.857 81.651 152.305 83.043C149.753 84.377 146.911 85.044 143.779 85.044C139.835 85.044 136.384 84.058 133.426 82.086C130.468 80.114 128.206 77.33 126.64 73.734C125.074 70.08 124.291 65.817 124.291 60.945C124.291 56.073 125.074 51.839 126.64 48.243C128.206 44.589 130.468 41.776 133.426 39.804C136.384 37.832 139.835 36.846 143.779 36.846C146.795 36.846 149.55 37.484 152.044 38.76C154.538 40.036 156.452 41.805 157.786 44.067V22.23ZM156.916 69.471C157.96 67.035 158.482 64.193 158.482 60.945C158.482 57.639 157.96 54.739 156.916 52.245C155.93 49.751 154.509 47.837 152.653 46.503C150.797 45.169 148.622 44.502 146.128 44.502C142.358 44.502 139.371 46.01 137.167 49.026C134.963 51.984 133.861 55.957 133.861 60.945C133.861 65.875 134.963 69.819 137.167 72.777C139.429 75.677 142.416 77.127 146.128 77.127C148.622 77.127 150.797 76.46 152.653 75.126C154.509 73.792 155.93 71.907 156.916 69.471ZM184.15 22.23V48.243L182.845 47.808C183.715 44.038 185.484 41.283 188.152 39.543C190.82 37.745 194.01 36.846 197.722 36.846C202.478 36.846 206.248 38.441 209.032 41.631C211.874 44.763 213.295 48.997 213.295 54.333V84H204.073V57.639C204.073 53.405 203.348 50.244 201.898 48.156C200.448 46.068 198.186 45.024 195.112 45.024C191.748 45.024 189.08 46.126 187.108 48.33C185.136 50.476 184.15 53.579 184.15 57.639V84H174.928V22.23H184.15ZM220.871 51.723C221.799 47.083 223.974 43.458 227.396 40.848C230.876 38.18 235.284 36.846 240.62 36.846C246.884 36.846 251.669 38.528 254.975 41.892C258.339 45.256 260.021 50.099 260.021 56.421V73.56C260.021 74.72 260.253 75.561 260.717 76.083C261.239 76.547 261.964 76.779 262.892 76.779H264.719V84H261.848L260.804 84.087C258.31 84.029 256.193 83.507 254.453 82.521C252.713 81.477 251.756 79.592 251.582 76.866C250.422 79.244 248.566 81.216 246.014 82.782C243.462 84.29 240.359 85.044 236.705 85.044C231.949 85.044 227.976 83.855 224.786 81.477C221.654 79.099 220.088 75.909 220.088 71.907C220.088 68.949 220.784 66.571 222.176 64.773C223.568 62.975 225.482 61.583 227.918 60.597C230.354 59.611 233.573 58.741 237.575 57.987L250.799 55.377C250.741 51.665 249.871 48.91 248.189 47.112C246.507 45.256 243.984 44.328 240.62 44.328C237.952 44.328 235.748 45.024 234.008 46.416C232.268 47.75 231.079 49.722 230.441 52.332L220.871 51.723ZM229.658 71.733C229.658 73.531 230.412 75.01 231.92 76.17C233.486 77.33 235.748 77.91 238.706 77.91C241.026 77.852 243.114 77.272 244.97 76.17C246.826 75.068 248.276 73.415 249.32 71.211C250.422 68.949 250.973 66.223 250.973 63.033V62.424L241.142 64.164C240.678 64.222 240.214 64.309 239.75 64.425C237.372 64.831 235.516 65.266 234.182 65.73C232.848 66.136 231.746 66.832 230.876 67.818C230.064 68.746 229.658 70.051 229.658 71.733ZM297.609 52.419C297.145 50.041 295.927 48.127 293.955 46.677C291.983 45.227 289.75 44.502 287.256 44.502C284.82 44.502 282.79 45.111 281.166 46.329C279.542 47.489 278.73 49.055 278.73 51.027C278.788 52.883 279.745 54.333 281.601 55.377C283.515 56.363 285.98 57.175 288.996 57.813C293.172 58.567 296.594 59.495 299.262 60.597C301.93 61.641 304.018 63.091 305.526 64.947C307.034 66.745 307.788 69.094 307.788 71.994C307.788 74.836 306.918 77.243 305.178 79.215C303.496 81.187 301.205 82.666 298.305 83.652C295.463 84.58 292.331 85.044 288.909 85.044C285.023 85.044 281.543 84.406 278.469 83.13C275.395 81.854 272.93 80.056 271.074 77.736C269.276 75.358 268.261 72.603 268.029 69.471L277.512 68.862C277.86 70.602 278.498 72.11 279.426 73.386C280.412 74.662 281.688 75.648 283.254 76.344C284.878 77.04 286.734 77.388 288.822 77.388C291.316 77.388 293.491 76.924 295.347 75.996C297.261 75.01 298.218 73.531 298.218 71.559C298.218 70.225 297.812 69.152 297 68.34C296.188 67.528 295.173 66.919 293.955 66.513C292.795 66.107 291.229 65.701 289.257 65.295C288.677 65.121 288.039 64.976 287.343 64.86C283.399 63.99 280.18 63.091 277.686 62.163C275.192 61.177 273.133 59.814 271.509 58.074C269.943 56.334 269.16 54.072 269.16 51.288C269.16 48.33 269.914 45.778 271.422 43.632C272.988 41.428 275.163 39.746 277.947 38.586C280.789 37.426 284.124 36.846 287.952 36.846C292.998 36.846 297.261 38.209 300.741 40.935C304.221 43.661 306.338 47.315 307.092 51.897L297.609 52.419ZM323.217 22.23V48.243L321.912 47.808C322.782 44.038 324.551 41.283 327.219 39.543C329.887 37.745 333.077 36.846 336.789 36.846C341.545 36.846 345.315 38.441 348.099 41.631C350.941 44.763 352.362 48.997 352.362 54.333V84H343.14V57.639C343.14 53.405 342.415 50.244 340.965 48.156C339.515 46.068 337.253 45.024 334.179 45.024C330.815 45.024 328.147 46.126 326.175 48.33C324.203 50.476 323.217 53.579 323.217 57.639V84H313.995V22.23H323.217Z"
-        fill="currentColor"
-      />
-      <path
-        d="M500.643 23.5C503.049 23.5 505 25.4508 505 27.8571V49.6429C505 52.0492 503.049 54 500.643 54H474.5V80.1429C474.5 82.5492 472.549 84.5 470.143 84.5H448.357C445.951 84.5 444 82.5492 444 80.1429V54L474.5 23.5H500.643Z"
-        fill={symbolColor}
-      />
-      <path
-        d="M413.5 84.5L444 54V27.8571C444 25.4508 442.049 23.5 439.643 23.5H417.857C415.451 23.5 413.5 25.4508 413.5 27.8571V54H387.357C384.951 54 383 55.9508 383 58.3571V80.1429C383 82.5492 384.951 84.5 387.357 84.5H413.5Z"
-        fill={symbolColor}
-      />
-    </svg>
-  );
-};
diff --git a/apps/www/src/features/www/marketing-home-slot.tsx b/apps/www/src/features/www/marketing-home-slot.tsx
new file mode 100644
index 000000000..6187ed01e
--- /dev/null
+++ b/apps/www/src/features/www/marketing-home-slot.tsx
@@ -0,0 +1,20 @@
+import { redirect } from "@tanstack/react-router";
+
+import { STUDIO_PATH } from "@/lib/paths";
+
+/**
+ * What the community build serves at `/`. A self-hosted deployment is an
+ * application rather than a marketing site, so the root simply hands off to the
+ * studio (which in turn redirects to sign-in when there is no session).
+ *
+ * Hosts that ship a marketing site replace this module — see
+ * `apps/www/vite.config.ts` in voidhash-mono, which aliases it to the hosted
+ * landing page.
+ */
+export const marketingHomeLoader = async (): Promise<void> => {
+  throw redirect({ to: STUDIO_PATH });
+};
+
+export function MarketingHome() {
+  return null;
+}
diff --git a/apps/www/src/features/www/navbar/navigation.tsx b/apps/www/src/features/www/navbar/navigation.tsx
deleted file mode 100644
index 109d598d3..000000000
--- a/apps/www/src/features/www/navbar/navigation.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { cn } from "@/lib/utils";
-
-// import { Button } from '../button';
-import { Logo } from "../logo";
-
-export function Navigation() {
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 10);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  return (
-    <div>
-      <nav
-        className={cn(
-          "fixed top-0 right-0 left-0 z-50 flex h-16 w-full items-center justify-start bg-background backdrop-blur-sm",
-          isScrolled && "border-border border-b",
-        )}
-      >
-        <div className="mx-auto flex w-full max-w-7xl items-center px-4 py-4">
-          <a href="/">
-            <Logo className="h-6" />
-          </a>
-          <div className="flex-1" />
-          {/* <div className="flex items-center gap-2">
-            <Button size="sm" variant="outline">
-              Sign in
-            </Button>
-            <Button size="sm">
-              <span>Get Started</span>
-              <ChevronRight className="size-4 opacity-50" />
-            </Button>
-          </div> */}
-        </div>
-      </nav>
-      <div className="h-16" />
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/refraction-stripes.tsx b/apps/www/src/features/www/refraction-stripes.tsx
deleted file mode 100644
index 9f9bbed7f..000000000
--- a/apps/www/src/features/www/refraction-stripes.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-
-import { useContainerDimensions } from "@/hooks/use-container-dimensions";
-
-const IDEAL_STRIPE_WIDTH = 40;
-
-function Stripe({ width, x }: { width: number; x: number }) {
-  return (
-    <div
-      className="absolute top-0 left-0 h-full w-full border-background/50 border-r bg-gradient-to-r from-background/0 to-background/30"
-      style={{
-        left: x,
-        width: width - 1,
-      }}
-    />
-  );
-}
-export function RefractionStripes() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { width: containerWidth } = useContainerDimensions(containerRef);
-  const stripeCount = Math.floor(containerWidth / IDEAL_STRIPE_WIDTH);
-  const stripeWidth = containerWidth / Math.max(1, stripeCount);
-
-  return (
-    <div className="absolute z-20 h-full w-full" ref={containerRef}>
-      {Array.from({ length: stripeCount }).map((_, index) => (
-        <Stripe
-          // biome-ignore lint/suspicious/noArrayIndexKey: it is ok
-          key={index}
-          width={stripeWidth}
-          x={index * stripeWidth}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/apps/www/src/features/www/section/section-container.tsx b/apps/www/src/features/www/section/section-container.tsx
deleted file mode 100644
index e85a8a198..000000000
--- a/apps/www/src/features/www/section/section-container.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils";
-
-export function SectionContainer({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("mx-auto max-w-7xl px-4", className)}>
-      <div className="w-full border border-border/60">{children}</div>
-    </div>
-  );
-}
diff --git a/apps/www/src/routeTree.gen.ts b/apps/www/src/routeTree.gen.ts
index c8c6f0dc8..374acd034 100644
--- a/apps/www/src/routeTree.gen.ts
+++ b/apps/www/src/routeTree.gen.ts
@@ -11,15 +11,12 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as StudioRouteRouteImport } from './routes/studio/route'
 import { Route as DocsRouteRouteImport } from './routes/docs/route'
-import { Route as DesignRouteRouteImport } from './routes/design/route'
 import { Route as AuthRouteRouteImport } from './routes/auth/route'
 import { Route as MarketingRouteRouteImport } from './routes/_marketing/route'
 import { Route as DocsIndexRouteImport } from './routes/docs/index'
-import { Route as DesignIndexRouteImport } from './routes/design/index'
 import { Route as AuthIndexRouteImport } from './routes/auth/index'
 import { Route as MarketingIndexRouteImport } from './routes/_marketing/index'
 import { Route as DocsSplatRouteImport } from './routes/docs/$'
-import { Route as DesignSplatRouteImport } from './routes/design/$'
 import { Route as AuthVerifyEmailRouteImport } from './routes/auth/verify-email'
 import { Route as AuthSignUpRouteImport } from './routes/auth/sign-up'
 import { Route as AuthResetPasswordRouteImport } from './routes/auth/reset-password'
@@ -32,7 +29,6 @@ import { Route as AuthDevicesIndexRouteImport } from './routes/auth/devices/inde
 import { Route as StudioAuthenticatedWaitlistRouteImport } from './routes/studio/_authenticated/waitlist'
 import { Route as DocsApiSearchRouteImport } from './routes/docs/api/search'
 import { Route as DocsApiProxyRouteImport } from './routes/docs/api/proxy'
-import { Route as DesignApiSearchRouteImport } from './routes/design/api/search'
 import { Route as ApiAuthCallbackRouteImport } from './routes/api/auth/callback'
 import { Route as StudioAuthenticatedDashboardRouteRouteImport } from './routes/studio/_authenticated/_dashboard/route'
 import { Route as StudioAuthenticatedCreateOrganizationIndexRouteImport } from './routes/studio/_authenticated/create-organization/index'
@@ -93,11 +89,6 @@ const DocsRouteRoute = DocsRouteRouteImport.update({
   path: '/docs',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DesignRouteRoute = DesignRouteRouteImport.update({
-  id: '/design',
-  path: '/design',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const AuthRouteRoute = AuthRouteRouteImport.update({
   id: '/auth',
   path: '/auth',
@@ -112,11 +103,6 @@ const DocsIndexRoute = DocsIndexRouteImport.update({
   path: '/',
   getParentRoute: () => DocsRouteRoute,
 } as any)
-const DesignIndexRoute = DesignIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => DesignRouteRoute,
-} as any)
 const AuthIndexRoute = AuthIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -132,11 +118,6 @@ const DocsSplatRoute = DocsSplatRouteImport.update({
   path: '/$',
   getParentRoute: () => DocsRouteRoute,
 } as any)
-const DesignSplatRoute = DesignSplatRouteImport.update({
-  id: '/$',
-  path: '/$',
-  getParentRoute: () => DesignRouteRoute,
-} as any)
 const AuthVerifyEmailRoute = AuthVerifyEmailRouteImport.update({
   id: '/verify-email',
   path: '/verify-email',
@@ -199,11 +180,6 @@ const DocsApiProxyRoute = DocsApiProxyRouteImport.update({
   path: '/api/proxy',
   getParentRoute: () => DocsRouteRoute,
 } as any)
-const DesignApiSearchRoute = DesignApiSearchRouteImport.update({
-  id: '/api/search',
-  path: '/api/search',
-  getParentRoute: () => DesignRouteRoute,
-} as any)
 const ApiAuthCallbackRoute = ApiAuthCallbackRouteImport.update({
   id: '/api/auth/callback',
   path: '/api/auth/callback',
@@ -605,7 +581,6 @@ const StudioAuthenticatedDashboardProjectOrganizationSlugProjectSlugSettingsWebh
 export interface FileRoutesByFullPath {
   '/': typeof MarketingIndexRoute
   '/auth': typeof AuthRouteRouteWithChildren
-  '/design': typeof DesignRouteRouteWithChildren
   '/docs': typeof DocsRouteRouteWithChildren
   '/studio': typeof StudioRouteRouteWithChildren
   '/auth/forgot-password': typeof AuthForgotPasswordRoute
@@ -614,13 +589,10 @@ export interface FileRoutesByFullPath {
   '/auth/reset-password': typeof AuthResetPasswordRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/auth/verify-email': typeof AuthVerifyEmailRoute
-  '/design/$': typeof DesignSplatRoute
   '/docs/$': typeof DocsSplatRoute
   '/auth/': typeof AuthIndexRoute
-  '/design/': typeof DesignIndexRoute
   '/docs/': typeof DocsIndexRoute
   '/api/auth/callback': typeof ApiAuthCallbackRoute
-  '/design/api/search': typeof DesignApiSearchRoute
   '/docs/api/proxy': typeof DocsApiProxyRoute
   '/docs/api/search': typeof DocsApiSearchRoute
   '/studio/waitlist': typeof StudioAuthenticatedWaitlistRoute
@@ -682,14 +654,11 @@ export interface FileRoutesByTo {
   '/auth/reset-password': typeof AuthResetPasswordRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/auth/verify-email': typeof AuthVerifyEmailRoute
-  '/design/$': typeof DesignSplatRoute
   '/docs/$': typeof DocsSplatRoute
   '/': typeof MarketingIndexRoute
   '/auth': typeof AuthIndexRoute
-  '/design': typeof DesignIndexRoute
   '/docs': typeof DocsIndexRoute
   '/api/auth/callback': typeof ApiAuthCallbackRoute
-  '/design/api/search': typeof DesignApiSearchRoute
   '/docs/api/proxy': typeof DocsApiProxyRoute
   '/docs/api/search': typeof DocsApiSearchRoute
   '/studio/waitlist': typeof StudioAuthenticatedWaitlistRoute
@@ -744,7 +713,6 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_marketing': typeof MarketingRouteRouteWithChildren
   '/auth': typeof AuthRouteRouteWithChildren
-  '/design': typeof DesignRouteRouteWithChildren
   '/docs': typeof DocsRouteRouteWithChildren
   '/studio': typeof StudioRouteRouteWithChildren
   '/studio/_authenticated': typeof StudioAuthenticatedRouteRouteWithChildren
@@ -754,15 +722,12 @@ export interface FileRoutesById {
   '/auth/reset-password': typeof AuthResetPasswordRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/auth/verify-email': typeof AuthVerifyEmailRoute
-  '/design/$': typeof DesignSplatRoute
   '/docs/$': typeof DocsSplatRoute
   '/_marketing/': typeof MarketingIndexRoute
   '/auth/': typeof AuthIndexRoute
-  '/design/': typeof DesignIndexRoute
   '/docs/': typeof DocsIndexRoute
   '/studio/_authenticated/_dashboard': typeof StudioAuthenticatedDashboardRouteRouteWithChildren
   '/api/auth/callback': typeof ApiAuthCallbackRoute
-  '/design/api/search': typeof DesignApiSearchRoute
   '/docs/api/proxy': typeof DocsApiProxyRoute
   '/docs/api/search': typeof DocsApiSearchRoute
   '/studio/_authenticated/waitlist': typeof StudioAuthenticatedWaitlistRoute
@@ -821,7 +786,6 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/auth'
-    | '/design'
     | '/docs'
     | '/studio'
     | '/auth/forgot-password'
@@ -830,13 +794,10 @@ export interface FileRouteTypes {
     | '/auth/reset-password'
     | '/auth/sign-up'
     | '/auth/verify-email'
-    | '/design/$'
     | '/docs/$'
     | '/auth/'
-    | '/design/'
     | '/docs/'
     | '/api/auth/callback'
-    | '/design/api/search'
     | '/docs/api/proxy'
     | '/docs/api/search'
     | '/studio/waitlist'
@@ -898,14 +859,11 @@ export interface FileRouteTypes {
     | '/auth/reset-password'
     | '/auth/sign-up'
     | '/auth/verify-email'
-    | '/design/$'
     | '/docs/$'
     | '/'
     | '/auth'
-    | '/design'
     | '/docs'
     | '/api/auth/callback'
-    | '/design/api/search'
     | '/docs/api/proxy'
     | '/docs/api/search'
     | '/studio/waitlist'
@@ -959,7 +917,6 @@ export interface FileRouteTypes {
     | '__root__'
     | '/_marketing'
     | '/auth'
-    | '/design'
     | '/docs'
     | '/studio'
     | '/studio/_authenticated'
@@ -969,15 +926,12 @@ export interface FileRouteTypes {
     | '/auth/reset-password'
     | '/auth/sign-up'
     | '/auth/verify-email'
-    | '/design/$'
     | '/docs/$'
     | '/_marketing/'
     | '/auth/'
-    | '/design/'
     | '/docs/'
     | '/studio/_authenticated/_dashboard'
     | '/api/auth/callback'
-    | '/design/api/search'
     | '/docs/api/proxy'
     | '/docs/api/search'
     | '/studio/_authenticated/waitlist'
@@ -1035,7 +989,6 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   MarketingRouteRoute: typeof MarketingRouteRouteWithChildren
   AuthRouteRoute: typeof AuthRouteRouteWithChildren
-  DesignRouteRoute: typeof DesignRouteRouteWithChildren
   DocsRouteRoute: typeof DocsRouteRouteWithChildren
   StudioRouteRoute: typeof StudioRouteRouteWithChildren
   ApiAuthCallbackRoute: typeof ApiAuthCallbackRoute
@@ -1065,13 +1018,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/design': {
-      id: '/design'
-      path: '/design'
-      fullPath: '/design'
-      preLoaderRoute: typeof DesignRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/auth': {
       id: '/auth'
       path: '/auth'
@@ -1093,13 +1039,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsIndexRouteImport
       parentRoute: typeof DocsRouteRoute
     }
-    '/design/': {
-      id: '/design/'
-      path: '/'
-      fullPath: '/design/'
-      preLoaderRoute: typeof DesignIndexRouteImport
-      parentRoute: typeof DesignRouteRoute
-    }
     '/auth/': {
       id: '/auth/'
       path: '/'
@@ -1121,13 +1060,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsSplatRouteImport
       parentRoute: typeof DocsRouteRoute
     }
-    '/design/$': {
-      id: '/design/$'
-      path: '/$'
-      fullPath: '/design/$'
-      preLoaderRoute: typeof DesignSplatRouteImport
-      parentRoute: typeof DesignRouteRoute
-    }
     '/auth/verify-email': {
       id: '/auth/verify-email'
       path: '/verify-email'
@@ -1212,13 +1144,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsApiProxyRouteImport
       parentRoute: typeof DocsRouteRoute
     }
-    '/design/api/search': {
-      id: '/design/api/search'
-      path: '/api/search'
-      fullPath: '/design/api/search'
-      preLoaderRoute: typeof DesignApiSearchRouteImport
-      parentRoute: typeof DesignRouteRoute
-    }
     '/api/auth/callback': {
       id: '/api/auth/callback'
       path: '/api/auth/callback'
@@ -1603,22 +1528,6 @@ const AuthRouteRouteWithChildren = AuthRouteRoute._addFileChildren(
   AuthRouteRouteChildren,
 )
 
-interface DesignRouteRouteChildren {
-  DesignSplatRoute: typeof DesignSplatRoute
-  DesignIndexRoute: typeof DesignIndexRoute
-  DesignApiSearchRoute: typeof DesignApiSearchRoute
-}
-
-const DesignRouteRouteChildren: DesignRouteRouteChildren = {
-  DesignSplatRoute: DesignSplatRoute,
-  DesignIndexRoute: DesignIndexRoute,
-  DesignApiSearchRoute: DesignApiSearchRoute,
-}
-
-const DesignRouteRouteWithChildren = DesignRouteRoute._addFileChildren(
-  DesignRouteRouteChildren,
-)
-
 interface DocsRouteRouteChildren {
   DocsSplatRoute: typeof DocsSplatRoute
   DocsIndexRoute: typeof DocsIndexRoute
@@ -1824,7 +1733,6 @@ const StudioRouteRouteWithChildren = StudioRouteRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   MarketingRouteRoute: MarketingRouteRouteWithChildren,
   AuthRouteRoute: AuthRouteRouteWithChildren,
-  DesignRouteRoute: DesignRouteRouteWithChildren,
   DocsRouteRoute: DocsRouteRouteWithChildren,
   StudioRouteRoute: StudioRouteRouteWithChildren,
   ApiAuthCallbackRoute: ApiAuthCallbackRoute,
diff --git a/apps/www/src/routes/_marketing/index.tsx b/apps/www/src/routes/_marketing/index.tsx
index 83bea3033..563d23b2f 100644
--- a/apps/www/src/routes/_marketing/index.tsx
+++ b/apps/www/src/routes/_marketing/index.tsx
@@ -1,19 +1,8 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { getAuth } from "@workos/authkit-tanstack-react-start";
+import { createFileRoute } from "@tanstack/react-router";
 
-import { LandingPage } from "@/features/www/landing/landing-page";
-import { STUDIO_PATH } from "@/lib/paths";
+import { MarketingHome, marketingHomeLoader } from "@/features/www/marketing-home-slot";
 
 export const Route = createFileRoute("/_marketing/")({
   component: MarketingHome,
-  loader: async () => {
-    const auth = await getAuth();
-    if (auth.user) {
-      throw redirect({ to: STUDIO_PATH });
-    }
-  },
+  loader: marketingHomeLoader,
 });
-
-function MarketingHome() {
-  return <LandingPage />;
-}
diff --git a/apps/www/src/routes/design/$.tsx b/apps/www/src/routes/design/$.tsx
deleted file mode 100644
index a2eda62fa..000000000
--- a/apps/www/src/routes/design/$.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { createServerFn } from "@tanstack/react-start";
-import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
-import browserCollections from "@generated/browser";
-import type * as PageTree from "fumadocs-core/page-tree";
-import {
-  Accordion as DocsAccordion,
-  Accordions as DocsAccordions,
-} from "fumadocs-ui/components/accordion";
-import { Callout } from "fumadocs-ui/components/callout";
-import {
-  File as DocsFile,
-  Files as DocsFiles,
-  Folder as DocsFolder,
-} from "fumadocs-ui/components/files";
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { Tab as DocsTab, Tabs as DocsTabs } from "fumadocs-ui/components/tabs";
-import { TypeTable } from "fumadocs-ui/components/type-table";
-import defaultMdxComponents from "fumadocs-ui/mdx";
-import { type ComponentProps, Suspense, useMemo } from "react";
-
-import { Preview } from "@/features/design/components/docs/preview";
-import * as Registry from "@/features/design/components/docs/component-registry";
-import { DocsLayout } from "@/features/design/components/layout/docs";
-import {
-  DocsBody,
-  DocsDescription,
-  DocsPage,
-  DocsTitle,
-} from "@/features/design/components/layout/page";
-import { getSource } from "@/features/design/lib/source";
-
-interface RedirectPayload {
-  redirectTo: string;
-}
-
-interface PagePayload {
-  description: string | undefined;
-  pageTree: {};
-  path: string;
-  title: string;
-}
-
-type ServerPayload = PagePayload | RedirectPayload;
-
-export const Route = createFileRoute("/design/$")({
-  component: Page,
-  loader: async ({ params }) => {
-    const slugs = params._splat?.split("/").filter(Boolean) ?? [];
-    if (slugs.length === 0) {
-      throw notFound();
-    }
-
-    const result = (await serverLoader({ data: slugs })) as ServerPayload;
-    if ("redirectTo" in result) {
-      throw redirect({
-        params: {
-          _splat: result.redirectTo,
-        },
-        to: "/design/$",
-      });
-    }
-
-    return result;
-  },
-  notFoundComponent: () => <div>Page not found</div>,
-});
-
-const serverLoader = createServerFn({ method: "GET" })
-  .inputValidator((slugs: string[]) => slugs)
-  .handler(async ({ data: slugs }) => {
-    const source = await getSource();
-    const page = source.getPage(slugs);
-    if (!page) {
-      const fallbackPage = source
-        .getPages()
-        .find(
-          (candidate) =>
-            candidate.slugs.length > slugs.length &&
-            slugs.every((slug, index) => candidate.slugs[index] === slug),
-        );
-
-      if (fallbackPage) {
-        return {
-          redirectTo: fallbackPage.slugs.join("/"),
-        };
-      }
-
-      throw notFound();
-    }
-
-    return {
-      description: page.data.description,
-      pageTree: source.getPageTree() as {},
-      path: page.path,
-      title: page.data.title,
-    };
-  });
-
-const clientLoader = browserCollections.design.createClientLoader({
-  component({ default: MDX, frontmatter }) {
-    return (
-      <DocsPage full={frontmatter.full === true}>
-        <DocsTitle>{frontmatter.title}</DocsTitle>
-        <DocsDescription>{frontmatter.description}</DocsDescription>
-        <DocsBody>
-          <MDX
-            components={{
-              ...defaultMdxComponents,
-              ...Registry,
-              Preview,
-              Step,
-              Steps,
-              DocsFile,
-              DocsFolder,
-              DocsFiles,
-              DocsTab,
-              DocsTabs,
-              TypeTable,
-              DocsAccordion,
-              DocsAccordions,
-              a: DocsMdxLink,
-              Callout: ({
-                children,
-                type,
-                ...props
-              }: {
-                children: React.ReactNode;
-                type?: "info" | "warn" | "error" | "success" | "warning";
-                [key: string]: unknown;
-              }) => (
-                <Callout type={type} {...props}>
-                  {children}
-                </Callout>
-              ),
-              iframe: (props) => <iframe {...props} className="h-[500px] w-full" />,
-            }}
-          />
-        </DocsBody>
-      </DocsPage>
-    );
-  },
-  id: "design",
-});
-
-function PageContent({ path }: { path: string }) {
-  const Content = useMemo(() => clientLoader.getComponent(path), [path]);
-  return <Content />;
-}
-
-function Page() {
-  const data = Route.useLoaderData() as PagePayload;
-
-  return (
-    <DocsLayout tree={data.pageTree as PageTree.Root}>
-      <Suspense>
-        <PageContent path={data.path} />
-      </Suspense>
-    </DocsLayout>
-  );
-}
-
-function DocsMdxLink(props: ComponentProps<"a">) {
-  const href = props.href;
-  if (!href) {
-    return <a {...props} />;
-  }
-
-  const normalizedHref =
-    href.startsWith("/") && !href.startsWith("/design") && !href.startsWith("//")
-      ? `/design${href}`
-      : href;
-
-  return <a {...props} href={normalizedHref} />;
-}
diff --git a/apps/www/src/routes/design/api/search.ts b/apps/www/src/routes/design/api/search.ts
deleted file mode 100644
index 083c95ecd..000000000
--- a/apps/www/src/routes/design/api/search.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { createFromSource } from "fumadocs-core/search/server";
-
-import { getSource } from "@/features/design/lib/source";
-
-let searchApiPromise: Promise<ReturnType<typeof createFromSource>> | undefined;
-
-const getSearchApi = (): Promise<ReturnType<typeof createFromSource>> => {
-  searchApiPromise ??= getSource().then(createFromSource);
-  return searchApiPromise;
-};
-
-export const Route = createFileRoute("/design/api/search")({
-  server: {
-    handlers: {
-      GET: async ({ request }) => (await getSearchApi()).GET(request),
-    },
-  },
-});
diff --git a/apps/www/src/routes/design/index.tsx b/apps/www/src/routes/design/index.tsx
deleted file mode 100644
index c36c3bd44..000000000
--- a/apps/www/src/routes/design/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/design/")({
-  beforeLoad: () => {
-    throw redirect({
-      params: {
-        _splat: "components/overview",
-      },
-      to: "/design/$",
-    });
-  },
-  component: () => null,
-});
diff --git a/apps/www/src/routes/design/route.tsx b/apps/www/src/routes/design/route.tsx
deleted file mode 100644
index 30f075a7b..000000000
--- a/apps/www/src/routes/design/route.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { RootProvider } from "fumadocs-ui/provider/tanstack";
-
-import { DESIGN_PATH } from "@/lib/paths";
-
-export const Route = createFileRoute("/design")({
-  component: DesignLayout,
-  head: () => ({
-    links: [
-      {
-        href: `${DESIGN_PATH}/favicon.ico`,
-        rel: "icon",
-        type: "image/x-icon",
-      },
-      {
-        href: `${DESIGN_PATH}/apple-icon.png`,
-        rel: "apple-touch-icon",
-      },
-    ],
-    meta: [
-      { title: "Voidhash Design System" },
-      {
-        content: "Design system documentation for Voidhash UI components.",
-        name: "description",
-      },
-    ],
-  }),
-});
-
-function DesignLayout() {
-  return (
-    <RootProvider
-      search={{
-        options: {
-          api: `${DESIGN_PATH}/api/search`,
-        },
-      }}
-    >
-      <Outlet />
-    </RootProvider>
-  );
-}