Redesign using other library classes

Refactor to Next.js 15 and remove Hero UI usage from the app and standardize on shadcn ui with Radix primitives and compact tokens.

Goals

1. Replace all Hero UI components in the app with shadcn ui equivalents or headless Radix where needed.

2. Keep the current routes and logic intact. Only the UI layer changes.

3. Result must feel sleek and compact, not bulky.

Tech guardrails

• Next.js 15 with React 19 and App Router

• Tailwind CSS

• shadcn ui primitives: Button, Input, Card, Dialog, DropdownMenu, Label, Tabs, Tooltip, Separator, Skeleton, ScrollArea

• Radix where shadcn wraps it

• State: React Query for server data, Zustand for local app state

• Forms: React Hook Form with Zod

Design tokens for compact feel

• Container: center, max width 1100 to 1200 px

• Type: h1 text 4xl md 5xl semibold tracking tight, h2 text 2xl md 3xl, body text 15px leading 7, ui meta text sm

• Density: default paddings p 4, controls h 9 px 3 text sm

• Radius: cards rounded 2xl, controls rounded lg

• Borders: hairline border white 10 percent on dark or black 10 percent on light

• Motion: transition all duration 150 with subtle scale or translate on hover

Acceptance checklist

• No imports from hero ui remain

• All primitives come from ui directory that wraps shadcn

• The app uses compact controls h 9 px 3 text sm and body text 15px leading 7

• Containers never exceed 1200 px and line length feels readable

• Keyboard navigation and focus rings pass WCAG AA

• Lighthouse on a typical app view shows performance 95 plus and accessibility 100