SBIT-70: Release a PROD

src/components/CasesSection/CasesList.js

@@ -0,0 +1,63 @@
+import React from "react"
+import MarkdownView from "react-showdown"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { useCases } from "../../hooks/index"
+import "./CasesSection.scss"
+import { FaInstagram, FaLinkedinIn, FaTwitter } from "react-icons/fa"
+
+const CasesList = () => {
+  const casesData = useCases()
+  const cases = casesData?.allStrapiCase?.nodes
+
+  const expendedCards = cases.map(caso => {
+    const image = getImage(caso.image?.localFile)
+    const profileImg = getImage(caso.quote?.profile?.localFile)
+
+    return (
+      <div className="col-12 row caseExpanded my-3" id={caso.title}>
+        <div className="col-12">
+          <GatsbyImage image={image} alt="alt" className="caseExpanded__img" />
+        </div>
+        <div className="col-12 col-md-7">
+            {caso.title && (
+                <h5 className="pt-3 pb-2 caseExpanded__title">{caso.title}</h5>
+            )}
+
+          {caso.subtitle && (
+          <h6 className="caseExpanded__subtitle">{caso.subtitle}</h6>              
+          )}
+          <div className="caseExpanded__descr">
+          <MarkdownView markdown={caso.description} />
+          </div>
+        </div>
+        <div className="col-12 col-md-5 row caseQuote">
+          <h5 className="caseQuote__title col-12 pt-md-3 pb-2">
+            {caso.quote.title}
+          </h5>
+          <p className="caseQuote__descr col-9 col-md-12">
+            "{caso.quote.description}"
+          </p>
+          <GatsbyImage
+            image={profileImg}
+            className="ml-md-3 caseQuote__profileImg col-3 col-md-12"
+          />
+        </div>
+        <div className="col-12">
+          <h6 className="caseExpanded__share">Compartílo en tus redes sociales</h6>
+          <div className="caseExpanded__icons d-flex justify-content-center">
+            <FaInstagram color="#3f6be8" size={20} />
+            <FaLinkedinIn color="#3f6be8" size={20} />
+            <FaTwitter color="#3f6be8" size={20} />
+          </div>
+        </div>
+      </div>
+    )
+  })
+  return (
+    <div className="container py-5 casesSection">
+      <div className="row">{expendedCards}</div>
+    </div>
+  )
+}
+
+export default CasesList

src/components/CasesSection/CasesSection.js

@@ -1,28 +1,38 @@
 import React from "react"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { useCases } from "../../hooks/index"
 import "./CasesSection.scss"
-import { FaRegThumbsUp, FaShareAlt, FaRegComment } from "react-icons/fa";
 
 const CasesSection = ({ data }) => {
   const { title, cases } = data
+  const casesData = useCases()
 
-  const casesCards = cases.map((caso, idx) => {
+  const casos = cases.map(caso =>
+    casesData?.allStrapiCase?.nodes.find(ca => ca.strapiId === caso.id)
+  )
+
+  const casesCards = casos.map((caso, idx) => {
+    const image = getImage(caso?.image?.localFile)
 
     return (
-      <div className="case col-12 col-md-4 row" key={`case-${idx}`} id={data.strapi_component + "-" + data.id}>
+      <div
+        className="case col-12 col-md-4 row"
+        key={`case-${idx}`}
+        id={data.strapi_component + "-" + data.id}
+      >
         <div className="col-6 col-md-12">
-          <img className="case__img" src={caso.image?.url} alt="A kitten" />
+          <GatsbyImage image={image} alt={caso.title} className="case__img" />
         </div>
         <div className="col-6 col-md-12">
           <div className="case__descr">
             <h5 className="case__descr_title">{caso.title}</h5>
-            <p className="case__descr_text">{caso.description}</p>
+            <p className="case__descr_text">"{caso.quote.description}"</p>
           </div>
-          <button>Ver más</button>
-        </div>
-        <div className="case__socials col-12">
-          <FaRegThumbsUp color="#3F6BE8" size={20} />
-          <FaRegComment color="#3F6BE8" size={20} />
-          <FaShareAlt color="#3F6BE8" size={20} />
+          {caso.button?.landing_page && (
+            <a href={caso.button?.landing_page?.slug + "/#" + caso.title}>
+              <button>{caso.button.content}</button>
+            </a>
+          )}
         </div>
       </div>
     )
@@ -31,7 +41,9 @@ const CasesSection = ({ data }) => {
   return (
     <div className="container py-5 casesSection">
       {title && <h2>{title}</h2>}
-      {casesCards.length > 0 && <div className="cases row">{casesCards}</div>}
+      {(casesCards !== undefined && casesCards.length > 0) && 
+        <div className="cases row">{casesCards}</div>
+      }
     </div>
   )
 }

src/components/CasesSection/CasesSection.scss

@@ -20,6 +20,12 @@
         h5 {
             font-weight: 700;
         }
+        &_text {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+            overflow: hidden; 
+        }
     }
     button {
         @include primaryBtn;
@@ -35,14 +41,54 @@
     }
 }
 
+.caseExpanded {
+    align-items: flex-start;
+    --bs-gutter-x: 0 !important;
+    padding: 10px;
+    &__descr {
+        text-align: justify;
+    }
+    &__subtitle {
+        color: $primary;
+        font-weight: 400;
+    }
+    &__share {
+        max-width: fit-content;
+        text-align: center;
+        margin: 0 auto;
+        margin-top: 20px;
+        padding: 8px 5px;
+        font-weight: 400;
+        border-bottom: 1px solid #F7B454;
+    }
+    &__icons {
+        margin-top: 10px;
+        svg {
+            margin: 0 5px;
+        }
+    }
+    &__img {
+        width: 100%;
+        max-height: 340px;
+    }
+    .caseQuote {
+        --bs-gutter-x: 0 !important;
+        &__profileImg {
+            border-radius: 50%;
+            height: 65px;
+            width: 65px;
+        }
+    }
+}
+
 @media screen and (min-width: $breakpoint-md) {
     .case {
         &__img {
             height: 240px;
             margin-bottom: 15px;
         }
         &__descr {
-            min-height: 120px;
+            min-height: 150px;
             max-height: 250px;
             h5 {
                 margin-bottom: 10px;
@@ -56,5 +102,32 @@
             }
         }
     }
+    .caseExpanded {
+        &__share {
+            padding: 8px 25px;
+        }
+        &__descr {
+            text-align:left;
+            padding-right: 30px;
+        }
+        &__subtitle, &__title {
+            padding-right: 30px;
+        }
+        .caseQuote {
+            &__profileImg {
+                width: 100px;
+                height: 100px;
+                margin-left: 15px;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: $breakpoint-lg) {
+    .case {
+        &__descr {
+            min-height: 130px;
+        }
+    }
 }
 

src/components/Footer/ContactData/contactData.js

@@ -19,7 +19,7 @@ export default function ContactData() {
   return (
     <>
       <div className='ContactData__Item'>
-        <h3>{dataFooter.contact?.title}</h3>
+        <h6>{dataFooter.contact.title}</h6>
         <p className='ContactData__Item__contact'>{contact}</p>
 
         <div className='ContactData__Item__link'>

src/components/Footer/ContactData/contactData.scss

@@ -2,9 +2,9 @@
 
 .ContactData__Item {
   color: $white;
-  h3 {
-    color: $white;
-    font-size: $medium;
+
+  h6 {
+    margin-bottom: 15px;
   }
 
   &__contact {
@@ -16,9 +16,9 @@
   }
   &__link {
     a {
-      color: #8761fc;
-      font-weight: bold;
-      text-decoration: underline #8761fc;
+      color: $primary;
+      font-weight: 600;
+      text-decoration: underline $primary;
       font-size: 18px;
     }
   }

src/components/Footer/Footer.scss

@@ -2,7 +2,7 @@
 
 .Footer {
   background-color: $nav-footer-container;
-  padding: 30px 20px 34px;
+  padding: 24px 0px 34px;
 }
 
 @media screen and (min-width: $breakpoint-xl) {

src/components/Footer/Location/location.js

@@ -16,9 +16,9 @@ export default function Location() {
         )
     });
     return (
-        <div className='ContactData__Item__location'>
-            <h3>{dataFooter?.location?.title}</h3>
-            <p>{location}</p>
+        <div className='ContactData__Item'>
+            <h6>{dataFooter?.location?.title}</h6>
+            <p className='ContactData__Item__location'>{location}</p>
         </div>
     )
 }

src/components/Footer/Location/location.scss

@@ -5,10 +5,7 @@
     &__location {
       display: block;
       color: $white;
-      h3 {
-        color: $white;
-        font-size: $medium;
-      }
+
       p {
         font-size: 18px;
         width: 80%;

src/components/Footer/Navegation/navegation.js

@@ -9,15 +9,15 @@ export default function Navegation() {
 
     const navegationItems = dataFooter?.navegation?.pageLink;
 
-    const navegationParts = navegationItems?.map((section) =>
-        <li>
+    const navegationParts = navegationItems.map((section) =>
+        <li className="mb-2">
             <Link to={section.pathTo}>{section.name}</Link>
         </li>
     );
 
     return (
         <div className='ContactData__Item ps-md-3'>
-            <h3>{dataFooter.navegation?.title}</h3>
+            <h6>{dataFooter.navegation?.title}</h6>
             <ul className='Navegation__Item'>
                 {navegationParts}
             </ul>

src/components/Footer/Navegation/navegation.scss

@@ -1,27 +1,19 @@
 @import "../../../styles/global.scss";
 
 .ContactData__Item {
-  h3 {
-    font-size: 18px;
-  }
   ul {
     li {
       list-style: none;
 
       a {
         color: $white;
-        font-weight: bold;
-        font-size: 16px;
       }
     }
   }
 }
 
 @media screen and (min-width: $breakpoint-xl) {
   .ContactData__Item {
-    h3 {
-      font-size: 20px;
-    }
     ul li a {
       font-size: 18px;
     }

src/components/Footer/SocialLinks/socialLinks.js

@@ -29,11 +29,11 @@ export default function SocialLinks() {
 
   return (
     <div className="SocialMedia d-flex mt-3 flex-column flex-md-row-reverse">
-      <div className="SocialMedia__Links d-flex justify-content-center text-md-start col-12 col-md-7 col-lg-6 col-xl-4 col-xxl-5">
+      <div className="SocialMedia__Links d-flex justify-content-center justify-content-md-start px-3 px-md-2 px-xxl-3 text-md-start col-12 col-md-5 col-lg-4 col-xl-3">
         {socialMedia}
       </div>
 
-      <div className="SocialMedia__Logo text-center text-md-start col-12 col-md-5 col-lg-6 col-xl-8 col-xxl-7 ps-md-3">
+      <div className="SocialMedia__Logo text-center text-md-start mt-2 ps-md-3 col-12 col-md-7 col-lg-8 col-xl-9">
         <Link to="/">
           <GatsbyImage image={logo} />
         </Link>

src/components/Footer/SocialLinks/socialLinks.scss

@@ -3,8 +3,10 @@
 .SocialMedia {
   &__Links {
     margin-bottom: 20px;
-    a {
+    .btn-social {
       color: $white;
+      width: 21px;
+      height: 21px;
     }
   }
 }

src/components/Footer/Subscription/subscription.js

@@ -8,17 +8,18 @@ export default function Subscription() {
 
     return (
         <div className="ContactData__Item">
-            <h3 className="titleSubscription">{dataSubscription.title}</h3>
+            <h6 className="titleSubscription">{dataSubscription.title}</h6>
             <form>
-                <div className="ContactData__Form d-flex flex-md-column">
+                <div className="ContactData__Form d-flex flex-md-column justify-content-between">
                     <label>
                         <input
                             type="email"
                             name="email"
-                            value="Enter your mail"
+                            placeholder="Enter your mail"
+                            className="col-7"
                         />
                     </label>
-                    <button type="submit">Subscribe</button>
+                    <button className="col-5" type="submit">Subscribe</button>
                 </div>
             </form>
         </div>