From cdec64fb4019d6c7a5ca815c91e6d76b6d8d55e4 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Wed, 23 Mar 2022 16:23:56 -0300 Subject: [PATCH 1/2] nuevo hero con subtitulo --- src/components/Hero/Hero.js | 73 ++++------- src/components/Hero/Hero.scss | 231 ++++------------------------------ 2 files changed, 47 insertions(+), 257 deletions(-) diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js index d1912257..22151c2c 100644 --- a/src/components/Hero/Hero.js +++ b/src/components/Hero/Hero.js @@ -1,54 +1,27 @@ import React from "react" import "./Hero.scss" -export default function Hero({ data }) { - const title = data.title; - const richList = data.listAnimation; - const image = data.image.url; - - const regexList = /(- )(.*)/g; - - //Parametros en la funcion y validar el richText q acepte mas q h1 - const processRichText = () => { - const processList = richList?.match(regexList)?.map(e => e.slice(2)); - return [processList]; - - } - - let [listOfWords] = processRichText(); - - return ( - <> -
-
-
- -
-
-

{title}

- {listOfWords && ( -
-
    - {listOfWords.map(word =>
  • {word}
    • )}; -
-
- )} - -
-
- - {data.button && ( -
- - - -
- )} -
- - - ) +const Hero = ({ + data: { title, listAnimation, subtitle, image, button, strapi_component, id }, +}) => { + return ( +
+
+

{title}

+

{listAnimation || subtitle}

+ {button && ( + + )} +
+
+ hero +
+
+ ) } + +export default Hero diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss index 4c67d1f8..d05277d9 100644 --- a/src/components/Hero/Hero.scss +++ b/src/components/Hero/Hero.scss @@ -1,226 +1,43 @@ @import "../../styles/global.scss"; - -@-webkit-keyframes change { - 0% { - margin-top: 0; - } - 15% { - margin-top: 0; - } - 25% { - margin-top: -45px; - } - 40% { - margin-top: -45px; - } - 50% { - margin-top: -90px; - } - 65% { - margin-top: -90px; - } - 75% { - margin-top: -45px; - } - 85% { - margin-top: -45px; - } - 100% { - margin-top: 0; - } -} - -@keyframes change { - 0% { - margin-top: 0; - } - 15% { - margin-top: 0; - } - 25% { - margin-top: -45px; - } - 40% { - margin-top: -45px; - } - 50% { - margin-top: -90px; - } - 65% { - margin-top: -90px; - } - 75% { - margin-top: -45px; - } - 85% { - margin-top: -45px; - } - 100% { - margin-top: 0; - } -} - -@-webkit-keyframes changeDesktop { - 0% { - margin-top: 0; - } - 15% { - margin-top: 0; - } - 25% { - margin-top: -65px; - } - 40% { - margin-top: -65px; - } - 50% { - margin-top: -130px; - } - 65% { - margin-top: -130px; - } - 75% { - margin-top: -65px; - } - 85% { - margin-top: -65px; - } - 100% { - margin-top: 0; - } -} - -@keyframes changeDesktop { - 0% { - margin-top: 0; - } - 15% { - margin-top: 0; - } - 25% { - margin-top: -65px; - } - 40% { - margin-top: -65px; - } - 50% { - margin-top: -130px; - } - 65% { - margin-top: -130px; - } - 75% { - margin-top: -65px; - } - 85% { - margin-top: -65px; - } - 100% { - margin-top: 0; - } -} - .hero { - /* background-image: url("../../images/Group.png"); - background-repeat: no-repeat; - background-position: center; - background-size: cover; - min-height: 700px; */ - + overflow: hidden; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + gap: 3em; button { @include primaryBtn; - margin-left: 150px; + margin-top: 20px; } .gatsby-image-wrapper { display: block; } - .content-text { - line-height: 45px; - height: 45px; - color: #333; - margin: 40px 0px; - - .visible { - overflow: hidden; - height: 45px; - } - - h1 { - margin: 0; - } - - ul { - margin-top: 0; - text-align: left; - list-style: none; - animation: 6s linear 0s normal none infinite change; - -webkit-animation: 6s linear 0s normal none infinite change; - -moz-animation: 6s linear 0s normal none infinite change; - -o-animation: 6s linear 0s normal none infinite change; - - li { - line-height: 45px; - margin: 0; - color: #8afe71; - font-size: 40px; - padding-left: 20px; - font-weight: $max-bold; - - &:first-child { - color: #e8809a !important; - } - - &:last-child { - color: #d047fa !important; - } - } - } + &-title{ + padding: 0 0 0 10vw; + flex-basis: 45%; } -} -//estilos de 768 para arriba -@media screen and (min-width: $breakpoint-md) { - .hero { - img { - height: 580px; - width: 600px; - margin-top: 50px; + &-img{ + max-height: 80vh; + overflow: hidden; + flex-basis: 55%; + img{ + width: 100%; } } -} - -@media screen and (min-width: $breakpoint-lg) { - .hero { - .content-text { - line-height: 65px; - height: 65px; - margin-left: 100px; - h1 { - margin-left: 100px; - } - .visible { - height: 65px; - } - ul { - animation: 6s linear 0s normal none infinite changeDesktop; - -webkit-animation: 6s linear 0s normal none infinite changeDesktop; - -moz-animation: 6s linear 0s normal none infinite changeDesktop; - -o-animation: 6s linear 0s normal none infinite changeDesktop; - - li { - font-size: 69px; - line-height: 65px; - } - } - } - &__button { - margin-top: -20px; + @media screen and (max-width: $breakpoint-xl) { + flex-direction: column-reverse; + &-img{ + flex-basis: 100%; } - &__image { - padding-left: 100px; + &-title{ + padding: 0 10vw; + flex-basis: 100%; } } + } From df9217e513e09a875216ac63b8d46e84c7abf729 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Wed, 23 Mar 2022 16:32:59 -0300 Subject: [PATCH 2/2] subtitle font weight ajustado --- src/components/Hero/Hero.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss index d05277d9..b7560648 100644 --- a/src/components/Hero/Hero.scss +++ b/src/components/Hero/Hero.scss @@ -18,6 +18,9 @@ &-title{ padding: 0 0 0 10vw; flex-basis: 45%; + h3{ + font-weight: 400; + } } &-img{