Improve FAQ item UI: better padding, alignment, and hover styling (#521)

* adjusted overflowing layout, navigation dropdown alignment

* faq-item:improve padding & hover effects

Author: mdrafi28

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>
   );