websites/apps/panoramablick/pages/index.vue

<template>
  <section class="relative w-full">
    <div class="relative w-full">
      <UCarousel
          v-slot="{ item }"
          :items="images"
          :ui="{item: 'basis-full h-full ps-0', container: 'flex items-stretch h-150 sm:h-75 md:h-100 lg:h-150'}"
          :autoplay="{ delay: 5000 }"
          :loop="true"
          :fade="true"
          :duration="75"
          class="w-full h-full">
        <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 class="absolute inset-0 z-10 bg-black/60">
        <div class="w-full h-full flex justify-center items-center">
          <AppStripe class="text-white">
            <div class="max-w-2xl">
              <h1 class="text-5xl max-w-4xl font-bold">{{ t('landing.welcome.title') }}</h1>
              <p class="mt-4 text-lg text-gray-200">
                {{
                  t('landing.welcome.description')
                }}
              </p>
            </div>

            <div class="mt-8 flex gap-4">
              <UButton to="/apartments" color="primary" variant="solid" size="xl"
                       trailing-icon="i-heroicons-arrow-right">{{ t('button.apartments') }}
              </UButton>
              <UButton to="/book" color="secondary" variant="solid" size="xl" trailing-icon="i-heroicons-globe-alt">
                {{ t('button.book') }}
              </UButton>
              <UButton to="/contact" color="secondary" variant="solid" size="xl" trailing-icon="i-heroicons-envelope">
                {{ t('button.contact') }}
              </UButton>
            </div>
          </AppStripe>
        </div>
      </div>
    </div>
  </section>

  <AppFlatSection>
    <div class="flex gap-12 items-center">
      <!-- Left: Image Group -->
      <div class="flex flex-row gap-4 justify-center relative">
        <img src="/ap.webp" alt="Image 1" class="w-40 h-60 object-cover rounded-lg"/>
        <img src="/sauna.webp" alt="Image 2" class="w-40 h-60 object-cover rounded-lg translate-y-6"/>
      </div>

      <!-- Right: Text Content -->
      <AppTitleText i18n-key="landing.highlight">
        <UButton :external="true" to="/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 gap-12 items-center">

      <!-- 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"
          target="_blank"
          rel="noopener"
          class="basis-3/5 flex justify-center overflow-hidden rounded-lg group"
          aria-label="Google Maps öffnen"
      >
        <img
            src="/maps.png"
            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="`/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>

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

const {t, tm, rt} = useI18n()
</script>