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
This commit is contained in:
@@ -0,0 +1,884 @@
|
||||
/* ===================================
|
||||
CSS Variables & Reset
|
||||
=================================== */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--primary-dark: #1e40af;
|
||||
--primary-light: #3b82f6;
|
||||
--secondary-color: #10b981;
|
||||
--text-dark: #1f2937;
|
||||
--text-light: #6b7280;
|
||||
--bg-light: #f9fafb;
|
||||
--bg-white: #ffffff;
|
||||
--border-color: #e5e7eb;
|
||||
--success-color: #10b981;
|
||||
--error-color: #ef4444;
|
||||
--warning-color: #f59e0b;
|
||||
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
color: var(--text-dark);
|
||||
line-height: 1.6;
|
||||
background-color: var(--bg-white);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Container & Layout
|
||||
=================================== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-light);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Navigation
|
||||
=================================== */
|
||||
.navbar {
|
||||
background: var(--bg-white);
|
||||
box-shadow: var(--shadow-sm);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle span {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--text-dark);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Buttons
|
||||
=================================== */
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Hero Section
|
||||
=================================== */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 6rem 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.feature-badge svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Chatbot Demo */
|
||||
.chatbot-demo {
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-xl);
|
||||
overflow: hidden;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.demo-dots {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-dots span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.demo-messages {
|
||||
padding: 1.5rem;
|
||||
background: #f9fafb;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.message .avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message .bubble {
|
||||
background: white;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
max-width: 70%;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.message.user .bubble {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.demo-input {
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-input input {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.demo-input button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Features Section
|
||||
=================================== */
|
||||
.features {
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-light);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
How It Works Section
|
||||
=================================== */
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.step p {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Pricing Section
|
||||
=================================== */
|
||||
.pricing {
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pricing-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
border: 3px solid var(--primary-color);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.pricing-card .badge {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: 20px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.pricing-header h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.price .currency {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price .amount {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.price .period {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.price-note {
|
||||
font-size: 0.875rem;
|
||||
color: var(--success-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.pricing-features li {
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.pricing-features li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Trial Registration Section
|
||||
=================================== */
|
||||
.trial-registration {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.trial-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.trial-info h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.trial-info p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.trial-benefits {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.trial-benefits li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.trial-benefits svg {
|
||||
flex-shrink: 0;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.trial-form-wrapper {
|
||||
background: white;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2.5rem;
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.trial-form h3 {
|
||||
color: var(--text-dark);
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group.checkbox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.form-group.checkbox input {
|
||||
width: auto;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-group.checkbox label {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group.checkbox a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.form-note {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-light);
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.spinner circle {
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Success Message */
|
||||
.success-message {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
.success-message h3 {
|
||||
color: var(--text-dark);
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.success-message p {
|
||||
color: var(--text-light);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.success-details {
|
||||
background: var(--bg-light);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.success-details p {
|
||||
color: var(--text-dark);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.success-details ol {
|
||||
list-style: decimal;
|
||||
padding-left: 1.5rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.success-details li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
FAQ Section
|
||||
=================================== */
|
||||
.faq-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.faq-item h3 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.faq-item p {
|
||||
color: var(--text-light);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Footer
|
||||
=================================== */
|
||||
.footer {
|
||||
background: var(--text-dark);
|
||||
color: white;
|
||||
padding: 3rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.footer-section p {
|
||||
opacity: 0.8;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
opacity: 0.8;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
opacity: 1;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 1.5rem;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Responsive Design
|
||||
=================================== */
|
||||
@media (max-width: 768px) {
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero-content,
|
||||
.trial-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pricing-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.faq-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.trial-form-wrapper {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,417 @@
|
||||
<!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>© 2025 BotKonzept. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,388 @@
|
||||
// BotKonzept Website - Main JavaScript
|
||||
// =====================================
|
||||
|
||||
// Configuration
|
||||
const CONFIG = {
|
||||
// n8n Webhook URL für Registrierung (wird später konfiguriert)
|
||||
WEBHOOK_URL: 'https://n8n.userman.de/webhook/botkonzept-registration',
|
||||
// Supabase URL (lokale Instanz)
|
||||
SUPABASE_URL: 'http://192.168.45.3:3000',
|
||||
SUPABASE_ANON_KEY: 'your-anon-key-here'
|
||||
};
|
||||
|
||||
// =====================================
|
||||
// Mobile Menu Toggle
|
||||
// =====================================
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
if (mobileMenuToggle) {
|
||||
mobileMenuToggle.addEventListener('click', function() {
|
||||
navMenu.classList.toggle('active');
|
||||
this.classList.toggle('active');
|
||||
});
|
||||
}
|
||||
|
||||
// Close mobile menu when clicking on a link
|
||||
const navLinks = document.querySelectorAll('.nav-menu a');
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
navMenu.classList.remove('active');
|
||||
mobileMenuToggle.classList.remove('active');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// =====================================
|
||||
// Smooth Scroll for Anchor Links
|
||||
// =====================================
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
const offset = 80; // Navbar height
|
||||
const targetPosition = target.offsetTop - offset;
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// =====================================
|
||||
// Trial Registration Form
|
||||
// =====================================
|
||||
const trialForm = document.getElementById('trialForm');
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
|
||||
if (trialForm) {
|
||||
trialForm.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const formData = {
|
||||
firstName: document.getElementById('firstName').value.trim(),
|
||||
lastName: document.getElementById('lastName').value.trim(),
|
||||
email: document.getElementById('email').value.trim().toLowerCase(),
|
||||
company: document.getElementById('company').value.trim() || null,
|
||||
terms: document.getElementById('terms').checked,
|
||||
registeredAt: new Date().toISOString(),
|
||||
source: 'website',
|
||||
utmSource: getUrlParameter('utm_source') || null,
|
||||
utmMedium: getUrlParameter('utm_medium') || null,
|
||||
utmCampaign: getUrlParameter('utm_campaign') || null
|
||||
};
|
||||
|
||||
// Validate
|
||||
if (!formData.firstName || !formData.lastName || !formData.email) {
|
||||
showError('Bitte füllen Sie alle Pflichtfelder aus.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateEmail(formData.email)) {
|
||||
showError('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.terms) {
|
||||
showError('Bitte akzeptieren Sie die AGB und Datenschutzerklärung.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
const submitButton = trialForm.querySelector('button[type="submit"]');
|
||||
const btnText = submitButton.querySelector('.btn-text');
|
||||
const btnLoading = submitButton.querySelector('.btn-loading');
|
||||
|
||||
submitButton.disabled = true;
|
||||
btnText.style.display = 'none';
|
||||
btnLoading.style.display = 'flex';
|
||||
|
||||
try {
|
||||
// Send to n8n webhook
|
||||
const response = await fetch(CONFIG.WEBHOOK_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Registrierung fehlgeschlagen');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Show success message
|
||||
trialForm.style.display = 'none';
|
||||
successMessage.style.display = 'block';
|
||||
|
||||
// Track conversion (Google Analytics, Facebook Pixel, etc.)
|
||||
trackConversion('trial_registration', formData);
|
||||
|
||||
// Scroll to success message
|
||||
successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
|
||||
} catch (error) {
|
||||
console.error('Registration error:', error);
|
||||
showError('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut oder kontaktieren Sie uns direkt.');
|
||||
|
||||
// Reset button state
|
||||
submitButton.disabled = false;
|
||||
btnText.style.display = 'inline';
|
||||
btnLoading.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Helper Functions
|
||||
// =====================================
|
||||
|
||||
function validateEmail(email) {
|
||||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
// Create or update error message
|
||||
let errorDiv = document.querySelector('.form-error');
|
||||
|
||||
if (!errorDiv) {
|
||||
errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'form-error';
|
||||
errorDiv.style.cssText = `
|
||||
background: #fee2e2;
|
||||
border: 1px solid #ef4444;
|
||||
color: #991b1b;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
`;
|
||||
trialForm.insertBefore(errorDiv, trialForm.firstChild);
|
||||
}
|
||||
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
|
||||
// Remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
errorDiv.remove();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function getUrlParameter(name) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
return urlParams.get(name);
|
||||
}
|
||||
|
||||
function trackConversion(eventName, data) {
|
||||
// Google Analytics
|
||||
if (typeof gtag !== 'undefined') {
|
||||
gtag('event', eventName, {
|
||||
'event_category': 'registration',
|
||||
'event_label': 'trial',
|
||||
'value': 0
|
||||
});
|
||||
}
|
||||
|
||||
// Facebook Pixel
|
||||
if (typeof fbq !== 'undefined') {
|
||||
fbq('track', 'Lead', {
|
||||
content_name: 'Trial Registration',
|
||||
content_category: 'Registration'
|
||||
});
|
||||
}
|
||||
|
||||
// Custom tracking
|
||||
console.log('Conversion tracked:', eventName, data);
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Scroll Animations
|
||||
// =====================================
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const animateElements = document.querySelectorAll('.feature-card, .step, .pricing-card, .faq-item');
|
||||
animateElements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
|
||||
// Add CSS for animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.animate-in {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// =====================================
|
||||
// Pricing Calculator (Optional)
|
||||
// =====================================
|
||||
function calculatePricing(plan, discount = 0) {
|
||||
const prices = {
|
||||
trial: 0,
|
||||
starter: 49,
|
||||
business: 149
|
||||
};
|
||||
|
||||
const basePrice = prices[plan] || 0;
|
||||
const discountedPrice = basePrice * (1 - discount / 100);
|
||||
|
||||
return {
|
||||
basePrice,
|
||||
discount,
|
||||
discountedPrice,
|
||||
savings: basePrice - discountedPrice
|
||||
};
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// FAQ Accordion (Optional Enhancement)
|
||||
// =====================================
|
||||
document.querySelectorAll('.faq-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
this.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
|
||||
// =====================================
|
||||
// Newsletter Subscription (Optional)
|
||||
// =====================================
|
||||
function subscribeNewsletter(email) {
|
||||
// Integration mit Sendy.co
|
||||
const sendyUrl = 'https://sendy.userman.de/subscribe';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('email', email);
|
||||
formData.append('list', 'your-list-id');
|
||||
formData.append('boolean', 'true');
|
||||
|
||||
return fetch(sendyUrl, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Live Chat Widget Integration (Optional)
|
||||
// =====================================
|
||||
function initializeChatWidget() {
|
||||
// Hier kann später der eigene BotKonzept-Chatbot integriert werden
|
||||
console.log('Chat widget initialized');
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// A/B Testing Helper (Optional)
|
||||
// =====================================
|
||||
function getABTestVariant() {
|
||||
const variants = ['A', 'B'];
|
||||
const stored = localStorage.getItem('ab_variant');
|
||||
|
||||
if (stored) {
|
||||
return stored;
|
||||
}
|
||||
|
||||
const variant = variants[Math.floor(Math.random() * variants.length)];
|
||||
localStorage.setItem('ab_variant', variant);
|
||||
return variant;
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Cookie Consent (DSGVO)
|
||||
// =====================================
|
||||
function showCookieConsent() {
|
||||
const consent = localStorage.getItem('cookie_consent');
|
||||
|
||||
if (!consent) {
|
||||
const banner = document.createElement('div');
|
||||
banner.className = 'cookie-banner';
|
||||
banner.innerHTML = `
|
||||
<div class="cookie-content">
|
||||
<p>Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.
|
||||
<a href="privacy.html">Mehr erfahren</a></p>
|
||||
<button onclick="acceptCookies()" class="btn-primary">Akzeptieren</button>
|
||||
</div>
|
||||
`;
|
||||
banner.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #1f2937;
|
||||
color: white;
|
||||
padding: 1.5rem;
|
||||
z-index: 9999;
|
||||
box-shadow: 0 -4px 6px rgba(0,0,0,0.1);
|
||||
`;
|
||||
document.body.appendChild(banner);
|
||||
}
|
||||
}
|
||||
|
||||
function acceptCookies() {
|
||||
localStorage.setItem('cookie_consent', 'true');
|
||||
document.querySelector('.cookie-banner').remove();
|
||||
}
|
||||
|
||||
// Show cookie consent on page load
|
||||
document.addEventListener('DOMContentLoaded', showCookieConsent);
|
||||
|
||||
// =====================================
|
||||
// Performance Monitoring
|
||||
// =====================================
|
||||
if ('PerformanceObserver' in window) {
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
console.log('Performance:', entry.name, entry.duration);
|
||||
}
|
||||
});
|
||||
observer.observe({ entryTypes: ['measure', 'navigation'] });
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Error Tracking
|
||||
// =====================================
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('Global error:', e.error);
|
||||
// Hier könnte Sentry oder ähnliches integriert werden
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', function(e) {
|
||||
console.error('Unhandled promise rejection:', e.reason);
|
||||
});
|
||||
|
||||
// =====================================
|
||||
// Export for testing
|
||||
// =====================================
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = {
|
||||
validateEmail,
|
||||
calculatePricing,
|
||||
getUrlParameter
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user