landing page fix test

Penn-Climate-Ventures · Dec 25, 2024 · 12dc513 · 12dc513
1 parent 78707b9
commit 12dc513
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 67 deletions.
diff --git a/public/about.mp4 b/public/about.mp4
diff --git a/public/windmill.mp4 b/public/windmill.mp4
diff --git a/src/pages/LandingPage.css b/src/pages/LandingPage.css
@@ -4,27 +4,38 @@ body {
   font-family: 'Montserrat', sans-serif; 
   font-weight: 500; 
   color: #002657;
+  margin: 0; /* Good practice to reset default margin */
+  padding: 0;
 }
 
+/* Hero Section */
 .hero-section {
   text-align: center;
-  padding: 40px 20px;
+  position: relative;
   padding-top: 180px;
   padding-bottom: 180px;
-  position: relative;
   overflow: hidden;
 }
 
-.hero-video {
+/* Container holding the iframe video */
+.hero-video-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  overflow: hidden;
   z-index: -2;
 }
 
+/* Make the iframe fill the container */
+.hero-video {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Overlay for the dark tint */
 .hero-overlay {
   position: absolute;
   top: 0;
@@ -35,25 +46,16 @@ body {
   z-index: -1;
 }
 
+/* Main hero text content */
 .hero-content {
   color: white;
   position: relative;
   z-index: 1;
 }
 
-.hero-section {
-  position: relative;
-}
-
 .title {
   font-size: 3rem;
-  margin: 0px 0;
-  font-family: 'Roboto', sans-serif;
-}
-
-.heading {
-  font-size: 2.2rem;
-  margin: 0px 0;
+  margin: 0;
   font-family: 'Roboto', sans-serif;
 }
 
@@ -62,6 +64,21 @@ body {
   font-family: 'Montserrat', sans-serif;
 }
 
+/* Scroll arrow */
+.scroll-arrow {
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  display: block;
+  margin: 0px auto 0;
+  transition: transform 0.2s ease;
+}
+
+.scroll-arrow:hover {
+  transform: translateY(5px);
+}
+
+/* CTA Button */
 .cta-button {
   display: inline-block;
   text-align: center;
@@ -81,21 +98,10 @@ body {
 }
 
 .cta-button:hover {
-  background-color: #306dc7; /* Optional: Add hover effect */
-}
-
-.cta-button:focus {
-  outline: none; /* Removes focus outline for a cleaner look */
-}
-
-.section hr {
-  border: 0;
-  height: 1px;
-  background-color: #e0e0e0;
-  width: 50%;
-  margin: 40px auto; /* Center horizontally */
+  background-color: #306dc7;
 }
 
+/* Main content sections */
 .main-content {
   display: flex;
   flex-direction: column;
@@ -105,26 +111,37 @@ body {
   padding-top: 3rem;
 }
 
+/* Each section block */
 .section {
   width: 100%;
   padding: 1rem 0;
   box-sizing: border-box;
-  margin: 0; /* Remove horizontal margin */
+  margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center; /* Center content vertically */
+  justify-content: center;
+}
+
+.section hr {
+  border: 0;
+  height: 1px;
+  background-color: #e0e0e0;
+  width: 50%;
+  margin: 40px auto;
 }
 
 .section .content {
   width: 50%;
   margin: 0 auto;
   text-align: left;
-  padding: 0 20px; /* Add horizontal padding */
+  padding: 0 20px;
 }
 
 .section .content .heading {
   font-family: 'Roboto', sans-serif;
+  font-size: 2.2rem;
+  margin: 0;
 }
 
 .section .content p {
@@ -140,6 +157,7 @@ body {
   margin-bottom: 10px;
 }
 
+/* Countdown styles (optional media queries) */
 @media screen and (min-width: 550px) {
   .countdown .content {
     gap: 30px;
@@ -171,20 +189,7 @@ body {
   }
 }
 
-.scroll-arrow {
-  width: 35px;
-  height: 35px;
-  cursor: pointer;
-  display: block;
-  margin: 0px auto 0; /* Reduce top margin to 15px */
-  transition: transform 0.2s ease;
-}
-
-.scroll-arrow:hover {
-  transform: translateY(5px);
-}
-
 .countdown {
   margin-bottom: 0; 
   color: #002657;
-}
+}
diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js
@@ -10,12 +10,22 @@ const LandingPage = () => {
   return (
     <div>
       <Navbar />
+
+      {/* Hero Section */}
       <header className="hero-section">
-        <video className="hero-video" autoPlay loop muted>
-          <source src="/windmill.mp4" type="video/mp4" />
-          Your browser does not support the video tag.
-        </video>
+        {/* Container for the YouTube iframe */}
+        <div className="hero-video-container">
+          <iframe
+            className="hero-video"
+            src="https://www.youtube.com/embed/KPSgJwh-LLk?autoplay=1&loop=1&mute=1&playlist=KPSgJwh-LLk&controls=0&rel=0"
+            frameBorder="0"
+            allow="autoplay; encrypted-media"
+            allowFullScreen
+          />
+        </div>
+
         <div className="hero-overlay"></div>
+
         <div className="hero-content">
           <h1 className="title">UPenn Eco-Venture Challenge</h1>
           <p className="subheading">Preparing tomorrow’s leaders to tackle today’s climate crisis.</p>
@@ -33,6 +43,7 @@ const LandingPage = () => {
         </div>
       </header>
 
+      {/* Main Content */}
       <main className="main-content">
         <section className="section">
           <div className="content">
@@ -79,10 +90,10 @@ const LandingPage = () => {
           <div className="content">
             <h2 className="heading">Prizes</h2>
             <p>
-            After three rounds of selection, winners will receive ____ for the 
-            ____ track and ____ for the ____ school track to support their 
-            start-up. Additionally, winners will have the opportunity to benefit 
-            from professional advising, mentorship, and internship opportunities.
+              After three rounds of selection, winners will receive ____ for the 
+              ____ track and ____ for the ____ school track to support their 
+              start-up. Additionally, winners will have the opportunity to benefit 
+              from professional advising, mentorship, and internship opportunities.
             </p>
           </div>
         </section>
@@ -95,9 +106,9 @@ const LandingPage = () => {
           <div className="content">
             <h2 className="heading">How to Participate</h2>
             <p>
-            This competition is for students pursuing a high school diploma or 
-            bachelor’s degree who don’t have experience in startups
-            or climate change. To participate, follow these steps:
+              This competition is for students pursuing a high school diploma or 
+              bachelor’s degree who don’t have experience in startups 
+              or climate change. To participate, follow these steps:
             </p>
             <ol>
               <li>Sign up by clicking the "Register Now" button.</li>
@@ -115,18 +126,15 @@ const LandingPage = () => {
           <div className="content">
             <h2 className="heading">Sponsors</h2>
             <p>
-            TBA
+              TBA
             </p>
-
           </div>
         </section>
       </main>
 
-
-
       <Footer />
     </div>
   );
 };
 
-export default LandingPage;
+export default LandingPage;