File size: 8,935 Bytes
2e5cf3b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aetheris AI | Distributed Neural Inference Engine</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6366f1;
--accent: #a855f7;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #020617;
color: #f8fafc;
overflow-x: hidden;
}
/* 动态网格背景 */
.grid-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse at center, black, transparent 80%);
z-index: -1;
}
/* 霓虹发光 */
.neon-glow {
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.text-gradient {
background: linear-gradient(135deg, #fff 30%, #6366f1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--accent));
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px var(--primary);
}
@keyframes pulse-slow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.animate-pulse-slow {
animation: pulse-slow 4s infinite;
}
</style>
</head>
<body>
<div class="grid-bg"></div>
<div class="neon-glow" style="top: -100px; right: -100px;"></div>
<div class="neon-glow" style="bottom: -100px; left: -100px;"></div>
<!-- Header -->
<nav class="container mx-auto px-8 py-8 flex justify-between items-center relative z-10">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 border-2 border-indigo-500 rotate-45 flex items-center justify-center">
<div class="w-5 h-5 bg-indigo-500 animate-pulse"></div>
</div>
<span class="text-2xl font-extrabold tracking-tighter uppercase">Aetheris</span>
</div>
<div class="hidden md:flex space-x-10 text-sm font-medium tracking-wide text-gray-400">
<a href="#" class="hover:text-white transition">Models</a>
<a href="#" class="hover:text-white transition">Infrastructure</a>
<a href="#" class="hover:text-white transition">Pricing</a>
<a href="#" class="hover:text-white transition">Enterprise</a>
</div>
<button class="px-6 py-2 border border-white/10 rounded-full text-sm font-semibold hover:bg-white/5 transition">
Developer Portal
</button>
</nav>
<!-- Hero Section -->
<main class="container mx-auto px-8 pt-24 pb-20 relative z-10 text-center">
<div class="inline-block px-4 py-1.5 mb-6 glass rounded-full text-xs font-bold tracking-widest text-indigo-400 uppercase">
Next-Gen LLM Inference Engine Now Live
</div>
<h1 class="text-6xl md:text-8xl font-extrabold mb-8 tracking-tighter leading-tight text-gradient leading-none">
Scale Your AI <br>Beyond Boundaries.
</h1>
<p class="max-w-3xl mx-auto text-gray-400 text-lg md:text-xl mb-12 leading-relaxed font-light">
Aetheris provides the world's fastest distributed neural processing network.
Deploy your models at the edge with <span class="text-white">sub-30ms latency</span> and enterprise-grade security.
</p>
<div class="flex flex-col md:flex-row items-center justify-center gap-6">
<a href="#" class="w-full md:w-auto px-10 py-4 btn-primary rounded-xl font-bold text-lg shadow-2xl">
Get Started Free
</a>
<a href="#" class="w-full md:w-auto px-10 py-4 glass rounded-xl font-bold text-lg hover:bg-white/5 transition">
Documentation
</a>
</div>
<!-- Fake Dashboard Preview -->
<div class="mt-24 max-w-6xl mx-auto relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000"></div>
<div class="relative glass rounded-2xl p-6 md:p-10 shadow-2xl">
<div class="flex items-center justify-between mb-8">
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500/30"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/30"></div>
<div class="w-3 h-3 rounded-full bg-green-500/30"></div>
</div>
<div class="text-xs text-gray-500 font-mono tracking-widest">SYSTEM STATUS: OPTIMIZED</div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-left border-l border-indigo-500/30 pl-6">
<div class="text-4xl font-bold mb-2 tracking-tighter">99.99<span class="text-indigo-500">%</span></div>
<div class="text-xs uppercase tracking-widest text-gray-500">Uptime Reliability</div>
</div>
<div class="text-left border-l border-indigo-500/30 pl-6">
<div class="text-4xl font-bold mb-2 tracking-tighter">1.2<span class="text-indigo-500">ms</span></div>
<div class="text-xs uppercase tracking-widest text-gray-500">Avg. API Latency</div>
</div>
<div class="text-left border-l border-indigo-500/30 pl-6">
<div class="text-4xl font-bold mb-2 tracking-tighter">48<span class="text-indigo-500">TB</span></div>
<div class="text-xs uppercase tracking-widest text-gray-500">Daily Processed Data</div>
</div>
</div>
</div>
</div>
</main>
<!-- Features -->
<section class="container mx-auto px-8 py-20 border-t border-white/5">
<div class="grid md:grid-cols-3 gap-12">
<div>
<h4 class="text-white font-bold mb-4 text-xl tracking-tight">Global Distribution</h4>
<p class="text-gray-500 leading-relaxed text-sm">Deploy inference nodes across 200+ global data centers to ensure your users experience zero lag, no matter where they are.</p>
</div>
<div>
<h4 class="text-white font-bold mb-4 text-xl tracking-tight">Secure Tunnels</h4>
<p class="text-gray-500 leading-relaxed text-sm">Every request is protected by end-to-end hardware-level encryption and private tunneling protocols.</p>
</div>
<div>
<h4 class="text-white font-bold mb-4 text-xl tracking-tight">Adaptive Scaling</h4>
<p class="text-gray-500 leading-relaxed text-sm">Our neural load balancer automatically routes traffic to the most efficient node based on real-time network congestion.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="container mx-auto px-8 py-12 border-t border-white/5 text-center md:text-left">
<div class="flex flex-col md:flex-row justify-between items-center opacity-40 hover:opacity-100 transition duration-500">
<div class="text-xs tracking-widest uppercase mb-4 md:mb-0">
© 2024 Aetheris Intelligence Systems. All rights reserved.
</div>
<div class="flex space-x-8 text-xs font-bold tracking-widest uppercase">
<a href="#" class="hover:text-indigo-400 transition">API Status</a>
<a href="#" class="hover:text-indigo-400 transition">Privacy Guide</a>
<a href="#" class="hover:text-indigo-400 transition">Terms</a>
</div>
</div>
</footer>
</body>
</html> |