diff options
Diffstat (limited to 'downloads/bookingmanager-sales.html')
| -rw-r--r-- | downloads/bookingmanager-sales.html | 1071 |
1 files changed, 1071 insertions, 0 deletions
diff --git a/downloads/bookingmanager-sales.html b/downloads/bookingmanager-sales.html new file mode 100644 index 0000000..06bfb72 --- /dev/null +++ b/downloads/bookingmanager-sales.html @@ -0,0 +1,1071 @@ +<!DOCTYPE html> +<html lang="de"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"> + + <!-- Primary Meta Tags --> + <title>Booking Manager v4 — All-in-One Termin- & Kundenverwaltung | 14 Tage kostenlos</title> + <meta name="title" content="Booking Manager v4 — All-in-One Termin- & Kundenverwaltung"> + <meta name="description" content="Verwalte Termine, Kunden und Rechnungen an einem Ort. Mit KI-Assistent, CRM und automatischen Erinnerungen. Für Friseure, Therapeuten, Coaches & mehr."> + <meta name="keywords" content="Terminbuchung, Online-Buchung, Kundenverwaltung, CRM, Rechnungsstellung, Kalender, Booking Software, Terminplaner"> + <meta name="author" content="Booking Manager"> + <meta name="robots" content="index, follow"> + <meta name="language" content="German"> + <meta name="revisit-after" content="7 days"> + + <!-- Canonical URL --> + <link rel="canonical" href="https://bookingmanager.app/terminbuchung"> + + <!-- Favicon --> + <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📆</text></svg>"> + <meta name="theme-color" content="#6366f1"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-status-bar-style" content="default"> + <meta name="apple-mobile-web-app-title" content="Booking Manager"> + + <!-- Open Graph / Facebook --> + <meta property="og:type" content="website"> + <meta property="og:url" content="https://bookingmanager.app/terminbuchung"> + <meta property="og:title" content="Booking Manager v4 — All-in-One Termin- & Kundenverwaltung"> + <meta property="og:description" content="Verwalte Termine, Kunden und Rechnungen an einem Ort. Mit KI-Assistent und automatischen Erinnerungen."> + <meta property="og:image" content="https://bookingmanager.app/og-booking.jpg"> + <meta property="og:locale" content="de_DE"> + <meta property="og:site_name" content="Booking Manager"> + + <!-- Twitter --> + <meta property="twitter:card" content="summary_large_image"> + <meta property="twitter:url" content="https://bookingmanager.app/terminbuchung"> + <meta property="twitter:title" content="Booking Manager v4 — All-in-One Termin- & Kundenverwaltung"> + <meta property="twitter:description" content="Verwalte Termine, Kunden und Rechnungen an einem Ort."> + <meta property="twitter:image" content="https://bookingmanager.app/og-booking.jpg"> + <meta property="twitter:creator" content="@bookingmanager"> + + <!-- Structured Data --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "SoftwareApplication", + "name": "Booking Manager", + "description": "All-in-One Termin- und Kundenverwaltung für Dienstleister", + "applicationCategory": "BusinessApplication", + "operatingSystem": "Web", + "offers": { + "@type": "Offer", + "price": "39", + "priceCurrency": "EUR" + } + } + </script> + + <style> + :root { + --primary: #6366f1; + --primary-dark: #4f46e5; + --secondary: #06b6d4; + --accent: #f59e0b; + --dark: #0f172a; + --darker: #020617; + --light: #f8fafc; + --gray: #94a3b8; + --success: #10b981; + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + } + + html { + scroll-behavior: smooth; + -webkit-text-size-adjust: 100%; + } + + body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: var(--dark); + color: var(--light); + line-height: 1.6; + overflow-x: hidden; + padding-bottom: 90px; + } + + /* Mobile-first container */ + .container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 clamp(1rem, 4vw, 2rem); + } + + /* Mobile nav */ + .mobile-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem clamp(1rem, 4vw, 2rem); + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + position: sticky; + top: 0; + z-index: 1000; + border-bottom: 1px solid rgba(255,255,255,0.1); + } + + .logo { + font-size: clamp(1rem, 4vw, 1.25rem); + font-weight: 800; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-decoration: none; + } + + .nav-links { + display: none; + gap: 2rem; + list-style: none; + } + + .nav-links a { + color: var(--light); + text-decoration: none; + font-size: 0.875rem; + font-weight: 500; + transition: color 0.2s; + } + + .nav-links a:hover { + color: var(--primary); + } + + /* Hamburger button */ + .hamburger { + display: flex; + flex-direction: column; + gap: 5px; + cursor: pointer; + padding: 8px; + min-width: 44px; + min-height: 44px; + justify-content: center; + align-items: center; + background: rgba(255,255,255,0.1); + border: none; + border-radius: 8px; + } + + .hamburger span { + width: 20px; + height: 2px; + background: var(--light); + border-radius: 2px; + transition: all 0.3s; + } + + .hamburger.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .hamburger.active span:nth-child(2) { + opacity: 0; + } + + .hamburger.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } + + /* Mobile menu dropdown */ + .mobile-menu { + display: none; + position: fixed; + top: 65px; + left: 0; + right: 0; + background: var(--dark); + padding: 1rem; + flex-direction: column; + gap: 0.5rem; + border-bottom: 1px solid rgba(255,255,255,0.1); + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + z-index: 999; + } + + .mobile-menu.active { + display: flex; + } + + .mobile-menu a { + display: block; + padding: 0.875rem 1rem; + color: var(--light); + text-decoration: none; + font-weight: 500; + border-radius: 8px; + min-height: 44px; + display: flex; + align-items: center; + transition: background 0.2s; + } + + .mobile-menu a:hover, + .mobile-menu a:active { + background: rgba(255,255,255,0.1); + } + + .mobile-menu .menu-cta { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + text-align: center; + margin-top: 0.5rem; + } + + /* Hero */ + .hero { + padding: clamp(3rem, 10vw, 6rem) 0; + text-align: center; + background: linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%); + position: relative; + overflow: hidden; + } + + .hero::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%); + animation: pulse 8s ease-in-out infinite; + } + + @keyframes pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.8; transform: scale(1.05); } + } + + .hero-content { + position: relative; + z-index: 1; + padding: 0 clamp(1rem, 4vw, 2rem); + } + + .badge { + display: inline-block; + padding: 0.5rem 1rem; + background: rgba(99, 102, 241, 0.2); + border: 1px solid rgba(99, 102, 241, 0.3); + border-radius: 50px; + font-size: clamp(0.75rem, 2.5vw, 0.875rem); + font-weight: 600; + color: var(--primary); + margin-bottom: 1.5rem; + } + + h1 { + font-size: clamp(2rem, 8vw, 3.5rem); + font-weight: 800; + line-height: 1.1; + margin-bottom: 1.5rem; + background: linear-gradient(135deg, #fff 0%, #94a3b8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .hero p { + font-size: clamp(1rem, 3vw, 1.25rem); + color: var(--gray); + max-width: 600px; + margin: 0 auto 2rem; + } + + .hero-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-top: 3rem; + padding: 0 1rem; + } + + .stat { + text-align: center; + } + + .stat-value { + font-size: clamp(1.5rem, 5vw, 2.5rem); + font-weight: 800; + color: var(--primary); + } + + .stat-label { + font-size: clamp(0.625rem, 2vw, 0.75rem); + color: var(--gray); + text-transform: uppercase; + letter-spacing: 0.05em; + } + + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + font-size: 1rem; + font-weight: 600; + border: none; + border-radius: 12px; + cursor: pointer; + text-decoration: none; + min-height: 48px; + min-width: 140px; + transition: all 0.2s; + } + + .btn-primary { + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + color: white; + box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); + } + + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); + } + + .btn-secondary { + background: rgba(255,255,255,0.1); + color: white; + border: 1px solid rgba(255,255,255,0.2); + } + + .btn-secondary:hover { + background: rgba(255,255,255,0.15); + } + + .hero-buttons { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + } + + /* Sections */ + section { + padding: clamp(3rem, 8vw, 5rem) 0; + } + + .section-title { + text-align: center; + margin-bottom: 3rem; + } + + .section-title h2 { + font-size: clamp(1.75rem, 5vw, 2.5rem); + font-weight: 800; + margin-bottom: 1rem; + } + + .section-title p { + color: var(--gray); + font-size: clamp(0.875rem, 2.5vw, 1.125rem); + max-width: 600px; + margin: 0 auto; + } + + /* Features Grid */ + .features-grid { + display: grid; + grid-template-columns: 1fr; + gap: 1rem; + padding: 0 clamp(1rem, 4vw, 2rem); + } + + .feature-card { + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.08); + border-radius: 16px; + padding: 1.5rem; + transition: all 0.3s; + } + + .feature-card:hover { + background: rgba(255,255,255,0.05); + border-color: var(--primary); + transform: translateY(-2px); + } + + .feature-icon { + width: 48px; + height: 48px; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + margin-bottom: 1rem; + } + + .feature-card h3 { + font-size: 1.0625rem; + margin-bottom: 0.5rem; + } + + .feature-card p { + color: var(--gray); + font-size: 0.875rem; + line-height: 1.6; + } + + /* Industries Grid */ + .industries-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + padding: 0 clamp(1rem, 4vw, 2rem); + } + + .industry-card { + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 16px; + padding: 1.5rem; + text-align: center; + transition: all 0.3s; + } + + .industry-card:hover { + background: rgba(255,255,255,0.08); + transform: translateY(-2px); + } + + .industry-icon { + font-size: 2.5rem; + margin-bottom: 0.75rem; + } + + .industry-card h3 { + font-size: 1rem; + margin-bottom: 0.25rem; + } + + .industry-card p { + color: var(--gray); + font-size: 0.8125rem; + } + + /* Pricing Grid */ + .pricing-grid { + display: grid; + gap: 1rem; + padding: 0 clamp(1rem, 4vw, 2rem); + } + + .pricing-card { + background: rgba(255,255,255,0.03); + border: 2px solid rgba(255,255,255,0.08); + border-radius: 20px; + padding: 1.5rem; + text-align: center; + transition: all 0.3s; + } + + .pricing-card.popular { + border-color: var(--primary); + background: rgba(99, 102, 241, 0.1); + position: relative; + } + + .pricing-badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + padding: 0.25rem 1rem; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 600; + white-space: nowrap; + } + + .pricing-card h3 { + font-size: 1rem; + margin-bottom: 0.5rem; + color: var(--light); + } + + .pricing-price { + font-size: 2.5rem; + font-weight: 800; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 0.25rem; + } + + .pricing-price span { + font-size: 0.875rem; + font-weight: 400; + -webkit-text-fill-color: var(--gray); + } + + .pricing-users { + color: var(--gray); + font-size: 0.8125rem; + margin-bottom: 1rem; + } + + .pricing-features { + list-style: none; + text-align: left; + margin-bottom: 1.5rem; + } + + .pricing-features li { + padding: 0.5rem 0; + font-size: 0.875rem; + display: flex; + align-items: center; + gap: 0.5rem; + border-bottom: 1px solid rgba(255,255,255,0.05); + } + + .pricing-features li:last-child { + border-bottom: none; + } + + .pricing-features li::before { + content: '✓'; + color: var(--success); + font-weight: 700; + } + + .pricing-card .btn { + width: 100%; + } + + /* Comparison Table */ + .comparison-table { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border-radius: 16px; + background: rgba(255,255,255,0.03); + padding: 1rem; + } + + .comparison-table table { + width: 100%; + min-width: 400px; + border-collapse: collapse; + } + + .comparison-table th, + .comparison-table td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid rgba(255,255,255,0.08); + } + + .comparison-table th { + color: var(--light); + font-weight: 600; + font-size: 0.875rem; + } + + .comparison-table td { + color: var(--gray); + font-size: 0.875rem; + } + + .check { + color: var(--success); + font-weight: 700; + } + + .cross { + color: #ef4444; + font-weight: 700; + } + + /* Footer CTA */ + .footer-cta { + background: linear-gradient(180deg, var(--dark), var(--darker)); + text-align: center; + padding: clamp(4rem, 10vw, 6rem) 0; + } + + .footer-cta h2 { + font-size: clamp(1.75rem, 5vw, 2.5rem); + margin-bottom: 1rem; + } + + .footer-cta p { + color: var(--gray); + margin-bottom: 2rem; + } + + /* Footer */ + .footer { + background: var(--darker); + padding: 3rem 0; + text-align: center; + border-top: 1px solid rgba(255,255,255,0.05); + } + + .footer h3 { + font-size: 1.25rem; + margin-bottom: 0.5rem; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .footer p { + color: var(--gray); + font-size: 0.875rem; + } + + /* Mobile Bottom CTA Bar */ + .mobile-cta { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--darker); + padding: 1rem; + display: flex; + gap: 0.75rem; + z-index: 998; + border-top: 1px solid rgba(255,255,255,0.1); + box-shadow: 0 -4px 20px rgba(0,0,0,0.3); + } + + .mobile-cta .btn { + flex: 1; + } + + /* Desktop */ + @media (min-width: 768px) { + .hamburger { + display: none; + } + + .mobile-menu { + display: none !important; + } + + .nav-links { + display: flex; + align-items: center; + } + + .nav-links a { + padding: 0.5rem 1rem; + } + + .mobile-cta { + display: none; + } + + body { + padding-bottom: 0; + } + + .hero-buttons { + flex-direction: row; + } + + .features-grid { + grid-template-columns: repeat(3, 1fr); + } + + .industries-grid { + grid-template-columns: repeat(3, 1fr); + } + + .pricing-grid { + grid-template-columns: repeat(4, 1fr); + align-items: start; + } + } + </style> +</head> +<body> + <!-- Navigation --> + <nav class="mobile-nav"> + <a href="#" class="logo">Booking Manager</a> + <ul class="nav-links"> + <li><a href="#features">Features</a></li> + <li><a href="#industries">Branchen</a></li> + <li><a href="#pricing">Preise</a></li> + <li><a href="#comparison">Vergleich</a></li> + </ul> + <button class="hamburger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="mobile-menu"> + <span></span> + <span></span> + <span></span> + </button> + </nav> + + <!-- Mobile Menu --> + <div class="mobile-menu" id="mobile-menu"> + <a href="#features">Features</a> + <a href="#industries">Branchen</a> + <a href="#pricing">Preise</a> + <a href="#comparison">Vergleich</a> + <a href="#" class="menu-cta">Kostenlos starten</a> + </div> + + <main> + <!-- Hero Section --> + <section class="hero"> + <div class="hero-content"> + <span class="badge">✨ Jetzt mit KI-Assistent</span> + <h1>All-in-One Termin- & Kundenverwaltung</h1> + <p>Kalender, CRM, Rechnungen und automatische Erinnerungen — alles in einer App. Für Friseure, Therapeuten, Coaches und mehr.</p> + + <div class="hero-buttons"> + <a href="#" class="btn btn-primary">14 Tage kostenlos →</a> + <a href="#features" class="btn btn-secondary">Mehr erfahren</a> + </div> + + <div class="hero-stats"> + <div class="stat"> + <div class="stat-value">2500+</div> + <div class="stat-label">Aktive Nutzer</div> + </div> + <div class="stat"> + <div class="stat-value">15h</div> + <div class="stat-label">pro Monat gespart</div> + </div> + <div class="stat"> + <div class="stat-value">98%</div> + <div class="stat-label">Zufriedenheit</div> + </div> + </div> + </div> + </section> + + <!-- Features Section --> + <section id="features"> + <div class="section-title"> + <h2>Alles, was du brauchst</h2> + <p>Von der Online-Buchung bis zur Rechnungsstellung</p> + </div> + + <div class="features-grid"> + <div class="feature-card"> + <div class="feature-icon">📅</div> + <h3>Intelligenter Kalender</h3> + <p>KI-optimierte Terminfindung, Doppelbuchungen ade. Synchronisation mit Google & Apple Calendar.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">🤖</div> + <h3>KI-Assistent</h3> + <p>Automatische Erinnerungen, Vorschläge für Folge-termine und personalisierte Kundenansprache.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">👥</div> + <h3>CRM & Kundenkartei</h3> + <p>Vollständige Kundenhistorie, Notizen, Präferenzen und Kontaktverwaltung an einem Ort.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">💳</div> + <h3>Online-Zahlungen</h3> + <p>Stripe & PayPal Integration. Automatische Rechnungen und Zahlungserinnerungen.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">📱</div> + <h3>Mobile App</h3> + <p>iOS & Android App mit Offline-Modus, Push-Benachrichtigungen und Kalender-Sync.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">📊</div> + <h3>Analytics Dashboard</h3> + <p>Umsatz-, Kunden- und Terminstatistiken. Export als PDF oder CSV.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">🔗</div> + <h3>Widget-Einbettung</h3> + <p>Bette deinen Buchungskalender in jede Website ein. WordPress, Wix, Squarespace & mehr.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">📧</div> + <h3>E-Mail & SMS Marketing</h3> + <p>Newsletter, Erinnerungen und personalisierte Angebote. DSGVO-konform.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">🛒</div> + <h3>Produktverkauf</h3> + <p>Verkaufe Produkte oder Gutscheine direkt bei der Terminbuchung.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">🎯</div> + <h3>Workflow-Automation</h3> + <p>Automatisierte Abläufe: Erinnerungen, Folgetermine, Feedback-Anfragen.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">📑</div> + <h3>Rechnungsstellung</h3> + <p>Erstelle professionelle Rechnungen mit deinem Logo. DATEV-Export.</p> + </div> + + <div class="feature-card"> + <div class="feature-icon">🌍</div> + <h3>Mehrsprachig</h3> + <p>DE, EN, ES, FR, IT und mehr. Automatische Spracherkennung für Kunden.</p> + </div> + </div> + </section> + + <!-- Industries Section --> + <section id="industries" style="background: rgba(0,0,0,0.3);"> + <div class="section-title"> + <h2>Für jede Branche geeignet</h2> + <p>Ob Salon oder Arztpraxis — wir passen uns an</p> + </div> + + <div class="industries-grid"> + <div class="industry-card"> + <div class="industry-icon">💇</div> + <h3>Friseure & Salons</h3> + <p>Terminbuchung & Produktverkauf</p> + </div> + + <div class="industry-card"> + <div class="industry-icon">🧘</div> + <h3>Fitness & Yoga</h3> + <p>Kurse & Mitgliederverwaltung</p> + </div> + + <div class="industry-card"> + <div class="industry-icon">🏥</div> + <h3>Praxen & Kliniken</h3> + <p>Patientenbuchung & Recall</p> + </div> + + <div class="industry-card"> + <div class="industry-icon">💼</div> + <h3>Coaches & Berater</h3> + <p>Online-Termine & Rechnungen</p> + </div> + + <div class="industry-card"> + <div class="industry-icon">🎨</div> + <h3>Kosmetik & Spa</h3> + <p>Behandlungen & Pakete</p> + </div> + + <div class="industry-card"> + <div class="industry-icon">🏨</div> + <h3>Hotels & Tourismus</h3> + <p>Wellness & Spa-Buchungen</p> + </div> + </div> + </section> + + <!-- Pricing Section --> + <section id="pricing"> + <div class="section-title"> + <h2>Einfache Preise</h2> + <p>Starte kostenlos, upgrade wenn du bereit bist</p> + </div> + + <div class="pricing-grid"> + <div class="pricing-card"> + <h3>Free</h3> + <div class="pricing-price">€0 <span>/ Monat</span></div> + <div class="pricing-users">Bis zu 50 Termine/Monat</div> + <ul class="pricing-features"> + <li>50 Termine/Monat</li> + <li>1 Mitarbeiter</li> + <li>Online-Buchung</li> + <li>Mobile App</li> + </ul> + <a href="#" class="btn btn-secondary">Kostenlos starten</a> + </div> + + <div class="pricing-card"> + <h3>Starter</h3> + <div class="pricing-price">€29 <span>/ Monat</span></div> + <div class="pricing-users">Bis zu 200 Termine/Monat</div> + <ul class="pricing-features"> + <li>200 Termine/Monat</li> + <li>Bis zu 3 Mitarbeiter</li> + <li>CRM & E-Mail-Marketing</li> + <li>Online-Zahlungen</li> + </ul> + <a href="#" class="btn btn-secondary">14 Tage testen</a> + </div> + + <div class="pricing-card popular"> + <span class="pricing-badge">Beliebt</span> + <h3>Pro</h3> + <div class="pricing-price">€59 <span>/ Monat</span></div> + <div class="pricing-users">Unbegrenzte Termine</div> + <ul class="pricing-features"> + <li>Unbegrenzt Termine</li> + <li>Bis zu 10 Mitarbeiter</li> + <li>KI-Assistent</li> + <li>Rechnungsstellung</li> + <li>SMS-Erinnerungen</li> + </ul> + <a href="#" class="btn btn-primary">14 Tage testen</a> + </div> + + <div class="pricing-card"> + <h3>Business</h3> + <div class="pricing-price">€149 <span>/ Monat</span></div> + <div class="pricing-users">Unbegrenzt + API</div> + <ul class="pricing-features"> + <li>Alles aus Pro</li> + <li>Unbegrenzt Mitarbeiter</li> + <li>API-Zugang</li> + <li>Custom-Integration</li> + <li>Priority Support</li> + </ul> + <a href="#" class="btn btn-secondary">Kontakt</a> + </div> + </div> + </section> + + <!-- Comparison Section --> + <section id="comparison" style="background: rgba(0,0,0,0.3);"> + <div class="section-title"> + <h2>Warum Booking Manager?</h2> + <p>Der beste Preis-Leistungs-Verhältnis</p> + </div> + + <div class="comparison-table"> + <table> + <thead> + <tr> + <th>Feature</th> + <th>Booking Manager</th> + <th>Acuity</th> + <th>Calendly</th> + </tr> + </thead> + <tbody> + <tr> + <td>Preis (Pro)</td> + <td><strong>€59/Monat</strong></td> + <td>~€80/Monat</td> + <td>~€100/Monat</td> + </tr> + <tr> + <td>KI-Assistent</td> + <td class="check">✓</td> + <td class="cross">✗</td> + <td class="cross">✗</td> + </tr> + <tr> + <td>CRM integriert</td> + <td class="check">✓</td> + <td class="check">✓</td> + <td class="cross">✗</td> + </tr> + <tr> + <td>Deutsche Lokalisierung</td> + <td class="check">✓</td> + <td class="cross">✗</td> + <td class="cross">✗</td> + </tr> + <tr> + <td>Rechnungsstellung (DE)</td> + <td class="check">✓</td> + <td class="cross">✗</td> + <td class="cross">✗</td> + </tr> + <tr> + <td>SMS-Erinnerungen</td> + <td class="check">✓</td> + <td class="check">✓</td> + <td class="cross">✗</td> + </tr> + <tr> + <td>14 Tage kostenlos</td> + <td class="check">✓</td> + <td class="cross">✗</td> + <td class="cross">✗</td> + </tr> + </tbody> + </table> + </div> + </section> + + <!-- CTA Section --> + <section class="footer-cta"> + <h2>Bereit, Zeit zu sparen?</h2> + <p>Starte heute mit der kostenlosen 14-Tage-Testversion</p> + <a href="#" class="btn btn-primary" style="padding: 1.25rem 2.5rem; font-size: 1.125rem;">Kostenlos 14 Tage testen →</a> + </section> + + <!-- Footer --> + <footer class="footer"> + <h3>Booking Manager</h3> + <p>All-in-One Termin- & Kundenverwaltung</p> + <p style="margin-top: 2rem; opacity: 0.5;">© 2026 Booking Manager. Alle Rechte vorbehalten.</p> + </footer> + </main> + + <!-- Mobile Bottom CTA --> + <div class="mobile-cta"> + <a href="#pricing" class="btn btn-secondary">Preise</a> + <a href="#" class="btn btn-primary">Kostenlos starten</a> + </div> + + <!-- Mobile Menu Toggle Script --> + <script> + document.addEventListener('DOMContentLoaded', function() { + const hamburger = document.querySelector('.hamburger'); + const mobileMenu = document.getElementById('mobile-menu'); + + // Toggle menu on hamburger click + hamburger.addEventListener('click', function(e) { + e.preventDefault(); + const isActive = mobileMenu.classList.toggle('active'); + hamburger.classList.toggle('active'); + hamburger.setAttribute('aria-expanded', isActive); + }); + + // Close menu when clicking a link + mobileMenu.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + mobileMenu.classList.remove('active'); + hamburger.classList.remove('active'); + hamburger.setAttribute('aria-expanded', 'false'); + }); + }); + + // Close menu when clicking outside + document.addEventListener('click', function(e) { + if (!hamburger.contains(e.target) && !mobileMenu.contains(e.target)) { + mobileMenu.classList.remove('active'); + hamburger.classList.remove('active'); + hamburger.setAttribute('aria-expanded', 'false'); + } + }); + }); + </script> +</body> +</html>
\ No newline at end of file |