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

<script setup lang="ts">
useSeoLinking()
const { g, l, p } = useContentInjected()

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

<template>
  <XScaffoldGridPage>
    <template #hero>
      <XScaffoldContent class="rpy-4">
        <div class="w-full flex flex-col rgap-3">
          <XContainerPair fractions="3/1" break="lg">
            <template #left>
              <div class="w-full max-w-[55rem] flex flex-col">
                <XText class="text-white" as="page" :text="l.hero.title" />
                <XText
                  class="text-white"
                  as="subheading"
                  :text="l.hero.description"
                  :margin="false"
                />
              </div>
            </template>

            <template #right v-if="l.hero.joker?.show">
              <XImageTransformed
                :src="l.hero.joker.image"
                :to="l.hero.joker.link"
                mode="center"
                :ux="{
                  link: 'rotate-15 rmx-2 rmt-2 rmb-2',
                  image: 'w-25 rounded-[0.5rem]',
                }"
              />
            </template>
          </XContainerPair>

          <XContainerButtons axis="row" align="left" :stretch="true" class="max-w-[55rem]">
            <AppButton type="apartments" color="primary" size="xl" />
            <AppButton type="book" color="secondary" size="xl" />
            <AppButton type="contact" color="secondary" size="xl" />
          </XContainerButtons>
        </div>
      </XScaffoldContent>
    </template>

    <template #hero-background>
      <XImagePanoramaSlider
        mode="fade"
        :delay="5000"
        :duration="150"
        :images="l.hero.images"
        :ux="{
          overlay: 'bg-black/60',
        }"
      />
    </template>

    <AppSection mode="flat">
      <XContainerPair
        fractions="1/2"
        break="2xl"
        :ux="{ left: 'flex items-center', right: 'flex items-center' }"
      >
        <template #left>
          <AppShowcase />
        </template>

        <template #right>
          <div class="flex flex-col items-start">
            <XText as="section" :text="l.highlight.title" />
            <XText as="paragraph" :text="l.highlight.description" />
            <AppButton type="hosts" color="primary" />
          </div>
        </template>
      </XContainerPair>
    </AppSection>

    <AppSection mode="card">
      <XContainerPair
        fractions="1/1"
        break="xl"
        :ux="{ container: '!gap-0', left: 'flex items-center' }"
      >
        <template #left>
          <div class="w-full flex flex-col items-start rp-2">
            <XText as="section" :text="l.location.title" />
            <XText as="paragraph" :text="l.location.description" />
            <AppButton type="location" color="primary" />
          </div>
        </template>

        <template #right>
          <XImageTransformed :src="l.location.image" :to="l.location.link" mode="cover" clip />
        </template>
      </XContainerPair>
    </AppSection>

    <AppSection mode="flat">
      <div class="w-full flex flex-col">
        <XText as="section" :text="l.apartments.title" />
        <XText as="paragraph" :text="l.apartments.description" :margin="false" />

        <div class="flex justify-center">
          <div class="flex flex-row flex-wrap rgap-1 rmt-2">
            <XImageTransformed
              v-for="(thumbnail, index) in l.apartments.thumbnails"
              :key="index"
              :src="thumbnail"
              :to="p('apartments#' + g.apartments[index].id).value"
              :ux="{ base: 'flex-1 min-w-60 aspect-4/3 md:aspect-2/3 max-h-[20rem] h-auto' }"
              clip
            >
              <div class="w-full h-full flex justify-center items-center bg-black/50">
                <ul class="text-center flex flex-col fgap-1">
                  <li>
                    <XText as="label" class="text-white" :text="g.apartments[index].title" />
                  </li>
                  <li>
                    <XText
                      as="label"
                      class="text-white"
                      :text="g.apartments[index].capacity.text"
                    />
                  </li>
                  <li>
                    <XText
                      as="label"
                      class="text-white"
                      :text="g.apartments[index].price.text"
                      :margin="false"
                    />
                  </li>
                </ul>
              </div>
            </XImageTransformed>
          </div>
        </div>
      </div>
    </AppSection>

    <AppSection mode="card">
      <AppHighlights />
    </AppSection>

    <AppSection mode="card">
      <XContainerPair
        fractions="1/2"
        break="2xl"
        :ux="{ container: '!gap-0', left: 'flex items-center' }"
      >
        <template #left>
          <div class="w-full flex flex-col items-start rp-2">
            <XText as="section" :text="l.bruendl.title" />
            <XText as="paragraph" :text="l.bruendl.description" />
            <AppButton type="bruendl" color="primary" />
          </div>
        </template>

        <template #right>
          <NuxtLink :to="l.bruendl.link" target="_blank" external>
            <XImageTransformed :src="l.bruendl.banner" mode="center" clip />
          </NuxtLink>
        </template>
      </XContainerPair>
    </AppSection>
  </XScaffoldGridPage>
</template>