| <!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>Community | Neural Nexus - Join the AI Revolution</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); |
| } |
| .community-card:hover { |
| transform: translateY(-4px); |
| border-color: rgba(139, 92, 246, 0.3); |
| } |
| </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-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-gray-400 hover: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-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-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="pt-32 pb-20"> |
| <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"> |
| Join the <span class="gradient-text">Community</span> |
| </h1> |
| <p class="text-xl text-gray-400 max-w-2xl mx-auto mb-12"> |
| Connect with 50,000+ AI enthusiasts, developers, and professionals. |
| Share knowledge, get feedback, and grow together. |
| </p> |
| |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <a href="#" class="glass-card px-8 py-4 rounded-full text-white font-semibold flex items-center justify-center gap-2 hover:bg-white/10 transition-all border border-white/10"> |
| <i data-lucide="message-circle" class="w-5 h-5 text-[#5865F2]"></i> |
| Join Discord Server |
| </a> |
| <a href="#" class="glass-card px-8 py-4 rounded-full text-white font-semibold flex items-center justify-center gap-2 hover:bg-white/10 transition-all border border-white/10"> |
| <i data-lucide="twitter" class="w-5 h-5 text-blue-400"></i> |
| Follow on X/Twitter |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 border-y border-white/5 bg-gradient-to-r from-neural-purple/5 via-transparent to-neural-cyan/5"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8 text-center"> |
| <div> |
| <div class="font-display font-bold text-3xl gradient-text mb-1">12,500+</div> |
| <div class="text-gray-400 text-sm">Discord Members</div> |
| </div> |
| <div> |
| <div class="font-display font-bold text-3xl gradient-text mb-1">Daily</div> |
| <div class="text-gray-400 text-sm">Active Discussions</div> |
| </div> |
| <div> |
| <div class="font-display font-bold text-3xl gradient-text mb-1">45+</div> |
| <div class="text-gray-400 text-sm">Countries Represented</div> |
| </div> |
| <div> |
| <div class="font-display font-bold text-3xl gradient-text mb-1">24/7</div> |
| <div class="text-gray-400 text-sm">Help & Support</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="font-display font-bold text-4xl text-center mb-16">Community Benefits</h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="glass-card rounded-2xl p-6 community-card transition-all duration-300 border border-white/5"> |
| <div class="w-12 h-12 rounded-xl bg-neural-purple/20 flex items-center justify-center mb-4"> |
| <i data-lucide="help-circle" class="w-6 h-6 text-neural-purple"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-2">Get Unstuck Fast</h3> |
| <p class="text-gray-400 text-sm">Stuck on a prompt engineering problem? Our community typically responds within 15 minutes.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 community-card transition-all duration-300 border border-white/5"> |
| <div class="w-12 h-12 rounded-xl bg-neural-cyan/20 flex items-center justify-center mb-4"> |
| <i data-lucide="users" class="w-6 h-6 text-neural-cyan"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-2">Networking</h3> |
| <p class="text-gray-400 text-sm">Connect with AI professionals, hiring managers, and potential collaborators in your field.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 community-card transition-all duration-300 border border-white/5"> |
| <div class="w-12 h-12 rounded-xl bg-neural-pink/20 flex items-center justify-center mb-4"> |
| <i data-lucide="gift" class="w-6 h-6 text-neural-pink"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-2">Exclusive Perks</h3> |
| <p class="text-gray-400 text-sm">Early access to beta tools, discount codes for AI services, and member-only content.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 community-card transition-all duration-300 border border-white/5"> |
| <div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4"> |
| <i data-lucide="video" class="w-6 h-6 text-orange-400"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-2">Weekly AMAs</h3> |
| <p class="text-gray-400 text-sm">Live "Ask Me Anything" sessions with AI researchers, startup founders, and industry experts.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 community-card transition-all duration-300 border border-white/5"> |
| <div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center mb-4"> |
| <i data-lucide="folder" class="w-6 h-6 text-green-400"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-2">Resource Library</h3> |
| <p class="text-gray-400 text-sm">Access our curated database of 500+ AI tools, 200+ prompt templates, and 50+ tutorials.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 community-card transition-all duration-300 border border-white/5"> |
| <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center mb-4"> |
| <i data-lucide="award" class="w-6 h-6 text-blue-400"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-2">Showcase Work</h3> |
| <p class="text-gray-400 text-sm">Share your AI projects, get constructive feedback, and celebrate wins with people who get it.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gradient-to-b from-transparent via-white/5 to-transparent"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="font-display font-bold text-4xl text-center mb-16">Community Love</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="glass-card rounded-2xl p-6 border border-white/5"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| </div> |
| <p class="text-gray-300 mb-6">"I went from zero knowledge to building AI apps in 3 months thanks to this community. The Discord is incredibly active and helpful."</p> |
| <div class="flex items-center gap-3"> |
| <img src="https://static.photos/people/200x200/10" alt="Member" class="w-10 h-10 rounded-full object-cover"> |
| <div> |
| <div class="font-semibold text-sm">James Wilson</div> |
| <div class="text-xs text-gray-500">Product Manager @ TechCorp</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 border border-white/5"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| </div> |
| <p class="text-gray-300 mb-6">"The weekly AMAs alone are worth joining for. I've learned more from this free community than my $2,000 AI course."</p> |
| <div class="flex items-center gap-3"> |
| <img src="https://static.photos/people/200x200/11" alt="Member" class="w-10 h-10 rounded-full object-cover"> |
| <div> |
| <div class="font-semibold text-sm">Elena Rodriguez</div> |
| <div class="text-xs text-gray-500">Freelance Developer</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 border border-white/5"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
| </div> |
| <p class="text-gray-300 mb-6">"Found my co-founder here! The networking opportunities are unreal. Everyone is genuinely supportive."</p> |
| <div class="flex items-center gap-3"> |
| <img src="https://static.photos/people/200x200/12" alt="Member" class="w-10 h-10 rounded-full object-cover"> |
| <div> |
| <div class="font-semibold text-sm">David Kim</div> |
| <div class="text-xs text-gray-500">AI Startup Founder</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="glass-card rounded-3xl p-12 text-center border border-white/10"> |
| <h3 class="font-display font-bold text-3xl mb-4">Ready to Join?</h3> |
| <p class="text-gray-400 mb-8 max-w-xl mx-auto"> |
| Membership is free. Join thousands of AI enthusiasts who are learning, building, and growing together. |
| </p> |
| <a href="#" class="inline-flex items-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-neural-purple to-neural-cyan text-white font-semibold hover:opacity-90 transition-opacity"> |
| Join Discord Community |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> |
| </a> |
| <p class="text-xs text-gray-500 mt-4">No spam. No selling your data. Just pure AI knowledge sharing.</p> |
| </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(); |
| </script> |
| </body> |
| </html> |
