#3948 Footer redesign

components/TheFooter.vue

@@ -1,15 +1,152 @@
 <template>
-  <div>
-    <div class="container">new footer</div>
-  </div>
+  <footer
+    class="footer-container is-flex is-align-items-center is-justify-content-space-around">
+    <div class="footer-container-subs">
+      <span class="footer-container-heading">{{ $t('footer.subscribe') }}</span>
+      <div class="is-flex is-align-items-center footer-container-subs-items">
+        <!-- <b-input
+          v-model="subscriptionEmail"
+          class="footer-container-subs-input"
+          placeholder="Your Email Address"
+          expanded />
+        <b-button
+          type="is-primary"
+          class="footer-container-subs-btn"
+          @click="$emit('click')">
+          <slot> {{ $t('footer.subscribeLabel') }} </slot>
+        </b-button> -->
+        <iframe
+          height="94"
+          src="https://kodadot.substack.com/embed"
+          frameborder="0"
+          scrolling="no"></iframe>
+      </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 is-flex">
+          <li
+            v-for="item in menu"
+            :key="item.url"
+            class="footer-container-info-list-item">
+            <a
+              v-if="item.external"
+              :href="item.url"
+              target="_blank"
+              rel="noopener noreferrer">
+              {{ item.name }}
+            </a>
+            <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">
+          <a
+            :href="item.url"
+            target="_blank"
+            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>
+  </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 {
+  private subscriptionEmail = ''
+  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',
+    },
+  ]
 }
-</style>
+</script>

locales/en.json

@@ -1011,5 +1011,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

@@ -1,72 +1,72 @@
-@import "initial-variables";
-@import "~bulma/sass/utilities/_all";
-@import "derived-variables";
+@import 'initial-variables';
+@import '~bulma/sass/utilities/_all';
+@import 'derived-variables';
 
 // Setup $colors to use as bulma classes (e.g. 'is-twitter')
 $colors: mergeColorMaps(
   (
-    "white": (
+    'white': (
       $white,
       $black,
     ),
-    "black": (
+    'black': (
       $black,
       $white,
     ),
-    "light": (
+    'light': (
       $light,
       $light-invert,
     ),
-    "dark": (
+    'dark': (
       $dark,
       $dark-invert,
     ),
-    "primary": (
+    'primary': (
       $primary,
       $primary-invert,
       $primary-light,
       $primary-dark,
     ),
-    "link": (
+    'link': (
       $link,
       $link-invert,
       $link-light,
       $link-dark,
     ),
-    "info": (
+    'info': (
       $info,
       $info-invert,
       $info-light,
       $info-dark,
     ),
-    "success": (
+    'success': (
       $success,
       $success-invert,
       $success-light,
       $success-dark,
     ),
-    "warning": (
+    'warning': (
       $warning,
       $warning-invert,
       $warning-light,
       $warning-dark,
     ),
-    "danger": (
+    'danger': (
       $danger,
       $danger-invert,
       $danger-light,
       $danger-dark,
     ),
-    "grey": (
+    'grey': (
       $grey-darker,
       $white,
     ),
-    "orange": (
+    'orange': (
       $orange,
       $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

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