Skip to content

Ishan/about the event #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VaidyaIshan merged 2 commits into from
Mar 23, 2026
Merged

Ishan/about the event #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd51b33
Merge pull request #18 from deerhack/dev
VaidyaIshan Mar 12, 2026
86abe17
Update: Hero Section Light Flicker and BlockChain Color Change
VaidyaIshan Mar 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions frontend/src/app/components/Flicker/flicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
49 changes: 0 additions & 49 deletions frontend/src/app/components/TrackWinner/TrackWinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,4 @@
// "use client";
// import type { ReactElement } from "react";
// import Lottie from "lottie-react";
// import confettiAnimation from "../../../../public/animations/confetti.json";
// import { cabinetBlack, cabinetBold, cabinetRegular } from "@/app/utils/fonts";
// import { useEffect, useRef } from "react";

// export default function TrackWinner({ scrollProgress }: { scrollProgress: number }): ReactElement {
// const lottieRef = useRef<any>(null);

// useEffect(() => {
// if (!lottieRef.current) return;
// const anim = lottieRef.current;
// const totalFrames = anim.getDuration(true);
// const frame = Math.floor(scrollProgress * totalFrames);
// anim.goToAndStop(frame, true);
// }, [scrollProgress]);

// return (
// <div className="primary-gradient-background w-[19.985rem] sm:w-[19.985rem] md:w-[23.985rem] lg:w-[26.313rem] h-[18.369rem] sm:h-[18.369rem] md:h-[18.369rem] lg:h-[29.063rem] p-[2px] rounded-[2rem]">
// <div className="bg-[#110C24] flex flex-col h-full w-full rounded-[2rem] justify-between py-8">
// <div className="flex justify-center gap-4">
// <Lottie
// lottieRef={lottieRef}
// animationData={confettiAnimation}
// loop={false}
// autoplay={false}
// style={{ width: 60, height: 60 }}
// />
// <div className="flex p-0">
// <p className={`${cabinetBold.className} text-primary-gradient-color font-extrabold text-2xl sm:text-2xl md:text-2xl lg:text-[2.875rem] relative top-[1.3rem]`}>
// Track Winner
// </p>
// </div>
// </div>
// <div className="flex flex-col items-start gap-1 lg:gap-2 px-6">
// <p className={`${cabinetRegular.className} text-white text-xs sm:text-xs md:text-xl lg:text-2xl tracking-wide w-full`}>
// New Track Added !
// </p>
// <p className={`${cabinetBlack.className} text-4xl sm:text-4xl md:text-5xl lg:text-7xl text-[#F5C144]`}>
// Rs. 15,000
// </p>
// <p className={`${cabinetRegular.className} text-white text-xs sm:text-xs md:text-xl lg:text-2xl italic tracking-wide w-full`}>
// per track
// </p>
// </div>
// </div>
// </div>
// );
// }
"use client";
import type { ReactElement } from "react";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@
.exp-gradient-background {
background: linear-gradient(270deg, #F5C144 0%, #6633CC 100%);
}
.blockchain-background {
background: linear-gradient(60deg, #6633CC 0%,#F5C144 150%);
}

.text-primary-gradient-color {
@apply bg-gradient-to-r from-primary from-1% to-secondary bg-clip-text text-transparent;
Expand Down
85 changes: 58 additions & 27 deletions frontend/src/app/sections/Tracks/TracksCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<string>(
"Interactive Technology",
"Interactive Technology"
);
const [animKey, setAnimKey] = useState(0);

const autoSwitchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

const trackData = [
{
Expand All @@ -44,17 +46,17 @@ 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: <BlockchainSVG height={25} width={25} />,
svgBody: <BlockchainNew height={50} width={50} />,
svgBody: <BlockchainSVG height={50} width={50} />,
headStyling:
selectedTrack === "Blockchain"
? "bg-magnolia text-dark-purple active"
: "bg-violet hover:bg-magnolia hover:text-dark-purple transition-all duration-300",
bodyStyling: "bg-magnolia text-dark-purple",
? "blockchain-background text-white active"
: "bg-violet hover:blockchain-background hover:text-white transition-all duration-300",
bodyStyling: "blockchain-background text-white",
description:
"Embrace Decentralization with DeerHack. Explore smart contracts, secure transactions, and reshape industries at the forefront of innovation.",
},
Expand Down Expand Up @@ -90,24 +92,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<HTMLDivElement>(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 (
<div className="lg:w-[70.36rem] mx-5 lg:mx-auto transition-all duration-300 ease-in">

<div className="lg:w-[70.36rem] mx-5 lg:mx-auto transition-all duration-300 ease-in">
<div
className={`flex lg:justify-center items-start text-magnolia lg:gap-[12px] md:gap-6 gap-3 overflow-x-auto no-scrollbar justify-evenly px-3`}
ref={containerRef}
className={`flex lg:justify-center items-start text-magnolia lg:gap-[12px] md:gap-6 gap-3 overflow-x-auto no-scrollbar justify-evenly px-3`}
>
{trackData.map((track, index) => (
<TracksHeading
Expand All @@ -123,17 +149,22 @@ const TracksCard = () => {
{trackData.map(
(track, index) =>
selectedTrack === track.title && (
<TracksBodyCard
key={index}
svg={track.svgBody}
title={track.title}
description={track.description}
bodyStyling={track.bodyStyling}
/>
),
<div
key={animKey}
className="animate-track-fade-in"
>
<TracksBodyCard
key={index}
svg={track.svgBody}
title={track.title}
description={track.description}
bodyStyling={track.bodyStyling}
/>
</div>
)
)}
</div>
);
};

export default TracksCard;
export default TracksCard;
26 changes: 23 additions & 3 deletions frontend/src/app/sections/home/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading