Luyash/minor change

frontend/src/app/assets/images/genderEllipse.tsx

@@ -35,10 +35,15 @@ export default function GenderEllipseSVG({
   }, [hasAnimated]);
 
   useEffect(() => {
-    if (hasAnimated) {
-      const id = setTimeout(() => setShowChart(true), 50);
-      return () => clearTimeout(id);
-    }
+    if (!hasAnimated) return;
+    let raf1: number, raf2: number;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setShowChart(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
   }, [hasAnimated]);
 
   const handleToggle = (gender: "male" | "female") => {
@@ -75,6 +80,8 @@ export default function GenderEllipseSVG({
   const options: ChartOptions<"doughnut"> = {
     animation: {
       duration: 2000,
+      animateRotate: true,
+      animateScale: true,
     },
     rotation: 90,
     maintainAspectRatio: false,
@@ -108,9 +115,11 @@ export default function GenderEllipseSVG({
 
   return (
     <div ref={containerRef} style={{ width, height }} className={className}>
-      {showChart && (
-        <Doughnut key="animated" ref={chartRef} data={data} options={options} />
-      )}
+      {showChart &&
+        containerRef.current &&
+        containerRef.current.getBoundingClientRect().width > 0 && (
+          <Doughnut key="animated" ref={chartRef} data={data} options={options} />
+        )}
     </div>
   );
 }

frontend/src/app/components/About/AboutCard.tsx

@@ -134,7 +134,7 @@ export default function AboutCard({
         </div>
 
         <div
-          className={` text-magnolia text-[12px] md:text-base text-left lg:text-[20px] ${satoshiRegular.className} leading-5 tracking-tighter md:tracking-wide md:pr-24`}
+          className={` text-magnolia text-[12px] md:text-[16px] text-left lg:text-[20px] ${satoshiRegular.className} leading-8 tracking-tighter md:tracking-wide md:pr-24 `}
         >
           <p>{description}</p>
         </div>

frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx

@@ -13,7 +13,7 @@ const AboutTheEventCards = () => {
     },
     software: {
       svg: <CodeSVG height={40} width={40} />,
-      title: "Software Club",
+      title: "DWIT Software Club",
       description:
         "The Software Club of Deerwalk Institute of Technology is a student-led organization dedicated to promoting a culture of technology, innovation, and collaboration through workshops and events. Additionally, it is the core team responsible for building Deerhack. Whether it's late-night debugging sessions or organizing large-scale hackathons, we're focused on bridging the gap between classroom theory and the grit of the tech industry.",
     },

frontend/src/app/sections/FAQ/FAQ.tsx

@@ -35,7 +35,7 @@ const Faq = () => {
         {
           question: "How long will DeerHack last?",
           answer:
-            "While DeerHack is a 48-Hour program, DeerHack also has a lot of other fun, team-building events lined up for the participants which will take place from 11th to 13th June 6 making DeerHack a 3-Day event collectively.",
+            "While DeerHack is a 48-Hour program, DeerHack also has a lot of other fun, team-building events lined up for the participants which will take place from 12th to 14th June making DeerHack a 3-Day event collectively.",
         },
         {
           question: "Who can Participate in DeerHack?",
@@ -57,7 +57,7 @@ const Faq = () => {
         {
           question: "What should I bring to DeerHack?",
           answer:
-            "You should bring any necessary equipment or tools for your project, such as a laptop or hardware components. Additionally, you may also want to bring a water bottle, and comfortable clothing for the long hours of relrentless innovation.",
+            "You should bring any necessary equipment or tools for your project, such as a laptop or hardware components. Additionally, you may also want to bring a water bottle, and comfortable clothing for the long hours of relentless innovation.",
         },
         {
           question: "Will foods and drinks be provided at DeerHack?",

frontend/src/app/sections/Tracks/TracksCard.tsx

@@ -14,6 +14,7 @@ import EdTechSVG from "@/app/assets/icons/EdTech";
 import EdTechNew from "@/app/assets/icons/EdTechNew";
 import EnvironmentTrackSVG from "@/app/assets/icons/EnvironmentTrack";
 import EnvironmentTrackBodySVG from "@/app/assets/icons/EnvironmentTrackBody";
+import styles from "./styles.module.css"
 
 const TracksCard = () => {
   const [selectedTrack, setSelectedTrack] = useState<string>(
@@ -51,7 +52,6 @@ const TracksCard = () => {
     {
       title: "Blockchain",
       svg: <BlockchainSVG height={25} width={25} />,
-      // svgBody: <BlockchainSVG height={50} width={50} className="bg-dark-purple fill-magnolia"/>,
       svgBody: <BlockchainNew height={50} width={50} />,
       headStyling:
         selectedTrack === "Blockchain"
@@ -90,11 +90,10 @@ const TracksCard = () => {
       svg: <EnvironmentTrackSVG height={25} width={25} />,
       svgBody: <EnvironmentTrackBodySVG height={50} width={50} />,
       headStyling:
-        selectedTrack === "Environment"
-          ? "gradient-bg text-magnolia active invert "
-          : "bg-violet hover:gradient-bg hover:text-magnolia hover:invert transition-all duration-300",
-      bodyStyling:
-        "gradient-bg text-magnolia invert transition-all duration-300",
+    selectedTrack === "Environment"
+      ? `gradient-bg text-magnolia active invert`
+      : `${styles.envAnimate} text-magnolia hover:opacity-90 transition-opacity duration-500`,
+      bodyStyling: "gradient-bg text-magnolia invert transition-all duration-500",
       description:
         "Think Green, Code Clean at DeerHack. Dive into the world of climate-positive innovation. Turn environmental challenges into elegant, scalable, and sustainable tech solutions.",
     },
@@ -104,32 +103,31 @@ const TracksCard = () => {
   const handleTrackSelection = (title: string) => {
     setSelectedTrack(title);
     setAnimKey((prev) => prev + 1);
-    resetAutoSwitchTimer();
   };
 
-  // Auto switch logic
-  const resetAutoSwitchTimer = () => {
-    if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current);
+  // // Auto switch logic
+  // const resetAutoSwitchTimer = () => {
+  //   if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current);
 
-    autoSwitchTimer.current = setTimeout(() => {
-      const currentIndex = trackData.findIndex(
-        (track) => track.title === selectedTrack
-      );
-      const nextIndex = (currentIndex + 1) % trackData.length;
-      setSelectedTrack(trackData[nextIndex].title);
-      setAnimKey((prev) => prev + 1);
-      resetAutoSwitchTimer(); // schedule next switch
-    }, 10000); // 8 seconds
-  };
+  //   autoSwitchTimer.current = setTimeout(() => {
+  //     const currentIndex = trackData.findIndex(
+  //       (track) => track.title === selectedTrack
+  //     );
+  //     const nextIndex = (currentIndex + 1) % trackData.length;
+  //     setSelectedTrack(trackData[nextIndex].title);
+  //     setAnimKey((prev) => prev + 1);
+  //     resetAutoSwitchTimer(); // schedule next switch
+  //   }, 10000); // 8 seconds
+  // };
 
-  // Start auto-switch when component mounts
-  useEffect(() => {
-    resetAutoSwitchTimer();
-    return () => {
-      if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTrack]);
+  // // Start auto-switch when component mounts
+  // useEffect(() => {
+  //   resetAutoSwitchTimer();
+  //   return () => {
+  //     if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current);
+  //   };
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [selectedTrack]);
 
   return (
     <div className="lg:w-[70.36rem] mx-5 lg:mx-auto transition-all duration-300 ease-in">

frontend/src/app/sections/Tracks/styles.module.css

@@ -9,3 +9,13 @@
   scrollbar-width: none;
   /* Firefox */
 }
+
+@keyframes green-blue-shift {
+  0%   { background-color: #6DB94C; }
+  50%  { background-color: #241A4A } 
+  100% { background-color: #6DB94C; } 
+}
+
+.envAnimate {
+  animation: green-blue-shift 3s ease-in-out infinite;
+}