From 8adb835820c4ef3e6306238a8eac9f058f84f533 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 27 Apr 2022 16:38:27 -0300 Subject: [PATCH 01/12] Instalar libreria lottie y agregar animaciones. --- package.json | 1 + src/components/Banner/Banner.js | 24 +++++++++++++++++++----- src/hooks/useNavbar.js | 4 ++-- yarn.lock | 13 +++++++++++++ 4 files changed, 35 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index c5b84935..d1d2727a 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "react-hubspot-form": "^1.3.7", "react-icons": "^4.2.0", "react-intersection-observer": "^8.33.1", + "react-lottie": "^1.2.3", "react-markdown": "5.0.3", "react-script-tag": "^1.1.2", "react-showdown": "^2.3.1", diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 3c14eb40..a9da2101 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -1,6 +1,7 @@ import React from "react" import { Link } from "gatsby" import ReactMarkdown from "react-markdown" +import Lottie from 'react-lottie' import { useTheme } from "../../context/themeContext" import "./Banner.scss" @@ -15,6 +16,18 @@ const Banner = ({ data }) => { const button = data?.button const diagonalReverseState = variant === "diagonalReverse" ? "col-md-4" : "col-lg-6" + + console.log(image) + + const defaultOptions = { + loop: true, + autoplay: true, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice' + }, + path: image?.url, + } + return (
{
{/* {title} */} - : {title} + />} +
) diff --git a/src/hooks/useNavbar.js b/src/hooks/useNavbar.js index 852ec01c..cd158d71 100644 --- a/src/hooks/useNavbar.js +++ b/src/hooks/useNavbar.js @@ -28,7 +28,7 @@ const useNavbar = () => { localFile { childImageSharp { gatsbyImageData( - placeholder: TRACED_SVG + placeholder: BLURRED ) } } @@ -37,7 +37,7 @@ const useNavbar = () => { localFile { childImageSharp { gatsbyImageData( - placeholder: TRACED_SVG + placeholder: BLURRED ) } } diff --git a/yarn.lock b/yarn.lock index 926fe41c..d038b2ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7538,6 +7538,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" +lottie-web@^5.1.3: + version "5.9.3" + resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.9.3.tgz#d84e0176d785fcc373095ad085e3ae4e6da032d6" + integrity sha512-QKA31Lu57SMfS09oUvuheEL+BkzjWHuzi7VkO9gSBaynK8tOMF2EwBgRdvcn3vXvX79/Y9RFlm75mjsS8je2+w== + lower-case@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28" @@ -9517,6 +9522,14 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-lottie@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.3.tgz#8544b96939e088658072eea5e12d912cdaa3acc1" + integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA== + dependencies: + babel-runtime "^6.26.0" + lottie-web "^5.1.3" + react-markdown@5.0.3: version "5.0.3" resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-5.0.3.tgz#41040ea7a9324b564b328fb81dd6c04f2a5373ac" From ca56feb5039ab3ff1301d59b3ef435c51c9348f4 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Tue, 3 May 2022 12:25:56 -0300 Subject: [PATCH 02/12] Modificar banner para funcionalidad de lotti --- src/components/Banner/Banner.js | 26 +++++++++++++++++---- src/components/DualSection/DualSection.scss | 1 + src/components/Text/Text.scss | 22 +++++++++++++---- 3 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index a9da2101..29815c0c 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -1,4 +1,4 @@ -import React from "react" +import React, { useEffect, useState } from "react" import { Link } from "gatsby" import ReactMarkdown from "react-markdown" import Lottie from 'react-lottie' @@ -17,7 +17,9 @@ const Banner = ({ data }) => { const diagonalReverseState = variant === "diagonalReverse" ? "col-md-4" : "col-lg-6" - console.log(image) + console.log(image?.url) + + const [lottieLight, setLottieLight] = useState(null) const defaultOptions = { loop: true, @@ -25,9 +27,22 @@ const Banner = ({ data }) => { rendererSettings: { preserveAspectRatio: 'xMidYMid slice' }, - path: image?.url, } + useEffect(() => { + //if (image.mime === "application/json") { + + fetch("https://strapi-s3-bitlogic-dev.s3.sa-east-1.amazonaws.com/coffe_b531a703f3.json", { + method: 'GET', // or 'PUT' + mode: 'cors', + headers: { + 'Access-Control-Allow-Origin': '*' + } + }).then(res => res.json()) + .catch(error => console.error('Error:', error)) + .then(res => setLottieLight(res)); + }, []) + return (
{ > {/* {title} */} - {image?.mime === "application/json" ? : : {title}} diff --git a/src/components/DualSection/DualSection.scss b/src/components/DualSection/DualSection.scss index 1ccf03a1..4f471022 100644 --- a/src/components/DualSection/DualSection.scss +++ b/src/components/DualSection/DualSection.scss @@ -53,6 +53,7 @@ &-img { flex-basis: 55%; img { + border-radius: 8px; width: 100%; padding: 0; } diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss index eb6c0492..e0a7fc16 100644 --- a/src/components/Text/Text.scss +++ b/src/components/Text/Text.scss @@ -13,7 +13,7 @@ background-color: $primary-container; border-radius: 10px; p:first-child { - padding-top: 1rem; + padding-top: 29px; } p { color: $primary; @@ -26,13 +26,27 @@ padding-bottom: 3rem; .notTitle { + display: flex; + flex-direction: column; + justify-content: center; color: $primary; border-radius: 20px; background-color: $primary-container; - padding: 1rem; - margin: 1.5rem 0rem; - p:nth-last-child(-n + 2) { + padding: 0rem 1rem; + + p:first-child { + padding-top: 29px; + } + + h6 { margin-bottom: 0px; + + &:last-child { + padding-bottom: 29px; + } + strong { + font-size: 16px !important; + } } } } From be62d5b8cc7fd2184dd22b0eadca3ef0263cb457 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Tue, 3 May 2022 12:33:02 -0300 Subject: [PATCH 03/12] modificar permisos y url --- src/components/Banner/Banner.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 29815c0c..c3ab5314 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -32,12 +32,8 @@ const Banner = ({ data }) => { useEffect(() => { //if (image.mime === "application/json") { - fetch("https://strapi-s3-bitlogic-dev.s3.sa-east-1.amazonaws.com/coffe_b531a703f3.json", { + fetch(image?.url, { method: 'GET', // or 'PUT' - mode: 'cors', - headers: { - 'Access-Control-Allow-Origin': '*' - } }).then(res => res.json()) .catch(error => console.error('Error:', error)) .then(res => setLottieLight(res)); From 87857a8cbb2f65bf81b1ec00a1d200c4a698e49e Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Tue, 3 May 2022 15:07:59 -0300 Subject: [PATCH 04/12] Modificar banner agregando animation JSON --- src/components/Banner/Banner.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index c3ab5314..ebf23f3e 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -17,9 +17,7 @@ const Banner = ({ data }) => { const diagonalReverseState = variant === "diagonalReverse" ? "col-md-4" : "col-lg-6" - console.log(image?.url) - - const [lottieLight, setLottieLight] = useState(null) + console.log(data) const defaultOptions = { loop: true, @@ -29,16 +27,6 @@ const Banner = ({ data }) => { }, } - useEffect(() => { - //if (image.mime === "application/json") { - - fetch(image?.url, { - method: 'GET', // or 'PUT' - }).then(res => res.json()) - .catch(error => console.error('Error:', error)) - .then(res => setLottieLight(res)); - }, []) - return (
{ {image?.mime === "application/json" ? : {title} Date: Wed, 4 May 2022 15:29:02 -0300 Subject: [PATCH 05/12] Agregar lottie al formulario --- src/components/Form/Form.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js index 04640689..dd2da2f8 100644 --- a/src/components/Form/Form.js +++ b/src/components/Form/Form.js @@ -1,6 +1,7 @@ import React, { useEffect } from "react" import MarkdownView from "react-showdown" import HubspotForm from "react-hubspot-form" +import Lottie from 'react-lottie' import "./Form.scss" const Form = ({ location, data }) => { @@ -10,6 +11,15 @@ const Form = ({ location, data }) => { const portalId = data?.portalId const formId = data?.formId const image = data?.image + const animation = data?.animation + + const defaultOptions = { + loop: true, + autoplay: true, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice' + }, + } useEffect(() => { window.addEventListener("message", handler) @@ -23,7 +33,7 @@ const Form = ({ location, data }) => { if ( event.origin === "https://forms.hsforms.com" || event.origin === "https://site.dev.bitlogic.io" || - event.origin === "https://www.bitlogic.io"|| + event.origin === "https://www.bitlogic.io" || event.origin === "https://preprod.d2mi1do1cquuwf.amplifyapp.com" ) { if ( @@ -38,7 +48,6 @@ const Form = ({ location, data }) => { } } } - console.log(event.origin, "origin") } const jqueryChange = elem => { @@ -67,8 +76,15 @@ const Form = ({ location, data }) => { className="form__content text-start" /> )} -
- hero +
+ {image?.url && hero} + + {animation && }
From c1a0dda1ebba092f0436a03264a06c8df294ae0f Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 4 May 2022 15:30:14 -0300 Subject: [PATCH 06/12] Modificar lottie para Banner y agregar estilos ancho y alto al hero --- src/components/Banner/Banner.js | 22 +++++++++++++--------- src/components/Banner/Banner.scss | 28 +++++++++++++++++++--------- 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index ebf23f3e..23091149 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -11,14 +11,13 @@ const Banner = ({ data }) => { const title = data?.title const variant = data?.variant const summary = data?.summary + const animation = data?.animation const image = data?.image const imageDark = data?.imageDark const button = data?.button const diagonalReverseState = variant === "diagonalReverse" ? "col-md-4" : "col-lg-6" - console.log(data) - const defaultOptions = { loop: true, autoplay: true, @@ -60,14 +59,19 @@ const Banner = ({ data }) => { } `} > {/* {title} */} +
+ {image?.url && {title}} + + {animation && } +
- {image?.mime === "application/json" ? : {title}}
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 95712659..1eebd106 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -19,6 +19,10 @@ padding: 1rem; display: flex; justify-content: center; + .cont-image { + width: 300px; + height: 300px; + } img { width: 100%; max-width: 540px; @@ -53,7 +57,6 @@ width: 100%; img { max-width: 100%; - } } .title { @@ -216,17 +219,21 @@ } } @media screen and (min-width: $breakpoint-sm) { - &.hero{ - .imagen{ + &.hero { + .imagen { justify-content: flex-end; } } } @media screen and (min-width: $breakpoint-md) { align-items: flex-start; - &.hero{ - .imagen{ + &.hero { + .imagen { justify-content: flex-end; + .cont-image { + width: 600px; + height: 600px; + } } } &.top { @@ -360,18 +367,21 @@ } } } - @media screen and (min-width: $breakpoint-lg) { flex-direction: row; &.hero { - height: 500px; + height: 600px; position: relative; .imagen { - max-height: 500px; + max-height: 600px; overflow: hidden; padding: 0; + .cont-image { + width: 650px; + height: 650px; + } } .title { @@ -397,7 +407,7 @@ max-width: 700px; } } - .title{ + .title { h2 { padding-right: 0rem; } From d909706759e8bcebc94a8ef2da95bfedb8d4f4b3 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 4 May 2022 15:30:43 -0300 Subject: [PATCH 07/12] Agregar estilos a lottie en el formulario --- src/components/Form/Form.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 3073052d..83c964b8 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -15,15 +15,18 @@ align-items: center; justify-content: center; width: 100%; - > div{ + > div { width: 100%; } } &__img { - padding: 2rem 1rem; img { max-width: 250px; } + + svg { + max-width: 350px !important; + } } &__content { p { From 94aeb437474be0f4d2c534381be6ea5a12a907c9 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 4 May 2022 15:31:44 -0300 Subject: [PATCH 08/12] Borrar console log en nav --- src/components/Footer/Navegation/navegation.js | 1 - src/components/NavBar/Navbar.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Footer/Navegation/navegation.js b/src/components/Footer/Navegation/navegation.js index ae5d58ad..37b1fceb 100644 --- a/src/components/Footer/Navegation/navegation.js +++ b/src/components/Footer/Navegation/navegation.js @@ -7,7 +7,6 @@ export default function Navegation() { const data = useFooter() const dataFooter = data?.allStrapiLayout?.nodes[0].footer const dataNav = data?.allStrapiLayout?.nodes[0].navbar - console.log(dataNav) return (
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js index b9285485..27f28d67 100644 --- a/src/components/NavBar/Navbar.js +++ b/src/components/NavBar/Navbar.js @@ -11,7 +11,7 @@ import { useTheme } from "../../context/themeContext" // theme images import moon from "../../images/moon-solid.svg" import sun from "../../images/sun.svg" -console.log(menusvg) + const NavBar = () => { const { theme, toggleTheme } = useTheme() const navbarData = useNavbar() @@ -32,7 +32,7 @@ const NavBar = () => { Date: Wed, 4 May 2022 15:32:21 -0300 Subject: [PATCH 09/12] Agregar esquemas a blogPage para animacion de lottie --- src/hooks/useBlog.js | 1 + src/schema/blogSchema.js | 163 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 164 insertions(+) diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js index d9642075..67c7de92 100644 --- a/src/hooks/useBlog.js +++ b/src/hooks/useBlog.js @@ -51,6 +51,7 @@ const useBlog = () => { image { url } + animation } } } diff --git a/src/schema/blogSchema.js b/src/schema/blogSchema.js index 47105241..7790b30c 100644 --- a/src/schema/blogSchema.js +++ b/src/schema/blogSchema.js @@ -452,7 +452,170 @@ type StrapiBlogCategory implements Node { summary: String button: StrapiBlogPageBannerButton image: StrapiBlogPageBannerImage + animation: JSON + } + type StrapiBlogPageBannerAnimation { + h: Int + v: String + w: Int + fr: Int + ip: Int + nm: String + op: Int + ddd: Int + layers: [StrapiBlogPageBannerAnimationLayers] + } + + type StrapiBlogPageBannerAnimationLayers { + ao: Int + bm: Int + ip: Int + ks: StrapiBlogPageBannerAnimationLayersKs + nm: String + op: Int + sr: Int + st: Int + ty: Int + ddd: Int + ind: Int + shapes: [StrapiBlogPageBannerAnimationLayersShapes] + } + + type StrapiBlogPageBannerAnimationLayersKs { + a: StrapiBlogPageBannerAnimationLayersKsA + o: StrapiBlogPageBannerAnimationLayersKsO + p: StrapiBlogPageBannerAnimationLayersKsP + r: StrapiBlogPageBannerAnimationLayersKsR + s: StrapiBlogPageBannerAnimationLayersKsS + } + + type StrapiBlogPageBannerAnimationLayersKsA { + a: Int + k: [Float] + l: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersKsO { + a: Int + k: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersKsP { + a: Int + k: [Int] + l: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersKsR { + a: Int + k: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersKsS { + a: Int + k: [Int] + l: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapes { + bm: Int + hd: Boolean + it: [StrapiBlogPageBannerAnimationLayersShapesIt] + ix: Int + mn: String + nm: String + np: Int + ty: String + cix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesIt { + hd: Boolean + ix: Int + ks: StrapiBlogPageBannerAnimationLayersShapesItKs + mn: String + nm: String + ty: String + ind: Int + c: StrapiBlogPageBannerAnimationLayersShapesItC + o: StrapiBlogPageBannerAnimationLayersShapesItO + w: StrapiBlogPageBannerAnimationLayersShapesItW + bm: Int + lc: Int + lj: Int + a: StrapiBlogPageBannerAnimationLayersShapesItA + p: StrapiBlogPageBannerAnimationLayersShapesItP + s: StrapiBlogPageBannerAnimationLayersShapesItS + sa: StrapiBlogPageBannerAnimationLayersShapesItSa + sk: StrapiBlogPageBannerAnimationLayersShapesItSk + } + + type StrapiBlogPageBannerAnimationLayersShapesItKs { + a: Int + k: StrapiBlogPageBannerAnimationLayersShapesItKsK + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItKsK { + c: Boolean + i: [[Float]] + o: [[Float]] + v: [[Float]] + } + + type StrapiBlogPageBannerAnimationLayersShapesItC { + a: Int + k: [Float] + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItO { + a: Int + k: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItW { + a: Int + k: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItA { + a: Int + k: [Int] + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItP { + a: Int + k: [Float] + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItS { + a: Int + k: [Int] + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItSa { + a: Int + k: Int + ix: Int + } + + type StrapiBlogPageBannerAnimationLayersShapesItSk { + a: Int + k: Int + ix: Int } + type StrapiBlogPageBannerButton { id: Int content: String From fc2b484e092e8810cf4dcea4e4c1d730e34ed59e Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 4 May 2022 15:32:44 -0300 Subject: [PATCH 10/12] Redondear imagenes en quote --- src/components/quote/quote.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss index 35a4dbb8..566dcd41 100644 --- a/src/components/quote/quote.scss +++ b/src/components/quote/quote.scss @@ -9,6 +9,7 @@ img { width: 100%; object-fit: cover; + border-radius: 8px; } iframe { width: 100%; From 2d0d506247d3375b99e733d4e8bbe2ca6a2d5cfa Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Thu, 5 May 2022 14:55:36 -0300 Subject: [PATCH 11/12] Arreglando logica en imagen y animacion en hero --- src/components/Banner/Banner.js | 24 ++++++++++++------------ src/components/Banner/Banner.scss | 12 ++++++------ 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 23091149..a3902d11 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -59,20 +59,20 @@ const Banner = ({ data }) => { } `} > {/* {title} */} -
- {image?.url && {title}} - - {animation && } -
- - + /> : +
+ {animation && } +
+ }
) diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 1eebd106..5ad2d3de 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -19,14 +19,14 @@ padding: 1rem; display: flex; justify-content: center; - .cont-image { - width: 300px; - height: 300px; - } img { width: 100%; max-width: 540px; } + .cont-lottie { + width: 300px; + height: 300px; + } } .title { h1 { @@ -230,7 +230,7 @@ &.hero { .imagen { justify-content: flex-end; - .cont-image { + .cont-lottie { width: 600px; height: 600px; } @@ -378,7 +378,7 @@ max-height: 600px; overflow: hidden; padding: 0; - .cont-image { + .cont-lottie { width: 650px; height: 650px; } From 5c44a2aa69504b166d2deb8b101da6b2121d8b55 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Thu, 5 May 2022 16:02:36 -0300 Subject: [PATCH 12/12] Arreglar logica en imagen y animacion en formulario --- src/components/Form/Form.js | 20 ++++++++++++-------- src/components/Form/Form.scss | 1 + 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js index dd2da2f8..978629e6 100644 --- a/src/components/Form/Form.js +++ b/src/components/Form/Form.js @@ -77,14 +77,18 @@ const Form = ({ location, data }) => { /> )}
- {image?.url && hero} - - {animation && } + {image?.url ? + hero : + <> + {animation && } + + }
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 83c964b8..5faf72c5 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -21,6 +21,7 @@ } &__img { img { + padding: 3rem 1rem; max-width: 250px; }