From e87a9a09b72808a44a47b50ebce0a1a870a0576f Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 4 May 2022 15:29:02 -0300 Subject: [PATCH 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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%;