| <!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>Neural Nexus | Future of AI Awareness</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', |
| } |
| }, |
| animation: { |
| 'gradient-x': 'gradient-x 15s ease infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| 'pulse-glow': 'pulse-glow 2s ease-in-out infinite', |
| 'spin-slow': 'spin 20s linear infinite', |
| }, |
| keyframes: { |
| 'gradient-x': { |
| '0%, 100%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'left center' |
| }, |
| '50%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'right center' |
| }, |
| }, |
| 'float': { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| }, |
| 'pulse-glow': { |
| '0%, 100%': { opacity: 0.5, transform: 'scale(1)' }, |
| '50%': { opacity: 0.8, transform: 'scale(1.05)' }, |
| } |
| } |
| } |
| } |
| } |
| </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); |
| } |
| |
| .glow-border { |
| position: relative; |
| } |
| |
| .glow-border::before { |
| content: ''; |
| position: absolute; |
| inset: -2px; |
| border-radius: inherit; |
| padding: 2px; |
| background: linear-gradient(135deg, #8b5cf6, #06b6d4, #ec4899); |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| -webkit-mask-composite: xor; |
| mask-composite: exclude; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| .glow-border:hover::before { |
| opacity: 1; |
| } |
| |
| .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; |
| } |
| |
| .noise-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 50; |
| opacity: 0.03; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); |
| } |
| |
| .mouse-glow { |
| position: fixed; |
| width: 400px; |
| height: 400px; |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%); |
| pointer-events: none; |
| z-index: 40; |
| transform: translate(-50%, -50%); |
| transition: all 0.1s ease; |
| } |
| |
| .scramble-text { |
| font-family: 'Space Grotesk', monospace; |
| } |
| |
| .resource-card { |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .resource-card:hover { |
| transform: translateY(-8px) scale(1.02); |
| } |
| |
| .newsletter-input { |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s; |
| } |
| |
| .newsletter-input:focus { |
| border-color: #8b5cf6; |
| box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); |
| outline: none; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%); |
| transition: all 0.3s; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .btn-primary::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
| transition: left 0.5s; |
| } |
| |
| .btn-primary:hover::before { |
| left: 100%; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.5); |
| } |
| </style> |
| </head> |
| <body class="antialiased selection:bg-neural-purple selection:text-white"> |
|
|
| |
| <div class="noise-bg"></div> |
| |
| |
| <div class="mouse-glow" id="mouseGlow"></div> |
|
|
| |
| <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"> |
| <div 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> |
| </div> |
| |
| <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-gray-400 hover:text-white transition-colors">Contact</a> |
| </div> |
|
|
| <div class="flex items-center gap-4"> |
| <button class="hidden md:block text-sm font-medium text-gray-400 hover:text-white transition-colors">Sign In</button> |
| <button class="btn-primary px-6 py-2.5 rounded-full text-sm font-semibold text-white"> |
| Get Started |
| </button> |
| <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-gray-400 hover:text-white">Contact</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative min-h-screen 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 animate-pulse-glow"></div> |
| <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-neural-cyan/20 rounded-full blur-3xl animate-pulse-glow" style="animation-delay: 1s;"></div> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-neural-pink/10 rounded-full blur-3xl animate-spin-slow"></div> |
| </div> |
|
|
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card border border-neural-purple/30 mb-8 animate-float"> |
| <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span> |
| <span class="text-sm font-medium text-gray-300">Weekly AI Insights Drop Every Monday</span> |
| <i data-lucide="arrow-right" class="w-4 h-4 text-neural-purple"></i> |
| </div> |
|
|
| <h1 class="font-display font-bold text-5xl md:text-7xl lg:text-8xl leading-tight mb-6"> |
| Decode the <br /> |
| <span class="scramble-text gradient-text" id="scrambleText">FUTURE</span> |
| </h1> |
| |
| <p class="max-w-2xl mx-auto text-lg md:text-xl text-gray-400 mb-10 leading-relaxed"> |
| Stay ahead of the curve with cutting-edge AI awareness, curated learning resources, |
| and insider tips delivered weekly to your inbox. |
| </p> |
|
|
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> |
| <button class="btn-primary px-8 py-4 rounded-full text-base font-semibold text-white flex items-center gap-2 group" onclick="document.getElementById('newsletter').scrollIntoView({behavior: 'smooth'})"> |
| Subscribe to Newsletter |
| <i data-lucide="zap" class="w-5 h-5 group-hover:animate-pulse"></i> |
| </button> |
| <button class="px-8 py-4 rounded-full text-base font-semibold text-white border border-white/20 hover:bg-white/5 transition-all flex items-center gap-2" onclick="document.getElementById('resources').scrollIntoView({behavior: 'smooth'})"> |
| Explore Resources |
| <i data-lucide="arrow-down" class="w-5 h-5"></i> |
| </button> |
| </div> |
|
|
| |
| <div class="flex flex-wrap justify-center gap-8 text-sm text-gray-500 font-medium"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="shield-check" class="w-4 h-4 text-neural-cyan"></i> |
| <span>Trusted by 50K+ readers</span> |
| </div> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="lock" class="w-4 h-4 text-neural-purple"></i> |
| <span>No spam, ever</span> |
| </div> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="refresh-cw" class="w-4 h-4 text-neural-pink"></i> |
| <span>Unsubscribe anytime</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="awareness" class="py-24 relative"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="font-display font-bold text-4xl md:text-5xl mb-4"> |
| Why <span class="gradient-text">AI Awareness</span> Matters |
| </h2> |
| <p class="text-gray-400 max-w-2xl mx-auto text-lg"> |
| Artificial Intelligence is reshaping every industry. Understanding its impact |
| isn't optional—it's essential for future-proofing your career and life. |
| </p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="glass-card glow-border rounded-2xl p-8 resource-card group"> |
| <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-neural-purple/20 to-neural-purple/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="trending-up" class="w-7 h-7 text-neural-purple"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-3 text-white">Rapid Evolution</h3> |
| <p class="text-gray-400 leading-relaxed mb-4"> |
| AI capabilities are doubling every 6 months. Stay informed about breakthroughs |
| before they become mainstream. |
| </p> |
| <a href="#" class="text-neural-purple font-medium flex items-center gap-1 hover:gap-2 transition-all"> |
| Learn more <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| |
| <div class="glass-card glow-border rounded-2xl p-8 resource-card group"> |
| <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-neural-cyan/20 to-neural-cyan/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="briefcase" class="w-7 h-7 text-neural-cyan"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-3 text-white">Career Impact</h3> |
| <p class="text-gray-400 leading-relaxed mb-4"> |
| 85% of jobs will be augmented by AI by 2025. Discover how to leverage AI |
| rather than be replaced by it. |
| </p> |
| <a href="#" class="text-neural-cyan font-medium flex items-center gap-1 hover:gap-2 transition-all"> |
| Explore careers <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| |
| <div class="glass-card glow-border rounded-2xl p-8 resource-card group"> |
| <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-neural-pink/20 to-neural-pink/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> |
| <i data-lucide="scale" class="w-7 h-7 text-neural-pink"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-3 text-white">Ethical Considerations</h3> |
| <p class="text-gray-400 leading-relaxed mb-4"> |
| Navigate the moral complexities of AI deployment. Privacy, bias, and |
| autonomy are battles being fought now. |
| </p> |
| <a href="#" class="text-neural-pink font-medium flex items-center gap-1 hover:gap-2 transition-all"> |
| Read ethics guide <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="resources" 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-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> |
| <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"> |
| <div class="max-w-2xl"> |
| <h2 class="font-display font-bold text-4xl md:text-5xl mb-4"> |
| Curated <span class="gradient-text">Learning Paths</span> |
| </h2> |
| <p class="text-gray-400 text-lg"> |
| Hand-picked resources ranging from beginner-friendly introductions |
| to advanced technical deep dives. |
| </p> |
| </div> |
| <button class="px-6 py-3 rounded-full border border-white/20 text-white font-medium hover:bg-white/5 transition-all flex items-center gap-2"> |
| View All Resources |
| <i data-lucide="external-link" class="w-4 h-4"></i> |
| </button> |
| </div> |
|
|
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer"> |
| <div class="h-48 bg-gradient-to-br from-neural-purple to-blue-600 relative overflow-hidden"> |
| <img src="https://static.photos/technology/640x360/42" alt="AI Basics" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500"> |
| <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div> |
| <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20"> |
| Beginner |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center gap-2 mb-3"> |
| <i data-lucide="book-open" class="w-4 h-4 text-neural-purple"></i> |
| <span class="text-xs font-medium text-gray-400">Foundation Course</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-neural-purple transition-colors">AI Fundamentals 101</h3> |
| <p class="text-sm text-gray-400 mb-4">Master the basics of machine learning, neural networks, and data science.</p> |
| <div class="flex items-center justify-between"> |
| <span class="text-xs text-gray-500">12 lessons • 4 hours</span> |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-neural-purple transition-colors"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer"> |
| <div class="h-48 bg-gradient-to-br from-neural-cyan to-teal-600 relative overflow-hidden"> |
| <img src="https://static.photos/technology/640x360/88" alt="Prompt Engineering" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500"> |
| <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div> |
| <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20"> |
| Intermediate |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center gap-2 mb-3"> |
| <i data-lucide="terminal" class="w-4 h-4 text-neural-cyan"></i> |
| <span class="text-xs font-medium text-gray-400">Practical Guide</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-neural-cyan transition-colors">Prompt Engineering Mastery</h3> |
| <p class="text-sm text-gray-400 mb-4">Learn to communicate effectively with LLMs and generative AI models.</p> |
| <div class="flex items-center justify-between"> |
| <span class="text-xs text-gray-500">8 lessons • 3 hours</span> |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-neural-cyan transition-colors"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer"> |
| <div class="h-48 bg-gradient-to-br from-neural-pink to-rose-600 relative overflow-hidden"> |
| <img src="https://static.photos/technology/640x360/156" alt="AI Ethics" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500"> |
| <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div> |
| <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20"> |
| Advanced |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center gap-2 mb-3"> |
| <i data-lucide="shield" class="w-4 h-4 text-neural-pink"></i> |
| <span class="text-xs font-medium text-gray-400">Case Studies</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-neural-pink transition-colors">AI Ethics & Governance</h3> |
| <p class="text-sm text-gray-400 mb-4">Deep dive into bias mitigation, responsible AI, and regulatory frameworks.</p> |
| <div class="flex items-center justify-between"> |
| <span class="text-xs text-gray-500">6 lessons • 5 hours</span> |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-neural-pink transition-colors"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card rounded-2xl overflow-hidden resource-card group cursor-pointer"> |
| <div class="h-48 bg-gradient-to-br from-orange-500 to-yellow-500 relative overflow-hidden"> |
| <img src="https://static.photos/technology/640x360/203" alt="Future Trends" class="w-full h-full object-cover opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-500"> |
| <div class="absolute inset-0 bg-gradient-to-t from-neural-dark to-transparent"></div> |
| <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md text-xs font-semibold text-white border border-white/20"> |
| Expert |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center gap-2 mb-3"> |
| <i data-lucide="sparkles" class="w-4 h-4 text-orange-400"></i> |
| <span class="text-xs font-medium text-gray-400">Future Forward</span> |
| </div> |
| <h3 class="font-display font-semibold text-lg mb-2 text-white group-hover:text-orange-400 transition-colors">Emerging Tech 2024</h3> |
| <p class="text-sm text-gray-400 mb-4">Explore AGI, quantum ML, and the next frontier of artificial intelligence.</p> |
| <div class="flex items-center justify-between"> |
| <span class="text-xs text-gray-500">10 lessons • 6 hours</span> |
| <i data-lucide="arrow-up-right" class="w-5 h-5 text-gray-400 group-hover:text-orange-400 transition-colors"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="newsletter" class="py-24 relative"> |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <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 text-center"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6"> |
| <i data-lucide="mail" class="w-4 h-4 text-neural-purple"></i> |
| <span class="text-sm font-medium text-gray-300">Weekly Digest</span> |
| </div> |
| |
| <h2 class="font-display font-bold text-4xl md:text-5xl mb-4"> |
| Get AI Tips in Your Inbox |
| </h2> |
| <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto"> |
| Join 50,000+ forward-thinkers receiving weekly curated AI insights, |
| tool recommendations, and exclusive learning resources. |
| </p> |
|
|
| <form class="max-w-md mx-auto mb-8" id="newsletterForm"> |
| <div class="flex flex-col sm:flex-row gap-3"> |
| <input |
| type="email" |
| placeholder="enter your email" |
| class="newsletter-input flex-1 px-6 py-4 rounded-full text-white placeholder-gray-500" |
| required |
| > |
| <button |
| type="submit" |
| class="btn-primary px-8 py-4 rounded-full font-semibold text-white whitespace-nowrap flex items-center justify-center gap-2" |
| id="submitBtn" |
| > |
| <span>Subscribe</span> |
| <i data-lucide="send" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <p class="text-xs text-gray-500 mt-3 text-left sm:text-center"> |
| We respect your privacy. Unsubscribe at any time. |
| </p> |
| </form> |
|
|
| <div class="flex flex-wrap justify-center gap-6 text-sm text-gray-400"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> |
| <span>Weekly curated content</span> |
| </div> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> |
| <span>Exclusive tool discounts</span> |
| </div> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> |
| <span>Community access</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="community" class="py-24 relative overflow-hidden"> |
| <div class="absolute inset-0 grid-bg opacity-30"></div> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> |
| <div class="grid md:grid-cols-4 gap-8 mb-16"> |
| <div class="text-center"> |
| <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="50000">0</div> |
| <div class="text-gray-400 font-medium">Active Learners</div> |
| </div> |
| <div class="text-center"> |
| <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="120">0</div> |
| <div class="text-gray-400 font-medium">Weekly Issues</div> |
| </div> |
| <div class="text-center"> |
| <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="350">0</div> |
| <div class="text-gray-400 font-medium">Curated Resources</div> |
| </div> |
| <div class="text-center"> |
| <div class="font-display font-bold text-4xl md:text-5xl gradient-text mb-2 counter" data-target="98">0</div> |
| <div class="text-gray-400 font-medium">% Satisfaction</div> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-8 md:p-12 text-center"> |
| <h3 class="font-display font-bold text-2xl md:text-3xl mb-4">Join the Community</h3> |
| <p class="text-gray-400 mb-8 max-w-2xl mx-auto"> |
| Connect with fellow AI enthusiasts, share insights, and get early access to new features |
| and exclusive content. |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <button class="px-8 py-3 rounded-full bg-white/5 border border-white/10 text-white font-medium hover:bg-white/10 transition-all flex items-center justify-center gap-2"> |
| <i data-lucide="message-circle" class="w-5 h-5"></i> |
| Join Discord |
| </button> |
| <button class="px-8 py-3 rounded-full bg-white/5 border border-white/10 text-white font-medium hover:bg-white/10 transition-all flex items-center justify-center gap-2"> |
| <i data-lucide="twitter" class="w-5 h-5"></i> |
| Follow on X |
| </button> |
| </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="grid md:grid-cols-4 gap-8 mb-12"> |
| <div class="md:col-span-2"> |
| <div class="flex items-center gap-3 mb-4"> |
| <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-gray-400 text-sm max-w-sm mb-6"> |
| Empowering the next generation of AI-literate professionals through |
| awareness, education, and community. |
| </p> |
| <div class="flex gap-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all"> |
| <i data-lucide="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all"> |
| <i data-lucide="github" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all"> |
| <i data-lucide="linkedin" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:text-white hover:bg-white/10 transition-all"> |
| <i data-lucide="youtube" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-white mb-4">Platform</h4> |
| <ul class="space-y-2 text-sm text-gray-400"> |
| <li><a href="#" class="hover:text-white transition-colors">Resources</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Newsletter</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Community</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-white mb-4">Company</h4> |
| <ul class="space-y-2 text-sm text-gray-400"> |
| <li><a href="#" class="hover:text-white transition-colors">About</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Careers</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Contact</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> |
| <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> |
| <a href="#" class="hover:text-white transition-colors">Cookie Settings</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script src="script.js"></script> |
| <script> |
| lucide.createIcons(); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
