Modernize website design with enhanced UI/UX

[devin-ai-integration]

Summary

Comprehensive visual redesign of the Daily Code platform with modern UI/UX improvements including glassmorphism effects, gradient color schemes, enhanced animations, and improved visual hierarchy.

Link to Devin run: https://app.devin.ai/sessions/cc7c2c9930554fe48cb59b07c7a1c2d8
Requested by: harkirat (harkirat96@gmail.com)

Changes Overview

🎨 Visual Enhancements

• Hero Section: Increased height, added background gradients, enhanced heading with blue-to-purple gradient, improved copy and spacing
• Track Cards: Complete redesign with gradient backgrounds, enhanced hover effects (lift, scale, shadow), improved category badges with pill-shaped design
• Filters & Controls: Redesigned cohort/category selectors with gradient backgrounds and modern styling
• Navigation: Enhanced Appbar with glassmorphism effect, gradient hover states, and improved logo interactions
• Footer: Modernized with better spacing, gradient separator, enhanced social icons with hover animations
• CTA Section: Enriched gradient background, added blur orbs, improved button styling with scale animations

🛠️ Technical Changes

• Added CSS utility classes: .gradient-text, .card-gradient, .glass-effect
• Consistent blue-to-purple gradient theme throughout
• Enhanced dark mode support with tailored variants
• Improved spacing and layout consistency (gap-6, gap-8 vs gap-4)
• Better empty states with gradient text

PR Fixes:

• Enhanced overall visual appeal and modern design aesthetics
• Improved user interface consistency across components
• Better visual feedback for interactive elements
• Enhanced dark mode appearance

⚠️ Important Review Points

Visual Verification Required:

1. Multi-device testing: Verify responsive behavior on mobile, tablet, and desktop viewports
2. Theme testing: Check both light and dark modes for readability and visual coherence
3. Hover states: Test all interactive elements (cards, buttons, links) for smooth animations
4. Gradient readability: Verify text on gradient backgrounds has sufficient contrast
5. Layout integrity: Check for any overflows or broken layouts, especially in track cards and filters

Performance Considerations:

• Multiple blur effects and gradients added - test on lower-end devices
• Animations use GPU-accelerated properties but should verify smoothness
• Shadow effects could impact render performance

Accessibility Concerns:

• Text-on-gradient contrast ratios should meet WCAG standards
• Verify gradient text (bg-clip-text) is readable for users with visual impairments
• Interactive elements should maintain sufficient color contrast in hover states

Checklist before requesting a review

• I have performed a self-review of my code
• I assure there is no similar/duplicate pull request regarding same issue
• ⚠️ Visual verification needed - Dependencies not installed during development, unable to run dev server
• ⚠️ Lint/format checks - Unable to verify due to missing dependencies; recommend running yarn install && yarn lint && yarn format before merge

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring