Dominik Milacher
66039a1306
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 2m22s
67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<template>
|
|
<section class="w-full">
|
|
<!-- ❶ two-column card ----------------------------->
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<!-- ◀ left half : image carousel -->
|
|
<AppThumbnailCarousel :images="extract(apartment.images)" class="basis-1/3"></AppThumbnailCarousel>
|
|
|
|
<!-- ▶ right half : text (top) & icons (bottom) -->
|
|
<div class="basis-2/3 flex flex-col h-full p-4 gap-4">
|
|
<!-- title + intro copy -->
|
|
<div class="flex-1 flex flex-col gap-4">
|
|
<!-- title -->
|
|
<h2 class="text-2xl font-bold">
|
|
{{ rt(apartment.title) }}
|
|
</h2>
|
|
|
|
<!-- description (optional) -->
|
|
<p
|
|
v-if="true"
|
|
class="text-lg pb-4">
|
|
{{
|
|
rt(apartment.subtitle)
|
|
}}
|
|
</p>
|
|
|
|
<!-- anything the parent puts in here -->
|
|
<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()
|
|
|
|
function extract(o) {
|
|
return o.map(i => rt(i))
|
|
}
|
|
</script> |