From d42d1510e98d91ca5555f631f8bd498867e6b1a2 Mon Sep 17 00:00:00 2001
From: CodingPhoenixx <jan.f.meinl@web.de>
Date: Fri, 13 Feb 2026 16:28:15 +0100
Subject: [PATCH] Reworked homepage

---
 flightscore/src/pages/home-page.ts | 629 ++++++++++++++++++++++++++++-
 1 file changed, 626 insertions(+), 3 deletions(-)

diff --git a/flightscore/src/pages/home-page.ts b/flightscore/src/pages/home-page.ts
index 45d0a06..afc691d 100644
--- a/flightscore/src/pages/home-page.ts
+++ b/flightscore/src/pages/home-page.ts
@@ -1,12 +1,635 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import '../components/ui-card';
+import '../components/ui-button';
+import '../components/ui-link';
 
 @customElement('home-page')
 export class HomePage extends LitElement {
+  static styles = css`
+    :host {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .hero {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: 5rem 1.5rem 4rem;
+      background:
+        radial-gradient(
+          ellipse at 40% 0%,
+          color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
+          transparent 55%
+        ),
+        radial-gradient(
+          ellipse at 80% 60%,
+          color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
+          transparent 50%
+        ),
+        var(--color-bg);
+      overflow: hidden;
+    }
+
+    .hero::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--color-border);
+    }
+
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.35rem 0.85rem;
+      font-size: 0.78rem;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      color: var(--color-accent);
+      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
+      border-radius: 2rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .hero-badge svg {
+      width: 0.85rem;
+      height: 0.85rem;
+    }
+
+    .hero h1 {
+      margin: 0;
+      font-size: clamp(2.2rem, 5vw, 3.5rem);
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      line-height: 1.1;
+      color: var(--color-text);
+      max-width: 700px;
+    }
+
+    .hero h1 span {
+      background: linear-gradient(
+        135deg,
+        var(--color-accent),
+        color-mix(in srgb, var(--color-accent) 60%, transparent)
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .hero-sub {
+      margin: 1.25rem 0 2rem;
+      font-size: 1.05rem;
+      line-height: 1.65;
+      color: color-mix(in srgb, var(--color-text) 60%, transparent);
+      max-width: 520px;
+    }
+
+    .hero-actions {
+      display: flex;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .btn-secondary {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.65rem 1.25rem;
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: var(--color-text);
+      background: transparent;
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      cursor: pointer;
+      transition:
+        border-color 0.25s ease,
+        color 0.25s ease,
+        background 0.25s ease;
+    }
+
+    .btn-secondary:hover {
+      border-color: var(--color-accent);
+      color: var(--color-accent);
+      background: color-mix(in srgb, var(--color-accent) 6%, transparent);
+    }
+
+    section {
+      padding: 4rem 1.5rem;
+      max-width: 1100px;
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    section + section {
+      border-top: 1px solid var(--color-border);
+    }
+
+    .section-label {
+      font-size: 0.78rem;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--color-accent);
+      margin: 0 0 0.5rem;
+    }
+
+    .section-title {
+      margin: 0 0 0.5rem;
+      font-size: 1.75rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      color: var(--color-text);
+    }
+
+    .section-desc {
+      margin: 0 0 2.5rem;
+      font-size: 0.95rem;
+      color: color-mix(in srgb, var(--color-text) 55%, transparent);
+      max-width: 520px;
+      line-height: 1.6;
+    }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 1rem;
+    }
+
+    .stat-card {
+      background: var(--color-bg-nav);
+      border: 1px solid var(--color-border);
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      transition: border-color 0.25s ease;
+    }
+
+    .stat-card:hover {
+      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
+    }
+
+    .stat-value {
+      font-size: 2rem;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      color: var(--color-accent);
+    }
+
+    .stat-label {
+      font-size: 0.85rem;
+      color: color-mix(in srgb, var(--color-text) 55%, transparent);
+      font-weight: 500;
+    }
+
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.25rem;
+    }
+
+    .feature-card {
+      background: var(--color-bg-nav);
+      border: 1px solid var(--color-border);
+      border-radius: 0.75rem;
+      padding: 1.75rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      transition: border-color 0.25s ease;
+    }
+
+    .feature-card:hover {
+      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
+    }
+
+    .feature-icon {
+      width: 2.25rem;
+      height: 2.25rem;
+      display: grid;
+      place-items: center;
+      border-radius: 0.5rem;
+      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+      color: var(--color-accent);
+    }
+
+    .feature-icon svg {
+      width: 1.15rem;
+      height: 1.15rem;
+    }
+
+    .feature-card h3 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 650;
+      color: var(--color-text);
+    }
+
+    .feature-card p {
+      margin: 0;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      color: color-mix(in srgb, var(--color-text) 55%, transparent);
+    }
+
+    .competitions-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .comp-row {
+      display: flex;
+      align-items: center;
+      gap: 1.25rem;
+      background: var(--color-bg-nav);
+      border: 1px solid var(--color-border);
+      border-radius: 0.75rem;
+      padding: 1.25rem 1.5rem;
+      transition: border-color 0.25s ease;
+      cursor: pointer;
+    }
+
+    .comp-row:hover {
+      border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
+    }
+
+    .comp-date {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 3.5rem;
+      padding: 0.5rem 0.65rem;
+      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+      border-radius: 0.5rem;
+      flex-shrink: 0;
+    }
+
+    .comp-date-day {
+      font-size: 1.25rem;
+      font-weight: 800;
+      color: var(--color-accent);
+      line-height: 1;
+    }
+
+    .comp-date-month {
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--color-accent);
+      margin-top: 0.15rem;
+    }
+
+    .comp-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+    }
+
+    .comp-name {
+      font-size: 1rem;
+      font-weight: 650;
+      color: var(--color-text);
+    }
+
+    .comp-location {
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+      font-size: 0.82rem;
+      color: color-mix(in srgb, var(--color-text) 50%, transparent);
+    }
+
+    .comp-location svg {
+      width: 0.8rem;
+      height: 0.8rem;
+      flex-shrink: 0;
+    }
+
+    .comp-badge {
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      padding: 0.3rem 0.7rem;
+      border-radius: 2rem;
+      flex-shrink: 0;
+    }
+
+    .comp-badge.upcoming {
+      color: var(--color-accent);
+      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+      border: 1px solid
+        color-mix(in srgb, var(--color-accent) 25%, transparent);
+    }
+
+    .comp-badge.live {
+      color: #30a46c;
+      background: color-mix(in srgb, #30a46c 10%, transparent);
+      border: 1px solid color-mix(in srgb, #30a46c 25%, transparent);
+    }
+
+    .comp-badge.ended {
+      color: color-mix(in srgb, var(--color-text) 45%, transparent);
+      background: color-mix(in srgb, var(--color-text) 6%, transparent);
+      border: 1px solid var(--color-border);
+    }
+
+    @media (max-width: 600px) {
+      .hero {
+        padding: 3.5rem 1.25rem 3rem;
+      }
+
+      section {
+        padding: 3rem 1.25rem;
+      }
+
+      .comp-row {
+        flex-wrap: wrap;
+        gap: 0.75rem;
+      }
+
+      .comp-badge {
+        margin-left: auto;
+      }
+    }
+  `;
+
+  private navigate(path: string) {
+    this.dispatchEvent(
+      new CustomEvent('nav', {
+        detail: { path },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   render() {
     return html`
-      <h1>Welcome to the Balloon Tracker</h1>
-      <p>Analyze your tracks visually.</p>
+      <div class="hero">
+        <div class="hero-badge">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2L2 7l10 5 10-5-10-5z" />
+            <path d="M2 17l10 5 10-5" />
+            <path d="M2 12l10 5 10-5" />
+          </svg>
+          Live Scoring Platform
+        </div>
+        <h1>Precision scoring for <span>balloon competitions</span></h1>
+        <p class="hero-sub">
+          Track tasks, manage participants, and deliver real-time results
+          for hot air balloon competitions worldwide.
+        </p>
+        <div class="hero-actions">
+          <ui-button @click=${() => this.navigate('/competitions')}>
+            Browse competitions
+          </ui-button>
+          <button
+            class="btn-secondary"
+            @click=${() => this.navigate('/register')}
+          >
+            Create account
+          </button>
+        </div>
+      </div>
+
+      <section>
+        <p class="section-label">At a glance</p>
+        <h2 class="section-title">Platform in numbers</h2>
+        <p class="section-desc">
+          FlightScore powers balloon competitions across the globe.
+        </p>
+        <div class="stats-grid">
+          <div class="stat-card">
+            <span class="stat-value">42</span>
+            <span class="stat-label">Competitions scored</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">318</span>
+            <span class="stat-label">Registered pilots</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">1,240</span>
+            <span class="stat-label">Tasks completed</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">12</span>
+            <span class="stat-label">Countries</span>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <p class="section-label">Features</p>
+        <h2 class="section-title">Built for balloon events</h2>
+        <p class="section-desc">
+          Everything organizers, judges, and pilots need in one place.
+        </p>
+        <div class="features-grid">
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10" />
+                <polyline points="12 6 12 12 16 14" />
+              </svg>
+            </div>
+            <h3>Real-Time Scoring</h3>
+            <p>
+              Scores update live as judges submit results. Pilots and
+              spectators always see the latest standings.
+            </p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="16" y1="13" x2="8" y2="13" />
+                <line x1="16" y1="17" x2="8" y2="17" />
+                <polyline points="10 9 9 9 8 9" />
+              </svg>
+            </div>
+            <h3>Task Management</h3>
+            <p>
+              Define and manage competition tasks with support for all
+              standard ballooning task types.
+            </p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M23 21v-2a4 4 0 00-3-3.87" />
+                <path d="M16 3.13a4 4 0 010 7.75" />
+              </svg>
+            </div>
+            <h3>Pilot Profiles</h3>
+            <p>
+              Every pilot gets a profile with competition history,
+              rankings, and performance statistics.
+            </p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
+                <path d="M16 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2" />
+                <line x1="8" y1="21" x2="8" y2="16" />
+                <line x1="4" y1="21" x2="12" y2="21" />
+              </svg>
+            </div>
+            <h3>Live Leaderboard</h3>
+            <p>
+              Public leaderboards let spectators follow the action
+              from anywhere in the world.
+            </p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+                <circle cx="12" cy="10" r="3" />
+              </svg>
+            </div>
+            <h3>GPS Integration</h3>
+            <p>
+              Import GPS tracks and calculate distances to targets
+              automatically for precise scoring.
+            </p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <line x1="3" y1="9" x2="21" y2="9" />
+                <line x1="9" y1="21" x2="9" y2="9" />
+              </svg>
+            </div>
+            <h3>Result Export</h3>
+            <p>
+              Export final standings and detailed score sheets as PDF
+              or CSV for official records.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <p class="section-label">Competitions</p>
+        <h2 class="section-title">Upcoming and recent events</h2>
+        <p class="section-desc">
+          Discover balloon competitions scored with FlightScore.
+        </p>
+        <div class="competitions-list">
+          <div
+            class="comp-row"
+            @click=${() => this.navigate('/competitions/1')}
+          >
+            <div class="comp-date">
+              <span class="comp-date-day">18</span>
+              <span class="comp-date-month">Mar</span>
+            </div>
+            <div class="comp-info">
+              <span class="comp-name"
+                >European Balloon Challenge 2026</span
+              >
+              <span class="comp-location">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+                  <circle cx="12" cy="10" r="3" />
+                </svg>
+                Salzburg, Austria
+              </span>
+            </div>
+            <span class="comp-badge upcoming">Upcoming</span>
+          </div>
+
+          <div
+            class="comp-row"
+            @click=${() => this.navigate('/competitions/2')}
+          >
+            <div class="comp-date">
+              <span class="comp-date-day">14</span>
+              <span class="comp-date-month">Feb</span>
+            </div>
+            <div class="comp-info">
+              <span class="comp-name">Cappadocia Open 2026</span>
+              <span class="comp-location">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+                  <circle cx="12" cy="10" r="3" />
+                </svg>
+                Goreme, Turkey
+              </span>
+            </div>
+            <span class="comp-badge live">Live</span>
+          </div>
+
+          <div
+            class="comp-row"
+            @click=${() => this.navigate('/competitions/3')}
+          >
+            <div class="comp-date">
+              <span class="comp-date-day">02</span>
+              <span class="comp-date-month">Feb</span>
+            </div>
+            <div class="comp-info">
+              <span class="comp-name"
+                >Albuquerque Winter Fiesta</span
+              >
+              <span class="comp-location">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+                  <circle cx="12" cy="10" r="3" />
+                </svg>
+                New Mexico, USA
+              </span>
+            </div>
+            <span class="comp-badge ended">Ended</span>
+          </div>
+
+          <div
+            class="comp-row"
+            @click=${() => this.navigate('/competitions/4')}
+          >
+            <div class="comp-date">
+              <span class="comp-date-day">11</span>
+              <span class="comp-date-month">Jan</span>
+            </div>
+            <div class="comp-info">
+              <span class="comp-name"
+                >Swiss Alpine Balloon Trophy</span
+              >
+              <span class="comp-location">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+                  <circle cx="12" cy="10" r="3" />
+                </svg>
+                Chateau-d'Oex, Switzerland
+              </span>
+            </div>
+            <span class="comp-badge ended">Ended</span>
+          </div>
+        </div>
+      </section>
     `;
   }
 }
\ No newline at end of file