From 28ef1b8ba8baef99db4ae4b7bb1910b071c457ea Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Fri, 13 Feb 2026 14:46:38 +0100
Subject: [PATCH] feat(flightlab): add landing page with scenario selection
 grid

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/pages/flightlab/index.vue | 134 ++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 app/pages/flightlab/index.vue

diff --git a/app/pages/flightlab/index.vue b/app/pages/flightlab/index.vue
new file mode 100644
index 0000000..73bf002
--- /dev/null
+++ b/app/pages/flightlab/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="min-h-screen bg-[#070d1a] text-white">
+    <!-- Header -->
+    <header class="border-b border-white/5 bg-[#070d1a]/80 backdrop-blur">
+      <div class="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-4 px-4 py-6 sm:px-6 md:px-8">
+        <div class="flex items-center gap-3">
+          <div class="flex h-12 w-12 items-center justify-center rounded-2xl border border-cyan-400/40 bg-cyan-500/10">
+            <v-icon icon="mdi-airplane" size="26" class="text-cyan-300" />
+          </div>
+          <div>
+            <p class="text-lg font-semibold tracking-tight">FlightLab</p>
+            <p class="text-sm text-white/60">Guided cockpit experiences</p>
+          </div>
+        </div>
+        <NuxtLink to="/" class="text-sm text-white/50 transition hover:text-white/80">
+          <v-icon icon="mdi-arrow-left" size="16" class="mr-1" />
+          Zurueck
+        </NuxtLink>
+      </div>
+    </header>
+
+    <main>
+      <!-- Hero -->
+      <section class="relative border-b border-white/5">
+        <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-cyan-500/15 via-transparent to-indigo-500/25" />
+        <div class="relative z-10 mx-auto w-full max-w-screen-xl px-4 py-16 sm:px-6 md:px-8">
+          <div class="max-w-3xl space-y-6">
+            <span
+              class="inline-flex items-center gap-2 rounded-full border border-cyan-300/40 bg-cyan-400/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-cyan-200/80"
+            >
+              <v-icon icon="mdi-shield-airplane" size="14" />
+              FlightLab
+            </span>
+            <h1 class="text-3xl font-semibold leading-tight sm:text-4xl md:text-5xl">
+              Fliegen verstehen.<br />
+              <span class="text-cyan-300">Angst ueberwinden.</span>
+            </h1>
+            <p class="max-w-2xl text-base text-white/80 sm:text-lg">
+              Schritt fuer Schritt durch echte Flugphasen - mit erklaerenden Stimmen,
+              realistischen Cockpit-Geraeuschen und deinem persoenlichen Tempo.
+              Entwickelt fuer Menschen mit Flugangst, begleitet von erfahrenen Instruktoren.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Scenarios Grid -->
+      <section class="mx-auto w-full max-w-screen-xl px-4 py-12 sm:px-6 md:px-8">
+        <h2 class="mb-8 text-xl font-semibold text-white/90">Verfuegbare Szenarien</h2>
+
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <!-- Takeoff Scenario Card -->
+          <div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b1328]/90 shadow-xl shadow-cyan-500/5 transition hover:border-cyan-400/30 hover:shadow-cyan-500/15">
+            <!-- Card glow -->
+            <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-transparent opacity-0 transition group-hover:opacity-100" />
+
+            <div class="relative z-10 p-6">
+              <!-- Icon + Badge -->
+              <div class="mb-5 flex items-start justify-between">
+                <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-cyan-400/40 bg-cyan-500/10">
+                  <v-icon icon="mdi-airplane-takeoff" size="30" class="text-cyan-300" />
+                </div>
+                <span class="rounded-full border border-emerald-400/40 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-300">
+                  Bereit
+                </span>
+              </div>
+
+              <!-- Title + Info -->
+              <h3 class="mb-2 text-xl font-semibold">{{ takeoffEddf.title }}</h3>
+              <p class="mb-4 text-sm text-white/60 leading-relaxed">{{ takeoffEddf.description }}</p>
+
+              <!-- Meta -->
+              <div class="mb-6 flex flex-wrap gap-3 text-xs text-white/50">
+                <span class="flex items-center gap-1.5">
+                  <v-icon icon="mdi-airplane" size="14" class="text-cyan-400/60" />
+                  {{ takeoffEddf.aircraft }}
+                </span>
+                <span class="flex items-center gap-1.5">
+                  <v-icon icon="mdi-map-marker" size="14" class="text-cyan-400/60" />
+                  {{ takeoffEddf.airport }}
+                </span>
+                <span class="flex items-center gap-1.5">
+                  <v-icon icon="mdi-road" size="14" class="text-cyan-400/60" />
+                  RWY {{ takeoffEddf.runway }}
+                </span>
+              </div>
+
+              <!-- Actions -->
+              <div class="flex flex-col gap-3">
+                <NuxtLink to="/flightlab/takeoff">
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    size="large"
+                    block
+                    class="rounded-xl font-semibold"
+                    prepend-icon="mdi-play-circle"
+                  >
+                    Starten
+                  </v-btn>
+                </NuxtLink>
+                <NuxtLink to="/flightlab/takeoff/instructor" class="text-center text-xs text-white/40 transition hover:text-cyan-300">
+                  <v-icon icon="mdi-account-tie" size="14" class="mr-1" />
+                  Instructor Panel
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+
+          <!-- Coming Soon Card -->
+          <div class="flex items-center justify-center rounded-3xl border border-dashed border-white/10 bg-[#0b1328]/40 p-6">
+            <div class="text-center">
+              <v-icon icon="mdi-airplane-landing" size="40" class="mb-3 text-white/20" />
+              <p class="text-sm font-medium text-white/30">Weitere Szenarien</p>
+              <p class="text-xs text-white/20">Demnachst verfuegbar</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { takeoffEddf } from '~/../../shared/data/flightlab/takeoff-eddf'
+
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: 'FlightLab - Fliegen verstehen',
+})
+</script>