# webklar - Konzept & Spezifikation

> Full-Stack Digitalagentur mit produktisiertem Website-Service

---

## Geschäftsmodell

### Hauptprodukt: Website in 48h

| Detail | Wert |
|--------|------|
| **Preis** | 199€ (Festpreis) |
| **Lieferzeit** | 48 Stunden |
| **Zahlung** | 100% Vorkasse (Online) |
| **Technologie** | AI-gestützt |
| **Änderungen** | X Runden inklusive |

### Optionales Hosting (Hybrid-Modell)

| Detail | Wert |
|--------|------|
| **Preis** | 30-100€/Monat |
| **Anbieter** | Hetzner (Managed) |
| **Status** | Optional - Kunde kann auch selbst hosten |
| **Enthält** | Server, Updates, Backups |

---

## Website-Konfigurator

### Übersicht

```
┌──────────────────────┬──────────────────────┐
│                      │                      │
│   FORMULAR           │   LIVE-PREVIEW       │
│                      │                      │
│   1. Typ wählen      │   [Website ändert    │
│   2. Stil wählen     │    sich in           │
│   3. Farben/Logo     │    Echtzeit]         │
│   4. Hell/Dunkel     │                      │
│                      │                      │
│   [💳 199€ kaufen]   │                      │
│                      │                      │
└──────────────────────┴──────────────────────┘
```

### Schritt 1: Website-Typ (6 Optionen)

| Typ | Icon | Beschreibung |
|-----|------|--------------|
| **eCommerce** | 🛒 | Online-Shop |
| **Scheduling** | 📅 | Terminbuchung (Ärzte, Friseure, etc.) |
| **Portfolio** | 🎨 | Kreative, Freelancer |
| **Blog** | 📝 | Content-Creator, Blogger |
| **Online courses** | 🎓 | Kurse verkaufen |
| **Events** | 🎉 | Veranstaltungen, Tickets |

### Schritt 2: Design-Stil (5 Optionen)

| Stil | Beschreibung |
|------|--------------|
| **Modern / Clean** | Zeitlos, professionell |
| **Bold / Auffällig** | Hebt sich ab, Marketing |
| **Elegant / Luxus** | Premium, hochwertig |
| **Minimalistisch** | Reduziert, viel Weißraum |
| **Custom** | Eigene Vorstellung |

#### Custom-Optionen (wenn gewählt):

- 🔗 **Referenz-Link** - URL einer Website als Inspiration
- 📝 **Beschreibung** - Freitext
- 🖼️ **Bild hochladen** - Screenshot, Moodboard, etc.

### Schritt 3: Farben

#### Option A: Logo hochladen
```
[Logo hochladen]
       ↓
Farben werden automatisch extrahiert
       ↓
[Hell ○ / Dunkel ○]  ← Kunde kann überschreiben
```

#### Option B: Farben selbst wählen
```
[Farbe 1] ← RGB Picker (Primärfarbe) - Pflicht
[Farbe 2] ← RGB Picker (Sekundärfarbe) - Optional
[Farbe 3] ← RGB Picker (Akzentfarbe) - Optional

Max. 3 Farben
       ↓
[Hell ○ / Dunkel ○]
```

### Schritt 4: Bezahlen

- Online-Zahlung (Stripe/PayPal)
- 100% Vorkasse
- Sofortige Bestätigung
- Lieferung in 48h

---

## Positionierung

### USP (Unique Selling Points)

1. **Schnell** - 48h Lieferzeit
2. **100% individuell** - Keine Templates
3. **AI-gestützt** - Effizient & modern
4. **Festpreis** - Keine versteckten Kosten

### Konkurrenz

Kunden vergleichen mit:
- Wix
- Squarespace
- Jimdo
- Shopify

### Hauptargument gegen Baukästen

> "100% individuelles Design – keine Template-Grenzen"

### Zielgruppe

- Alle (flexibel)
- Hauptsächlich: Kleine Unternehmen, Selbstständige, Startups

---

## Branding

### Tonfall

**Locker & unkompliziert** - aber professionell

### Slogan

> "webklar – das Web maßgeschneidert auf Ihr Unternehmen"

### Untertitel

> "Wir übernehmen die Technik, Sie konzentrieren sich aufs Geschäft"

### Farbschema

| Farbe | Hex | Verwendung |
|-------|-----|------------|
| Primary | `#0A400C` | Buttons, Akzente (Dunkelgrün) |
| Secondary | `#819067` | Hover-States, Sekundärtexte (Mittelgrün) |
| Tertiary | `#B1AB86` | Dekorative Elemente (Hellgrün-Beige) |
| Background | `#FEFAE0` | Seitenhintergrund (Creme) |

---

## Technologie

### Frontend

- **Framework**: Vite + React
- **Sprache**: TypeScript
- **Styling**: Tailwind CSS
- **Ziel**: Ressourcensparend

### Hosting (für Kunden)

- **Anbieter**: Hetzner
- **Verwaltung**: Komplett durch webklar (Kunde sieht nur "webklar")

---

## Nächste Schritte

### Phase 1: Landing Page ✅
- [x] Projekt-Setup (Vite + TypeScript + Tailwind)
- [x] Farbschema konfigurieren
- [x] Logo-Komponente erstellen
- [x] Header/Navigation
- [x] Hero-Section (Basis)
- [x] Hero-Section updaten mit neuem Messaging
- [x] Service-Tags hinzufügen (Website | Backend | Hosting | Support)

### Phase 2: Konfigurator ✅
- [x] Konfigurator-Layout (Split: Formular + Live-Preview)
- [x] Schritt 1: Website-Typ Auswahl (6 Optionen)
- [x] Schritt 2: Stil-Auswahl (5 Optionen)
- [x] Custom-Option (Referenz-Link, Beschreibung, Bild-Upload)
- [x] Schritt 3: Farbauswahl
  - [x] Logo-Upload mit automatischer Farb-Extraktion
  - [x] RGB Color Picker (max. 3 Farben)
  - [x] Hell/Dunkel Toggle
- [x] Live-Preview Komponente
- [x] Preview reagiert auf alle Auswahlen in Echtzeit

### Phase 3: Checkout & Payment
- [ ] Stripe-Integration
- [ ] Checkout-Flow
- [ ] Bestätigungs-E-Mail
- [ ] Auftrags-Dashboard (Admin)

### Phase 4: Backend
- [ ] Auftragsverarbeitung
- [ ] Kunden-Datenbank
- [ ] AI-Integration für Website-Generierung
- [ ] Delivery-System (48h Timer)

### Phase 5: Hosting-Addon
- [ ] Hetzner-Integration
- [ ] Server-Provisioning
- [ ] Domain-Verwaltung
- [ ] Monatliche Abrechnung

### Phase 6: Polish & UX
- [ ] Dark Mode (automatisch nach System-Einstellung via `prefers-color-scheme`)

---

*Erstellt am: 06.01.2026*
*Version: 1.0*
*Zuletzt aktualisiert: 06.01.2026*