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