webapps/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/index.vue

<template>
  <div>
  <div class="relative w-full">
    <div class="absolute inset-0 z-0">
        <UCarousel
            v-slot="{ item }"
            :items="l.welcome.images"
            :ui="{item: 'basis-full h-full ps-0', container: 'flex items-stretch h-full'}"
            :autoplay="{ delay: 5000 }"
            :loop="true"
            :fade="true"
            :duration="150"
            class="w-full h-full custom-carousel">
          <div class="w-full h-full flex items-center justify-center">
            <NuxtImg :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">{{ l.welcome.title }}</h1>
            <p class="mt-4 text-lg">
              {{
                l.welcome.description
              }}
            </p>
            </div>
            <div class="mt-8 flex gap-4 flex-wrap">
              <UButton :to="p('apartments')" color="primary" variant="solid" size="xl"
                       trailing-icon="i-heroicons-arrow-right">{{ g.button.apartments }}
              </UButton>
              <UButton :to="p('book')" color="secondary" variant="solid" size="xl"
                       trailing-icon="i-heroicons-calendar-days">
                {{ g.button.book }}
              </UButton>
              <UButton :to="p('contact')" color="secondary" variant="solid" size="xl"
                       trailing-icon="i-heroicons-envelope">
                {{ g.button.contact }}
              </UButton>
            </div>
          </div>
          <div v-if="l.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.webp"
                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">
        <NuxtImg :src="l.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
        <NuxtImg :src="l.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
      </div>

      <!-- Right: Text Content -->
      <AppTitleText :title="l.highlight.title" :text="l.highlight.description">
        <UButton :to="p('contact#hosts')" color="primary" variant="solid" size="xl"
                 trailing-icon="i-heroicons-arrow-right">
          {{
            g.button.hosts
          }}
        </UButton>
      </AppTitleText>
    </div>
  </AppFlatSection>

  <AppCardSection>
    <div class="flex flex-col md:flex-row w-full items-stretch overflow-hidden">
      <!-- Left: 40% width on desktop, full on mobile -->
      <div class="w-full md:w-[40%] flex flex-col justify-center pr">
        <AppTitleText :title="l.location.title" :text="l.location.description">
          <UButton to="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7" color="primary" variant="solid" size="xl"
                   trailing-icon="i-heroicons-arrow-right">
            {{ g.button.map }}
          </UButton>
        </AppTitleText>
      </div>
      <!-- Right: 60% width on desktop, full on mobile -->
      <a
          href="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7"
          class="w-full md:w-[60%] overflow-hidden relative group"
          aria-label="Google Maps öffnen"
      >
        <NuxtImg
            :src="l.location.image"
            alt="Vorschaubild der Lage in Google Maps"
            class="w-full h-64 md:h-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
        />
      </a>
    </div>


  </AppCardSection>

  <AppFlatSection>
    <AppTitleText :title="l.apartments.title" :text="l.apartments.description">
      <div class="flex flex-wrap gap-4 justify-center">
        <NuxtLink v-for="(thumbnail, index) in l.apartments.thumbnails" :to="p('apartments#' + g.apartments[index].id)"
           class="relative group block w-60 h-80 overflow-hidden">
          <NuxtImg :src="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">
              <ul>
                <li class="text-sm">{{ g.apartments[index].title }}</li>
                <li class="text-sm">{{ g.apartments[index].capacity.text }}</li>
                <li class="text-sm">{{ g.apartments[index].price.text }}</li>
              </ul>
            </div>
          </div>
        </NuxtLink>
      </div>
    </AppTitleText>
  </AppFlatSection>

  <AppCardSection>
    <div class="flex-1 pr">
      <h2 class="text-2xl font-bold mb-4">
        {{ l.features.title }}
      </h2>

      <p class="text-lg pb-4">
        {{ l.features.description1 }}
        <UButton to="https://www.bruendl.at/" variant="outline" trailing-icon="i-heroicons-arrow-right">{{
            l.features.description2
          }}
        </UButton>
        {{ l.features.description3 }}
      </p>

      <AppHighlights/>
    </div>
  </AppCardSection>
  </div>
</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">
useSeoLinking()
const {g, l, p} = useContentInjected()

useSeoMeta({
  title: () => l.value.meta.title,
  description: () => l.value.meta.description,
})
</script>