Skip to content

feat:Redesign About Page to Match Modern Homepage UI and Remove Document-Style Layout

Description

The current SWECHA About page still follows a document/article-style layout that feels visually disconnected from the newly redesigned homepage UI system.

Although the homepage has been modernized with:

  • glassmorphism
  • cinematic layouts
  • immersive animations
  • premium storytelling sections
  • modern SaaS-inspired UI

the About page still appears as:

  • a static text document
  • a plain content container
  • a blog/article-style page
  • an isolated informational screen

This creates inconsistency in the overall platform experience and breaks the immersive visual flow of the website.

Current Issues

  • About page looks like documentation instead of a modern website
  • Large plain text blocks reduce engagement
  • Weak visual hierarchy
  • Minimal animations and interactions
  • No storytelling structure
  • Page feels disconnected from homepage design
  • Flat layout with excessive empty space
  • Limited modern UI elements
  • No immersive section transitions
  • Poor content presentation

Scope of Work

✨ UI Redesign

Completely redesign the About page to match the homepage UI system.

Implement:

  • modern storytelling layouts
  • glassmorphism containers
  • floating cards
  • layered section design
  • premium gradients
  • modern typography hierarchy
  • responsive content blocks
  • interactive UI sections

🧱 Content Restructuring

Replace document-style layout with:

  • feature cards
  • mission & vision sections
  • timeline/storytelling layouts
  • contributor/community blocks
  • impact/stat cards
  • modern info containers
  • split-screen content layouts
  • interactive awareness sections

Break long paragraphs into visually engaging sections.

🎬 Motion & Interaction Enhancements

Add modern animations using Framer Motion:

  • fade + blur reveal animations
  • staggered section transitions
  • floating card interactions
  • hover glow effects
  • smooth scrolling transitions
  • animated section entrances
  • cinematic motion storytelling

🌌 Background & Visual Atmosphere

Improve visual depth by adding:

  • animated mesh gradients
  • radial glow effects
  • blurred floating blobs
  • layered backgrounds
  • ambient lighting
  • smooth section separation
  • cinematic visual transitions

📱 Responsive Improvements

Ensure premium responsiveness across:

  • mobile
  • tablet
  • desktop
  • ultra-wide screens

The About page should maintain immersive storytelling 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
  • reusable components
  • optimized rendering
  • accessible UI
  • scalable architecture

Expected Outcome

The redesigned About page should:

  • visually match the homepage design system
  • no longer resemble a document/article page
  • provide immersive storytelling experience
  • include premium glassmorphism styling
  • contain modern animations and interactions
  • feel cinematic, modern, and interactive
  • improve readability and engagement
  • seamlessly integrate into the SWECHA platform UI ecosystem.