webklar.com-v2-beta/KONZEPT.md

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 ✅

• Projekt-Setup (Vite + TypeScript + Tailwind)
• Farbschema konfigurieren
• Logo-Komponente erstellen
• Header/Navigation
• Hero-Section (Basis)
• Hero-Section updaten mit neuem Messaging
• Service-Tags hinzufügen (Website | Backend | Hosting | Support)

Phase 2: Konfigurator ✅

• Konfigurator-Layout (Split: Formular + Live-Preview)
• Schritt 1: Website-Typ Auswahl (6 Optionen)
• Schritt 2: Stil-Auswahl (5 Optionen)
• Custom-Option (Referenz-Link, Beschreibung, Bild-Upload)
• Schritt 3: Farbauswahl
  • Logo-Upload mit automatischer Farb-Extraktion
  • RGB Color Picker (max. 3 Farben)
  • Hell/Dunkel Toggle
• Live-Preview Komponente
• 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