README.md

@@ -4,8 +4,7 @@
 
 Package creation: `pnpm dlx nuxi@latest init -t module packages/ui --packageManager pnpm`. App creation: `pnpm dlx nuxi@latest init apps/panoramablick --packageManager pnpm`.
 
-Setup in the root via `pnpm install`. Running a single app in dev mode via `pnpm run dev` in that app directory.
+
- 
 This is a community-maintained example. If you experience a problem, please submit a pull request with a fix. GitHub Issues will be closed.
 
 ## Using this example

apps/panoramablick/components/AppApartment.vue

@@ -1,12 +1,12 @@
 <template>
   <section class="w-full">
     <!-- ❶ two-column card ----------------------------->
-    <div class="flex flex-col md:flex-row">
+    <div class="grid gap-8 lg:grid-cols-2 bg-white rounded-lg overflow-hidden">
       <!-- ◀ left half : image carousel -->
-      <AppThumbnailCarousel class="basis-1/3"></AppThumbnailCarousel>
+      <AppThumbnailCarousel></AppThumbnailCarousel>
 
       <!-- ▶ right half : text (top) & icons (bottom) -->
-      <div class="basis-2/3 flex flex-col h-full p-6">
+      <div class="flex flex-col h-full p-6">
         <!-- title + intro copy -->
         <div class="flex flex-col gap-4">
           <div>
@@ -52,6 +52,8 @@
 </template>
 
 <script setup lang="ts">
+import type {Apartment} from '@/composables/useApartments'
+
 const {t, tm, rt} = useVariantData()
 
 defineProps<{ apartment: Apartment }>()

apps/panoramablick/components/AppHeader.vue

@@ -3,15 +3,10 @@
     <AppStripe>
       <nav class="mx-auto py-4 flex items-center justify-between">
         <!-- your logo / home link -->
-        <NuxtLink :to="variantPath('/')" class="text-xl font-semibold flex items-center gap-2">
+        <NuxtLink :to="variantPath('/')" class="text-xl font-semibold">
-          <UIcon name="i-heroicons-home" />
+          {{ t('header.home') }}
-
-          <span class="hidden md:inline">
-            {{ t('header.home') }}
-          </span>
         </NuxtLink>
 
-
         <!-- nav links -->
         <ul class="flex space-x-6">
           <li>

apps/panoramablick/i18n/locales/de.json

@@ -59,22 +59,15 @@
   "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",
-      "description": "Unser Landhaus liegt eingebettet in idyllischer Landschaft mit atemberaubendem Ausblick. Ob Wandern, Entspannen oder die Umgebung erkunden – bei uns finden Sie Ruhe und Erholung.",
+      "description": "Unser Landhaus liegt eingebettet in idyllischer Landschaft mit atemberaubendem Ausblick. Ob Wandern, Entspannen oder die Umgebung erkunden – bei uns finden Sie Ruhe und Erholung."
-      "image-left": "/ap.webp",
-      "image-right": "/sauna.webp"
     },
     "location": {
       "title": "Logieren Sie in bester Lage",
-      "description": "Blabla asdfasdf asdf asdf asdf asddf asddf asdf asdf asdfasd ffad.",
+      "description": "Blabla asdfasdf asdf asdf asdf asddf asddf asdf asdf asdfasd ffad."
-      "image": "/maps.png"
     },
     "apartments": {
       "title": "Unsere Apartments",
@@ -88,9 +81,7 @@
   "apartments": {
     "highlight": {
       "title": "Das gibt es bei uns",
-      "description": "Es ist alles so toll",
+      "description": "Es ist alles so toll"
-      "image-left": "/ap.webp",
-      "image-right": "/sauna.webp"
     },
     "list": [
       {

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

@@ -1,11 +1,11 @@
 <template>
   <div class="w-full h-full bg-neutral-50">
     <AppFlatSection>
-      <div class="flex flex-col md:flex-row items-center gap-8">
+      <div class="flex gap-12 items-center">
         <!-- Left: Image Group -->
         <div class="flex flex-row gap-4 justify-center relative">
-          <img :src="t('apartments.highlight.image-left')" alt="Image 1" class="w-40 h-60 object-cover"/>
+          <img src="/ap.webp" alt="Image 1" class="w-40 h-60 object-cover rounded-lg"/>
-          <img :src="t('apartments.highlight.image-right')" class="w-40 h-60 object-cover mt-6" />
+          <img src="/sauna.webp" alt="Image 2" class="w-40 h-60 object-cover rounded-lg translate-y-6"/>
         </div>
 
         <AppTitleText i18n-key="apartments.highlight">
@@ -14,12 +14,7 @@
       </div>
     </AppFlatSection>
 
-    <AppCardSection
+    <AppCardSection v-for="apartment in tm('apartments.list')" :id="rt(apartment.id)">
-        v-for="(apartment, index) in tm('apartments.list')"
-        :key="apartment.id"
-        :id="rt(apartment.id)"
-        :padTop="index === 0"
-    >
       <AppApartment :apartment="apartment"/>
     </AppCardSection>
   </div>

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

@@ -2,9 +2,9 @@
   <!-- Contact‑centric layout -->
   <AppFlatSection>
     <!-- Grid: form (fixed max‑width) | host snapshots -->
-    <div class="flex flex-col md:flex-row gap-8 items-center">
+    <div class="grid gap-12 lg:grid-cols-[minmax(0,480px)_1fr] items-start lg:items-center">
       <!-- ─── Contact form ─── -->
-      <div class="w-full md:w-auto max-w-xl mx-auto lg:mx-0">
+      <div class="w-full max-w-xl mx-auto lg:mx-0">
         <h1 class="text-3xl sm:text-4xl font-bold mb-4">{{ t('contact.title') }}</h1>
 
         <!-- Extended intro -->
@@ -71,7 +71,7 @@
       </div>
 
       <!-- ─── Decorative host snapshots ─── -->
-      <div id="hosts" class="flex flex-col gap-10 lg:self-center w-full md:w-auto">
+      <div id="hosts" class="flex flex-col gap-10 lg:self-center">
         <AppHero
             :src="t('contact.heroes.parents.image')"
             :alt="t('contact.heroes.parents.title')"

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

@@ -1,70 +1,54 @@
 <template>
-  <div class="relative w-full">
+  <section class="relative w-full">
-    <div class="absolute inset-0 z-0">
+    <div class="relative w-full">
-        <UCarousel
+      <UCarousel
-            v-slot="{ item }"
+          v-slot="{ item }"
-            :items="images"
+          :items="images"
-            :ui="{item: 'basis-full h-full ps-0', container: 'flex items-stretch h-full'}"
+          :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 }"
+          :autoplay="{ delay: 5000 }"
-            :loop="true"
+          :loop="true"
-            :fade="true"
+          :fade="true"
-            :duration="75"
+          :duration="75"
-            class="w-full h-full custom-carousel">
+          class="w-full h-full">
-          <div class="w-full h-full flex items-center justify-center">
+        <div class="w-full h-full flex items-center justify-center">
-            <img :src="item" class="w-full h-full object-cover" alt="Demo Picture"/>
+          <img :src="item" class="w-full h-full object-cover" alt="Demo Picture"/>
-          </div>
+        </div>
-        </UCarousel>
+      </UCarousel>
-    </div>
+      <div class="absolute inset-0 z-10 bg-black/60">
-
+        <div class="w-full h-full flex justify-center items-center">
-    <div class="absolute inset-0 z-5 bg-black/60"/>
+          <AppStripe class="text-white">
-
+            <div class="max-w-2xl">
-    <div class="relative z-10">
+              <h1 class="text-5xl max-w-4xl font-bold">{{ t('landing.welcome.title') }}</h1>
-      <AppStripe class="text-white py-4 sm:py-8 lg:py-16">
+              <p class="mt-4 text-lg text-gray-200">
-        <div class="flex flex-col md:flex-row py-6 gap-4 sm:gap-8 lg:gap-16">
+                {{
-          <div class="flex flex-col">
+                  t('landing.welcome.description')
-            <div>
+                }}
-            <h1 class="text-5xl max-w-4xl font-bold">{{ t('landing.welcome.title') }}</h1>
+              </p>
-            <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"
+              <UButton :to="variantPath('book')" color="secondary" variant="solid" size="xl" trailing-icon="i-heroicons-globe-alt">
-                       trailing-icon="i-heroicons-globe-alt">
                 {{ t('button.book') }}
               </UButton>
-              <UButton :to="variantPath('contact')" color="secondary" variant="solid" size="xl"
+              <UButton :to="variantPath('contact')" color="secondary" variant="solid" size="xl" trailing-icon="i-heroicons-envelope">
-                       trailing-icon="i-heroicons-envelope">
                 {{ t('button.contact') }}
               </UButton>
             </div>
-          </div>
+          </AppStripe>
-          <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>
-  </div>
+  </section>
 
   <AppFlatSection>
-    <div class="flex flex-col md:flex-row items-center gap-4">
+    <div class="flex gap-12 items-center">
       <!-- 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="/ap.webp" alt="Image 1" class="w-40 h-60 object-cover rounded-lg"/>
-        <img :src="t('landing.highlight.image-right')" class="w-40 h-60 object-cover mt-6" />
+        <img src="/sauna.webp" alt="Image 2" class="w-40 h-60 object-cover rounded-lg translate-y-6"/>
       </div>
 
       <!-- Right: Text Content -->
@@ -80,7 +64,7 @@
   </AppFlatSection>
 
   <AppCardSection>
-    <div class="flex flex-col md:flex-row items-center gap-4">
+    <div class="flex gap-12 items-center">
 
       <!-- Left: Text (40%) -->
       <div class="basis-2/5 pr">
@@ -95,11 +79,13 @@
       <!-- Right: Image (60%) -->
       <a
           href="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7"
-          class="basis-3/5 flex justify-center overflow-hidden group"
+          target="_blank"
+          rel="noopener"
+          class="basis-3/5 flex justify-center overflow-hidden rounded-lg group"
           aria-label="Google Maps öffnen"
       >
         <img
-            :src="t('landing.location.image')"
+            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"
         />
@@ -138,13 +124,6 @@
   </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',
@@ -152,5 +131,5 @@ const images = [
 ]
 
 const {t, tm, rt} = useVariantData()
-const {variantPath} = useVariantPath()
+const { variantPath } = useVariantPath()
 </script>