Sbit 44: finish vertical cards

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/index.js

@@ -7,10 +7,13 @@ import BannerClientes from "./Banners/BannerClientes"
 import BannerTop from "./Banners/BannerTop"
 import BannerActionCall from "./Banners/BannerActionCall"
 import CasesSection from "./CasesSection/CasesSection"
+import CasesList from "./CasesSection/CasesList"
 import JobsPage from "./JobsPage/JobsPage"
+
 export {
   JobsPage,
   Cards,
+  CasesList,
   CasesSection,
   Seo,
   BannerBgImage,

src/components/quote/Quote.js

@@ -2,32 +2,37 @@ import "./quote.scss"
 
 import React from "react"
 
-const Quote = ({ data: { description, title, variant, profile, image, strapi_component, id } }) => {
+const Quote = ({
+  data: { description, title, variant, profile, image, strapi_component, id },
+}) => {
   return (
     <div className="container my-3" id={strapi_component + "-" + id}>
       <section className={`quote variant-${variant}`}>
-      <div className="quote-body">
-        <img
-          placeholder="https://via.placeholder.com/900"
-          src={image.url}
-          alt=""
-        />
-      </div>
+        {image && (
+          <div className="quote-body">
+            <img
+              placeholder="https://via.placeholder.com/900"
+              src={image.url}
+              alt=""
+            />
+          </div>
+        )}
 
-      <div className="quote-person">
-        <h4 className="quote-person-title">{title}</h4>
-        <p className="quote-person-text">{description}</p>
-      </div>
-
-      <div className="quote-profile make-it-fast">
-        <img
-          placeholder="https://via.placeholder.com/300"
-          src={profile.url}
-          alt=""
-        />
-      </div>
-    </section>
-      </div>
+        <div className="quote-person">
+          <h4 className="quote-person-title">{title}</h4>
+          <p className="quote-person-text">{description}</p>
+        </div>
+        {profile && (
+          <div className="quote-profile make-it-fast">
+            <img
+              placeholder="https://via.placeholder.com/300"
+              src={profile.url}
+              alt=""
+            />
+          </div>
+        )}
+      </section>
+    </div>
   )
 }
 

src/hooks/index.js

@@ -2,12 +2,14 @@ import useGlobalSeo from "./useGlobalSeo"
 import useHomePage from "./useHomePage"
 import useBlog from './useBlog'
 import useFooter from './useFooter';
+import useCases from './useCases'
 import useNavbar from './useNavbar';
 
 export {
   useGlobalSeo,
   useHomePage,
   useBlog,
   useFooter,
+  useCases,
   useNavbar
 }

src/hooks/useCases.js

@@ -0,0 +1,46 @@
+import { useStaticQuery, graphql } from "gatsby"
+
+const useContactPage = () => {
+  return useStaticQuery(graphql`
+    {
+        allStrapiCase {
+            nodes {
+              strapiId
+              title
+              subtitle
+              description
+              quote {
+                description
+                title
+                variant
+                profile {
+                  localFile {
+                    childImageSharp {
+                      gatsbyImageData
+                    }
+                  }
+                }
+              }
+              image {
+                localFile {
+                  childImageSharp {
+                    gatsbyImageData
+                  }
+                }
+              }
+              button {
+                content
+                id
+                url
+                landing_page {
+                  slug
+                }
+              }
+            }
+          }
+    }
+  `)
+
+}
+
+export default useContactPage