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

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.