explorer-app/components/Footer.vue

<script setup lang="ts">
const isHovered = ref(false)
</script>

<template>
  <div app-container>
    <div mt-48px>
      <hr
        border-t-2px
        border-white
        opacity-10
        w-full
      >
    </div>
    <div
      p-24px
      pb-8px
      flex
      items-center
    >
      <div
        shrink-0
        flex
        gap-32px
        justify-start
      >
        <NuxtImg
          src="/logo.svg"
          max-w-120px
          sm:w-160px
          cursor-pointer
          @click="navigateTo('/')"
        />
      </div>
      <div
        w-full
        h-fit
        flex
        justify-end
        items-center
        gap-16px
        sm:gap-32px
        mt-0
      >
        <NuxtLink
          to="https://twitter.com/web3privacy"
          target="_blank"
          flex
          items-center
          gap-12px
        >
          <UnoIcon
            i-web-twitter_x
            opacity-50
            text-22px
          />
          <span
            hover:underline
            hidden
            lg:block
            text-16px
          >{{ '@web3privacy' }}</span>
        </NuxtLink>
        <NuxtLink
          to="https://t.me/web3privacynow"
          target="_blank"
          flex
          items-center
          gap-12px
        >
          <UnoIcon
            i-web-telegram1
            opacity-50
            text-24px
          />
          <span
            hover:underline
            hidden
            lg:block
            text-16px
          >{{ 'Telegram' }}</span>
        </NuxtLink>
        <NuxtLink
          to="https://matrix.web3privacy.info/"
          target="_blank"
          flex
          items-center
          gap-12px
        >
          <UnoIcon
            i-web-matrix
            opacity-50
            text-24px
          />
          <span
            hover:underline
            hidden
            lg:block
            text-16px
          >{{ 'Matrix' }}</span>
        </NuxtLink>
        <NuxtLink
          to="https://github.com/web3privacy"
          target="_blank"
          flex
          items-center
          gap-12px
        >
          <UnoIcon
            i-web-github
            opacity-50
            text-24px
          />
          <span
            hover:underline
            hidden
            lg:block
            text-16px
          >{{ 'GitHub' }}</span>
        </NuxtLink>
      </div>
    </div>
    <div
      text="14px sm:16px"
      px-24px
      grid
      grid-cols-2
      sm:grid-cols-3
      gap-16px
      mt-32px
      mb-16px
    >
      <NuxtLink
        to="https://docs.web3privacy.info/manifesto"
        opacity-50
        hover:underline
      >
        {{ 'Manifesto' }}
      </NuxtLink>
      <NuxtLink
        to="https://docs.web3privacy.info/get-involved"
        opacity-50
        hover:underline
      >
        {{ 'How to get involved' }}
      </NuxtLink>
      <NuxtLink
        to="https://github.com/web3privacy/grants"
        opacity-50
        hover:underline
      >
        {{ 'Grants /  Support Us' }}
      </NuxtLink>
      <NuxtLink
        to="https://web3privacy.info/events"
        opacity-50
        hover:underline
      >
        {{ 'Events' }}
      </NuxtLink>
      <NuxtLink
        to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/"
        opacity-50
        hover:underline
      >
        {{ 'Articles' }}
      </NuxtLink>
      <NuxtLink
        to="https://docs.web3privacy.info/events/"
        opacity-50
        hover:underline
      >
        {{ 'Talks' }}
      </NuxtLink>
      <NuxtLink
        to="https://docs.web3privacy.info/projects/privacy-explorer/"
        opacity-50
        hover:underline
      >
        {{ 'Privacy Explorer' }}
      </NuxtLink>
      <NuxtLink
        to="https://github.com/web3privacy/web3privacy"
        opacity-50
        hover:underline
      >
        {{ 'Privacy database' }}
      </NuxtLink>
    </div>
    <hr
      block
      sm:hidden
      border-t-2px
      border-white
      opacity-10
      w-full
    >
    <div
      px-24px
      my-16px
      sm:mt-32px
      flex
      flex-col
      sm:flex-row
      w-full
      items-center
      justify-between
      gap-18px
    >
      <a
        w-full
        opacity-50
        text-14px
        leading-24px
        font-400
      >{{ 'All rights not reserved,  Creative commons 2024 - Web3Privacy z.s.' }}</a>
      <div
        w-full
        sm:w-fit
        sm:justify-end
        items-center
        flex
        flex-row
        gap-6px
      >
        <span
          text-14px
          text-app-text-grey
          whitespace-nowrap
        >{{ 'Developed by' }}</span>
        <NuxtImg
          shrink-0
          :src="isHovered ? '/develit-logo-color.svg' : '/develit-logo-white.svg'"
          duration-300
          bg-no-repeat
          bg-center
          cursor-pointer
          w-full
          max-w-104px
          h-32px
          @mouseover="isHovered = true"
          @mouseleave="isHovered = false"
          @click="navigateTo('https://develit.io/', { external: true })"
        />
      </div>
    </div>
  </div>
</template>