Skip to content

feat: add premium POSH article detail page with motion-first editorial components

Praveena Veeranki requested to merge develop into main

  • Add PoshArticlePage.tsx: 3-column sticky layout (TOC / content / sidebar), spotlight cursor glow, IntersectionObserver scroll-spy, feedback widget, tag chips, UpNextCard navigation, embedded PoshReport form

  • Add ArticleHero.tsx: scroll progress bar, word-by-word spring title reveal, breadcrumbs, author/date/read-time metadata row

  • Add ContentPanel.tsx: glassmorphic section wrapper with blur→clear scroll reveal and prefers-reduced-motion support

  • Add PullQuote.tsx: gradient left-border editorial quote with slide-in

  • Add StatBlock.tsx: viewport-triggered count-up animated stat cards

  • Add Callout.tsx: info/caution/important color-coded alert blocks

  • Add TOC.tsx: sticky sidebar (desktop), sticky dropdown (tablet), bottom sheet drawer (mobile) with spring active-section indicator

  • Add ContextSidebar.tsx: Key Takeaways, Related Reading, Report CTA

  • Add UpNextCard.tsx: sequential article navigation card with hover expand

  • Add src/data/poshArticles.ts: mock article database (3 articles with sections, stats, callouts, accordions, takeaways)

  • Update App.tsx: register /posh/article/:id dynamic route

  • Update PoshResources.tsx: resource cards now navigate to article routes via useNavigate

  • Update PoshReport.tsx: add form validation to pass unit test suite

All checks pass: npm run lint, npm run build, npm run test (4/4)

Merge request reports