# 🎨 Enhance About Page UI – SkinSense

[Bavanetha27]

📌 Issue Description

The current About Page in the SkinSense React frontend is basic and lacks visual hierarchy, styling, and structured content. We need to enhance the UI to make it more modern, informative, and aligned with the AI-powered skincare theme.

🎯 Objectives

• Improve About page layout
• Add structured sections
• Enhance typography and spacing
• Add icons/illustrations
• Make page responsive
• Match SkinSense design theme

🛠️ Tasks

• Redesign About page layout using sections
• Add Hero section (About SkinSense intro)
• Add "What is SkinSense" section
• Add "How It Works" section (steps UI)
• Add "Features" cards (AI detection, recommendations, camera capture)
• Add "Technology Stack" section
• Add icons for each feature
• Improve spacing and typography
• Add responsive layout using Flexbox/Grid
• Add hover effects for cards
• Add footer (optional)

🧩 Suggested Sections

1. Hero Section

• Title: About SkinSense
• Short description
• Background gradient or image

2. What is SkinSense

• AI-powered skincare assistant description
• Brief paragraph

3. How It Works (Step UI)

1. Capture Skin Image
2. AI Model Analysis
3. Detect Skin Type
4. Get Product Recommendations

4. Features Section

• AI Skin Analysis
• Camera Capture
• Smart Recommendations
• Fast Results

5. Technology Section

• React Frontend
• Spring Boot Backend
• FastAPI ML Service
• AI Model Integration

📁 Suggested File

src/pages/About.jsx
src/styles/about.css

🎨 UI Requirements

• Card-based layout
• Soft skincare color palette
• Clean typography
• Rounded cards
• Subtle shadows
• Responsive design
• Smooth hover animations

✅ Acceptance Criteria

• About page has structured sections
• UI is modern and responsive
• Feature cards added
• "How it works" section added
• Styling consistent with app
• No layout breaking

🚀 Expected Outcome

A modern, well-structured About page UI explaining SkinSense features and workflow clearly.

@shreyapawar40 I would like to work on this issue. Kindly assign this to me.

[shreyapawar40]

Ohk I will assign the issue

…

On Fri, 24 Apr, 2026, 10:30 pm Bavanetha M R, ***@***.***> wrote: *Bavanetha27* created an issue (shreyapawar40/SkinSense#8) <#8> 📌 Issue Description The current *About Page* in the SkinSense React frontend is basic and lacks visual hierarchy, styling, and structured content. We need to enhance the UI to make it more modern, informative, and aligned with the AI-powered skincare theme. 🎯 Objectives - Improve About page layout - Add structured sections - Enhance typography and spacing - Add icons/illustrations - Make page responsive - Match SkinSense design theme 🛠️ Tasks - Redesign About page layout using sections - Add Hero section (About SkinSense intro) - Add "What is SkinSense" section - Add "How It Works" section (steps UI) - Add "Features" cards (AI detection, recommendations, camera capture) - Add "Technology Stack" section - Add icons for each feature - Improve spacing and typography - Add responsive layout using Flexbox/Grid - Add hover effects for cards - Add footer (optional) 🧩 Suggested Sections 1. Hero Section - Title: About SkinSense - Short description - Background gradient or image 2. What is SkinSense - AI-powered skincare assistant description - Brief paragraph 3. How It Works (Step UI) 1. Capture Skin Image 2. AI Model Analysis 3. Detect Skin Type 4. Get Product Recommendations 4. Features Section - AI Skin Analysis - Camera Capture - Smart Recommendations - Fast Results 5. Technology Section - React Frontend - Spring Boot Backend - FastAPI ML Service - AI Model Integration 📁 Suggested File src/pages/About.jsx src/styles/about.css 🎨 UI Requirements - Card-based layout - Soft skincare color palette - Clean typography - Rounded cards - Subtle shadows - Responsive design - Smooth hover animations ✅ Acceptance Criteria - About page has structured sections - UI is modern and responsive - Feature cards added - "How it works" section added - Styling consistent with app - No layout breaking 🚀 Expected Outcome A modern, well-structured About page UI explaining SkinSense features and workflow clearly. @shreyapawar40 <https://github.com/shreyapawar40> I would like to work on this issue. Kindly assign this to me. — Reply to this email directly, view it on GitHub <#8>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BKLI3HIJMN3LLQWABTBOXMT4XOMTJAVCNFSM6AAAAACYFN6T62VHI2DSMVQWIX3LMV43ASLTON2WKOZUGMZDINBRGU4DOMI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[r9au]

Hello @shreyapawar40 , if the issue is still open can i work on it.