Sbit-70: Release a PROD

src/components/BannerHead/BannerHead.js

@@ -5,7 +5,6 @@ import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { useTheme } from "../../context/themeContext"
 
 const BannerHead = ({ data }) => {
-  console.log(data)
   const { theme } = useTheme()
 
   const title = data?.title

src/components/Text/Text.js

@@ -1,20 +1,33 @@
-import React from 'react';
-import MarkdownView from "react-showdown";
-import './Text.scss';
+import React from "react"
+import MarkdownView from "react-showdown"
+import "./Text.scss"
 
 export default function Text({ data }) {
-    console.log(data)
-    const title = data?.title;
-    const description = data?.text;
+    const title = data?.title
+    const description = data?.text
+    const bgImage = data?.backgroundImage?.url
 
     return (
-        <div className="text container py-3 d-flex flex-column flex-lg-row">
-
-            {title && (
-                <h2 className="title me-3 mt-5 p-lg-2">{title}</h2>
-            )}
-            {description && (
-                <MarkdownView markdown={description} className="description px-lg-5" />
+        <div className="container-text">
+            {title !== "" && title !== undefined && title !== null ? (
+                <div className="text d-flex flex-column flex-md-row">
+                    <div
+                        className="title"
+                        style={{
+                            backgroundImage: `url(${bgImage})`,
+                        }}
+                    >
+                        <h2 className="titleText pt-5 ps-4 pe-md-3">{title}</h2>
+                    </div>
+                    <MarkdownView
+                        markdown={description}
+                        className="description ps-4 px-lg-5"
+                    />
+                </div>
+            ) : (
+                <MarkdownView markdown={description} className="px-lg-5" id="descriptionText" style={{
+                    backgroundImage: `url(${bgImage})`,
+                }} />
             )}
         </div>
     )

src/components/Text/Text.scss

@@ -1,8 +1,71 @@
 @import "../../styles/global.scss";
 
 .text {
-  color: $primary;
+  margin-bottom: 50px;
   .title {
     text-transform: uppercase;
+    width: 100%;
+    min-height: 150px;
+    max-height: 65vh;
+    padding-top: 55px;
+  }
+  .description {
+    min-height: 60vh;
+    padding-top: 40px;
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  .text {
+    .description {
+      padding-top: 55px;
+    }
+  }
+}
+
+@media screen and (min-width: $breakpoint-xl) {
+  .text {
+    .title {
+      max-height: 60vh;
+
+      .titleText {
+        max-width: 30vw;
+        padding-left: 5rem !important;
+      }
+    }
+    .description {
+      padding-top: 70px;
+      max-width: 60vw;
+      max-height: 55vh;
+      padding-right: 10rem !important;
+    }
+  }
+}
+
+#descriptionText {
+  height: 70vh;
+  margin-bottom: 50px;
+  display: flex;
+  align-items: center;
+
+  p {
+    background-color: #ffffff;
+    padding: 2em 1em;
+    margin: 1em 1em 0;
+    border-radius: 20px;
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  #descriptionText {
+    max-height: 60vh;
+  }
+}
+
+@media screen and (min-width: $breakpoint-xl) {
+  #descriptionText {
+    p {
+      padding: 3em 3em;
+    }
   }
 }

src/components/expandGrid/ExpandGrid.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react"
+import { Link } from "gatsby"
+import React, { useEffect, useState } from "react"
 import { Flipper, Flipped } from "react-flip-toolkit"
 import MarkdownView from "react-showdown"
 import "./expandGrid.scss"
@@ -13,7 +14,7 @@ const ExpandGrid = ({ data }) => {
         <div className="expandGrid-body">
           <h2>{data.title}</h2>
           <h6 className="px-5">{data.subtitle}</h6>
-          <AnimatedList items={data.items.slice(0,4)} />
+          <AnimatedList items={data.items.slice(0, 4)} />
         </div>
       </section>
     </div>
@@ -35,9 +36,9 @@ const ListItem = ({ index, onClick, data }) => {
       <div className="listItem" onClick={() => onClick(index)}>
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
-          <div className="listItem-more">
-            <p>Ver mas</p>
-          </div>
+            <div className="listItem-more">
+              <h4>{data.title}</h4>
+            </div>
             <Flipped
               flipId={`avatar-${index}`}
               stagger="card-image"
@@ -53,7 +54,7 @@ const ListItem = ({ index, onClick, data }) => {
   )
 }
 
-const ExpandedListItem = ({ index, data }) => {
+const ExpandedListItem = ({ index, data, isFirst }) => {
   return (
     <Flipped
       flipId={createCardFlipId(index)}
@@ -64,13 +65,11 @@ const ExpandedListItem = ({ index, data }) => {
         }, 400)
       }}
     >
-      <div
-        className="listItem-expanded"
-      >
+      <div className="listItem-expanded">
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
-              <p  ></p>
+              <p></p>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -79,9 +78,16 @@ const ExpandedListItem = ({ index, data }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-            <div className="additional-content">
-              <div>
+            <div
+
+              className={"additional-content "}
+            >
+              <div style={isFirst ? {opacity: "1"} : {}}>
+                <h4>{data.title}</h4>
                 <MarkdownView markdown={data.text} />
+                {data.landing_page && (
+                  <Link to={"/" + data.landing_page.slug}>Ver más</Link>
+                )}
               </div>
             </div>
           </div>
@@ -93,7 +99,7 @@ const ExpandedListItem = ({ index, data }) => {
 
 const AnimatedList = ({ items }) => {
   const [itemsArray, setItemsArray] = useState({ items, focused: null })
-
+  const [isFirst, setIsFirst] = useState(true)
   useEffect(() => {
     setItemsArray(prev => ({ ...prev, focused: items[0].id }))
   }, [])
@@ -102,6 +108,7 @@ const AnimatedList = ({ items }) => {
     for (let i = 0; i < items.length; i++) {
       const item = itemsArray.items[i]
       if (item.id === index) {
+        setIsFirst(false)
         setItemsArray(prevItems => ({
           items: [
             item,
@@ -114,8 +121,6 @@ const AnimatedList = ({ items }) => {
       }
     }
   }
-
-
   return (
     <Flipper
       flipKey={itemsArray.focused}
@@ -134,6 +139,7 @@ const AnimatedList = ({ items }) => {
             <>
               {item.id === itemsArray.focused ? (
                 <ExpandedListItem
+                  isFirst={isFirst}
                   index={itemsArray.focused}
                   data={item}
                 />

src/components/expandGrid/expandGrid.scss

@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0 5em;
+  padding: 0 2em;
   width: 100%;
 }
 
@@ -40,7 +40,7 @@
   &-focus {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
-  background-color: rgba(180, 180, 180, 0.24);
+  background-color: rgba(255, 255, 255, 0.158);
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
@@ -116,16 +116,16 @@
 
 .listItem-more{
   position: absolute;
-  inset: 0 0 0 0;
+  inset: 0 0 20px 20px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-end;
+  justify-content: baseline;
   transition: opacity 200ms ease;
   opacity: 1;
+  color: black;
   p{
     padding: 0;
     margin: 0;
-    @include primaryBtn;
   }
   &-expanded{
     @extend .listItem-more;
@@ -137,7 +137,20 @@
 .additional-content > div {
   opacity: 0;
   border-radius: 3px;
-  height: 5rem;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  p {
+    max-height: 10vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  a{
+    font-weight: 600;
+    color: $secondary;
+    text-decoration: underline;
+    margin: auto 0 10px 10px;
+  } 
   h4 {
     text-align: left;
   }