Merge branch 'sugarlabs:main' into feature/fixes-header

Author: Dakshsharma1108

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

src/components/TryNow/Paragraph.tsx

@@ -16,7 +16,6 @@ const Paragraph: React.FC<ParagraphProps> = ({
   title,
   content,
   button,
-  buttonLink,
   links,
 }) => {
   const contentPoints = content.includes('\n')
@@ -80,7 +79,9 @@ const Paragraph: React.FC<ParagraphProps> = ({
           className="mt-4 bg-blue-600 text-white font-bold py-2 px-6 rounded-full shadow-lg hover:bg-blue-700 transition"
           whileHover="hover"
           variants={paragraphAnimations.button}
-          onClick={() => window.open(buttonLink, '_blank')}
+          onClick={() =>
+            window.open('https://musicblocks.sugarlabs.org/', '_blank')
+          }
         >
           {button}
         </motion.button>

src/constants/TryCardData.ts

@@ -75,7 +75,7 @@ export const TryCardData: CardDataType[] = [
   {
     title: 'Desktop/laptop installation',
     description:
-      'Sugar Learning platform can be installed as a full operating system on ost desktop and laptop computers.',
+      'Sugar Learning platform can be installed as a full operating system on most desktop and laptop computers.',
     tryNowText: 'Try Desktop Installation now!',
     tryNowHref: 'https://fedoraproject.org/spins/soas/download/',
     learnMoreText: 'Learn more about Installation',