Aarush/environment track

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

@@ -1,8 +1,8 @@
 const DiscordHero = () => {
   return (
     <svg
-      width="33"
-      height="26"
+      width="24"
+      height="17"
       viewBox="0 0 33 26"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

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<typeof setTimeout>;
+
+    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; 
+}

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 (
     <div
       className={` ${styles.hero_background_container} flex justify-center w-full `}
       id="hero_container"
     >
     {/*Original div --> <div className={` px-10 py-10 lg:py-8 lg:px-14 text-center  rounded-3xl border-2 border-secondary  absolute lg:top-48 lg:w-[427px] lg:h-[447px] w-[304px] h-[319px] top-48 ${styles.muted_color} md:w-[500px] md:h-[500px] md:top-72 `}> */}
-    <div className={` px-10 py-10 lg:py-8 lg:px-14 text-center  rounded-3xl border-2 border-secondary  absolute lg:top-60 lg:w-[427px]  w-[304px]  top-48 ${styles.muted_color} md:w-[500px] h-fit md:top-72 `}>
-      <p
+   <div
+  className={`px-10 py-10 lg:py-8 lg:px-14 text-center rounded-3xl absolute lg:top-60 lg:w-[427px] w-[304px] top-48 ${styles.muted_color} md:w-[500px] h-fit md:top-72`}
+  style={{
+    border: isGlowing ? "2px solid #FFB401" : "2px solid #B98402",
+    transition: "border 0.1s ease, box-shadow 0.1s ease",
+    boxShadow: isGlowing
+      ? "0 0 10px rgba(245,193,68,0.9), inset 0 0 10px rgba(102,51,204,0.8)"
+      : "0 0 6px rgba(245,193,68,0.2), inset 0 0 6px rgba(102,51,204,0.2)",
+  }}
+
+>
+   <Flicker onGlowChange={handleGlowChange} />
+    <p
           className={`  text-2xl md:text-4xl lg:text-3xl font-bold text-center text-heropage-gradient ${cabinetBold.className}`}
         >
-          12th - 14th June
+             12th - 14th June
         </p>
         <DeerHack26Logo className="mt-3 h-auto w-full md:mt-6" width={309} height={130} />
         {/* <div

frontend/src/app/sections/home/styles.module.css

@@ -8,15 +8,15 @@
 
 @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;
   }
 }
 @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;