# 08. Migrate & Redesign Existing Pages — Blog, Ads, Dashboard Shell

meta:
  id: kordant-unified-restructure-08
  feature: kordant-unified-restructure
  priority: P1
  depends_on: [kordant-unified-restructure-03, kordant-unified-restructure-04, kordant-unified-restructure-05, kordant-unified-restructure-06, kordant-unified-restructure-07]
  tags: [frontend, migration, redesign, solidjs]

objective:
- Port and redesign the existing pages from `packages/web` into the new unified `web/` app, applying the Kordant theme system, UI primitives, and layout components. Pages: Blog (list + post), Ads landing page, and Dashboard shell.

deliverables:
- `web/src/routes/blog.tsx` — Blog listing page:
  - Hero with "Kordant Blog" headline
  - Grid of blog post cards with cover image, title, excerpt, author, date
  - Tag filter bar
  - Pagination or "Load more" button
- `web/src/routes/blog/[slug].tsx` — Individual blog post page:
  - Cover image, title, author, date, reading time
  - Rich text content rendering (Markdown → HTML)
  - Related posts sidebar
  - Social share buttons
- `web/src/routes/ads.tsx` — Ads landing page:
  - Variant of main landing page with UTM-aware copy
  - Conversion-focused layout with prominent CTA
  - Trust badges and testimonials
- `web/src/routes/(webapp)/dashboard.tsx` — Dashboard shell:
  - Sidebar navigation for service sections: Overview, DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Settings
  - Top bar with search, notifications bell, user avatar dropdown
  - Main content area with placeholder widgets for each service
  - Responsive: sidebar collapses to drawer on mobile
- `web/src/components/dashboard/` — Dashboard-specific components:
  - `Sidebar.tsx`, `TopBar.tsx`, `StatCard.tsx`, `ActivityFeed.tsx`, `QuickActions.tsx`

steps:
1. Create route files in `web/src/routes/` matching the deliverables.
2. **Blog listing**:
   - Create a stub data array of blog posts (replace with API in task 23)
   - Use `Card` primitive for post cards
   - Grid layout with `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
   - Tag pills using `Badge` primitive
3. **Blog post**:
   - Use SolidStart dynamic route `[slug].tsx`
   - Render stub markdown content using a lightweight markdown renderer (e.g., `solid-markdown` or custom component)
   - Related posts: filter stub data by shared tags
4. **Ads landing page**:
   - Copy structure from main landing page (task 05–06)
   - Modify headline to be conversion-focused (e.g., "Stop AI Scams Before They Reach You")
   - Add pricing table and FAQ section
   - Track UTM params with `useSearchParams`
5. **Dashboard shell**:
   - Use SolidStart route group `(webapp)` for authenticated routes
   - Sidebar: vertical nav with icons and labels, active state styling
   - TopBar: search input (placeholder), notification bell with badge, avatar dropdown with logout/settings
   - Main area: placeholder grid of `StatCard` components showing mock data
   - Mobile: sidebar hidden by default, hamburger toggle opens drawer overlay
6. **Dashboard components**:
   - `Sidebar`: list of links with icons, active route highlighting
   - `TopBar`: flex row with search, notifications, profile
   - `StatCard`: metric number, label, trend indicator (up/down), icon
   - `ActivityFeed`: list of recent alerts/actions with timestamps
   - `QuickActions`: grid of shortcut buttons for common tasks
7. Migrate any reusable logic from `packages/web/src/hooks/` and `packages/web/src/components/` into `web/src/lib/` and `web/src/components/`.
8. Delete or archive old `packages/web/` after migration is complete (final cleanup in task 41).

steps:
- Unit: Blog listing renders correct number of post cards
- Unit: Blog post page renders content for valid slug, 404 for invalid
- Unit: Dashboard sidebar highlights active route
- Unit: Dashboard stat cards display mock data correctly
- Visual: All pages use theme tokens and shift correctly in dark mode

acceptance_criteria:
- [ ] Blog listing page displays posts in responsive grid with tag filters
- [ ] Blog post page renders markdown content, author, date, and related posts
- [ ] Ads landing page has conversion-focused copy, pricing, and FAQ
- [ ] Dashboard shell has sidebar, top bar, and main content area
- [ ] Dashboard is responsive: sidebar collapses to drawer on mobile
- [ ] All migrated pages use Kordant theme (no old color values)
- [ ] No references to old `packages/web/` paths in new code
- [ ] Route structure matches: `/blog`, `/blog/:slug`, `/ads`, `/dashboard`

validation:
- Navigate to `/blog`, `/blog/test-post`, `/ads`, `/dashboard`
- Verify all pages render without errors
- Test dashboard responsiveness: shrink viewport to <768px, verify sidebar becomes hamburger drawer
- Toggle dark mode on each page and verify theme consistency

notes:
- The blog content will eventually come from the tRPC blog router (task 15+). For now, use stub data arrays.
- The dashboard widgets are shells — they will be filled with real data in task 24.
- Keep the old `packages/web/` directory intact until task 41 to reference code during migration.
- Use SolidStart's `FileRoutes` or explicit `<Route>` definitions in `app.tsx` for the new routes.
- The `(webapp)` route group should apply auth protection middleware (task 11) to all routes inside it.