596 lines
29 KiB
HTML
596 lines
29 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="de">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta name="description" content="BotKonzept - Ihr KI-Chatbot für die Website. Einfach einrichten, PDF hochladen, fertig!">
|
|||
|
|
<meta name="keywords" content="KI Chatbot, Website Chatbot, RAG, PDF Chatbot, Kundenservice Automation">
|
|||
|
|
<title>BotKonzept - KI-Chatbot für Ihre Website</title>
|
|||
|
|
|
|||
|
|
<!-- Favicon -->
|
|||
|
|
<link rel="icon" type="image/svg+xml" href="logo/20250119_Logo_Botkozept.svg">
|
|||
|
|
|
|||
|
|
<!-- Google Fonts -->
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<!-- Font Awesome -->
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|||
|
|
|
|||
|
|
<!-- Custom CSS -->
|
|||
|
|
<link rel="stylesheet" href="css/style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Navigation -->
|
|||
|
|
<nav class="navbar" id="navbar">
|
|||
|
|
<div class="container">
|
|||
|
|
<a href="#" class="logo">
|
|||
|
|
<img src="logo/20250119_Logo_Botkozept.svg" alt="BotKonzept Logo">
|
|||
|
|
<span>BotKonzept</span>
|
|||
|
|
</a>
|
|||
|
|
<div class="nav-links" id="navLinks">
|
|||
|
|
<a href="#features">Features</a>
|
|||
|
|
<a href="#how-it-works">So funktioniert's</a>
|
|||
|
|
<a href="#pricing">Preise</a>
|
|||
|
|
<a href="#faq">FAQ</a>
|
|||
|
|
<a href="#register" class="btn btn-primary btn-sm">Kostenlos testen</a>
|
|||
|
|
</div>
|
|||
|
|
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Menü öffnen">
|
|||
|
|
<i class="fas fa-bars"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- Hero Section -->
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<div class="hero-badge">
|
|||
|
|
<i class="fas fa-rocket"></i>
|
|||
|
|
<span>7 Tage kostenlos testen</span>
|
|||
|
|
</div>
|
|||
|
|
<h1>Ihr intelligenter <span class="gradient-text">KI-Chatbot</span> für die Website</h1>
|
|||
|
|
<p class="hero-subtitle">
|
|||
|
|
Laden Sie einfach Ihre PDFs hoch und Ihr Chatbot beantwortet Kundenfragen automatisch.
|
|||
|
|
Keine Programmierung erforderlich – in 5 Minuten einsatzbereit.
|
|||
|
|
</p>
|
|||
|
|
<div class="hero-cta">
|
|||
|
|
<a href="#register" class="btn btn-primary btn-lg">
|
|||
|
|
<i class="fas fa-play"></i>
|
|||
|
|
Jetzt kostenlos starten
|
|||
|
|
</a>
|
|||
|
|
<a href="#how-it-works" class="btn btn-outline btn-lg">
|
|||
|
|
<i class="fas fa-info-circle"></i>
|
|||
|
|
Mehr erfahren
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="hero-stats">
|
|||
|
|
<div class="stat">
|
|||
|
|
<span class="stat-number">5 Min</span>
|
|||
|
|
<span class="stat-label">Setup-Zeit</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat">
|
|||
|
|
<span class="stat-number">100%</span>
|
|||
|
|
<span class="stat-label">DSGVO-konform</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat">
|
|||
|
|
<span class="stat-number">24/7</span>
|
|||
|
|
<span class="stat-label">Verfügbar</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="hero-visual">
|
|||
|
|
<div class="chat-preview">
|
|||
|
|
<div class="chat-header">
|
|||
|
|
<div class="chat-avatar">
|
|||
|
|
<i class="fas fa-robot"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-info">
|
|||
|
|
<span class="chat-name">BotKonzept Assistent</span>
|
|||
|
|
<span class="chat-status"><i class="fas fa-circle"></i> Online</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-messages">
|
|||
|
|
<div class="message bot">
|
|||
|
|
<p>Hallo! 👋 Wie kann ich Ihnen heute helfen?</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="message user">
|
|||
|
|
<p>Was sind Ihre Öffnungszeiten?</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="message bot">
|
|||
|
|
<p>Unsere Öffnungszeiten sind Montag bis Freitag von 9:00 bis 18:00 Uhr. Am Wochenende sind wir geschlossen.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="message user">
|
|||
|
|
<p>Wie kann ich eine Bestellung aufgeben?</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="message bot typing">
|
|||
|
|
<span class="typing-indicator">
|
|||
|
|
<span></span><span></span><span></span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-input">
|
|||
|
|
<input type="text" placeholder="Nachricht eingeben...">
|
|||
|
|
<button><i class="fas fa-paper-plane"></i></button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="hero-bg">
|
|||
|
|
<div class="gradient-orb orb-1"></div>
|
|||
|
|
<div class="gradient-orb orb-2"></div>
|
|||
|
|
<div class="gradient-orb orb-3"></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Trusted By Section -->
|
|||
|
|
<section class="trusted-by">
|
|||
|
|
<div class="container">
|
|||
|
|
<p class="trusted-label">Vertraut von innovativen Unternehmen</p>
|
|||
|
|
<div class="trusted-logos">
|
|||
|
|
<div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen A</div>
|
|||
|
|
<div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen B</div>
|
|||
|
|
<div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen C</div>
|
|||
|
|
<div class="logo-placeholder"><i class="fas fa-building"></i> Unternehmen D</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Features Section -->
|
|||
|
|
<section class="features" id="features">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<span class="section-badge">Features</span>
|
|||
|
|
<h2>Alles was Sie für einen erfolgreichen Chatbot brauchen</h2>
|
|||
|
|
<p>Leistungsstarke Funktionen, die Ihren Kundenservice revolutionieren</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="features-grid">
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">
|
|||
|
|
<i class="fas fa-file-pdf"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>PDF-Upload</h3>
|
|||
|
|
<p>Laden Sie einfach Ihre Dokumente hoch. Der Chatbot lernt automatisch aus Ihren Inhalten.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">
|
|||
|
|
<i class="fas fa-brain"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>KI-gestützte Antworten</h3>
|
|||
|
|
<p>Modernste KI-Technologie für natürliche und präzise Antworten auf Kundenfragen.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">
|
|||
|
|
<i class="fas fa-code"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>Einfache Integration</h3>
|
|||
|
|
<p>Ein Zeile Code – mehr brauchen Sie nicht. Funktioniert mit jeder Website.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">
|
|||
|
|
<i class="fas fa-shield-alt"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>DSGVO-konform</h3>
|
|||
|
|
<p>Alle Daten werden in Deutschland gehostet. 100% DSGVO-konform.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">
|
|||
|
|
<i class="fas fa-palette"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>Anpassbares Design</h3>
|
|||
|
|
<p>Passen Sie Farben und Stil an Ihre Marke an. Ihr Chatbot, Ihr Look.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">
|
|||
|
|
<i class="fas fa-chart-line"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>Analytics Dashboard</h3>
|
|||
|
|
<p>Verstehen Sie, was Ihre Kunden fragen. Detaillierte Statistiken und Insights.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- How It Works Section -->
|
|||
|
|
<section class="how-it-works" id="how-it-works">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<span class="section-badge">So funktioniert's</span>
|
|||
|
|
<h2>In 3 einfachen Schritten zum eigenen KI-Chatbot</h2>
|
|||
|
|
<p>Keine technischen Kenntnisse erforderlich</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 Konto in weniger als einer Minute. Keine Kreditkarte erforderlich.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-icon">
|
|||
|
|
<i class="fas fa-user-plus"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-connector"></div>
|
|||
|
|
<div class="step">
|
|||
|
|
<div class="step-number">2</div>
|
|||
|
|
<div class="step-content">
|
|||
|
|
<h3>PDFs hochladen</h3>
|
|||
|
|
<p>Laden Sie Ihre Dokumente hoch – FAQs, Produktinfos, Anleitungen. Der Bot lernt automatisch.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-icon">
|
|||
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-connector"></div>
|
|||
|
|
<div class="step">
|
|||
|
|
<div class="step-number">3</div>
|
|||
|
|
<div class="step-content">
|
|||
|
|
<h3>Code einbinden</h3>
|
|||
|
|
<p>Kopieren Sie den Code-Snippet und fügen Sie ihn in Ihre Website ein. Fertig!</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-icon">
|
|||
|
|
<i class="fas fa-code"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="code-preview">
|
|||
|
|
<div class="code-header">
|
|||
|
|
<span class="code-dot red"></span>
|
|||
|
|
<span class="code-dot yellow"></span>
|
|||
|
|
<span class="code-dot green"></span>
|
|||
|
|
<span class="code-title">Ihr Embed-Code</span>
|
|||
|
|
</div>
|
|||
|
|
<pre><code><script src="https://botkonzept.de/embed/IHRE-ID.js"></script></code></pre>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Pricing Section -->
|
|||
|
|
<section class="pricing" id="pricing">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<span class="section-badge">Preise</span>
|
|||
|
|
<h2>Transparente Preise, keine versteckten Kosten</h2>
|
|||
|
|
<p>Starten Sie kostenlos und upgraden Sie, wenn Sie bereit sind</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="pricing-grid">
|
|||
|
|
<!-- Trial Plan -->
|
|||
|
|
<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>
|
|||
|
|
<p class="pricing-description">Perfekt zum Testen</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="pricing-features">
|
|||
|
|
<li><i class="fas fa-check"></i> 100 Dokumente</li>
|
|||
|
|
<li><i class="fas fa-check"></i> 1.000 Nachrichten</li>
|
|||
|
|
<li><i class="fas fa-check"></i> 1 Chatbot</li>
|
|||
|
|
<li><i class="fas fa-check"></i> Standard Support</li>
|
|||
|
|
<li class="disabled"><i class="fas fa-times"></i> Custom Branding</li>
|
|||
|
|
<li class="disabled"><i class="fas fa-times"></i> Analytics</li>
|
|||
|
|
</ul>
|
|||
|
|
<a href="#register" class="btn btn-outline btn-block">Kostenlos starten</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Starter Plan -->
|
|||
|
|
<div class="pricing-card featured">
|
|||
|
|
<div class="pricing-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>
|
|||
|
|
<p class="pricing-description">Für kleine Unternehmen</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="pricing-features">
|
|||
|
|
<li><i class="fas fa-check"></i> Unbegrenzte Dokumente</li>
|
|||
|
|
<li><i class="fas fa-check"></i> 10.000 Nachrichten/Monat</li>
|
|||
|
|
<li><i class="fas fa-check"></i> 1 Chatbot</li>
|
|||
|
|
<li><i class="fas fa-check"></i> Prioritäts-Support</li>
|
|||
|
|
<li><i class="fas fa-check"></i> Custom Branding</li>
|
|||
|
|
<li><i class="fas fa-check"></i> Analytics Dashboard</li>
|
|||
|
|
</ul>
|
|||
|
|
<a href="#register" class="btn btn-primary btn-block">Jetzt starten</a>
|
|||
|
|
<p class="pricing-note">
|
|||
|
|
<i class="fas fa-gift"></i>
|
|||
|
|
<span class="discount-tag">30% Rabatt</span> bei Upgrade innerhalb von 3 Tagen
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Business Plan -->
|
|||
|
|
<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>
|
|||
|
|
<p class="pricing-description">Für wachsende Teams</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="pricing-features">
|
|||
|
|
<li><i class="fas fa-check"></i> Unbegrenzte Dokumente</li>
|
|||
|
|
<li><i class="fas fa-check"></i> 50.000 Nachrichten/Monat</li>
|
|||
|
|
<li><i class="fas fa-check"></i> 5 Chatbots</li>
|
|||
|
|
<li><i class="fas fa-check"></i> Dedizierter Support</li>
|
|||
|
|
<li><i class="fas fa-check"></i> API-Zugriff</li>
|
|||
|
|
<li><i class="fas fa-check"></i> SLA-Garantie</li>
|
|||
|
|
</ul>
|
|||
|
|
<a href="#register" class="btn btn-outline btn-block">Kontakt aufnehmen</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Discount Timeline -->
|
|||
|
|
<div class="discount-timeline">
|
|||
|
|
<h3><i class="fas fa-clock"></i> Frühbucher-Rabatte</h3>
|
|||
|
|
<div class="timeline">
|
|||
|
|
<div class="timeline-item">
|
|||
|
|
<div class="timeline-marker active"></div>
|
|||
|
|
<div class="timeline-content">
|
|||
|
|
<span class="timeline-day">Tag 1-3</span>
|
|||
|
|
<span class="timeline-discount">30% Rabatt</span>
|
|||
|
|
<span class="timeline-price">€34,30/Monat</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item">
|
|||
|
|
<div class="timeline-marker"></div>
|
|||
|
|
<div class="timeline-content">
|
|||
|
|
<span class="timeline-day">Tag 4-5</span>
|
|||
|
|
<span class="timeline-discount">15% Rabatt</span>
|
|||
|
|
<span class="timeline-price">€41,65/Monat</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item">
|
|||
|
|
<div class="timeline-marker"></div>
|
|||
|
|
<div class="timeline-content">
|
|||
|
|
<span class="timeline-day">Tag 6-7</span>
|
|||
|
|
<span class="timeline-discount">Normalpreis</span>
|
|||
|
|
<span class="timeline-price">€49/Monat</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Registration Section -->
|
|||
|
|
<section class="register" id="register">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="register-wrapper">
|
|||
|
|
<div class="register-info">
|
|||
|
|
<h2>Starten Sie Ihre <span class="gradient-text">7-Tage Trial</span></h2>
|
|||
|
|
<p>Keine Kreditkarte erforderlich. Voller Funktionsumfang. Jederzeit kündbar.</p>
|
|||
|
|
<ul class="register-benefits">
|
|||
|
|
<li><i class="fas fa-check-circle"></i> Sofortiger Zugang</li>
|
|||
|
|
<li><i class="fas fa-check-circle"></i> Keine Zahlungsdaten nötig</li>
|
|||
|
|
<li><i class="fas fa-check-circle"></i> Persönlicher Support</li>
|
|||
|
|
<li><i class="fas fa-check-circle"></i> Alle Features inklusive</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="register-form-wrapper">
|
|||
|
|
<form id="registerForm" class="register-form">
|
|||
|
|
<div class="form-row">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="firstName">Vorname *</label>
|
|||
|
|
<input type="text" id="firstName" name="firstName" required placeholder="Max">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="lastName">Nachname *</label>
|
|||
|
|
<input type="text" id="lastName" name="lastName" required placeholder="Mustermann">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="email">E-Mail-Adresse *</label>
|
|||
|
|
<input type="email" id="email" name="email" required placeholder="max@beispiel.de">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="company">Unternehmen (optional)</label>
|
|||
|
|
<input type="text" id="company" name="company" placeholder="Muster GmbH">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="website">Website (optional)</label>
|
|||
|
|
<input type="url" id="website" name="website" placeholder="https://www.beispiel.de">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group checkbox-group">
|
|||
|
|
<input type="checkbox" id="privacy" name="privacy" required>
|
|||
|
|
<label for="privacy">
|
|||
|
|
Ich akzeptiere die <a href="#" target="_blank">Datenschutzerklärung</a> und
|
|||
|
|
<a href="#" target="_blank">AGB</a> *
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group checkbox-group">
|
|||
|
|
<input type="checkbox" id="newsletter" name="newsletter">
|
|||
|
|
<label for="newsletter">
|
|||
|
|
Ich möchte Updates und Tipps per E-Mail erhalten (optional)
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<button type="submit" class="btn btn-primary btn-lg btn-block" id="submitBtn">
|
|||
|
|
<span class="btn-text">Kostenlos registrieren</span>
|
|||
|
|
<span class="btn-loading" style="display: none;">
|
|||
|
|
<i class="fas fa-spinner fa-spin"></i> Wird erstellt...
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
</form>
|
|||
|
|
<div id="formSuccess" class="form-success" style="display: none;">
|
|||
|
|
<div class="success-icon">
|
|||
|
|
<i class="fas fa-check-circle"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>Willkommen bei BotKonzept!</h3>
|
|||
|
|
<p>Ihre Instanz wird gerade erstellt. Sie erhalten in Kürze eine E-Mail mit Ihren Zugangsdaten.</p>
|
|||
|
|
<div class="success-details">
|
|||
|
|
<p><strong>Nächste Schritte:</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li>Prüfen Sie Ihren Posteingang</li>
|
|||
|
|
<li>Klicken Sie auf den Aktivierungslink</li>
|
|||
|
|
<li>Laden Sie Ihr erstes PDF hoch</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="formError" class="form-error" style="display: none;">
|
|||
|
|
<div class="error-icon">
|
|||
|
|
<i class="fas fa-exclamation-circle"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>Ups, etwas ist schiefgelaufen</h3>
|
|||
|
|
<p id="errorMessage">Bitte versuchen Sie es später erneut.</p>
|
|||
|
|
<button class="btn btn-outline" onclick="resetForm()">Erneut versuchen</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- FAQ Section -->
|
|||
|
|
<section class="faq" id="faq">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<span class="section-badge">FAQ</span>
|
|||
|
|
<h2>Häufig gestellte Fragen</h2>
|
|||
|
|
<p>Alles was Sie wissen müssen</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="faq-grid">
|
|||
|
|
<div class="faq-item">
|
|||
|
|
<button class="faq-question">
|
|||
|
|
<span>Wie funktioniert der KI-Chatbot?</span>
|
|||
|
|
<i class="fas fa-chevron-down"></i>
|
|||
|
|
</button>
|
|||
|
|
<div class="faq-answer">
|
|||
|
|
<p>Unser Chatbot nutzt modernste KI-Technologie (RAG - Retrieval Augmented Generation).
|
|||
|
|
Sie laden Ihre Dokumente hoch, und der Bot durchsucht diese, um präzise Antworten auf
|
|||
|
|
Kundenfragen zu geben. Die KI versteht den Kontext und formuliert natürliche Antworten.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="faq-item">
|
|||
|
|
<button class="faq-question">
|
|||
|
|
<span>Welche Dateiformate werden unterstützt?</span>
|
|||
|
|
<i class="fas fa-chevron-down"></i>
|
|||
|
|
</button>
|
|||
|
|
<div class="faq-answer">
|
|||
|
|
<p>Aktuell unterstützen wir PDF-Dateien. Weitere Formate wie Word, Excel und
|
|||
|
|
Textdateien sind in Planung. Sie können beliebig viele PDFs hochladen –
|
|||
|
|
FAQs, Produktkataloge, Anleitungen, etc.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="faq-item">
|
|||
|
|
<button class="faq-question">
|
|||
|
|
<span>Ist der Service DSGVO-konform?</span>
|
|||
|
|
<i class="fas fa-chevron-down"></i>
|
|||
|
|
</button>
|
|||
|
|
<div class="faq-answer">
|
|||
|
|
<p>Ja, 100%! Alle Daten werden ausschließlich auf Servern in Deutschland gehostet.
|
|||
|
|
Wir verarbeiten keine Daten außerhalb der EU. Sie erhalten einen
|
|||
|
|
Auftragsverarbeitungsvertrag (AVV) auf Anfrage.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="faq-item">
|
|||
|
|
<button class="faq-question">
|
|||
|
|
<span>Kann ich den Chatbot an mein Design anpassen?</span>
|
|||
|
|
<i class="fas fa-chevron-down"></i>
|
|||
|
|
</button>
|
|||
|
|
<div class="faq-answer">
|
|||
|
|
<p>Ja! Im Starter- und Business-Plan können Sie Farben, Logo und Begrüßungstext
|
|||
|
|
anpassen. Der Chatbot fügt sich nahtlos in Ihr Website-Design ein.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="faq-item">
|
|||
|
|
<button class="faq-question">
|
|||
|
|
<span>Was passiert nach der Trial-Phase?</span>
|
|||
|
|
<i class="fas fa-chevron-down"></i>
|
|||
|
|
</button>
|
|||
|
|
<div class="faq-answer">
|
|||
|
|
<p>Nach 7 Tagen endet Ihre Trial automatisch. Sie können jederzeit auf einen
|
|||
|
|
bezahlten Plan upgraden. Wenn Sie innerhalb der ersten 3 Tage upgraden,
|
|||
|
|
erhalten Sie 30% Rabatt!</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="faq-item">
|
|||
|
|
<button class="faq-question">
|
|||
|
|
<span>Wie integriere ich den Chatbot in meine Website?</span>
|
|||
|
|
<i class="fas fa-chevron-down"></i>
|
|||
|
|
</button>
|
|||
|
|
<div class="faq-answer">
|
|||
|
|
<p>Ganz einfach! Sie erhalten einen Code-Snippet, den Sie vor dem </body>-Tag
|
|||
|
|
Ihrer Website einfügen. Das funktioniert mit WordPress, Shopify, Wix,
|
|||
|
|
und jeder anderen Website.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- CTA Section -->
|
|||
|
|
<section class="cta">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="cta-content">
|
|||
|
|
<h2>Bereit, Ihren Kundenservice zu revolutionieren?</h2>
|
|||
|
|
<p>Starten Sie noch heute Ihre kostenlose 7-Tage-Trial</p>
|
|||
|
|
<a href="#register" class="btn btn-white btn-lg">
|
|||
|
|
<i class="fas fa-rocket"></i>
|
|||
|
|
Jetzt kostenlos starten
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Footer -->
|
|||
|
|
<footer class="footer">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="footer-grid">
|
|||
|
|
<div class="footer-brand">
|
|||
|
|
<a href="#" class="logo">
|
|||
|
|
<img src="logo/20250119_Logo_Botkozept.svg" alt="BotKonzept Logo">
|
|||
|
|
<span>BotKonzept</span>
|
|||
|
|
</a>
|
|||
|
|
<p>Ihr intelligenter KI-Chatbot für besseren Kundenservice.</p>
|
|||
|
|
<div class="social-links">
|
|||
|
|
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
|
|||
|
|
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
|
|||
|
|
<a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-links">
|
|||
|
|
<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="#">Dokumentation</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-links">
|
|||
|
|
<h4>Unternehmen</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#">Über uns</a></li>
|
|||
|
|
<li><a href="#">Blog</a></li>
|
|||
|
|
<li><a href="#">Karriere</a></li>
|
|||
|
|
<li><a href="#">Kontakt</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-links">
|
|||
|
|
<h4>Rechtliches</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#">Impressum</a></li>
|
|||
|
|
<li><a href="#">Datenschutz</a></li>
|
|||
|
|
<li><a href="#">AGB</a></li>
|
|||
|
|
<li><a href="#">Cookie-Einstellungen</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-bottom">
|
|||
|
|
<p>© 2025 BotKonzept. Alle Rechte vorbehalten.</p>
|
|||
|
|
<p>Made with <i class="fas fa-heart"></i> in Germany</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<!-- Custom JS -->
|
|||
|
|
<script src="js/main.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|