257 lines
12 KiB
HTML
257 lines
12 KiB
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>
|
|
<link rel="stylesheet" href="style/design.css">
|
|
<link rel="stylesheet" href="style/cursor.css">
|
|
<link rel="stylesheet" href="style/cookie-consent.css">
|
|
</head>
|
|
<body>
|
|
<header class="top-banner dark-theme">
|
|
<div class="top-banner-left">
|
|
<div class="banner-left">
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Menü">
|
|
<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">
|
|
</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>
|
|
</div>
|
|
|
|
<div class="top-banner-right">
|
|
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
|
<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>
|
|
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="services-section">
|
|
<h2 class="section-title">Unsere Expertise</h2>
|
|
<div class="services-grid">
|
|
|
|
<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>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="scripts/script.js" defer></script>
|
|
<script src="scripts/cookie-consent.js" defer></script>
|
|
<script src="scripts/cursor.js" defer></script>
|
|
<script src="scripts/scroll-header.js" defer></script>
|
|
</body>
|
|
</html> |