pricing.html

<!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">

    <!-- Navigation -->
    <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>
        
        <!-- Mobile Menu -->
        <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>

    <!-- Hero Section -->
    <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>

    <!-- Pricing Cards -->
    <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">
                <!-- Free Plan -->
                <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>

                <!-- Pro Plan -->
                <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>

                <!-- Enterprise Plan -->
                <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>

            <!-- Money Back Guarantee -->
            <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>

    <!-- FAQ 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>

    <!-- CTA 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 -->
    <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>