(null)
+ const containerRef = useRef(null)
+
+ const videoId = "VGlzJgzTvWg"
+
+ const postCommand = (func: string, args: any[] = []) => {
+ if (iframeRef.current?.contentWindow) {
+ iframeRef.current.contentWindow.postMessage(
+ JSON.stringify({ event: "command", func, args }),
+ "https://www.youtube-nocookie.com"
+ )
+ }
+ }
+
+ 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])
+
+ 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)
+ }
+
+ return (
+
+
+ The DeerHack Experience
+
+
+
+
+
+
+
+
+ {hasLoadedOnce ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
Moments of Deerhack
+
2025
+
+
+
+
+
+ { isMuted ? : }
+
+
+
+
+
+
+
+
+
+
+
+
Mala Deep Upadhaya
+
Mentor
+
+
+
+
+ “Mentoring at DeerHack was an incredibly fulfilling experience. The participants brought great energy, creativity, and a genuine eagerness to learn, ,while the volunteers ensured everything ran smoothly with their constant dedication. The welcoming and collaborative environment made it easy to connect, share ideas, and build together , it’s truly an inspiring community to be part of.”
+
+
+
+
+
+
+
+
+
+
+
Nischal Tamang
+
Participant
+
+
+
+ “One of the best hackathons and the event management was very good. ”
+
+
+
+
+
+
+
+
+
Samip Lamsal
+
Participant
+
+
+
+ “ DeerHack was my third national hackathon and by far the best organized and managed one I've attended. ”
+
+
+
+
+
+
window.scrollTo({ top: 0, behavior: "smooth" })}
+ className="bg-[rgb(102,51,204,0.78)] p-6 md:p-8 rounded-[25px] flex justify-center items-center hover:bg-purple-600 transition-all cursor-pointer group border border-white/5"
+ >
+
+ Want to create your own experience?
+ Join Now!
+
+
+
+
+
+
+ )
+}
+
+
+/* OLD CODE - FOR BACKUP IN EMERGENCY */
+
+
+
+/*
+"use client"
import { cabinetExtraBold } from "../utils/fonts"
import leaf_right_deerhack_2025 from "@/app/assets/images/leaf_right_deerhack_2025.svg";
import Image from "next/image"
@@ -64,7 +278,7 @@ export default function ExperiencePage() {
- {/* Dots indicator */}
+
{[0, 1, 2].map((index) => (
)
-}
+}
+
+*/
\ No newline at end of file
diff --git a/frontend/src/app/assets/images/DeerExpCard1.svg b/frontend/src/app/assets/images/DeerExpCard1.svg
new file mode 100644
index 0000000..e0b7130
--- /dev/null
+++ b/frontend/src/app/assets/images/DeerExpCard1.svg
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/DeerExpCard2.svg b/frontend/src/app/assets/images/DeerExpCard2.svg
new file mode 100644
index 0000000..105396c
--- /dev/null
+++ b/frontend/src/app/assets/images/DeerExpCard2.svg
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/DeerExpCard3.svg b/frontend/src/app/assets/images/DeerExpCard3.svg
new file mode 100644
index 0000000..40001e7
--- /dev/null
+++ b/frontend/src/app/assets/images/DeerExpCard3.svg
@@ -0,0 +1,380 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/DeerExpCardFirst.tsx b/frontend/src/app/assets/images/DeerExpCardFirst.tsx
new file mode 100644
index 0000000..505fc1a
--- /dev/null
+++ b/frontend/src/app/assets/images/DeerExpCardFirst.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+
+function DeerExpCardFirst() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default DeerExpCardFirst
diff --git a/frontend/src/app/assets/images/DeerExpCardSecond.tsx b/frontend/src/app/assets/images/DeerExpCardSecond.tsx
new file mode 100644
index 0000000..3b5d1e7
--- /dev/null
+++ b/frontend/src/app/assets/images/DeerExpCardSecond.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+
+function DeerExpCardSecond() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default DeerExpCardSecond
diff --git a/frontend/src/app/assets/images/DeerExpCardThird.tsx b/frontend/src/app/assets/images/DeerExpCardThird.tsx
new file mode 100644
index 0000000..d882beb
--- /dev/null
+++ b/frontend/src/app/assets/images/DeerExpCardThird.tsx
@@ -0,0 +1,389 @@
+import React from 'react'
+
+function DeerExpCardThird() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default DeerExpCardThird
diff --git a/frontend/src/app/assets/images/PauseButtonExpCard.tsx b/frontend/src/app/assets/images/PauseButtonExpCard.tsx
new file mode 100644
index 0000000..a1a0782
--- /dev/null
+++ b/frontend/src/app/assets/images/PauseButtonExpCard.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+function PauseButtonExpCard() {
+ return (
+
+
+
+
+
+ )
+}
+
+export default PauseButtonExpCard
diff --git a/frontend/src/app/assets/images/PlayButtonExpCard.tsx b/frontend/src/app/assets/images/PlayButtonExpCard.tsx
new file mode 100644
index 0000000..77a7df3
--- /dev/null
+++ b/frontend/src/app/assets/images/PlayButtonExpCard.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+function PlayButtonExpCard() {
+ return (
+
+
+
+
+
+ )
+}
+
+export default PlayButtonExpCard
diff --git a/frontend/src/app/assets/images/pausebuttonexpcard.svg b/frontend/src/app/assets/images/pausebuttonexpcard.svg
new file mode 100644
index 0000000..257b272
--- /dev/null
+++ b/frontend/src/app/assets/images/pausebuttonexpcard.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/playbutton.svg b/frontend/src/app/assets/images/playbutton.svg
new file mode 100644
index 0000000..6a01d7d
--- /dev/null
+++ b/frontend/src/app/assets/images/playbutton.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/frontend/src/app/assets/images/playbuttonexpcard.svg b/frontend/src/app/assets/images/playbuttonexpcard.svg
new file mode 100644
index 0000000..c0b10a0
--- /dev/null
+++ b/frontend/src/app/assets/images/playbuttonexpcard.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/BigTopComa.svg b/frontend/src/app/assets/images/sponsors/BigTopComa.svg
new file mode 100644
index 0000000..36edaa7
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/BigTopComa.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/BigTopComa.tsx b/frontend/src/app/assets/images/sponsors/BigTopComa.tsx
new file mode 100644
index 0000000..e9043ec
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/BigTopComa.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function BigTopComa() {
+ return (
+
+
+
+ )
+}
+
+export default BigTopComa
\ No newline at end of file
diff --git a/frontend/src/app/assets/images/sponsors/ExpVine.svg b/frontend/src/app/assets/images/sponsors/ExpVine.svg
new file mode 100644
index 0000000..5daebfc
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/ExpVine.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/ExpVine.tsx b/frontend/src/app/assets/images/sponsors/ExpVine.tsx
new file mode 100644
index 0000000..af2eafa
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/ExpVine.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+function ExpVine() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ExpVine
\ No newline at end of file
diff --git a/frontend/src/app/assets/images/sponsors/Mala Deep.svg b/frontend/src/app/assets/images/sponsors/Mala Deep.svg
new file mode 100644
index 0000000..c39f319
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/Mala Deep.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/MalaDeep.tsx b/frontend/src/app/assets/images/sponsors/MalaDeep.tsx
new file mode 100644
index 0000000..d284810
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/MalaDeep.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+function MalaDeep() {
+ return (
+
+ )
+}
+
+export default MalaDeep
diff --git a/frontend/src/app/assets/images/sponsors/Nischal Tamang.svg b/frontend/src/app/assets/images/sponsors/Nischal Tamang.svg
new file mode 100644
index 0000000..0d37489
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/Nischal Tamang.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/NischalTamang.tsx b/frontend/src/app/assets/images/sponsors/NischalTamang.tsx
new file mode 100644
index 0000000..7a4f590
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/NischalTamang.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+function NischalTamang() {
+ return (
+
+ )
+}
+
+export default NischalTamang
diff --git a/frontend/src/app/assets/images/sponsors/Samip Lamsal 1.svg b/frontend/src/app/assets/images/sponsors/Samip Lamsal 1.svg
new file mode 100644
index 0000000..420a465
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/Samip Lamsal 1.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/SamipLamsal.tsx b/frontend/src/app/assets/images/sponsors/SamipLamsal.tsx
new file mode 100644
index 0000000..1f05357
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/SamipLamsal.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+function SamipLamsal() {
+ return (
+
+ )
+}
+
+export default SamipLamsal
diff --git a/frontend/src/app/assets/images/sponsors/UnMuteButton.svg b/frontend/src/app/assets/images/sponsors/UnMuteButton.svg
new file mode 100644
index 0000000..2d72ef1
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/UnMuteButton.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/UnMuteButton.tsx b/frontend/src/app/assets/images/sponsors/UnMuteButton.tsx
new file mode 100644
index 0000000..3f51975
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/UnMuteButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+function UnMuteButton() {
+ return (
+
+ )
+}
+
+export default UnMuteButton
diff --git a/frontend/src/app/assets/images/sponsors/VineForExpCard.svg b/frontend/src/app/assets/images/sponsors/VineForExpCard.svg
new file mode 100644
index 0000000..5daebfc
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/VineForExpCard.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/VineForExpCard.tsx b/frontend/src/app/assets/images/sponsors/VineForExpCard.tsx
new file mode 100644
index 0000000..d837c81
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/VineForExpCard.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+function VineForExpCard() {
+ return (
+
+ )
+}
+
+export default VineForExpCard
diff --git a/frontend/src/app/assets/images/sponsors/White Ellipse.svg b/frontend/src/app/assets/images/sponsors/White Ellipse.svg
new file mode 100644
index 0000000..f399388
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/White Ellipse.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/WhiteEllipse.tsx b/frontend/src/app/assets/images/sponsors/WhiteEllipse.tsx
new file mode 100644
index 0000000..8c5a41d
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/WhiteEllipse.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function WhiteEllipse() {
+ return (
+
+
+
+ )
+}
+
+export default WhiteEllipse
\ No newline at end of file
diff --git a/frontend/src/app/assets/images/sponsors/expStars.tsx b/frontend/src/app/assets/images/sponsors/expStars.tsx
new file mode 100644
index 0000000..97dbfef
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/expStars.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+function expStars() {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+export default expStars
\ No newline at end of file
diff --git a/frontend/src/app/assets/images/sponsors/expstars.svg b/frontend/src/app/assets/images/sponsors/expstars.svg
new file mode 100644
index 0000000..4f89bb5
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/expstars.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/mutebutton.svg b/frontend/src/app/assets/images/sponsors/mutebutton.svg
new file mode 100644
index 0000000..465c385
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/mutebutton.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/frontend/src/app/assets/images/sponsors/mutebutton.tsx b/frontend/src/app/assets/images/sponsors/mutebutton.tsx
new file mode 100644
index 0000000..7612a94
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/mutebutton.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+interface MuteProps {
+ isMuted?: boolean
+}
+
+
+function MuteButton({ isMuted }: MuteProps) {
+ return (
+
+
+ {isMuted ? (
+ /* MUTED VERSION */
+
+
+
+
+
+ ) : (
+
+
+ )}
+
+ )
+}
+
+export default MuteButton
\ No newline at end of file
diff --git a/frontend/src/app/assets/images/sponsors/playbutton.tsx b/frontend/src/app/assets/images/sponsors/playbutton.tsx
new file mode 100644
index 0000000..aaca0ca
--- /dev/null
+++ b/frontend/src/app/assets/images/sponsors/playbutton.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface PlayProps { isPlaying: boolean }
+
+function PlayButton({ isPlaying }: PlayProps) {
+ return (
+
+
+ {isPlaying ? (
+ /* PAUSE ICON PATH */
+
+
+
+
+ ) : (
+ /* YOUR ORIGINAL PLAY PATH */
+
+ )}
+
+ )
+}
+
+export default PlayButton
\ No newline at end of file