Minor Changes in Tracks and About The Event Section

frontend/src/app/assets/icons/BlockChainNew.tsx

@@ -16,7 +16,7 @@ const BlockchainNew = ({
       <circle cx="42" cy="42" r="42" fill="#110C24" />
       <path
         d="M53.0833 37.2499C51.5791 37.2499 50.2728 36.8013 49.1645 35.9041C48.0562 35.0069 47.3173 33.8721 46.9478 32.4999H37.0124C36.7221 33.6083 36.1746 34.5648 35.3697 35.3697C34.5648 36.1746 33.6083 36.7221 32.4999 37.0124V46.9478C33.8721 47.3173 35.0069 48.0562 35.9041 49.1645C36.8013 50.2728 37.2499 51.5791 37.2499 53.0833C37.2499 54.8249 36.6298 56.3159 35.3895 57.5562C34.1492 58.7964 32.6583 59.4166 30.9166 59.4166C29.1749 59.4166 27.6839 58.7964 26.4437 57.5562C25.2034 56.3159 24.5833 54.8249 24.5833 53.0833C24.5833 51.5791 25.0319 50.2728 25.9291 49.1645C26.8263 48.0562 27.961 47.3173 29.3333 46.9478V37.0124C27.961 36.643 26.8263 35.9041 25.9291 34.7958C25.0319 33.6874 24.5833 32.3944 24.5833 30.9166C24.5833 29.1749 25.2034 27.6839 26.4437 26.4437C27.6839 25.2034 29.1749 24.5833 30.9166 24.5833C32.3944 24.5833 33.6874 25.0319 34.7958 25.9291C35.9041 26.8263 36.643 27.961 37.0124 29.3333H46.9478C47.3173 27.961 48.0562 26.8263 49.1645 25.9291C50.2728 25.0319 51.5791 24.5833 53.0833 24.5833C54.8249 24.5833 56.3159 25.2034 57.5562 26.4437C58.7964 27.6839 59.4166 29.1749 59.4166 30.9166C59.4166 32.6583 58.7964 34.1492 57.5562 35.3895C56.3159 36.6298 54.8249 37.2499 53.0833 37.2499ZM30.9166 56.2499C31.7874 56.2499 32.5329 55.9333 33.153 55.2999C33.7732 54.6666 34.0833 53.9277 34.0833 53.0833C34.0833 52.2124 33.7732 51.4669 33.153 50.8468C32.5329 50.2267 31.7874 49.9166 30.9166 49.9166C30.0721 49.9166 29.3333 50.2267 28.6999 50.8468C28.0666 51.4669 27.7499 52.2124 27.7499 53.0833C27.7499 53.9277 28.0666 54.6666 28.6999 55.2999C29.3333 55.9333 30.0721 56.2499 30.9166 56.2499ZM30.9166 34.0833C31.7874 34.0833 32.5329 33.7732 33.153 33.153C33.7732 32.5329 34.0833 31.7874 34.0833 30.9166C34.0833 30.0458 33.7732 29.3003 33.153 28.6801C32.5329 28.06 31.7874 27.7499 30.9166 27.7499C30.0721 27.7499 29.3333 28.06 28.6999 28.6801C28.0666 29.3003 27.7499 30.0458 27.7499 30.9166C27.7499 31.7874 28.0666 32.5329 28.6999 33.153C29.3333 33.7732 30.0721 34.0833 30.9166 34.0833ZM53.0833 59.4166C51.3416 59.4166 49.8506 58.7964 48.6103 57.5562C47.3701 56.3159 46.7499 54.8249 46.7499 53.0833C46.7499 51.3416 47.3701 49.8506 48.6103 48.6103C49.8506 47.3701 51.3416 46.7499 53.0833 46.7499C54.8249 46.7499 56.3159 47.3701 57.5562 48.6103C58.7964 49.8506 59.4166 51.3416 59.4166 53.0833C59.4166 54.8249 58.7964 56.3159 57.5562 57.5562C56.3159 58.7964 54.8249 59.4166 53.0833 59.4166ZM53.0833 56.2499C53.9541 56.2499 54.6996 55.9333 55.3197 55.2999C55.9399 54.6666 56.2499 53.9277 56.2499 53.0833C56.2499 52.2124 55.9399 51.4669 55.3197 50.8468C54.6996 50.2267 53.9541 49.9166 53.0833 49.9166C52.2124 49.9166 51.4669 50.2267 50.8468 50.8468C50.2267 51.4669 49.9166 52.2124 49.9166 53.0833C49.9166 53.9277 50.2267 54.6666 50.8468 55.2999C51.4669 55.9333 52.2124 56.2499 53.0833 56.2499ZM53.0833 34.0833C53.9541 34.0833 54.6996 33.7732 55.3197 33.153C55.9399 32.5329 56.2499 31.7874 56.2499 30.9166C56.2499 30.0458 55.9399 29.3003 55.3197 28.6801C54.6996 28.06 53.9541 27.7499 53.0833 27.7499C52.2124 27.7499 51.4669 28.06 50.8468 28.6801C50.2267 29.3003 49.9166 30.0458 49.9166 30.9166C49.9166 31.7874 50.2267 32.5329 50.8468 33.153C51.4669 33.7732 52.2124 34.0833 53.0833 34.0833Z"
-        fill="#FCF7FF"
+        fill="#F5C144"
       />
     </svg>
   );

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

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

frontend/src/app/components/DeerhackStats/CardMini.tsx

@@ -9,13 +9,15 @@ export default function CardMini({
   customClass,
   border,
   className = "",
+  isExtra = false,
 }: {
   svg: ReactElement;
   title: string;
   numbers: number;
   customClass?: string;
   border?: boolean;
   className?: string;   // ← pass any height/sizing class from outside
+  isExtra?: boolean;
 }) {
   return (
     <div
@@ -35,7 +37,7 @@ export default function CardMini({
         </p>
         <CountUpAnimation
           target={numbers}
-          isExtra={false}
+          isExtra={isExtra}
           className="text-[45px] text-[rgba(245,193,68,1)]"
           time={4}
         />

frontend/src/app/components/DeerhackStats/page.tsx

@@ -20,8 +20,9 @@ export default function StatsSection() {
           svg={<ProjectsSVG />}
           title="Total Projects"
           border={true}
-          numbers={33}
-          className="h-[200px]"          
+          numbers={50}
+          className="h-[200px]"    
+          isExtra={true}      
         />
       </div>
       <div className="w-80 lg:w-[24rem]">

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

@@ -8,22 +8,18 @@ import DataScienceSVG from "@/app/assets/icons/DataScience";
 import DataScienceNew from "@/app/assets/icons/DataScienceNew";
 import BlockchainSVG from "@/app/assets/icons/Blockchain";
 import BlockchainNew from "@/app/assets/icons/BlockChainNew";
-import OpenInnovationSVG from "@/app/assets/icons/OpenInnovation";
-import OpenInnovationNew from "@/app/assets/icons/OpenInnovationNew";
 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"
+import styles from "./styles.module.css";
 
 const TracksCard = () => {
   const [selectedTrack, setSelectedTrack] = useState<string>(
-    "Interactive Technology"
+    "Interactive Technology",
   );
   const [animKey, setAnimKey] = useState(0);
 
-  const autoSwitchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
   const trackData = [
     {
       title: "Interactive Technology",
@@ -38,11 +34,11 @@ const TracksCard = () => {
         "Enter the World of IoT with DeerHack. Explore connectivity, innovation, and the future of global interaction.",
     },
     {
-      title: "Machine Learning / AI",
+      title: "Machine Learning / Artificial Intelligence",
       svg: <DataScienceSVG height={25} width={25} />,
       svgBody: <DataScienceNew height={50} width={50} />,
       headStyling:
-        selectedTrack === "Machine Learning / AI"
+        selectedTrack === "Machine Learning / Artificial Intelligence"
           ? "bg-purpures text-magnolia active"
           : "bg-violet hover:bg-purpures hover:text-magnolia transition-all duration-300",
       bodyStyling: "bg-purpures text-magnolia",
@@ -55,24 +51,24 @@ const TracksCard = () => {
       svgBody: <BlockchainNew height={50} width={50} />,
       headStyling:
         selectedTrack === "Blockchain"
-          ? "bg-magnolia text-dark-purple active"
-          : "bg-violet hover:bg-magnolia hover:text-dark-purple transition-all duration-300",
-      bodyStyling: "bg-magnolia text-dark-purple",
-      description:
-        "Embrace Decentralization with DeerHack. Explore smart contracts, secure transactions, and reshape industries at the forefront of innovation.",
-    },
-    {
-      title: "Open Innovation",
-      svg: <OpenInnovationSVG height={25} width={25} />,
-      svgBody: <OpenInnovationNew height={50} width={50} />,
-      headStyling:
-        selectedTrack === "Open Innovation"
           ? "bg-secondary text-dark-purple active"
           : "bg-violet hover:bg-secondary hover:text-dark-purple transition-all duration-300",
       bodyStyling: "bg-secondary text-dark-purple",
       description:
-        "Transforming Challenges into Opportunities at DeerHack. Be part of the solution, forging a brighter future for all.",
+        "Embrace Decentralization with DeerHack. Explore smart contracts, secure transactions, and reshape industries at the forefront of innovation.",
     },
+    // {
+    //   title: "Open Innovation",
+    //   svg: <OpenInnovationSVG height={25} width={25} />,
+    //   svgBody: <OpenInnovationNew height={50} width={50} />,
+    //   headStyling:
+    //     selectedTrack === "Open Innovation"
+    //       ? "bg-secondary text-dark-purple active"
+    //       : "bg-violet hover:bg-secondary hover:text-dark-purple transition-all duration-300",
+    //   bodyStyling: "bg-secondary text-dark-purple",
+    //   description:
+    //     "Transforming Challenges into Opportunities at DeerHack. Be part of the solution, forging a brighter future for all.",
+    // },
     {
       title: "Ed-Tech",
       svg: <EdTechSVG height={25} width={25} />,
@@ -90,10 +86,11 @@ const TracksCard = () => {
       svg: <EnvironmentTrackSVG height={25} width={25} />,
       svgBody: <EnvironmentTrackBodySVG height={50} width={50} />,
       headStyling:
-    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",
+        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.",
     },
@@ -130,7 +127,7 @@ const TracksCard = () => {
   // }, [selectedTrack]);
 
   return (
-    <div className="lg:w-[70.36rem] mx-5 lg:mx-auto transition-all duration-300 ease-in">
+    <div className="lg:w-[69.25rem] mx-5 lg:mx-auto transition-all duration-300 ease-in">
       <div
         className={`flex lg:justify-center items-start text-magnolia lg:gap-[12px] md:gap-6 gap-3 overflow-x-auto no-scrollbar justify-evenly px-3`}
       >
@@ -148,10 +145,7 @@ const TracksCard = () => {
       {trackData.map(
         (track, index) =>
           selectedTrack === track.title && (
-            <div
-              key={animKey}
-              className="animate-track-fade-in"
-            >
+            <div key={animKey} className="animate-track-fade-in">
               <TracksBodyCard
                 key={index}
                 svg={track.svgBody}
@@ -160,7 +154,7 @@ const TracksCard = () => {
                 bodyStyling={track.bodyStyling}
               />
             </div>
-          )
+          ),
       )}
     </div>
   );

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

@@ -12,10 +12,10 @@
 
 @keyframes green-blue-shift {
   0%   { background-color: #6DB94C; }
-  50%  { background-color: #241A4A } 
+  50%  { background-color: #241A4A; } 
   100% { background-color: #6DB94C; } 
 }
 
 .envAnimate {
-  animation: green-blue-shift 3s ease-in-out infinite;
+  animation: green-blue-shift 4s  infinite;
 }