Dev

frontend/package.json

@@ -10,6 +10,7 @@
     "deploy": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@lottiefiles/dotlottie-react": "^0.18.3",
     "@next/third-parties": "^14.1.0",
     "@supabase/supabase-js": "^2.39.7",

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

@@ -1,35 +1,134 @@
-import React from "react";
+"use client";
+import React, { useRef } from "react";
 import AboutTheEventCards from "../sections/AboutTheEvent/AboutTheEventCards";
 import { cabinetExtraBold } from "@/fonts";
-import Image from "next/image";
-import about_right from "@/app/assets/images/AboutRight.svg";
-import about_left from "@/app/assets/images/AboutLeft.svg";
+import Laptop from "@/app/assets/icons/Laptop";
+import CoffeCup from "@/app/assets/icons/CoffeeCup";
+import DarinCup from "@/app/assets/icons/DarinCup";
+import Guitar from "@/app/assets/icons/Guitar";
+
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import { useGSAP } from "@gsap/react";
+import DarinCupPhone from "../assets/icons/DarinCupPhone";
+import AboutVine from "../assets/icons/AboutVine";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+export default function Home() {
+  const container = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const allIcons = gsap.utils.toArray<HTMLElement>(
+        ".phone-event-icon, .event-icon",
+      );
+
+      allIcons.forEach((icon) => {
+        const isMobile = window.innerWidth < 1280;
+        const targetRotate =
+          isMobile && icon.classList.contains("phone-event-icon") ? -15 : 0;
+
+        gsap.fromTo(
+          icon,
+          { x: -600, rotate: -180, opacity: 0 },
+          {
+            x: 0,
+            rotate: targetRotate,
+            duration: 1,
+            opacity: 1,
+            ease: "expo.out",
+            scrollTrigger: {
+              trigger: icon,
+              start: isMobile ? "top 90%" : "top 95%",
+              toggleActions: "play none none reverse",
+              invalidateOnRefresh: true,
+            },
+          },
+        );
+      });
+
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: container.current,
+          start: "top 75%",
+          toggleActions: "play none none reverse",
+        },
+      });
+
+      const tl_ph = gsap.timeline({
+        scrollTrigger: {
+          trigger: container.current,
+          start: "top 40%",
+          toggleActions: "play none none reverse",
+        },
+      });
+
+      tl_ph.fromTo(
+        ".darin-anim-ph",
+        { yPercent: 100, rotate: 20, opacity: 0 },
+        {
+          yPercent: 0,
+          rotate: 0,
+          opacity: 1,
+          duration: 1.5,
+          ease: "power2.out",
+        },
+      );
+      tl.fromTo(
+        ".darin-anim",
+        { yPercent: 100, rotate: 20, opacity: 0 },
+        {
+          yPercent: 0,
+          rotate: 0,
+          opacity: 1,
+          duration: 1.5,
+          ease: "power2.out",
+        },
+      );
+    },
+    { scope: container },
+  );
 
-const AboutTheEventPage = () => {
   return (
-    <>
-      <div className="relative">
-        <Image
-          src={about_right}
-          alt="right leaf"
-          height={400}
-          className="absolute top-0 right-0 xl:block hidden"
-        />
-        <Image
-          src={about_left}
-          alt="left leaf"
-          height={250}
-          className="absolute top-1/2 transform -translate-y-1/2 lg:block hidden"
-        />
-        <div className="pb-20 pt-[100px]">
-          <h1 className={`${cabinetExtraBold.className} mb-[3rem] headings lg:text-[]`}>
-            About The Event
-          </h1>
-          <AboutTheEventCards />I
-        </div>
+    <div ref={container} className="relative overflow-hidden">
+      <AboutVine className="w-[102px] h-[232px] z-30 absolute top-[2px] lg:-top-[10%] lg:w-[189px] lg:h-[429px] right-0" />
+      <Laptop
+        height={306}
+        width={354}
+        className="phone-event-icon z-30 lg:event-icon absolute bottom-[120px] md:bottom-[7%] md:left-[28px] lg:-left-[5px] lg:bottom-[8%] w-[137px] h-[118px] md:w-[200px] md:h-[200px] lg:w-[354px] lg:h-[306px]"
+      />
+      <CoffeCup
+        height={170}
+        width={124}
+        className="z-30 md:z-0 lg:z-30 phone-event-icon md:event-icon absolute bottom-[230px] md:bottom-[22.5%] lg:left-[38px] lg:bottom-[38%] w-[48px] h-[56px] md:w-[80px] md:h-[100px] lg:w-[124px] lg:h-[170px]"
+      />
+
+      {/* For Large Screens */}
+      <DarinCup
+        height={843}
+        width={424}
+        className="darin-anim absolute z-30 -bottom-[100px] right-[-150px] hidden lg:block"
+      />
+      {/* For Phone  Screens */}
+      <DarinCupPhone className="darin-anim-ph absolute z-30 right-0 bottom-[50px] block lg:hidden" />
+
+      <div className="pb-[280px] pt-[100px]">
+        <h1
+          className={`${cabinetExtraBold.className} mb-[3rem] headings lg:text-[55px]`}
+        >
+          About The Event
+        </h1>
+        <AboutTheEventCards />
       </div>
-    </>
-  );
-};
 
-export default AboutTheEventPage;
+      <Guitar
+        height={381}
+        width={358}
+        className="phone-event-icon lg:event-icon absolute left-[95px] bottom-[110px] md:bottom-[65px] md:left-[160px] lg:bottom-[-25px] lg:left-[200px] z-30 pointer-events-none w-[138px] h-[147px] lg:h-[381px] lg:w-[358px] md:h-[250px] md:w-[250px]"
+      />
+    </div>
+  );
+}

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

@@ -15,9 +15,16 @@ export default function BenefitsPage() {
           className="absolute right-3 top-46 hidden xl:block -rotate-12"
         />
       </div>
-      <div className={`${cabinetExtraBold.className} mb-[3rem] headings`}>
-        Benefits of Participating
-      </div>
+      <div 
+  className={`${cabinetExtraBold.className} mb-[3rem] headings bg-clip-text text-transparent`}
+  style={{
+    background: "linear-gradient(155.54deg, #CEA33D 30.29%, #6633CC 97.7%)",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+  }}
+>
+  Benefits of Participating
+</div>
       <div className="flex justify-center mx-4">
         <BenefitsCards />
       </div>

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

@@ -4,6 +4,7 @@ import DeerHackStats from "../sections/DeerhackStats/DeerhackStats";
 import Image from "next/image";
 
 import leaf_deerhack2023_right from "@/app/assets/images/leaf_deerhack2023_right.svg";
+import StatsSection from "../components/DeerhackStats/page";
 
 export default function DeerhackStatsPage(): ReactElement {
   return (
@@ -20,7 +21,8 @@ export default function DeerhackStatsPage(): ReactElement {
         DeerHack Till Now
       </div>
       <div className="flex justify-center mt-10">
-        <DeerHackStats />
+        {/* <DeerHackStats /> */}
+        <StatsSection />
       </div>
     </div>
   );

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

@@ -0,0 +1,83 @@
+export default function AboutCollege({
+    width = 109,
+    height = 113,
+    className = ""
+}:{
+    width?: number;
+    height?:number;
+    className?: string;
+
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 109 113"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g filter="url(#filter0_d_355_80)">
+        <circle
+          cx="54.5032"
+          cy="53.5364"
+          r="50.5017"
+          transform="rotate(-3.55551 54.5032 53.5364)"
+          fill="#241A4A"
+        />
+        <path
+          d="M30.9668 77.9981V41.4426H41.4112V30.9981H67.5224V51.887H77.9668V77.9981H57.0779V67.5537H51.8557V77.9981H30.9668ZM36.189 72.7759H41.4112V67.5537H36.189V72.7759ZM36.189 62.3315H41.4112V57.1093H36.189V62.3315ZM36.189 51.887H41.4112V46.6648H36.189V51.887ZM46.6335 62.3315H51.8557V57.1093H46.6335V62.3315ZM46.6335 51.887H51.8557V46.6648H46.6335V51.887ZM46.6335 41.4426H51.8557V36.2204H46.6335V41.4426ZM57.0779 62.3315H62.3001V57.1093H57.0779V62.3315ZM57.0779 51.887H62.3001V46.6648H57.0779V51.887ZM57.0779 41.4426H62.3001V36.2204H57.0779V41.4426ZM67.5224 72.7759H72.7446V67.5537H67.5224V72.7759ZM67.5224 62.3315H72.7446V57.1093H67.5224V62.3315Z"
+          fill="url(#paint0_linear_355_80)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_355_80"
+          x="0"
+          y="3.03306"
+          width="109.006"
+          height="109.007"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_355_80"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_355_80"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_355_80"
+          x1="22.4742"
+          y1="24.374"
+          x2="59.8663"
+          y2="69.4183"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#6633CC" />
+          <stop offset="1" stop-color="#F5C144" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}