add footer

Author: CKGrafico

assets/images/logo_landscape.png

@@ -0,0 +1,96 @@
+<template>
+  <footer class="relative bg-primary-500 pt-8 pb-6 mt-20">
+    <div
+      class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
+      style="height: 80px"
+    >
+      <svg
+        class="absolute bottom-0 overflow-hidden"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="none"
+        version="1.1"
+        viewBox="0 0 2560 100"
+        x="0"
+        y="0"
+      >
+        <polygon
+          class="text-primary-500 fill-current"
+          points="2560 0 2560 100 0 100"
+        ></polygon>
+      </svg>
+    </div>
+    <div class="container mx-auto px-4">
+      <div class="flex flex-wrap">
+        <div class="w-full lg:w-6/12 px-4">
+          <h4 class="text-3xl font-semibold text-white">
+            {{ $t('footer.title') }}
+          </h4>
+          <h5 class="text-lg mt-1 mb-2 text-primary-100">
+            {{ $t('footer.subtitle') }}
+          </h5>
+          <div class="mt-6" v-if="items">
+            <a
+              v-for="item in items"
+              :key="item.icon"
+              :class="`bg-white shadow-lg font-normal items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3 inline-block hover:fill-child-white hover:bg-social-${item.icon}`"
+              target="_blank"
+              :href="item.link.url || item.link.cached_url"
+            >
+              <social-icon :icon-name="item.icon" />
+            </a>
+          </div>
+        </div>
+        <div class="w-full lg:w-6/12 pt-3 lg:pt-0 lg:px-4">
+          <div class="flex flex-wrap items-top mb-6">
+            <div class="w-full lg:w-6/12 px-4 ml-auto">
+              <h5 class="text-2xl font-semibold text-white">
+                {{ $t('footer.thanks') }}
+              </h5>
+
+              <a
+                href="https://helpdev.org"
+                alt="Helpdev"
+                target="_blank"
+                rel="nofollow"
+              >
+                <img
+                  class="h-10 w-auto mt-2"
+                  src="@/assets/images/helpdev.png"
+                  alt="Logo Helpdev"
+                />
+              </a>
+
+              <a
+                href="https://www.storyblok.com/"
+                alt="Storyblok"
+                target="_blank"
+                rel="nofollow"
+              >
+                <img
+                  class="h-10 w-auto"
+                  src="@/assets/images/storyblok.png"
+                  alt="Logo Storyblok"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  data(context) {
+    return {
+      items: context.$store.state.social.items
+    };
+  },
+  watch: {
+    $route() {
+      this.items = this.$store.state.social.items;
+    }
+  }
+};
+</script>

assets/images/logo_landscape_white.png

@@ -86,6 +86,44 @@ export function loadMenuFromApi(context) {
     });
 }
 
+export function loadSocialFromApi(context) {
+  if (
+    context.store.state.social.locale === context.i18n.locale &&
+    context.store.state.social.items.length !== 0
+  ) {
+    return Promise.resolve(context.store.state.social.items);
+  }
+
+  return context.app.$storyapi
+    .get(`cdn/stories/`, {
+      starts_with: context.localePath('social'),
+      version: 'published'
+    })
+    .then((response) => {
+      const stories = response.data.stories;
+      const items = stories && stories[0].content.items;
+
+      context.store.commit('social/setSocial', items);
+
+      return items;
+    })
+    .catch((res) => {
+      if (!res.response) {
+        console.error(res);
+        context.error({
+          statusCode: 404,
+          message: 'Failed to receive content form api'
+        });
+      } else {
+        console.error(res.response.data);
+        context.error({
+          statusCode: res.response.status,
+          message: res.response.data
+        });
+      }
+    });
+}
+
 export function loadDonationsFromApi(context) {
   if (
     context.store.state.donations.locale === context.i18n.locale &&
@@ -128,6 +166,7 @@ export function loadDonationsFromApi(context) {
 export function loadPageContent(context, path) {
   return Promise.all([
     loadMenuFromApi(context),
+    loadSocialFromApi(context),
     loadDonationsFromApi(context)
   ]).then(([menu]) => {
     const item = menu.find(

assets/images/logo_portrait.png

@@ -1,5 +1,6 @@
 import * as donationsStore from '../store/donations';
 import * as menuStore from '../store/menu';
+import * as socialStore from '../store/social';
 
 export function registerStore(name, store, storeModule) {
   const module = {
@@ -16,5 +17,6 @@ export default async (context) => {
   const { store } = context;
 
   registerStore('menu', store, menuStore);
+  registerStore('social', store, socialStore);
   registerStore('donations', store, donationsStore);
 };

assets/images/logo_portrait_white.png

@@ -0,0 +1,13 @@
+export const state = () => ({
+  locale: null,
+  items: []
+});
+
+export const mutations = {
+  setLocale(state, locale) {
+    state.locale = locale;
+  },
+  setSocial(state, items) {
+    state.items = items;
+  }
+};