Skip to content

feat:Premium Editorial UI for POSH Awareness Page

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

🎯 Overview

This Merge Request transforms the POSH (Prevention of Sexual Harassment) awareness page from a basic layout into a high-fidelity, editorial-style experience. The redesign focuses on psychological safety, professional dignity, and a modern "deep tech" aesthetic that aligns with the Swecha ecosystem.

✨ Key Changes

1. Cinematic Hero Section

  • Visual Impact: Replaced the previous layout with a bold, high-contrast headline ("Safety Defined").
  • Premium Background: Integrated a custom-generated abstract digital background representing protection and interconnected nodes.
  • Improved Navigation: Fixed the layout overlap issue between the global navbar and the page content.

2. Refined Bento-Grid Framework

  • Information Architecture: Reorganized core principles (Zero Tolerance, Total Privacy, Community Led, Legal Compliance) into a clean bento-style grid.
  • Interactivity: Added subtle glassmorphism effects (.glass-premium) and scroll-triggered animations using framer-motion.

3. Editorial Typography & Content

  • Readability: Implemented a sophisticated typography system with improved line heights and "text-shimmer" gradients for emphasis.
  • Manifesto Layout: Created a 2-column editorial layout for the "Beyond Compliance" section to break up long-form text.

4. High-Visibility Reporting System

  • Call to Action: Redesigned the "Need to report an incident?" section to be high-impact yet approachable.
  • Trust Indicators: Added explicit trust markers (24/7 Redressal, Strictly Confidential) to reassure members.

🛠 Technical Implementation

  • Styles: Added .glass-premium, .text-editorial, and .glow-card utilities to src/index.css.
  • Logic: Implemented useScroll and useTransform hooks in PoshPage.tsx for cinematic parallax effects.
  • Assets: Added public/posh_hero_bg.png as a optimized background asset.

✅ Verification

  • Verified responsiveness on mobile, tablet, and desktop viewports.
  • Confirmed zero visual regressions or layout overlaps.
  • Validated accessibility of all calls to action and reporting links.

Merge request reports