Trailer es una realitat (#85)

hackupc · Apr 16, 2024 · a5a913e · a5a913e
1 parent e4cf1a1
commit a5a913e
Showing 1 changed file with 16 additions and 19 deletions.
diff --git a/src/app/components/Trailer.tsx b/src/app/components/Trailer.tsx
@@ -1,28 +1,26 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import { Section, SectionBackground } from "@/app/genericComponents/General";
 import { SectionTitle } from "@/app/genericComponents/Typography";
 import {
-  Neutral300,
-  Neutral500,
+  MobileBreakpoint,
   SpacingM,
   SpacingS,
-  SpacingXL,
 } from "@/app/genericComponents/tokens";
 import {
   PrimaryButton,
   SecondaryButton,
 } from "@/app/genericComponents/Buttons";
 import { silom } from "@/app/genericComponents/fonts";
 
-/*const VideoWrapper = styled.div`
+const VideoWrapper = styled.div`
   position: relative;
   width: 80%;
-  padding-top: 45%;  16:9 aspect ratio
-  margin-bottom: ${SpacingM};
+  padding-top: 45%;
+  aspect-ratio: 16 / 9;
 
   @media (max-width: ${MobileBreakpoint}) {
     width: 100%;
-    padding-top: 56.25%;  16:9 aspect ratio
+    padding-top: 56.25%;
   }
 `;
 
@@ -32,10 +30,10 @@ const StyledIframe = styled.iframe`
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: ${SpacingXS};
+  border-radius: ${SpacingS};
   border: none;
   overflow: hidden;
-`; */
+`;
 
 const ButtonContainer = styled.div`
   display: flex;
@@ -48,7 +46,7 @@ const ButtonContainer = styled.div`
   width: 100%;
 `;
 
-const shimmerAnimation = keyframes`
+/*const shimmerAnimation = keyframes`
     0% {
         transform: translateX(-100%);
     }
@@ -66,7 +64,6 @@ const VideoNotAvailable = styled.div`
   overflow: hidden;
   color: ${Neutral300};
 
-  /* Shimmer effect layer */
   &::before {
     content: "";
     position: absolute;
@@ -80,24 +77,24 @@ const VideoNotAvailable = styled.div`
       rgba(255, 255, 255, 0.1) 50%,
       rgba(35, 47, 52, 0) 100%
     );
-    animation: ${shimmerAnimation} 3s infinite linear; /* Apply the animation */
+    animation: ${shimmerAnimation} 3s infinite linear;
   }
-`;
+`; */
 
 export default function Trailer() {
   return (
     <SectionBackground haveBackground id="trailer">
       <Section>
         <SectionTitle>Teaser</SectionTitle>
-        <VideoNotAvailable> Teaser coming soon... </VideoNotAvailable>
-        {/* <VideoWrapper>
+        {/* <VideoNotAvailable> Teaser coming soon... </VideoNotAvailable> */}
+        <VideoWrapper>
           <StyledIframe
-            title="Teaser video"
-            src="https://www.youtube.com/embed/83RvKXCmcZ8?rel=0&showinfo=0"
+            title="HackUPC 2024 | Trailer"
+            src="https://www.youtube.com/embed/iDinGlzSpbI?si=ZzSusoVrzekuuanx"
             allowFullScreen
             allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
           />
-        </VideoWrapper> */}
+        </VideoWrapper>
         <ButtonContainer className={silom.className}>
           <SecondaryButton
             width={"60%"}