Luyash/doughnut

README.md

@@ -1,3 +1,3 @@
-# Deerhack 2025 Website
+# DeerHack 2026 Website
 
 ## Please use Node Version 20.11.0

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

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+import { cabinetExtraBold } from "../utils/fonts";
+import ExpectationCards from "../sections/ExpectationsV2/ExpectationCards";
+import ExpectationsVine from "../assets/icons/ExpectationsVine";
+import Butterfly from "../assets/icons/Butterfly";
+
+export default function ExpectationPageV2(): ReactElement {
+  return (
+    <div className="relative bg-dark-purple py-20 flex flex-col lg:gap-[20px] overflow-hidden md:overflow-visible">
+      <ExpectationsVine className="absolute -right-[24px] md:right-0 top-28  md:-top-8 lg:-top-16 w-[102px] h-[232px] md:w-[215px] md:h-[334px]" />
+      <div
+        className={`${cabinetExtraBold.className} headings px-2 md:px-0 mb-[3rem]`}
+      >
+        What Else Can You Expect at<br></br> DeerHack?
+      </div>
+      <Butterfly className="absolute w-[86px] h-[105px] top-32 left-8 md:w-[144px] md:h-[188px] md:top-[105px] lg:top-[180px] md:left-[60px] z-[45]" />
+      <ExpectationCards />
+      <ExpectationsVine className="absolute bottom-0 opacity-[35%] w-[102px] h-[232px] block md:hidden scale-y-[-1] scale-x-[-1]" />
+    </div>
+  );
+}

frontend/src/app/MainPage.tsx

@@ -14,6 +14,7 @@ import Judges from "@/app/(pages)/Judges";
 import Mentors from "@/app/(pages)/Mentors";
 import Navbar from "@/app/components/Navbar/Navbar";
 import ExperiencePage from "./(pages)/DeerhackExperiencePage";
+import ExpectationPageV2 from "./(pages)/ExpectationsV2";
 
 export default function Home() {
   return (
@@ -24,7 +25,8 @@ export default function Home() {
       <BenefitsPage />
       <PrizesPage />
       <TrackPage />
-      <ExpectationsPage />
+      {/* <ExpectationsPage /> */}
+      <ExpectationPageV2 />
       <DeerhackStatsPage />
       <ImageCarouselPage />
       <ExperiencePage />

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

@@ -0,0 +1,27 @@
+import React, { ReactElement } from "react";
+
+interface Props {
+  onClick: () => void; 
+  className?: string;  
+}
+
+const ExpectationsArrow = ({ onClick, className = "" }: Props): ReactElement => {
+  return (
+    <svg
+      width="70"
+      height="70"
+      viewBox="0 0 70 70"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+      className={`cursor-pointer ${className}`}
+    >
+      <path
+        d="M47.8087 37.4318L31.2119 54.1106C30.4216 54.9048 29.2361 55.302 28.4458 55.302C27.6554 55.302 26.4699 54.9048 25.6796 54.1106C24.099 52.5221 24.099 50.1395 25.6796 48.551L39.5103 34.652L25.6796 20.7529C24.099 19.1645 24.099 16.7818 25.6796 15.1933C27.2603 13.6048 29.6312 13.6048 31.2119 15.1933L47.8087 31.8721C49.3893 33.4606 49.3893 35.8433 47.8087 37.4318Z"
+        fill="#FCF7FF"
+      />
+    </svg>
+  );
+};
+
+export default ExpectationsArrow;

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

@@ -0,0 +1,43 @@
+export default function ExpectationsVine({
+  width = 215,
+  height = 334,
+  className = "",
+}: {
+  width?: number;
+  height?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 291 514"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        opacity="0.12"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M206.658 77.92C215.01 68.8078 224.009 60.3123 233.58 52.4991C240.187 47.0311 241.589 44.5872 248.121 40.0577C237.236 47.3648 216.447 52.8172 202.332 49.2973C187.246 45.5352 172.154 32.5903 172.154 32.5903C172.154 32.5903 185.675 15.6201 200.159 12.0298C219.476 7.24068 251.749 16.3838 264.817 28.1536C297.268 6.49844 317.267 0.114565 317.598 -0.000196843L320.296 7.55852C319.978 7.66973 299.387 12.7882 268.052 33.551C285.422 52.3616 284.752 76.8328 281.012 91.8712C276.709 109.161 262.707 119.441 262.707 119.441C262.707 119.441 247.737 102.847 244.376 91.9166C241 80.9367 242.592 59.7501 251.356 45.4551C247.141 48.5975 243.81 52.7181 239.509 56.2729C230.073 64.072 221.923 73.1055 212.047 83.8547C220.187 95.2955 226.493 104.45 230.382 120.562C236.004 143.85 216.939 165.412 216.939 165.412C216.939 165.412 196.441 156.478 192.142 136.274C190.303 127.64 194.117 109.93 196.969 98.4574C185.254 113.188 175.148 129.137 166.824 146.028C176.403 152.822 196.555 166.344 200.785 184.337C204.001 198.01 202.257 213.736 194.881 226.476C182.194 223.33 170.163 216.252 163.622 204.909C156.106 191.87 157.106 173.414 157.675 164.405C148.247 180.729 147.225 205.913 144.239 227.619C157.813 231.663 173.779 234.343 185.195 247.014C201.111 264.681 199.225 291.828 199.225 291.828C199.225 291.828 169.982 284.468 157.733 274.596C149.609 268.049 144.254 253.668 141.012 240.587C137.887 264.951 133.403 289.122 127.581 312.984C135.73 317.523 161.984 335.629 168.007 352.905C176.8 378.113 164.797 393.421 164.797 393.421C164.797 393.421 142.347 388.769 132.462 376.175C121.814 362.608 123.008 340.504 123.28 330.274C117.59 351.439 109.784 376.103 102.842 394.038C110.352 401.685 129.194 422.553 129.804 442.077C130.559 466.352 116.353 477.745 116.353 477.745C116.353 477.745 101.992 471.223 93.1738 451.306C87.6033 438.725 92.4624 419.949 93.1531 414.574C88.7266 429.309 75.3635 450.272 68.9323 456.737C66.7129 464.818 56.0773 495.748 38.2499 506.47C23.1761 515.53 0.00303726 512.998 0.00303726 512.998C0.00303726 512.998 -0.412879 492.893 9.14163 476.257C18.675 459.659 51.326 454.165 63.0035 452.963C73.3723 442.695 77.304 438.013 89.918 409.178C83.4804 416.196 67.557 426.255 51.0398 425.506C25.7151 424.359 11.8026 410.356 11.8026 410.356C11.8026 410.356 18.1422 391.714 41.3306 383.386C61.6556 376.085 86.7889 385.122 96.9128 390.264C104.589 370.169 109.53 353.563 116.814 328.661C108.905 341.038 98.075 351.772 84.5039 357.329C71.1707 362.791 45.7159 356.838 45.7159 356.838C45.7159 356.838 53.5558 325.517 74.2479 315.751C94.4886 306.2 112.57 310.326 121.115 311.371C127.022 287.527 131.506 263.352 134.549 238.975C130.46 251.815 123.255 268.429 114.094 275.191C97.4543 287.473 70.4614 284.968 70.4614 284.968C70.4614 284.968 77.8231 255.401 89.8337 243.892C102.763 231.504 119.969 227.623 137.773 226.007C141.124 201.497 141.458 181.838 151.209 162.792C144.954 171.495 136.812 177.548 125.36 183.891C110.199 192.289 83.8786 185.023 83.8786 185.023C83.8786 185.023 96.3987 159.959 108.643 149.882C124.804 136.579 149.9 141.842 160.358 144.416C160.707 143.091 181.889 107.9 194.272 92.9899C184.101 101.673 170.478 107.658 160.34 107.686C140.273 107.741 121.545 98.0115 121.545 98.0115C121.545 98.0115 135.758 76.8014 155.473 72.0421C173.153 67.7743 200.192 76.3076 206.658 77.92Z"
+        fill="url(#paint0_linear_98_1719)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_98_1719"
+          x1="281.603"
+          y1="-154.917"
+          x2="-299.209"
+          y2="686.489"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#F5C144" />
+          <stop offset="0.454156" stop-color="#6633CC" />
+          <stop offset="0.782426" stop-color="#9D4BAD" />
+          <stop offset="1" stop-color="#F5C144" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

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

@@ -16,6 +16,7 @@ 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);
 
@@ -33,6 +34,13 @@ export default function GenderEllipseSVG({
     return () => observer.disconnect();
   }, [hasAnimated]);
 
+  useEffect(() => {
+    if (hasAnimated) {
+      const id = setTimeout(() => setShowChart(true), 50);
+      return () => clearTimeout(id);
+    }
+  }, [hasAnimated]);
+
   const handleToggle = (gender: "male" | "female") => {
     const chart = chartRef.current;
     if (!chart) return;
@@ -66,41 +74,41 @@ export default function GenderEllipseSVG({
 
   const options: ChartOptions<"doughnut"> = {
     animation: {
-    duration: 2000, 
-  },
+      duration: 2000,
+    },
     rotation: 90,
     maintainAspectRatio: false,
     cutout: "60%",
     plugins: {
       legend: { display: false },
       tooltip: {
-  enabled: true,
-  backgroundColor: "#110C24",
-  titleColor: "#fff",
-  bodyColor: "#fff",
-  borderColor: "#D977F2",
-  borderWidth: 1,
-  displayColors: false,
-  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%`;
-    },
-  },
-},
+        enabled: true,
+        backgroundColor: "#110C24",
+        titleColor: "#fff",
+        bodyColor: "#fff",
+        borderColor: "#D977F2",
+        borderWidth: 1,
+        displayColors: false,
+        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 (
     <div ref={containerRef} style={{ width, height }} className={className}>
-      {hasAnimated && (
+      {showChart && (
         <Doughnut key="animated" ref={chartRef} data={data} options={options} />
       )}
     </div>

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

@@ -65,7 +65,7 @@ export default function AboutCard({
 
   return (
     <div className="primary-aboutpage-background w-[26rem] h-fit sm:w-auto md:max-w-[55rem] sm:h-full flex flex-col lg:h-[30rem] rounded-2xl p-[0.2875rem] mx-6 mb-6">
-      <div className="relative bg-[#110C24] flex flex-col h-full w-full rounded-[1rem] justify-start gap-4 px-[72px] py-[55px] xl:py-12 md:px-12">
+      <div className="relative bg-[#110C24] flex flex-col h-full w-full rounded-[1rem] justify-start gap-4 pl-10 pr-16 py-[60px] xl:py-12 md:px-12">
         <div className="absolute flex lg:hidden top-[108px] md:top-[150px] right-[-10px] scale-x-[-1] -translate-y-1/2 flex-col gap-5 z-20">
           {buttons.map(({ key, Icon }) => {
             const isActive = activeTab === key;
@@ -78,6 +78,7 @@ export default function AboutCard({
                   rounded-r-[40px] rounded-l-[6px] about-section-button p-1 md:p-2
                   flex items-center justify-end shadow-lg
                   h-10 md:h-16
+                  transition-all duration-300 ease-in-out
                   ${isActive ? "w-[72px] md:w-[140px] brightness-125" : "w-12 md:w-16"}
                 `}
                 aria-label={`Show ${key} info`}
@@ -133,11 +134,11 @@ export default function AboutCard({
         </div>
 
         <div
-          className={` text-magnolia text-[12px] md:text-base text-justify lg:text-[20px] ${satoshiRegular.className} leading-5 tracking-tighter md:tracking-wide md:pr-24`}
+          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`}
         >
           <p>{description}</p>
         </div>
       </div>
     </div>
   );
-}
+}

frontend/src/app/components/ExpectationsV2/ExpectationCard.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { ReactElement } from "react";
+import { cabinetBold } from "@/app/utils/fonts";
+
+export default function ExpectationCard({
+  svg,
+  title,
+  description,
+  isActive,
+}: {
+  svg?: ReactElement;
+  title?: string;
+  description?: string;
+  isActive?: boolean;
+}): ReactElement {
+  return (
+    <div
+      className={`bg-[#442488] px-8 py-10 rounded-[20px] flex flex-col items-center gap-6 h-full w-[300px] md:w-full shadow-2xl transition-all duration-500`}
+    >
+      <div className="flex justify-center items-center gap-4">
+        <div className="w-10 h-10 flex items-center justify-center">{svg}</div>
+        <p
+          className={`text-white ${cabinetBold.className} text-xl lg:text-2xl`}
+        >
+          {title}
+        </p>
+      </div>
+
+      <div className="flex flex-col text-center">
+        <p
+          className={`text-white/90 ${cabinetBold.className} text-[13px] md:text-base leading-relaxed`}
+        >
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/app/components/ExpectationsV2/ExpectationImage.tsx

@@ -0,0 +1,24 @@
+  import Image, { StaticImageData } from "next/image";
+  import { ReactElement } from "react";
+
+  export default function ExpectationImage({
+    imageSrc,
+    className,
+  }: {
+    imageSrc: StaticImageData;
+    className?:string;
+  }): ReactElement {
+    return (
+      <div className={`relative h-[320px] sm:h-[300px] md:h-[23rem] w-[280px] md:w-80 bg-gradient-to-br from-[#6633CC] to-[#9D4BAD] rounded-lg p-[5px] ${className}`}>
+        <div className="relative rounded-lg h-full w-full">
+          <Image
+            src={imageSrc}
+            alt="Some Fun Games Played at Deerhack 2023"
+            fill
+            className="object-cover rounded-lg"
+            loading="lazy"
+          />
+        </div>
+      </div>
+    );
+  }

frontend/src/app/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

frontend/src/app/layout.tsx

@@ -25,25 +25,25 @@ export const metadata = {
     " why participate in hackathon",
   ],
   openGraph: {
-    title: "Deerhack 2026 - Fawning over Innovation",
+    title: "DeerHack 2026 - Fawning over Innovation",
     description:
       "DeerHack 2026 is the brainchild of a small team to unleash the potential of young innovators through a 36-hour hackathon in which developers, designers, students, entrepreneurs, educators, and mentors collaborate to create solutions that tackle real-world problems. When people from many backgrounds collaborate, they do more than merely do good; they become a force for global change",
     url: "https://deerhack.deerwalk.edu.np",
-    siteName: "Deerhack 2026 - Fawning Over Innovation",
+    siteName: "DeerHack 2026 - Fawning Over Innovation",
     images: [
       {
         url: "/banner.webp",
         width: 400,
         height: 250,
-        alt: "Deerhack 2026 Banner",
+        alt: "DeerHack 2026 Banner",
       },
     ],
     locale: "en_US",
     type: "website",
   },
   twitter: {
     card: "summary_large_image",
-    title: "Deerhack 2026",
+    title: "DeerHack 2026",
     description:
       "DeerHack 2026 is the brainchild of a small team to unleash the potential of young innovators through a 36-hour hackathon in which developers, designers, students, entrepreneurs, educators, and mentors collaborate to create solutions that tackle real-world problems. When people from many backgrounds collaborate, they do more than merely do good; they become a force for global change",
     images: ["/banner.webp"],

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

@@ -7,7 +7,7 @@ const AboutTheEventCards = () => {
   const tabs = {
     deerhack: {
       svg: <DeerhackLogo height={50} width={50} />,
-      title: "Deerhack 2026",
+      title: "DeerHack 2026",
       description:
         "DeerHack 2026 is a 48-hour hackathon where developers, designers, students, entrepreneurs, educators, and mentors work together to build ideas that solve real-world complications. DeerHack provides an opportunity for individuals to sharpen their teamwork, communication, leadership skills, and networking in a risk-free and comfortable environment.",
     },