MediaMetz/customer-installer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
caa38bf72cdd1943337482aca79d576fcdb7fd91
customer-installer/botkonzept-website/index.html
Wolfgang caa38bf72c feat: Add complete BotKonzept SaaS platform 
- Landing page with registration form (HTML/CSS/JS)
- n8n workflows for customer registration and trial management
- PostgreSQL schema for customer/instance/payment management
- Automated email system (Day 3, 5, 7 with discounts)
- Setup script and deployment checklist
- Comprehensive documentation

Features:
- Automatic LXC instance creation per customer
- 7-day trial with automated upgrade offers
- Discount system: 30% → 15% → regular price
- Supabase integration for customer management
- Email automation via Postfix/SES
- GDPR compliant (data in Germany)
- Stripe/PayPal payment integration ready

Components:
- botkonzept-website/ - Landing page and registration
- BotKonzept-Customer-Registration-Workflow.json - n8n registration workflow
- BotKonzept-Trial-Management-Workflow.json - n8n trial management workflow
- sql/botkonzept_schema.sql - Complete database schema
- setup_botkonzept.sh - Automated setup script
- BOTKONZEPT_README.md - Full documentation
- DEPLOYMENT_CHECKLIST.md - Deployment guide
2026-01-25 19:30:54 +01:00

418 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BotKonzept - KI-Chatbot für Ihre Website in 7 Tagen kostenlos testen</title>
<meta name="description" content="Testen Sie Ihren eigenen KI-Chatbot 7 Tage kostenlos. Einfache Integration, leistungsstarke RAG-Technologie, keine Kreditkarte erforderlich.">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/svg+xml" href="../20250119_Logo_Botkozept.svg">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="nav-wrapper">
<a href="index.html" class="logo">
<img src="../20250119_Logo_Botkozept.svg" alt="BotKonzept Logo" height="40">
<span>BotKonzept</span>
</a>
<ul class="nav-menu">
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">So funktioniert's</a></li>
<li><a href="#pricing">Preise</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#trial" class="btn-primary">7 Tage kostenlos testen</a></li>
</ul>
<button class="mobile-menu-toggle" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1>Ihr KI-Chatbot in Minuten einsatzbereit</h1>
<p class="hero-subtitle">
Verwandeln Sie Ihre Dokumente in einen intelligenten Chatbot.
Keine Programmierung erforderlich. 7 Tage kostenlos testen.
</p>
<div class="hero-cta">
<a href="#trial" class="btn-primary btn-large">Jetzt kostenlos starten</a>
<a href="#how-it-works" class="btn-secondary btn-large">Mehr erfahren</a>
</div>
<div class="hero-features">
<div class="feature-badge">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="currentColor"/>
</svg>
<span>Keine Kreditkarte erforderlich</span>
</div>
<div class="feature-badge">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="currentColor"/>
</svg>
<span>In 5 Minuten eingerichtet</span>
</div>
<div class="feature-badge">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="currentColor"/>
</svg>
<span>DSGVO-konform</span>
</div>
</div>
</div>
<div class="hero-image">
<div class="chatbot-demo">
<div class="demo-header">
<div class="demo-dots">
<span></span>
<span></span>
<span></span>
</div>
<span class="demo-title">Ihr Chatbot</span>
</div>
<div class="demo-messages">
<div class="message bot">
<div class="avatar">🤖</div>
<div class="bubble">Hallo! Wie kann ich Ihnen helfen?</div>
</div>
<div class="message user">
<div class="bubble">Was sind Ihre Öffnungszeiten?</div>
<div class="avatar">👤</div>
</div>
<div class="message bot">
<div class="avatar">🤖</div>
<div class="bubble">Wir sind Mo-Fr von 9-18 Uhr für Sie da!</div>
</div>
</div>
<div class="demo-input">
<input type="text" placeholder="Ihre Frage..." disabled>
<button disabled>→</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<div class="section-header">
<h2>Leistungsstarke Features für Ihren Erfolg</h2>
<p>Alles, was Sie für einen professionellen KI-Chatbot benötigen</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📄</div>
<h3>Dokument-Upload</h3>
<p>Laden Sie PDFs, Word-Dokumente oder Texte hoch. Ihr Chatbot lernt automatisch aus Ihren Inhalten.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧠</div>
<h3>RAG-Technologie</h3>
<p>Modernste Retrieval-Augmented Generation für präzise und kontextbezogene Antworten.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Blitzschnelle Integration</h3>
<p>Ein einfacher Code-Snippet - fertig! Ihr Chatbot ist in Minuten auf Ihrer Website.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Anpassbares Design</h3>
<p>Passen Sie Farben, Logo und Texte an Ihre Marke an. Kein Entwickler erforderlich.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Analytics & Insights</h3>
<p>Verstehen Sie Ihre Kunden besser mit detaillierten Statistiken und Gesprächsverläufen.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>DSGVO-konform</h3>
<p>Ihre Daten bleiben in Deutschland. Volle DSGVO-Konformität garantiert.</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="how-it-works">
<div class="container">
<div class="section-header">
<h2>So einfach geht's</h2>
<p>In 4 Schritten zu Ihrem eigenen KI-Chatbot</p>
</div>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h3>Registrieren</h3>
<p>Erstellen Sie Ihr kostenloses Testkonto in wenigen Sekunden. Keine Kreditkarte erforderlich.</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h3>Dokumente hochladen</h3>
<p>Laden Sie Ihre PDFs, FAQs oder andere Dokumente hoch. Unser System verarbeitet sie automatisch.</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Code einbinden</h3>
<p>Kopieren Sie den generierten Code-Snippet und fügen Sie ihn auf Ihrer Website ein.</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h3>Fertig!</h3>
<p>Ihr KI-Chatbot ist live und beantwortet Kundenanfragen rund um die Uhr.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="pricing">
<div class="container">
<div class="section-header">
<h2>Transparente Preise</h2>
<p>Starten Sie kostenlos, upgraden Sie jederzeit</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-header">
<h3>Trial</h3>
<div class="price">
<span class="currency">€</span>
<span class="amount">0</span>
<span class="period">/7 Tage</span>
</div>
</div>
<ul class="pricing-features">
<li>✓ Voller Funktionsumfang</li>
<li>✓ Bis zu 100 Dokumente</li>
<li>✓ 1.000 Nachrichten/Monat</li>
<li>✓ E-Mail-Support</li>
<li>✓ Keine Kreditkarte erforderlich</li>
</ul>
<a href="#trial" class="btn-primary btn-block">Jetzt starten</a>
</div>
<div class="pricing-card featured">
<div class="badge">Beliebt</div>
<div class="pricing-header">
<h3>Starter</h3>
<div class="price">
<span class="currency">€</span>
<span class="amount">49</span>
<span class="period">/Monat</span>
</div>
<div class="price-note">Frühbucher-Rabatt: 30% in den ersten 3 Tagen</div>
</div>
<ul class="pricing-features">
<li>✓ Alle Trial-Features</li>
<li>✓ Unbegrenzte Dokumente</li>
<li>✓ 10.000 Nachrichten/Monat</li>
<li>✓ Prioritäts-Support</li>
<li>✓ Custom Branding</li>
<li>✓ Analytics Dashboard</li>
</ul>
<a href="#trial" class="btn-primary btn-block">Jetzt upgraden</a>
</div>
<div class="pricing-card">
<div class="pricing-header">
<h3>Business</h3>
<div class="price">
<span class="currency">€</span>
<span class="amount">149</span>
<span class="period">/Monat</span>
</div>
</div>
<ul class="pricing-features">
<li>✓ Alle Starter-Features</li>
<li>✓ 50.000 Nachrichten/Monat</li>
<li>✓ Mehrere Chatbots</li>
<li>✓ API-Zugriff</li>
<li>✓ Dedizierter Support</li>
<li>✓ SLA-Garantie</li>
</ul>
<a href="#trial" class="btn-secondary btn-block">Kontakt aufnehmen</a>
</div>
</div>
</div>
</section>
<!-- Trial Registration Section -->
<section id="trial" class="trial-registration">
<div class="container">
<div class="trial-content">
<div class="trial-info">
<h2>Starten Sie Ihren 7-Tage-Test</h2>
<p>Keine Kreditkarte erforderlich. Voller Funktionsumfang. Jederzeit kündbar.</p>
<ul class="trial-benefits">
<li>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Sofortiger Zugang zu Ihrer Instanz</span>
</li>
<li>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Persönliche Einrichtungs-Hilfe</span>
</li>
<li>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Exklusive Frühbucher-Rabatte</span>
</li>
</ul>
</div>
<div class="trial-form-wrapper">
<form id="trialForm" class="trial-form">
<h3>Kostenlos registrieren</h3>
<div class="form-group">
<label for="firstName">Vorname *</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">Nachname *</label>
<input type="text" id="lastName" name="lastName" required>
</div>
<div class="form-group">
<label for="email">E-Mail-Adresse *</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="company">Firma (optional)</label>
<input type="text" id="company" name="company">
</div>
<div class="form-group checkbox">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">
Ich akzeptiere die <a href="terms.html" target="_blank">AGB</a> und <a href="privacy.html" target="_blank">Datenschutzerklärung</a>
</label>
</div>
<button type="submit" class="btn-primary btn-block btn-large">
<span class="btn-text">Jetzt kostenlos starten</span>
<span class="btn-loading" style="display: none;">
<svg class="spinner" width="20" height="20" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle>
</svg>
Wird erstellt...
</span>
</button>
<p class="form-note">Nach der Registrierung erhalten Sie sofort Zugang zu Ihrer persönlichen Instanz.</p>
</form>
<div id="successMessage" class="success-message" style="display: none;">
<div class="success-icon">✓</div>
<h3>Willkommen bei BotKonzept!</h3>
<p>Ihre Instanz wird gerade erstellt. Sie erhalten in wenigen Minuten eine E-Mail mit allen Zugangsdaten.</p>
<div class="success-details">
<p><strong>Was passiert jetzt?</strong></p>
<ol>
<li>Wir erstellen Ihre persönliche KI-Instanz</li>
<li>Sie erhalten eine E-Mail mit Login-Daten</li>
<li>Sie können sofort loslegen!</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="faq">
<div class="container">
<div class="section-header">
<h2>Häufig gestellte Fragen</h2>
<p>Alles, was Sie wissen müssen</p>
</div>
<div class="faq-grid">
<div class="faq-item">
<h3>Brauche ich technische Kenntnisse?</h3>
<p>Nein! Sie müssen nur einen Code-Snippet auf Ihrer Website einfügen können. Alles andere übernehmen wir für Sie.</p>
</div>
<div class="faq-item">
<h3>Wie lange dauert die Einrichtung?</h3>
<p>Nach der Registrierung ist Ihre Instanz in ca. 5 Minuten einsatzbereit. Das Hochladen von Dokumenten dauert je nach Menge 1-10 Minuten.</p>
</div>
<div class="faq-item">
<h3>Kann ich jederzeit kündigen?</h3>
<p>Ja, Sie können jederzeit kündigen. Es gibt keine Mindestlaufzeit und keine versteckten Kosten.</p>
</div>
<div class="faq-item">
<h3>Wo werden meine Daten gespeichert?</h3>
<p>Alle Daten werden in Deutschland auf DSGVO-konformen Servern gespeichert. Ihre Daten gehören Ihnen.</p>
</div>
<div class="faq-item">
<h3>Welche Sprachen werden unterstützt?</h3>
<p>Der Chatbot unterstützt Deutsch, Englisch und viele weitere Sprachen. Die KI erkennt die Sprache automatisch.</p>
</div>
<div class="faq-item">
<h3>Was passiert nach dem Trial?</h3>
<p>Sie erhalten am Tag 3, 5 und 7 E-Mails mit Upgrade-Angeboten. Wenn Sie nicht upgraden, wird Ihre Instanz nach 7 Tagen gelöscht.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<img src="../20250119_Logo_Botkozept.svg" alt="BotKonzept Logo" height="30">
<p>KI-Chatbots für moderne Unternehmen</p>
</div>
<div class="footer-section">
<h4>Produkt</h4>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Preise</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="docs.html">Dokumentation</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Unternehmen</h4>
<ul>
<li><a href="about.html">Über uns</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Rechtliches</h4>
<ul>
<li><a href="terms.html">AGB</a></li>
<li><a href="privacy.html">Datenschutz</a></li>
<li><a href="imprint.html">Impressum</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 BotKonzept. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink