Files
your-gold/components/section/FooterBlock.vue
2025-07-03 11:13:42 +02:00

86 lines
2.4 KiB
Vue

<template>
<div class="border-t border-border pt-[75px]">
<UiContainer class="flex flex-col gap-24">
<div
class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between"
>
<div>
<div
v-for="(item, key) in contact"
:key="key"
class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
>
<h3 v-if="key == 'header'"
class="h4-uppercase-bold-inter"
>
{{ item }}
</h3>
<div v-else
class="transition-all text-inter"
>
{{ item }}
</div>
</div>
<div class="text-red-500">
arina - doadj tu icone i style
</div>
<a
href="/lei_certificate_aurrie.pdf"
target="_blank"
rel="noopener noreferrer"
>{{ $t("Footer.Lei") }}</a>
</div>
<div
v-for="(section, index) in docs"
:key="index"
class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
>
<h3 class="h4-uppercase-bold-inter">
{{ section.translation }}
</h3>
<div v-for="(item, key) in section.data"
:key="key"
>
<div
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
>
<a target="_blank"
:href="`/api/public/document/${item.name}`"
>{{
item.translation
}}</a>
</div>
</div>
</div>
</div>
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
:src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
>
</ClientOnly>
</UiContainer>
</div>
</template>
<script lang="ts" setup>
import type { GenericResponse, Footer } from '~/types'
const menuStore = useMenuStore()
const colorMode = useColorMode()
const { data } = await useMyFetch<GenericResponse<Footer>>(
'/api/public/front/footer',
{},
)
const contact = ref(data.data.contact)
const docs = ref(data.data.docs)
const isDark = computed(() => colorMode.value === 'dark')
</script>