From ba44fd6f0bd59cc774c6e5dcc0f984cff8723001 Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Mon, 4 Apr 2022 16:42:40 -0300
Subject: [PATCH 1/4] Agregar boton y autor a quote, opcion de video o imagen

---
 src/components/BannerHead/BannerHead.js | 11 ++--
 src/components/quote/Quote.js           | 87 ++++++++++++++++++++-----
 src/components/quote/quote.scss         | 73 +++++++++------------
 3 files changed, 105 insertions(+), 66 deletions(-)

diff --git a/src/components/BannerHead/BannerHead.js b/src/components/BannerHead/BannerHead.js
index 910766b9..61bae47c 100644
--- a/src/components/BannerHead/BannerHead.js
+++ b/src/components/BannerHead/BannerHead.js
@@ -5,21 +5,22 @@ import { getImage, GatsbyImage } from "gatsby-plugin-image"
 
 const BannerHead = ({ data }) => {
     const title = data?.title;
+    const image = data?.image;
 
     const checkImage = () => {
 
-        if (data?.image?.url) {
-            return <img src={data?.image?.url} alt={data?.image?.name} />
+        if (image?.url) {
+            return <img src={image?.url} alt={image?.name} />
         } else {
-            const image = getImage(data?.image?.localFile)
-            return <GatsbyImage image={image} alt={`img-${title}`}></GatsbyImage>
+            const imagen = getImage(image?.localFile)
+            return <GatsbyImage image={imagen} alt={`img-${title}`}></GatsbyImage>
         }
     }
 
     return (
         <div class="banner d-flex justify-content-center">
             <div class="banner__image">
-                {checkImage()}
+                {image && checkImage()}
             </div>
 
             {title && (
diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js
index b4c842e6..8051f612 100644
--- a/src/components/quote/Quote.js
+++ b/src/components/quote/Quote.js
@@ -1,36 +1,85 @@
 import "./quote.scss"
-
-import React from "react"
+import MarkdownView from "react-showdown"
+import React, { useEffect, useRef, useState } from "react"
 
 const Quote = ({
-  data: { description, title, variant, profile, image, strapi_component, id },
+  data: { description, title, variant, profile, profileDescription, button, image, strapi_component, id },
 }) => {
+  const [isVideoPause, setIsVideoPause] = useState(false)
+  const videoRef = useRef(null)
+
+  const pausePlay = () => {
+    if (isVideoPause) {
+      videoRef.current.play()
+    } else {
+      videoRef.current.pause()
+    }
+    setIsVideoPause(prev => !prev)
+  }
+
+  useEffect(() => {
+    const isVideoPauseLocal =
+      typeof window !== "undefined"
+        ? localStorage.getItem("videoPaused")
+        : undefined
+
+    if (isVideoPauseLocal === "true") {
+      videoRef.current.pause()
+      setIsVideoPause(isVideoPauseLocal)
+    }
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem("videoPaused", isVideoPause)
+  }, [isVideoPause])
+
   return (
-    <div className="container my-3" id={strapi_component + "-" + id}>
+    <div className="container my-3 mb-lg-5" id={strapi_component + "-" + id}>
       <section className={`quote variant-${variant}`}>
         {image && (
           <div className="quote-body">
-            <img
-              placeholder="https://via.placeholder.com/900"
-              src={image.url}
-              alt=""
-            />
+            {(/video/gm.test(image.mime)) &&
+              <video
+                ref={videoRef}
+                muted
+                autoPlay
+                loop
+                src={image.url}
+                type="video/mp4"
+                onClick={pausePlay}
+                controls={false}
+              />}
+            {(/image/gm.test(image.mime)) && (
+              <img
+                src={image.url}
+                alt={image.name}
+              />
+            )
+            }
           </div>
         )}
 
         <div className="quote-person">
           <h4 className="quote-person-title">{title}</h4>
           <p className="quote-person-text">{description}</p>
+
+          {profile && (
+            <div className="quote-profile make-it-fast my-3 d-flex gap-3 justify-content-between">
+              <img
+                src={"http://localhost:1337/uploads/profile_4f038f59f5.png"}
+                alt=""
+              />
+              <div className="flex-grow-1">
+                <MarkdownView markdown={profileDescription} className="markdown" />
+              </div>
+            </div>
+          )}
+          {button && (
+            <div className="quote-btn">
+              <button>{button.content}</button>
+            </div>
+          )}
         </div>
-        {profile && (
-          <div className="quote-profile make-it-fast">
-            <img
-              placeholder="https://via.placeholder.com/300"
-              src={profile.url}
-              alt=""
-            />
-          </div>
-        )}
       </section>
     </div>
   )
@@ -40,6 +89,8 @@ Quote.defaultProps = {
   description: "",
   title: "",
   variant: "",
+  profileDescription: "",
+  button: {},
   profile: {},
   image: {},
 }
diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss
index d5257fcd..b4f1eb70 100644
--- a/src/components/quote/quote.scss
+++ b/src/components/quote/quote.scss
@@ -8,19 +8,20 @@
     grid-area: quote-body;
     img {
       width: 100%;
-      height: 70vh;
+      object-fit: cover;
+    }
+    video {
+      width: 100%;
       object-fit: cover;
     }
   }
 
   &-person {
-    padding-top: 1em;
     grid-area: quote-person;
     display: flex;
     flex-direction: column;
 
     &-title {
-      margin-bottom: 1.5em;
       font-weight: 700;
     }
     &-text {
@@ -31,23 +32,6 @@
       -webkit-box-orient: vertical;
       overflow: hidden;
     }
-    @keyframes move-shadow {
-      0% {
-        transform: translate3d(12px, 0px, 0px);
-      }
-      25% {
-        transform: translate3d(0px, 12px, 0px);
-      }
-      50% {
-        transform: translate3d(-12px, 0px, 0px);
-      }
-      75% {
-        transform: translate3d(0px, -12px, 0px);
-      }
-      100% {
-        transform: translate3d(12px, 0px, 0px);
-      }
-    }
   }
 
   &-profile {
@@ -55,33 +39,36 @@
     flex-grow: 0;
     align-self: flex-start;
     border-radius: 50%;
-    position: relative;
-    width: 200px;
-    height: 200px;
+    width: 100%;
     z-index: 4;
-    &::before {
-      content: "";
-      inset: 0px 0px 0px 0px;
-      position: absolute;
-      background-color: #22c0c329;
+    img {
+      width: 100px;
+      height: 100px;
       border-radius: 50%;
-      animation: move-shadow 7s infinite linear;
-      z-index: -1;
     }
-    &::after {
-      content: "";
-      inset: 0px 0px 0px 0px;
-      position: absolute;
-      background-color: #22c0c325;
-      border-radius: 50%;
-      animation: move-shadow 7s infinite linear;
-      animation-delay: 3s;
-      z-index: -1;
+    .markdown {
+      p {
+        margin: 0;
+      }
     }
-    img {
-      width: 200px;
-      height: 200px;
-      border-radius: 50%;
+  }
+  &-btn {
+    button {
+      @include primaryBtn;
+      border-radius: 8px;
+      width: 131px;
+      height: 30px;
+    }
+  }
+}
+
+@media (min-width: $breakpoint-lg) {
+  .quote {
+    &-btn {
+      button {
+        width: 150px;
+        height: 40px;
+      }
     }
   }
 }

From cbd1b2b9256290c264c484a39e3d227f43fa858e Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Wed, 6 Apr 2022 13:54:09 -0300
Subject: [PATCH 2/4] Modificar quote para que acepte video youtube

---
 src/components/quote/Quote.js   | 81 ++++++++++++++-------------------
 src/components/quote/quote.scss | 79 ++++++++++++++++++++++++++------
 2 files changed, 101 insertions(+), 59 deletions(-)

diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js
index 8051f612..c3df5b6c 100644
--- a/src/components/quote/Quote.js
+++ b/src/components/quote/Quote.js
@@ -1,61 +1,49 @@
 import "./quote.scss"
 import MarkdownView from "react-showdown"
-import React, { useEffect, useRef, useState } from "react"
+import React from "react"
 
 const Quote = ({
-  data: { description, title, variant, profile, profileDescription, button, image, strapi_component, id },
+  data: { description, title, variant, profile, profileDescription, button, image, videoUrl, strapi_component, id },
 }) => {
-  const [isVideoPause, setIsVideoPause] = useState(false)
-  const videoRef = useRef(null)
+  const url = videoUrl.replace("watch?v=", "embed/")
+  let code = url.substring(url.lastIndexOf("/") + 1, url.length)
+  const codeIndex = code.indexOf("?")
 
-  const pausePlay = () => {
-    if (isVideoPause) {
-      videoRef.current.play()
-    } else {
-      videoRef.current.pause()
-    }
-    setIsVideoPause(prev => !prev)
+  if (codeIndex !== -1) {
+    code = code.substring(0, code.indexOf("?"))
   }
 
-  useEffect(() => {
-    const isVideoPauseLocal =
-      typeof window !== "undefined"
-        ? localStorage.getItem("videoPaused")
-        : undefined
-
-    if (isVideoPauseLocal === "true") {
-      videoRef.current.pause()
-      setIsVideoPause(isVideoPauseLocal)
-    }
-  }, [])
-
-  useEffect(() => {
-    localStorage.setItem("videoPaused", isVideoPause)
-  }, [isVideoPause])
-
   return (
     <div className="container my-3 mb-lg-5" id={strapi_component + "-" + id}>
       <section className={`quote variant-${variant}`}>
         {image && (
           <div className="quote-body">
-            {(/video/gm.test(image.mime)) &&
-              <video
-                ref={videoRef}
-                muted
-                autoPlay
-                loop
-                src={image.url}
-                type="video/mp4"
-                onClick={pausePlay}
-                controls={false}
-              />}
-            {(/image/gm.test(image.mime)) && (
-              <img
-                src={image.url}
-                alt={image.name}
-              />
-            )
-            }
+            <img
+              src="http://localhost:1337/uploads/quote1_df2d40290b.png"
+              alt={image.name}
+            />
+          </div>
+        )}
+
+        {videoUrl && (
+          <div className="quote-body">
+            <iframe
+              loading="lazy"
+              type="text/html"
+              src={url}
+              frameBorder="0"
+              allowFullScreen
+              title="benefits_video"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;
+                            width:100%;top:0;bottom:0;max-height: 500px}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style>
+                            <a href=${url}>
+                            <img src=https://img.youtube.com/vi/${code}/hqdefault.jpg alt='Video'>
+                            <span>▶</span></a>`}
+              webkitallowfullscreen="true"
+              mozallowfullscreen="true"
+            ></iframe>
+
           </div>
         )}
 
@@ -64,7 +52,7 @@ const Quote = ({
           <p className="quote-person-text">{description}</p>
 
           {profile && (
-            <div className="quote-profile make-it-fast my-3 d-flex gap-3 justify-content-between">
+            <div className="quote-profile make-it-fast my-3 my-md-2 my-xl-4 d-flex gap-3 justify-content-between">
               <img
                 src={"http://localhost:1337/uploads/profile_4f038f59f5.png"}
                 alt=""
@@ -90,6 +78,7 @@ Quote.defaultProps = {
   title: "",
   variant: "",
   profileDescription: "",
+  videoUrl: "",
   button: {},
   profile: {},
   image: {},
diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss
index b4f1eb70..ca1444c1 100644
--- a/src/components/quote/quote.scss
+++ b/src/components/quote/quote.scss
@@ -2,7 +2,7 @@
 
 .quote {
   display: grid;
-  gap: 3em;
+  gap: 2em;
 
   &-body {
     grid-area: quote-body;
@@ -10,9 +10,11 @@
       width: 100%;
       object-fit: cover;
     }
-    video {
+    iframe {
       width: 100%;
-      object-fit: cover;
+      margin-bottom: 0;
+      min-height: 250px;
+      max-height: 400px;
     }
   }
 
@@ -23,10 +25,13 @@
 
     &-title {
       font-weight: 700;
+      margin-bottom: 5px;
+      line-height: 35px;
     }
     &-text {
-      font-weight: 700;
       max-height: 300px;
+      margin-bottom: 0;
+      text-align: justify;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
@@ -42,8 +47,8 @@
     width: 100%;
     z-index: 4;
     img {
-      width: 100px;
-      height: 100px;
+      width: 65px;
+      height: 65px;
       border-radius: 50%;
     }
     .markdown {
@@ -62,39 +67,76 @@
   }
 }
 
+@media (min-width: $breakpoint-md) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 300px !important;
+      }
+    }
+  }
+}
 @media (min-width: $breakpoint-lg) {
   .quote {
+    &-body {
+      iframe {
+        min-height: 350px !important;
+      }
+    }
     &-btn {
       button {
         width: 150px;
         height: 40px;
       }
     }
+    &-profile {
+      img {
+        width: 100px;
+        height: 100px;
+      }
+    }
   }
 }
 
+@media (min-width: $breakpoint-xl) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 500px !important;
+      }
+    }
+    &-person {
+      &-title {
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
 // variantes
 .variant {
   &-quote {
-    grid-template-areas: "quote-person quote-body" "quote-profile quote-body";
+    grid-template-areas:
+      "quote-person quote-body"
+      "quote-profile quote-body";
     grid-template-columns: 1fr 2fr;
     @extend .variant;
   }
 
-  &-image {
-    grid-template-areas: "quote-body quote-person" "quote-body quote-profile";
+  &-media {
+    grid-template-areas:
+      "quote-body quote-person"
+      "quote-body quote-profile";
     grid-template-columns: 2fr 1fr;
     @extend .variant;
   }
 
   grid-template-rows: auto 1fr;
-  @media screen and (max-width: $breakpoint-lg) {
+  @media screen and (max-width: calc($breakpoint-md - 3px)) {
     grid-template-areas: "quote-body quote-body" "quote-profile quote-person";
     grid-template-columns: auto 1fr;
-    padding: 1em;
+    padding: 0.5em;
   }
-
-  @media screen and (max-width: $breakpoint-md) {
+  @media screen and (max-width: calc($breakpoint-md - 3px)) {
     display: flex;
     flex-direction: column;
     gap: 1em;
@@ -102,4 +144,15 @@
       margin-bottom: 0;
     }
   }
+  /*  @media screen and (max-width: calc($breakpoint-xl - 3px)) {
+    .variant {
+      &-quote {
+        grid-template-columns: 1fr 2fr !important;
+      }
+
+      &-media {
+        grid-template-columns: 2fr 1fr;
+      }
+    }
+  } */
 }

From fe01281c7fd7902d45c9cf8d82008a206abbd828 Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Wed, 6 Apr 2022 15:53:01 -0300
Subject: [PATCH 3/4] Cambiar orden de la data

---
 src/components/quote/Quote.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js
index c3df5b6c..0fae8458 100644
--- a/src/components/quote/Quote.js
+++ b/src/components/quote/Quote.js
@@ -3,7 +3,7 @@ import MarkdownView from "react-showdown"
 import React from "react"
 
 const Quote = ({
-  data: { description, title, variant, profile, profileDescription, button, image, videoUrl, strapi_component, id },
+  data: { description, title, variant, profileDescription, videoUrl, button, profile, image, strapi_component, id },
 }) => {
   const url = videoUrl.replace("watch?v=", "embed/")
   let code = url.substring(url.lastIndexOf("/") + 1, url.length)

From 88c8f924946046c2c8ea4d2dfe4a505ed98d4b96 Mon Sep 17 00:00:00 2001
From: Yuliya Sharapa <yuliya.sharapa@bitlogic.io>
Date: Mon, 11 Apr 2022 12:29:23 -0300
Subject: [PATCH 4/4] fix video style

---
 src/components/BlogPage/BlogContainer.js |  1 -
 src/components/Text/Text.js              |  2 +-
 src/components/quote/Quote.js            | 34 +++++++++++++++---------
 src/styles/global.scss                   |  6 ++---
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index ec0310c2..3fee539e 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -16,7 +16,6 @@ const Blog = () => {
   const bannerHead = blogData?.allStrapiBlogPage?.nodes[0]?.bannerHead
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
-  console.log(bannerHead)
   const {
     pageTitle,
     pageDescription,
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
index fc096fdd..badd0eed 100644
--- a/src/components/Text/Text.js
+++ b/src/components/Text/Text.js
@@ -3,7 +3,7 @@ import MarkdownView from "react-showdown";
 import './Text.scss';
 
 export default function Text({ data }) {
-    console.log(data)
+
     const title = data?.title;
     const description = data?.text;
 
diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js
index 0fae8458..ae5f1a92 100644
--- a/src/components/quote/Quote.js
+++ b/src/components/quote/Quote.js
@@ -5,29 +5,33 @@ import React from "react"
 const Quote = ({
   data: { description, title, variant, profileDescription, videoUrl, button, profile, image, strapi_component, id },
 }) => {
-  const url = videoUrl.replace("watch?v=", "embed/")
-  let code = url.substring(url.lastIndexOf("/") + 1, url.length)
-  const codeIndex = code.indexOf("?")
 
-  if (codeIndex !== -1) {
+
+  const url = videoUrl?.replace("watch?v=", "embed/")
+  let code = url?.substring(url.lastIndexOf("/") + 1, url.length)
+  const codeIndex = code?.indexOf("?")
+
+  if (codeIndex !== -1 && code !== undefined) {
     code = code.substring(0, code.indexOf("?"))
-  }
+  }    
+
 
   return (
     <div className="container my-3 mb-lg-5" id={strapi_component + "-" + id}>
       <section className={`quote variant-${variant}`}>
-        {image && (
+        {(image && !videoUrl) && (
           <div className="quote-body">
             <img
-              src="http://localhost:1337/uploads/quote1_df2d40290b.png"
+              src={image.url}
               alt={image.name}
             />
           </div>
         )}
 
-        {videoUrl && (
+        {(videoUrl !== null && videoUrl !== undefined) && (
           <div className="quote-body">
-            <iframe
+            {(url !== undefined && code !==undefined) && (
+              <iframe
               loading="lazy"
               type="text/html"
               src={url}
@@ -36,7 +40,7 @@ const Quote = ({
               title="benefits_video"
               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
               srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;
-                            width:100%;top:0;bottom:0;max-height: 500px}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style>
+                            width:100%;height:100%;object-fit: cover;top:0;bottom:0;max-height: 500px}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style>
                             <a href=${url}>
                             <img src=https://img.youtube.com/vi/${code}/hqdefault.jpg alt='Video'>
                             <span>▶</span></a>`}
@@ -44,6 +48,8 @@ const Quote = ({
               mozallowfullscreen="true"
             ></iframe>
 
+            )}
+            
           </div>
         )}
 
@@ -54,8 +60,8 @@ const Quote = ({
           {profile && (
             <div className="quote-profile make-it-fast my-3 my-md-2 my-xl-4 d-flex gap-3 justify-content-between">
               <img
-                src={"http://localhost:1337/uploads/profile_4f038f59f5.png"}
-                alt=""
+                src={profile.url}
+                alt="quote author"
               />
               <div className="flex-grow-1">
                 <MarkdownView markdown={profileDescription} className="markdown" />
@@ -64,7 +70,9 @@ const Quote = ({
           )}
           {button && (
             <div className="quote-btn">
-              <button>{button.content}</button>
+              <a href={button.url || button.landing_page?.slug}>
+                <button>{button.content}</button>
+              </a>
             </div>
           )}
         </div>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d8ce36fc..dfb24992 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -145,12 +145,12 @@ body {
 
 @media screen and (min-width: $breakpoint-lg) {
   body {
-    font-size: 18px;
+    font-size: 20px;
     p {
       em {
-        font-size: 18px;
+        font-size: 20px;
       }
-      font-size: 18px;
+      font-size: 20px;
     }
     h1 {
       font-size: 69px;