SBIT.255: create Sites component & modified footer structure

src/components/Footer/Footer.js

@@ -1,12 +1,12 @@
 import React from "react"
 import Container from "react-bootstrap/Container"
-import Row from "react-bootstrap/Row"
 import Col from "react-bootstrap/Col"
 import ContactData from "./ContactData/contactData"
 import Location from './Location/location';
 import SocialLinks from "./SocialLinks/socialLinks"
 import Navegation from './Navegation/navegation';
 import Subscription from './Subscription/subscription';
+import Sites from './Sites/Sites'
 import "./Footer.scss"
 
 
@@ -15,67 +15,40 @@ const Footer = () => {
     <>
       <div className="Footer">
         <Container fluid className="Footer__Container">
-          <Row className="Footer__Row ps-xl-5">
-            <Col
-              xs={6}
-              md={3}
-              lg={4}
-              xl={3}
-              className="Footer__Col Footer__Col__Navegation"
-            >
-              <div className="Footer__Title">
+          <Col>
+            <div className="Footer__Row">
+              <div className="Footer__Title Footer__Col Footer__Col__Navegation">
                 <Navegation />
               </div>
-            </Col>
 
-            <Col
-              xs={6}
-              md={4}
-              lg={4}
-              xl={3}
-              className="Footer__Col Footer__Col__Contact"
-            >
-              <div className="Footer__Title">
+              <div className="Footer__Title Footer__Col Footer__Col__Contact">
                 <ContactData />
               </div>
-            </Col>
 
-            <Col
-              xs={6}
-              md={4}
-              lg={4}
-              xl={3}
-              className="Footer__Col Footer__Col__Contact d-none d-xl-block"
-            >
-              <div className="Footer__Title ps-xl-3">
+              <div className="Footer__Title Footer__Col Footer__Col__Contact">
                 <Location />
               </div>
-            </Col>
 
-            <Col
-              xs={12}
-              md={5}
-              lg={4}
-              xl={3}
-              className="Footer__Col Footer__Col__Navegation"
-            >
-              <div className="Footer__Title">
-                <Subscription />
+              <div className="Footer__Col">
+                <Sites />
               </div>
-            </Col>
-
-            <Col
-              xs={12}
-              md={12}
-              lg={12}
-              className="Footer__Col Footer__Col__Social"
-            >
-              <div className="Footer__Title">
 
-                <SocialLinks />
+              <div className="Footer__Title Footer__Col Footer__Col__Subscription">
+                <Subscription />
               </div>
-            </Col>
-          </Row>
+            </div>
+          </Col>
+
+          <Col
+            xs={12}
+            md={12}
+            lg={12}
+            className="Footer__Col Footer__Col__Social"
+          >
+            <div className="Footer__Title">
+              <SocialLinks />
+            </div>
+          </Col>
         </Container>
       </div>
     </>

src/components/Footer/Footer.scss

@@ -3,13 +3,49 @@
 .Footer {
   background-color: $nav-footer-container;
   padding: 24px 0px 34px;
+
+  &__Row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(130px, 400px));
+    gap: 32px;
+  }
+
+  &__Col {
+    &__Subscription {
+      grid-column: 1/3;
+    }
+  }
+
+  @media (min-width: $breakpoint-md) {
+    &__Row {
+      width: 95%;
+      margin: 0 auto;
+      grid-template-columns: repeat(3, minmax(130px, 400px));
+    }
+
+    &__Col {
+      &__Subscription {
+        grid-column: 2/4;
+      }
+    }
+  }
+
+  @media (min-width: $breakpoint-xxl) {
+    &__Row {
+      grid-template-columns: repeat(5, minmax(130px, 250px));
+      justify-content: space-evenly;
+    }
+
+    &__Col {
+      &__Subscription {
+        grid-column: auto;
+      }
+    }
+  }
 }
 
 @media screen and (min-width: $breakpoint-xl) {
   .Footer {
     padding: 30px 50px;
-    &__Col {
-      padding-left: 20px;
-    }
   }
-}
+}

src/components/Footer/Location/location.scss

@@ -1,20 +1,22 @@
 @import "../../../styles/global.scss";
 
-@media screen and (min-width: $breakpoint-xl) {
-  .ContactData__Item {
-    &__location {
-      display: block;
-      color: $white;
+.ContactData__Item {
+  margin: 0px !important;
 
-      p {
-        font-size: 18px;
-        width: 80%;
-      }
-      .icon-text {
-        svg {
-          margin-right: 10px;
-        }
+  &__location {
+    display: block;
+    color: $white;
+
+    p {
+      font-size: 18px;
+    }
+
+    .icon-text {
+      align-items: center;
+
+      svg {
+        margin-right: 10px;
       }
     }
   }
-}
+}

src/components/Footer/Navegation/navegation.js

@@ -35,7 +35,7 @@ export default function Navegation() {
   })
 
   return (
-    <div className="ContactData__Item ps-md-3">
+    <div className="ContactData__Item">
       <h6>{dataFooter.navegation?.title}</h6>
       <ul className="Navegation__Item">
         {navegationItems}

src/components/Footer/Sites/Sites.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { useFooter } from '../../../hooks';
+import { getImage, GatsbyImage } from "gatsby-plugin-image";
+import './Sites.scss'
+
+const Sites = () => {
+  const sitesData = useFooter()?.allStrapiLayout?.nodes[0]?.Sites
+
+  const websitesItems = sitesData?.websites?.map(website => {
+    const image = website?.icon?.localFile?.childImageSharp?.gatsbyImageData
+      ? getImage(website?.icon?.localFile?.childImageSharp?.gatsbyImageData)
+      : undefined;
+
+    return (
+      <div key={website.id}>
+        <a href={website.url}
+          aria-label={`Visita nuestro sitio web: ${website.url}`}
+        >
+          {image && (
+            <GatsbyImage image={image}
+              alt={website.icon?.alternativeText
+                ? website.icon.alternativeText
+                : 'Website Icon'
+              }
+              width={30}
+              height={15}
+            />
+          )}
+          {website?.name ? website.name : ''}
+        </a>
+      </div>
+    )
+  })
+
+  return (
+    <div className="Sites d-flex">
+      {sitesData?.title && <h6>{sitesData.title}</h6>}
+      <div className="Sites__items">
+        {websitesItems}
+      </div>
+    </div>
+  )
+}
+
+export default Sites;

src/components/Footer/Sites/Sites.scss

@@ -0,0 +1,35 @@
+@import "../../../styles/global.scss";
+
+.Sites {
+  flex-direction: column;
+
+  h6 {
+    color: $white;
+    margin-bottom: 16px;
+    font-size: 22px;
+
+    @media (min-width: $breakpoint-xxl) {
+      font-size: 20px;
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 8px;
+
+    a {
+      color: $white;
+      font-size: 18px;
+      font-weight: $normal;
+    }
+
+    img {
+      width: 30px;
+      height: 15px;
+      object-fit: cover;
+      margin-right: 8px;
+    }
+  }
+}

src/components/Footer/SocialLinks/socialLinks.js

@@ -20,6 +20,7 @@ export default function SocialLinks() {
         target="_blank"
         className={`btn-social m-2 btn-social-icon btn-${item.icon?.name}`}
         rel="noreferrer"
+        aria-label={`Link externo a ${item?.name}`}
       >
         <FaIcon type={item.icon?.type} code={item.icon?.code} />
       </a>
@@ -33,11 +34,16 @@ export default function SocialLinks() {
         {socialMedia}
       </div>
 
-      <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>
-      </div>
+      {logo && (
+        <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} alt={dataFooter?.logo?.alternativeText
+              ? dataFooter.logo.alternativeText
+              : 'Logo Bitlogic'}
+            />
+          </Link>
+        </div>
+      )}
 
     </div>
   )