Dominik Milacher 87c244f0e3
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 2m15s
Make design responsive
2025-06-15 14:59:48 +02:00

59 lines
1.7 KiB
Vue

<template>
<section class="w-full">
<!-- two-column card ----------------------------->
<div class="flex flex-col md:flex-row">
<!-- left half : image carousel -->
<AppThumbnailCarousel class="basis-1/3"></AppThumbnailCarousel>
<!-- right half : text (top) & icons (bottom) -->
<div class="basis-2/3 flex flex-col h-full p-6">
<!-- title + intro copy -->
<div class="flex flex-col gap-4">
<div>
<h2 class="text-3xl font-bold text-neutral-900 mb-2">
{{ rt(apartment.title) }}
</h2>
<p class="text-neutral-700">
{{
rt(apartment.subtitle)
}}
</p>
</div>
<AppFeaturesGrid :features="apartment.features"/>
</div>
<div class="flex-1"></div>
<div class="flex justify-end">
<div class="flex flex-row gap-4 ">
<UButton
:to="variantPath('contact')"
size="md"
color="primary"
variant="outline"
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>
</div>
</div>
</section>
</template>
<script setup lang="ts">
const {t, tm, rt} = useVariantData()
defineProps<{ apartment: Apartment }>()
const { variantPath } = useVariantPath()
</script>