226 lines
5.6 KiB
Markdown
226 lines
5.6 KiB
Markdown
# 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*
|
||
|