From 39d733265f1eadf670093378826e9d021f331884 Mon Sep 17 00:00:00 2001
From: MOHAMMED RAFI D <rafi04rafi@gmail.com>
Date: Thu, 23 Oct 2025 22:57:27 +0530
Subject: [PATCH 1/2] adjusted overflowing layout, navigation dropdown
 alignment

---
 src/components/AboutUs/HeroSection.tsx | 2 +-
 src/components/Info.tsx                | 8 ++++----
 src/sections/NavDropdown.tsx           | 2 +-
 src/styles/Animations.ts               | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/AboutUs/HeroSection.tsx b/src/components/AboutUs/HeroSection.tsx
index d27aa642..577776a3 100644
--- a/src/components/AboutUs/HeroSection.tsx
+++ b/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
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
index 66e0214a..9dd0f1e1 100644
--- a/src/components/Info.tsx
+++ b/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 && (
                       <>
diff --git a/src/sections/NavDropdown.tsx b/src/sections/NavDropdown.tsx
index 257713fe..0749de6e 100644
--- a/src/sections/NavDropdown.tsx
+++ b/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) => (
diff --git a/src/styles/Animations.ts b/src/styles/Animations.ts
index 5aa688b5..5b113cb5 100644
--- a/src/styles/Animations.ts
+++ b/src/styles/Animations.ts
@@ -322,7 +322,7 @@ export const item = {
     y: 0,
     opacity: 1,
     transition: {
-      duration: 0.8,
+      duration: 0.1,
       ease: easeOut,
     },
   },

From 80c2cb2c37870e0fcf587ab107320e695b49f7e9 Mon Sep 17 00:00:00 2001
From: MOHAMMED RAFI D <rafi04rafi@gmail.com>
Date: Sat, 1 Nov 2025 22:17:00 +0530
Subject: [PATCH 2/2] faq-item:improve padding & hover effects

---
 src/components/FAQItem.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/FAQItem.tsx b/src/components/FAQItem.tsx
index 36ddc417..37166d97 100644
--- a/src/components/FAQItem.tsx
+++ b/src/components/FAQItem.tsx
@@ -13,7 +13,14 @@ const faqItemVariants = {
 };
 
 const faqQuestionButtonVariants = {
-  hover: { scale: 1.02 },
+  initial: { backgroundColor: 'rgba(0,0,0,0)', y: 0 },
+  hover: {
+    scale: 1.02,
+    backgroundColor: 'rgba(0,0,0,0.12)',
+    y: -1,
+    boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
+    transition: { type: 'spring' as const, stiffness: 300, damping: 15 },
+  },
 };
 
 const faqToggleIconVariants = (isOpen: boolean) => ({
@@ -44,17 +51,17 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
       animate="animate"
     >
       <motion.button
-        className="w-full text-left py-4 text-lg font-medium flex justify-between items-center hover:cursor-pointer text-gray-900 dark:text-gray-100"
+        className="w-full text-left py-4 px-4 text-lg font-medium flex justify-between items-center hover:cursor-pointer text-gray-900 dark:text-gray-100 rounded-md"
         onClick={toggleFAQ}
         whileHover="hover"
         variants={faqQuestionButtonVariants}
       >
-        {question}
+        <span className="flex-1">{question}</span>
         <motion.span
           variants={faqToggleIconVariants(isOpen)}
           initial="initial"
           animate="animate"
-          className="text-gray-600 dark:text-gray-400"
+          className="text-gray-600 dark:text-gray-400 ml-2"
         >
           {isOpen ? '-' : '+'}
         </motion.span>
@@ -65,7 +72,7 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
         animate="animate"
         style={{ overflow: 'hidden' }}
       >
-        <p className="p-4 text-gray-700 dark:text-gray-300">{answer}</p>
+        <p className="px-6 pb-4 text-gray-700 dark:text-gray-300">{answer}</p>
       </motion.div>
     </motion.div>
   );