From a0d89a8b8750c000015dd96697ad48d218b3302a Mon Sep 17 00:00:00 2001
From: Remi <73385395+itsrubberduck@users.noreply.github.com>
Date: Sun, 12 Oct 2025 16:53:10 +0200
Subject: [PATCH] refactor: replace img tags with NuxtImg

---
 app/pages/api-docs.vue               |  4 ++--
 app/pages/bridge/index.vue           |  2 +-
 app/pages/classroom-introduction.vue |  9 +++++----
 app/pages/classroom.vue              | 14 +++++++-------
 app/pages/feedback.vue               |  3 ++-
 app/pages/index.vue                  |  2 +-
 app/pages/login.vue                  |  6 +++---
 app/pages/present.vue                |  4 ++--
 8 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/pages/api-docs.vue b/app/pages/api-docs.vue
index 3543ffa..0e56ea2 100644
--- a/app/pages/api-docs.vue
+++ b/app/pages/api-docs.vue
@@ -91,8 +91,8 @@
             class="space-y-6 rounded-3xl border border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-transparent p-8">
             <div class="overflow-hidden rounded-2xl border border-white/10 bg-black/40">
               <div class="relative aspect-[3/1]">
-                <img src="/img/learn/missions/full-flight/briefing-weather.png" alt="Weather briefing overview"
-                  class="absolute inset-0 h-full w-full object-cover" />
+                <NuxtImg src="/img/learn/missions/full-flight/briefing-weather.png" alt="Weather briefing overview"
+                  class="absolute inset-0 h-full w-full object-cover" format="webp" />
               </div>
             </div>
             <header class="space-y-3">
diff --git a/app/pages/bridge/index.vue b/app/pages/bridge/index.vue
index 12ac851..432c661 100644
--- a/app/pages/bridge/index.vue
+++ b/app/pages/bridge/index.vue
@@ -32,7 +32,7 @@
               <h2 id="bridge-notice-title" class="text-3xl font-semibold leading-tight sm:text-4xl">
                 Live ATC is still in the works
               </h2>
-              <img src="/img/bridge/hangar_sleeping.jpeg" alt="Bridge app screenshot" style="aspect-ratio: 2.7/1;object-fit: cover" class="rounded-2xl border border-white/10 shadow-[0_20px_60px_rgba(4,8,24,0.45)]"/>
+              <NuxtImg src="/img/bridge/hangar_sleeping.jpeg" alt="Bridge app screenshot" style="aspect-ratio: 2.7/1;object-fit: cover" class="rounded-2xl border border-white/10 shadow-[0_20px_60px_rgba(4,8,24,0.45)]" format="webp" />
               <p class="text-sm text-white/75 sm:text-base">
                 We&rsquo;re actively building this part of the Bridge experience. There isn&rsquo;t a hosted version
                 yet, but we&rsquo;re lining everything up for launch in the coming weeks and months.
diff --git a/app/pages/classroom-introduction.vue b/app/pages/classroom-introduction.vue
index 48e6907..d30673f 100644
--- a/app/pages/classroom-introduction.vue
+++ b/app/pages/classroom-introduction.vue
@@ -64,16 +64,17 @@
             </div>
             <div class="flex flex-col gap-6">
               <div class="overflow-hidden rounded-3xl border border-white/10 bg-black/40 shadow-xl shadow-cyan-500/10">
-                <img
+                <NuxtImg
                   src="/img/learn/modules/img14.jpeg"
                   alt="Pilots reviewing the Classroom mission board"
                   class="h-56 w-full object-cover"
                   loading="lazy"
+                  format="webp"
                 />
               </div>
               <div class="rounded-3xl border border-white/10 bg-[#0b1328]/90 p-6 shadow-xl shadow-cyan-500/10">
                 <div class="flex items-center gap-4">
-                  <img src="/img/learn/instructor.png" alt="Avery, the Classroom instructor" class="h-14 w-14 rounded-2xl border border-cyan-400/40 object-cover" />
+                  <NuxtImg src="/img/learn/instructor.png" alt="Avery, the Classroom instructor" class="h-14 w-14 rounded-2xl border border-cyan-400/40 object-cover" />
                   <div>
                     <p class="text-base font-semibold">Avery</p>
                     <p class="text-sm text-white/60">Your Classroom instructor</p>
@@ -273,7 +274,7 @@
                 class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-white/5 via-white/[0.03] to-white/[0.02] shadow-xl shadow-black/30"
               >
                 <div class="relative h-48 w-full overflow-hidden border-b border-white/5 sm:h-56">
-                  <img :src="activeStage.image" :alt="activeStage.imageAlt" class="h-full w-full object-cover" loading="lazy" />
+                  <NuxtImg :src="activeStage.image" :alt="activeStage.imageAlt" class="h-full w-full object-cover" loading="lazy" />
                   <div class="absolute inset-0 bg-gradient-to-t from-[#080f1f] via-transparent to-transparent"></div>
                   <div class="absolute bottom-4 left-4 rounded-full bg-[#080f1f]/80 px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-white/80">
                     Stop {{ stageIndex + 1 }} of {{ stages.length }}
@@ -311,7 +312,7 @@
 
                   <div class="rounded-2xl border border-white/10 bg-[#0c162c]/80 p-4 sm:p-5">
                     <div class="flex items-start gap-4">
-                      <img
+                      <NuxtImg
                         src="/img/learn/instructor.png"
                         alt="Avery instructor avatar"
                         class="h-24 w-24 rounded-2xl border border-cyan-400/40 object-cover"
diff --git a/app/pages/classroom.vue b/app/pages/classroom.vue
index 651d953..c1ffce0 100644
--- a/app/pages/classroom.vue
+++ b/app/pages/classroom.vue
@@ -289,7 +289,7 @@
 
         <div v-if="flightPlanMode==='random'" class="plan-panel">
           <div class="plan-summary">
-            <img :src="currentBriefingArt" alt="Mission hero" class="plan-hero" />
+            <NuxtImg :src="currentBriefingArt" alt="Mission hero" class="plan-hero" />
             <div class="plan-summary-body">
               <span class="plan-tag">Auto flight</span>
               <div class="plan-callout">{{ displayCallsign(draftPlanScenario?.radioCall, draftPlanScenario) }}</div>
@@ -571,7 +571,7 @@
 
         <div v-else class="plan-panel simbrief-panel">
           <div class="simbrief-hero-card">
-            <img src="/img/learn/missions/full-flight/briefing-hero.png" alt="SimBrief import preview" class="simbrief-hero-art" />
+            <NuxtImg src="/img/learn/missions/full-flight/briefing-hero.png" alt="SimBrief import preview" class="simbrief-hero-art" format="webp" />
             <div class="simbrief-hero-overlay">
               <span class="simbrief-tag">SimBrief import</span>
               <h3 class="simbrief-hero-title">Load your airline dispatch</h3>
@@ -667,7 +667,7 @@
 
       <div v-else-if="moduleStage==='briefing' && briefingSnapshot" class="module-stage-panel mission-briefing">
         <section class="briefing-hero-banner">
-          <img :src="currentBriefingArt" alt="Mission hero" class="briefing-hero-bg" />
+          <NuxtImg :src="currentBriefingArt" alt="Mission hero" class="briefing-hero-bg" />
           <div class="briefing-hero-content">
             <div class="briefing-tag-row">
               <span class="plan-tag">Mission briefing</span>
@@ -714,7 +714,7 @@
         <div class="briefing-layout">
           <div class="briefing-main-grid">
             <div class="briefing-card">
-              <img src="/img/learn/missions/full-flight/briefing-route.png" alt="Route preview" class="briefing-card-art" />
+              <NuxtImg src="/img/learn/missions/full-flight/briefing-route.png" alt="Route preview" class="briefing-card-art" format="webp" />
               <div class="card-title">
                 <v-icon size="16">mdi-map-marker-path</v-icon>
                 Flight deck setup
@@ -726,7 +726,7 @@
               </ul>
             </div>
             <div class="briefing-card">
-              <img src="/img/learn/missions/full-flight/briefing-departure.png" alt="Departure" class="briefing-card-art" />
+              <NuxtImg src="/img/learn/missions/full-flight/briefing-departure.png" alt="Departure" class="briefing-card-art" format="webp" />
               <div class="card-title">
                 <v-icon size="16">mdi-airplane-takeoff</v-icon>
                 Departure flow
@@ -739,7 +739,7 @@
               </ul>
             </div>
             <div class="briefing-card">
-              <img src="/img/learn/missions/full-flight/briefing-arrival.png" alt="Arrival" class="briefing-card-art" />
+              <NuxtImg src="/img/learn/missions/full-flight/briefing-arrival.png" alt="Arrival" class="briefing-card-art" format="webp" />
               <div class="card-title">
                 <v-icon size="16">mdi-airplane-landing</v-icon>
                 Arrival setup
@@ -752,7 +752,7 @@
               </ul>
             </div>
             <div class="briefing-card">
-              <img src="/img/learn/missions/full-flight/briefing-weather.png" alt="Weather" class="briefing-card-art" />
+              <NuxtImg src="/img/learn/missions/full-flight/briefing-weather.png" alt="Weather" class="briefing-card-art" format="webp" />
               <div class="card-title">
                 <v-icon size="16">mdi-weather-cloudy</v-icon>
                 Weather snapshot
diff --git a/app/pages/feedback.vue b/app/pages/feedback.vue
index dc3e702..c08237e 100644
--- a/app/pages/feedback.vue
+++ b/app/pages/feedback.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="relative min-h-screen bg-[#050914] text-white">
-    <img
+    <NuxtImg
         src="/img/landing/feedback.jpeg"
         alt="Path through a forest"
         class="fixed inset-0 h-screen w-full object-cover object-center brightness-[0.55]"
+        format="webp"
     />
     <div class="absolute inset-0 backdrop-blur-sm"/>
     <div
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4b9ebc4..cce5a83 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -634,7 +634,7 @@
               </a>
             </div>
           </div>
-          <img src="/img/landing/simulator.jpeg" alt="Runway" class="rounded-lg card w-full object-cover"/>
+          <NuxtImg src="/img/landing/simulator.jpeg" alt="Runway" class="rounded-lg card w-full object-cover" format="webp" />
         </div>
       </div>
     </section>
diff --git a/app/pages/login.vue b/app/pages/login.vue
index cfc1d47..1026f34 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -16,8 +16,8 @@
         class="mx-auto flex h-full w-full max-w-6xl flex-1 flex-col overflow-hidden sm:py-8 sm:px-8 lg:flex-row lg:items-stretch lg:py-12 lg:pl-0 min-h-0">
       <div
           class="relative hidden h-full min-h-0 overflow-hidden rounded-3xl border border-white/10 bg-white/5 shadow-2xl lg:flex lg:w-[48%]">
-        <img :src="img" alt="Guiding lights on a runway"
-             class="absolute inset-0 h-full w-full object-cover"/>
+        <NuxtImg :src="img" alt="Guiding lights on a runway"
+             class="absolute inset-0 h-full w-full object-cover" />
         <div class="absolute inset-0 bg-gradient-to-t from-[#050816]/95 via-[#050816]/40 to-transparent"/>
         <div class="relative z-10 flex h-full flex-col justify-between p-10">
           <div>
@@ -52,7 +52,7 @@
           <div class="flex-1 overflow-y-auto px-5 pt-6 pb-10 sm:px-6 md:px-8 lg:pr-4">
             <div
                 class="floating-card relative mb-8 overflow-hidden rounded-3xl border border-white/10 bg-white/5 shadow-2xl lg:hidden">
-              <img src="/img/landing/runway.jpeg" alt="Guiding lights on a runway" class="h-56 w-full object-cover"/>
+              <NuxtImg src="/img/landing/runway.jpeg" alt="Guiding lights on a runway" class="h-56 w-full object-cover" format="webp" />
               <div
                   class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[#050816] via-transparent to-transparent p-6">
                 <p class="text-xs uppercase tracking-[0.3em] text-white/50">Alpha Access</p>
diff --git a/app/pages/present.vue b/app/pages/present.vue
index e511c8f..af0e1ec 100644
--- a/app/pages/present.vue
+++ b/app/pages/present.vue
@@ -60,14 +60,14 @@
           </blockquote>
 
           <div v-if="currentSlide.image" class="media" @click.stop>
-            <img :src="currentSlide.image" :alt="currentSlide.imageAlt || ''" loading="lazy" />
+            <NuxtImg :src="currentSlide.image" :alt="currentSlide.imageAlt || ''" loading="lazy" />
             <p v-if="currentSlide.imageCredit" class="image-caption">{{ currentSlide.imageCredit }}</p>
           </div>
 
           <p v-if="currentSlide.note" class="note">{{ currentSlide.note }}</p>
 
           <div v-if="currentSlide.qr" class="qr-wrapper" @click.stop>
-            <img v-if="qrCode" :src="qrCode" alt="QR code linking to the project" />
+            <NuxtImg v-if="qrCode" :src="qrCode" alt="QR code linking to the project" provider="none" />
             <div v-else class="qr-placeholder">QR code is rendering…</div>
             <p>{{ currentSlide.qr }}</p>
           </div>