Skip to content

feat:Redesign POSH Pages with Unified Homepage UI, Dark/Light Theme Support, and Modern Interactive Experience

Description

The current POSH pages are visually inconsistent with the newly redesigned SWECHA homepage and overall platform UI system.

Although the homepage now provides a modern, immersive, and premium experience, the POSH pages still feel:

  • document-oriented
  • isolated from the main website
  • static and less interactive
  • visually disconnected
  • like a website inside another website

This issue focuses on completely redesigning the POSH pages to match the homepage design language while introducing a consistent dark/light theme experience across the platform.

Current Issues

  • POSH pages do not match homepage styling
  • Layout feels isolated from the main platform
  • Pages resemble document or embedded website layouts
  • Lack of modern storytelling structure
  • Inconsistent spacing and typography
  • Missing dark/light theme support
  • Minimal animations and interactions
  • Weak visual hierarchy
  • Poor immersive user experience

Scope of Work

🌗 Theme System Implementation

Add:

  • Dark mode support
  • Light mode support
  • Theme toggle functionality
  • Smooth theme transitions
  • Persistent theme state
  • Shared theme tokens across the platform

Ensure theme consistency with:

  • homepage UI
  • glassmorphism system
  • overall palette and branding

✨ POSH Page Redesign

Completely redesign the POSH pages using the new modern UI system.

Transform pages into:

  • modern storytelling layouts
  • interactive awareness sections
  • immersive content experiences
  • premium SaaS/editorial-style pages

Replace:

  • plain text-heavy layouts
  • isolated document containers
  • static page structures

With:

  • glassmorphism cards
  • layered content blocks
  • responsive grid layouts
  • animated sections
  • interactive awareness cards
  • modern UI containers

🎬 Motion & Interaction Enhancements

Implement advanced animations using Framer Motion:

  • Scroll reveal animations
  • Fade + blur transitions
  • Staggered content animations
  • Hover glow effects
  • Floating card interactions
  • Smooth page transitions
  • Animated section reveals
  • Motion-based storytelling effects

🌌 Background & Visual Enhancements

Add:

  • animated gradient backgrounds
  • ambient lighting effects
  • radial glows
  • blurred floating blobs
  • layered visual depth
  • smooth section transitions
  • premium glass effects

📱 Responsive Improvements

Ensure premium responsive experience across:

  • mobile
  • tablet
  • desktop
  • ultra-wide screens

The pages should feel immersive and polished on all devices.

Technical Requirements

Tech Stack

  • React
  • Vite
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • ShadCN UI
  • Lucide React

Validation Requirements

Ensure the following pass successfully:

  • npm run lint
  • npm run build
  • npm run test

Additional requirements:

  • no TypeScript errors
  • no ESLint issues
  • no broken layouts/routes
  • reusable component structure
  • optimized frontend performance

Expected Outcome

The redesigned POSH pages should:

  • perfectly align with the homepage UI system
  • feel like a seamless part of the SWECHA platform
  • support dark and light themes consistently
  • provide modern storytelling experience
  • include premium animations and glassmorphism
  • feel interactive, immersive, and production-ready
  • no longer resemble static document pages or embedded websites.