106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<script setup>
|
|
import XIcon from '@/assets/icons/x.svg'
|
|
import FacebookIcon from '@/assets/icons/facebook.svg'
|
|
import InstagramIcon from '@/assets/icons/instagram.svg'
|
|
import {useBrandingStore} from "@/stores/brandingStore.js";
|
|
const brandingStore = useBrandingStore()
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">
|
|
|
|
<div class="centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">Hutopy</div>
|
|
|
|
|
|
<div class="flex flex-row justify-center gap-10">
|
|
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
|
<facebook-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }" ></facebook-icon>
|
|
</a>
|
|
|
|
<a href="https://www.instagram.com/hutopy.inc/">
|
|
<instagram-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></instagram-icon>
|
|
</a>
|
|
|
|
<a href="https://x.com/Hutopyinc/">
|
|
<x-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></x-icon>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex flex-row flex-wrap justify-center gap-4 px-4 " >
|
|
<router-link to="/documents/helpandcontact" :style="{color: brandingStore.colors.onBackground}">
|
|
{{ $t('footer.helpandcontact') }}
|
|
</router-link>
|
|
<router-link to="/documents/faq" :style="{color: brandingStore.colors.onBackground}">
|
|
{{ $t('footer.faq') }}
|
|
</router-link>
|
|
<router-link to="/documents/guideforcreators" :style="{color: brandingStore.colors.onBackground}">
|
|
{{ $t('footer.creatorguide') }}
|
|
</router-link>
|
|
<router-link to="/documents/termsandconditions" :style="{color: brandingStore.colors.onBackground}">
|
|
{{ $t('footer.termsandconditions') }}
|
|
</router-link>
|
|
<router-link to="/documents/contentpolicy" :style="{color: brandingStore.colors.onBackground}">
|
|
{{ $t('footer.contentpolicy') }}
|
|
</router-link>
|
|
<router-link to="/documents/about" :style="{color: brandingStore.colors.onBackground}">
|
|
{{ $t('footer.about') }}
|
|
</router-link>
|
|
<router-link to="/documents/pricing" :style="{color: brandingStore.colors.onBackground}">
|
|
{{ $t('footer.pricing') }}
|
|
</router-link>
|
|
</div>
|
|
|
|
<div class="flex justify-center base-text mb-13" :style="{color: brandingStore.colors.onBackground}">
|
|
Hutopy ©{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.base-text {
|
|
@apply text-gray-600 tracking-widest font-sans text-sm uppercase
|
|
}
|
|
|
|
a {
|
|
@apply base-text
|
|
}
|
|
|
|
a:hover {
|
|
@apply text-gray-400
|
|
}
|
|
|
|
.centered-text {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
letter-spacing: 125px;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-left: 7rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.centered-text {
|
|
letter-spacing: 60px;
|
|
margin-left: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.centered-text {
|
|
letter-spacing: 40px;
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
</style> |