﻿<template>
  <router-link to="/">
  <div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto">
    <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy">
  </div>
  </router-link>

  <div class="flex flex-row justify-center space-x-10 py-10">
    <a href="https://www.facebook.com/profile.php?id=61556819217561">
      <v-icon size="40px" class="text-fuchsia-900">mdi-facebook</v-icon>
    </a>

    <a href="https://www.instagram.com/hutopy.inc/">
      <v-icon size="40px"  class="text-fuchsia-900">mdi-instagram</v-icon>
    </a>

    <a href="https://x.com/Hutopyinc/">     
      <img src="/images/hutopymedia/icons/x.svg" width="34px" height="34px" class="mt-1 filter-fushia ">
    </a>
  </div>


  <div class="flex flex-row flex-wrap justify-center space-x-2 py-2 pb-6">
    <router-link to="/helpandcontact">
      <v-btn variant="plain"> Aide & Contact</v-btn>
    </router-link>
    <router-link to="/faq">
      <v-btn variant="plain"> FAQ</v-btn>
    </router-link>
    <router-link to="/guideforcreators">
      <v-btn variant="plain"> Guide pour les créateurs</v-btn>
    </router-link>
    <router-link to="/termsandconditions">
      <v-btn variant="plain">Termes et Conditions </v-btn>
    </router-link>
    <router-link to="/contentpolicy">
      <v-btn variant="plain"> Politique de Contenu </v-btn>
    </router-link>
    <router-link to="/about">
      <v-btn variant="plain"> À Propos</v-btn>
    </router-link>
    <router-link to="/pricing">
      <v-btn variant="plain"> Frais</v-btn>
    </router-link>
  </div>


</template>

<script setup lang="ts">
</script>

<style>
.filter-fushia{
  filter: invert(14%) sepia(60%) saturate(4103%) hue-rotate(285deg) brightness(84%) contrast(93%);
}
</style>

