Spaces:
Running
Running
| <html lang="de" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Features - SecureDataroom Pro</title> | |
| <meta name="description" content="Entdecken Sie alle Enterprise-Features von SecureDataroom Pro für sichere Transaktionen."> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-white text-primary-900 antialiased"> | |
| <dataroom-navbar></dataroom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden bg-gradient-to-br from-primary-50 to-secondary-50 py-20 lg:py-32"> | |
| <div class="absolute inset-0 bg-grid-primary-100/50" aria-hidden="true"></div> | |
| <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-primary-900 mb-6"> | |
| Alle <span class="bg-gradient-to-r from-secondary-500 to-secondary-700 bg-clip-text text-transparent">Features</span> im Überblick | |
| </h1> | |
| <p class="text-lg md:text-xl text-primary-600 mb-8 max-w-3xl mx-auto"> | |
| Entdecken Sie die umfassenden Möglichkeiten von SecureDataroom Pro für Ihre Transaktionen. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Feature Categories --> | |
| <section class="py-20 bg-white"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <dataroom-feature-card | |
| icon="shield" | |
| title="Sicherheit & Compliance" | |
| description="ISO 27001, GDPR, 256-Bit AES, 2FA, dynamische Wasserzeichen und umfassende Audit-Trails für maximale Sicherheit." | |
| badge="BANK-LEVEL" | |
| ></dataroom-feature-card> | |
| <dataroom-feature-card | |
| icon="folder" | |
| title="Dokumentenmanagement" | |
| description="Intelligente Vorschau, Versionierung, KI-gestützte Suche, Batch-Upload und hierarchische Ordnerstruktur." | |
| badge="ENTERPRISE" | |
| ></dataroom-feature-card> | |
| <dataroom-feature-card | |
| icon="users" | |
| title="Kollaboration" | |
| description="Q&A Module, Dokumenten-Kommentare, Task-Management und Multi-Channel Benachrichtigungen." | |
| badge="TEAM" | |
| ></dataroom-feature-card> | |
| <dataroom-feature-card | |
| icon="bar-chart-2" | |
| title="Analytics & Reporting" | |
| description="Heatmaps, Zeit-Tracking, Real-Time Monitor, Custom Dashboards und Transaktions-Health Score." | |
| badge="KI-POWERED" | |
| ></dataroom-feature-card> | |
| <dataroom-feature-card | |
| icon="settings" | |
| title="Integration & API" | |
| description="REST API, SSO/SAML, LDAP/AD, White-Labeling und Custom Workflows für nahtlose Integration." | |
| badge="FLEXIBLE" | |
| ></dataroom-feature-card> | |
| <dataroom-feature-card | |
| icon="smartphone" | |
| title="Mobile Apps" | |
| description="Native Apps für iOS und Android mit vollem Funktionsumfang und Offline-Funktionen." | |
| badge="ON-THE-GO" | |
| ></dataroom-feature-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Feature Comparison --> | |
| <section class="py-20 bg-primary-50"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-primary-900 mb-6"> | |
| Feature-Vergleich nach Plan | |
| </h2> | |
| <p class="text-lg text-primary-600"> | |
| Finden Sie den perfekten Plan für Ihre Anforderungen. | |
| </p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full bg-white rounded-2xl shadow-lg ring-1 ring-primary-200"> | |
| <thead class="bg-secondary-50"> | |
| <tr> | |
| <th class="px-6 py-4 text-left text-sm font-semibold text-primary-900">Feature</th> | |
| <th class="px-6 py-4 text-center text-sm font-semibold text-primary-900">Starter</th> | |
| <th class="px-6 py-4 text-center text-sm font-semibold text-primary-900">Professional</th> | |
| <th class="px-6 py-4 text-center text-sm font-semibold text-primary-900">Enterprise</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-primary-200"> | |
| <tr> | |
| <td class="px-6 py-4 text-sm text-primary-700 font-medium">Speicherplatz</td> | |
| <td class="px-6 py-4 text-center text-sm text-primary-600">10 GB</td> | |
| <td class="px-6 py-4 text-center text-sm text-primary-600">100 GB</td> | |
| <td class="px-6 py-4 text-center text-sm text-primary-600">Unlimitiert</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 text-sm text-primary-700 font-medium">Benutzer</td> | |
| <td class="px-6 py-4 text-center text-sm text-primary-600">25</td> | |
| <td class="px-6 py-4 text-center text-sm text-primary-600">Unbegrenzt</td> | |
| <td class="px-6 py-4 text-center text-sm text-primary-600">Unbegrenzt</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 text-sm text-primary-700 font-medium">2FA</td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 text-sm text-primary-700 font-medium">Dynamische Wasserzeichen</td> | |
| <td class="px-6 py-4 text-center"><i data-feather="x" class="h-5 w-5 text-red-400 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 text-sm text-primary-700 font-medium">SSO Integration</td> | |
| <td class="px-6 py-4 text-center"><i data-feather="x" class="h-5 w-5 text-red-400 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 text-sm text-primary-700 font-medium">Q&A Module</td> | |
| <td class="px-6 py-4 text-center"><i data-feather="x" class="h-5 w-5 text-red-400 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 text-sm text-primary-700 font-medium">White-Labeling</td> | |
| <td class="px-6 py-4 text-center"><i data-feather="x" class="h-5 w-5 text-red-400 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="x" class="h-5 w-5 text-red-400 mx-auto"></i></td> | |
| <td class="px-6 py-4 text-center"><i data-feather="check" class="h-5 w-5 text-green-500 mx-auto"></i></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-secondary-600 to-secondary-700"> | |
| <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6"> | |
| Alle Features testen? | |
| </h2> | |
| <p class="text-xl text-secondary-100 mb-8"> | |
| Starten Sie Ihre kostenlose 30-Tage Testversion und erleben Sie alle Enterprise-Features. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="group relative inline-flex items-center justify-center rounded-lg bg-white px-8 py-3 text-secondary-600 font-semibold shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:text-secondary-700 focus:outline-none focus:ring-4 focus:ring-white/30"> | |
| <span class="relative z-10">Kostenlos testen</span> | |
| <i data-feather="arrow-right" class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"></i> | |
| </button> | |
| <a href="contact.html" class="inline-flex items-center justify-center rounded-lg bg-secondary-800 px-8 py-3 font-semibold text-white shadow-lg ring-1 ring-white/20 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:bg-secondary-900 focus:outline-none focus:ring-4 focus:ring-white/20"> | |
| <i data-feather="calendar" class="mr-2 h-5 w-5"></i> | |
| Demo vereinbaren | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <dataroom-footer></dataroom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/feature-card.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |