linting fixed

Author: vaishcodescape

PULL_REQUEST_DESCRIPTION.md

@@ -0,0 +1,72 @@
+---
+name: Pull Request
+about: Submit changes to the project for review and inclusion
+---
+
+## Description
+
+This pull request enhances the dropdown navigation UI with significant visual improvements and animations. The changes transform the basic dropdown into a modern, interactive component with enhanced user experience through advanced animations, hover effects, and visual feedback.
+
+## Related Issue
+
+This PR enhances the dropdown navigation UI experience.
+
+## Changes Made
+
+- **Enhanced Button Styling**: 
+  - Upgraded from basic styling to modern rounded-xl design with enhanced padding
+  - Added font-semibold for better typography hierarchy
+  - Implemented group hover effects with scale and rotation animations
+  - Added border and shadow effects on hover for better visual feedback
+
+- **Advanced Animation System**:
+  - Replaced simple fade animations with complex 3D transforms (rotateX, scale)
+  - Implemented spring-based animations with custom easing curves
+  - Added staggered animations for dropdown items with index-based delays
+  - Enhanced transition timing and easing for smoother interactions
+
+- **Visual Enhancements**:
+  - Added shimmer effects that sweep across elements on hover
+  - Implemented layered background effects with opacity transitions
+  - Created animated dot indicators that scale and appear on hover
+  - Added enhanced arrow indicators with slide-in animations
+  - Included top and bottom accent bars with gradient effects
+
+- **Improved Layout and Spacing**:
+  - Increased dropdown width from 56 to 72 units for better content display
+  - Enhanced padding and margins throughout the component
+  - Added rounded-3xl for more modern appearance
+  - Implemented better shadow system with blue tinting
+
+- **Interactive Feedback**:
+  - Added scale effects on hover for dropdown items
+  - Implemented font weight transitions (medium to semibold)
+  - Created smooth color transitions with enhanced contrast
+  - Added border effects that appear on hover
+
+## Testing Performed
+
+- Tested dropdown functionality across different screen sizes
+- Verified all hover animations work smoothly
+- Confirmed dropdown items navigate correctly
+- Tested accessibility with keyboard navigation
+- Validated animations perform well on different devices
+- Ensured no layout breaking on various viewport sizes
+
+## Checklist
+
+- [x] I have tested these changes locally and they work as expected.
+- [x] I have followed the project's coding style guidelines.
+- [x] I have addressed the code review feedback from the previous submission, if applicable.
+
+## Additional Notes for Reviewers
+
+The enhanced dropdown provides a significantly improved user experience with modern animations and visual feedback. The changes maintain accessibility while adding sophisticated visual effects. The spring-based animations and staggered item reveals create a polished, professional feel that aligns with modern web design standards.
+
+---
+
+Thank you for contributing to our project! We appreciate your help in improving it.
+
+📚 See [contributing instructions](https://github.com/sugarlabs/www-v2/blob/master/README.md).
+
+🙋🏾🙋🏼 Questions: [Community Matrix Server](https://matrix.to/#/#sugar:matrix.org). 

src/sections/NavDropdown.tsx

@@ -59,35 +59,35 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
             initial={{ opacity: 0, y: -15, scale: 0.9, rotateX: -15 }}
             animate={{ opacity: 1, y: 0, scale: 1, rotateX: 0 }}
             exit={{ opacity: 0, y: -15, scale: 0.9, rotateX: -15 }}
-            transition={{ 
+            transition={{
               duration: 0.3,
               ease: [0.4, 0, 0.2, 1],
-              type: "spring",
+              type: 'spring',
               stiffness: 300,
-              damping: 30
+              damping: 30,
             }}
             className="absolute left-0 mt-4 w-72 rounded-3xl bg-white 
                      shadow-2xl shadow-blue-500/20 ring-1 ring-black/5 border border-gray-100 overflow-hidden
                      transform origin-top perspective-1000"
           >
             {/* Subtle border effect */}
             <div className="absolute inset-0 bg-blue-50/30 rounded-3xl" />
-            
+
             {/* Top accent */}
             <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-blue-400/30 rounded-full" />
-            
+
             <div className="relative py-3">
               {items.map((item, index) => (
                 <motion.div
                   key={item.path}
                   initial={{ opacity: 0, x: -30, scale: 0.9 }}
                   animate={{ opacity: 1, x: 0, scale: 1 }}
-                  transition={{ 
+                  transition={{
                     delay: index * 0.08,
                     duration: 0.3,
                     ease: [0.4, 0, 0.2, 1],
-                    type: "spring",
-                    stiffness: 200
+                    type: 'spring',
+                    stiffness: 200,
                   }}
                 >
                   <Link
@@ -100,10 +100,10 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
                   >
                     {/* Enhanced hover background */}
                     <div className="absolute inset-0 bg-blue-100/40 opacity-0 group-hover:opacity-100 transition-all duration-300 rounded-2xl" />
-                    
+
                     {/* Shimmer effect on hover */}
                     <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-500 rounded-2xl" />
-                    
+
                     {/* Animated dot indicator */}
                     <div className="relative z-10 flex items-center w-full">
                       <div className="relative">
@@ -116,11 +116,11 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
                           <span className="w-1 h-1 bg-white rounded-full opacity-80" />
                         </span>
                       </div>
-                      
+
                       <span className="relative z-10 font-medium group-hover:font-semibold transition-all duration-300 text-gray-800 group-hover:text-blue-700">
                         {item.label}
                       </span>
-                      
+
                       {/* Enhanced arrow indicator */}
                       <svg
                         className="w-4 h-4 ml-auto opacity-0 group-hover:opacity-100 transition-all duration-300 
@@ -142,7 +142,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
                 </motion.div>
               ))}
             </div>
-            
+
             {/* Enhanced bottom accent */}
             <div className="h-1.5 bg-blue-500 relative overflow-hidden">
               <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse" />

src/styles/globals.css

@@ -3,7 +3,6 @@
   src: url('/fonts/Caveat-Regular.ttf');
 }
 
-
 @font-face {
   font-family: 'Roboto';
   src: url('/fonts/Roboto-Regular.ttf');