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