fix: redesign home page profile/stats section to reduce whitespace and improve balance (#840)

[Auro993]

Fixes Issue #840

Problem

The Home Page layout had excessive empty space and unbalanced section alignment on desktop screens. The profile/stats section was particularly problematic with large amounts of unused whitespace.

Solution

Completely redesigned the Profile/Stats section with a modern, balanced layout.

Changes Made

New Layout Structure:

• 3-column dashboard for Total Points, Badges, and Activity stats
• Tabbed interface combining Leaderboard and Achievements (saves space)
• Compact activity grid showing Searches, Projects Viewed, Code Opens, and Projects Completed
• Clean empty states for Completed Projects section

Visual Improvements:

• Gradient text for point values
• Card hover effects with smooth transitions
• Better visual hierarchy with proper spacing
• Icons added to each section header
• Progress bar with gradient fill

Responsive Design:

• Desktop: 3-column layout
• Tablet: Single column with 4-column activity stats
• Mobile: Single column with 2-column activity stats

Dark Mode Support:

• All new components work seamlessly with dark mode
• Proper contrast ratios maintained

Files Changed

• templates/index.html - Redesigned profile section (lines ~250-350)
• static/style.css - Added new CSS styles for redesigned components
• static/script.js - Added tab switching functionality for leaderboard/achievements

Testing Done

• Tested on Chrome (Windows)
• Tested on Firefox
• Responsive: 1920x1080, 1366x768, 768px, 375px
• Dark mode toggle works correctly
• All existing functionality preserved (form submission, search, progress tracking)
• No console errors

Screenshots

Before:
[The profile section had excessive whitespace and unbalanced alignment]

After:

[vercel]

@Auro993 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[Auro993]

Please @komalharshita check my PR