Dev

frontend/src/app/MainPage.tsx

@@ -33,8 +33,8 @@ export default function Home() {
       <Judges />
       <Mentors />
       <FAQ />
-      <SponsorPage />
-      <RegisterPage />
+      {/* <SponsorPage /> */}
+      {/* <RegisterPage /> */}
       <Footer />
     </>
   );

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

@@ -1,11 +1,21 @@
-const DiscordHero = () => {
+const DiscordHero = ({
+  height = 24,
+  width = 24,
+  className = "",
+}: {
+  height?: number;
+  width?: number;
+  className?: string;
+}) => {
   return (
     <svg
-      width="24"
-      height="17"
+      width={width}
+      height={height}
       viewBox="0 0 33 26"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={className ? undefined : { width, height }}
     >
       <path
         d="M27.9222 2.16076C25.8321 1.15352 23.5692 0.422464 21.212 7.47275e-05C21.1913 -0.000608574 21.1708 0.00340101 21.1517 0.0118216C21.1327 0.0202423 21.1158 0.0328694 21.102 0.0488123C20.8191 0.584922 20.4891 1.28349 20.2691 1.8196C17.7689 1.4297 15.2262 1.4297 12.726 1.8196C12.506 1.26724 12.176 0.584922 11.8774 0.0488123C11.8617 0.0163208 11.8146 7.47275e-05 11.7674 7.47275e-05C9.41023 0.422464 7.16303 1.15352 5.05725 2.16076C5.04154 2.16076 5.02583 2.177 5.01011 2.19325C0.735707 8.80527 -0.442897 15.2386 0.138547 21.6069C0.138547 21.6394 0.154262 21.6719 0.185691 21.6881C3.01434 23.8326 5.73299 25.1322 8.4202 25.9933C8.46735 26.0095 8.51449 25.9933 8.53021 25.9608C9.1588 25.0673 9.72453 24.125 10.2117 23.134C10.2431 23.069 10.2117 23.0041 10.1488 22.9878C9.25308 22.6304 8.40449 22.208 7.57161 21.7206C7.50875 21.6881 7.50875 21.5907 7.55589 21.5419C7.72876 21.412 7.90162 21.2658 8.07448 21.1358C8.10591 21.1033 8.15305 21.1033 8.18448 21.1195C13.5903 23.6701 19.4205 23.6701 24.7635 21.1195C24.7949 21.1033 24.8421 21.1033 24.8735 21.1358C25.0464 21.282 25.2192 21.412 25.3921 21.5582C25.455 21.6069 25.455 21.7044 25.3764 21.7369C24.5592 22.2405 23.6949 22.6466 22.7992 23.0041C22.7363 23.0203 22.7206 23.1015 22.7363 23.1503C23.2392 24.1413 23.8049 25.0835 24.4178 25.977C24.4649 25.9933 24.5121 26.0095 24.5592 25.9933C27.2621 25.1322 29.9808 23.8326 32.8094 21.6881C32.8409 21.6719 32.8566 21.6394 32.8566 21.6069C33.548 14.2476 31.7094 7.86302 27.985 2.19325C27.9693 2.177 27.9536 2.16076 27.9222 2.16076ZM11.0288 17.7242C9.41023 17.7242 8.05877 16.1808 8.05877 14.2801C8.05877 12.3793 9.3788 10.836 11.0288 10.836C12.6946 10.836 14.0146 12.3956 13.9989 14.2801C13.9989 16.1808 12.6789 17.7242 11.0288 17.7242ZM21.982 17.7242C20.3634 17.7242 19.0119 16.1808 19.0119 14.2801C19.0119 12.3793 20.332 10.836 21.982 10.836C23.6478 10.836 24.9678 12.3956 24.9521 14.2801C24.9521 16.1808 23.6478 17.7242 21.982 17.7242Z"
@@ -15,4 +25,4 @@ const DiscordHero = () => {
   );
 };
 
-export default DiscordHero;
+export default DiscordHero;

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

@@ -16,10 +16,25 @@ export default function GenderEllipseSVG({
 }): ReactElement {
   const [visible, setVisible] = useState({ male: true, female: true });
   const [hasAnimated, setHasAnimated] = useState(false);
-  const [showChart, setShowChart] = 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) => {
@@ -36,14 +51,17 @@ export default function GenderEllipseSVG({
 
   useEffect(() => {
     if (!hasAnimated) return;
-    let raf1: number, raf2: number;
-    raf1 = requestAnimationFrame(() => {
-      raf2 = requestAnimationFrame(() => setShowChart(true));
-    });
-    return () => {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
+    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") => {
@@ -61,25 +79,9 @@ export default function GenderEllipseSVG({
     chart.update();
   };
 
-  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,
-      },
-    ],
-  };
-
   const options: ChartOptions<"doughnut"> = {
     animation: {
-      duration: 2000,
+      duration: 1500,
       animateRotate: true,
       animateScale: true,
     },
@@ -115,11 +117,7 @@ export default function GenderEllipseSVG({
 
   return (
     <div ref={containerRef} style={{ width, height }} className={className}>
-      {showChart &&
-        containerRef.current &&
-        containerRef.current.getBoundingClientRect().width > 0 && (
-          <Doughnut key="animated" ref={chartRef} data={data} options={options} />
-        )}
+      <Doughnut ref={chartRef} data={{ labels: [], datasets: [] }} options={options} />
     </div>
   );
 }