adjusted overflowing layout, navigation dropdown alignment (#502)

Author: mdrafi28

src/components/AboutUs/HeroSection.tsx

@@ -106,12 +106,12 @@ const HeroSection = () => {
           animate="visible"
           transition={{ delay: 0.5, duration: 0.8 }}
         >
+          A{' '}
           <motion.span
             className="relative inline-block"
             variants={heroAnimations.hoverText}
             whileHover="hover"
           >
-            A
             <span className="text-rose-500 dark:text-rose-400 font-semibold">
               {' '}
               Community

src/components/Info.tsx

@@ -228,11 +228,11 @@ const Info: React.FC = () => {
                 {/* Card on Top Left */}
                 {windowWidth >= 270 && (
                   <motion.div
-                    className="absolute top-2 left-2 bg-black/60
+                    className="absolute top-1 left-2 bg-black/60
                     backdrop-blur-sm rounded-lg sm:rounded-xl p-2.5 sm:p-4 md:p-6 shadow-lg 
                     max-w-[180px] sm:max-w-[220px] md:max-w-xs transform hover:scale-105 
                     transition-all duration-300 ease-out z-10 border border-white/50"
-                    whileHover={{ scale: 1.05 }}
+                    whileHover={{ scale: 1 }}
                   >
                     {windowWidth >= 355 && (
                       <>
@@ -257,11 +257,11 @@ const Info: React.FC = () => {
                 {/* Card on Bottom Right */}
                 {windowWidth >= 270 && (
                   <motion.div
-                    className="absolute bottom-2 right-2 bg-black/60
+                    className="absolute bottom-1 right-2 bg-black/60
                     backdrop-blur-sm rounded-lg sm:rounded-xl p-2.5 sm:p-4 md:p-6 shadow-lg 
                     max-w-[180px] sm:max-w-[220px] md:max-w-xs transform hover:scale-105 
                     transition-all duration-300 ease-out z-10 border border-white/50"
-                    whileHover={{ scale: 1.05 }}
+                    whileHover={{ scale: 1 }}
                   >
                     {windowWidth >= 355 && (
                       <>

src/sections/NavDropdown.tsx

@@ -54,7 +54,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 10 }}
             transition={{ duration: 0.2 }}
-            className="absolute left-0 mt-2 w-56 rounded-xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-10 overflow-hidden"
+            className="absolute left-0 mt-[0.074rem] w-56 rounded-xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-10 overflow-hidden"
           >
             <div className="py-2">
               {items.map((item) => (

src/styles/Animations.ts

@@ -322,7 +322,7 @@ export const item = {
     y: 0,
     opacity: 1,
     transition: {
-      duration: 0.8,
+      duration: 0.1,
       ease: easeOut,
     },
   },