refactor: replace img tags with NuxtImg

This commit is contained in:
Remi
2025-10-12 16:53:10 +02:00
parent 807699a328
commit e907a41ffc
2 changed files with 12 additions and 11 deletions

View File

@@ -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"

View File

@@ -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