61 lines
1.7 KiB
Vue
61 lines
1.7 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="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">
|
|
{{ apartment.title }}
|
|
</h2>
|
|
|
|
<!-- description (optional) -->
|
|
<p
|
|
v-if="true"
|
|
class="text-lg pb-4">
|
|
{{
|
|
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="p('contact')"
|
|
size="md"
|
|
color="primary"
|
|
variant="outline"
|
|
trailing-icon="i-heroicons-envelope"
|
|
>
|
|
{{ c.button.contact }}
|
|
</UButton>
|
|
|
|
<UButton
|
|
:to="p('book')"
|
|
size="md"
|
|
color="primary"
|
|
variant="solid"
|
|
trailing-icon="i-heroicons-calendar-days"
|
|
>
|
|
{{ c.button.book }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const {p, c} = useContent()
|
|
defineProps<{ apartment: Apartment }>()
|
|
</script> |