redisgn
This commit is contained in:
@@ -85,12 +85,6 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Slide Menu -->
|
||||
<nav class="slide-menu" id="slideMenu">
|
||||
<a href="index.html" class="active">Startseite</a>
|
||||
<a href="sites/offers.html">Kontakt & Anfrage</a>
|
||||
<a href="sites/leads.html">Leads Dashboard</a>
|
||||
</nav>
|
||||
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
@@ -100,13 +94,13 @@
|
||||
<div class="hero-left">
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-headline">
|
||||
Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.
|
||||
Ihr Telefon klingelt. Keiner geht ran. Das kostet Sie Aufträge.
|
||||
</h1>
|
||||
<p class="hero-subline">
|
||||
KI-Telefonassistenten, Chatbots und interne KI-Systeme. Integriert in eure bestehenden Tools.
|
||||
</p>
|
||||
<p class="hero-proof">
|
||||
Für Unternehmen, die wachsen wollen ohne mehr Personal einzustellen.
|
||||
Für Unternehmen, die wachsen wollen - ohne mehr Personal einzustellen.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="cta-btn primary" id="kiPhoneBtn">Mit KI sprechen</button>
|
||||
@@ -170,218 +164,45 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Systeme Section -->
|
||||
<section class="systeme-section" id="systeme">
|
||||
<!-- KI Demo Widgets Section -->
|
||||
<section class="ki-demo-section" id="demo-section">
|
||||
<div class="container">
|
||||
<h2 class="section-headline">Keine Beratung. Wir bauen funktionierende Systeme.</h2>
|
||||
<span class="section-label">LIVE DEMO</span>
|
||||
<h2 class="demo-section-title">Testen Sie es selbst. Jetzt.</h2>
|
||||
<p class="demo-section-subtitle">Kein Mockup. Das ist das System, das bei unseren Kunden läuft.</p>
|
||||
|
||||
<div class="systeme-grid">
|
||||
<!-- KI Telefonassistent -->
|
||||
<div class="system-card" data-system="phone">
|
||||
<div class="system-visual">
|
||||
<div class="phone-system phone-workflow">
|
||||
<!-- SVG for connections -->
|
||||
<svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- Background dashed connection paths -->
|
||||
<g class="workflow-bg-paths">
|
||||
<!-- Path from Phone to KI Processor -->
|
||||
<path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from KI Processor to CRM -->
|
||||
<path d="M 130 60 L 170 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from CRM to Team -->
|
||||
<path d="M 210 60 L 250 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Node elements positioned over SVG -->
|
||||
<div class="workflow-nodes">
|
||||
<div class="wf-node wf-node-1" title="Telefon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#d63384" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
</div>
|
||||
<div class="wf-node wf-node-2" title="KI Verarbeitung">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
|
||||
</div>
|
||||
<div class="wf-node wf-node-3" title="CRM">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#fd7e14" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
|
||||
</div>
|
||||
<div class="wf-node wf-node-4" title="Team">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>KI Telefonassistent</h3>
|
||||
<div class="system-details">
|
||||
<div class="what-it-does">
|
||||
<h4>Was es tut:</h4>
|
||||
<ul>
|
||||
<li>Annahme eingehender Anrufe</li>
|
||||
<li>Verständnis der Kundenanfrage</li>
|
||||
<li>Weiterleitung an richtige Abteilung</li>
|
||||
<li>Dokumentation im CRM</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="result">
|
||||
<h4>Ergebnis:</h4>
|
||||
<ul>
|
||||
<li>-52% unnötige Anrufe</li>
|
||||
<li>24/7 Erreichbarkeit</li>
|
||||
<li>Qualifiziertere Weiterleitungen</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="demo-widgets-grid">
|
||||
<!-- KI Telefon Widget -->
|
||||
<div class="demo-widget phone-demo">
|
||||
<div class="demo-icon-circle">
|
||||
<span>📞</span>
|
||||
</div>
|
||||
<h3>KI-Telefonassistent</h3>
|
||||
<p>Rufen Sie jetzt an und erleben Sie, wie unsere KI Ihr Anliegen aufnimmt und verarbeitet.</p>
|
||||
<button class="demo-btn" id="demoPhoneBtn">Jetzt anrufen</button>
|
||||
<span class="demo-note">Kostenlos · Keine Wartezeit · 24/7</span>
|
||||
</div>
|
||||
|
||||
<!-- KI Chat -->
|
||||
<div class="system-card" data-system="chat">
|
||||
<div class="system-visual">
|
||||
<div class="chat-system chat-workflow">
|
||||
<!-- SVG for connections -->
|
||||
<svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- Background dashed connection paths -->
|
||||
<g class="workflow-bg-paths">
|
||||
<!-- Path from Website to KI Processor -->
|
||||
<path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from KI Processor to Category -->
|
||||
<path d="M 130 60 L 170 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from Category to Human -->
|
||||
<path d="M 210 60 L 250 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Node elements positioned over SVG -->
|
||||
<div class="workflow-nodes">
|
||||
<div class="wf-node wf-node-1" title="Website">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#20c997" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||
</div>
|
||||
<div class="wf-node wf-node-2" title="KI Verarbeitung">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
|
||||
</div>
|
||||
<div class="wf-node wf-node-3" title="Kategorisierung">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#fd7e14" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
|
||||
</div>
|
||||
<div class="wf-node wf-node-4" title="Mitarbeiter">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</div>
|
||||
<!-- KI Chat Widget -->
|
||||
<div class="demo-widget chat-demo">
|
||||
<div class="demo-icon-circle chat-icon">
|
||||
<span>💬</span>
|
||||
</div>
|
||||
<h3>KI-Chat</h3>
|
||||
<p>Stellen Sie eine Frage – die KI antwortet sofort und qualifiziert Ihr Anliegen.</p>
|
||||
<div class="chat-preview">
|
||||
<div class="chat-header">
|
||||
<span class="online-dot"></span>
|
||||
Profice KI · Online
|
||||
</div>
|
||||
<div class="chat-messages">
|
||||
<div class="chat-bubble">
|
||||
<span>Hallo! Ich bin der Profice KI-Assistent. Stellen Sie mir eine Frage – ich zeige Ihnen, wie das System funktioniert.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>KI Chat</h3>
|
||||
<div class="system-details">
|
||||
<div class="what-it-does">
|
||||
<h4>Was es tut:</h4>
|
||||
<ul>
|
||||
<li>Website-Besucher verstehen</li>
|
||||
<li>Kategorisierung der Anfragen</li>
|
||||
<li>Strukturierte Datenerfassung</li>
|
||||
<li>Übergabe an menschliche Mitarbeiter</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="result">
|
||||
<h4>Ergebnis:</h4>
|
||||
<ul>
|
||||
<li>+38% Konversionsrate</li>
|
||||
<li>0 Wartezeit</li>
|
||||
<li>Strukturierte Leads</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interne KI -->
|
||||
<div class="system-card" data-system="internal">
|
||||
<div class="system-visual">
|
||||
<div class="internal-system internal-workflow">
|
||||
<!-- SVG for connections and animated glow -->
|
||||
<svg class="internal-workflow-svg" viewBox="0 0 320 120" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<!-- Glow filter for the green light effect -->
|
||||
<filter id="internalGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background dashed connection paths -->
|
||||
<g class="internal-bg-paths">
|
||||
<!-- Path from Search to split point -->
|
||||
<path id="int-path1-bg" d="M 55 60 L 95 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from split to Document (top) -->
|
||||
<path id="int-path2a-bg" d="M 95 60 L 115 60 L 115 30 L 135 30" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from split to Message (bottom) -->
|
||||
<path id="int-path2b-bg" d="M 95 60 L 115 60 L 115 90 L 135 90" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from Document to merge point -->
|
||||
<path id="int-path3a-bg" d="M 175 30 L 195 30 L 195 60 L 205 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from Message to merge point -->
|
||||
<path id="int-path3b-bg" d="M 175 90 L 195 90 L 195 60 L 205 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from merge to KI Processor -->
|
||||
<path id="int-path4-bg" d="M 205 60 L 215 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from KI Processor to Lightbulb -->
|
||||
<path id="int-path5-bg" d="M 255 60 L 275 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
</g>
|
||||
|
||||
<!-- Animated green glow paths -->
|
||||
<g class="internal-glow-paths">
|
||||
<path id="int-path1" d="M 55 60 L 95 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path2a" d="M 95 60 L 115 60 L 115 30 L 135 30" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path2b" d="M 95 60 L 115 60 L 115 90 L 135 90" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path3a" d="M 175 30 L 195 30 L 195 60 L 205 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path3b" d="M 175 90 L 195 90 L 195 60 L 205 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path4" d="M 205 60 L 215 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path5" d="M 255 60 L 275 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
</g>
|
||||
|
||||
<!-- Node border rectangles for glow animation -->
|
||||
<g class="internal-node-borders">
|
||||
<rect id="int-node1-border" x="15" y="40" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node2-border" x="135" y="10" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node3-border" x="135" y="70" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node4-border" x="215" y="40" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node5-border" x="275" y="40" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Node elements positioned over SVG -->
|
||||
<div class="internal-nodes">
|
||||
<div class="int-node int-node-1" title="Suchanfrage">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||
</div>
|
||||
<div class="int-node int-node-2" title="Dokumente">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
|
||||
</div>
|
||||
<div class="int-node int-node-3" title="Nachrichten">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
</div>
|
||||
<div class="int-node int-node-4" title="KI Verarbeitung">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
|
||||
</div>
|
||||
<div class="int-node int-node-5" title="Antwort">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#ffc107" stroke-width="2"><path d="M9 18h6M10 22h4M12 2v1M4.22 4.22l.71.71M1 12h1M4.22 19.78l.71-.71M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Interne KI</h3>
|
||||
<div class="system-details">
|
||||
<div class="what-it-does">
|
||||
<h4>Was es tut:</h4>
|
||||
<ul>
|
||||
<li>Interne Dokumente analysieren</li>
|
||||
<li>Mitarbeiterfragen beantworten</li>
|
||||
<li>Wissen zentralisieren</li>
|
||||
<li>Training neuer Mitarbeiter</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="result">
|
||||
<h4>Ergebnis:</h4>
|
||||
<ul>
|
||||
<li>-67% Suchzeit</li>
|
||||
<li>100% Wissensverfügbarkeit</li>
|
||||
<li>Schnellere Einarbeitung</li>
|
||||
</ul>
|
||||
<div class="chat-input-area">
|
||||
<input type="text" class="chat-input-field" placeholder="Ihre Nachricht...">
|
||||
<button class="chat-send-btn">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -389,50 +210,105 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Nicht für jeden Section -->
|
||||
<section class="qualification-section" id="qualification">
|
||||
<!-- Was wir lösen Section -->
|
||||
<section class="problems-section" id="problems">
|
||||
<div class="container">
|
||||
<div class="qualification-grid">
|
||||
<div class="qual-left">
|
||||
<h3>Nicht geeignet wenn...</h3>
|
||||
<ul class="qual-list negative">
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon chaos">📋</div>
|
||||
<span>Nur eine "schöne Website" gewollt</span>
|
||||
<span class="section-label">WAS WIR LÖSEN</span>
|
||||
<h2 class="problems-headline">Drei Probleme, die Unternehmen täglich Geld kosten.</h2>
|
||||
|
||||
<div class="problems-grid">
|
||||
<!-- Problem 1 -->
|
||||
<div class="problem-card">
|
||||
<span class="problem-number">01</span>
|
||||
<h3>Verpasste Anrufe = verlorene Aufträge</h3>
|
||||
<p>Ihre Mitarbeiter sind im Einsatz, in Meetings oder im Feierabend. Jeder Anruf, der ins Leere läuft, ist ein potenzieller Kunde, der woanders kauft.</p>
|
||||
</div>
|
||||
|
||||
<div class="solution-card">
|
||||
<span class="solution-label">— KI Telefonassistent</span>
|
||||
<h3>Jeder Anruf wird angenommen</h3>
|
||||
<p>Versteht das Anliegen, erfasst Kontaktdaten, vereinbart Rückrufe und dokumentiert alles im CRM. Rund um die Uhr.</p>
|
||||
<div class="solution-badge">24/7 erreichbar · 0 verpasste Anrufe</div>
|
||||
</div>
|
||||
|
||||
<!-- Problem 2 -->
|
||||
<div class="problem-card">
|
||||
<span class="problem-number">02</span>
|
||||
<h3>Anfragen bleiben stunden- oder tagelang liegen</h3>
|
||||
<p>Kontaktformulare, E-Mails, Chat-Nachrichten – alles landet in einem Postfach und wird irgendwann manuell bearbeitet. Bis dahin hat der Interessent woanders gekauft.</p>
|
||||
</div>
|
||||
|
||||
<div class="solution-card">
|
||||
<span class="solution-label">— KI Chat · Automatisierung</span>
|
||||
<h3>Sofortige Reaktion auf jede Anfrage</h3>
|
||||
<p>Chatbot qualifiziert Besucher in Echtzeit. Automatische Follow-up-Mails innerhalb von 5 Minuten. Integration in Ihr CRM.</p>
|
||||
<div class="solution-badge">5 Min. Reaktionszeit statt 48 Stunden</div>
|
||||
</div>
|
||||
|
||||
<!-- Problem 3 -->
|
||||
<div class="problem-card">
|
||||
<span class="problem-number">03</span>
|
||||
<h3>Wissen steckt in Köpfen, nicht im System</h3>
|
||||
<p>Wenn ein Mitarbeiter krank wird oder kündigt, geht Wissen verloren. Neue Mitarbeiter brauchen Monate, bis sie produktiv sind.</p>
|
||||
</div>
|
||||
|
||||
<div class="solution-card">
|
||||
<span class="solution-label">— Interne Wissens-KI</span>
|
||||
<h3>Firmenwissen auf Knopfdruck</h3>
|
||||
<p>KI-System, das auf Ihre Dokumente, SOPs und Handbücher zugreift. Mitarbeiter fragen per Chat und bekommen sofort die richtige Antwort.</p>
|
||||
<div class="solution-badge">Onboarding in Tagen statt Monaten</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Passt das für Sie Section -->
|
||||
<section class="fit-section" id="fit">
|
||||
<div class="container">
|
||||
<span class="section-label">PASST DAS FÜR SIE?</span>
|
||||
<h2 class="fit-headline">Ehrliche Einschätzung.</h2>
|
||||
|
||||
<div class="fit-grid">
|
||||
<div class="fit-card negative">
|
||||
<h3 class="fit-card-title negative-title">Wahrscheinlich nicht passend, wenn ...</h3>
|
||||
<ul class="fit-list">
|
||||
<li class="fit-item negative-item">
|
||||
<span class="fit-icon negative-icon">✕</span>
|
||||
<span>Weniger als 20 Kundenanfragen pro Woche</span>
|
||||
</li>
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon chaos">📋</div>
|
||||
<span>Keine digitalen Prozesse vorhanden</span>
|
||||
<li class="fit-item negative-item">
|
||||
<span class="fit-icon negative-icon">✕</span>
|
||||
<span>Einmaliges Projekt gesucht, kein laufender Service</span>
|
||||
</li>
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon chaos">📋</div>
|
||||
<span>Technik-Aversion im Team</span>
|
||||
<li class="fit-item negative-item">
|
||||
<span class="fit-icon negative-icon">✕</span>
|
||||
<span>Team nutzt grundsätzlich keine digitalen Tools</span>
|
||||
</li>
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon chaos">📋</div>
|
||||
<span>Keine Notwendigkeit zur Skalierung</span>
|
||||
<li class="fit-item negative-item">
|
||||
<span class="fit-icon negative-icon">✕</span>
|
||||
<span>Nur eine neue Website benötigt</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="qual-right">
|
||||
<h3>Sehr sinnvoll wenn...</h3>
|
||||
<ul class="qual-list positive">
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon check">✓</div>
|
||||
<span>Hoher Anrufaufkommen</span>
|
||||
<div class="fit-card positive">
|
||||
<h3 class="fit-card-title positive-title">Sehr gut passend, wenn ...</h3>
|
||||
<ul class="fit-list">
|
||||
<li class="fit-item positive-item">
|
||||
<span class="fit-icon positive-icon">✓</span>
|
||||
<span>Regelmäßig Anrufe und Anfragen verpasst werden</span>
|
||||
</li>
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon check">✓</div>
|
||||
<span>Überlasteter Support</span>
|
||||
<li class="fit-item positive-item">
|
||||
<span class="fit-icon positive-icon">✓</span>
|
||||
<span>Support-Team an der Belastungsgrenze arbeitet</span>
|
||||
</li>
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon check">✓</div>
|
||||
<span>Wachsendes Unternehmen</span>
|
||||
<li class="fit-item positive-item">
|
||||
<span class="fit-icon positive-icon">✓</span>
|
||||
<span>Mindestens 5 Mitarbeiter und ein CRM vorhanden</span>
|
||||
</li>
|
||||
<li class="qual-item">
|
||||
<div class="qual-icon check">✓</div>
|
||||
<span>Prozessoptimierung gewünscht</span>
|
||||
<li class="fit-item positive-item">
|
||||
<span class="fit-icon positive-icon">✓</span>
|
||||
<span>Wachstum gewünscht ohne proportional mehr Personal</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -440,6 +316,49 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investition Section -->
|
||||
<section class="pricing-section" id="pricing">
|
||||
<div class="container">
|
||||
<span class="section-label">INVESTITION</span>
|
||||
<h2 class="pricing-headline">Klare Preise. Keine Überraschungen.</h2>
|
||||
|
||||
<div class="pricing-box">
|
||||
<div class="pricing-cards">
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-amount">
|
||||
<span class="pricing-prefix">ab</span>
|
||||
<span class="pricing-value">3.000 €</span>
|
||||
</div>
|
||||
<div class="pricing-label">Einmalig Setup</div>
|
||||
<div class="pricing-detail">je nach Umfang & Integrationen</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-amount">
|
||||
<span class="pricing-prefix">ab</span>
|
||||
<span class="pricing-value">990 €</span>
|
||||
<span class="pricing-suffix">/Monat</span>
|
||||
</div>
|
||||
<div class="pricing-label">Laufender Betrieb</div>
|
||||
<div class="pricing-detail">inkl. Monitoring, Support & Optimierung</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="pricing-note">Der genaue Preis hängt davon ab, welche Module Sie brauchen und welche Systeme angebunden werden. In einem 15-Minuten-Gespräch können wir das klären.</p>
|
||||
|
||||
<div class="pricing-cta">
|
||||
<a href="sites/offers.html" class="pricing-btn">Unverbindlich anfragen</a>
|
||||
</div>
|
||||
|
||||
<div class="pricing-benefits">
|
||||
<span class="pricing-benefit"><span class="benefit-check"></span>✓</span> Keine Mindestlaufzeit über 3 Monate</span>
|
||||
<span class="pricing-benefit"><span class="benefit-check">✓</span> Danach monatlich kündbar</span>
|
||||
<span class="pricing-benefit"><span class="benefit-check">✓</span> Keine versteckten Kosten</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 Schritte Section -->
|
||||
<section class="process-section" id="process">
|
||||
<div class="container">
|
||||
@@ -524,39 +443,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interaction Section -->
|
||||
<section class="interaction-section" id="interaction">
|
||||
<div class="container">
|
||||
<h2 class="section-headline">Sprich nicht mit uns. Sprich mit unserem System.</h2>
|
||||
|
||||
<div class="interaction-cards">
|
||||
<div class="interaction-card" id="phoneInteraction">
|
||||
<div class="card-visual">
|
||||
<div class="microphone">
|
||||
<div class="mic-icon">🎤</div>
|
||||
<div class="pulse-ring"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>KI Telefon</h3>
|
||||
<p>Teste unseren KI-Telefonassistenten jetzt</p>
|
||||
<button class="interaction-btn primary">Jetzt anrufen</button>
|
||||
</div>
|
||||
|
||||
<div class="interaction-card" id="chatInteraction">
|
||||
<h3>KI Chat</h3>
|
||||
<p>Starte eine Konversation mit unserer KI</p>
|
||||
<div class="card-visual">
|
||||
<div class="chat-window">
|
||||
<div class="chat-header">KI Support</div>
|
||||
<div class="chat-messages">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Banner -->
|
||||
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||||
<style>
|
||||
@@ -639,6 +525,7 @@
|
||||
<script src="scripts/cursor.js" defer></script>
|
||||
<script src="scripts/scroll-header.min.js" defer></script>
|
||||
<script src="scripts/chat.js" defer></script>
|
||||
<script src="scripts/demo-chat.js" defer></script>
|
||||
<script src="scripts/console-image.js" defer></script>
|
||||
|
||||
</body>
|
||||
|
||||
140
Profice WebSite/scripts/demo-chat.js
Normal file
140
Profice WebSite/scripts/demo-chat.js
Normal file
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* Demo Chat Widget - Functional Chat Interface for KI Demo Section
|
||||
* Connects to N8N webhook via send.php
|
||||
*/
|
||||
|
||||
class DemoChat {
|
||||
constructor() {
|
||||
this.sessionId = this.generateSessionId();
|
||||
this.isTyping = false;
|
||||
this.messages = [];
|
||||
this.chatMessages = null;
|
||||
this.chatInput = null;
|
||||
this.sendBtn = null;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Wait for DOM to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => this.setup());
|
||||
} else {
|
||||
this.setup();
|
||||
}
|
||||
}
|
||||
|
||||
setup() {
|
||||
// Get demo chat elements
|
||||
this.chatMessages = document.querySelector('.chat-demo .chat-messages');
|
||||
this.chatInput = document.querySelector('.chat-demo .chat-input-field');
|
||||
this.sendBtn = document.querySelector('.chat-demo .chat-send-btn');
|
||||
|
||||
if (!this.chatMessages || !this.chatInput || !this.sendBtn) {
|
||||
console.warn('Demo chat elements not found');
|
||||
return;
|
||||
}
|
||||
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
generateSessionId() {
|
||||
return 'demo_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// Send on button click
|
||||
this.sendBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.sendMessage();
|
||||
});
|
||||
|
||||
// Send on Enter key
|
||||
this.chatInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
this.sendMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addMessageToUI(sender, text) {
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `chat-bubble ${sender === 'user' ? 'user-bubble' : ''}`;
|
||||
messageDiv.innerHTML = `<span>${this.escapeHtml(text)}</span>`;
|
||||
this.chatMessages.appendChild(messageDiv);
|
||||
this.scrollToBottom();
|
||||
}
|
||||
|
||||
async sendMessage() {
|
||||
const message = this.chatInput?.value?.trim();
|
||||
|
||||
if (!message || this.isTyping) return;
|
||||
|
||||
// Add user message to UI
|
||||
this.addMessageToUI('user', message);
|
||||
this.chatInput.value = '';
|
||||
|
||||
// Show typing indicator
|
||||
this.showTypingIndicator();
|
||||
this.isTyping = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/scripts/add/send.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'chat',
|
||||
message: message,
|
||||
session_id: this.sessionId
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.data && data.data.ai_response) {
|
||||
this.addMessageToUI('ki', data.data.ai_response);
|
||||
} else {
|
||||
this.addMessageToUI('ki', 'Entschuldigung, es gab ein Problem. Bitte versuchen Sie es später erneut.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Demo chat error:', error);
|
||||
this.addMessageToUI('ki', 'Verbindung zum Server fehlgeschlagen. Bitte überprüfen Sie Ihre Internetverbindung.');
|
||||
} finally {
|
||||
this.hideTypingIndicator();
|
||||
this.isTyping = false;
|
||||
}
|
||||
}
|
||||
|
||||
showTypingIndicator() {
|
||||
if (!this.chatMessages.querySelector('.typing-indicator')) {
|
||||
const typingDiv = document.createElement('div');
|
||||
typingDiv.className = 'chat-bubble typing-indicator';
|
||||
typingDiv.innerHTML = '<span>...</span>';
|
||||
this.chatMessages.appendChild(typingDiv);
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
hideTypingIndicator() {
|
||||
const typingIndicator = this.chatMessages.querySelector('.typing-indicator');
|
||||
if (typingIndicator) {
|
||||
typingIndicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
scrollToBottom() {
|
||||
this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize demo chat
|
||||
window.demoChat = new DemoChat();
|
||||
@@ -41,6 +41,38 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
initSmoothScrolling();
|
||||
|
||||
// ==========================================
|
||||
// 1.5. BUTTON NAVIGATION TO DEMO SECTION
|
||||
// ==========================================
|
||||
|
||||
function initButtonNavigation() {
|
||||
const kiPhoneBtn = document.getElementById('kiPhoneBtn');
|
||||
const chatBtn = document.getElementById('chatBtn');
|
||||
const demoSection = document.getElementById('demo-section');
|
||||
|
||||
if (demoSection) {
|
||||
const scrollToDemo = () => {
|
||||
const header = document.querySelector('.top-banner');
|
||||
const headerHeight = header ? header.offsetHeight : 90;
|
||||
|
||||
window.scrollTo({
|
||||
top: demoSection.offsetTop - headerHeight - 20,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
if (kiPhoneBtn) {
|
||||
kiPhoneBtn.addEventListener('click', scrollToDemo);
|
||||
}
|
||||
|
||||
if (chatBtn) {
|
||||
chatBtn.addEventListener('click', scrollToDemo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initButtonNavigation();
|
||||
|
||||
// ==========================================
|
||||
// 2. MENU TOGGLE
|
||||
// ==========================================
|
||||
|
||||
@@ -409,8 +409,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}, 200);
|
||||
}, 100);
|
||||
|
||||
// Show feedback
|
||||
showInteractionFeedback('KI Telefon wird verbunden...');
|
||||
// Show feedback - removed
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -456,7 +455,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}, 200);
|
||||
}, 100);
|
||||
|
||||
showInteractionFeedback('KI Chat wird gestartet...');
|
||||
// Show feedback - removed
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -497,7 +496,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
if (kiPhoneBtn) {
|
||||
kiPhoneBtn.addEventListener('click', () => {
|
||||
showInteractionFeedback('KI Telefon wird verbunden...');
|
||||
// Show feedback - removed
|
||||
// Scroll to interaction section
|
||||
document.getElementById('interaction')?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
@@ -508,7 +507,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
if (chatBtn) {
|
||||
chatBtn.addEventListener('click', () => {
|
||||
showInteractionFeedback('KI Chat wird gestartet...');
|
||||
// Show feedback - removed
|
||||
// Scroll to interaction section
|
||||
document.getElementById('interaction')?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
--accent-orange: #d4864a;
|
||||
--accent-teal: #5a9e96;
|
||||
--accent-green: #7fb882;
|
||||
--widget-bg: rgba(255, 255, 255, 0.9);
|
||||
--widget-border: #d4864a;
|
||||
--widget-shadow: 0 4px 20px rgba(90, 82, 82, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -1532,3 +1535,735 @@ body {
|
||||
filter: brightness(0) invert(1);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* KI Widgets Section */
|
||||
.ki-widgets-section {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, var(--primary-light) 0%, rgba(255, 255, 255, 0.5) 100%);
|
||||
}
|
||||
|
||||
.widgets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ki-widget {
|
||||
background: var(--widget-bg);
|
||||
border: 2px solid var(--widget-border);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
box-shadow: var(--widget-shadow);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ki-widget::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--accent-orange), var(--accent-teal));
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.ki-widget:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.ki-widget:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 30px rgba(90, 82, 82, 0.15);
|
||||
}
|
||||
|
||||
.widget-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.widget-icon {
|
||||
font-size: 2.5rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal));
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 15px rgba(212, 134, 74, 0.3);
|
||||
}
|
||||
|
||||
.widget-header h3 {
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.widget-content p {
|
||||
color: var(--primary-mid);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.widget-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 25px 0;
|
||||
}
|
||||
|
||||
.widget-features li {
|
||||
color: var(--primary-dark);
|
||||
font-size: 0.95rem;
|
||||
padding: 8px 0;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-green);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.widget-btn {
|
||||
background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 25px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(212, 134, 74, 0.3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.widget-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(212, 134, 74, 0.4);
|
||||
}
|
||||
|
||||
.widget-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.ki-widgets-section {
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.widgets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.ki-widget {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.widget-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.widget-header h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* KI Demo Widgets Section */
|
||||
.ki-demo-section {
|
||||
padding: 40px 0 80px 0;
|
||||
margin-top: -40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.demo-section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.demo-section-subtitle {
|
||||
text-align: center;
|
||||
color: var(--primary-mid);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.demo-widgets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 40px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-widget {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 4px 20px rgba(90, 82, 82, 0.1);
|
||||
text-align: center;
|
||||
min-height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demo-widget h3 {
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.demo-widget p {
|
||||
color: var(--primary-mid);
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-icon-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(127, 184, 130, 0.3);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
font-size: 2rem;
|
||||
box-shadow: 0 4px 15px rgba(127, 184, 130, 0.3);
|
||||
}
|
||||
|
||||
.demo-btn {
|
||||
background: var(--accent-teal);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.demo-btn:hover {
|
||||
background: #4a8e86;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.chat-preview {
|
||||
background: #f5f5f5;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
background: linear-gradient(135deg, var(--accent-teal), var(--accent-green));
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
background: var(--accent-teal);
|
||||
color: white;
|
||||
margin: 15px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px 12px 12px 4px;
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.chat-bubble span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.7;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
min-height: 120px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chat-input-field {
|
||||
flex: 1;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20px;
|
||||
padding: 10px 16px;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-input-field:focus {
|
||||
border-color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.chat-send-btn {
|
||||
background: var(--accent-teal);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-send-btn:hover {
|
||||
background: #4a8e86;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.demo-widgets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.demo-widget {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-note {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
color: var(--primary-mid);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #4ade80;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.chat-icon {
|
||||
background: rgba(167, 139, 250, 0.3);
|
||||
}
|
||||
|
||||
.chat-preview .chat-bubble {
|
||||
background: #f0f0f0;
|
||||
color: var(--primary-dark);
|
||||
border-radius: 12px;
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
max-width: 85%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chat-preview .chat-bubble.user-bubble {
|
||||
background: var(--accent-teal);
|
||||
color: white;
|
||||
margin-left: auto;
|
||||
margin-right: 15px;
|
||||
border-radius: 12px 12px 4px 12px;
|
||||
}
|
||||
|
||||
/* Problems Section */
|
||||
.problems-section {
|
||||
padding: 80px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
color: var(--accent-teal);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ki-demo-section .section-label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.problems-headline {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.problems-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.problem-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.problem-number {
|
||||
display: block;
|
||||
color: var(--primary-mid);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.problem-card h3 {
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.problem-card p {
|
||||
color: var(--primary-mid);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.solution-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.solution-label {
|
||||
display: block;
|
||||
color: var(--accent-teal);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.solution-card h3 {
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.solution-card p {
|
||||
color: var(--primary-mid);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.solution-badge {
|
||||
display: inline-block;
|
||||
background: rgba(127, 184, 130, 0.15);
|
||||
color: var(--accent-teal);
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.problems-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.problems-headline {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fit Section */
|
||||
.fit-section {
|
||||
padding: 80px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fit-headline {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.fit-card {
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.fit-card.negative {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.fit-card.positive {
|
||||
background: rgba(0, 128, 0, 0.5);
|
||||
border-left-color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.fit-card-title {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-dark);
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.negative-title {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.positive-title {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.fit-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fit-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--primary-dark);
|
||||
font-weight: 500;
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.fit-icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.negative-icon {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.positive-icon {
|
||||
background: rgba(127, 184, 130, 0.25);
|
||||
color: var(--accent-teal);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fit-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.fit-headline {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pricing Section */
|
||||
.pricing-section {
|
||||
padding: 80px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.pricing-headline {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pricing-headline::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricing-box {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 50px 60px;
|
||||
border: none;
|
||||
border-top: 3px solid var(--accent-orange);
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pricing-cards {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 80px;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pricing-section .pricing-card {
|
||||
text-align: center;
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.pricing-section .pricing-card:hover {
|
||||
transform: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.pricing-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pricing-prefix {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-mid);
|
||||
}
|
||||
|
||||
.pricing-value {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.pricing-suffix {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-mid);
|
||||
}
|
||||
|
||||
.pricing-label {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.pricing-detail {
|
||||
font-size: 0.85rem;
|
||||
color: var(--primary-mid);
|
||||
}
|
||||
|
||||
.pricing-note {
|
||||
text-align: center;
|
||||
color: var(--primary-mid);
|
||||
font-size: 0.95rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.pricing-cta {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.pricing-btn {
|
||||
display: inline-block;
|
||||
background: var(--accent-teal);
|
||||
color: white;
|
||||
padding: 18px 50px;
|
||||
border-radius: 50px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pricing-btn:hover {
|
||||
background: #4a8e86;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pricing-benefits {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pricing-benefit {
|
||||
color: var(--primary-mid);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pricing-benefit::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.benefit-check {
|
||||
color: var(--accent-teal);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pricing-cards {
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pricing-headline {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.pricing-benefits {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user