| <!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>About Us | 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', |
| } |
| }, |
| animation: { |
| 'gradient-x': 'gradient-x 15s ease infinite', |
| 'float': 'float 6s ease-in-out 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)' }, |
| } |
| } |
| } |
| } |
| } |
| </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); |
| } |
| .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; |
| } |
| </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-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"> |
| <a href="index.html#newsletter" class="btn-primary 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-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> |
| <a href="index.html#newsletter" class="block text-base font-medium text-neural-purple">Subscribe</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative pt-32 pb-20 grid-bg"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center max-w-3xl mx-auto"> |
| <h1 class="font-display font-bold text-5xl md:text-6xl mb-6"> |
| Our <span class="gradient-text">Mission</span> |
| </h1> |
| <p class="text-xl text-gray-400 leading-relaxed"> |
| We're on a mission to democratize AI knowledge and empower 1 million professionals |
| to thrive in the age of artificial intelligence. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 relative"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <img src="https://static.photos/office/640x360/42" alt="Team working" class="rounded-2xl shadow-2xl"> |
| </div> |
| <div> |
| <h2 class="font-display font-bold text-3xl mb-6">From Confusion to Clarity</h2> |
| <p class="text-gray-400 mb-4 leading-relaxed"> |
| Neural Nexus was born in 2023 when our founder, struggling to keep up with the rapid pace of AI development, realized there was no central hub for reliable, curated AI education. |
| </p> |
| <p class="text-gray-400 mb-4 leading-relaxed"> |
| What started as a simple newsletter to 50 friends has grown into a global community of 50,000+ learners, developers, executives, and curious minds navigating the AI revolution together. |
| </p> |
| <p class="text-gray-400 leading-relaxed"> |
| We believe AI literacy is the new computer literacy—and everyone deserves access to quality education, not just those in Silicon Valley. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 relative bg-gradient-to-b from-transparent via-neural-purple/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">Our Core Values</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="glass-card rounded-2xl p-8 text-center"> |
| <div class="w-16 h-16 rounded-full bg-neural-purple/20 flex items-center justify-center mx-auto mb-6"> |
| <i data-lucide="users" class="w-8 h-8 text-neural-purple"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-3">Accessibility First</h3> |
| <p class="text-gray-400">Complex topics explained simply. No gatekeeping, no jargon without explanation.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-8 text-center"> |
| <div class="w-16 h-16 rounded-full bg-neural-cyan/20 flex items-center justify-center mx-auto mb-6"> |
| <i data-lucide="shield-check" class="w-8 h-8 text-neural-cyan"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-3">Ethical Responsibility</h3> |
| <p class="text-gray-400">We prioritize AI safety, bias awareness, and human-centered technology.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-8 text-center"> |
| <div class="w-16 h-16 rounded-full bg-neural-pink/20 flex items-center justify-center mx-auto mb-6"> |
| <i data-lucide="zap" class="w-8 h-8 text-neural-pink"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl mb-3">Actionable Insights</h3> |
| <p class="text-gray-400">Theory is useless without application. Every piece of content includes next steps.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 relative"> |
| <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">Meet the Team</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="glass-card rounded-2xl p-6 text-center"> |
| <img src="https://static.photos/people/200x200/1" alt="CEO" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"> |
| <h3 class="font-display font-semibold text-xl mb-1">Sarah Chen</h3> |
| <p class="text-neural-purple text-sm mb-3">Founder & CEO</p> |
| <p class="text-gray-400 text-sm">Former AI researcher at Google. Obsessed with making AI accessible to non-technical audiences.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 text-center"> |
| <img src="https://static.photos/people/200x200/2" alt="Editor" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"> |
| <h3 class="font-display font-semibold text-xl mb-1">Marcus Rodriguez</h3> |
| <p class="text-neural-cyan text-sm mb-3">Head of Content</p> |
| <p class="text-gray-400 text-sm">Tech journalist turned educator. Curates our weekly newsletter and resource library.</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6 text-center"> |
| <img src="https://static.photos/people/200x200/3" alt="Community" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"> |
| <h3 class="font-display font-semibold text-xl mb-1">Aisha Johnson</h3> |
| <p class="text-neural-pink text-sm mb-3">Community Lead</p> |
| <p class="text-gray-400 text-sm">Building the most welcoming AI learning community on the internet. Discord expert.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 relative border-t border-white/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-4xl gradient-text mb-2">50K+</div> |
| <div class="text-gray-400">Newsletter Subscribers</div> |
| </div> |
| <div> |
| <div class="font-display font-bold text-4xl gradient-text mb-2">120+</div> |
| <div class="text-gray-400">Weekly Issues</div> |
| </div> |
| <div> |
| <div class="font-display font-bold text-4xl gradient-text mb-2">35</div> |
| <div class="text-gray-400">Countries Reached</div> |
| </div> |
| <div> |
| <div class="font-display font-bold text-4xl gradient-text mb-2">98%</div> |
| <div class="text-gray-400">Satisfaction Rate</div> |
| </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(); |
| </script> |
| </body> |
| </html> |
