|
|
<!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> |
