Merge pull request #24 from barbaraperic/pr/footer

footer UI
ipni · Mar 29, 2024 · 98f492d · 98f492d
2 parents be8052e + bd5f141
commit 98f492d
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 81 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -8,9 +8,37 @@ function Footer(props) {
   return (
     <footer>
       <div className="container">
-        <Row>
-          <Col xs={12} xl={5}>
-            <h4>CID Contact</h4>
+        <h4>CID Contact</h4>
+        <div className="footerContainer">
+          <div>
+            <h5>
+              We are committed to deliver the best content discovery and routing
+              infastructure for IPFS & Filecoin.
+            </h5>
+            <div className="contactInfo">
+              <p>
+                For any questions, find us at Filecoin Slack Channel{" "}
+                <a
+                  href="https://filecoinproject.slack.com/archives/C02T827T9N0"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  #storetheindex.
+                </a>
+              </p>
+              <p>
+                For latest project status, visit our public{" "}
+                <a
+                  href="https://www.notion.so/pl-strflt/Weekly-Status-Report-30699cbe5a99473ea98b4ea4f9a3619b"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Notion workspace.
+                </a>
+              </p>
+            </div>
+          </div>
+          <div>
             <nav>
               <ul>
                 <li>
@@ -61,40 +89,6 @@ function Footer(props) {
                 </li>
               </ul>
             </nav>
-          </Col>
-          <Col
-            xs={8}
-            lg={7}
-            xxl={6}
-            className="offset-xxl-1 ps-xxl-0 pe-4 pe-sm-0"
-          >
-            <h5>
-              We are committed to deliver the best content discovery and routing
-              infastructure for IPFS & Filecoin.
-            </h5>
-
-            <p>
-              For any questions, find us at Filecoin Slack Channel{" "}
-              <a
-                href="https://filecoinproject.slack.com/archives/C02T827T9N0"
-                target="_blank"
-                rel="noreferrer"
-              >
-                #storetheindex.
-              </a>
-            </p>
-            <p>
-              For latest project status, visit our public{" "}
-              <a
-                href="https://www.notion.so/pl-strflt/Weekly-Status-Report-30699cbe5a99473ea98b4ea4f9a3619b"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Notion workspace
-              </a>
-            </p>
-          </Col>
-          <Col xs={4} lg={5} xl={12} className="d-flex d-lg-block align-items-end justify-content-end mb-3">
             <div className="logoWrapper">
               <a href="https://ipfs.io/" target="_blank" rel="noreferrer">
                 <img
@@ -111,8 +105,8 @@ function Footer(props) {
                 />
               </a>
             </div>
-          </Col>
-        </Row>
+          </div>
+        </div>
       </div>
       <FooterBg />
     </footer>

diff --git a/sass/_footer.scss b/sass/_footer.scss
@@ -3,6 +3,45 @@ footer {
   overflow: hidden;
   padding: 130px 0 90px;
 
+  .footerContainer {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+
+    @include media-breakpoint-up(sm) {
+      grid-template-columns: 2fr 1fr;
+      gap: 2rem;
+    }
+
+    > div:first-of-type {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      h5 {
+        font-size: 1.2rem;
+        font-weight: 500;
+        line-height: 1.2em;
+        margin-bottom: 2rem;
+
+        @include media-breakpoint-up(md) {
+          line-height: 30.48px;
+        }
+      }
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    > div:nth-child(2) {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   @include media-breakpoint-up(sm) {
     padding: 140px 0 110px;
   }
@@ -18,49 +57,28 @@ footer {
     font-size: calc(1.3rem + 0.6vw);
     font-weight: 600;
     margin-bottom: 35px;
-    
+
     @include media-breakpoint-up(lg) {
       font-size: 30px;
       margin-bottom: 65px;
-
-    }
-  }
-
-  h5{
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 1.2em;
-    margin-bottom: 15px;
-
-    @include media-breakpoint-up(lg) {
-      font-size: 25px;
-      line-height: 30.48px;
-      margin-bottom: 50px;
-    }
-
-    @include media-breakpoint-up(xl) {
-      margin-top: 41px;
     }
   }
 
-  p{
-    font-size: 11px;
+  p {
+    font-size: 0.8rem;
     line-height: 1.2em;
     font-weight: 400;
-    
+
     @include media-breakpoint-up(lg) {
-      font-size: 15px;
       line-height: 18.29px;
     }
   }
 
   nav {
     display: inline-block;
     margin-bottom: 10px;
-
-    @include media-breakpoint-up(xl) {
-      margin-bottom: 30px;
-    }
+    width: 50%;
+    text-align: center;
 
     ul {
       margin: 0;
@@ -71,21 +89,20 @@ footer {
       -moz-columns: 2;
 
       li {
-        padding-right: 20px;
         padding-bottom: 15px;
 
         @include media-breakpoint-up(lg) {
-        padding-bottom: 30px;
+          padding-bottom: 30px;
         }
 
         a {
           position: relative;
           font-size: 14px;
-          font-weight: 400;
+          font-weight: 500;
           text-decoration: none;
           color: $black;
           transition: color 0.4s ease;
-          
+
           @include media-breakpoint-up(lg) {
             font-size: 16px;
           }
@@ -122,30 +139,23 @@ footer {
 
   .logoWrapper {
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     align-items: center;
-
-    @include media-breakpoint-up(md) {
-      margin: 0 -14px;
-    }
-
-    @include media-breakpoint-up(xl) {
-      justify-content: flex-start;
-    }
+    gap: 1rem;
 
     .logo {
       width: 38px;
       height: auto;
       margin: 0 4px;
       flex-grow: 0;
       flex-shrink: 0;
-      
+
       @include media-breakpoint-up(md) {
         width: 50px;
         margin: 0 7px;
       }
 
-      &.ipfs{
+      &.ipfs {
         width: 33px;
 
         @include media-breakpoint-up(md) {