[DOCS] Overhaul new-user onboarding, home page, and upload flow (#2347)

Getting started:
- New 15-minute Getting Started guide featuring the two most popular
  tracks (BLE on esp32dev-ble, RF on lilygo-rtl_433), with broker setup
  and a verification step
- Sidebar restructured around the new-user journey; upload options
  numbered by ease; Gitpod upload method removed

Home page:
- VitePress hero with clear actions, larger hero image
- How-it-works pipeline diagram shared as a component (responsive via
  container queries), use-case grid, bigger video tiles without the
  image lightbox, refreshed press coverage list, functions pills
- Support section pointing to Theengs Bridge and
  github.com/sponsors/1technophile

Upload flow:
- Decision-oriented upload landing page (journey strip, method cards,
  comparison table)
- Pre-flight checklist and driver troubleshooting on the web installer
- Guided environment picker (bridge + hardware wizard) replacing the
  filter chips, with manifest-verified recommendations
- Post-flash next-steps card linking to the portal and verification

Board images:
- custom_img key in environments.ini and board photos for all
  web-flashable environments (licenses recorded); private prod_env.ini
  environments excluded from boards-info.json

Corrections:
- RF frequency coverage stated as 433/315/868/915MHz
- Removed references to the retired compatible.openmqttgateway.com
  site (BLE list is decoder.theengs.io), the discontinued Theengs
  Plug, and the private sponsor forum


Claude-Session: https://claude.ai/code/session_01TYysQW8tpmt1dWWuzKhTLi

Co-authored-by: Florian <1technophile@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

docs/.vitepress/components/OmgPipeline.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="omg-pipeline-wrap">
+    <div class="omg-pipeline">
+      <div class="omg-node">
+        <span class="omg-node-icon">🌡️</span>
+        <strong>Your devices</strong>
+        <span class="omg-node-sub">BLE · RF · IR · LoRa</span>
+      </div>
+      <span class="omg-arrow">⇄</span>
+      <div class="omg-node omg-node-brand">
+        <span class="omg-node-icon">📟</span>
+        <strong>OpenMQTTGateway</strong>
+        <span class="omg-node-sub">ESP32 / ESP8266</span>
+      </div>
+      <span class="omg-arrow">⇄</span>
+      <div class="omg-node">
+        <span class="omg-node-icon">🔀</span>
+        <strong>MQTT broker</strong>
+        <span class="omg-node-sub">Mosquitto...</span>
+      </div>
+      <span class="omg-arrow">⇄</span>
+      <div class="omg-node">
+        <span class="omg-node-icon">🏠</span>
+        <strong>Your controller</strong>
+        <span class="omg-node-sub">Home Assistant, OpenHAB...</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.omg-pipeline-wrap {
+  container-type: inline-size;
+  margin: 24px 0;
+}
+
+.omg-pipeline {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.omg-node {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 4px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 20px 10px;
+}
+
+.omg-node-brand {
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 0 0 1px var(--vp-c-brand-1);
+}
+
+.omg-node-icon {
+  font-size: 28px;
+}
+
+.omg-node strong {
+  font-size: 15px;
+  line-height: 1.3;
+}
+
+.omg-node-sub {
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+}
+
+.omg-arrow {
+  align-self: center;
+  flex-shrink: 0;
+  color: var(--vp-c-brand-1);
+  font-size: 20px;
+  font-weight: 700;
+}
+
+/* Narrow containers (doc column, tablets): tighten the nodes, keep one row */
+@container (max-width: 760px) {
+  .omg-pipeline {
+    gap: 6px;
+  }
+  .omg-node {
+    padding: 12px 6px;
+  }
+  .omg-node strong {
+    font-size: 13px;
+  }
+  .omg-node-sub {
+    font-size: 11px;
+  }
+  .omg-node-icon {
+    font-size: 22px;
+  }
+  .omg-arrow {
+    font-size: 16px;
+  }
+}
+
+/* Very narrow (phones): stack vertically */
+@container (max-width: 480px) {
+  .omg-pipeline {
+    flex-direction: column;
+  }
+  .omg-arrow {
+    transform: rotate(90deg);
+  }
+  .omg-node strong {
+    font-size: 15px;
+  }
+  .omg-node-sub {
+    font-size: 13px;
+  }
+}
+</style>