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

--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:

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:

{
    "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

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

Produktion

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

NGINX Konfiguration

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:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

Conversion-Tracking:

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