customer-frontend/README.md

# BotKonzept Frontend

Modernes, responsives Frontend für die BotKonzept SaaS-Plattform.

## 📁 Projektstruktur

```
customer-frontend/
├── index.html          # Landing Page mit Registrierung
├── dashboard.html      # Kunden-Dashboard
├── css/
│   ├── style.css       # Haupt-Stylesheet
│   └── dashboard.css   # Dashboard-spezifische Styles
├── js/
│   ├── main.js         # Landing Page JavaScript
│   └── dashboard.js    # Dashboard JavaScript
└── logo/
    └── 20250119_Logo_Botkozept.svg
```

## 🚀 Features

### Landing Page (index.html)
- ✅ Modernes, responsives Design
- ✅ Hero-Section mit animiertem Chat-Preview
- ✅ Feature-Übersicht
- ✅ "So funktioniert's" Sektion
- ✅ Pricing-Tabelle mit Rabatt-Timeline
- ✅ Registrierungsformular
- ✅ FAQ-Akkordeon
- ✅ Mobile-optimiert

### Dashboard (dashboard.html)
- ✅ Übersicht mit Statistiken
- ✅ PDF-Upload mit Drag & Drop
- ✅ Dokumenten-Verwaltung
- ✅ Chatbot-Test-Interface
- ✅ Embed-Code Generator
- ✅ Einstellungen
- ✅ Trial-Status & Upgrade-Banner

## 🎨 Design-System

### Farben
```css
--primary: #6366f1;      /* Indigo */
--secondary: #0ea5e9;    /* Sky Blue */
--accent: #f59e0b;       /* Amber */
--success: #10b981;      /* Emerald */
--error: #ef4444;        /* Red */
```

### Typografie
- Font: Inter (Google Fonts)
- Responsive Schriftgrößen mit `clamp()`

### Komponenten
- Buttons (Primary, Outline, White)
- Cards
- Forms
- Modals
- Notifications

## 🔧 Konfiguration

### API-Endpunkte

In `js/main.js`:
```javascript
const CONFIG = {
    WEBHOOK_URL: 'https://n8n.userman.de/webhook/botkonzept-registration',
    API_BASE_URL: 'https://api.botkonzept.de',
};
```

### Webhook-Integration

Das Registrierungsformular sendet folgende Daten an den Webhook:
```json
{
    "firstName": "Max",
    "lastName": "Mustermann",
    "email": "max@beispiel.de",
    "company": "Muster GmbH",
    "website": "https://beispiel.de",
    "newsletter": true,
    "timestamp": "2025-01-25T10:00:00.000Z",
    "source": "website"
}
```

## 📱 Responsive Breakpoints

- Desktop: > 1024px
- Tablet: 768px - 1024px
- Mobile: < 768px
- Small Mobile: < 480px

## 🚀 Deployment

### Lokales Testen
```bash
cd customer-frontend
python3 -m http.server 8000
# Öffnen: http://localhost:8000
```

### Produktion
```bash
# Dateien auf Webserver kopieren
rsync -avz . user@botkonzept.de:/var/www/botkonzept/
```

### NGINX Konfiguration
```nginx
server {
    listen 80;
    server_name botkonzept.de www.botkonzept.de;
    
    root /var/www/botkonzept;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Cache static assets
    location ~* \.(css|js|svg|png|jpg|jpeg|gif|ico)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}
```

## 🔒 Sicherheit

- HTTPS erforderlich für Produktion
- CORS-Header für API-Calls
- Input-Validierung auf Client-Seite
- XSS-Schutz durch HTML-Escaping

## 📊 Analytics

Google Analytics 4 Integration vorbereitet:
```html
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
```

Conversion-Tracking:
```javascript
trackConversion('registration_complete', { email: '...' });
```

## 🎯 Customer Journey

1. **Besucher** kommt auf botkonzept.de
2. **Registrierung** über Formular
3. **Instanz-Erstellung** (automatisch via n8n Workflow)
4. **Dashboard-Zugang** per E-Mail
5. **PDF-Upload** in Wissensdatenbank
6. **Embed-Code** für Website kopieren
7. **Trial-Reminder** (Tag 3, 5, 7)
8. **Upgrade** oder Ablauf

## 📝 TODO

- [ ] Stripe/PayPal Integration
- [ ] E-Mail-Verifizierung
- [ ] Passwort-Reset
- [ ] Multi-Language Support
- [ ] Dark Mode
- [ ] PWA Support

## 📄 Lizenz

Proprietär - Alle Rechte vorbehalten

---

**Version:** 1.0.0  
**Erstellt:** Januar 2025