restructure tasks

tasks/shieldai-unified-restructure/08-migrate-existing-pages.md

@@ -0,0 +1,95 @@
+# 08. Migrate & Redesign Existing Pages — Blog, Ads, Dashboard Shell
+
+meta:
+  id: shieldai-unified-restructure-08
+  feature: shieldai-unified-restructure
+  priority: P1
+  depends_on: [shieldai-unified-restructure-03, shieldai-unified-restructure-04, shieldai-unified-restructure-05, shieldai-unified-restructure-06, shieldai-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 ShieldAI 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 "ShieldAI 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 ShieldAI 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.