Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusAI - Advanced AI Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap'); | |
| :root { | |
| --neon-green: #39ff14; | |
| --dark-bg: #0a0a0a; | |
| --darker-bg: #050505; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 10px var(--neon-green), inset 0 0 10px var(--neon-green); | |
| border: 1px solid var(--neon-green); | |
| } | |
| .neon-hover:hover { | |
| text-shadow: 0 0 8px var(--neon-green), 0 0 15px var(--neon-green); | |
| transition: text-shadow 0.3s ease; | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px var(--neon-green); | |
| } | |
| to { | |
| box-shadow: 0 0 20px var(--neon-green); | |
| } | |
| } | |
| .page { | |
| display: none; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .active-page { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .tech-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .tech-icon:hover { | |
| transform: scale(1.2); | |
| filter: drop-shadow(0 0 8px var(--neon-green)); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-black/80 backdrop-blur-md fixed w-full z-50 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold orbitron neon-text">Nexus<span class="text-green-400">AI</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <button onclick="showPage('home')" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-hover">Home</button> | |
| <button onclick="showPage('services')" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-hover">Services</button> | |
| <button onclick="showPage('success')" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-hover">Success Stories</button> | |
| <button onclick="showPage('tech')" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-hover">Technologies</button> | |
| <button onclick="showPage('contact')" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-hover">Contact</button> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black/90 backdrop-blur-lg border-t border-gray-800"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col"> | |
| <button onclick="showPage('home')" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium neon-hover">Home</button> | |
| <button onclick="showPage('services')" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium neon-hover">Services</button> | |
| <button onclick="showPage('success')" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium neon-hover">Success Stories</button> | |
| <button onclick="showPage('tech')" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium neon-hover">Technologies</button> | |
| <button onclick="showPage('contact')" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium neon-hover">Contact</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-16 min-h-screen"> | |
| <!-- Home Page --> | |
| <div id="home" class="page active-page"> | |
| <div class="relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-green-900/10 to-black z-0"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 orbitron neon-text"> | |
| Transforming <span class="text-green-400">Business</span> With AI | |
| </h1> | |
| <p class="text-lg text-gray-300 mb-8"> | |
| We build cutting-edge artificial intelligence solutions that drive innovation, efficiency, and growth for businesses across industries. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button onclick="showPage('services')" class="px-6 py-3 bg-green-500 hover:bg-green-600 text-black font-bold rounded-md transition duration-300 transform hover:scale-105 glow"> | |
| Explore Services | |
| </button> | |
| <button onclick="showPage('contact')" class="px-6 py-3 border border-green-400 hover:bg-green-900/30 text-green-400 font-bold rounded-md transition duration-300 transform hover:scale-105"> | |
| Get in Touch | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative w-full h-96 lg:h-full"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-green-400 to-blue-500 rounded-xl opacity-20 blur-3xl"></div> | |
| <div class="relative h-full bg-gray-900/50 border border-gray-800 rounded-xl flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <i class="fas fa-robot text-8xl text-green-400 mb-4"></i> | |
| <h3 class="text-xl font-bold orbitron">AI-Powered Future</h3> | |
| <p class="text-gray-400 mt-2">Where innovation meets intelligence</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold orbitron mb-4 neon-text">Why Choose <span class="text-green-400">NexusAI</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">We combine cutting-edge technology with industry expertise to deliver transformative AI solutions.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-green-400 transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-brain text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Deep Learning Experts</h3> | |
| <p class="text-gray-400">Our team consists of PhD-level researchers and engineers with extensive experience in neural networks and deep learning architectures.</p> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-green-400 transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-chart-line text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Proven Results</h3> | |
| <p class="text-gray-400">We've helped clients achieve 30-300% improvements in key metrics through our AI implementations.</p> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-green-400 transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-shield-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Ethical AI</h3> | |
| <p class="text-gray-400">We prioritize responsible AI development with built-in fairness, transparency, and accountability measures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services Page --> | |
| <div id="services" class="page"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold orbitron mb-4 neon-text">Our <span class="text-green-400">AI Services</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Comprehensive AI solutions tailored to your business needs</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-comments text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Conversational AI</h3> | |
| <p class="text-gray-400 mb-4">Advanced chatbots and virtual assistants that understand natural language and provide human-like interactions.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> 24/7 Customer Support</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Multilingual Capabilities</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Sentiment Analysis</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-chart-bar text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Predictive Analytics</h3> | |
| <p class="text-gray-400 mb-4">Harness the power of your data to forecast trends, customer behavior, and business outcomes with remarkable accuracy.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Demand Forecasting</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Churn Prediction</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Risk Assessment</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-eye text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Computer Vision</h3> | |
| <p class="text-gray-400 mb-4">Transform images and videos into actionable insights with our state-of-the-art visual recognition systems.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Object Detection</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Facial Recognition</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Quality Inspection</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-robot text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Process Automation</h3> | |
| <p class="text-gray-400 mb-4">Intelligent automation solutions that learn and adapt to optimize your business workflows.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Document Processing</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Workflow Optimization</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Decision Automation</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-search text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Anomaly Detection</h3> | |
| <p class="text-gray-400 mb-4">Identify unusual patterns and potential threats in real-time across your systems and operations.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Fraud Detection</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Network Security</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Equipment Monitoring</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="text-green-400 mb-4"> | |
| <i class="fas fa-cogs text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Custom AI Solutions</h3> | |
| <p class="text-gray-400 mb-4">Tailored AI systems designed specifically for your unique business challenges and opportunities.</p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Bespoke Model Development</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> End-to-End Implementation</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-2"></i> Ongoing Support</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <button onclick="showPage('contact')" class="px-8 py-4 bg-green-500 hover:bg-green-600 text-black font-bold rounded-md transition duration-300 transform hover:scale-105 glow text-lg"> | |
| Ready to Transform Your Business? | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Stories Page --> | |
| <div id="success" class="page"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold orbitron mb-4 neon-text">Our <span class="text-green-400">Success Stories</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Real-world impact delivered through AI innovation</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-900/30 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shopping-cart text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">E-commerce Personalization</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">For a leading online retailer, we implemented a recommendation engine that analyzes customer behavior in real-time to suggest highly relevant products.</p> | |
| <div class="bg-black/30 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Conversion Rate</span> | |
| <span class="font-bold text-green-400">+42%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Average Order Value</span> | |
| <span class="font-bold text-green-400">+27%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-900/30 p-3 rounded-full mr-4"> | |
| <i class="fas fa-heartbeat text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Healthcare Diagnostics</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Developed an AI system for a hospital network that analyzes medical images with higher accuracy than junior radiologists, reducing diagnostic errors.</p> | |
| <div class="bg-black/30 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Detection Accuracy</span> | |
| <span class="font-bold text-green-400">98.7%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Diagnosis Time</span> | |
| <span class="font-bold text-green-400">-65%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-900/30 p-3 rounded-full mr-4"> | |
| <i class="fas fa-robot text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Manufacturing Optimization</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Implemented predictive maintenance for an automotive manufacturer, reducing unplanned downtime and optimizing production schedules.</p> | |
| <div class="bg-black/30 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Equipment Downtime</span> | |
| <span class="font-bold text-green-400">-73%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Maintenance Costs</span> | |
| <span class="font-bold text-green-400">-41%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8 hover:neon-border transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-900/30 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Financial Fraud Detection</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Created a real-time fraud detection system for a global bank that identifies suspicious transactions with unprecedented accuracy.</p> | |
| <div class="bg-black/30 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Fraud Detection Rate</span> | |
| <span class="font-bold text-green-400">+89%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">False Positives</span> | |
| <span class="font-bold text-green-400">-62%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 border border-gray-800 rounded-xl p-8 md:p-12"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold orbitron mb-4 neon-text">Ready to Write <span class="text-green-400">Your Success Story?</span></h3> | |
| <p class="text-gray-400">Let's discuss how AI can transform your business operations and drive measurable results.</p> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8"> | |
| <button onclick="showPage('contact')" class="w-full px-6 py-4 bg-green-500 hover:bg-green-600 text-black font-bold rounded-md transition duration-300 transform hover:scale-105 glow text-lg"> | |
| Schedule a Consultation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technologies Page --> | |
| <div id="tech" class="page"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold orbitron mb-4 neon-text">Our <span class="text-green-400">Technology Stack</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Cutting-edge tools and frameworks powering our AI solutions</p> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 mb-16"> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fab fa-python text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">Python</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-project-diagram text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">TensorFlow</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-brain text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">PyTorch</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-cloud text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">AWS SageMaker</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-database text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">BigQuery</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-robot text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">OpenAI</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-chart-bar text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">Scikit-learn</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-eye text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">OpenCV</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-comment-dots text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">NLTK</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-network-wired text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">Keras</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-chart-pie text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">Pandas</span> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center tech-icon"> | |
| <i class="fas fa-code text-5xl text-green-400 mb-3"></i> | |
| <span class="font-medium">FastAPI</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 border border-gray-800 rounded-xl p-8 md:p-12"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-2/3 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold orbitron mb-4 neon-text">Custom <span class="text-green-400">Technology Solutions</span></h3> | |
| <p class="text-gray-400">We don't just use off-the-shelf tools. Our team develops custom architectures and algorithms tailored to your specific needs, combining the best of open-source technologies with our proprietary innovations.</p> | |
| </div> | |
| <div class="md:w-1/3 md:pl-8"> | |
| <button onclick="showPage('contact')" class="w-full px-6 py-4 bg-green-500 hover:bg-green-600 text-black font-bold rounded-md transition duration-300 transform hover:scale-105 glow text-lg"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Page --> | |
| <div id="contact" class="page"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold orbitron mb-4 neon-text">Get in <span class="text-green-400">Touch</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Ready to explore how AI can transform your business? Let's talk.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6 orbitron neon-text">Contact <span class="text-green-400">Information</span></h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-900/30 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Headquarters</h4> | |
| <p class="text-gray-400">123 AI Boulevard<br>San Francisco, CA 94107</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-900/30 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email Us</h4> | |
| <p class="text-gray-400">contact@nexusai.com<br>sales@nexusai.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-900/30 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Call Us</h4> | |
| <p class="text-gray-400">+1 (555) 123-4567<br>Mon-Fri, 9am-5pm PST</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h4 class="font-bold mb-4 orbitron">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-green-400"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-green-400"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-green-400"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-green-400"> | |
| <i class="fab fa-medium"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-800 rounded-xl p-8"> | |
| <h3 class="text-xl font-bold mb-6 orbitron neon-text">Send Us a <span class="text-green-400">Message</span></h3> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Name</label> | |
| <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-2 focus:outline-none focus:border-green-400 focus:ring-1 focus:ring-green-400"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-2 focus:outline-none focus:border-green-400 focus:ring-1 focus:ring-green-400"> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-sm font-medium mb-1">Company</label> | |
| <input type="text" id="company" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-2 focus:outline-none focus:border-green-400 focus:ring-1 focus:ring-green-400"> | |
| </div> | |
| <div> | |
| <label for="service" class="block text-sm font-medium mb-1">Service of Interest</label> | |
| <select id="service" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-2 focus:outline-none focus:border-green-400 focus:ring-1 focus:ring-green-400"> | |
| <option value="">Select a service</option> | |
| <option value="conversational">Conversational AI</option> | |
| <option value="predictive">Predictive Analytics</option> | |
| <option value="vision">Computer Vision</option> | |
| <option value="automation">Process Automation</option> | |
| <option value="anomaly">Anomaly Detection</option> | |
| <option value="custom">Custom AI Solutions</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-md px-4 py-2 focus:outline-none focus:border-green-400 focus:ring-1 focus:ring-green-400"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-green-500 hover:bg-green-600 text-black font-bold rounded-md transition duration-300 transform hover:scale-105 glow"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-black border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-2xl font-bold orbitron neon-text mb-4">Nexus<span class="text-green-400">AI</span></h3> | |
| <p class="text-gray-400 mb-4">Pioneering artificial intelligence solutions that drive business transformation and innovation.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-medium"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 orbitron">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><button onclick="showPage('home')" class="text-gray-400 hover:text-green-400 neon-hover">Home</button></li> | |
| <li><button onclick="showPage('services')" class="text-gray-400 hover:text-green-400 neon-hover">Services</button></li> | |
| <li><button onclick="showPage('success')" class="text-gray-400 hover:text-green-400 neon-hover">Success Stories</button></li> | |
| <li><button onclick="showPage('tech')" class="text-gray-400 hover:text-green-400 neon-hover">Technologies</button></li> | |
| <li><button onclick="showPage('contact')" class="text-gray-400 hover:text-green-400 neon-hover">Contact</button></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 orbitron">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400 neon-hover">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400 neon-hover">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400 neon-hover">AI Ethics Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400 neon-hover">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 NexusAI. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-green-400 text-sm">Privacy</a> | |
| <a href="#" class="text-gray-500 hover:text-green-400 text-sm">Terms</a> | |
| <a href="#" class="text-gray-500 hover:text-green-400 text-sm">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Page navigation | |
| function showPage(pageId) { | |
| // Hide all pages | |
| document.querySelectorAll('.page').forEach(page => { | |
| page.classList.remove('active-page'); | |
| }); | |
| // Show selected page | |
| document.getElementById(pageId).classList.add('active-page'); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| // Scroll to top | |
| window.scrollTo(0, 0); | |
| } | |
| // Set active page on load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showPage('home'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kchecker/no-ifs-only-bots" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |