refactored framer component, added animations to homepage menu and fixed issue related to rendering multiple framer components at once (don't do it, add a delay)

src/components/framer/framerTextAnimate.tsx

@@ -1,15 +1,19 @@
 "use client";
 
-import { Center } from "@react-three/drei";
 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
 import { Special_Elite } from "next/font/google";
 import React, { useEffect } from "react";
 
 const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });
 
-type props = { children: string };
+type props = {
+  children: string;
+  styles: string;
+  duration: number;
+  delay: number;
+};
 
-const FramerTextAnimate = ({ children }: props) => {
+const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
   const count = useMotionValue(0);
   const baseText = children as string;
 
@@ -19,19 +23,22 @@ const FramerTextAnimate = ({ children }: props) => {
   );
 
   useEffect(() => {
-    const controls = animate(count, baseText.length, {
-      //   type: "tween", // Not really needed because adding a duration will force "tween"
-      duration: 15,
-      ease: "easeInOut",
-    });
-    return controls.stop;
+    // Delay the animation start
+    const delayTimeout = setTimeout(() => {
+      const controls = animate(count, baseText.length, {
+        duration: duration,
+        ease: "easeInOut",
+      });
+      return () => controls.stop();
+    }, delay * 1000);
+
+    // Clear the timeout on unmount to prevent memory leaks
+    return () => clearTimeout(delayTimeout);
   }, []);
 
   return (
     <>
-      <motion.span
-        className={`${special_elite.className} w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed`}
-      >
+      <motion.span className={`${special_elite.className} ${styles}`}>
         {displayText}
       </motion.span>
     </>