test preview

2026-01-07 18:08:21 +01:00
commit f9cbf35e6d
58 changed files with 15416 additions and 0 deletions
--- a/webklar/KONZEPT.md
+++ b/webklar/KONZEPT.md
@@ -0,0 +1,225 @@
+# 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*
+