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 - MixTAO Lab</title> | |
| <meta name="description" content="Get in touch with MixTAO Lab. Contact our team for AI solutions, partnerships, or support."> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🤖</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <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> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .contact-card { | |
| transition: all 0.3s ease; | |
| } | |
| .contact-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.1); | |
| } | |
| .form-input:focus { | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-600 to-indigo-600"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Get in Touch</h1> | |
| <p class="text-xl text-purple-100 max-w-3xl mx-auto">Ready to transform your business with AI? Our team is here to help you every step of the way</p> | |
| </div> | |
| </section> | |
| <!-- Contact Form & Info --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <!-- Contact Form --> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg"> | |
| <h2 class="text-3xl font-bold mb-6 gradient-text">Send us a Message</h2> | |
| <form id="contactForm" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 font-semibold mb-2">First Name</label> | |
| <input type="text" name="firstName" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none transition-all" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-semibold mb-2">Last Name</label> | |
| <input type="text" name="lastName" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none transition-all" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-semibold mb-2">Email Address</label> | |
| <input type="email" name="email" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none transition-all" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-semibold mb-2">Company</label> | |
| <input type="text" name="company" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-semibold mb-2">Service Interested In</label> | |
| <select name="service" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none transition-all"> | |
| <option value="">Select a service</option> | |
| <option value="vision">Computer Vision</option> | |
| <option value="nlp">Natural Language Processing</option> | |
| <option value="analytics">Predictive Analytics</option> | |
| <option value="automation">Automation</option> | |
| <option value="custom">Custom Solution</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-semibold mb-2">Message</label> | |
| <textarea name="message" rows="4" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none transition-all" required></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-lg hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 transition-all duration-300 shadow-lg"> | |
| Send Message | |
| </button> | |
| </form> | |
| <div id="formMessage" class="mt-4 hidden"></div> | |
| </div> | |
| <!-- Contact Info --> | |
| <div class="space-y-8"> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-6 gradient-text">Contact Information</h2> | |
| <div class="space-y-4"> | |
| <div class="contact-card bg-white p-6 rounded-xl shadow-md flex items-start"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> | |
| <i data-feather="map-pin" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 mb-1">Headquarters</h3> | |
| <p class="text-gray-600">123 AI Innovation Blvd<br>San Francisco, CA 94105<br>United States</p> | |
| </div> | |
| </div> | |
| <div class="contact-card bg-white p-6 rounded-xl shadow-md flex items-start"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> | |
| <i data-feather="phone" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 mb-1">Phone</h3> | |
| <p class="text-gray-600">+1 (555) 123-4567<br>Mon-Fri 9AM-6PM PST</p> | |
| </div> | |
| </div> | |
| <div class="contact-card bg-white p-6 rounded-xl shadow-md flex items-start"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> | |
| <i data-feather="mail" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800 mb-1">Email</h3> | |
| <p class="text-gray-600">info@aiinnovatehub.com<br>support@aiinnovatehub.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Office Locations --> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4">Global Offices</h3> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div class="bg-white p-4 rounded-lg shadow-md"> | |
| <h4 class="font-semibold text-gray-800 mb-1">New York</h4> | |
| <p class="text-gray-600 text-sm">Times Square, Manhattan</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md"> | |
| <h4 class="font-semibold text-gray-800 mb-1">London</h4> | |
| <p class="text-gray-600 text-sm">Canary Wharf, London</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md"> | |
| <h4 class="font-semibold text-gray-800 mb-1">Tokyo</h4> | |
| <p class="text-gray-600 text-sm">Shibuya, Tokyo</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md"> | |
| <h4 class="font-semibold text-gray-800 mb-1">Singapore</h4> | |
| <p class="text-gray-600 text-sm">Marina Bay, Singapore</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-4 gradient-text">Visit Us</h2> | |
| <p class="text-xl text-gray-600">Our headquarters in the heart of innovation</p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden" style="height: 500px;"> | |
| <iframe | |
| src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019284855314!2d-122.39862328468277!3d37.79415197975832!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807c5c6f7e9f%3A0x3c5b2c4a6a4a4a4a!2sSalesforce%20Tower!5e0!3m2!1sen!2sus!4v1234567890" | |
| width="100%" | |
| height="100%" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy"> | |
| </iframe> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-4 gradient-text">Frequently Asked Questions</h2> | |
| <p class="text-xl text-gray-600">Quick answers to common questions</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="w-full px-6 py-4 text-left font-semibold text-gray-800 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span>What industries do you serve?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> | |
| </button> | |
| <div class="hidden px-6 py-4 text-gray-600 border-t"> | |
| We serve a wide range of industries including healthcare, finance, retail, manufacturing, technology, and more. Our AI solutions are customizable to meet specific industry needs. | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="w-full px-6 py-4 text-left font-semibold text-gray-800 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span>How long does implementation take?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> | |
| </button> | |
| <div class="hidden px-6 py-4 text-gray-600 border-t"> | |
| Implementation timelines vary based on the complexity of the solution. Simple integrations can take 2-4 weeks, while custom enterprise solutions may take 2-3 months. | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="w-full px-6 py-4 text-left font-semibold text-gray-800 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span>Do you offer technical support?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> | |
| </button> | |
| <div class="hidden px-6 py-4 text-gray-600 border-t"> | |
| Yes, we offer 24/7 technical support for all enterprise clients. Support includes email, phone, and live chat options with dedicated account managers. | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="w-full px-6 py-4 text-left font-semibold text-gray-800 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span>Is my data secure?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> | |
| </button> | |
| <div class="hidden px-6 py-4 text-gray-600 border-t"> | |
| Absolutely. We use enterprise-grade security measures including end-to-end encryption, regular security audits, and compliance with GDPR, CCPA, and other data protection regulations. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600"> | |
| <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-4xl font-bold text-white mb-6">Ready to Get Started?</h2> | |
| <p class="text-xl text-purple-100 mb-8">Schedule a free consultation with our AI experts today</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button onclick="window.location.href='#contactForm'" class="px-8 py-4 bg-white text-purple-600 font-semibold rounded-full hover:bg-gray-100 transform hover:scale-105 transition-all duration-300 shadow-lg"> | |
| Schedule Demo | |
| </button> | |
| <a href="tel:+15551234567" class="px-8 py-4 border-2 border-white text-white font-semibold rounded-full hover:bg-white hover:text-purple-600 transform hover:scale-105 transition-all duration-300"> | |
| Call Us Now | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| function toggleFAQ(button) { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('svg'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| } | |
| // Contact form handling | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const formData = new FormData(this); | |
| const data = Object.fromEntries(formData); | |
| // Show success message | |
| const messageDiv = document.getElementById('formMessage'); | |
| messageDiv.className = 'mt-4 p-4 bg-green-100 text-green-700 rounded-lg'; | |
| messageDiv.textContent = 'Thank you for your message! We will get back to you within 24 hours.'; | |
| messageDiv.classList.remove('hidden'); | |
| // Reset form | |
| this.reset(); | |
| // Hide message after 5 seconds | |
| setTimeout(() => { | |
| messageDiv.classList.add('hidden'); | |
| }, 5000); | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |