Skip to content

Feature/UI update - #6

Open
ashk6645 wants to merge 3 commits into
GreatStackDev:mainfrom
ashk6645:feature/UI-Update
Open

Feature/UI update#6
ashk6645 wants to merge 3 commits into
GreatStackDev:mainfrom
ashk6645:feature/UI-Update

Conversation

@ashk6645

@ashk6645 ashk6645 commented Oct 6, 2025

Copy link
Copy Markdown

This pull request introduces a comprehensive visual and accessibility overhaul to the main UI components, focusing on improved aesthetics, enhanced animations, and better accessibility. The most significant updates include new CSS animations, a redesigned and more accessible Navbar, a more visually engaging Hero section, improved loading indicators, and accessibility and style improvements in the Footer.

UI/UX Enhancements and Animations:

  • Added new CSS keyframe animations (shimmer, fadeInUp, slideInRight) and utility classes to app/globals.css to enable animated UI effects across components.
  • Updated the Hero section with gradient backgrounds, shadow effects, animated entrances, and improved button and image styling for a more modern and interactive look.
  • Redesigned the loading spinner in Loading.jsx to support different sizes, optional fullscreen mode, animated bouncing dots, and customizable loading text.

Navigation and Accessibility Improvements:

  • Major refactor of Navbar.jsx:
    • Added a responsive mobile menu with animated open/close states and a toggle button.
    • Improved accessibility and focus styles for links and buttons.
    • Enhanced search functionality with better UX and input validation.
    • Updated cart badge styling for clarity and accessibility.
    • Unified button and link styles using the Button component.

Footer Accessibility and Style Updates:

  • Improved Footer.jsx with clearer focus states, better color contrast, and enhanced hover/focus/active feedback for links and social icons.
  • Added ARIA labels for social media links and updated color palette for better accessibility and visual consistency. [1] [2]

Component Imports and Structure:

  • Updated imports in Hero.jsx to use the shared Button component for consistent button styling.

These changes collectively modernize the application's look and feel, improve accessibility, and provide a more interactive and user-friendly experience.

- Add reusable Button and Input components with variants
- Implement responsive mobile navigation with hamburger menu
- Upgrade Hero section with enhanced gradients and animations
- Improve ProductCard design with better hover effects
- Modernize Newsletter form with validation and loading states
- Add custom CSS animations (shimmer, fade-in, slide-in)
- Enhance loading components with skeleton screens
- Improve overall visual hierarchy and accessibility
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant