From eb78c1e43e155daba34ad22e9dc9176eea1f09e7 Mon Sep 17 00:00:00 2001
From: Sandro Costa <sandro.costa@fccn.pt>
Date: Wed, 9 Oct 2024 16:49:49 +0000
Subject: [PATCH] feat: add multiple line to additional logos

- Add a way to create multiple lines on the footer, so that we can mimic
  the same behaviour that exists on the marketing site
---
 src/_footer.scss          | 36 +++++++++++++++++++++++++++++++++++-
 src/components/Footer.jsx | 14 +++++++-------
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/_footer.scss b/src/_footer.scss
index 50667223d..7133dd86e 100644
--- a/src/_footer.scss
+++ b/src/_footer.scss
@@ -25,7 +25,7 @@ $logo-color: #4e4e4e !default;
   flex-basis: 260px;
   min-width: 200px;
   font-size: 0.9rem;
-  
+
   span {
     font-weight: 600;
   }
@@ -47,4 +47,38 @@ $logo-color: #4e4e4e !default;
   &__badge {
     margin-right: 1.5rem;
   }
+}
+
+.footer-additional-logos {
+  padding: 25px 65px;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  &__line {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    border-block-end: 1px solid #dedede;
+    padding: 1rem 0 1.6rem 0;
+    flex-basis: 0;
+
+    @media screen and (max-width: 768px) {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    img {
+      max-height: 4rem;
+      padding: 0 .5rem;
+      max-width: 100%;
+    }
+
+    &:last-child {
+      border: none;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 6f85b1e29..884a0b9a6 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -29,15 +29,15 @@ const AdditionalLogosSection = () => {
 
   return (
     <section className="footer-additional-logos">
-      <div className="d-md-flex justify-content-between px-4">
-        {logos.map((logo) => (
-          <div className="py-3">
+      {logos.map(line => (
+        <div className="footer-additional-logos__line">
+          {Array.isArray(line) && line.map(logo => (
             <a href={logo.url} target="_blank" rel="noopener noreferrer">
-              <img src={logo.src} alt={logo.alt} style={{ maxHeight: '45px', maxWidth: '280px' }} />
+              <img src={logo.src} alt={logo.alt} />
             </a>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      ))}
     </section>
   );
 };