feat: Modern UI redesign with glassmorphism, responsive improvements,…

[ramkrishnajha5]

Description

This PR introduces a complete modern UI redesign for devFind with premium glassmorphism aesthetics, improved mobile responsiveness, and enhanced user experience across all devices.

Related Issues

• Addresses UI/UX enhancement needs
• Improves mobile responsiveness

Changes Proposed

🎨 Visual Design Overhaul

• Glassmorphism Design: Added frosted glass effect cards with backdrop blur
• Gradient Accents: Beautiful indigo-to-purple gradients for buttons, text highlights, and active states
• Modern Color Palette: Implemented a cohesive color system with proper dark mode support
• Animated Background: Subtle floating gradient orbs for visual depth

📱 Mobile-First Responsiveness

• Compact Sidebar: Streamlined sidebar for mobile with smaller elements
• Responsive Profile Cards: Properly sized avatars, text, and buttons for all screen sizes
• Touch-Friendly: Appropriate tap targets and spacing for mobile users

🧩 Component Improvements

Sidebar

• Simplified design with logo, tagline, and CTA button
• Removed oversized stats banner (460+ Devs, 50+ Skills)
• Redesigned dark/light toggle as a sliding switch
• Sticky positioning on desktop - sidebar stays fixed while content scrolls

Profile Cards

• Shows ALL skills (wraps naturally in 2-3 lines instead of truncating)
• Shows full bio/description without truncation
• Larger View Profile button on desktop/tablet with gradient styling
• Bigger social icons on larger screens
• Smooth hover effects with subtle elevation

Search Component

• Cleaner, more compact design
• Dropdown filter with emoji icons (👤 Name, 📍 Location, 💼 Skill)
• Proper focus states and clear button

Pagination

• Changed from arrow icons to "Previous" / "Next" text buttons
• Compact page number display with gradient active state
• Proper disabled states

Other Components

• Redesigned 404 Error page with creative layout
• Improved "No Results Found" page with helpful suggestions
• Updated loading skeletons to match new card design

📁 Files Changed

• styles/globals.css - Complete CSS overhaul with new design system
• tailwind.config.js - Extended color palette and animations
• components/Sidebar.jsx - Simplified, sticky sidebar
• components/Profile.jsx - Enhanced profile cards
• components/Search.jsx - Modern search with filter dropdown
• components/Pagination.jsx - Text-based navigation buttons
• components/ProfileSkeleton.jsx - Updated loading states
• components/NoResultFound.jsx - Improved empty state
• components/ErrorPage.jsx - Creative 404 page
• pages/index.js - Sticky sidebar layout, SEO improvements
• pages/_document.js - Google Fonts integration

Checklist

• I have read and followed the Contribution Guidelines.
• All new and existing tests passed.
• My code follows the code style of this project.
• The title of my pull request is a short description of the requested changes.

Screenshots

Desktop View

• Glassmorphism cards with gradient accents
• Sticky sidebar with content scroll
• Larger View Profile buttons

Mobile View

• Compact, touch-friendly layout
• All skills visible (wrapped in multiple lines)
• Full bio descriptions

Note to reviewers

This is a comprehensive UI overhaul that maintains all existing functionality while significantly improving the visual design and user experience. The changes are backward compatible and don't affect the profile data structure.

Key improvements:

• Premium, modern aesthetic that feels state-of-the-art
• Better mobile experience with properly sized elements
• Improved accessibility with larger touch targets
• Smooth animations and transitions

[vercel]

@ramkrishnajha5 is attempting to deploy a commit to the Shyam Tawli's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Great job, @ramkrishnajha5! 🎉 Thank you for opening a pull request. Your contribution is valuable and we appreciate your efforts to improve our project.

Soon the maintainers/owner will review it and provide you with feedback/suggestions.