Spaces:
Running
Running
Let make the website more proprofessional let every buttbutton lead some wheere and create more page html page and let every look good and and add api to website that will handlhandle as well the bot that will be at the right side blow the website and when click on the website the api will be the website
92d9d0d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact NMDX - Get Started Today</title> | |
| <meta name="description" content="Contact NMDX for expert digital marketing and crypto promotion services. Schedule a free consultation and start your growth journey."> | |
| <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='.9em' font-size='90'>🚀</text></svg>"> | |
| <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> | |
| <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/chat-widget.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-slate-900 text-white overflow-x-hidden"> | |
| <!-- Animated Background --> | |
| <div class="fixed inset-0 z-0"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-emerald-900/20 via-slate-900 to-cyan-900/20"></div> | |
| <canvas id="shockwaveCanvas" class="absolute inset-0"></canvas> | |
| <div class="absolute inset-0 bg-black/50"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Main Content --> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center relative"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-500 bg-clip-text text-transparent animate-pulse"> | |
| Let's Connect | |
| </h1> | |
| <p class="text-2xl md:text-4xl mb-4 text-gray-300">Start Your Growth Journey</p> | |
| <p class="text-lg md:text-xl mb-8 text-gray-400 max-w-3xl mx-auto"> | |
| Ready to accelerate your digital presence? Our team is here to create customized solutions that drive real results. Schedule your free consultation today. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Contact Methods --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Get in Touch | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16"> | |
| <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 text-center hover:border-emerald-500/60 transition-all"> | |
| <div class="text-5xl mb-4 text-emerald-400">💬</div> | |
| <h3 class="text-xl font-bold mb-3">Live Chat</h3> | |
| <p class="text-gray-400 mb-4">Chat with our experts instantly</p> | |
| <button onclick="toggleChat()" class="text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Start Chat → | |
| </button> | |
| </div> | |
| <div class="bg-gradient-to-br from-cyan-900/30 to-emerald-900/30 rounded-2xl p-8 border border-cyan-500/30 text-center hover:border-cyan-500/60 transition-all"> | |
| <div class="text-5xl mb-4 text-cyan-400">📧</div> | |
| <h3 class="text-xl font-bold mb-3">Email Us</h3> | |
| <p class="text-gray-400 mb-4">Get a response within 24 hours</p> | |
| <a href="mailto:hello@nmdx.com" class="text-cyan-400 hover:text-cyan-300 font-semibold"> | |
| hello@nmdx.com → | |
| </a> | |
| </div> | |
| <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30 text-center hover:border-emerald-500/60 transition-all"> | |
| <div class="text-5xl mb-4 text-emerald-400">📅</div> | |
| <h3 class="text-xl font-bold mb-3">Schedule Call</h3> | |
| <p class="text-gray-400 mb-4">Book a 30-minute consultation</p> | |
| <a href="#booking" class="text-emerald-400 hover:text-emerald-300 font-semibold"> | |
| Book Now → | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Contact Form --> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-2xl p-8 border border-emerald-500/30"> | |
| <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3> | |
| <form id="contactForm" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">First Name *</label> | |
| <input type="text" required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="John"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Last Name *</label> | |
| <input type="text" required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="Doe"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Email *</label> | |
| <input type="email" required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="john@example.com"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Phone</label> | |
| <input type="tel" class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="+1 (555) 123-4567"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Company</label> | |
| <input type="text" class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="Your Company Name"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Service Interest *</label> | |
| <select required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors"> | |
| <option value="">Select a Service</option> | |
| <option value="telegram-promotion">Telegram Promotion</option> | |
| <option value="token-promotion">Token Promotion</option> | |
| <option value="telegram-ads">Telegram Ads</option> | |
| <option value="community-management">Community Management</option> | |
| <option value="app-promotion">App Promotion</option> | |
| <option value="app-development">App Development</option> | |
| <option value="music-promotion">Music Promotion</option> | |
| <option value="press-releases">Press Releases</option> | |
| <option value="content-writing">Content Writing</option> | |
| <option value="seo-geo">SEO / GEO</option> | |
| <option value="youtube-promotion">YouTube Promotion</option> | |
| <option value="other">Other / Custom Solution</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Budget Range</label> | |
| <select class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors"> | |
| <option value="">Select Budget Range</option> | |
| <option value="under-1k">Under $1,000</option> | |
| <option value="1k-5k">$1,000 - $5,000</option> | |
| <option value="5k-10k">$5,000 - $10,000</option> | |
| <option value="10k-25k">$10,000 - $25,000</option> | |
| <option value="25k-50k">$25,000 - $50,000</option> | |
| <option value="over-50k">Over $50,000</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Project Details *</label> | |
| <textarea rows="6" required class="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-lg focus:border-emerald-500 focus:outline-none transition-colors" placeholder="Tell us about your project, goals, and timeline..."></textarea> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="newsletter" class="mt-1 mr-3"> | |
| <label for="newsletter" class="text-sm text-gray-400"> | |
| I'd like to receive marketing tips and updates from NMDX (we respect your privacy) | |
| </label> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-gradient-to-r from-emerald-600 to-cyan-600 rounded-lg font-semibold text-lg hover:from-emerald-700 hover:to-cyan-700 transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Office Locations --> | |
| <section class="py-20 bg-black/30"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Our Offices | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="text-5xl mb-4">🇺🇸</div> | |
| <h3 class="text-xl font-bold mb-2">New York</h3> | |
| <p class="text-gray-400">123 Times Square<br>New York, NY 10036</p> | |
| <a href="tel:+12125551234" class="text-emerald-400 hover:text-emerald-300">+1 (212) 555-1234</a> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl mb-4">🇬🇧</div> | |
| <h3 class="text-xl font-bold mb-2">London</h3> | |
| <p class="text-gray-400">456 Oxford Street<br>London, UK W1C 1AP</p> | |
| <a href="tel:+442071234567" class="text-emerald-400 hover:text-emerald-300">+44 20 7123 4567</a> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl mb-4">🇸🇬</div> | |
| <h3 class="text-xl font-bold mb-2">Singapore</h3> | |
| <p class="text-gray-400">789 Orchard Road<br>Singapore 238826</p> | |
| <a href="tel:+6562345678" class="text-emerald-400 hover:text-emerald-300">+65 6234 5678</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent"> | |
| Frequently Asked Questions | |
| </h2> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30"> | |
| <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span class="font-semibold">How quickly can we see results?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-4 text-gray-400"> | |
| Results vary by service, but most clients see initial improvements within 2-4 weeks. Full campaigns typically show significant results in 2-3 months. | |
| </div> | |
| </div> | |
| <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30"> | |
| <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span class="font-semibold">Do you work with startups?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-4 text-gray-400"> | |
| Absolutely! We love working with innovative startups and offer flexible pricing packages designed for early-stage companies. | |
| </div> | |
| </div> | |
| <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30"> | |
| <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span class="font-semibold">What makes your services different?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-4 text-gray-400"> | |
| We combine cutting-edge technology with proven marketing strategies, provide transparent reporting, and work as true partners invested in your success. | |
| </div> | |
| </div> | |
| <div class="faq-item bg-gradient-to-br from-emerald-900/30 to-cyan-900/30 rounded-lg border border-emerald-500/30"> | |
| <button class="w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFAQ(this)"> | |
| <span class="font-semibold">Can you guarantee results?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-4 text-gray-400"> | |
| While we can't guarantee specific outcomes, we have a proven track record of success and offer performance-based pricing options for qualified clients. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <custom-footer></custom-footer> | |
| <!-- Success Message --> | |
| <div id="successMessage" class="fixed top-20 right-6 z-50 bg-green-600 text-white px-6 py-4 rounded-lg shadow-lg transform translate-x-full transition-transform"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Message sent successfully!</span> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |