From d0b63d392da4cc391e7e2e9738f133b801d6c95b Mon Sep 17 00:00:00 2001 From: ConfusedKnight Date: Sun, 22 Mar 2026 16:52:16 +0545 Subject: [PATCH 1/2] add: added mobile page svg for hero page --- frontend/src/app/assets/icons/DiscordHero.tsx | 4 +- .../app/assets/images/HeroPageMobile26.svg | 1512 +++++++++++++++++ .../src/app/sections/home/styles.module.css | 4 +- package-lock.json | 6 - 4 files changed, 1516 insertions(+), 10 deletions(-) create mode 100644 frontend/src/app/assets/images/HeroPageMobile26.svg delete mode 100644 package-lock.json diff --git a/frontend/src/app/assets/icons/DiscordHero.tsx b/frontend/src/app/assets/icons/DiscordHero.tsx index d6eb115..877dc08 100644 --- a/frontend/src/app/assets/icons/DiscordHero.tsx +++ b/frontend/src/app/assets/icons/DiscordHero.tsx @@ -1,8 +1,8 @@ const DiscordHero = () => { return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/sections/home/styles.module.css b/frontend/src/app/sections/home/styles.module.css index c872d3a..c749575 100644 --- a/frontend/src/app/sections/home/styles.module.css +++ b/frontend/src/app/sections/home/styles.module.css @@ -8,7 +8,7 @@ @media screen and (max-width: 500px) { .hero_background_container { - background-image: url("../../assets/icons/HeroMobile.svg"); + background-image: url("../../assets/images/HeroPageMobile26.svg"); background-size: cover; background-repeat: no-repeat; } @@ -16,7 +16,7 @@ @media screen and (max-width: 1270px) { .hero_background_container { height:100vh; - background-image: url("../../assets/icons/TabletHero.svg"); + background-image: url("../../assets/images/HeroPageMobile26.svg"); background-size: fit-content; background-repeat: no-repeat; background-position:bottom; diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 8e76030..0000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "deerhack26", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From 47d99ab6c7138866a8bc5771a68616d3616f0fa5 Mon Sep 17 00:00:00 2001 From: ConfusedKnight Date: Mon, 23 Mar 2026 21:54:34 +0545 Subject: [PATCH 2/2] add: add flickering code(ishan) --- .../src/app/components/Flicker/flicker.tsx | 51 +++++++++++++++++++ frontend/src/app/sections/home/Hero.tsx | 26 ++++++++-- 2 files changed, 74 insertions(+), 3 deletions(-) create mode 100644 frontend/src/app/components/Flicker/flicker.tsx diff --git a/frontend/src/app/components/Flicker/flicker.tsx b/frontend/src/app/components/Flicker/flicker.tsx new file mode 100644 index 0000000..90de94d --- /dev/null +++ b/frontend/src/app/components/Flicker/flicker.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { useEffect } from "react"; + +const SEQUENCE = [ + { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 1000 }, + { glowing: [true,true,true,true,true,true,true,false,false,false,false], duration: 80 }, + { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 }, + { glowing: [false,true,true,false,true,true,false,false,false,true,true], duration: 80 }, + { glowing: [false,false,false,false,false,false,false,false,false,false,false], duration: 100 }, + { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 }, + { glowing: [false,false,false,false,false,false,false,false,false,false,false], duration: 100 }, + { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 200 }, + { glowing: [false,false,false,false,false,false,false,false,false,false,false], duration: 100 }, + { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 }, + { glowing: [false,false,false,false,false,false,true,true,true,true,true], duration: 80 }, + { glowing: [true,true,true,true,true,true,false,false,false,true,true], duration: 80 }, + { glowing: [true,true,true,true,true,true,true,true,true,true,true], duration: 2000 }, + { glowing: [false,true,true,true,true,true,true,true,true,true,true], duration: 30 }, +]; + +interface FlickerProps { + onGlowChange?: (isGlowing: boolean) => void; +} + +export default function Flicker({ onGlowChange }: FlickerProps) { + useEffect(() => { + let timeout: ReturnType; + + const runSequence = (index: number) => { + const glowingArray = SEQUENCE[index].glowing; + + + const glowingCount = glowingArray.filter(Boolean).length; + const isGlowing = glowingCount > glowingArray.length * 0.7; + + onGlowChange?.(isGlowing); + + timeout = setTimeout(() => { + const next = (index + 1) % SEQUENCE.length; + runSequence(next); + }, SEQUENCE[index].duration); + }; + + runSequence(0); + + return () => clearTimeout(timeout); + }, [onGlowChange]); + + return null; +} diff --git a/frontend/src/app/sections/home/Hero.tsx b/frontend/src/app/sections/home/Hero.tsx index 1132b07..953c7a4 100644 --- a/frontend/src/app/sections/home/Hero.tsx +++ b/frontend/src/app/sections/home/Hero.tsx @@ -5,20 +5,40 @@ import styles from "./styles.module.css"; import DeerHack26Logo from "@/app/assets/icons/Deerhack26"; import { cabinetBold, cabinetMedium, satoshiBlack, satoshiBold } from "@/fonts"; import Link from "next/link"; +// import { useState, useEffect } from "react"; +import Flicker from "@/app/components/Flicker/flicker"; +import { useState, useCallback } from "react"; + const Hero = () => { + const [isGlowing, setIsGlowing] = useState(true); + +const handleGlowChange = useCallback((allGlowing: boolean) => { + setIsGlowing(allGlowing); +}, []); return (
{/*Original div -->
*/} -
-

+ +

- 12th - 14th June + 12th - 14th June

{/*