#3948 Footer redesign

components/TheFooter.vue

@@ -1,15 +1,154 @@
 <template>
-  <div>
-    <div class="container">new footer</div>
-  </div>
+  <footer class="footer-container section">
+    <div
+      class="container is-flex is-align-items-start is-justify-content-space-between">
+      <div class="footer-container-subs is-flex is-flex-direction-column">
+        <span class="footer-container-heading">{{
+          $t('footer.subscribe')
+        }}</span>
+        <div class="is-flex is-align-items-center footer-container-subs-items">
+          <div id="custom-substack-embed"></div>
+
+          <script>
+            window.CustomSubstackWidget = {
+              substackUrl: 'kodadot.substack.com',
+              theme: 'custom',
+              colors: {
+                primary: '#FF7AC3',
+                input: '#000000',
+                email: '#FFFFFF',
+                text: '#000000',
+              },
+            }
+          </script>
+          <script src="https://substackapi.com/widget.js" async></script>
+        </div>
+      </div>
+      <div class="footer-container-info is-flex is-flex-direction-column">
+        <span class="footer-container-heading">KodaDot</span>
+        <div>
+          <ul class="footer-container-info-list">
+            <li
+              v-for="item in menu"
+              :key="item.url"
+              class="footer-container-info-list-item">
+              <div v-if="item.external" class="is-flex is-align-items-center">
+                <a :href="item.url" target="_blank" rel="noopener noreferrer">
+                  {{ item.name }}
+                </a>
+                <b-icon icon="external-link-alt" class="ml-1" size="is-small">
+                </b-icon>
+              </div>
+              <nuxt-link v-else :to="item.url">
+                {{ item.name }}
+              </nuxt-link>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="footer-container-socials is-flex is-flex-direction-column">
+        <span class="footer-container-heading">{{ $t('footer.join') }}</span>
+
+        <ul class="footer-container-socials-list is-flex">
+          <li
+            v-for="item in socials"
+            :key="item.url"
+            class="footer-container-socials-list-item is-flex is-align-items-center is-justify-content-center mr-2"
+            @click="goToSocials(item.url)">
+            <a class="is-flex" rel="noopener noreferrer" aria-label="Discord">
+              <b-icon
+                pack="fab"
+                :icon="item.icon"
+                size="is-small"
+                :type="$colorMode.value === 'dark' ? 'is-white' : 'is-black'" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </footer>
 </template>
 
-<style lang="scss" scoped>
-// sample
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid black;
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { TranslateResult } from 'vue-i18n/types'
+
+interface Menu {
+  name: TranslateResult
+  url: string
+  external?: boolean
+}
+@Component({})
+export default class Footer extends Vue {
+  public menu: Menu[] = [
+    {
+      name: this.$t('about'),
+      url: '/about',
+    },
+    {
+      name: this.$t('faq.page'),
+      url: '/rmrk/faq',
+    },
+    {
+      name: this.$t('grants'),
+      url: 'https://form.kodadot.xyz/grant',
+      external: true,
+    },
+    {
+      name: this.$t('documentation'),
+      url: 'https://docs.kodadot.xyz/',
+      external: true,
+    },
+    {
+      name: this.$t('contribute'),
+      url: '/contribute',
+    },
+    {
+      name: this.$t('careers'),
+      url: '/jobs',
+    },
+    {
+      name: this.$t('ambassador program'),
+      url: 'https://docs.kodadot.xyz/ambassador-program/ambassador-intro.html#the-opportunity',
+      external: true,
+    },
+    {
+      name: this.$t('press kit'),
+      url: 'https://github.com/kodadot/kodadot-presskit/tree/main/v3',
+      external: true,
+    },
+  ]
+
+  public socials = [
+    {
+      name: 'Discord',
+      url: 'https://discord.gg/u6ymnbz4PR',
+      icon: 'discord',
+    },
+    {
+      name: 'Twitter',
+      url: 'https://twitter.com/KodaDot',
+      icon: 'twitter',
+    },
+    {
+      name: 'Instagram',
+      url: 'https://instagram.com/kodadot.xyz',
+      icon: 'instagram',
+    },
+    {
+      name: 'Youtube',
+      url: 'https://www.youtube.com/channel/UCEULduld5NrqOL49k1KVjoA/',
+      icon: 'youtube',
+    },
+    {
+      name: 'Medium',
+      url: 'https://medium.com/kodadot',
+      icon: 'medium',
+    },
+  ]
+
+  public goToSocials(url): void {
+    window.open(url, '_blank')
+  }
 }
-</style>
+</script>

locales/en.json

@@ -1013,5 +1013,10 @@
   "toast": {
     "urlCopy": "URL copied to clipboard",
     "paymentLinkCopy": "Payment link copied to clipboard"
+  },
+  "footer": {
+    "subscribe": "Get The Latest KodaDot Updates",
+    "join": "Join Our Community",
+    "subscribeLabel": "Subscribe"
   }
 }

styles/abstracts/_variables.scss

@@ -2,7 +2,7 @@
 @import "~bulma/sass/utilities/_all";
 @import "derived-variables";
 
-// Setup $colors to use as bulma classes (e.g. 'is-twitter')
+// Setup $colors to use as bulma classes (e.g. "is-twitter")
 $colors: mergeColorMaps(
   (
     "white": (
@@ -66,7 +66,7 @@ $colors: mergeColorMaps(
       $orange-invert,
       $orange-light,
       $orange-dark,
-    )
+    ),
   ),
   $custom-colors
 );
@@ -120,7 +120,7 @@ $tabs-boxed-link-focus-active-background-color: $primary;
 // $tabs-boxed-link-focus-border-color: lime;
 // $tabs-boxed-link-focus-active-border-bottom-color: lime;
 // $tabs-items-focused-outline: lime;
-$tabs-border-bottom-color: #7D7A7A;
+$tabs-border-bottom-color: #7d7a7a;
 $tabs-link-active-border-bottom-color: $primary;
 $tabs-link-active-color: $primary;
 $tabs-link-hover-color: lightpink;
@@ -153,9 +153,9 @@ $lightpink: lightpink;
 
 $blacklight: #0909098c;
 $input-color: #181818;
-$select-color: #E5E5E5;
-$placeholder-color: #CCCCCC;
-$search-background-color: #1A1718;
+$select-color: #e5e5e5;
+$placeholder-color: #cccccc;
+$search-background-color: #1a1718;
 $select-border-color: #7d7d7d;
 
 $frosted-glass-background: rgba(12, 12, 12, 0.7);
@@ -175,3 +175,8 @@ $k-red: #ff5757;
 $k-grey: #999999;
 $k-blue: #6188e7;
 $shade: #cccccc;
+
+$dark-accent: #1a1718;
+
+$primary-shadow: 4px 4px $black;
+$primary-shadow-dark: 4px 4px $white;

styles/components/_carousel.scss

@@ -189,7 +189,7 @@
 .dark-mode {
   .carousel-agnostic {
     .carousel-item {
-      background-color: #1a1718;
+      background-color: $dark-accent;
       border: 1px solid white;
 
       &:hover {