showing roadshow video in home page

components/root/alt_home.tsx

@@ -1,35 +1,100 @@
-'use client'
-import LayoutAlt from '../LayoutAlt'
-import AboutUs from './AboutUs'
-import Hero from './Hero'
-import ProfessorsInfo from './Professors'
-import CardCarousel from '../CardCarousel'
-import Projects_spotlight from '../../archived_pages/spotlight'
-import projectsData from '../../public/data/projects_common.json'
-
-const cardData = projectsData[''].projects
-
-function Home() {
-    return (
-        <div className="bg-lab-bg pt-28 text-white">
-            {/* HERO SECTION */}
-            <Hero />
-
-            {/* ABOUT US SECTION */}
-            <AboutUs />
-
-            {/* PROFESSOR INFO */}
-            <ProfessorsInfo />
-            {/* <p
-					id="spotlight_title"
-					className=" text-center text-5xl text-[#8bc34a]"
-				>
-					SPOTLIGHT
-				</p>
-				<Projects_spotlight />
-				<CardCarousel cardData={cardData} /> */}
+'use client';
+
+import { useState, useEffect } from 'react';
+import AboutUs from './AboutUs';
+import Hero from './Hero';
+import ProfessorsInfo from './Professors';
+import RoadShowVideo from './roadshow2024';
+
+export default function Home() {
+  const [isHeroVisible, setIsHeroVisible] = useState(true);
+  const [showVideo, setShowVideo] = useState(false);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+  const [heroFadeOut, setHeroFadeOut] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setHeroFadeOut(true);
+      setTimeout(() => {
+        setIsHeroVisible(false);
+        setShowVideo(true);
+        setIsVideoPlaying(true);
+      }, 500);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleVideoEnd = () => {
+    setIsHeroVisible(true);
+    setShowVideo(false);
+    setIsVideoPlaying(false);
+    setHeroFadeOut(false);
+  };
+
+  const toggleVideo = () => {
+    setShowVideo(!showVideo);
+    setIsVideoPlaying(!isVideoPlaying);
+  };
+
+  return (
+    <div className="bg-lab-bg pt-28 text-white">
+      {/* HERO SECTION */}
+      {isHeroVisible && (
+        <div className={heroFadeOut ? 'fade-out' : ''}>
+          <Hero />
+        </div>
+      )}
+
+      {/* VIDEO SECTION */}
+      {showVideo && (
+        <div className="fade-in">
+          <RoadShowVideo onEnded={handleVideoEnd} />
         </div>
-    )
+      )}
+
+      {/* WATCH AGAIN BUTTON */}
+      {!isHeroVisible && !showVideo && !isVideoPlaying && (
+        <div className="text-center mt-4">
+          <button
+            onClick={toggleVideo}
+            className="bg-[#8bc34a] text-white py-2 px-4 rounded"
+          >
+            Watch Again
+          </button>
+        </div>
+      )}
+
+      {/* ABOUT US SECTION */}
+      <AboutUs />
+
+      {/* PROFESSOR INFO */}
+      <ProfessorsInfo />
+
+      <style jsx>{`
+        .fade-in {
+          opacity: 0;
+          animation: fadeIn 1s forwards;
+        }
+
+        @keyframes fadeIn {
+          to {
+            opacity: 1;
+          }
+        }
+
+        .fade-out {
+          opacity: 1;
+          animation: fadeOut 1s forwards;
+        }
+
+        @keyframes fadeOut {
+          to {
+            opacity: 0;
+          }
+        }
+      `}</style>
+    </div>
+  );
 }
 
-export default Home

components/root/roadshow2024.js

@@ -0,0 +1,10 @@
+export default function RoadShowVideo({ onEnded }) {
+  return (
+    <div className="flex justify-center items-center w-full">
+      <video className="w-[95%]" autoPlay muted onEnded={onEnded}>
+        <source src="/roadshow/2024Reel.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+}

css/alt_home.css

@@ -5,4 +5,4 @@
   @apply text-lab-green font-semibold;
 }
 
-/* PROFESSOR INFO SECTION */
+/* PROFESSOR INFO SECTION */