websites/apps/panoramablick/pages/[[variant]]/index.vue

<template>
  <div class="relative w-full">
    <div class="absolute inset-0 z-0">
        <UCarousel
            v-slot="{ item }"
            :items="images"
            :ui="{item: 'basis-full h-full ps-0', container: 'flex items-stretch h-full'}"
            :autoplay="{ delay: 5000 }"
            :loop="true"
            :fade="true"
            :duration="75"
            class="w-full h-full custom-carousel">
          <div class="w-full h-full flex items-center justify-center">
            <img :src="item" class="w-full h-full object-cover" alt="Demo Picture"/>
          </div>
        </UCarousel>
    </div>

    <div class="absolute inset-0 z-5 bg-black/60"/>

    <div class="relative z-10">
      <AppStripe class="text-white py-4 sm:py-8 lg:py-16">
        <div class="flex flex-col md:flex-row py-6 gap-4 sm:gap-8 lg:gap-16">
          <div class="flex flex-col">
            <div>
            <h1 class="text-5xl max-w-4xl font-bold">{{ t('landing.welcome.title') }}</h1>
            <p class="mt-4 text-lg">
              {{
                t('landing.welcome.description')
              }}
            </p>
            </div>
            <div class="mt-8 flex gap-4">
              <UButton :to="variantPath('apartments')" color="primary" variant="solid" size="xl"
                       trailing-icon="i-heroicons-arrow-right">{{ t('button.apartments') }}
              </UButton>
              <UButton :to="variantPath('book')" color="secondary" variant="solid" size="xl"
                       trailing-icon="i-heroicons-globe-alt">
                {{ t('button.book') }}
              </UButton>
              <UButton :to="variantPath('contact')" color="secondary" variant="solid" size="xl"
                       trailing-icon="i-heroicons-envelope">
                {{ t('button.contact') }}
              </UButton>
            </div>
          </div>
          <div v-if="t('landing.welcome.joker') === 'true'" class="flex items-center justify-center p-8">
            <a href="https://www.saalbach.com/de/sommer/joker-card">
            <NuxtImg
                src="/joker-card.jpeg"
                alt="Joker Card"
                class="w-30 md:w-50 transform rotate-15"
                style="border-radius: .5rem"
            />
            </a>
          </div>
        </div>
      </AppStripe>
    </div>
  </div>

  <AppFlatSection>
    <div class="flex flex-col md:flex-row items-center gap-4">
      <!-- Left: Image Group -->
      <div class="flex flex-row gap-4 justify-center relative">
        <img :src="t('landing.highlight.image-left')" alt="Image 1" class="w-40 h-60 object-cover"/>
        <img :src="t('landing.highlight.image-right')" class="w-40 h-60 object-cover mt-6" />
      </div>

      <!-- Right: Text Content -->
      <AppTitleText i18n-key="landing.highlight">
        <UButton :external="true" :to="variantPath('contact', 'hosts')" color="primary" variant="solid" size="xl"
                 trailing-icon="i-heroicons-arrow-right">
          {{
            t('button.hosts')
          }}
        </UButton>
      </AppTitleText>
    </div>
  </AppFlatSection>

  <AppCardSection>
    <div class="flex flex-col md:flex-row items-center gap-4">

      <!-- Left: Text (40%) -->
      <div class="basis-2/5 pr">
        <AppTitleText i18n-key="landing.location">
          <UButton to="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7" color="primary" variant="solid" size="xl"
                   trailing-icon="i-heroicons-arrow-right">
            {{ t('button.map') }}
          </UButton>
        </AppTitleText>
      </div>

      <!-- Right: Image (60%) -->
      <a
          href="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7"
          class="basis-3/5 flex justify-center overflow-hidden group"
          aria-label="Google Maps öffnen"
      >
        <img
            :src="t('landing.location.image')"
            alt="Vorschaubild der Lage in Google Maps"
            class="w-full h-80 object-cover transition-transform duration-300 ease-out group-hover:scale-110"
        />
      </a>

    </div>
  </AppCardSection>

  <AppFlatSection>
    <AppTitleText i18n-key="landing.apartments">
      <div class="flex flex-wrap gap-4 justify-center">

        <a v-for="apartment in tm('apartments.list')" :href="variantPath('apartments', rt(apartment.id))"
           class="relative group block w-60 h-80 overflow-hidden">
          <img :src="rt(apartment.thumbnail)" alt="Image 1"
               class="w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"/>
          <div class="absolute inset-0 bg-black/50"></div>
          <div
              class="absolute inset-0 flex items-center justify-center text-white text-lg font-semibold drop-shadow-md">
            <div class="text-center">
              <h2>{{ rt(apartment.title) }}</h2>
              <ul>
                <li v-for="highlight in apartment.highlights" class="text-sm">{{ rt(highlight) }}</li>
              </ul>
            </div>
          </div>
        </a>
      </div>
    </AppTitleText>
  </AppFlatSection>

  <AppCardSection>
    <AppTitleText i18n-key="landing.features" class="pr">
      <AppFeaturesGrid :features="tm('features')"/>
    </AppTitleText>
  </AppCardSection>
</template>

<style scoped>
/* TODO this is somewhat hacky, but currently no other way to style carousel inner wrapper */
:deep(.custom-carousel > .overflow-hidden) {
  height: 100%;
}
</style>

<script setup lang="ts">
const images = [
  '/house.webp',
  '/panorama.webp'
]

const {t, tm, rt} = useVariantData()
const {variantPath} = useVariantPath()
</script>