Added links and image

Author: Felix Hennig

src/css/footer.css

@@ -10,6 +10,50 @@ footer.footer {
   margin: 0.5rem 0;
 }
 
+.footer-info {
+  display: flex;
+  gap: 24px;
+}
+
+@media screen and (max-width: 720px) {
+  .footer-info {
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 720px) {
+  .footer-info {
+    flex-direction: row;
+  }
+}
+
+.footer-info-item-large {
+  flex-grow: 3;
+}
+
+.footer-info-item {
+  flex-grow: 1;
+}
+
+.footer-info-item h2 {
+  margin-top: 0;
+}
+
+.footer-link-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-link-list li a {
+  color: var(--footer-font-color);
+}
+
+.footer-link-list li a:hover {
+  text-decoration: none;
+  color: var(--color-brand-primary);
+}
+
 .c-and-socials {
   display: flex;
   gap: 24px;
@@ -52,12 +96,17 @@ footer.footer {
   aspect-ratio: 1;
   height: 36px;
   cursor: pointer;
-  transition: all .3s;
+  transition: all 0.3s;
 }
 
 .social-icon:hover {
   background-color: var(--color-brand-primary);
   color: var(--footer-font-color);
   text-decoration: none;
+}
 
-}
+.footer-seperator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--footer-font-color);
+}

src/img/logo-2-1.png

@@ -1,6 +1,56 @@
 <footer class="footer">
   <div class="container">
     <div class="footer-container">
+      <!-- link columns -->
+      <div class="footer-info">
+        <div class="footer-info-item-large">
+          <img src="{{{uiRootPath}}}/img/logo-2-1.png">
+          <p>
+            your data, your platform
+          </p>
+        </div>
+        <div class="footer-info-item">
+          <h2>Company</h2>
+          <ul class="footer-link-list">
+            <li>
+              <a href="https://stackable.tech/en/about-us">About Us</a>
+            </li>
+            <li>
+              <a href="https://stackable.tech/en/blog">Blog</a>
+            </li>
+            <li>
+              <a href="https://jobs.stackable.de/" target="_blank">Jobs</a>
+            </li>
+          </ul>
+        </div>
+        <div class="footer-info-item">
+          <h2>Support</h2>
+          <ul class="footer-link-list">
+            <li>
+              <a href="https://stackable.tech/en/contact">Contact Us</a>
+            </li>
+            <li>
+              <a href="https://stackable.tech/en/imprint">Imprint</a>
+            </li>
+            <li>
+              <a href="https://stackable.tech/en/data-protection">Data Protection</a>
+            </li>
+          </ul>
+        </div>
+        <div class="footer-info-item">
+          <h2>Get in touch</h2>
+          <ul class="footer-link-list">
+            <li>
+              <a href="mailto:info@stackable.de">info@stackable.de</a>
+            </li>
+            <li>
+              <a href="tel:+4941039263100">+49 4103 926 3100</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="footer-seperator"></div>
+      <!-- social links -->
       <div class="c-and-socials">
         <div>© 2022 Stackable.</div>
         <div class="social-icons-container">