Dominik Milacher
66039a1306
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 2m22s
80 lines
2.9 KiB
Vue
80 lines
2.9 KiB
Vue
<template>
|
|
<footer class="bg-neutral-100 border-t border-neutral-200">
|
|
<AppStripe>
|
|
<!-- 📌 contact block -->
|
|
<div
|
|
class="flex flex-col sm:flex-row sm:items-center sm:justify-between
|
|
gap-4 py-4 border-b border-neutral-300"
|
|
>
|
|
<!-- avatar + copy -->
|
|
<AppHero src="/host.png"
|
|
alt="Ihre Gastgeberin Monika"
|
|
:size="16"
|
|
:title="t('footer.questions')"
|
|
:description="t('footer.prompt')">
|
|
<!-- Contact shortcuts -->
|
|
<div class="mt-2 space-y-1">
|
|
<!-- Phone (phone + WhatsApp icons) -->
|
|
<div class="flex items-center gap-2">
|
|
<!-- Heroicons phone -->
|
|
<UIcon name="i-heroicons-phone" class="w-4 h-4 text-sm text-neutral-600"/>
|
|
<!-- WhatsApp icon (any Iconify set you use) -->
|
|
<UIcon name="i-uil-whatsapp" class="w-4 h-4 text-sm text-neutral-600"/>
|
|
<a :href="`tel:${t('contact.phone').replace(/\s+/g, '')}`" class="hover:underline text-sm text-neutral-600">
|
|
{{ t('contact.phone') }}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- E-mail -->
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-envelope" class="w-4 h-4 text-sm text-neutral-600"/>
|
|
<a :href="`mailto:${t('contact.email')}`" class="hover:underline text-sm text-neutral-600">
|
|
{{ t('contact.email') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</AppHero>
|
|
|
|
<div class="flex flex-col gap-4 ">
|
|
<UButton
|
|
:to="variantPath('contact')"
|
|
size="md"
|
|
color="primary"
|
|
variant="solid"
|
|
trailing-icon="i-heroicons-envelope"
|
|
>
|
|
{{ t('button.contact') }}
|
|
</UButton>
|
|
|
|
<UButton
|
|
:to="variantPath('book')"
|
|
size="md"
|
|
color="primary"
|
|
variant="solid"
|
|
trailing-icon="i-heroicons-globe-alt"
|
|
>
|
|
{{ t('button.book') }}
|
|
</UButton>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- © line -->
|
|
<div class="pt-4 text-center text-sm text-neutral-600 flex flex-col py-4">
|
|
<span>© {{ year }} Panoramablick Saalbach</span>
|
|
<div>
|
|
<NuxtLink :to="variantPath('legal', 'imprint')" :external="true" class="underline ml-2">Impressum</NuxtLink>
|
|
<NuxtLink :to="variantPath('legal', 'privacy')" :external="true" class="underline ml-2">Datenschutz</NuxtLink>
|
|
<NuxtLink :to="variantPath('legal', 'accessability')" :external="true" class="underline ml-2">Barrierefreiheit</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</AppStripe>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const {t, tm, rt} = useVariantData()
|
|
const year = new Date().getFullYear()
|
|
const { variantPath } = useVariantPath()
|
|
</script>
|