Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact Us - Cyberus Labs</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'primary-orange': '#e65103', | |
| 'smoke-white': '#f5f5f5' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| :root { | |
| --primary-orange: #e65103; | |
| --smoke-white: #f5f5f5; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #0f172a; | |
| color: var(--smoke-white); | |
| } | |
| .bg-orange-600 { | |
| background-color: var(--primary-orange); | |
| } | |
| .card-gradient { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d00 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .border-orange-600 { | |
| border-color: var(--primary-orange); | |
| } | |
| .text-orange-500 { | |
| color: var(--primary-orange); | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px -5px rgba(230, 81, 3, 0.4); | |
| } | |
| .contact-icon { | |
| background: linear-gradient(135deg, var(--primary-orange) 0%, #ff8c42 100%); | |
| padding: 1rem; | |
| border-radius: 1rem; | |
| } | |
| input, textarea { | |
| background-color: #1e293b; | |
| border: 1px solid #334155; | |
| color: var(--smoke-white); | |
| } | |
| input:focus, textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-orange); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-slate-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-slate-900 border-b border-slate-800 py-4 px-4"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="text-2xl font-bold">Cyberus Labs</a> | |
| <div class="flex space-x-6"> | |
| <a href="index.html" class="hover:text-orange-500">Home</a> | |
| <a href="solutions.html" class="hover:text-orange-500">Solutions</a> | |
| <a href="contact.html" class="text-orange-500">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Contact Us</h1> | |
| <p class="text-2xl mb-8 max-w-3xl mx-auto text-slate-300">Get in touch with our cybersecurity experts</p> | |
| <div class="w-24 h-1 bg-orange-600 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2" data-aos="fade-right"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-orange-600 rounded-2xl opacity-20 blur"></div> | |
| <img src="http://static.photos/office/640x360/789" alt="Cyberus Labs Office" class="relative rounded-2xl shadow-2xl"> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <h2 class="text-2xl font-bold mb-6">We're Here to Help</h2> | |
| <p class="text-lg text-slate-300 mb-6"> | |
| Whether you have questions about our solutions, need technical support, or want to explore partnership opportunities, our team is ready to assist you. We pride ourselves on providing prompt and knowledgeable responses to all inquiries. | |
| </p> | |
| <p class="text-lg text-slate-300"> | |
| Reach out to us through any of the channels below, and we'll get back to you within 24 hours. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Information --> | |
| <section class="py-20 bg-slate-800 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Get In Touch</h2> | |
| <div class="w-24 h-1 bg-orange-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card-gradient rounded-2xl p-8 text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="contact-icon w-16 h-16 flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="mail" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Email Us</h3> | |
| <p class="text-slate-300 mb-2">For general inquiries:</p> | |
| <p class="text-orange-500 mb-4">info@cyberuslabs.com</p> | |
| <p class="text-slate-300 mb-2">For sales:</p> | |
| <p class="text-orange-500">sales@cyberuslabs.com</p> | |
| </div> | |
| <div class="card-gradient rounded-2xl p-8 text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="contact-icon w-16 h-16 flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="phone" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Call Us</h3> | |
| <p class="text-slate-300 mb-2">Main office:</p> | |
| <p class="text-orange-500 mb-4">+1 (555) 123-4567</p> | |
| <p class="text-slate-300 mb-2">Sales inquiries:</p> | |
| <p class="text-orange-500">+1 (555) 123-4568</p> | |
| </div> | |
| <div class="card-gradient rounded-2xl p-8 text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="contact-icon w-16 h-16 flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="map-pin" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Visit Us</h3> | |
| <p class="text-slate-300 mb-2">Headquarters:</p> | |
| <p class="text-orange-500 mb-4">123 Innovation Drive<br>Silicon Valley, CA 94000</p> | |
| <p class="text-slate-300 mb-2">European Office:</p> | |
| <p class="text-orange-500">456 Tech Park<br>Warsaw, Poland 02-001</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Send Us a Message</h2> | |
| <p class="text-xl max-w-2xl mx-auto text-slate-300"> | |
| Fill out the form below and our team will get back to you as soon as possible. | |
| </p> | |
| <div class="w-24 h-1 bg-orange-600 mx-auto mt-6"></div> | |
| </div> | |
| <div class="card-gradient rounded-2xl p-8" data-aos="fade-up"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-slate-300 mb-2">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg" placeholder="Your name"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-slate-300 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg" placeholder="your.email@example.com"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-slate-300 mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg" placeholder="How can we help?"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-slate-300 mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg" placeholder="Your message here..."></textarea> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="newsletter" type="checkbox" class="w-4 h-4 text-orange-600 rounded focus:ring-orange-500"> | |
| <label for="newsletter" class="ml-2 text-sm text-slate-300">Subscribe to our newsletter for cybersecurity insights</label> | |
| </div> | |
| <div> | |
| <button type="submit" class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg w-full"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Office Locations --> | |
| <section class="py-20 bg-slate-800 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Our Global Presence</h2> | |
| <p class="text-xl max-w-3xl mx-auto text-slate-300"> | |
| With offices around the world, we're always close to our customers | |
| </p> | |
| <div class="w-24 h-1 bg-orange-600 mx-auto mt-6"></div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="card-gradient rounded-2xl p-8" data-aos="fade-right"> | |
| <h3 class="text-2xl font-bold mb-6">Silicon Valley, USA</h3> | |
| <div class="relative h-64 rounded-xl overflow-hidden mb-6"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div> | |
| </div> | |
| <p class="text-slate-300 mb-4"> | |
| 123 Innovation Drive<br> | |
| Silicon Valley, CA 94000<br> | |
| United States | |
| </p> | |
| <p class="text-slate-300"> | |
| Our headquarters and primary R&D center, located in the heart of Silicon Valley's technology district. | |
| </p> | |
| </div> | |
| <div class="card-gradient rounded-2xl p-8" data-aos="fade-left"> | |
| <h3 class="text-2xl font-bold mb-6">Warsaw, Poland</h3> | |
| <div class="relative h-64 rounded-xl overflow-hidden mb-6"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div> | |
| </div> | |
| <p class="text-slate-300 mb-4"> | |
| 456 Tech Park<br> | |
| Warsaw, Poland 02-001<br> | |
| European Union | |
| </p> | |
| <p class="text-slate-300"> | |
| Our European operations hub, serving clients across the EU and coordinating with our academic partners. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Support Information --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Customer Support</h2> | |
| <div class="w-24 h-1 bg-orange-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="card-gradient rounded-2xl p-8" data-aos="fade-right"> | |
| <h3 class="text-2xl font-bold mb-6">Technical Support</h3> | |
| <p class="text-slate-300 mb-6"> | |
| For technical issues with our products, our support team is available 24/7 to assist you. We offer multiple support channels to ensure you get the help you need when you need it. | |
| </p> | |
| <ul class="space-y-3 text-slate-300"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>24/7 Technical Support Hotline: +1 (555) 123-4569</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>Email Support: support@cyberuslabs.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>Live Chat: Available on our customer portal</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>Knowledge Base: Extensive documentation and tutorials</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="card-gradient rounded-2xl p-8" data-aos="fade-left"> | |
| <h3 class="text-2xl font-bold mb-6">Sales & Partnership Inquiries</h3> | |
| <p class="text-slate-300 mb-6"> | |
| Interested in our solutions or exploring partnership opportunities? Our sales team is ready to discuss how our cybersecurity technologies can benefit your organization. | |
| </p> | |
| <ul class="space-y-3 text-slate-300"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>Sales Hotline: +1 (555) 123-4568</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>Sales Email: sales@cyberuslabs.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>Partner Program: partners@cyberuslabs.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i> | |
| <span>Schedule a Demo: Request through our portal</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 border-t border-slate-800 py-12 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-2xl font-bold mb-4">Cyberus Labs</h3> | |
| <p class="text-slate-400 mb-6 max-w-md"> | |
| Next-level cybersecurity solutions designed for today's threats. Eliminating passwords, securing IoT, and predicting threats with AI. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-slate-400 hover:text-orange-500"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-orange-500"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-orange-500"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Solutions</h4> | |
| <ul class="space-y-2 text-slate-400"> | |
| <li><a href="solutions.html" class="hover:text-orange-500">Our Solutions</a></li> | |
| <li><a href="cyberus-key.html" class="hover:text-orange-500">Cyberus Key</a></li> | |
| <li><a href="eliot-pro.html" class="hover:text-orange-500">ELIoT Pro</a></li> | |
| <li><a href="#" class="hover:text-orange-500">AI Threat Detection</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Company</h4> | |
| <ul class="space-y-2 text-slate-400"> | |
| <li><a href="index.html" class="hover:text-orange-500">Home</a></li> | |
| <li><a href="about.html" class="hover:text-orange-500">About Us</a></li> | |
| <li><a href="partners.html" class="hover:text-orange-500">Partners</a></li> | |
| <li><a href="contact.html" class="text-orange-500">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-12 pt-8 text-center text-slate-500"> | |
| <p>© 2023 Cyberus Labs. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 1000, | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |