Merge branch 'main' into 499-ui-fixes

Author: sandeeprudola

package-lock.json

@@ -18,19 +18,19 @@
     "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,md}'"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.14",
-    "axios": "^1.12.2",
+    "@tailwindcss/vite": "^4.1.16",
+    "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.2.7",
-    "framer-motion": "^12.23.22",
+    "dompurify": "^3.3.0",
+    "framer-motion": "^12.23.24",
     "hastscript": "^9.0.1",
-    "lucide-react": "^0.544.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "lucide-react": "^0.552.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
     "react-responsive-carousel": "^3.2.23",
-    "react-router-dom": "^7.9.3",
+    "react-router-dom": "^7.9.5",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -39,29 +39,29 @@
     "remark-gfm": "^4.0.1",
     "remark-supersub": "^1.0.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.1.16",
     "tailwindcss-animate": "^1.0.7",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@types/node": "^24.6.1",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "eslint": "^9.36.0",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "gh-pages": "^6.3.0",
-    "globals": "^16.4.0",
-    "markdownlint": "^0.38.0",
+    "globals": "^16.5.0",
+    "markdownlint": "^0.39.0",
     "markdownlint-cli": "^0.45.0",
     "prettier": "^3.6.2",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.1.12"
   }
 }

package.json

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { useState } from 'react';
 import { heroAnimations } from '@/styles/Animations';
 import {
   fadeIn,
@@ -12,6 +13,9 @@ import {
 
 const HeroSection = () => {
   const title = 'ABOUT US'.split('');
+  const [randomRotations] = useState(() =>
+    title.map(() => Math.random() * 10 - 5),
+  );
 
   return (
     <motion.div
@@ -71,7 +75,7 @@ const HeroSection = () => {
                 }
                 whileHover={{
                   scale: 1.2,
-                  rotate: Math.random() * 10 - 5,
+                  rotate: randomRotations[index],
                   transition: { duration: 0.2 },
                 }}
               >

src/components/AboutUs/HeroSection.tsx

@@ -67,7 +67,7 @@ const DeveloperLinks = () => {
 
             {/* Arrow with enhanced animation */}
             <div className="relative z-10 flex items-center justify-center w-8 h-8 rounded-full bg-red-100 group-hover:bg-red-200 transition-colors ml-4 flex-shrink-0">
-              <span className="text-gray-600 group-hover:text-red-700 transform group-hover:translate-x-1 transition-all">
+              <span className="-mt-1 text-gray-600 group-hover:text-red-700 transform group-hover:translate-x-1 transition-all">
                 →
               </span>
             </div>

src/components/DeveloperLinks.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/FAQItem.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/components/TryNow/Paragraph.tsx

@@ -5,6 +5,7 @@ export const navigationData = {
       items: [
         { label: 'About Us', path: '/about-us' },
         { label: 'Leadership', path: '/leadership' },
+        { label: 'Authors', path: '/authors' },
         { label: 'Contact Us', path: '/contact-us' },
         { label: 'FAQs', path: '/faqs' },
       ],

src/constants/Header.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',

src/constants/TryCardData.ts

@@ -1,6 +1,6 @@
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { stats } from '@/constants/Stats';
 import faqs, { FAQ_CATEGORIES } from '@/constants/aboutUs/faqs';
 import { quickAnswers } from '@/constants/aboutUs/quickanswers';
@@ -17,14 +17,11 @@ import FAQItem from '@/components/FAQItem';
 
 const FAQs = () => {
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
-  const [filteredFaqs, setFilteredFaqs] = useState(faqs);
 
-  useEffect(() => {
-    const filtered =
-      selectedCategory === 'all'
-        ? faqs
-        : faqs.filter((faq) => faq.category === selectedCategory);
-    setFilteredFaqs(filtered);
+  const filteredFaqs = useMemo(() => {
+    return selectedCategory === 'all'
+      ? faqs
+      : faqs.filter((faq) => faq.category === selectedCategory);
   }, [selectedCategory]);
 
   return (