From c1bc35fffdf40f82b55f971bc37852b9199741b2 Mon Sep 17 00:00:00 2001 From: xbrzee Date: Fri, 17 Apr 2026 23:00:06 +0545 Subject: [PATCH] add:add a scroll feature, new svg image for grouped stars and some highlights in texts --- .../app/(pages)/DeerhackExperiencePage.tsx | 252 +++++++++--------- .../assets/images/sponsors/StarsExpCard.svg | 10 + .../assets/images/sponsors/StarsExpCard.tsx | 20 ++ 3 files changed, 151 insertions(+), 131 deletions(-) create mode 100644 frontend/src/app/assets/images/sponsors/StarsExpCard.svg create mode 100644 frontend/src/app/assets/images/sponsors/StarsExpCard.tsx diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx index 49f575d..fc4e5bc 100644 --- a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx +++ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx @@ -6,22 +6,22 @@ import MuteButton from "../assets/images/sponsors/mutebutton" import BigTopComa from "../assets/images/sponsors/BigTopComa" import ExpStars from "../assets/images/sponsors/expStars" import { cabinetExtraBold } from "../utils/fonts" -import DeerExpCardFirst from "../assets/images/DeerExpCardFirst" -import DeerExpCardSecond from "../assets/images/DeerExpCardSecond" -import DeerExpCardThird from "../assets/images/DeerExpCardThird" import SamipLamsal from "../assets/images/sponsors/SamipLamsal" import NischalTamang from "../assets/images/sponsors/NischalTamang" import UnMuteButton from "../assets/images/sponsors/UnMuteButton" -import { MIDDLEWARE_LOCATION_REGEXP } from "next/dist/lib/constants" import MalaDeep from "../assets/images/sponsors/MalaDeep" +import StarsExpCard from "../assets/images/sponsors/StarsExpCard" export default function ExperiencePage() { const [isPlaying, setIsPlaying] = useState(false) const [isMuted, setIsMuted] = useState(true) const [hasLoadedOnce, setHasLoadedOnce] = useState(false) + const [activeCard, setActiveCard] = useState(0) const iframeRef = useRef(null) const containerRef = useRef(null) + const scrollContainerRef = useRef(null) + const cardRefs = useRef<(HTMLDivElement | null)[]>([]) const videoId = "VGlzJgzTvWg" @@ -34,169 +34,161 @@ export default function ExperiencePage() { } } + const handleDotClick = (index: number) => { + const targetCard = cardRefs.current[index]; + if (targetCard) { + targetCard.scrollIntoView({ + behavior: "smooth", + block: "nearest", + inline: "center" + }); + setActiveCard(index); + } + }; + useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (hasLoadedOnce) { - if (entry.isIntersecting) { - postCommand("playVideo") - setIsPlaying(true) - } else { - postCommand("pauseVideo") - setIsPlaying(false) - } - } - }) - }, - { threshold: 0.6 } - ) + const handleScroll = () => { + const container = scrollContainerRef.current; + if (container) { + const scrollLeft = container.scrollLeft; + const width = container.clientWidth; + const newIndex = Math.round(scrollLeft / width); + if (newIndex !== activeCard && newIndex >= 0 && newIndex <= 2) { + setActiveCard(newIndex); + } + } + }; + const scrollArea = scrollContainerRef.current; + scrollArea?.addEventListener("scroll", handleScroll, { passive: true }); + return () => scrollArea?.removeEventListener("scroll", handleScroll); + }, [activeCard]); + useEffect(() => { + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (hasLoadedOnce) { + if (entry.isIntersecting) { postCommand("playVideo"); setIsPlaying(true) } + else { postCommand("pauseVideo"); setIsPlaying(false) } + } + }) + }, { threshold: 0.6 }) if (containerRef.current) observer.observe(containerRef.current) return () => observer.disconnect() }, [hasLoadedOnce]) - useEffect(() => { - if (hasLoadedOnce) { - postCommand(isMuted ? "mute" : "unMute") - } - }, [isMuted, hasLoadedOnce]) + useEffect(() => { if (hasLoadedOnce) postCommand(isMuted ? "mute" : "unMute") }, [isMuted, hasLoadedOnce]) const togglePlay = () => { - if (!hasLoadedOnce) { - setHasLoadedOnce(true) - setIsPlaying(true) - } else { - const nextState = !isPlaying - setIsPlaying(nextState) - postCommand(nextState ? "playVideo" : "pauseVideo") - } - } - - const toggleMute = (e: React.MouseEvent) => { - e.stopPropagation() - setIsMuted(!isMuted) + if (!hasLoadedOnce) { setHasLoadedOnce(true); setIsPlaying(true) } + else { const next = !isPlaying; setIsPlaying(next); postCommand(next ? "playVideo" : "pauseVideo") } } return ( -
+
+ style={{ background: "linear-gradient(150.54deg,#6633CC 30.7% ,rgb(245, 193, 68, 1) 70.29%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}> The DeerHack Experience
-
+
-
-
- +
+
{hasLoadedOnce ? ( -