bitlogic · marino-martin · Apr 13, 2022 · Apr 13, 2022 · Apr 13, 2022
diff --git a/src/components/HomePage/HomeContainer/HomeContainer.js b/src/components/HomePage/HomeContainer/HomeContainer.js
@@ -13,7 +13,7 @@ import Banner from "../../Banner/Banner"
 import DualSection from "../../DualSection/DualSection"
 import OneSection from "../../DualSection/OneSection"
 import Text from "../../Text/Text"
-import BannerList from "../../BannerList/BannerLis";
+import BannerList from "../../BannerList/BannerLis"
 const bodyComponents = {
   "components.banner": data => <Banner data={data} />,
   "home.transition": data => <AnimatedTransitionContinous data={data} />,
@@ -26,11 +26,12 @@ const bodyComponents = {
     ) : (
       <DualSection data={data} />
     ),
-  "components.banner-list" : data => <BannerList data={data} />
+  "components.banner-list": data => <BannerList data={data} />,
 }
 
 const Home = ({ location }) => {
   const data = useHomePage()
+
   const { pageTitle, pageDescription, pageKeywords } =
     data?.allStrapiHome?.nodes[0]?.pageMetadata || {}
 
@@ -46,7 +47,9 @@ const Home = ({ location }) => {
 
       {/* Dynamic zone */}
       {data.allStrapiHome.nodes[0].body.map(component =>
-        bodyComponents[component.strapi_component] ? bodyComponents[component.strapi_component](component) : null
+        bodyComponents[component.strapi_component]
+          ? bodyComponents[component.strapi_component](component)
+          : null
       )}
     </Layout>
   )

diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react"
 import "./videoBackground.scss"
 const VideoBackground = ({
-  data: { video, description, button, strapi_component, id },
+  data: { video, description, button, strapi_component, id, backgroundImage },
 }) => {
   const [isVideoPause, setIsVideoPause] = useState(false)
   const videoRef = useRef(null)
@@ -33,27 +33,34 @@ const VideoBackground = ({
 
   return (
     <div
-      className="container-md my-3 px-0 px-lg-3"
-      id={strapi_component + "-" + id}
+      className="pt-5 py-3"
+      style={{
+        backgroundImage: `url(${backgroundImage?.url})`,
+      }}
     >
-      <section className="videoBackground my-md-3">
-        <video
-          ref={videoRef}
-          muted
-          autoPlay
-          loop
-          src={video.url}
-          type="video/mp4"
-          controls={false}
-          onClick={pausePlay}
-        />
-        <div className="videoBackground-card">
-          <h4>{description}</h4>
-          <a href={button.url} target="_blank" rel="noreferrer">
-            <button className="px-4">{button.content}</button>
-          </a>
-        </div>
-      </section>
+      <div
+        className="container px-md-0 px-lg-3 videoBackground-container"
+        id={strapi_component + "-" + id}
+      >
+        <section className="videoBackground">
+          <video
+            ref={videoRef}
+            muted
+            autoPlay
+            loop
+            src={video.url}
+            type="video/mp4"
+            controls={false}
+            onClick={pausePlay}
+          />
+          <div className="videoBackground-card">
+            <h5>{description}</h5>
+            <a href={button.url} target="_blank" rel="noreferrer">
+              <button className="px-4">{button.content}</button>
+            </a>
+          </div>
+        </section>
+      </div>
     </div>
   )
 }

diff --git a/src/components/videoBackground/videoBackground.scss b/src/components/videoBackground/videoBackground.scss
@@ -1,57 +1,107 @@
 @import "../../styles/global.scss";
 
 .videoBackground {
-  // width: calc(100% - 6em);
-  height: 80vh;
-  position: relative;
-  z-index: 3;
-  display: flex;
-  // margin: 3em;
+  &-container {
+    margin-top: 50px;
+    margin-bottom: 50px;
+  }
   video {
-    top: 0;
-    position: absolute;
     width: 100%;
-    height: 100%;
+    height: 250px;
     object-fit: cover;
-    z-index: -1;
-    cursor: pointer;
-    // border-radius: 20px;
+    display: block;
+    border-radius: 5px;
   }
   &-card {
-    z-index: 4;
-    align-self: flex-end;
-    flex-basis: 1;
-    max-width: 600px;
+    width: 100%;
     backdrop-filter: blur(14px);
     color: white;
     border-radius: 5px;
     background: #e8e8e8c5;
     box-shadow: 0px 0px 3px #00000044;
-    margin: 1em;
-    padding: 2em;
-
-    h4 {
-      color: $grey;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
+    word-wrap: break-all;
+    padding: 15px;
+  }
+  h5 {
+    width: 100%;
+    color: $grey;
+
+  }
+  button {
+    @include secondaryBtn;
+  }
+}
+
+
+
+
+
+@media screen and (min-width: $breakpoint-md) {
+
+  .videoBackground {
+    // width: calc(100% - 6em);
+    height: 550px;
+    position: relative;
+    z-index: 3;
+    display: flex;
+    // margin: 3em;
+    &-container {
+      margin-top: 80px;
+      margin-bottom: 80px;
+    }
+    video {
+      top: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: -1;
+      cursor: pointer;
+      // border-radius: 20px;
     }
-    button {
-      background: $grey;
-      border: 1px solid white;
+    &-card {
+      z-index: 4;
+      align-self: flex-end;
+      flex-basis: 1;
+      max-width: 700px;
+      backdrop-filter: blur(14px);
       color: white;
-      font-weight: 500;
-      border-radius: 3px;
-      padding: 0.6em 3em;
+      border-radius: 5px;
+      background: #e8e8e8c5;
+      box-shadow: 0px 0px 3px #00000044;
+      margin: 2em;
+      padding: 2em;
+
+      h5 {
+        color: $grey;
+      }
+      button {
+        @include secondaryBtn;
+      }
     }
   }
 }
 
-@media screen and (min-width: $breakpoint-md) {
+
+@media screen and (min-width: $breakpoint-lg) {
+
   .videoBackground {
-    video {
-      border-radius: 20px;
+    height: 80vh;
+    &-container {
+      margin-top: 130px;
+      margin-bottom: 80px;
     }
   }
 }
+
+// @media screen and (max-width: $breakpoint-md) {
+//   .videoBackground {
+//     height: 500px;
+//     video {
+//       height: 80%;
+//     }
+//     &-card {
+//       height: 20%;
+//     }
+//   }
+// }
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,7 +1,7 @@
 /* Fonts */
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-$primary-font: "Poppins", sans-serif;
+$primary-font: "Plain", sans-serif;
 $secondary-font: "Roboto", sans-serif;
 $medium: 20px;
 
@@ -83,6 +83,27 @@ $extra-large: 45px;
   }
 }
 
+@mixin secondaryBtn {
+  padding: 5px 15px;
+  font-weight: 500;
+  border: 1px solid $grey;
+  background-color: transparent;
+  color: $grey;
+  border-radius: 5px;
+  transition: filter 200ms ease-in;
+  &:hover {
+    color: white;
+    background-color: #7D7D92;
+    border: 1px solid #7D7D92;
+  }
+  &:active {
+    background-color: $grey;
+  }
+  @media screen and (min-width: $breakpoint-lg) {
+    padding: 8px 30px;
+  }
+}
+
 // new sizes
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
@@ -126,19 +147,19 @@ body {
     font-family: $primary-font;
   }
   h4 {
-    font-size: 28px;
+    font-size: 24px;
     font-family: $primary-font;
   }
   h5 {
-    font-size: 24px;
+    font-size: 20px;
     font-family: $primary-font;
   }
   h6 {
     font-size: 18px;
     font-family: $primary-font;
   }
   small {
-    font-size: 16px;
+    font-size: 14px;
   }
 }
 
@@ -152,34 +173,34 @@ body {
       font-size: 20px;
     }
     h1 {
-      font-size: 54px;
+      font-size: 60px;
     }
     h2 {
-      font-size: 48px;
+      font-size: 56px;
     }
     h3 {
       span {
-        font-size: 28px;
+        font-size: 48px;
       }
-      font-size: 28px;
+      font-size: 48px;
     }
     h4 {
-      font-size: 31px;
+      font-size: 36px;
     }
     h5 {
-      font-size: 25px;
+      font-size: 32px;
     }
     h6 {
-      font-size: 20px;
+      font-size: 24px;
     }
     small {
-      font-size: 16px;
+      font-size: 18px;
     }
     button {
-      font-size: 16px;
+      font-size: 18px;
     }
     input {
-      font-size: 16px;
+      font-size: 18px;
     }
   }
 }

diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js
@@ -20,6 +20,14 @@ import {
   Quote
 } from "../components"
 
+// componentes del body
+import BannerList from "../components/BannerList/BannerLis"
+import ExpandGrid from "../components/expandGrid/ExpandGrid"
+import Catsone from "../components/Catsone/catsone"
+import Text from "../components/Text/Text"
+import Form from "../components/Form/Form"
+import VideoBackground from "../components/videoBackground/VideoBackground"
+
 
 const LandingPage = ({ data, location }) => {
   const pageData = data?.allStrapiLandingPage?.nodes[0]
@@ -86,6 +94,11 @@ const LandingPage = ({ data, location }) => {
         <AnimatedTransitionContinous data={component} />
       ) : null
 
+      const videoBackground =
+      component.strapi_component === "home.video-background" ? (
+        <VideoBackground data={component} />
+      ) : null
+
     return (
       <div key={idx}>
         <>
@@ -98,6 +111,7 @@ const LandingPage = ({ data, location }) => {
           {text}
           {logosSection}
           {form}
+          {videoBackground}
           {quote}
           {dualSection}
           {animatedTransition}