%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/forge/takeaseat.eco-n-tech.co.uk/components/layout/
Upload File :
Create Path :
Current File : //home/forge/takeaseat.eco-n-tech.co.uk/components/layout/Footer.vue

<template>
  <footer class="bg-black py-6 px-3 md:px-8 md:py-8 mt-8">
    <div class="grid grid-cols-1 sm:grid-cols-2 mb-10">
      <div class="mb-6 flex items-center justify-center sm:mb-0 sm:block">
        <NuxtLink to="/">
          <img class="h-8 max-w-full" 
            src="~assets/images/logo-white-text.svg" 
            alt="Take a seat" />
        </NuxtLink>
      </div>
      <div class="flex items-center justify-center sm:justify-end">
        <a class="mx-3 sm:ml-5 sm:mr-0" 
          href="https://www.facebook.com/takeaseat.co.uk/"
          target="_blank">
          <img src="~assets/images/icons/icon-facebook.svg"  alt="Facebook" />
        </a>
        <a class="mx-3 sm:ml-5 sm:mr-0" 
          href="https://www.instagram.com/takeaseat_therapy/"
          target="_blank">
          <img src="~assets/images/icons/icon-instagram.svg"  alt="Instagram" />
        </a>
        <a class="mx-3 sm:ml-5 sm:mr-0" 
          href="https://twitter.com/TakeASeat__"
          target="_blank">
          <img src="~assets/images/icons/icon-twitter.svg"  alt="Twitter" />
        </a>
      </div>
    </div>
    <div class="grid lg:grid-cols-5 gap-4">
      <div class="lg:col-span-2 flex items-center justify-center lg:block">
        <p class="text-white text-xs">Copyright &copy; 2021 by Take A Seat</p>
      </div>
      <div class="lg:col-span-3 flex flex-col sm:flex-row items-center justify-center lg:justify-end">
        <a class="footer-link py-2 md:py-0" href="mailto:support@takeaseat.co.uk">Email support@takeaseat.co.uk</a>
        <NuxtLink 
          v-for="(link, key) in links"
          v-bind:key="key"
          class="footer-link py-2 md:py-0 md:ml-4"
          :to="link.url">{{ link.name }}</NuxtLink>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      links: [
        {
          name: 'Privacy',
          url: '/privacy-policy'
        },
        {
          name: 'Terms & Conditions',
          url: '/terms-conditions'
        },
        {
          name: 'Contact Us',
          url: '/contact-us'
        }
      ]
    }
  }
}
</script>

<style lang="postcss" scoped>
  .footer-link {
    @apply text-white uppercase text-xs;
  }
</style>

Zerion Mini Shell 1.0