update
This commit is contained in:
@@ -1,54 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Profice - Digitale Lösungen</title>
|
||||
<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">
|
||||
<link rel="stylesheet" href="style/cookie-consent.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>
|
||||
<!-- Tech Background -->
|
||||
<div class="tech-background">
|
||||
<div class="grid-overlay"></div>
|
||||
<div class="dot-pattern"></div>
|
||||
<div class="gradient-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- Top Banner -->
|
||||
<header class="top-banner dark-theme">
|
||||
<div class="top-banner-left">
|
||||
<div class="banner-left">
|
||||
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
||||
<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" loading="lazy">
|
||||
<img src="images/logo/logo-01-complete.png" alt="Profice Logo" class="logo" >
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-banner-center">
|
||||
<nav class="main-nav">
|
||||
<a href="#hero-section" class="nav-link">Startseite</a>
|
||||
<a href="#enterprise" class="nav-link">Unternehmen</a>
|
||||
<a href="#pricing" class="nav-link">Preise</a>
|
||||
<a href="#services" class="nav-link">Lösungen</a>
|
||||
</nav>
|
||||
<!-- Navigation removed -->
|
||||
</div>
|
||||
|
||||
<div class="top-banner-right">
|
||||
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
||||
<button id="cursorToggle" >
|
||||
<img src="images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
||||
</button>
|
||||
<button id="loginBtn" class="login-btn" aria-label="Anmelden" title="Anmelden">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
||||
<polyline points="10 17 15 12 10 7"></polyline>
|
||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
||||
</svg>
|
||||
Anmelden
|
||||
</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>
|
||||
@@ -57,201 +76,455 @@
|
||||
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<main class="home-content">
|
||||
|
||||
<section id="hero-section" class="hero-section">
|
||||
<div class="hero-text">
|
||||
<h1>Transformieren Sie Ihr Unternehmen digital</h1>
|
||||
<p>Maßgeschneiderte Lösungen für Web, KI-Integration und Prozessautomatisierung. Wir bringen Ihre Vision in die digitale Realität.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="sites/offers.html" class="cta-btn primary">Projekt starten</a>
|
||||
<a href="#services" class="cta-btn secondary">Mehr erfahren</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image-placeholder">
|
||||
<span>[Bild: Digitale Transformation Illustration]</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="enterprise" class="enterprise-section">
|
||||
<h2 class="section-title">Unternehmenslösungen</h2>
|
||||
<div class="enterprise-content">
|
||||
<p>Maßgeschneiderte Lösungen für große Unternehmen mit komplexen Anforderungen.</p>
|
||||
<div class="enterprise-features">
|
||||
<div class="feature-item">
|
||||
<h3>Skalierbarkeit</h3>
|
||||
<p>Lösungen, die mit Ihrem Unternehmen wachsen</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Sicherheit</h3>
|
||||
<p>Unternehmenssicherheit und Compliance</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Integration</h3>
|
||||
<p>Nahtlose Integration mit bestehenden Systemen</p>
|
||||
<!-- 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">
|
||||
<span class="green-highlight-box">Für Unternehmen, die wachsen wollen ohne mehr Personal einzustellen.</span>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section id="pricing" class="pricing-section">
|
||||
<h2 class="section-title">Preise</h2>
|
||||
<div class="pricing-grid">
|
||||
<div class="pricing-card">
|
||||
<h3>Starter</h3>
|
||||
<div class="price">€999</div>
|
||||
<p>Perfekt für kleine Unternehmen</p>
|
||||
<ul>
|
||||
<li>Webentwicklung</li>
|
||||
<li>Grundlegende KI-Integration</li>
|
||||
<li>3 Monate Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pricing-card featured">
|
||||
<h3>Professional</h3>
|
||||
<div class="price">€2.499</div>
|
||||
<p>Ideal für wachsende Unternehmen</p>
|
||||
<ul>
|
||||
<li>Erweiterte Webentwicklung</li>
|
||||
<li>KI & Automatisierung</li>
|
||||
<li>6 Monate Support</li>
|
||||
<li>SEO Optimierung</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pricing-card">
|
||||
<h3>Unternehmen</h3>
|
||||
<div class="price">Individuell</div>
|
||||
<p>Für große Unternehmen</p>
|
||||
<ul>
|
||||
<li>Volle Unternehmenslösungen</li>
|
||||
<li>Custom KI-Entwicklung</li>
|
||||
<li>12 Monate Support</li>
|
||||
<li>Dediziertes Team</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services-section">
|
||||
<h2 class="section-title">Unsere Expertise</h2>
|
||||
<div class="services-grid">
|
||||
<!-- 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">
|
||||
<div class="phone-icon">📞</div>
|
||||
<div class="waveform">
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
</div>
|
||||
<div class="ki-processor">🤖</div>
|
||||
<div class="crm-output">📊</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">
|
||||
<div class="website-input">🌐</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="ki-processor">🤖</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="category-output">📋</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="human-output">👤</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">
|
||||
<div class="search-input">🔍</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="documents-cloud">💬</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="ki-processor">🤖</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="answer-output">💡</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="service-card">
|
||||
<div class="service-icon">
|
||||
🌐
|
||||
</div>
|
||||
<h3>Webentwicklung</h3>
|
||||
<p>Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
🤖
|
||||
</div>
|
||||
<h3>KI Integration</h3>
|
||||
<p>Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
⚙️
|
||||
</div>
|
||||
<h3>Automatisierung</h3>
|
||||
<p>Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="info-section">
|
||||
<div class="info-container">
|
||||
<div class="info-content">
|
||||
<h2>Warum Profice?</h2>
|
||||
<p>Wir verbinden technologische Exzellenz mit tiefgreifendem Geschäftsverständnis. Unser Ziel ist nicht nur die Lieferung von Software, sondern die Schaffung von echtem Mehrwert für Ihr Unternehmen.</p>
|
||||
<ul class="info-list">
|
||||
<li>Individuelle Beratung</li>
|
||||
<li>Transparente Prozesse</li>
|
||||
<li>Zukunftssichere Technologien</li>
|
||||
<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 class="info-image-placeholder">
|
||||
<span>[Bild: Team bei der Arbeit]</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Cookie Consent Banner -->
|
||||
<div id="cookieBanner" class="cookie-banner" role="dialog" aria-labelledby="cookieTitle" aria-describedby="cookieDescription">
|
||||
<div class="cookie-banner-content">
|
||||
<div class="cookie-text">
|
||||
<h3 id="cookieTitle">Cookie-Einstellungen</h3>
|
||||
<p id="cookieDescription">
|
||||
Wir verwenden Cookies, um Ihre Erfahrung zu verbessern und unsere Website zu analysieren.
|
||||
Durch die Nutzung unserer Website stimmen Sie unserem <a href="#privacy">Datenschutz</a> zu.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cookie-buttons">
|
||||
<button id="cookieAcceptAll" class="cookie-btn cookie-btn-primary">Alle akzeptieren</button>
|
||||
<button id="cookieRejectAll" class="cookie-btn cookie-btn-secondary">Alle ablehnen</button>
|
||||
<button id="cookieSettings" class="cookie-btn cookie-btn-settings">Einstellungen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cookie Settings Modal -->
|
||||
<div id="cookieModal" class="cookie-modal" role="dialog" aria-labelledby="cookieModalTitle" aria-modal="true">
|
||||
<div class="cookie-modal-content">
|
||||
<div class="cookie-modal-header">
|
||||
<h2 id="cookieModalTitle">Cookie-Einstellungen</h2>
|
||||
<button id="cookieModalClose" class="cookie-modal-close" aria-label="Schließen">×</button>
|
||||
</div>
|
||||
<!-- 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="cookie-option">
|
||||
<div class="cookie-option-header">
|
||||
<h3 class="cookie-option-title">Notwendige Cookies</h3>
|
||||
<div id="cookie-toggle-necessary" class="cookie-toggle active disabled" role="switch" aria-checked="true" aria-disabled="true">
|
||||
<div class="cookie-toggle-slider"></div>
|
||||
</div>
|
||||
<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>
|
||||
<p class="cookie-option-description">
|
||||
Diese Cookies sind für die Funktionsweise der Website unerlässlich und können nicht in Ihren Browsern deaktiviert werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cookie-option">
|
||||
<div class="cookie-option-header">
|
||||
<h3 class="cookie-option-title">Analyse-Cookies</h3>
|
||||
<div id="cookie-toggle-analytics" class="cookie-toggle" role="switch" aria-checked="false">
|
||||
<div class="cookie-toggle-slider"></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>
|
||||
<p class="cookie-option-description">
|
||||
Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren, indem sie Informationen anonym sammeln und melden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cookie-option">
|
||||
<div class="cookie-option-header">
|
||||
<h3 class="cookie-option-title">Marketing-Cookies</h3>
|
||||
<div id="cookie-toggle-marketing" class="cookie-toggle" role="switch" aria-checked="false">
|
||||
<div class="cookie-toggle-slider"></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>
|
||||
<p class="cookie-option-description">
|
||||
Diese Cookies werden verwendet, um Besucher über Websites hinweg zu verfolgen, um relevante Anzeigen zu zeigen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cookie-modal-footer">
|
||||
<button id="cookieSavePreferences" class="cookie-btn cookie-btn-primary">Einstellungen speichern</button>
|
||||
<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>
|
||||
</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/script.js" defer></script>
|
||||
<script src="scripts/cookie-consent.js" defer></script>
|
||||
<script src="scripts/tech-onepager.js" defer></script>
|
||||
<script src="scripts/cursor.js" defer></script>
|
||||
<script src="scripts/scroll-header.js" defer></script>
|
||||
<script src="scripts/chat.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user