| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Contact | Neural Nexus - Get in Touch</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| display: ['Space Grotesk', 'sans-serif'], |
| }, |
| colors: { |
| neural: { |
| dark: '#0a0a0f', |
| surface: '#13131f', |
| purple: '#8b5cf6', |
| cyan: '#06b6d4', |
| pink: '#ec4899', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| |
| <style> |
| body { |
| background-color: #0a0a0f; |
| color: #ffffff; |
| overflow-x: hidden; |
| } |
| .gradient-text { |
| background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #ec4899 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| .glass-card { |
| background: rgba(19, 19, 31, 0.6); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .form-input { |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s; |
| } |
| .form-input:focus { |
| border-color: #8b5cf6; |
| box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); |
| outline: none; |
| } |
| </style> |
| </head> |
| <body class="antialiased selection:bg-neural-purple selection:text-white"> |
|
|
| |
| <nav class="fixed top-0 w-full z-50 glass-card border-b border-white/5"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-20"> |
| <a href="index.html" class="flex items-center gap-3 group cursor-pointer"> |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-neural-purple to-neural-cyan flex items-center justify-center transform group-hover:rotate-12 transition-transform"> |
| <i data-lucide="brain-circuit" class="w-6 h-6 text-white"></i> |
| </div> |
| <span class="font-display font-bold text-2xl tracking-tight"> |
| Neural<span class="gradient-text">Nexus</span> |
| </span> |
| </a> |
| |
| <div class="hidden md:flex items-center gap-8"> |
| <a href="about.html" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">About</a> |
| <a href="blog.html" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Blog</a> |
| <a href="community.html" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Community</a> |
| <a href="pricing.html" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Pricing</a> |
| <a href="contact.html" class="text-sm font-medium text-white transition-colors">Contact</a> |
| </div> |
|
|
| <div class="flex items-center gap-4"> |
| <a href="index.html#newsletter" class="px-6 py-2.5 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-neural-purple to-neural-cyan hover:opacity-90 transition-opacity hidden md:inline-flex"> |
| Subscribe |
| </a> |
| <button class="md:hidden text-white" id="mobileMenuBtn"> |
| <i data-lucide="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden hidden glass-card border-t border-white/5" id="mobileMenu"> |
| <div class="px-4 py-6 space-y-4"> |
| <a href="about.html" class="block text-base font-medium text-gray-400 hover:text-white">About</a> |
| <a href="blog.html" class="block text-base font-medium text-gray-400 hover:text-white">Blog</a> |
| <a href="community.html" class="block text-base font-medium text-gray-400 hover:text-white">Community</a> |
| <a href="pricing.html" class="block text-base font-medium text-gray-400 hover:text-white">Pricing</a> |
| <a href="contact.html" class="block text-base font-medium text-white">Contact</a> |
| <a href="index.html#newsletter" class="block text-base font-medium text-neural-purple">Subscribe</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="pt-32 pb-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h1 class="font-display font-bold text-5xl md:text-6xl mb-6"> |
| Get in <span class="gradient-text">Touch</span> |
| </h1> |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto"> |
| Have a question, partnership inquiry, or just want to say hi? We'd love to hear from you. |
| </p> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 mb-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12"> |
| |
| |
| <div class="glass-card rounded-2xl p-8 border border-white/10"> |
| <h2 class="font-display font-bold text-2xl mb-6">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-sm font-medium text-gray-400 mb-2">First Name</label> |
| <input type="text" class="form-input w-full px-4 py-3 rounded-lg text-white placeholder-gray-500" placeholder="John" required> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Last Name</label> |
| <input type="text" class="form-input w-full px-4 py-3 rounded-lg text-white placeholder-gray-500" placeholder="Doe" required> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Email Address</label> |
| <input type="email" class="form-input w-full px-4 py-3 rounded-lg text-white placeholder-gray-500" placeholder="john@example.com" required> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Subject</label> |
| <select class="form-input w-full px-4 py-3 rounded-lg text-white bg-transparent"> |
| <option value="" class="bg-neural-surface">Select a topic...</option> |
| <option value="general" class="bg-neural-surface">General Inquiry</option> |
| <option value="partnership" class="bg-neural-surface">Partnership Opportunity</option> |
| <option value="content" class="bg-neural-surface">Content Suggestion</option> |
| <option value="technical" class="bg-neural-surface">Technical Support</option> |
| <option value="other" class="bg-neural-surface">Other</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-2">Message</label> |
| <textarea rows="5" class="form-input w-full px-4 py-3 rounded-lg text-white placeholder-gray-500" placeholder="Tell us what's on your mind..." required></textarea> |
| </div> |
| |
| <button type="submit" class="w-full py-4 rounded-lg bg-gradient-to-r from-neural-purple to-neural-cyan text-white font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2"> |
| <span>Send Message</span> |
| <i data-lucide="send" class="w-4 h-4"></i> |
| </button> |
| </form> |
| </div> |
|
|
| |
| <div class="space-y-8"> |
| <div> |
| <h2 class="font-display font-bold text-2xl mb-6">Other ways to reach us</h2> |
| <p class="text-gray-400 mb-8"> |
| Prefer to connect elsewhere? Find us on these platforms or send us a direct email. |
| </p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-neural-purple/20 flex items-center justify-center shrink-0"> |
| <i data-lucide="mail" class="w-6 h-6 text-neural-purple"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Email Us</h3> |
| <p class="text-gray-400 text-sm mb-1">For general inquiries:</p> |
| <a href="mailto:hello@neuralnexus.ai" class="text-neural-purple hover:underline">hello@neuralnexus.ai</a> |
| <p class="text-gray-400 text-sm mb-1 mt-2">For partnerships:</p> |
| <a href="mailto:partners@neuralnexus.ai" class="text-neural-purple hover:underline">partners@neuralnexus.ai</a> |
| </div> |
| </div> |
|
|
| <div class="flex items-start gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-neural-cyan/20 flex items-center justify-center shrink-0"> |
| <i data-lucide="message-circle" class="w-6 h-6 text-neural-cyan"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Community Discord</h3> |
| <p class="text-gray-400 text-sm mb-2">Get instant help from 12,500+ members</p> |
| <a href="#" class="inline-flex items-center gap-2 text-neural-cyan hover:underline"> |
| Join Server <i data-lucide="external-link" class="w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
|
|
| <div class="flex items-start gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-neural-pink/20 flex items-center justify-center shrink-0"> |
| <i data-lucide="twitter" class="w-6 h-6 text-neural-pink"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Twitter/X</h3> |
| <p class="text-gray-400 text-sm mb-2">Follow us for daily AI tips and updates</p> |
| <a href="#" class="inline-flex items-center gap-2 text-neural-pink hover:underline"> |
| @NeuralNexusAI <i data-lucide="external-link" class="w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card rounded-2xl p-6 border border-white/10"> |
| <h3 class="font-display font-semibold text-xl mb-4 flex items-center gap-2"> |
| <i data-lucide="clock" class="w-5 h-5 text-neural-purple"></i> |
| Response Times |
| </h3> |
| <ul class="space-y-3 text-sm text-gray-400"> |
| <li class="flex justify-between"> |
| <span>Email Support</span> |
| <span class="text-white">24-48 hours</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Discord Community</span> |
| <span class="text-green-400">Instant (peer)</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Partnership Inquiries</span> |
| <span class="text-white">2-3 business days</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 border-t border-white/5 bg-gradient-to-b from-transparent to-white/5"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="font-display font-bold text-3xl text-center mb-12">Frequently Asked Questions</h2> |
| |
| <div class="space-y-4"> |
| <div class="glass-card rounded-xl p-6 border border-white/10 cursor-pointer hover:border-neural-purple/50 transition-colors"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-semibold text-lg">How can I contribute to the newsletter?</h3> |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-400"></i> |
| </div> |
| <p class="text-gray-400 mt-3 text-sm hidden">We welcome guest contributions! Send us your article idea via the contact form above with the subject "Content Suggestion."</p> |
| </div> |
|
|
| <div class="glass-card rounded-xl p-6 border border-white/10 cursor-pointer hover:border-neural-purple/50 transition-colors"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-semibold text-lg">Do you offer corporate training?</h3> |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-400"></i> |
| </div> |
| <p class="text-gray-400 mt-3 text-sm hidden">Yes! We offer custom AI literacy workshops for teams. Email partners@neuralnexus.ai for details.</p> |
| </div> |
|
|
| <div class="glass-card rounded-xl p-6 border border-white/10 cursor-pointer hover:border-neural-purple/50 transition-colors"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-semibold text-lg">Can I advertise in your newsletter?</h3> |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-400"></i> |
| </div> |
| <p class="text-gray-400 mt-3 text-sm hidden">We selectively partner with AI tools and services that provide genuine value to our audience. Contact us for media kit and rates.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-white/5 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center gap-4"> |
| <div class="flex items-center gap-3"> |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-neural-purple to-neural-cyan flex items-center justify-center"> |
| <i data-lucide="brain-circuit" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-display font-bold text-xl">Neural<span class="gradient-text">Nexus</span></span> |
| </div> |
| <div class="flex gap-6 text-sm text-gray-500"> |
| <a href="index.html" class="hover:text-white transition-colors">Home</a> |
| <a href="about.html" class="hover:text-white transition-colors">About</a> |
| <a href="blog.html" class="hover:text-white transition-colors">Blog</a> |
| <a href="contact.html" class="hover:text-white transition-colors">Contact</a> |
| </div> |
| <p class="text-sm text-gray-500">© 2024 Neural Nexus. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script src="script.js"></script> |
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| document.getElementById('contactForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const btn = this.querySelector('button[type="submit"]'); |
| const originalContent = btn.innerHTML; |
| |
| btn.innerHTML = '<span class="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span>Sending...'; |
| btn.disabled = true; |
| |
| setTimeout(() => { |
| btn.innerHTML = '<i data-lucide="check" class="w-4 h-4 mr-2"></i>Message Sent!'; |
| btn.classList.remove('from-neural-purple', 'to-neural-cyan'); |
| btn.classList.add('bg-green-500'); |
| lucide.createIcons(); |
| |
| setTimeout(() => { |
| btn.innerHTML = originalContent; |
| btn.classList.add('from-neural-purple', 'to-neural-cyan'); |
| btn.classList.remove('bg-green-500'); |
| btn.disabled = false; |
| this.reset(); |
| lucide.createIcons(); |
| }, 3000); |
| }, 1500); |
| }); |
| |
| |
| document.querySelectorAll('.glass-card.cursor-pointer').forEach(card => { |
| card.addEventListener('click', function() { |
| const answer = this.querySelector('p.hidden'); |
| const icon = this.querySelector('i[data-lucide="chevron-down"]'); |
| if (answer) { |
| answer.classList.toggle('hidden'); |
| if (icon) { |
| icon.style.transform = answer.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'; |
| } |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
