From 73771b455ae5d5b16852879a9550debe22aaf6f9 Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Wed, 24 Sep 2025 16:06:28 +0200
Subject: [PATCH] update bridge landing page

---
 app/pages/bridge/index.vue | 170 ++++++++++---------------------------
 1 file changed, 43 insertions(+), 127 deletions(-)

diff --git a/app/pages/bridge/index.vue b/app/pages/bridge/index.vue
index 604ec1e..039e129 100644
--- a/app/pages/bridge/index.vue
+++ b/app/pages/bridge/index.vue
@@ -1,21 +1,24 @@
 <template>
   <div class="relative min-h-screen bg-[#0B1020] text-white">
-    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(22,187,215,0.15),transparent_55%)]"/>
-    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_bottom,_rgba(41,45,59,0.4),transparent_65%)]"/>
+    <div
+        class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(22,187,215,0.15),transparent_55%)]"/>
+    <div
+        class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_bottom,_rgba(41,45,59,0.4),transparent_65%)]"/>
 
     <main class="relative mx-auto w-full max-w-4xl px-5 py-12 sm:px-7 lg:px-10">
       <nav class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <NuxtLink
-          to="/"
-          class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white transition hover:border-white/20 hover:bg-white/10 sm:w-auto"
+            to="/"
+            class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white transition hover:border-white/20 hover:bg-white/10 sm:w-auto"
         >
           <span aria-hidden="true">←</span>
           Back to opensquawk.de
         </NuxtLink>
         <NuxtLink
-          to="/bridge/connect"
-          class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[#292D3B] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#353a4c] sm:w-auto"
+            to="/bridge/connect"
+            class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[#292D3B] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#353a4c] sm:w-auto"
         >
+          <v-icon icon="mdi-link" class="h-5 w-5"/>
           Link a token
         </NuxtLink>
       </nav>
@@ -26,82 +29,27 @@
         <p class="mx-auto max-w-2xl text-sm text-white/70 sm:mx-0">
           Download the Bridge for your sim, sign in once, and let the desktop app keep your flights in sync.
         </p>
-        <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <a
-            href="https://github.com/itsrubberduck/OpenSquawk-MSFS-Bridge/"
-            target="_blank"
-            rel="noopener"
-            class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[#16BBD7] px-5 py-3 text-sm font-semibold text-[#0B1020] transition hover:bg-[#13a7c4] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#72d9ea] sm:w-auto"
-          >
-            <span aria-hidden="true">⇩</span>
-            Download for MSFS 2020
-          </a>
-          <NuxtLink
-            to="/bridge/connect"
-            class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-white/15 bg-white/5 px-5 py-3 text-sm font-medium text-white transition hover:border-white/30 hover:bg-white/10 sm:w-auto"
-          >
-            Already have a code? Link it
-          </NuxtLink>
-        </div>
       </header>
 
       <section class="mt-14 space-y-4">
         <div class="space-y-2 text-center sm:text-left">
           <h2 class="text-2xl font-semibold">Choose your simulator</h2>
-          <p class="text-sm text-white/65">Every build walks you through the same quick link flow.</p>
         </div>
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 items-center justify-center">
           <article
-            v-for="item in downloads"
-            :key="item.id"
-            class="flex h-full flex-col justify-between rounded-3xl border border-white/10 bg-[#111832]/80 p-6 shadow-[0_20px_60px_rgba(4,8,24,0.45)] transition hover:border-white/20 hover:shadow-[0_28px_75px_rgba(4,8,24,0.55)]"
+              v-for="item in downloads"
+              :key="item.id"
+              class="flex h-full flex-col justify-between rounded-3xl border border-white/10 bg-[#111832]/80 p-6 shadow-[0_20px_60px_rgba(4,8,24,0.45)] transition hover:border-white/20 hover:shadow-[0_28px_75px_rgba(4,8,24,0.55)]"
           >
             <div class="space-y-4">
               <div class="flex items-center gap-3">
                 <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/5 text-[#16BBD7]">
-                  <svg
-                    v-if="item.icon === 'plane'"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    class="h-6 w-6"
-                  >
-                    <path d="M2 13l10-3 10 3" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M12 10V3" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M12 14v7" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M7 21l5-7 5 7" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-                  <svg
-                    v-else-if="item.icon === 'future'"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    class="h-6 w-6"
-                  >
-                    <path d="M12 3l3 6 6 1-4.5 4.3L18 21l-6-3-6 3 1.5-6.7L3 10l6-1z" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-                  <svg
-                    v-else
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    class="h-6 w-6"
-                  >
-                    <path d="M4 17l8-11 8 11" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M4 7h16" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M4 12h16" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
+                  <v-icon :icon="item.icon" class="h-6 w-6"/>
                 </span>
                 <div>
                   <span
-                    class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.32em]"
-                    :class="item.available ? 'bg-[#16BBD7]/15 text-[#16BBD7]' : 'bg-white/10 text-white/55'"
+                      class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.32em]"
+                      :class="item.available ? 'bg-[#16BBD7]/15 text-[#16BBD7]' : 'bg-white/10 text-white/55'"
                   >
                     {{ item.status }}
                   </span>
@@ -112,22 +60,22 @@
             </div>
             <div class="mt-6">
               <a
-                v-if="item.available"
-                :href="item.href"
-                target="_blank"
-                rel="noopener"
-                class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[#16BBD7] px-4 py-3 text-sm font-semibold text-[#0B1020] transition hover:bg-[#13a7c4] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#72d9ea]"
+                  v-if="item.available"
+                  :href="item.href"
+                  target="_blank"
+                  rel="noopener"
+                  class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[#16BBD7] px-4 py-3 text-sm font-semibold text-[#0B1020] transition hover:bg-[#13a7c4] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#72d9ea]"
               >
-                <span aria-hidden="true">⇩</span>
+                <v-icon icon="mdi-download" class="h-5 w-5"/>
                 Download
               </a>
               <button
-                v-else
-                type="button"
-                disabled
-                class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-white/15 bg-white/5 px-4 py-3 text-sm font-semibold text-white/65 opacity-80"
+                  v-else
+                  type="button"
+                  disabled
+                  class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-white/15 bg-white/5 px-4 py-3 text-sm font-semibold text-white/65 opacity-80"
               >
-                <span aria-hidden="true">⏳</span>
+                <v-icon icon="mdi-clock-outline" class="h-5 w-5"/>
                 Coming soon
               </button>
             </div>
@@ -142,46 +90,12 @@
         </div>
         <div class="grid gap-4 sm:grid-cols-3">
           <article
-            v-for="step in steps"
-            :key="step.id"
-            class="rounded-3xl border border-white/10 bg-[#111832]/80 p-6 text-left shadow-[0_20px_60px_rgba(4,8,24,0.45)]"
+              v-for="step in steps"
+              :key="step.id"
+              class="rounded-3xl border border-white/10 bg-[#111832]/80 p-6 text-left shadow-[0_20px_60px_rgba(4,8,24,0.45)]"
           >
             <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/5 text-[#16BBD7]">
-              <svg
-                v-if="step.icon === 'spark'"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                class="h-6 w-6"
-              >
-                <path d="M12 3l1.8 5.4H19l-4.6 3.3L16.2 17 12 13.8 7.8 17l1-5.3L4 8.4h5.2L12 3z" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              <svg
-                v-else-if="step.icon === 'lock'"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                class="h-6 w-6"
-              >
-                <rect x="5" y="10" width="14" height="10" rx="3" ry="3" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M7 10V7a5 5 0 0110 0v3" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              <svg
-                v-else
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                class="h-6 w-6"
-              >
-                <path d="M4 17l4-4 3 3 5-5 4 4" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M4 7h16" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
+              <v-icon :icon="step.icon" class="h-6 w-6"/>
             </span>
             <p class="mt-4 text-base font-semibold">{{ step.title }}</p>
             <p class="mt-2 text-sm text-white/70">{{ step.description }}</p>
@@ -215,12 +129,14 @@
           <h2 class="text-xl font-semibold">Need help?</h2>
           <p class="mt-3 text-sm text-white/70">
             Email
-            <a href="mailto:support@opensquawk.de" class="font-medium text-[#16BBD7] underline decoration-dotted underline-offset-4">support@opensquawk.de</a>
+            <a href="mailto:info@opensquawk.de"
+               class="font-medium text-[#16BBD7] underline decoration-dotted underline-offset-4">info@opensquawk.de</a>
             and we&rsquo;ll get you connected.
           </p>
           <div class="mt-6 rounded-2xl border border-[#16BBD7]/30 bg-[#16BBD7]/10 px-5 py-4 text-sm text-white/75">
             <p class="font-semibold text-[#16BBD7]">Tip</p>
-            <p class="mt-1">Leave the Bridge running. It wakes up with your sim and keeps sending status updates automatically.</p>
+            <p class="mt-1">Leave the Bridge running. It wakes up with your sim and keeps sending status updates
+              automatically.</p>
           </div>
         </div>
       </section>
@@ -229,9 +145,9 @@
 </template>
 
 <script setup lang="ts">
-import { useHead } from '#imports'
+import {useHead} from '#imports'
 
-useHead({ title: 'Bridge Downloads · OpenSquawk' })
+useHead({title: 'Bridge Downloads · OpenSquawk'})
 
 const downloads = [
   {
@@ -241,7 +157,7 @@ const downloads = [
     status: 'Ready now',
     available: true,
     href: 'https://github.com/itsrubberduck/OpenSquawk-MSFS-Bridge/',
-    icon: 'plane',
+    icon: 'mdi-microsoft',
   },
   {
     id: 'msfs2024',
@@ -250,7 +166,7 @@ const downloads = [
     status: 'In development',
     available: false,
     href: '#',
-    icon: 'future',
+    icon: 'mdi-microsoft',
   },
   {
     id: 'xplane',
@@ -259,7 +175,7 @@ const downloads = [
     status: 'Planned',
     available: false,
     href: '#',
-    icon: 'xplane',
+    icon: 'mdi-airplane',
   },
 ]
 
@@ -268,19 +184,19 @@ const steps = [
     id: 1,
     title: 'Start the Bridge app',
     description: 'Launch the desktop Bridge. It drops a secure code and opens this page for you.',
-    icon: 'spark',
+    icon: 'mdi-desktop-mac',
   },
   {
     id: 2,
     title: 'Sign in & confirm',
     description: 'Log in with your OpenSquawk account and link the code in a single tap.',
-    icon: 'lock',
+    icon: 'mdi-account-check',
   },
   {
     id: 3,
     title: 'Fly like normal',
     description: 'Head back to the sim. The Bridge keeps your flights and status in sync automatically.',
-    icon: 'status',
+    icon: 'mdi-airplane-takeoff',
   },
 ]
 </script>