feat: site footer

Author: svvimming

assets/scss/theme/theme.scss

@@ -17,6 +17,15 @@ code {
   font-family: $fontSuisseIntlMono;
 }
 
+ a {
+  @include b2;
+  color: $chardonnay;
+  @include transitionDefault;
+  &:hover {
+    color: $alto;
+  }
+}
+
 ///////////////////////////////////////////////////////////////////// Components
 // -----------------------------------------------------------------------------
 /*

components/blocks/block-builder.vue

@@ -128,6 +128,7 @@ export default {
   width: 100%;
 }
 .sectional {
+  position: relative;
   padding: 5rem 0;
 }
 </style>

components/data-programs-logo.vue

@@ -1,18 +1,131 @@
 <template>
   <footer id="site-footer">
 
-    This is a footer
+    <div class="panel-top">
+      <div class="grid-bottom-noBottom-noGutter">
+
+        <div class="col-2">
+          <nuxt-link to="/" class="site-footer-logo">
+            <SiteFooterLogo />
+          </nuxt-link>
+        </div>
+
+        <div class="col-4" data-push-left="off-6">
+          <div class="authors">
+            <div
+              class="text"
+              v-html="authors.text">
+            </div>
+            <div class="logos">
+              <ZeroButton to="https://dataprograms.org/" tag="a">
+                <DataProgramsLogo />
+              </ZeroButton>
+              <ZeroButton to="https://protocol.ai/" tag="a">
+                <ProtocolLabsLogo />
+              </ZeroButton>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="panel-bottom">
+      <div class="grid-bottom-noBottom-noGutter">
+
+        <div class="col-3">
+          <!-- dummy div -->
+        </div>
+
+        <div class="col-4">
+          <div class="legal">
+            <ZeroButton
+              v-for="link in legal.links"
+              :key="link.text"
+              :to="link.to"
+              :tag="link.tag"
+              class="footer-button">
+              {{ link.text }}
+            </ZeroButton>
+          </div>
+        </div>
+
+      </div>
+    </div>
 
   </footer>
 </template>
 
+<script setup>
+// ===================================================================== Imports
+import GeneralSiteData from '@/content/core/general.json'
+
+// ==================================================================== Computed
+const authors = computed(() => {
+  return GeneralSiteData.footer.authors
+})
+
+const legal = computed(() => {
+  return GeneralSiteData.footer.legal
+})
+
+</script>
+
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
 #site-footer {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 5rem;
+  padding: toRem(34) 0;
+}
+
+.site-footer-logo {
+  :deep(svg) {
+    @include transitionDefault;
+    &:hover {
+      transform: scale(1.08);
+    }
+  }
+}
+
+.authors {
+  .text {
+    @include formFieldText;
+    margin-bottom: toRem(28);
+  }
+  .logos {
+    display: flex;
+    :deep(.button) {
+      @include transitionDefault;
+      &:not(:last-child) {
+        margin-right: toRem(43);
+      }
+      &:hover {
+        transform: scale(1.08);
+      }
+    }
+  }
+}
+
+.legal {
+  transform: translateY(-100%);
+}
+
+.footer-button {
+  position: relative;
+  padding: toRem(6) 0;
+  @include footerButton;
+  color: $sageGreen;
+  @include transitionDefault;
+  border-bottom: solid 1px rgba($sageGreen, 0);
+  &:not(:last-child) {
+    margin-right: toRem(47);
+  }
+  &:hover {
+    border-bottom: solid 1px rgba($sageGreen, 1);
+  }
 }
 </style>

components/icon/site-footer-logo.vue renamed to components/site-footer-logo.vue

@@ -55,5 +55,29 @@
         "target": "_blank"
       }
     ]
+  },
+  "footer": {
+    "authors": {
+      "text": "Singularity is a project developed by the <a href='https://dataprograms.org/' target='_blank'>Data Programs Working Group</a> with Protocol Labs"
+    },
+    "legal": {
+      "links": [
+        {
+          "text": "Terms of Use",
+          "tag": "a",
+          "to": "https://protocol.ai/legal/#terms-of-service"
+        },
+        {
+          "text": "Privacy Policy",
+          "tag": "a",
+          "to": "https://protocol.ai/legal/#privacy-policy"
+        },
+        {
+          "text": "DMCA Policy",
+          "tag": "a",
+          "to": "https://ipfs.tech/legal"
+        }
+      ]
+    }
   }
 }

components/site-footer.vue

@@ -328,6 +328,9 @@
         "img": "/images/summit-graphic.svg",
         "heading": "Roadmap"
       }
+    },
+    {
+      "id": "section-subfooter"
     }
   ]
 }