From 52faafe3ccabfd4c28c6486380522b76d85ff70c Mon Sep 17 00:00:00 2001
From: Dominik Milacher <code@dominikmilacher.com>
Date: Wed, 15 Oct 2025 12:26:36 +0200
Subject: [PATCH] Switch to NuxtImg

---
 .../components/AppThumbnailCarousel.vue       |  2 +-
 .../pages/[locale]/[variant]/apartments.vue   |  4 +--
 .../pages/[locale]/[variant]/index.vue        | 26 +++++++++----------
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue b/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue
index cb5c479..920ba39 100644
--- a/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue
+++ b/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue
@@ -51,7 +51,7 @@ function select(index: number) {
         class="relative w-full"
         @select="onSelect"
     >
-      <img :src="item" class="object-cover" alt="Bild"/>
+      <NuxtImg :src="item" class="object-cover" alt="Bild"/>
     </UCarousel>
 
     <!-- thumbnails -->
diff --git a/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/apartments.vue b/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/apartments.vue
index 0d809cf..55aa0f0 100644
--- a/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/apartments.vue
+++ b/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/apartments.vue
@@ -4,8 +4,8 @@
       <div class="flex flex-col md:flex-row items-center gap-8">
         <!-- Left: Image Group -->
         <div class="flex flex-row gap-4 justify-center relative">
-          <img :src="c.apartments.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
-          <img :src="c.apartments.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
+          <NuxtImg :src="c.apartments.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
+          <NuxtImg :src="c.apartments.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
         </div>
 
         <AppTitleText :title="c.apartments.highlight.title" :text="c.apartments.highlight.description">
diff --git a/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/index.vue b/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/index.vue
index caeb00b..daf3c4c 100644
--- a/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/index.vue
+++ b/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/index.vue
@@ -12,7 +12,7 @@
             :duration="150"
             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"/>
+            <NuxtImg :src="item" class="w-full h-full object-cover" alt="Demo Picture"/>
           </div>
         </UCarousel>
     </div>
@@ -64,8 +64,8 @@
     <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">
-        <img :src="c.landing.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
-        <img :src="c.landing.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
+        <NuxtImg :src="c.landing.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
+        <NuxtImg :src="c.landing.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
       </div>
 
       <!-- Right: Text Content -->
@@ -81,10 +81,9 @@
   </AppFlatSection>
 
   <AppCardSection>
-    <div class="flex flex-col md:flex-row items-center gap-4">
-
-      <!-- Left: Text (40%) -->
-      <div class="basis-2/5 pr">
+    <div class="flex w-full items-stretch overflow-hidden">
+      <!-- Left: 40% width -->
+      <div class="w-[40%] flex flex-col justify-center pr">
         <AppTitleText :title="c.landing.location.title" :text="c.landing.location.description">
           <UButton to="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7" color="primary" variant="solid" size="xl"
                    trailing-icon="i-heroicons-arrow-right">
@@ -92,21 +91,20 @@
           </UButton>
         </AppTitleText>
       </div>
-
-      <!-- Right: Image (60%) -->
+      <!-- Right: 60% width, image fills -->
       <a
           href="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7"
-          class="basis-3/5 flex justify-center overflow-hidden group"
+          class="w-[60%] overflow-hidden relative group"
           aria-label="Google Maps öffnen"
       >
-        <img
+        <NuxtImg
             :src="c.landing.location.image"
             alt="Vorschaubild der Lage in Google Maps"
-            class="w-full h-80 object-cover transition-transform duration-300 ease-out group-hover:scale-110"
+            class="w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
         />
       </a>
-
     </div>
+
   </AppCardSection>
 
   <AppFlatSection>
@@ -115,7 +113,7 @@
 
         <NuxtLink v-for="apartment in c.apartments.list" :to="p('apartments', apartment.id)"
            class="relative group block w-60 h-80 overflow-hidden">
-          <img :src="apartment.thumbnail" alt="Image 1"
+          <NuxtImg :src="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