| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NeuroData | AI Training Data Platform</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> |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-8px); } |
| } |
| .animate-float { |
| animation: float 4s ease-in-out infinite; |
| } |
| .gradient-text { |
| background: linear-gradient(90deg, #8B5CF6, #EC4899); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #1E293B, #0F172A); |
| } |
| .card-gradient { |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)); |
| } |
| .glow-hover:hover { |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); |
| } |
| .data-point { |
| position: absolute; |
| background: rgba(236, 72, 153, 0.1); |
| border: 1px solid rgba(236, 72, 153, 0.3); |
| border-radius: 50%; |
| } |
| .pulse-dot { |
| position: absolute; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: #8B5CF6; |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); } |
| 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } |
| 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } |
| } |
| .annotation-path { |
| stroke-dasharray: 1000; |
| stroke-dashoffset: 1000; |
| animation: dash 5s linear forwards infinite; |
| } |
| @keyframes dash { |
| to { |
| stroke-dashoffset: 0; |
| } |
| } |
| </style> |
| </head> |
| <body class="font-sans gradient-bg text-gray-300"> |
| <header class="sticky top-0 z-50 gradient-bg border-b border-gray-800"> |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-md bg-gradient-to-r from-purple-600 to-pink-500 flex items-center justify-center text-white font-bold text-xl">N</div> |
| <span class="ml-3 text-xl font-semibold text-white">NeuroData</span> |
| </div> |
| <nav class="hidden lg:flex space-x-8"> |
| <a href="#" class="text-gray-300 hover:text-white">Platform</a> |
| <a href="#" class="text-gray-300 hover:text-white">Solutions</a> |
| <a href="#" class="text-gray-300 hover:text-white">Resources</a> |
| <a href="#" class="text-gray-300 hover:text-white">Customers</a> |
| <a href="#" class="text-gray-300 hover:text-white">Company</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="px-4 py-2 text-gray-300 rounded-md hover:bg-gray-800">Sign In</button> |
| <button class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-md hover:opacity-90 transition">Get Started</button> |
| </div> |
| <button class="lg:hidden text-gray-300"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </header> |
|
|
| <main> |
| |
| <section class="relative py-20 lg:py-32 overflow-hidden"> |
| |
| <div id="data-points-container"></div> |
| |
| <div class="container mx-auto px-6 relative z-10"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-16 lg:mb-0"> |
| <div class="inline-block px-3 py-1 bg-gray-800 rounded-full text-sm text-pink-400 mb-4"> |
| <span class="animate-pulse">•</span> Now with RLHF capabilities |
| </div> |
| <h1 class="text-4xl md:text-5xl font-bold text-white leading-tight mb-6"> |
| The Complete Platform for |
| <span class="gradient-text">AI Data Infrastructure</span> |
| </h1> |
| <p class="text-lg text-gray-400 mb-8 max-w-lg"> |
| High-quality training data, cutting-edge annotation tools, and enterprise-grade infrastructure to power your AI applications. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-md hover:opacity-90 transition font-medium flex items-center"> |
| <i class="fas fa-rocket mr-2"></i> Start for Free |
| </button> |
| <button class="px-6 py-3 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-800 transition font-medium text-white flex items-center justify-center"> |
| <i class="fas fa-robot mr-2 text-purple-400"></i> |
| See AI in Action |
| </button> |
| </div> |
| |
| <div class="mt-12 flex items-center space-x-6"> |
| <div class="flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
| <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
| </div> |
| <div class="ml-4 text-sm text-gray-400"> |
| <div>Trusted by 850+ teams</div> |
| <div class="flex items-center mt-1"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <span class="ml-1">4.9/5</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2 relative"> |
| <div class="relative w-full h-96 bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden glow-hover transition-all duration-300"> |
| |
| <div class="absolute inset-0 flex flex-col"> |
| |
| <div class="flex items-center justify-between p-4 border-b border-gray-800 bg-gradient-to-r from-gray-900 to-gray-800"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-2 h-2 rounded-full bg-red-500"></div> |
| <div class="w-2 h-2 rounded-full bg-yellow-500"></div> |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> |
| <span class="ml-2 text-xs text-gray-400">AI Labeling Console</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs bg-gray-700 text-green-400 px-2 py-1 rounded">LIVE</span> |
| <span class="text-xs text-gray-400">32 workers active</span> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-1 overflow-hidden"> |
| |
| <div class="w-16 bg-gray-800 flex flex-col items-center py-4 border-r border-gray-800"> |
| <button class="w-10 h-10 rounded-lg bg-gray-700 text-purple-400 mb-4 flex items-center justify-center"> |
| <i class="fas fa-database"></i> |
| </button> |
| <button class="w-10 h-10 rounded-lg bg-purple-600 text-white mb-4 flex items-center justify-center"> |
| <i class="fas fa-tag"></i> |
| </button> |
| <button class="w-10 h-10 rounded-lg bg-gray-700 text-gray-400 mb-4 flex items-center justify-center"> |
| <i class="fas fa-chart-line"></i> |
| </button> |
| <button class="w-10 h-10 rounded-lg bg-gray-700 text-gray-400 flex items-center justify-center"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col"> |
| <div class="p-4 border-b border-gray-800 flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#8B5CF6" stroke-width="2"/> |
| <path d="M12 8V12L15 15" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round"/> |
| </svg> |
| <span class="text-xs text-gray-400">Task ID: ND-2837-42</span> |
| </div> |
| <div class="text-xs text-gray-400"> |
| <span class="text-purple-400">82%</span> complete |
| </div> |
| </div> |
| |
| <div class="flex-1 flex overflow-hidden"> |
| |
| <div class="flex-1 relative overflow-hidden flex items-center justify-center bg-gray-900"> |
| <img id="demo-image" src="https://placehold.co/600x400/1F2937/6B7280" alt="AI Annotation" class="absolute inset-0 w-full h-full object-contain opacity-70"> |
| |
| |
| <div id="annotation-container"> |
| |
| </div> |
| |
| |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"> |
| <button class="w-8 h-8 rounded-full bg-gray-800 border border-gray-700 text-purple-400 flex items-center justify-center hover:bg-purple-600 hover:text-white"> |
| <i class="fas fa-square text-xs"></i> |
| </button> |
| <button class="w-8 h-8 rounded-full bg-gray-800 border border-gray-700 text-pink-400 flex items-center justify-center hover:bg-pink-600 hover:text-white"> |
| <i class="fas fa-circle text-xs"></i> |
| </button> |
| <button class="w-8 h-8 rounded-full bg-gray-800 border border-gray-700 text-blue-400 flex items-center justify-center hover:bg-blue-600 hover:text-white"> |
| <i class="fas fa-pen text-xs"></i> |
| </button> |
| <button class="w-8 h-8 rounded-full bg-gray-800 border border-gray-700 text-green-400 flex items-center justify-center hover:bg-green-600 hover:text-white"> |
| <i class="fas fa-check text-xs"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="w-64 bg-gray-800 border-l border-gray-800 p-4 overflow-y-auto"> |
| <h4 class="text-xs font-medium text-gray-300 mb-2">INSTRUCTIONS</h4> |
| <p class="text-xs text-gray-400 mb-4">Label all vehicles in the image. Include trucks, cars, and motorcycles. Ignore pedestrians.</p> |
| |
| <h4 class="text-xs font-medium text-gray-300 mb-2">CLASSES</h4> |
| <div class="space-y-2 mb-4"> |
| <div class="flex items-center text-xs p-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600"> |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> |
| <span>Car</span> |
| </div> |
| <div class="flex items-center text-xs p-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600"> |
| <div class="w-3 h-3 rounded-full bg-pink-500 mr-2"></div> |
| <span>Truck</span> |
| </div> |
| <div class="flex items-center text-xs p-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600"> |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> |
| <span>Motorcycle</span> |
| </div> |
| </div> |
| |
| <div class="text-xs text-gray-400"> |
| <div class="flex justify-between mb-1"> |
| <span>Accuracy</span> |
| <span class="text-green-400">98%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-1"> |
| <div class="bg-green-500 h-1 rounded-full" style="width: 98%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 gradient-bg"> |
| <div class="container mx-auto px-6"> |
| <p class="text-center text-gray-500 text-sm mb-8">TRUSTED BY INDUSTRY LEADERS</p> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center"> |
| <div class="flex justify-center text-white opacity-80 hover:opacity-100 transition"> |
| <div class="text-2xl font-bold">OpenAI</div> |
| </div> |
| <div class="flex justify-center text-white opacity-80 hover:opacity-100 transition"> |
| <div class="text-2xl font-bold">Waymo</div> |
| </div> |
| <div class="flex justify-center text-white opacity-80 hover:opacity-100 transition"> |
| <div class="text-2xl font-bold">Tesla</div> |
| </div> |
| <div class="flex justify-center text-white opacity-80 hover:opacity-100 transition"> |
| <div class="text-2xl font-bold">NASA</div> |
| </div> |
| <div class="flex justify-center text-white opacity-80 hover:opacity-100 transition"> |
| <div class="text-2xl font-bold">NVIDIA</div> |
| </div> |
| <div class="flex justify-center text-white opacity-80 hover:opacity-100 transition"> |
| <div class="text-2xl font-bold">DoD</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 relative overflow-hidden"> |
| <div class="absolute top-0 left-0 w-full h-full opacity-5"> |
| <div id="network-lines"></div> |
| </div> |
| |
| <div class="container mx-auto px-6 relative"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-white mb-4">Enterprise AI Solutions</h2> |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto">End-to-end platforms for every stage of your AI development lifecycle</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="card-gradient rounded-2xl border border-gray-800 p-8 glow-hover transition-all"> |
| <div class="w-14 h-14 rounded-lg bg-purple-500 bg-opacity-20 text-purple-400 flex items-center justify-center mb-6"> |
| <i class="fas fa-database text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white mb-3">Data Collection</h3> |
| <p class="text-gray-400 mb-4">Source and aggregate diverse, high-quality datasets with our global data network and scraping tools.</p> |
| <div class="flex items-center text-purple-400 font-medium"> |
| <span>Explore Data</span> |
| <i class="fas fa-arrow-right ml-2 text-xs"></i> |
| </div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-purple-500 opacity-5"></div> |
| </div> |
| |
| |
| <div class="card-gradient rounded-2xl border border-gray-800 p-8 glow-hover transition-all"> |
| <div class="w-14 h-14 rounded-lg bg-pink-500 bg-opacity-20 text-pink-400 flex items-center justify-center mb-6"> |
| <i class="fas fa-tags text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white mb-3">Data Annotation</h3> |
| <p class="text-gray-400 mb-4">Precision labeling with AI-assisted tools, quality control, and expert human annotators.</p> |
| <div class="flex items-center text-pink-400 font-medium"> |
| <span>View Tools</span> |
| <i class="fas fa-arrow-right ml-2 text-xs"></i> |
| </div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-pink-500 opacity-5"></div> |
| </div> |
| |
| |
| <div class="card-gradient rounded-2xl border border-gray-800 p-8 glow-hover transition-all"> |
| <div class="w-14 h-14 rounded-lg bg-blue-500 bg-opacity-20 text-blue-400 flex items-center justify-center mb-6"> |
| <i class="fas fa-robot text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-white mb-3">Model Training</h3> |
| <p class="text-gray-400 mb-4">Scalable infrastructure with distributed training, hyperparameter tuning, and evaluation.</p> |
| <div class="flex items-center text-blue-400 font-medium"> |
| <span>Train Models</span> |
| <i class="fas fa-arrow-right ml-2 text-xs"></i> |
| </div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-blue-500 opacity-5"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 gradient-bg"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> |
| <h2 class="text-3xl font-bold text-white mb-6">Active Learning Workflows</h2> |
| <p class="text-lg text-gray-400 mb-8"> |
| Our platform intelligently selects the most valuable data points for labeling, reducing costs by up to 70% while maintaining model accuracy. |
| </p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-8 h-8 rounded-full bg-purple-600 bg-opacity-20 text-purple-400 flex items-center justify-center"> |
| <i class="fas fa-brain"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-white mb-1">Adaptive Sampling</h4> |
| <p class="text-gray-400">Prioritize edge cases and uncertain predictions to improve model robustness.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-8 h-8 rounded-full bg-pink-600 bg-opacity-20 text-pink-400 flex items-center justify-center"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-white mb-1">Performance Tracking</h4> |
| <p class="text-gray-400">Real-time metrics show how each labeled sample improves model accuracy.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-8 h-8 rounded-full bg-blue-600 bg-opacity-20 text-blue-400 flex items-center justify-center"> |
| <i class="fas fa-users"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-white mb-1">Human-in-the-Loop</h4> |
| <p class="text-gray-400">Seamless integration of human judgment for uncertain predictions.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2 relative"> |
| <div class="relative w-full h-96 bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden glow-hover transition-all"> |
| |
| <div class="absolute inset-0 flex flex-col"> |
| <div class="p-4 border-b border-gray-800 flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-300">Model Performance</span> |
| <span class="text-xs bg-gray-800 text-green-400 px-2 py-0.5 rounded">+12% weekly</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button class="text |
| </html> |
