Sbit-93: create logos section

src/components/LogosSection/logosSection.js

@@ -0,0 +1,33 @@
+import "./logosSection.scss"
+import React from "react"
+import { useTheme } from "../../context/themeContext"
+
+const LogosSection = ({ data }) => {
+  const { title, summary, media } = data
+
+  const { theme } = useTheme()
+
+  const logoList = media.map(logo => {
+    return (
+      <div className="logos__image">
+        <img
+          src={
+            theme === "dark" && logo.imageDark
+              ? logo.imageDark.url
+              : logo.img.url
+          }
+          alt={logo.name}
+        />
+      </div>
+    )
+  })
+  return (
+    <div className="logos container py-3 my-3">
+      {title && <h2 className="logos__title">{title}</h2>}
+      {summary && <h6 className="logos__summary px-lg-3">{summary}</h6>}
+      <div className="logos__logos">{logoList}</div>
+    </div>
+  )
+}
+
+export default LogosSection

src/components/LogosSection/logosSection.scss

@@ -0,0 +1,42 @@
+@import "../../styles/global.scss";
+
+.logos {
+    &__title {
+        font-weight: 700;
+        padding-bottom: 20px;
+        text-align: center;
+        width: fit-content;
+        margin: 0 auto;
+    }
+    &__summary {
+        font-weight: 400;
+        text-align: center;
+        line-height: 30px;
+    }
+    &__logos {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &__image {
+        margin-top: 15px;
+        max-width: 220px;
+    }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+    .logos {
+        &__logos {
+            margin: 30px 0;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        &__image {
+            margin: 10px 10px 0 10px;
+        }
+    }
+}
+

src/components/index.js

@@ -8,6 +8,7 @@ import BannerTop from "./Banners/BannerTop"
 import BannerHead from "./BannerHead/BannerHead"
 import CasesSection from "./CasesSection/CasesSection"
 import CasesList from "./CasesSection/CasesList"
+import LogosSection from "./LogosSection/logosSection"
 
 
 export {
@@ -20,5 +21,6 @@ export {
   BannerISO,
   BannerClientes,
   BannerTop,
-  BannerHead
+  BannerHead,
+  LogosSection,
 }

src/templates/LandingPage.js

@@ -1,7 +1,7 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import { Seo, CasesSection, CasesList } from "../components/index.js"
+import { Seo, CasesSection, CasesList, LogosSection } from "../components/index.js"
 
 // componentes del body
 import Hero from "../components/Hero/Hero"
@@ -13,7 +13,7 @@ import BannerHead from '../components/BannerHead/BannerHead';
 const LandingPage = ({ data, location }) => {
   const pageData = data?.allStrapiLandingPage?.nodes[0]
   const content = pageData.body.map((component, idx) => {
-    console.log(component)
+
     const hero = component.strapi_component === "home.hero" ?
       <Hero data={component} /> :
       null
@@ -42,6 +42,10 @@ const LandingPage = ({ data, location }) => {
       <BannerHead data={component} /> :
       null
 
+      const logosSection = component.strapi_component === "components.logos-section" ?
+      <LogosSection data={component} /> :
+      null
+
     return (
       <div key={idx}>
         <>
@@ -52,6 +56,7 @@ const LandingPage = ({ data, location }) => {
           {casesList}
           {catsone}
           {bannerHead}
+          {logosSection}
         </>
       </div>
     )