Dev

frontend/src/app/(pages)/FAQ.tsx

@@ -13,7 +13,7 @@ const FAQ = () => {
         style={{ transform: "scaleX(-1)" }}
         className="absolute left-1 top-46 hidden xl:block"
       />
-      <h1 className={`headings mb-[3rem] ${cabinetExtraBold.className}`}>FAQ</h1>
+      <h1 className={`headings mb-[3rem] ${cabinetExtraBold.className}`}>FAQs</h1>
       <Faq />
     </div>
   );

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

@@ -5,6 +5,27 @@ import { Doughnut } from "react-chartjs-2";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
+const EMPTY_DATA = {
+  labels: [],
+  datasets: [{ data: [], backgroundColor: [], borderWidth: 0 }],
+};
+
+const CHART_DATA = {
+  labels: ["Male", "Female", "+10%"],
+  datasets: [
+    {
+      data: [75, 15, 10],
+      backgroundColor: [
+        "rgba(117, 51, 204, 0.77)",
+        "rgba(157, 75, 173, 1)",
+        "rgba(235, 140, 253, 1)",
+      ],
+      hoverBackgroundColor: ["#3B267B", "#E08CF5", "rgba(157, 75, 173, 1)"],
+      borderWidth: 0,
+    },
+  ],
+};
+
 export default function GenderEllipseSVG({
   height = 315,
   width = 315,
@@ -16,25 +37,8 @@ export default function GenderEllipseSVG({
 }): ReactElement {
   const [visible, setVisible] = useState({ male: true, female: true });
   const [hasAnimated, setHasAnimated] = useState(false);
-  const chartRef = useRef<ChartJS<"doughnut">>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const data = {
-    labels: ["Male", "Female", "+10%"],
-    datasets: [
-      {
-        data: [75, 15, 10],
-        backgroundColor: [
-          "rgba(117, 51, 204, 0.77)",
-          "rgba(157, 75, 173, 1)",
-          "rgba(235, 140, 253, 1)",
-        ],
-        hoverBackgroundColor: ["#3B267B", "#E08CF5", "rgba(157, 75, 173, 1)"],
-        borderWidth: 0,
-      },
-    ],
-  };
-
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
@@ -49,42 +53,14 @@ export default function GenderEllipseSVG({
     return () => observer.disconnect();
   }, [hasAnimated]);
 
-  useEffect(() => {
-    if (!hasAnimated) return;
-    const chart = chartRef.current;
-    if (!chart) return;
-
-    chart.config.options!.animation = {
-      duration: 1500,
-      easing: "easeInOutQuart",
-      animateRotate: true,
-      animateScale: true,
-    };
-    chart.data = data;
-    chart.update();
-  }, [hasAnimated]);
-
-  const handleToggle = (gender: "male" | "female") => {
-    const chart = chartRef.current;
-    if (!chart) return;
-
-    if (gender === "male") {
-      chart.toggleDataVisibility(0);
-      setVisible((prev) => ({ ...prev, male: !prev.male }));
-    } else {
-      chart.toggleDataVisibility(1);
-      chart.toggleDataVisibility(2);
-      setVisible((prev) => ({ ...prev, female: !prev.female }));
-    }
-    chart.update();
-  };
+  const handleToggle = (gender: "male" | "female") => { };
 
   const options: ChartOptions<"doughnut"> = {
     animation: {
-      duration: 1500,
+      duration: 1700,
       animateRotate: true,
-      animateScale: true,
-    },
+      animateScale: true
+       },
     rotation: 90,
     maintainAspectRatio: false,
     cutout: "60%",
@@ -101,23 +77,18 @@ export default function GenderEllipseSVG({
         callbacks: {
           title: (context) => {
             const index = context[0].dataIndex;
-            if (index === 1 || index === 2) return "Female";
-            return "Male";
-          },
-          label: (context) => {
-            if (context.dataIndex === 1 || context.dataIndex === 2) {
-              return "25%";
-            }
-            return `75%`;
+            return index === 1 || index === 2 ? "Female" : "Male";
           },
+          label: (context) =>
+            context.dataIndex === 1 || context.dataIndex === 2 ? "25%" : "75%",
         },
       },
     },
   };
 
   return (
     <div ref={containerRef} style={{ width, height }} className={className}>
-      <Doughnut ref={chartRef} data={{ labels: [], datasets: [] }} options={options} />
+      <Doughnut data={hasAnimated ? CHART_DATA : EMPTY_DATA} options={options} />
     </div>
   );
 }

frontend/src/app/components/OtherPrizes/OtherPrizes.tsx

@@ -16,7 +16,7 @@ export default function OtherPrizes({
           className={`${cabinetExtraBold.className} text-primary-gradient-color text-2xl sm:text-2xl md:text-2xl lg:text-4xl text-start w-[8rem] sm:w-[8rem] md:w-[8rem] lg:text-end lg:h-full lg:w-full lg:top-[3rem] relative right-[4.3rem] top-[1.3rem] leading-none text-[1.701rem]`}
         >
           Tons of Gifts & <br />
-          Merch for Everyone !
+          Merch for Everyone 
         </div>
       </div>
     </div>

frontend/src/app/components/OtherPrizes/SwagPrizes.tsx

@@ -25,7 +25,7 @@ export default function SwagPrizes({ scrollProgress }: { scrollProgress: number
         <div
           className={`${cabinetExtraBold.className} flex items-center lg:text-center text-start text-primary-gradient-color h-[7.875rem] w-[10.375rem] leading-none text-[1.701rem] sm:text-[1.701rem] md:text-[2.01rem] lg:text-[2.5rem] py-4 sm:w-[10.375rem] md:w-[10.375rem] lg:w-[20rem] lg:items-center`}
         >
-          Swags and Freebies!
+          Swags and Freebies
         </div>
         <div className="flex justify-center lg:w-full md:w-[150px] w-[100px] h-fit">
           <Lottie

frontend/src/app/components/TrackWinner/TrackWinner.tsx

@@ -37,7 +37,7 @@ export default function TrackWinner({ scrollProgress }: { scrollProgress: number
 </div>
         <div className="flex flex-col items-start gap-1 lg:gap-2 px-6">
           <p className={`${cabinetRegular.className} text-white  text-xs sm:text-xs md:text-xl lg:text-2xl tracking-wide w-full`}>
-            Environment Track Added !
+            Environment Track Added 
           </p>
           <p className={`${cabinetBlack.className} text-4xl sm:text-4xl md:text-5xl lg:text-7xl text-[#F5C144] `}>
             Rs. 15,000

frontend/src/app/sections/Benefits/BenefitsCard.tsx

@@ -1,3 +1,6 @@
+'use client'
+
+import { useState, useEffect } from 'react';
 import CardDark from "@/app/components/BenefitsOfParticipating/CardDark";
 import CardLight from "@/app/components/BenefitsOfParticipating/CardLight";
 import NewNetworksSVG from "@/app/assets/images/NewNetworks";
@@ -11,6 +14,19 @@ import BenefitsCardFourth from "@/app/assets/images/BenefitsCardFourth";
 
 
 export default function BenefitsCards() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  },[]);
+
   return (
     <div className="flex flex-col justify-center gap-5 mx-10 w-full items-center">
       <div className="flex w-full h-full flex-col gap-5 lg:flex-row justify-center items-center">
@@ -32,13 +48,14 @@ export default function BenefitsCards() {
       <div className="flex w-full h-full flex-col gap-5 lg:flex-row justify-center items-center">
       <CardDark
           title="Career Opportunities"
+          bordercolour = {isMobile}
           description="Showcase talents, gain hands-on experience, and develop crucial skills like problem-solving and teamwork for career success."
            pgNo="3."
           svg={<BenefitsCardThird/>}
         />
         <CardLight
           title="Interpersonal Development"
-          bordercolour={true}
+          bordercolour={!isMobile}
           description="Embrace the challenge at DeerHack and watch as your interpersonal skills evolve under pressure, transforming you into a more resilient and effective collaborator."
            pgNo="4."
           svg={<BenefitsCardFourth/>}

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

@@ -106,7 +106,7 @@ const Faq = () => {
       ),
     },
     {
-      title: "Other",
+      title: "Others",
       questions: [
         {
           question: "What about APIs?",