feat: Enhance HeroSection with random rotation effect and optimize DarkModeToggle and FAQs components

Author: sa-fw-an

src/components/AboutUs/HeroSection.tsx

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

src/components/shared/DarkModeToggle.tsx

@@ -1,20 +1,18 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
 
 const DarkModeToggle = () => {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-
-  useEffect(() => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
     const theme = localStorage.getItem('theme');
-    if (theme === 'dark') {
+    const isDark = theme === 'dark';
+    if (isDark) {
       document.documentElement.classList.add('dark');
-      setIsDarkMode(true);
     } else {
       document.documentElement.classList.remove('dark');
-      setIsDarkMode(false);
     }
-  }, []);
+    return isDark;
+  });
+  const [isHovered, setIsHovered] = useState(false);
 
   const toggleDarkMode = () => {
     if (isDarkMode) {

src/pages/About/FAQs.tsx

@@ -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 (