Skip to content

feat: redesign About page into a premium cinematic storytelling experience

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

Description

This MR redesigns the SWECHA About page to align with the newly developed homepage UI system and transforms the existing document-style layout into a modern, immersive website experience.

The previous About page appeared as a static informational document with large text-heavy sections and minimal interaction design. This update restructures the page into a visually engaging storytelling experience with premium UI patterns, animations, and responsive layouts.

✨ UI & UX Improvements

  • Completely redesigned the About page layout
  • Removed document/article-style presentation
  • Added modern storytelling-based section structure
  • Improved typography, spacing, and visual hierarchy
  • Introduced premium glassmorphism UI elements
  • Added layered layouts and interactive content sections
  • Improved overall consistency with homepage design system
  • Enhanced readability and user engagement

🧱 Content Restructuring

  • Converted long plain text sections into modular content blocks
  • Added modern information cards and feature sections
  • Improved section organization and content flow
  • Added structured storytelling layouts
  • Improved awareness and community presentation
  • Enhanced content separation and readability

🎬 Motion & Animation Enhancements

Implemented modern animations using Framer Motion:

  • Smooth section reveal animations
  • Fade and blur transitions
  • Staggered content animations
  • Hover glow effects
  • Floating UI interactions
  • Smooth scroll-based transitions
  • Interactive card animations

🌌 Visual Enhancements

  • Added immersive gradient backgrounds
  • Improved glassmorphism effects and layered depth
  • Added subtle glow and ambient lighting effects
  • Enhanced overall cinematic feel of the page
  • Improved visual consistency across sections

📱 Responsive Improvements

Enhanced responsive experience for:

  • mobile
  • tablet
  • desktop
  • ultra-wide screens

Improved adaptive spacing and responsive content layouts.

⚙️ Frontend Improvements

  • Refactored reusable UI components
  • Improved component structure and maintainability
  • Enhanced responsive layout system
  • Improved animation organization and rendering behavior
  • Unified styling patterns with homepage UI

🧪 Validation

Verified successfully:

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

Pipeline passed successfully with no major issues.

🎯 Outcome

The About page now delivers:

  • a modern immersive website experience
  • premium storytelling layouts
  • improved readability and engagement
  • cinematic animations and interactions
  • visually consistent UI aligned with the homepage
  • a more polished and production-ready frontend experience. closes #10 (closed)
Edited by Praveena Veeranki

Merge request reports