628 lines
36 KiB
HTML
628 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Profice - Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing. KI-Telefonassistenten, Chatbots und interne KI-Systeme.">
|
|
<meta name="keywords" content="KI Telefonassistent, Chatbot, digitale Mitarbeiter, Automatisierung, KI Systeme">
|
|
<meta name="author" content="Profice">
|
|
<meta property="og:title" content="Profice - Digitale Mitarbeiter">
|
|
<meta property="og:description" content="Wir bauen funktionierende KI-Systeme für Unternehmen">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://profice.de/images/logo/logo-01-complete.png">
|
|
<meta name="robots" content="index, follow">
|
|
<title>Profice - Digitale Mitarbeiter</title>
|
|
|
|
<!-- Preconnect to external domains -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
|
|
<!-- Preload critical resources -->
|
|
<link rel="preload" href="style/design.css" as="style">
|
|
<link rel="preload" href="style/tech-onepager.css" as="style">
|
|
<link rel="preload" href="style/cursor.css" as="style">
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="style/design.css">
|
|
<link rel="stylesheet" href="style/tech-onepager.css">
|
|
<link rel="stylesheet" href="style/cursor.css">
|
|
|
|
<!-- DNS prefetch for external resources -->
|
|
<link rel="dns-prefetch" href="//www.googletagmanager.com">
|
|
<link rel="dns-prefetch" href="//connect.facebook.net">
|
|
<link rel="dns-prefetch" href="//www.google-analytics.com">
|
|
</head>
|
|
<body>
|
|
<!-- Hexagonal Background Canvas -->
|
|
<canvas id="hexCanvas"></canvas>
|
|
|
|
<!-- Top Banner -->
|
|
<header class="top-banner dark-theme">
|
|
<div class="top-banner-left">
|
|
<div class="banner-left">
|
|
<button class="menu-toggle" id="menuToggle" >
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
<a href="index.html" class="logo-link">
|
|
<img src="images/logo/logo-01-complete.png" alt="Profice Logo" class="logo" >
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top-banner-center">
|
|
<!-- Navigation removed -->
|
|
</div>
|
|
|
|
<div class="top-banner-right">
|
|
<button id="cursorToggle" >
|
|
<img src="images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
|
</button>
|
|
</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>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section" id="hero">
|
|
<div class="hero-container">
|
|
<div class="hero-left">
|
|
<div class="hero-text">
|
|
<h1 class="hero-headline">
|
|
Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.
|
|
</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.
|
|
</p>
|
|
<div class="hero-buttons">
|
|
<button class="cta-btn primary" id="kiPhoneBtn">Mit KI sprechen</button>
|
|
<button class="cta-btn secondary" id="chatBtn">Im Chat starten</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-right">
|
|
<div class="system-graphic" id="systemGraphic">
|
|
<!-- Connection Lines (behind nodes) -->
|
|
<svg class="connections" id="connections">
|
|
<!-- Lines will be drawn by JavaScript -->
|
|
</svg>
|
|
|
|
<!-- Central KI Node -->
|
|
<div class="node central-node" data-node="ki-assistent" data-tooltip="Der zentrale KI-Assistent verarbeitet alle Anfragen und koordiniert die Kommunikation zwischen den verschiedenen Systemen. Er ist das Herzstück Ihrer digitalen Mitarbeiter.">
|
|
<div class="node-content">
|
|
<div class="node-icon">🤖</div>
|
|
<div class="node-label">KI ASSISTENT</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connected Nodes in circular pattern -->
|
|
<div class="node phone-node" data-node="telefon" data-tooltip="Automatisierte Telefonannahme mit KI-Spracherkennung. Der KI-Assistent nimmt Anrufe entgegen, versteht Kundenanfragen und leitet sie an die richtige Abteilung weiter.">
|
|
<div class="node-content">
|
|
<div class="node-icon">📞</div>
|
|
<div class="node-label">Telefon</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node chat-node" data-node="chat" data-tooltip="Intelligenter Website-Chat der nächsten Generation. Versteht natürliche Sprache, kategorisiert Anfragen und strukturiert Daten für die Übergabe an menschliche Mitarbeiter.">
|
|
<div class="node-content">
|
|
<div class="node-icon">💬</div>
|
|
<div class="node-label">Website Chat</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node crm-node" data-node="crm" data-tooltip="Nahtlose CRM-Integration. Alle Kundendaten und Interaktionen werden automatisch erfasst und in Ihrem CRM-System synchronisiert für eine 360°-Kundensicht.">
|
|
<div class="node-content">
|
|
<div class="node-icon">📊</div>
|
|
<div class="node-label">CRM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node ticket-node" data-node="tickets" data-tooltip="Automatisiertes Ticketsystem. KI erstellt, kategorisiert und priorisiert Support-Tickets und sorgt für eine schnelle und effiziente Bearbeitung aller Anfragen.">
|
|
<div class="node-content">
|
|
<div class="node-icon">🎫</div>
|
|
<div class="node-label">Ticketsystem</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="node team-node" data-node="team" data-tooltip="Intelligente Team-Koordination. Der KI-Assistent verteilt Aufgaben an die richtigen Teammitglieder und sorgt für optimale Auslastung und schnelle Reaktionszeiten.">
|
|
<div class="node-content">
|
|
<div class="node-icon">👥</div>
|
|
<div class="node-label">Team</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Systeme Section -->
|
|
<section class="systeme-section" id="systeme">
|
|
<div class="container">
|
|
<h2 class="section-headline">Keine Beratung. Wir bauen funktionierende Systeme.</h2>
|
|
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Nicht für jeden Section -->
|
|
<section class="qualification-section" id="qualification">
|
|
<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>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon chaos">📋</div>
|
|
<span>Keine digitalen Prozesse vorhanden</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon chaos">📋</div>
|
|
<span>Technik-Aversion im Team</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon chaos">📋</div>
|
|
<span>Keine Notwendigkeit zur Skalierung</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>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon check">✓</div>
|
|
<span>Überlasteter Support</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon check">✓</div>
|
|
<span>Wachsendes Unternehmen</span>
|
|
</li>
|
|
<li class="qual-item">
|
|
<div class="qual-icon check">✓</div>
|
|
<span>Prozessoptimierung gewünscht</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3 Schritte Section -->
|
|
<section class="process-section" id="process">
|
|
<div class="container">
|
|
<h2 class="section-headline">In 3 Schritten zum digitalen Mitarbeiter.</h2>
|
|
|
|
<div class="process-line" id="processLine">
|
|
<div class="process-step active" data-step="1">
|
|
<div class="step-circle">1</div>
|
|
<div class="step-label">Analyse</div>
|
|
</div>
|
|
<div class="process-connector" id="connector1"></div>
|
|
<div class="process-step" data-step="2">
|
|
<div class="step-circle">2</div>
|
|
<div class="step-label">Bau</div>
|
|
</div>
|
|
<div class="process-connector" id="connector2"></div>
|
|
<div class="process-step" data-step="3">
|
|
<div class="step-circle">3</div>
|
|
<div class="step-label">Betrieb</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="process-details">
|
|
<div class="step-detail" data-step-detail="1">
|
|
<h3>1. Analyse</h3>
|
|
<p>Wir verstehen eure aktuellen Prozesse, identifizieren Automatisierungspotenziale und definieren klare Ziele.</p>
|
|
</div>
|
|
<div class="step-detail" data-step-detail="2">
|
|
<h3>2. Bau</h3>
|
|
<p>Entwicklung der KI-Systeme, Integration in bestehende Tools und umfangreiche Tests.</p>
|
|
</div>
|
|
<div class="step-detail" data-step-detail="3">
|
|
<h3>3. Betrieb</h3>
|
|
<p>Go-live, Monitoring, kontinuierliche Optimierung und Schulung eures Teams.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ergebnisse Section -->
|
|
<section class="results-section" id="results">
|
|
<div class="container">
|
|
<h2 class="section-headline">Messbare Ergebnisse</h2>
|
|
|
|
<div class="results-grid">
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">-52%</div>
|
|
<div class="card-label">Unnötige Anrufe</div>
|
|
<div class="card-detail">Durch KI-Vorfilterung</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">24/7</div>
|
|
<div class="card-label">Automatisierte Antworten</div>
|
|
<div class="card-detail">Ohne Ausfallzeiten</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">+38%</div>
|
|
<div class="card-label">Konversionsrate</div>
|
|
<div class="card-detail">Durch sofortige Reaktion</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">-67%</div>
|
|
<div class="card-label">Suchzeit intern</div>
|
|
<div class="card-detail">Durch Wissens-KI</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">0</div>
|
|
<div class="card-label">Wartezeit</div>
|
|
<div class="card-detail">Sofortige Verfügbarkeit</div>
|
|
</div>
|
|
|
|
<div class="data-card glass-morphism">
|
|
<div class="card-metric">100%</div>
|
|
<div class="card-label">Wissensverfügbarkeit</div>
|
|
<div class="card-detail">Im gesamten Team</div>
|
|
</div>
|
|
</div>
|
|
</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 class="chat-input-container">
|
|
<input type="text" class="chat-input" placeholder="Ihre Nachricht..." maxlength="500">
|
|
<button class="chat-send" type="button">
|
|
<img src="images/icons/iconography-02.png" alt="Senden">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Banner -->
|
|
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
|
<style>
|
|
.footer-banner a { color: white !important; }
|
|
</style>
|
|
<div class="footer-container">
|
|
<div class="footer-content">
|
|
<!-- Company Info Section -->
|
|
<div class="footer-section">
|
|
<div class="footer-description">
|
|
<p>Wir bauen digitale Mitarbeiter für Vertrieb, Support und Marketing.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links Section -->
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">Services</h4>
|
|
<nav class="footer-nav">
|
|
<a href="#systeme" class="footer-link">KI Systeme</a>
|
|
<a href="#interaction" class="footer-link">Demo</a>
|
|
<a href="sites/offers.html" class="footer-link">Kontakt</a>
|
|
<a href="sites/leads.html" class="footer-link">Dashboard</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Legal Section -->
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">Rechtliches</h4>
|
|
<nav class="footer-nav">
|
|
<a href="#" class="footer-link">Datenschutzerklärung</a>
|
|
<a href="#" class="footer-link">Impressum</a>
|
|
<a href="#" class="footer-link">AGB</a>
|
|
<a href="#" class="footer-link">Cookie-Richtlinie</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Contact Section -->
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">Kontakt</h4>
|
|
<div class="footer-contact">
|
|
<div class="contact-item">
|
|
<span class="contact-icon">📞</span>
|
|
<span>+49 123 456789</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<span class="contact-icon">✉️</span>
|
|
<span>info@profice.de</span>
|
|
</div>
|
|
</div>
|
|
<div class="social-media">
|
|
<div class="social-icons">
|
|
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
|
<img src="images/icons/instagram.png" alt="Instagram" width="40" height="40">
|
|
</a>
|
|
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
|
<img src="images/icons/facebook.png" alt="Facebook" width="40" height="40">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<div class="footer-bottom-content">
|
|
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
|
<div class="footer-bottom-links">
|
|
<a href="#" class="footer-link">Datenschutz</a>
|
|
<span class="separator">•</span>
|
|
<a href="#" class="footer-link">Impressum</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Optimized script loading -->
|
|
<script src="scripts/hex-background.js" defer></script>
|
|
<script src="scripts/script.js" defer></script>
|
|
<script src="scripts/tech-onepager.js" defer></script>
|
|
<script src="scripts/cursor.js" defer></script>
|
|
<script src="scripts/scroll-header.min.js" defer></script>
|
|
<script src="scripts/chat.js" defer></script>
|
|
</body>
|
|
</html>
|