70 lines
3.9 KiB
Markdown
70 lines
3.9 KiB
Markdown
# 01. Inline Index Page Sections
|
|
|
|
meta:
|
|
id: landing-pages-and-admin-01
|
|
feature: landing-pages-and-admin
|
|
priority: P2
|
|
depends_on: []
|
|
tags: [implementation, ui, landing-page]
|
|
|
|
objective:
|
|
- Refactor the landing page (`/web/src/routes/index.tsx`) to use an inline data-driven pattern like Lendair's index.tsx, where all section content is defined as typed data arrays at the top of the file and rendered directly in the component body, instead of being extracted into separate section components.
|
|
|
|
deliverables:
|
|
- Rewritten `/web/src/routes/index.tsx` with inline data arrays and layout
|
|
- Typed data structures for: hero, how-it-works steps, feature cards, for-users panels, why-kordant items, CTA
|
|
- All inline SVG icon helpers (like Lendair's `IconPath` and `CheckIcon`)
|
|
- PageContainer wrapper used consistently
|
|
- Removal or deprecation of extracted section components (`HeroSection`, `HowItWorksSection`, `FeaturesGridSection`, `ForUsersSection`, `WhyKordantSection`, `CTABannerSection`)
|
|
|
|
steps:
|
|
- Read Lendair's `/Users/mike/code/Lendair/web/src/routes/index.tsx` to understand the inline data pattern
|
|
- Read current Kordant landing section components to extract all content, structure, and styling
|
|
- Define typed data arrays in `index.tsx`:
|
|
- `steps` array for How It Works (step number, title, description)
|
|
- `platformFeatures` array for feature cards (icon, title, description)
|
|
- `forUsers` array for audience panels (icon, title, description, bullet points)
|
|
- `whyKordant` array for value propositions (title, description, bullet points)
|
|
- Hero data object (headline, subheadline, CTA buttons)
|
|
- Create inline SVG helper components (`IconPath`, `CheckIcon`, `ArrowIcon`) matching Lendair's pattern
|
|
- Rebuild the page layout inline using `PageContainer`, clip-path sections, and Tailwind classes
|
|
- Map existing feature icons to inline SVG path strings (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Family Plans)
|
|
- Ensure `ColorWaveBackground` component is still imported and used at the top
|
|
- Update `@solidjs/meta` Title tag
|
|
- Test both desktop and mobile responsive layouts
|
|
- Verify dark/light theme compatibility
|
|
|
|
tests:
|
|
- Unit: Verify data arrays have correct shape and all required fields
|
|
- Integration: Page renders without errors at `/` route
|
|
- Visual: Compare rendered page against current landing page to ensure all sections present
|
|
- Responsive: Test at 320px, 768px, 1024px, 1440px breakpoints
|
|
|
|
acceptance_criteria:
|
|
- `index.tsx` contains all content as inline data arrays (no extracted section components)
|
|
- Page renders identical visual output to current landing page
|
|
- All 6 feature cards render with correct icons, titles, and descriptions
|
|
- How It Works section shows all 3 steps with alternating layout
|
|
- For Users section shows split panels (individual vs family)
|
|
- Why Kordant section shows all value proposition cards with bullet points
|
|
- CTA banner renders with correct buttons linking to `/signup` and `/login`
|
|
- `ColorWaveBackground` renders at page top
|
|
- No console errors or warnings
|
|
|
|
validation:
|
|
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `http://localhost:3000/`
|
|
- Visually compare each section against current landing page
|
|
- Toggle dark/light theme and verify all sections render correctly
|
|
- Resize browser to test responsive breakpoints
|
|
|
|
notes:
|
|
- Reference Lendair pattern: data arrays defined at module scope, rendered with `<For>` loops
|
|
- Existing section components live in `/web/src/components/landing/`
|
|
- `FeaturesGridSection.tsx` has 6 feature cards with specific icons and descriptions
|
|
- `HowItWorksSection.tsx` has 3 steps with alternating left/right layout
|
|
- `ForUsersSection.tsx` has individual vs family split panels
|
|
- `WhyKordantSection.tsx` has 3 value proposition cards
|
|
- `CTABannerSection.tsx` has CTA with two buttons
|
|
- Keep `ColorWaveBackground` as-is (it's a complex Three.js component)
|
|
- Use `PageContainer` component for consistent width and padding
|