| <!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>Pricing | Neural Nexus</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', |
| blue: '#3b82f6', |
| } |
| } |
| } |
| } |
| } |
| </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); |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
| } |
| |
| .grid-bg { |
| background-image: |
| linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px); |
| background-size: 50px 50px; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%); |
| transition: all 0.3s; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.5); |
| } |
| |
| .pricing-card { |
| transition: all 0.4s ease; |
| } |
| |
| .pricing-card:hover { |
| transform: translateY(-8px); |
| border-color: rgba(139, 92, 246, 0.5); |
| } |
| |
| .popular-badge { |
| background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); |
| } |
| |
| .check-icon { |
| color: #10b981; |
| } |
| </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-white transition-colors">Pricing</a> |
| <a href="contact.html" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Contact</a> |
| </div> |
|
|
| <div class="flex items-center gap-4"> |
| <a href="index.html#newsletter" class="btn-primary px-6 py-2.5 rounded-full text-sm font-semibold text-white 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-white">Pricing</a> |
| <a href="contact.html" class="block text-base font-medium text-gray-400 hover: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="relative min-h-[50vh] flex items-center justify-center pt-20 overflow-hidden grid-bg"> |
| <div class="absolute inset-0 overflow-hidden"> |
| <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-neural-purple/20 rounded-full blur-3xl"></div> |
| <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-neural-cyan/20 rounded-full blur-3xl"></div> |
| </div> |
|
|
| <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h1 class="font-display font-bold text-5xl md:text-6xl lg:text-7xl leading-tight mb-6"> |
| Simple <span class="gradient-text">Pricing</span> |
| </h1> |
| <p class="text-xl text-gray-400 leading-relaxed max-w-2xl mx-auto"> |
| Start free, upgrade when you're ready. No hidden fees, cancel anytime. |
| </p> |
| </div> |
| </section> |
|
|
| |
| <section class="py-24 relative"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="glass-card rounded-3xl p-8 pricing-card border border-white/10"> |
| <div class="mb-8"> |
| <h3 class="font-display font-semibold text-xl text-white mb-2">Free</h3> |
| <p class="text-gray-400 text-sm">Perfect for getting started</p> |
| </div> |
| <div class="mb-8"> |
| <span class="font-display font-bold text-5xl text-white">$0</span> |
| <span class="text-gray-400">/month</span> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Weekly newsletter</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Community Discord access</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Basic learning resources</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-500"> |
| <i data-lucide="x" class="w-5 h-5 text-gray-600"></i> |
| <span>Exclusive tutorials</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-500"> |
| <i data-lucide="x" class="w-5 h-5 text-gray-600"></i> |
| <span>1-on-1 mentorship</span> |
| </li> |
| </ul> |
| <button class="w-full py-3 rounded-full border border-white/20 text-white font-medium hover:bg-white/5 transition-all"> |
| Get Started Free |
| </button> |
| </div> |
|
|
| |
| <div class="glass-card rounded-3xl p-8 pricing-card border-2 border-neural-purple relative"> |
| <div class="absolute -top-4 left-1/2 transform -translate-x-1/2"> |
| <span class="popular-badge px-4 py-1 rounded-full text-sm font-semibold text-white"> |
| Most Popular |
| </span> |
| </div> |
| <div class="mb-8 mt-4"> |
| <h3 class="font-display font-semibold text-xl text-white mb-2">Pro</h3> |
| <p class="text-gray-400 text-sm">For serious learners</p> |
| </div> |
| <div class="mb-8"> |
| <span class="font-display font-bold text-5xl gradient-text">$12</span> |
| <span class="text-gray-400">/month</span> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Everything in Free</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Exclusive weekly tutorials</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>AI tool discounts (up to 30%)</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Monthly AMA sessions</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Resource library access</span> |
| </li> |
| </ul> |
| <button class="btn-primary w-full py-3 rounded-full text-white font-semibold flex items-center justify-center gap-2"> |
| Upgrade to Pro |
| <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| </button> |
| </div> |
|
|
| |
| <div class="glass-card rounded-3xl p-8 pricing-card border border-white/10"> |
| <div class="mb-8"> |
| <h3 class="font-display font-semibold text-xl text-white mb-2">Enterprise</h3> |
| <p class="text-gray-400 text-sm">For teams & organizations</p> |
| </div> |
| <div class="mb-8"> |
| <span class="font-display font-bold text-5xl text-white">$49</span> |
| <span class="text-gray-400">/month</span> |
| </div> |
| <ul class="space-y-4 mb-8"> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Everything in Pro</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Team licenses (up to 10)</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Custom AI workshops</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>Priority support</span> |
| </li> |
| <li class="flex items-center gap-3 text-gray-300"> |
| <i data-lucide="check" class="w-5 h-5 check-icon"></i> |
| <span>White-label options</span> |
| </li> |
| </ul> |
| <button class="w-full py-3 rounded-full border border-white/20 text-white font-medium hover:bg-white/5 transition-all"> |
| Contact Sales |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 text-center"> |
| <div class="inline-flex items-center gap-2 glass-card px-6 py-3 rounded-full"> |
| <i data-lucide="shield-check" class="w-5 h-5 text-green-400"></i> |
| <span class="text-gray-300">30-day money-back guarantee. No questions asked.</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-24 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent via-neural-purple/5 to-transparent"></div> |
| |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> |
| <div class="text-center mb-16"> |
| <h2 class="font-display font-bold text-4xl md:text-5xl mb-4">Frequently Asked</h2> |
| <p class="text-gray-400 text-lg">Everything you need to know about pricing</p> |
| </div> |
|
|
| <div class="space-y-4"> |
| <div class="glass-card rounded-2xl p-6"> |
| <h3 class="font-semibold text-lg text-white mb-2">Can I switch plans anytime?</h3> |
| <p class="text-gray-400">Yes! You can upgrade, downgrade, or cancel your subscription at any time. Changes take effect at the start of your next billing cycle.</p> |
| </div> |
| |
| <div class="glass-card rounded-2xl p-6"> |
| <h3 class="font-semibold text-lg text-white mb-2">What's included in the free plan?</h3> |
| <p class="text-gray-400">Free members get our weekly newsletter, access to the Discord community, and a selection of basic learning resources and blog content.</p> |
| </div> |
| |
| <div class="glass-card rounded-2xl p-6"> |
| <h3 class="font-semibold text-lg text-white mb-2">How do the AI tool discounts work?</h3> |
| <p class="text-gray-400">Pro and Enterprise members get exclusive discount codes for popular AI tools like ChatGPT Plus, Midjourney, Notion AI, and more. New deals are added monthly.</p> |
| </div> |
| |
| <div class="glass-card rounded-2xl p-6"> |
| <h3 class="font-semibold text-lg text-white mb-2">Is there a student discount?</h3> |
| <p class="text-gray-400">Yes! Students and educators get 50% off Pro plans. Contact us with your .edu email or valid student ID to apply.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-24 relative"> |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="glass-card rounded-3xl p-8 md:p-16 relative overflow-hidden"> |
| <div class="absolute top-0 right-0 w-64 h-64 bg-neural-purple/20 rounded-full blur-3xl"></div> |
| <div class="absolute bottom-0 left-0 w-64 h-64 bg-neural-cyan/20 rounded-full blur-3xl"></div> |
| |
| <div class="relative z-10"> |
| <h2 class="font-display font-bold text-3xl md:text-4xl mb-4">Still have questions?</h2> |
| <p class="text-gray-400 mb-8 max-w-xl mx-auto"> |
| Can't find the answer you're looking for? Our team is here to help. |
| </p> |
| <a href="contact.html" class="btn-primary px-8 py-4 rounded-full font-semibold text-white inline-flex items-center gap-2"> |
| Contact Support |
| <i data-lucide="message-circle" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-white/5 py-12 relative"> |
| <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> |
| <p class="text-sm text-gray-500">© 2024 Neural Nexus. All rights reserved.</p> |
| <div class="flex gap-6 text-sm text-gray-500"> |
| <a href="#" class="hover:text-white transition-colors">Privacy Policy</a> |
| <a href="#" class="hover:text-white transition-colors">Terms of Service</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script src="script.js"></script> |
| <script> |
| lucide.createIcons(); |
| </script> |
| </body> |
| </html> |
