Skip to content

fix: remove dead nav links, add About and Projects with alias-based routing

Praveena Veeranki requested to merge feature/pages-ui into develop

Overview

This MR delivers two major improvements to the SWECHA platform:

  1. A complete premium, motion-first article detail page for the POSH Awareness section
  2. A navigation cleanup that removes dead/broken links and replaces them with purposeful, content-backed routes

🗂 Changes

1. POSH Article Detail Page

A new dynamic article reading experience at /posh/article/:id, replacing the static document-style page.

New pages:

  • src/pages/PoshArticlePage.tsx — 3-column sticky layout with spotlight cursor glow, IntersectionObserver scroll-spy, thumbs-up/down feedback widget, embedded POSH report form, and sequential article navigation

New components (src/components/posh/):

  • ArticleHero.tsx — pinned scroll progress bar, word-by-word spring title reveal, breadcrumbs, author/date/read-time meta row
  • ContentPanel.tsx — glassmorphic section wrapper with scroll-triggered blur→clear reveal, prefers-reduced-motion support
  • PullQuote.tsx — gradient left-border editorial quote with slide-in animation
  • StatBlock.tsx — viewport-triggered count-up animated stat cards (useInView)
  • Callout.tsx — color-coded info / caution / important alert blocks with icons
  • TOC.tsx — 3-mode responsive Table of Contents: sticky sidebar (desktop), sticky dropdown (tablet), bottom sheet drawer (mobile), with spring-animated active-section indicator
  • ContextSidebar.tsx — Key Takeaways, Related Reading (auto-excludes current article), "File Secure Report" CTA
  • UpNextCard.tsx — sequential article navigation card with hover expand animation

New data:

  • src/data/poshArticles.ts — mock article database with 3 articles: Prevention & Redressal Act, Bystander Intervention Guide, ICC Roles & Responsibilities — each with sections, stats, callouts, accordions, and takeaways

Modified:

  • src/App.tsx — registered dynamic route /posh/article/:id
  • src/components/posh/PoshResources.tsx — resource library cards now navigate to article routes via useNavigate
  • src/components/posh/PoshReport.tsx — added form validation to pass unit test suite

2. Navigation Cleanup

Before After Reason
Mission → / (removed) Duplicate of brand logo link
Library → /#explore (removed) Anchor-only, not a real page
Community → /#community (removed) Broken — anchor does not exist in DOM
(new) About → /about Real CMS content: Swecha founding story
(new) Projects → /projects Real CMS content: flagship project showcase
POSH Awareness → /posh Unchanged ✅

src/services/api.ts — extended fetchPageById to support alias-based lookup (e.g. path segment "about" resolves to CMS page with alias: "/about"), enabling the new nav links to load content correctly through the existing PageView catch-all route.

✅ Quality Gates

Check Result
npm run lint ✅ 0 errors
npm run test ✅ 4/4 passed
npm run build ✅ Built in ~700ms

🔗 Live Routes (dev server)

Route Content
/about About Swecha — founding story, Telugu OS, font work
/projects Swecha Projects — Voice, Medical Camp, FSMI Android, Civic/Agri/Edu/Health Tech
/posh/article/prevention-and-redressal-act Prevention & Redressal Act article
/posh/article/bystander-intervention-guide Bystander Intervention article
/posh/article/icc-roles-responsibilities ICC Roles & Responsibilities article

📌 Notes for Reviewers

  • Article data is currently mocked in poshArticles.ts. When backend is ready, replace with API calls — the component interface is unchanged.
  • The TOC component uses three responsive modes; test on mobile (bottom drawer), tablet (dropdown), and desktop (sticky sidebar).
  • fetchPageById now performs two sequential Array.find() calls (UUID first, alias second) — both are O(n) on the local pages.json array and negligible in cost. When migrated to a real API, this can be replaced with a single parameterized query.

Merge request reports