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/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

{/*