test preview
This commit is contained in:
225
KONZEPT.md
Normal file
225
KONZEPT.md
Normal file
@@ -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*
|
||||
|
||||
Reference in New Issue
Block a user