website/app/components/MainFooter.vue

<script setup lang="ts">
import footerLinks from '~/composables/MainFooter'

const { t } = useLocale()
</script>

<template>
  <UFooter>
    <template #top>
      <UFooterColumns
        :links="footerLinks"
        class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12"
      >
        <template #left>
          <div class="flex flex-col gap-4">
            <div class="flex items-center gap-3">
              <AppLogo class="h-10 w-auto" />
              <span class="archivo-black text-2xl text-white tracking-tighter uppercase">
                Spacebar
              </span>
            </div>
            <div class="text-sm text-gray-400 space-y-1">
              <p>Copyright {{ new Date().getFullYear() }}</p>
              <p>{{ t.footer?.siteMaintained }}</p>
              <p>{{ t.footer?.developedBy }}</p>

              <p class="mt-4 max-w-[320px] leading-snug text-gray-500">
                {{ t.footer?.description }}
              </p>
            </div>
          </div>
        </template>
      </UFooterColumns>
    </template>

    <template #left>
      <span class="text-sm text-gray-500">
        © {{ new Date().getFullYear() }} {{ t.footer?.copyright }}
      </span>
    </template>

    <template #right>
      <div class="flex gap-2">
        <UButton
          icon="i-simple-icons-patreon"
          color="neutral"
          variant="ghost"
          to="https://www.patreon.com/splatfestival"
          target="_blank"
          aria-label="Patreon"
        />
        <UButton
          icon="i-simple-icons-discord"
          color="neutral"
          variant="ghost"
          to="https://discord.gg/grMSxZf"
          target="_blank"
          aria-label="Discord"
        />
        <UButton
          icon="i-simple-icons-gitea"
          color="neutral"
          variant="ghost"
          to="https://git.spbr.net/spacebar"
          target="_blank"
          aria-label="Forgejo"
        />
      </div>
    </template>
  </UFooter>
</template>

<style scoped>
.archivo-black {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}
</style>