Dev

frontend/src/app/(pages)/BenefitsPage.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 
 export default function BenefitsPage() {
   return (
-    <div className=" bg-dark-purple flex flex-col py-20  overflow-hidden relative">
+    <div className=" bg-dark-purple flex flex-col py-20 overflow-hidden relative">
       <div className="relative">
         <Image
           src={leaf_prizes_right}

frontend/src/app/(pages)/DeerhackExperiencePage.tsx

@@ -1,4 +1,218 @@
 "use client"
+import { useEffect, useRef, useState } from "react"
+import PlayButtonExpCard from "@/app/assets/images/PlayButtonExpCard"
+import PauseButtonExpCard from "@/app/assets/images/PauseButtonExpCard"
+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"
+
+export default function ExperiencePage() {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isMuted, setIsMuted] = useState(true)
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
+
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const containerRef = useRef<HTMLDivElement>(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 (
+    <div className="bg-dark-purple min-h-screen">
+      <div className={`${cabinetExtraBold.className} headings w-full max-w-[1640px] mx-auto text-[1.875rem] md:text-[3.5rem] mb-[3rem] text-white px-4 md:px-10 pt-10`}
+        style={{
+          background: "linear-gradient(150.54deg,#6633CC 30.7% ,rgb(245, 193, 68, 1) 70.29%)",
+          WebkitBackgroundClip: "text",
+          WebkitTextFillColor: "transparent",
+        }}>
+        The DeerHack Experience
+      </div>
+
+      <section className="text-white pb-20 px-4 md:px-10 flex justify-center">
+        <div className="max-w-[1640px] w-full flex flex-col lg:flex-row gap-8 items-start">
+
+          <div 
+            ref={containerRef}
+            className="w-full lg:w-[467px] aspect-[9/16] relative rounded-3xl overflow-hidden shadow-2xl bg-black group shrink-0"
+          >
+           <div className="absolute inset-0 w-full h-full cursor-pointer z-0" onClick={togglePlay}>
+
+              {hasLoadedOnce ? (
+                <iframe
+                  ref={iframeRef}
+                  className="absolute inset-0 w-full h-full pointer-events-none"
+                  style={{ border: 'none' }}
+                  src={`https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&autoplay=1&mute=1&controls=0&modestbranding=1&rel=0&iv_load_policy=3`}
+                  allow="autoplay; encrypted-media"
+                />
+              ) : (
+                <div 
+                  className="absolute inset-0 w-full h-full bg-cover bg-center"
+                  style={{ backgroundImage: `url(https://img.youtube.com/vi/${videoId}/maxresdefault.jpg)` }}
+                >
+                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center group-hover:bg-black/10 transition-all">
+                    <div className="transition-transform group-hover:scale-110">
+                       <PlayButtonExpCard />
+                     </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="absolute bottom-0 left-0 w-full z-20 bg-black/60 backdrop-blur-md border-t border-white/10">
+              <div className="flex items-center justify-between px-6 py-6 md:px-8">
+                <div className="flex items-center gap-4">
+                  <button onClick={togglePlay} className="flex items-center justify-center transition-all hover:scale-105 active:scale-95">
+                    <div className="w-12 h-12 flex items-center justify-center">
+                      {isPlaying ? <PauseButtonExpCard /> : <PlayButtonExpCard />}
+                    </div>
+                  </button>
+                  <div className="flex flex-col">
+                    <p className="font-extrabold text-lg md:text-xl leading-tight">Moments of Deerhack</p>
+                    <p className="text-xs md:text-sm opacity-60 font-medium text-white/70">2025</p>
+                  </div>
+                </div>
+
+                <button onClick={toggleMute} className="transition-all hover:scale-110 active:scale-90 shrink-0">
+                  <div className="w-10 h-10 flex items-center justify-center text-white">
+                    { isMuted ? <UnMuteButton/>: <MuteButton />} 
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="h-full flex-1 flex flex-col gap-7">
+            <div className="bg-[rgba(33,24,68,1)] p-6 md:p-10 rounded-[25px] flex-1 relative border border-white/10 border-t-2 border-t-yellow-400 flex flex-col justify-between shadow-xl">
+              <div className="flex items-center gap-4 mb-4">
+                <div className="w-16 h-16 md:w-20 md:h-20 flex-shrink-0"><MalaDeep/></div>
+                <div>
+                  <h3 className="text-xl md:text-4xl font-bold leading-tight text-white">Mala Deep Upadhaya</h3>
+                  <p className="text-sm md:text-base opacity-60 text-white font-medium text-white/60">Mentor</p>
+                </div>
+                <div className="hidden md:block ml-auto w-6 md:w-12 opacity-40"><BigTopComa /></div>
+              </div>
+              <p className="mt-2 mb-5 md:text-base font-bold text-white">
+                “Mentoring at DeerHack was an incredibly fulfilling experience. <span className="text-yellow-400">The participants brought great energy, creativity, and a genuine eagerness to learn,</span>,while the volunteers ensured everything ran smoothly with their constant dedication. The welcoming and collaborative environment made <span className="text-yellow-400">it easy to connect, share ideas, and build together</span>, it’s truly an inspiring community to be part of.”
+              </p>
+
+              <div className="mt-2 text-yellow-500"><ExpStars /></div>
+            </div>
+
+            <div className="hidden md:grid md:grid-cols-2 gap-6">
+              <div className="min-h-[261px] bg-[rgba(36,26,74)] p-6 md:p-8 rounded-[20px] border border-white/10 border-t-2 border-t-yellow-400 flex flex-col items-start justify-center shadow-lg gap-5">
+                <div className="flex items-center gap-5">
+                  <div className="w-14 h-14 md:w-16 md:h-16 flex-shrink-0"><NischalTamang/></div>
+                  <div>
+                    <h4 className="text-lg md:text-xl font-bold text-white">Nischal Tamang</h4>
+                    <p className="text-xs md:text-sm opacity-60 text-white/60">Participant</p>
+                  </div>
+                </div>
+                <p className="text-base md:text-base font-bold text-white mb-2">
+                  “One of the best hackathons<span className="text-yellow-400"> and the event management was very good</span> and truly exceeded all expectations.”
+                </p>
+                <div className="text-yellow-500"><ExpStars /></div>
+              </div>
+
+              <div className="min-h-[261px] bg-[rgba(36,26,74)] p-6 md:p-8 rounded-[20px] border border-white/10 border-t-2 border-t-yellow-400 flex flex-col justify-center shadow-lg gap-5">
+                <div className="flex items-center gap-5">
+                  <div className="w-14 h-14 md:w-16 md:h-16 flex-shrink-0"><SamipLamsal/></div>
+                  <div>
+                    <h4 className="text-lg md:text-xl font-bold text-white">Samip Lamsal</h4>
+                    <p className="text-xs md:text-sm opacity-60 text-white/60">Participant</p>
+                  </div>
+                </div>
+                <p className="text-base md:text-base font-bold text-white mb-2">
+                “ DeerHack was my third national hackathon<span className="text-yellow-400"> and by far the best organized and managed one I've attended. </span> ”
+              </p>
+                <div className="text-yellow-500"><ExpStars /></div>
+              </div>
+            </div>
+
+            <div 
+              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+              className="bg-[rgb(102,51,204,0.78)] p-6 md:p-6 rounded-[25px] flex justify-center items-center hover:bg-purple-600 transition-all cursor-pointer group border border-white/5"
+            >
+              <p className="text-base md:text-xl font-semibold text-center text-white">
+                Want to create your own experience? 
+                <span className="text-yellow-400 font-bold underline ml-2 group-hover:text-white transition-colors">Join Now!</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+
+/* 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() {
           <ExperienceCard activeIndex={activeCard} />
         </div>
 
-        {/* Dots indicator */}
+
         <div className="flex justify-center mt-6 space-x-2  lg:hidden">
           {[0, 1, 2].map((index) => (
             <button
@@ -89,4 +303,6 @@ export default function ExperiencePage() {
       />
     </div>
   )
-}
+}  
+
+*/

frontend/src/app/MainPage.tsx

@@ -27,7 +27,7 @@ export default function Home() {
       <TrackPage />
       {/* <ExpectationsPage /> */}
       <ExpectationPageV2 />
-      <DeerhackStatsPage />
+      {/* <DeerhackStatsPage /> */}
       <ImageCarouselPage />
       <ExperiencePage />
       <Judges />

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

@@ -16,7 +16,7 @@ const BlockchainNew = ({
       <circle cx="42" cy="42" r="42" fill="#110C24" />
       <path
         d="M53.0833 37.2499C51.5791 37.2499 50.2728 36.8013 49.1645 35.9041C48.0562 35.0069 47.3173 33.8721 46.9478 32.4999H37.0124C36.7221 33.6083 36.1746 34.5648 35.3697 35.3697C34.5648 36.1746 33.6083 36.7221 32.4999 37.0124V46.9478C33.8721 47.3173 35.0069 48.0562 35.9041 49.1645C36.8013 50.2728 37.2499 51.5791 37.2499 53.0833C37.2499 54.8249 36.6298 56.3159 35.3895 57.5562C34.1492 58.7964 32.6583 59.4166 30.9166 59.4166C29.1749 59.4166 27.6839 58.7964 26.4437 57.5562C25.2034 56.3159 24.5833 54.8249 24.5833 53.0833C24.5833 51.5791 25.0319 50.2728 25.9291 49.1645C26.8263 48.0562 27.961 47.3173 29.3333 46.9478V37.0124C27.961 36.643 26.8263 35.9041 25.9291 34.7958C25.0319 33.6874 24.5833 32.3944 24.5833 30.9166C24.5833 29.1749 25.2034 27.6839 26.4437 26.4437C27.6839 25.2034 29.1749 24.5833 30.9166 24.5833C32.3944 24.5833 33.6874 25.0319 34.7958 25.9291C35.9041 26.8263 36.643 27.961 37.0124 29.3333H46.9478C47.3173 27.961 48.0562 26.8263 49.1645 25.9291C50.2728 25.0319 51.5791 24.5833 53.0833 24.5833C54.8249 24.5833 56.3159 25.2034 57.5562 26.4437C58.7964 27.6839 59.4166 29.1749 59.4166 30.9166C59.4166 32.6583 58.7964 34.1492 57.5562 35.3895C56.3159 36.6298 54.8249 37.2499 53.0833 37.2499ZM30.9166 56.2499C31.7874 56.2499 32.5329 55.9333 33.153 55.2999C33.7732 54.6666 34.0833 53.9277 34.0833 53.0833C34.0833 52.2124 33.7732 51.4669 33.153 50.8468C32.5329 50.2267 31.7874 49.9166 30.9166 49.9166C30.0721 49.9166 29.3333 50.2267 28.6999 50.8468C28.0666 51.4669 27.7499 52.2124 27.7499 53.0833C27.7499 53.9277 28.0666 54.6666 28.6999 55.2999C29.3333 55.9333 30.0721 56.2499 30.9166 56.2499ZM30.9166 34.0833C31.7874 34.0833 32.5329 33.7732 33.153 33.153C33.7732 32.5329 34.0833 31.7874 34.0833 30.9166C34.0833 30.0458 33.7732 29.3003 33.153 28.6801C32.5329 28.06 31.7874 27.7499 30.9166 27.7499C30.0721 27.7499 29.3333 28.06 28.6999 28.6801C28.0666 29.3003 27.7499 30.0458 27.7499 30.9166C27.7499 31.7874 28.0666 32.5329 28.6999 33.153C29.3333 33.7732 30.0721 34.0833 30.9166 34.0833ZM53.0833 59.4166C51.3416 59.4166 49.8506 58.7964 48.6103 57.5562C47.3701 56.3159 46.7499 54.8249 46.7499 53.0833C46.7499 51.3416 47.3701 49.8506 48.6103 48.6103C49.8506 47.3701 51.3416 46.7499 53.0833 46.7499C54.8249 46.7499 56.3159 47.3701 57.5562 48.6103C58.7964 49.8506 59.4166 51.3416 59.4166 53.0833C59.4166 54.8249 58.7964 56.3159 57.5562 57.5562C56.3159 58.7964 54.8249 59.4166 53.0833 59.4166ZM53.0833 56.2499C53.9541 56.2499 54.6996 55.9333 55.3197 55.2999C55.9399 54.6666 56.2499 53.9277 56.2499 53.0833C56.2499 52.2124 55.9399 51.4669 55.3197 50.8468C54.6996 50.2267 53.9541 49.9166 53.0833 49.9166C52.2124 49.9166 51.4669 50.2267 50.8468 50.8468C50.2267 51.4669 49.9166 52.2124 49.9166 53.0833C49.9166 53.9277 50.2267 54.6666 50.8468 55.2999C51.4669 55.9333 52.2124 56.2499 53.0833 56.2499ZM53.0833 34.0833C53.9541 34.0833 54.6996 33.7732 55.3197 33.153C55.9399 32.5329 56.2499 31.7874 56.2499 30.9166C56.2499 30.0458 55.9399 29.3003 55.3197 28.6801C54.6996 28.06 53.9541 27.7499 53.0833 27.7499C52.2124 27.7499 51.4669 28.06 50.8468 28.6801C50.2267 29.3003 49.9166 30.0458 49.9166 30.9166C49.9166 31.7874 50.2267 32.5329 50.8468 33.153C51.4669 33.7732 52.2124 34.0833 53.0833 34.0833Z"
-        fill="#FCF7FF"
+        fill="#F5C144"
       />
     </svg>
   );