diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5e576ba..c0e95a1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1217,6 +1217,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1581,6 +1582,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001580", "electron-to-chromium": "^1.4.648", @@ -1677,6 +1679,7 @@ "version": "4.5.1", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz", "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==", + "peer": true, "dependencies": { "@kurkle/color": "^0.3.0" }, @@ -2097,6 +2100,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz", "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -2249,6 +2253,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "dev": true, + "peer": true, "dependencies": { "array-includes": "^3.1.7", "array.prototype.findlastindex": "^1.2.3", @@ -2888,7 +2893,8 @@ "node_modules/gsap": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz", - "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==" + "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==", + "peer": true }, "node_modules/has-bigints": { "version": "1.0.2", @@ -3701,6 +3707,7 @@ "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz", "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==", "license": "MIT", + "peer": true, "dependencies": { "@next/env": "14.2.35", "@swc/helpers": "0.5.5", @@ -4104,6 +4111,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", @@ -4284,6 +4292,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -4304,6 +4313,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -5164,6 +5174,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/frontend/public/banner.webp b/frontend/public/banner.webp index 4eb8930..29787ca 100644 Binary files a/frontend/public/banner.webp and b/frontend/public/banner.webp differ 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 ? ( -