# Design Spec: Landing Page & Shared Layout

**Datum:** 2026-04-27
**Status:** Genehmigt

---

## Ziel

Aufbau einer Landing Page mit gemeinsamem Layout-System für alle zukünftigen Seiten des University Process Hub (UPH). Das Layout ersetzt Bootstrap der Vorversion durch Tailwind CSS.

---

## Farbpalette

| Rolle | Farbe | Hex |
|---|---|---|
| Primär / Navbar | TH-Rot | `#e2001a` |
| Hintergrund Seite | Hellgrau | `#f5f5f5` |
| Hintergrund Karten / Navbar-Content | Weiß | `#ffffff` |
| Text primär | Fast-Schwarz | `#1a1a1a` |
| Text sekundär | Mittelgrau | `#666666` |
| Text deaktiviert / Labels | Hellgrau | `#888888` |
| Trennlinien / Borders | Sehr hell | `#e8e8e8` |
| Akzent hover (Karten) | Rot 12% opacity | `rgba(226,0,26,0.12)` |

Kein Dunkelgrau in der Navbar — Rot trägt allein die Markenpräsenz.

---

## Layout-System (Base Template)

**Aufbau jeder Seite (top → bottom):**

```
┌─────────────────────────────────────────┐
│  NAVBAR (rot, 56px)                     │
│  Logo · Nav-Links · Anmelden-Button     │
├─────────────────────────────────────────┤
│  PAGE CONTENT (slot — variabel)         │
│  - Hero / Section-Header               │
│  - Hauptinhalt                          │
├─────────────────────────────────────────┤
│  FOOTER (hellgrau, 44px)                │
│  Brand · Hochschulname · Version        │
└─────────────────────────────────────────┘
```

**Navbar-Details:**
- Hintergrund `#e2001a`
- Logo: `EFIHub` (Hub in 70% Opacity)
- Nav-Links: `rgba(255,255,255,0.85)`, aktiver Link weiß mit weißem Bottom-Border
- Login-Button: Ghost-Style (`rgba(255,255,255,0.15)`, weißer Border)
- Höhe: `56px`, Padding `0 32px`

**Footer:**
- Hintergrund `#f5f5f5`, Border-Top `#e0e0e0`
- Dreispaltiges Layout: Brand | Hochschulname | Version

---

## Landing Page

### Hero-Bereich
- Hintergrund Weiß, Border-Bottom `#e8e8e8`
- Kleines rotes Label oben: `Fakultät EFI · TH Nürnberg`
- H1: `University Process Hub`
- Beschreibungstext (max. 560px Breite)

### Modul-Karten
- 3-spaltiges Grid auf Desktop, responsive (2-spaltig tablet, 1-spaltig mobile)
- Weiße Karten, Border `#e8e8e8`, 3px roter Top-Stripe
- Hover: Schatten `rgba(226,0,26,0.12)`, Border-Farbe `#e2001a`
- Jede Karte: Icon · Name · Kurzbeschreibung · Status-Badge
- Status-Badges: Aktiv (grün), Geplant (grau), + leere Placeholder-Karte (gestrichelt)

### Info-Strip (zwischen Grid und Footer)
- Weiß, Border-Top `#e8e8e8`
- Systeminfos: API-Version, Datenbank-Modus, WebSocket-Status
- Rechts: `● System online` in Rot

---

## Template-Architektur

**Technologie:** Jinja2 (FastAPI-nativ) + Tailwind CSS via Play CDN (kein Build-Step nötig)

**Dateien:**
```
app/
├── templates/
│   ├── base.html          # Navbar + Footer + Tailwind-Imports
│   └── index.html         # Landing Page (extends base.html)
└── static/                # Für custom CSS / Assets (später)
```

**FastAPI-Integration:**
- `Jinja2Templates` in `main.py` konfigurieren
- `StaticFiles` für `app/static/` mounten
- `GET /` liefert `index.html` mit Modul-Liste aus Config

**Modul-Liste:** Zur Laufzeit aus einer Liste in `config.py` oder einem statischen Dict in `main.py` — kein DB-Zugriff auf der Landing Page.

---

## Responsive Breakpoints

| Breakpoint | Modul-Grid |
|---|---|
| `< 640px` | 1 Spalte |
| `640px – 1024px` | 2 Spalten |
| `> 1024px` | 3 Spalten |

---

## Out of Scope

- Authentifizierung (separates Modul)
- Dynamische Modul-Metadaten aus DB
- Dark Mode
- Animationen / Transitions