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>Kontakt - SecureDataroom Pro</title> | |
| <meta name="description" content="Kontaktieren Sie SecureDataroom Pro - Wir helfen Ihnen bei Ihrer nächsten Transaktion."> | |
| <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"> | |
| Kontaktieren Sie <span class="bg-gradient-to-r from-secondary-500 to-secondary-700 bg-clip-text text-transparent">uns</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-primary-600 mb-8 max-w-3xl mx-auto"> | |
| Wir helfen Ihnen gerne bei der Einrichtung Ihres sicheren Datarooms oder beantworten Ihre Fragen. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <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 lg:grid-cols-2 gap-16"> | |
| <!-- Contact Form --> | |
| <div class="rounded-2xl bg-white shadow-2xl ring-1 ring-primary-200 p-8"> | |
| <h2 class="text-2xl font-bold text-primary-900 mb-6">Kontaktformular</h2> | |
| <form class="space-y-6" id="contact-form"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="first-name" class="block text-sm font-medium text-primary-700 mb-2">Vorname *</label> | |
| <input type="text" id="first-name" name="first-name" required class="w-full rounded-lg border border-primary-300 px-4 py-3 focus:border-secondary-500 focus:ring-secondary-500"> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-sm font-medium text-primary-700 mb-2">Nachname *</label> | |
| <input type="text" id="last-name" name="last-name" required class="w-full rounded-lg border border-primary-300 px-4 py-3 focus:border-secondary-500 focus:ring-secondary-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-primary-700 mb-2">E-Mail *</label> | |
| <input type="email" id="email" name="email" required class="w-full rounded-lg border border-primary-300 px-4 py-3 focus:border-secondary-500 focus:ring-secondary-500"> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-sm font-medium text-primary-700 mb-2">Unternehmen</label> | |
| <input type="text" id="company" name="company" class="w-full rounded-lg border border-primary-300 px-4 py-3 focus:border-secondary-500 focus:ring-secondary-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-primary-700 mb-2">Telefon</label> | |
| <input type="tel" id="phone" name="phone" class="w-full rounded-lg border border-primary-300 px-4 py-3 focus:border-secondary-500 focus:ring-secondary-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-primary-700 mb-2">Nachricht *</label> | |
| <textarea id="message" name="message" rows="6" required class="w-full rounded-lg border border-primary-300 px-4 py-3 focus:border-secondary-500 focus:ring-secondary-500"></textarea> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <input type="checkbox" id="privacy" name="privacy" required class="mt-1 h-4 w-4 rounded border-primary-300 text-secondary-600 focus:ring-secondary-500"> | |
| <label for="privacy" class="text-sm text-primary-600">Ich akzeptiere die <a href="#" class="text-secondary-600 hover:underline">Datenschutzbestimmungen</a> *</label> | |
| </div> | |
| <button type="submit" class="w-full group relative inline-flex items-center justify-center rounded-lg bg-secondary-600 px-8 py-3 text-white font-semibold shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:bg-secondary-700 focus:outline-none focus:ring-4 focus:ring-secondary-200"> | |
| <span class="relative z-10">Nachricht senden</span> | |
| <i data-feather="send" class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"></i> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Contact Info --> | |
| <div class="space-y-8"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-primary-900 mb-6">Unsere Kontaktdaten</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start gap-4"> | |
| <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 ring-1 ring-secondary-200"> | |
| <i data-feather="map-pin" class="h-6 w-6 text-secondary-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-primary-900">Adresse</h3> | |
| <p class="text-primary-600">SecureDataroom Pro GmbH<br>Frankfurter Straße 123<br>60327 Frankfurt am Main<br>Deutschland</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 ring-1 ring-secondary-200"> | |
| <i data-feather="phone" class="h-6 w-6 text-secondary-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-primary-900">Telefon</h3> | |
| <p class="text-primary-600"><a href="tel:+4969123456789" class="hover:text-secondary-600">+49 69 123 456 789</a></p> | |
| <p class="text-sm text-primary-500">Mo-Fr, 9:00 - 18:00 Uhr</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 ring-1 ring-secondary-200"> | |
| <i data-feather="mail" class="h-6 w-6 text-secondary-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-primary-900">E-Mail</h3> | |
| <p class="text-primary-600"><a href="mailto:info@securedataroom-pro.de" class="hover:text-secondary-600">info@securedataroom-pro.de</a></p> | |
| <p class="text-sm text-primary-500">24/7 Support für Enterprise-Kunden</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 ring-1 ring-secondary-200"> | |
| <i data-feather="clock" class="h-6 w-6 text-secondary-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-primary-900">Support</h3> | |
| <p class="text-primary-600">E-Mail: support@securedataroom-pro.de<br>Enterprise: +49 69 123 456 780 (24/7)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-lg bg-secondary-50 p-6 ring-1 ring-secondary-200"> | |
| <h3 class="text-lg font-semibold text-primary-900 mb-4">Schnelle Antworten</h3> | |
| <p class="text-primary-600 mb-4">Die häufigsten Fragen werden sofort beantwortet in unserer FAQ-Sektion auf der Startseite.</p> | |
| <a href="index.html#faq-container" class="inline-flex items-center gap-2 text-secondary-600 hover:text-secondary-700 font-medium"> | |
| <i data-feather="help-circle" class="h-5 w-5"></i> | |
| FAQ anzeigen | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <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"> | |
| Standort | |
| </h2> | |
| <p class="text-lg text-primary-600"> | |
| Unser Hauptsitz im Herzen von Frankfurt am Main | |
| </p> | |
| </div> | |
| <div class="rounded-2xl overflow-hidden shadow-2xl ring-1 ring-primary-200"> | |
| <div class="h-96 bg-primary-200 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="map" class="h-16 w-16 text-primary-400 mx-auto mb-4"></i> | |
| <p class="text-primary-500">Kartenansicht wird geladen...</p> | |
| <p class="text-primary-400 text-sm">Frankfurt am Main, Deutschland</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <dataroom-footer></dataroom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |