Skip to content

feat: redesign AI HackDays page with premium light UI (SaaS style)

Kuruva Laxmi requested to merge document-file into UI

related to issue:#60 (closed)

📌 Overview

This MR introduces a complete UI refinement for the AI HackDays page, transforming it from a heavy dark-themed layout into a clean, modern light-themed SaaS interface inspired by platforms like Stripe and Linear.

The goal was to improve readability, visual hierarchy, and user experience while keeping all existing content unchanged.

🎯 Key Improvements

🌞 Light Theme Conversion

  • Replaced dark background with a soft gradient light theme
  • Improved readability and accessibility
  • Reduced visual fatigue

🧊 Simplified Card Design

  • Removed nested containers and excessive borders
  • Eliminated inner “Developed By” box
  • Converted developer details into clean inline format
  • Applied subtle shadows and light borders for a minimal look

📊 Stats Section Enhancement

  • Redesigned stats cards with:

    • Clean white background
    • Soft borders and spacing
    • Better alignment and hierarchy

🎨 Visual Noise Reduction

  • Removed:

    • Heavy glow effects
    • Extra divider lines
    • Overlapping UI layers

  • Focused on minimal, content-first design

🔘 Button Improvements

  • Reduced button size and visual weight

  • Introduced:

    • Primary gradient button (subtle)
    • Secondary outline button

  • Improved hover interactions

🧱 Layout & Spacing Fixes

  • Removed outer container around “Project Gallery”
  • Improved spacing between sections
  • Ensured consistent alignment and responsiveness

🧭 Navbar Update

  • Updated to light theme with clean border
  • Improved contrast and usability

⚙️ Technical Notes

  • No changes to existing data or content
  • No new dependencies introduced
  • Fully responsive layout maintained
  • Built using existing React + Tailwind structure

✅ Verification

  • UI tested across screen sizes
  • Existing functionality preserved
  • No breaking changes

🚀 Result

The UI now:

  • Feels clean and professional
  • Matches modern SaaS design standards
  • Improves overall user experience and clarity

📸 Before

image After image image (UI improvement from heavy dark layout → minimal light SaaS design)

🙌 Next Steps (Optional)

  • Apply same design system to other pages
  • Introduce reusable UI components
  • Further refine micro-interactions

Merge request reports