96 lines
5.2 KiB
Markdown
96 lines
5.2 KiB
Markdown
# 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.
|