Add conditional joker card

apps/panoramablick/i18n/locales/de.json

@@ -59,7 +59,11 @@
   "landing": {
     "welcome": {
       "title": "Willkommen im Landhaus Panoramablick",
-      "description": "Genießen Sie erholsame Tage inmitten der Natur mit herrlichem Ausblick auf die Berge. Unser Landhaus bietet gemütliche Apartments und herzliche Gastfreundschaft."
+      "description": "Genießen Sie erholsame Tage inmitten der Natur mit herrlichem Ausblick auf die Berge. Unser Landhaus bietet gemütliche Apartments und herzliche Gastfreundschaft.",
+      "joker": {
+        "#su": "true",
+        "#wi": "false"
+      }
     },
     "highlight": {
       "title": "Erleben Sie Natur hautnah",

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

@@ -1,47 +1,61 @@
 <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="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">
+          <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">
+              <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">
+              <UButton :to="variantPath('contact')" color="secondary" variant="solid" size="xl"
+                       trailing-icon="i-heroicons-envelope">
                 {{ t('button.contact') }}
               </UButton>
             </div>
-          </AppStripe>
+          </div>
+          <div v-if="t('landing.welcome.joker') === 'true'" class="flex items-center justify-center p-8">
+            <NuxtImg
+                src="/joker-card.jpeg"
+                alt="Joker Card"
+                class="w-30 md:w-50 transform rotate-15"
+                style="border-radius: .5rem"
+            />
+          </div>
         </div>
-      </div>
+      </AppStripe>
     </div>
-  </section>
+  </div>
 
   <AppFlatSection>
     <div class="flex gap-12 items-center">
@@ -124,6 +138,13 @@
   </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',
@@ -131,5 +152,5 @@ const images = [
 ]
 
 const {t, tm, rt} = useVariantData()
-const { variantPath } = useVariantPath()
+const {variantPath} = useVariantPath()
 </script>