diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d4a6736..dfeb1c5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "frontend", "version": "0.1.0", "dependencies": { + "@gsap/react": "^2.1.2", "@lottiefiles/dotlottie-react": "^0.18.3", "@next/third-parties": "^14.1.0", "@supabase/supabase-js": "^2.39.7", @@ -128,6 +129,16 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@gsap/react": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz", + "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==", + "license": "SEE LICENSE AT https://gsap.com/standard-license", + "peerDependencies": { + "gsap": "^3.12.5", + "react": ">=17" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/frontend/package.json b/frontend/package.json index b5e3625..f99847b 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/public/carousel/processed/sized/1.webp b/frontend/public/carousel/processed/sized/1.webp index 2a3ae91..bdf3e56 100644 Binary files a/frontend/public/carousel/processed/sized/1.webp and b/frontend/public/carousel/processed/sized/1.webp differ diff --git a/frontend/public/carousel/processed/sized/14.webp b/frontend/public/carousel/processed/sized/14.webp index 96b89c4..99bc31f 100644 Binary files a/frontend/public/carousel/processed/sized/14.webp and b/frontend/public/carousel/processed/sized/14.webp differ diff --git a/frontend/public/carousel/processed/sized/5.webp b/frontend/public/carousel/processed/sized/5.webp index 08af8ce..95e9c04 100644 Binary files a/frontend/public/carousel/processed/sized/5.webp and b/frontend/public/carousel/processed/sized/5.webp differ diff --git a/frontend/public/carousel/processed/sized/7.webp b/frontend/public/carousel/processed/sized/7.webp index 4314ba0..9fb257e 100644 Binary files a/frontend/public/carousel/processed/sized/7.webp and b/frontend/public/carousel/processed/sized/7.webp differ diff --git a/frontend/src/app/(pages)/AboutTheEventPage.tsx b/frontend/src/app/(pages)/AboutTheEventPage.tsx index 0d1d3b0..316a061 100644 --- a/frontend/src/app/(pages)/AboutTheEventPage.tsx +++ b/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(null); + + useGSAP( + () => { + const allIcons = gsap.utils.toArray( + ".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 ( - <> -
- right leaf - left leaf -
-

- About The Event -

- I -
+
+ + + + + {/* For Large Screens */} + + {/* For Phone Screens */} + + +
+

+ About The Event +

+
- - ); -}; -export default AboutTheEventPage; + +
+ ); +} diff --git a/frontend/src/app/(pages)/BenefitsPage.tsx b/frontend/src/app/(pages)/BenefitsPage.tsx index 0dd1771..d67b138 100644 --- a/frontend/src/app/(pages)/BenefitsPage.tsx +++ b/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" />
-
- Benefits of Participating -
+
+ Benefits of Participating +
diff --git a/frontend/src/app/(pages)/DeerhackStatsPage.tsx b/frontend/src/app/(pages)/DeerhackStatsPage.tsx index df10e03..3d8d919 100644 --- a/frontend/src/app/(pages)/DeerhackStatsPage.tsx +++ b/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
- + {/* */} +
); diff --git a/frontend/src/app/assets/icons/AboutCollege.svg b/frontend/src/app/assets/icons/AboutCollege.svg new file mode 100644 index 0000000..60a5167 --- /dev/null +++ b/frontend/src/app/assets/icons/AboutCollege.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/AboutCollege.tsx b/frontend/src/app/assets/icons/AboutCollege.tsx new file mode 100644 index 0000000..41561bd --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/AboutSoftware.svg b/frontend/src/app/assets/icons/AboutSoftware.svg new file mode 100644 index 0000000..8031c89 --- /dev/null +++ b/frontend/src/app/assets/icons/AboutSoftware.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/AboutSoftware.tsx b/frontend/src/app/assets/icons/AboutSoftware.tsx new file mode 100644 index 0000000..a22e63a --- /dev/null +++ b/frontend/src/app/assets/icons/AboutSoftware.tsx @@ -0,0 +1,174 @@ +import { ReactElement } from "react"; + +export default function Test({ + height = 136, + width = 140, + className = " ", +}: { + height?: number; + width?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/AboutVine.svg b/frontend/src/app/assets/icons/AboutVine.svg new file mode 100644 index 0000000..8b14523 --- /dev/null +++ b/frontend/src/app/assets/icons/AboutVine.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/AboutVine.tsx b/frontend/src/app/assets/icons/AboutVine.tsx new file mode 100644 index 0000000..fb01a6e --- /dev/null +++ b/frontend/src/app/assets/icons/AboutVine.tsx @@ -0,0 +1,43 @@ +export default function AboutVine({ + width = 215, + height = 334, + className = "", +}:{ + width?: number; + height?: number; + className?: string; +}) { + return ( + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/Blockchain.tsx b/frontend/src/app/assets/icons/Blockchain.tsx index 301c975..bea3d61 100644 --- a/frontend/src/app/assets/icons/Blockchain.tsx +++ b/frontend/src/app/assets/icons/Blockchain.tsx @@ -1,9 +1,11 @@ const Blockchain = ({ height = 25, width = 25, + className = "", }: { height?: number; width?: number; + className?: string; }) => { return ( diff --git a/frontend/src/app/assets/icons/Club.svg b/frontend/src/app/assets/icons/Club.svg new file mode 100644 index 0000000..908578c --- /dev/null +++ b/frontend/src/app/assets/icons/Club.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/ClubSVG.tsx b/frontend/src/app/assets/icons/ClubSVG.tsx new file mode 100644 index 0000000..01e991d --- /dev/null +++ b/frontend/src/app/assets/icons/ClubSVG.tsx @@ -0,0 +1,128 @@ +import { ReactElement } from "react"; + +export default function ClubSVG({ + height = 64, + width = 64, +}: { + height?: number; + width?: number; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/CoffeeCup.svg b/frontend/src/app/assets/icons/CoffeeCup.svg new file mode 100644 index 0000000..ddebc1b --- /dev/null +++ b/frontend/src/app/assets/icons/CoffeeCup.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/CoffeeCup.tsx b/frontend/src/app/assets/icons/CoffeeCup.tsx new file mode 100644 index 0000000..ced2d1a --- /dev/null +++ b/frontend/src/app/assets/icons/CoffeeCup.tsx @@ -0,0 +1,162 @@ +import { ReactElement } from "react"; + +export default function CoffeeCup({ + height = 34, + width = 34, + className = " ", +}: { + height?: number; + width?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/CollegeInfo.svg b/frontend/src/app/assets/icons/CollegeInfo.svg new file mode 100644 index 0000000..a709aa3 --- /dev/null +++ b/frontend/src/app/assets/icons/CollegeInfo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/CollegeInfo.tsx b/frontend/src/app/assets/icons/CollegeInfo.tsx new file mode 100644 index 0000000..94f34db --- /dev/null +++ b/frontend/src/app/assets/icons/CollegeInfo.tsx @@ -0,0 +1,27 @@ +import { ReactElement } from "react"; + +export default function DarinCup({ + height = 50, + width = 50, + className=" " +}: { + height?: number; + width?: number; + className?:string; +}): ReactElement { + return ( + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/DarinCropped.svg b/frontend/src/app/assets/icons/DarinCropped.svg new file mode 100644 index 0000000..c46a724 --- /dev/null +++ b/frontend/src/app/assets/icons/DarinCropped.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/DarinCropped.tsx b/frontend/src/app/assets/icons/DarinCropped.tsx new file mode 100644 index 0000000..b3043a4 --- /dev/null +++ b/frontend/src/app/assets/icons/DarinCropped.tsx @@ -0,0 +1,450 @@ +import * as React from "react"; +const DarinCropped = ({className = ""}) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default DarinCropped; diff --git a/frontend/src/app/assets/icons/DarinCup.svg b/frontend/src/app/assets/icons/DarinCup.svg new file mode 100644 index 0000000..bc6da71 --- /dev/null +++ b/frontend/src/app/assets/icons/DarinCup.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/DarinCup.tsx b/frontend/src/app/assets/icons/DarinCup.tsx new file mode 100644 index 0000000..cfc2aa8 --- /dev/null +++ b/frontend/src/app/assets/icons/DarinCup.tsx @@ -0,0 +1,552 @@ +import { ReactElement } from "react"; + +export default function DarinCup({ + height = 34, + width = 34, + className = " ", +}: { + height?: number; + width?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/DarinCupPhone.svg b/frontend/src/app/assets/icons/DarinCupPhone.svg new file mode 100644 index 0000000..53c27f2 --- /dev/null +++ b/frontend/src/app/assets/icons/DarinCupPhone.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/DarinCupPhone.tsx b/frontend/src/app/assets/icons/DarinCupPhone.tsx new file mode 100644 index 0000000..cdd6291 --- /dev/null +++ b/frontend/src/app/assets/icons/DarinCupPhone.tsx @@ -0,0 +1,492 @@ +export default function DarinCupPhone({ + width = 152, + height = 353, + className = "", +}: { + width?: number; + height?: number; + className?: string; +}) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/DeerhackLogo.tsx b/frontend/src/app/assets/icons/DeerhackLogo.tsx index 11ee6f0..32ec1c8 100644 --- a/frontend/src/app/assets/icons/DeerhackLogo.tsx +++ b/frontend/src/app/assets/icons/DeerhackLogo.tsx @@ -1,9 +1,11 @@ export default function DeerhackLogo({ - height = "40", - width = "40", + height = 40, + width = 40, + className = "", }: { - height?: string; - width?: string; + height?: number; + width?: number; + className?: string; }) { return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/Guitar.tsx b/frontend/src/app/assets/icons/Guitar.tsx new file mode 100644 index 0000000..eac6d6e --- /dev/null +++ b/frontend/src/app/assets/icons/Guitar.tsx @@ -0,0 +1,369 @@ +import { ReactElement } from "react"; + +export default function CoffeeCup({ + height = 34, + width = 34, + className = " ", +}: { + height?: number; + width?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/ImprovizedButton.tsx b/frontend/src/app/assets/icons/ImprovizedButton.tsx new file mode 100644 index 0000000..aac1ef4 --- /dev/null +++ b/frontend/src/app/assets/icons/ImprovizedButton.tsx @@ -0,0 +1,1400 @@ +interface ButtonProps { + active: number; + className: string; + setActive: (index: number) => void; +} + +const ImprovizedButton = ({ + active, + className = "", + setActive, +}: ButtonProps) => { + return ( + + + + + + + + + setActive(0)} + className="btn-group cursor-pointer" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + setActive(1)} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + setActive(2)} className="btn-group cursor-pointer"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export default ImprovizedButton; diff --git a/frontend/src/app/assets/icons/InteractiveButton.svg b/frontend/src/app/assets/icons/InteractiveButton.svg new file mode 100644 index 0000000..1aeb227 --- /dev/null +++ b/frontend/src/app/assets/icons/InteractiveButton.svg @@ -0,0 +1,195 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/InteractiveButton.tsx b/frontend/src/app/assets/icons/InteractiveButton.tsx new file mode 100644 index 0000000..2883e1c --- /dev/null +++ b/frontend/src/app/assets/icons/InteractiveButton.tsx @@ -0,0 +1,751 @@ + +interface ButtonProps{ + active: number; + className: string; + setActive: (index: number) => void; + onSelect?: (index: number) => void; +} + + +const InteractiveButton = ({active, className = "", setActive, onSelect} : ButtonProps) => ( + + + + + + + + + setActive(0)} + className="cursor-pointer" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + setActive(2)} + className="cursor-pointer" + > + + + + setActive(1)} + className="cursor-pointer" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default InteractiveButton; diff --git a/frontend/src/app/assets/icons/Laptop.svg b/frontend/src/app/assets/icons/Laptop.svg new file mode 100644 index 0000000..6e6b60f --- /dev/null +++ b/frontend/src/app/assets/icons/Laptop.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/Laptop.tsx b/frontend/src/app/assets/icons/Laptop.tsx new file mode 100644 index 0000000..de45caf --- /dev/null +++ b/frontend/src/app/assets/icons/Laptop.tsx @@ -0,0 +1,78 @@ +import { ReactElement } from "react"; + +export default function CoffeeCup({ + height = 34, + width = 34, + className = " ", +}: { + height?: number; + width?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/icons/Leaf.svg b/frontend/src/app/assets/icons/Leaf.svg new file mode 100644 index 0000000..cb86a1e --- /dev/null +++ b/frontend/src/app/assets/icons/Leaf.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/Leaf.tsx b/frontend/src/app/assets/icons/Leaf.tsx new file mode 100644 index 0000000..7ccada6 --- /dev/null +++ b/frontend/src/app/assets/icons/Leaf.tsx @@ -0,0 +1,28 @@ + +export default function Leaf({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/frontend/src/app/assets/icons/Line.svg b/frontend/src/app/assets/icons/Line.svg new file mode 100644 index 0000000..55a5579 --- /dev/null +++ b/frontend/src/app/assets/icons/Line.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/SoftwareClub.svg b/frontend/src/app/assets/icons/SoftwareClub.svg new file mode 100644 index 0000000..78b0d1c --- /dev/null +++ b/frontend/src/app/assets/icons/SoftwareClub.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/icons/SoftwareClub.tsx b/frontend/src/app/assets/icons/SoftwareClub.tsx new file mode 100644 index 0000000..4f8aa8f --- /dev/null +++ b/frontend/src/app/assets/icons/SoftwareClub.tsx @@ -0,0 +1,57 @@ +import { ReactElement } from "react"; + +export default function SoftwareClub({ + height = 100, + width = 100, + className=" " +}: { + height?: number; + width?: number; + className?:string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/images/BenefitsCardFourth.svg b/frontend/src/app/assets/images/BenefitsCardFourth.svg new file mode 100644 index 0000000..7fd0fb6 --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsCardFourth.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/BenefitsCardFourth.tsx b/frontend/src/app/assets/images/BenefitsCardFourth.tsx new file mode 100644 index 0000000..1073880 --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsCardFourth.tsx @@ -0,0 +1,39 @@ +import React from 'react' + +function BenefitsCardFourth() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default BenefitsCardFourth \ No newline at end of file diff --git a/frontend/src/app/assets/images/BenefitsCardThird.svg b/frontend/src/app/assets/images/BenefitsCardThird.svg new file mode 100644 index 0000000..a2caef7 --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsCardThird.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/BenefitsCardThird.tsx b/frontend/src/app/assets/images/BenefitsCardThird.tsx new file mode 100644 index 0000000..797abb8 --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsCardThird.tsx @@ -0,0 +1,25 @@ +import React from 'react' + +function BenefitsCardThird() { + return ( + + + + + + + + + + + + + + + + + ) +} + +export default BenefitsCardThird \ No newline at end of file diff --git a/frontend/src/app/assets/images/BenefitsFirstCard.svg b/frontend/src/app/assets/images/BenefitsFirstCard.svg new file mode 100644 index 0000000..8583469 --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsFirstCard.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/BenefitsFirstCard.tsx b/frontend/src/app/assets/images/BenefitsFirstCard.tsx new file mode 100644 index 0000000..7eb3df7 --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsFirstCard.tsx @@ -0,0 +1,24 @@ +import React from 'react' + +function BenefitsFirstCard() { + return ( + + + + + + + + + + + + + + + + ) +} + +export default BenefitsFirstCard \ No newline at end of file diff --git a/frontend/src/app/assets/images/BenefitsSecondCard.svg b/frontend/src/app/assets/images/BenefitsSecondCard.svg new file mode 100644 index 0000000..9b2e9e2 --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsSecondCard.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/BenefitsSecondCard.tsx b/frontend/src/app/assets/images/BenefitsSecondCard.tsx new file mode 100644 index 0000000..c5f2f9c --- /dev/null +++ b/frontend/src/app/assets/images/BenefitsSecondCard.tsx @@ -0,0 +1,72 @@ +import React from 'react' +import { ReactElement } from 'react'; + +export default function BenefitsSecondCard({ + height = 232, + width = 210, + className = "", +}: { + height?: number; + width?: number; + className?: string; +}): ReactElement { + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/src/app/assets/images/HeroPageMobile.svg b/frontend/src/app/assets/images/HeroPageMobile.svg new file mode 100644 index 0000000..fa2e06a --- /dev/null +++ b/frontend/src/app/assets/images/HeroPageMobile.svg @@ -0,0 +1,1512 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/applicants.tsx b/frontend/src/app/assets/images/applicants.tsx index 3d939a8..3b74df3 100644 --- a/frontend/src/app/assets/images/applicants.tsx +++ b/frontend/src/app/assets/images/applicants.tsx @@ -15,11 +15,11 @@ export default function ApplicantsSVG({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + diff --git a/frontend/src/app/assets/images/gender.tsx b/frontend/src/app/assets/images/gender.tsx index 3dbe455..67c07c8 100644 --- a/frontend/src/app/assets/images/gender.tsx +++ b/frontend/src/app/assets/images/gender.tsx @@ -15,10 +15,10 @@ export default function GenderSVG({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); diff --git a/frontend/src/app/assets/images/genderEllipse.tsx b/frontend/src/app/assets/images/genderEllipse.tsx index 851d105..7f5a523 100644 --- a/frontend/src/app/assets/images/genderEllipse.tsx +++ b/frontend/src/app/assets/images/genderEllipse.tsx @@ -3,34 +3,24 @@ import { ReactElement } from "react"; export default function GenderEllipseSVG({ height = 315, width = 315, + className= "", }: { height?: number; width?: number; + className?: string; }): ReactElement { return ( - - - + xmlns="http://www.w3.org/2000/svg" + className = {className} + > + + + - - - - // - // - // - // - // - ); } diff --git a/frontend/src/app/assets/images/hackers.tsx b/frontend/src/app/assets/images/hackers.tsx index 8146d20..58c4362 100644 --- a/frontend/src/app/assets/images/hackers.tsx +++ b/frontend/src/app/assets/images/hackers.tsx @@ -15,10 +15,10 @@ export default function HackersSVG({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); diff --git a/frontend/src/app/assets/images/increaseStat.tsx b/frontend/src/app/assets/images/increaseStat.tsx index b6b9459..e36aeaf 100644 --- a/frontend/src/app/assets/images/increaseStat.tsx +++ b/frontend/src/app/assets/images/increaseStat.tsx @@ -14,7 +14,7 @@ export default function increase_statSVG({ viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - + ); diff --git a/frontend/src/app/assets/images/projects.tsx b/frontend/src/app/assets/images/projects.tsx index 677a1f4..aa7f11c 100644 --- a/frontend/src/app/assets/images/projects.tsx +++ b/frontend/src/app/assets/images/projects.tsx @@ -15,10 +15,10 @@ export default function ProjectsSVG({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); diff --git a/frontend/src/app/components/About/AboutCard.tsx b/frontend/src/app/components/About/AboutCard.tsx index 3435214..333479e 100644 --- a/frontend/src/app/components/About/AboutCard.tsx +++ b/frontend/src/app/components/About/AboutCard.tsx @@ -1,37 +1,142 @@ -import { ReactElement } from "react"; +"use client"; + +import { ReactElement, useState } from "react"; import { cabinetBold, satoshiRegular, cabinetExtraBold, } from "@/app/utils/fonts"; -export default function AboutCard({ - svg, - title, - description, -}: { +import DeerhackLogo from "@/app/assets/icons/DeerhackLogo"; +import Software from "@/app/assets/icons/SoftwareClub"; +import AboutSoftware from "@/app/assets/icons/AboutSoftware"; +import CollegeInfo from "@/app/assets/icons/CollegeInfo"; +import AboutCollege from "@/app/assets/icons/AboutCollege"; + +type TabKey = "deerhack" | "software" | "college"; + +interface TabContent { svg?: ReactElement; title?: string; description?: string; +} + +export default function AboutCard({ + tabs, +}: { + tabs: Record; }): ReactElement { + const [activeTab, setActiveTab] = useState("deerhack"); + + const { svg, title, description } = tabs[activeTab]; + + const buttons: { + key: TabKey; + Icon: React.ComponentType<{ + className?: string; + isActive?: boolean; + width?: number; + height?: number; + }>; + }[] = [ + { key: "deerhack", Icon: DeerhackLogo }, + { key: "software", Icon: Software }, + { key: "college", Icon: CollegeInfo }, + ]; + const largeButtons: { + key: TabKey; + Icon: React.ComponentType<{ + className?: string; + isActive?: boolean; + width?: number; + height?: number; + }>; + }[] = [ + { key: "deerhack", Icon: DeerhackLogo }, + { key: "software", Icon: AboutSoftware }, + { key: "college", Icon: AboutCollege }, + ]; + + const positions = [ + "absolute top-0 left-[82px]", + "absolute -right-[40px] top-[150px]", + "absolute left-[45px] top-[280px]", + ]; + return ( -
-
-
-
+
+
+
+ {buttons.map(({ key, Icon }) => { + const isActive = activeTab === key; + + return ( + + ); + })} +
+ +
+
+
+
+
+ {largeButtons.map(({ key, Icon }, index) => { + const isActive = activeTab === key; + + return ( + + ); + })} +
+
+
{svg}
+

{title}

-

- {description} -

+

{description}

+
); diff --git a/frontend/src/app/components/BenefitsOfParticipating/CardDark.tsx b/frontend/src/app/components/BenefitsOfParticipating/CardDark.tsx index 989c43a..a6d3095 100644 --- a/frontend/src/app/components/BenefitsOfParticipating/CardDark.tsx +++ b/frontend/src/app/components/BenefitsOfParticipating/CardDark.tsx @@ -5,6 +5,7 @@ import { cabinetExtraBold, cabinetMedium, cabinetRegular, + satoshiRegular, } from "@/app/utils/fonts"; export default function CardDark({ @@ -12,24 +13,35 @@ export default function CardDark({ description, pgNo, svg, + bordercolour=false, }: { title: string; description: string; pgNo: string; svg: ReactElement; + bordercolour?:boolean; }) { + +const borderClass = bordercolour ? "secondary-border-background" : "primary-border-background"; + return ( -
+ +
- {title} + className={`${cabinetExtraBold.className} text-transparent bg-clip-text lg:text-[2rem] text-[1.5rem] w-[10.69rem] md:w-[18.72rem] sm:leading-[2rem] md:leading-[2.75rem] md:pb-0 font-extrabold z-10`} + style={{ + background: "linear-gradient(155.54deg, #CEA33D 30.29%, #6633CC 97.7%)", + WebkitBackgroundClip: "text", + WebkitTextFillColor: "transparent", + }} + > + {title}
{description}
diff --git a/frontend/src/app/components/BenefitsOfParticipating/CardLight.tsx b/frontend/src/app/components/BenefitsOfParticipating/CardLight.tsx index 7dfd5d1..9cb1d31 100644 --- a/frontend/src/app/components/BenefitsOfParticipating/CardLight.tsx +++ b/frontend/src/app/components/BenefitsOfParticipating/CardLight.tsx @@ -5,6 +5,7 @@ import { cabinetExtraBold, cabinetMedium, cabinetRegular, + satoshiRegular, } from "@/app/utils/fonts"; export default function CardLight({ @@ -12,24 +13,32 @@ export default function CardLight({ description, pgNo, svg, + bordercolour=false, }: { title: string; description: string; pgNo: string; svg: ReactElement; + bordercolour?:boolean; }) { + const borderClass = bordercolour ? "third-border-background" : "primary-border-background"; return ( -
-
+
+
-
- {title} -
-
+ {title} +
+
+
{description}
diff --git a/frontend/src/app/components/DeerhackStats/CardLarge.tsx b/frontend/src/app/components/DeerhackStats/CardLarge.tsx index 9b5ffbb..797d311 100644 --- a/frontend/src/app/components/DeerhackStats/CardLarge.tsx +++ b/frontend/src/app/components/DeerhackStats/CardLarge.tsx @@ -1,79 +1,77 @@ import { ReactElement } from "react"; import GenderSVG from "@/app/assets/images/gender"; import { - cabinetBlack, cabinetBold, cabinetMedium, cabinetRegular, } from "@/app/utils/fonts"; import GenderEllipseSVG from "@/app/assets/images/genderEllipse"; import IncreaseStatSVG from "@/app/assets/images/increaseStat"; -import DecreaseStatSVG from "@/app/assets/images/decreaseStat"; + export default function CardLarge(): ReactElement { return ( -
-
- -
- -

+

+ +
+ + {/* Header */} +
+ +

Gender Distribution

- -
- + {/* Doughnut */} +
+
- -
- {/* Male Stats */} -
-
-
-

+ {/* Stats layout */} +

+ + {/* Row 1 */} +
+
+
+

Male

-
- 75% -
- {/* Decrease Stat */} - {/*
- -

- 5% -

-
*/} -
- - {/* Female Stats */} -
- {/* Flex for Icon and Female Text */} -
-
-

+

+
+

Female

-
- 25% +
+ + {/* Row 2 */} +
+
+
+ 75% +
- {/* Increase Stat */} -
- -

- 10% -

+
+
+ 25% +
+
+ +

+ 10% since 2024 +

+
+
); -} +} \ No newline at end of file diff --git a/frontend/src/app/components/DeerhackStats/CardMedium.tsx b/frontend/src/app/components/DeerhackStats/CardMedium.tsx index 0f7e35f..38a3a85 100644 --- a/frontend/src/app/components/DeerhackStats/CardMedium.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMedium.tsx @@ -1,25 +1,28 @@ import ApplicantsSVG from "@/app/assets/images/applicants" import { cabinetBold, cabinetRegular } from "@/app/utils/fonts" import CountUpAnimation from "../CountUp/CountUpAnimation" +import Leaf from "@/app/assets/icons/Leaf" export default function CardMedium() { return ( -
-
+
+ + +
{/* Mobile View */}
-

Total

+

Total

{/*

3840+

*/} - +
-

Applicants

+

Applicants

{/* DeskTop View */}
-

Total Applicants

+

Total Applicants

{/*

3840+

*/} - +
diff --git a/frontend/src/app/components/DeerhackStats/CardMini.tsx b/frontend/src/app/components/DeerhackStats/CardMini.tsx index b27c069..e318f0d 100644 --- a/frontend/src/app/components/DeerhackStats/CardMini.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMini.tsx @@ -1,4 +1,4 @@ -import { cabinetBold, cabinetRegular } from "@/app/utils/fonts"; +import { cabinetBold } from "@/app/utils/fonts"; import { ReactElement } from "react"; import CountUpAnimation from "../CountUp/CountUpAnimation"; @@ -6,23 +6,37 @@ export default function CardMini({ svg, title, numbers, + customClass, + border, }: { svg: ReactElement; title: string; numbers: number; + customClass?: string; + border?: boolean; }) { return ( -
-
- {svg} -

+

+
{svg}
+
+

{title}

+
- {/*

- {numbers} -

*/} -
); -} +} \ No newline at end of file diff --git a/frontend/src/app/components/DeerhackStats/page.tsx b/frontend/src/app/components/DeerhackStats/page.tsx index ba1540d..2672a2b 100644 --- a/frontend/src/app/components/DeerhackStats/page.tsx +++ b/frontend/src/app/components/DeerhackStats/page.tsx @@ -6,11 +6,11 @@ import CardLarge from "./CardLarge"; export default function StatsSection() { return ( -
+
- } title="Hackers" numbers={75} /> - } title="Projects" numbers={18} /> + } title="Hackers" numbers={215} customClass="bg-[#532B6A]"/> + } title="Total Projects" border={true} numbers={33} />
diff --git a/frontend/src/app/components/GrandPrize/GrandPrizeCard.tsx b/frontend/src/app/components/GrandPrize/GrandPrizeCard.tsx index 5571302..3feac59 100644 --- a/frontend/src/app/components/GrandPrize/GrandPrizeCard.tsx +++ b/frontend/src/app/components/GrandPrize/GrandPrizeCard.tsx @@ -68,8 +68,8 @@ export default function GrandPrizeCard({ scrollProgress }: GrandPrizeCardProps):
diff --git a/frontend/src/app/components/ImageCarousel/mockDataTwo.tsx b/frontend/src/app/components/ImageCarousel/mockDataTwo.tsx index b904637..60ca79e 100644 --- a/frontend/src/app/components/ImageCarousel/mockDataTwo.tsx +++ b/frontend/src/app/components/ImageCarousel/mockDataTwo.tsx @@ -1,8 +1,5 @@ export const dataTwo = [ - { - id: 8, - img: "/carousel/processed/sized/8.webp", - }, + { id: 9, img: "/carousel/processed/sized/9.webp", diff --git a/frontend/src/app/components/Navbar/Navbar.tsx b/frontend/src/app/components/Navbar/Navbar.tsx index 137cf19..ba9291e 100644 --- a/frontend/src/app/components/Navbar/Navbar.tsx +++ b/frontend/src/app/components/Navbar/Navbar.tsx @@ -74,7 +74,7 @@ const Navbar = () => { {/* Top bar with logo and hamburger */}
- +
-
+ ); } \ No newline at end of file diff --git a/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx b/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx index 56e4f9f..f276b96 100644 --- a/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx +++ b/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx @@ -9,7 +9,7 @@ export default function DeerHackStats() {
- } title="Hackers" numbers={215} /> + } title="Hackers" numbers={215} customClass="bg-[rgba(157,75,173,0)]"/> } title=" Total Projects" numbers={33} />
diff --git a/frontend/src/app/sections/Tracks/TracksCard.tsx b/frontend/src/app/sections/Tracks/TracksCard.tsx index 86c0f24..d034e50 100644 --- a/frontend/src/app/sections/Tracks/TracksCard.tsx +++ b/frontend/src/app/sections/Tracks/TracksCard.tsx @@ -1,25 +1,27 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect, useRef } from "react"; import TracksHeading from "@/app/components/Tracks/TracksHeadingCard"; +import TracksBodyCard from "@/app/components/Tracks/TracksBodyCard"; import InteractiveTechnologySVG from "@/app/assets/icons/InteractiveTechnology"; import InteractiveTechnologyNewSVG from "@/app/assets/icons/InteractiveTechnologyNew"; import DataScienceSVG from "@/app/assets/icons/DataScience"; -import BlockchainSVG from "@/app/assets/icons/Blockchain"; -import OpenInnovationSVG from "@/app/assets/icons/OpenInnovation"; -import EdTechSVG from "@/app/assets/icons/EdTech"; -import TracksBodyCard from "@/app/components/Tracks/TracksBodyCard"; -import { useRef } from "react"; 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"; const TracksCard = () => { const [selectedTrack, setSelectedTrack] = useState( - "Interactive Technology", + "Interactive Technology" ); + const [animKey, setAnimKey] = useState(0); + + const autoSwitchTimer = useRef | null>(null); const trackData = [ { @@ -44,11 +46,12 @@ const TracksCard = () => { : "bg-violet hover:bg-purpures hover:text-magnolia transition-all duration-300", bodyStyling: "bg-purpures text-magnolia", description: - "Dive deep into the captivating realm of Data Analysis and Predictive Modeling, Leveraging algorithms and Artificial Intellignce.", + "Dive deep into the captivating realm of Data Analysis and Predictive Modeling, Leveraging algorithms and Artificial Intelligence.", }, { title: "Blockchain", svg: , + // svgBody: , svgBody: , headStyling: selectedTrack === "Blockchain" @@ -90,24 +93,48 @@ const TracksCard = () => { selectedTrack === "Environment" ? "gradient-bg text-magnolia active invert " : "bg-violet hover:gradient-bg hover:text-magnolia hover:invert transition-all duration-300", - bodyStyling: "gradient-bg text-magnolia invert transition-all duration-300", + bodyStyling: + "gradient-bg text-magnolia invert transition-all duration-300", 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.", }, ]; + // Function to handle track selection manually const handleTrackSelection = (title: string) => { setSelectedTrack(title); + setAnimKey((prev) => prev + 1); + resetAutoSwitchTimer(); + }; + + // Auto switch logic + const resetAutoSwitchTimer = () => { + if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current); + + autoSwitchTimer.current = setTimeout(() => { + const currentIndex = trackData.findIndex( + (track) => track.title === selectedTrack + ); + const nextIndex = (currentIndex + 1) % trackData.length; + setSelectedTrack(trackData[nextIndex].title); + setAnimKey((prev) => prev + 1); + resetAutoSwitchTimer(); // schedule next switch + }, 10000); // 8 seconds }; - const containerRef = useRef(null); + // Start auto-switch when component mounts + useEffect(() => { + resetAutoSwitchTimer(); + return () => { + if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedTrack]); return ( -
- +
{trackData.map((track, index) => ( { {trackData.map( (track, index) => selectedTrack === track.title && ( - - ), +
+ +
+ ) )}
); }; -export default TracksCard; +export default TracksCard; \ No newline at end of file diff --git a/frontend/src/app/sections/home/styles.module.css b/frontend/src/app/sections/home/styles.module.css index c749575..5ae9e9b 100644 --- a/frontend/src/app/sections/home/styles.module.css +++ b/frontend/src/app/sections/home/styles.module.css @@ -8,7 +8,8 @@ @media screen and (max-width: 500px) { .hero_background_container { - background-image: url("../../assets/images/HeroPageMobile26.svg"); + /* background-image: url("../../assets/images/HeroPageMobile26.svg"); */ + background-image: url("../../assets/images/HeroPageMobile.svg"); background-size: cover; background-repeat: no-repeat; } @@ -16,7 +17,8 @@ @media screen and (max-width: 1270px) { .hero_background_container { height:100vh; - background-image: url("../../assets/images/HeroPageMobile26.svg"); + /* background-image: url("../../assets/images/HeroPageMobile26.svg"); */ + background-image: url("../../assets/images/HeroPageMobile.svg"); background-size: fit-content; background-repeat: no-repeat; background-position:bottom;