WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>AURA // Advanced Synthetics</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { aura: { black: '#050505', white: '#F2F2F2', neon: '#C8FF00', amber: '#FF5800', gray: '#111111', surface:'#0E0E0E', text: '#6B6B6B', } }, fontFamily: { display: ['Syne','sans-serif'], sans: ['Space Grotesk','sans-serif'], mono: ['JetBrains Mono','monospace'], } } } } </script> <style> /* ─── BASE ─── */ *, *::before, *::after { box-sizing: border-box; cursor: none !important; } html { scroll-behavior: smooth; } body { background: #050505; color: #F2F2F2; font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; } ::selection { background: #C8FF00; color: #050505; } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: #C8FF00; border-radius: 2px; } /* ─── GRAIN ─── */ .grain { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ─── CUSTOM CURSOR ─── */ #c-dot { position: fixed; width: 5px; height: 5px; background: #C8FF00; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 9999; transition: width .15s, height .15s; } #c-ring { position: fixed; width: 34px; height: 34px; border: 1px solid rgba(200,255,0,.4); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 9998; transition: width .2s ease, height .2s ease, border-color .2s; } body.hovering #c-dot { width: 0; height: 0; } body.hovering #c-ring { width: 50px; height: 50px; border-color: #C8FF00; background: rgba(200,255,0,.04); } /* ─── GLASS VARIANTS ─── */ .glass { background: rgba(255,255,255,.03); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.07); } .glass-neon { background: rgba(200,255,0,.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(200,255,0,.14); } .glass-amber { background: rgba(255,88,0,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,88,0,.18); } .glass-white { background: rgba(255,255,255,.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); } /* ─── BRACKET CORNERS (Capture Camera style) ─── */ .bracket { position: relative; } .bracket::before { content: ''; position: absolute; top: -7px; left: -7px; width: 14px; height: 14px; border-top: 1.5px solid rgba(200,255,0,.55); border-left: 1.5px solid rgba(200,255,0,.55); transition: all .3s ease; } .bracket::after { content: ''; position: absolute; bottom: -7px; right: -7px; width: 14px; height: 14px; border-bottom: 1.5px solid rgba(200,255,0,.55); border-right: 1.5px solid rgba(200,255,0,.55); transition: all .3s ease; } .bracket:hover::before { top: -4px; left: -4px; border-color: #C8FF00; } .bracket:hover::after { bottom: -4px; right: -4px; border-color: #C8FF00; } .bracket-sm::before, .bracket-sm::after { width: 10px; height: 10px; top: -5px; left: -5px; } .bracket-sm::after { top: auto; left: auto; bottom: -5px; right: -5px; } /* ─── REVEAL ANIMATIONS ─── */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal-l { opacity: 0; transform: translateX(-36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal-r { opacity: 0; transform: translateX(36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal.on, .reveal-l.on, .reveal-r.on { opacity: 1; transform: translate(0,0); } /* ─── MARQUEE ─── */ .mq-wrap { overflow: hidden; display: flex; } .mq-track { display: inline-flex; white-space: nowrap; animation: mq 28s linear infinite; } .mq-rev { animation-direction: reverse; } @keyframes mq { to { transform: translateX(-50%); } } /* ─── SCANNING LINE (HUD) ─── */ .scan-line { height: 1px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; } .scan-line::after { content: ''; position: absolute; inset-y: 0; left: -60%; width: 60%; background: linear-gradient(90deg, transparent, #C8FF00, transparent); animation: scan 3.5s linear infinite; } @keyframes scan { to { left: 150%; } } /* ─── PULSE DOT ─── */ .pulse-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .pulse-dot.green { background: #C8FF00; animation: pdot 2s ease infinite; } .pulse-dot.amber { background: #FF5800; animation: pdot 2s ease .5s infinite; } @keyframes pdot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } } /* ─── TYPOGRAPHY HELPERS ─── */ .text-stroke { -webkit-text-stroke: 1px rgba(242,242,242,.2); color: transparent; } .section-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #6B6B6B; } .hud-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; } /* ─── PRODUCT CARD GRID OVERLAY ─── */ .grid-overlay { background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); background-size: 28px 28px; opacity: .025; } /* ─── WHITE SECTION ─── */ .s-white { background: #F2F2F2; color: #050505; } /* ─── STAT NUMBER ─── */ .stat-n { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(2.2rem,5vw,4rem); line-height: 1; letter-spacing: -.03em; } /* ─── GLOW ─── */ .glow-n { box-shadow: 0 0 30px rgba(200,255,0,.08), 0 0 80px rgba(200,255,0,.03); } .glow-a { box-shadow: 0 0 30px rgba(255,88,0,.08), 0 0 80px rgba(255,88,0,.03); } /* ─── NAV SCROLL ─── */ #nav.scrolled { background: rgba(5,5,5,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.04); } /* ─── CARD FLOAT WIDGET ─── */ .float-widget { transform: translateY(8px); opacity: 0; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease; } .group:hover .float-widget { transform: translateY(0); opacity: 1; } .float-widget.delay-1 { transition-delay: .05s; } .float-widget.delay-2 { transition-delay: .12s; } </style> </head> <body> <div class="grain"></div> <div id="c-dot"></div> <div id="c-ring"></div> <!-- ═══════════════════════════ NAVBAR ═══════════════════════════ --> <nav id="nav" class="fixed top-0 w-full z-50 px-6 md:px-16 py-5 flex justify-between items-center transition-all duration-500"> <a href="#" class="font-display font-extrabold text-xl tracking-tight flex items-center gap-2 hover-t"> <span class="w-2 h-2 rounded-full bg-aura-neon"></span>AURA. </a> <div class="hidden md:flex gap-10 font-mono text-[10px] uppercase tracking-[.25em] text-aura-text"> <a href="#vision" class="hover:text-white transition-colors hover-t">Vision</a> <a href="#systems" class="hover:text-white transition-colors hover-t">Systems</a> <a href="#intel" class="hover:text-white transition-colors hover-t">Intel</a> <a href="#contact" class="hover:text-white transition-colors hover-t">Contact</a> </div> <a href="#" class="hidden md:flex items-center gap-2 font-mono text-[10px] uppercase tracking-widest border border-white/15 px-5 py-2.5 rounded-full hover:border-aura-neon hover:text-aura-neon transition-all hover-t"> <span class="pulse-dot green"></span>Access Terminal </a> <button class="md:hidden text-white hover-t"><i class="ri-menu-4-line text-lg"></i></button> </nav> <main> <!-- ═══════════════════════════ HERO ═══════════════════════════ --> <!-- Inspired by: ZEUS-X (floating HUD badges, atmospheric dark, massive product name) --> <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"> <canvas id="hero-canvas" class="absolute inset-0 z-[1] pointer-events-none w-full h-full"></canvas> <!-- Background layers --> <div class="absolute inset-0 z-0"> <img id="hero-img" src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2670&auto=format&fit=crop" class="w-full h-full object-cover opacity-[.12]" alt=""> <div class="absolute inset-0" style="background:linear-gradient(180deg,#050505 0%,rgba(5,5,5,.5) 40%,rgba(5,5,5,.5) 60%,#050505 100%)"></div> <div class="absolute inset-0" style="background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(200,255,0,.035) 0%,transparent 70%)"></div> </div> <!-- ── HUD WIDGETS LEFT (ZEUS-X style) ── --> <div class="absolute top-28 left-6 md:left-20 z-20 hidden lg:flex flex-col gap-3"> <div class="glass hud-label p-3.5 rounded-xl w-44 reveal-l" style="transition-delay:.3s"> <div class="flex items-center justify-between mb-2"> <span class="text-aura-text">SYS.STATUS</span> <span class="pulse-dot green"></span> </div> <div class="font-display font-bold text-sm text-white mb-2">ONLINE</div> <div class="scan-line rounded-full"></div> <div class="mt-2 text-aura-text text-[9px]">All nodes nominal</div> </div> <div class="glass hud-label p-3.5 rounded-xl w-44 reveal-l" style="transition-delay:.45s"> <div class="flex justify-between mb-1.5"> <span class="text-aura-text">NEURAL LOAD</span> <span class="text-aura-neon font-bold text-[11px]">87%</span> </div> <div class="h-0.5 bg-white/5 rounded overflow-hidden"> <div class="h-full bg-aura-neon rounded" style="width:87%"></div> </div> </div> </div> <!-- ── HUD WIDGETS RIGHT (ZEUS-X style) ── --> <div class="absolute top-28 right-6 md:right-20 z-20 hidden lg:flex flex-col gap-3 items-end"> <div class="glass-amber hud-label p-3.5 rounded-xl w-48 reveal-r" style="transition-delay:.35s"> <div class="text-aura-text mb-1">POWER OUTPUT</div> <div class="font-display font-bold text-2xl text-aura-amber">150 T/s</div> <div class="text-aura-text text-[9px] mt-1">Uninterrupted throughput</div> </div> <div class="glass hud-label p-3.5 rounded-xl w-48 reveal-r" style="transition-delay:.5s"> <div class="flex items-center gap-1.5 mb-1.5"> <i class="ri-leaf-line text-aura-neon text-xs"></i> <span class="text-aura-text">SUSTAINABILITY</span> </div> <div class="text-white font-bold text-[13px]">Zero CO₂</div> <div class="text-aura-text text-[9px] mt-0.5">Carbon-neutral ops</div> </div> </div> <!-- ── COORDINATE TAG (bottom-left) ── --> <div class="absolute bottom-24 left-6 md:left-20 z-10 hidden md:block reveal-l" style="transition-delay:.65s"> <div class="hud-label text-aura-text">LOC // 41.0082° N 28.9784° E</div> <div class="hud-label text-aura-text mt-0.5">NODE CLUSTER: ISTANBUL-01</div> </div> <!-- ── MAIN HEADING ── --> <div class="relative z-10 text-center px-4"> <div class="section-label text-aura-neon mb-6 reveal" style="font-size:9px"> ⬡ Advanced Synthetic Intelligence ⬡ </div> <h1 class="font-display font-extrabold leading-[.82] tracking-tight reveal" style="font-size:clamp(4rem,13vw,12rem); transition-delay:.1s"> NEURAL </h1> <h1 class="font-display font-extrabold leading-[.82] tracking-tight text-stroke reveal" style="font-size:clamp(3.4rem,11vw,10.5rem); transition-delay:.18s"> GENESIS </h1> <p class="mt-9 font-sans text-aura-text max-w-xs mx-auto text-sm leading-relaxed reveal" style="transition-delay:.28s"> Biological cognition meets machine precision. We build the minds that run tomorrow's infrastructure. </p> <div class="mt-10 flex items-center justify-center gap-4 reveal" style="transition-delay:.38s"> <a href="#systems" class="flex items-center gap-2 bg-aura-neon text-aura-black font-display font-bold text-sm px-7 py-3.5 rounded-full hover:opacity-90 transition-opacity hover-t"> Explore Systems <i class="ri-arrow-right-line"></i> </a> <a href="#vision" class="flex items-center gap-2 font-mono text-[11px] text-aura-text hover:text-white transition-colors hover-t"> <i class="ri-play-circle-line text-lg"></i>View Demo </a> </div> </div> <!-- Scroll indicator --> <div class="absolute bottom-9 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 reveal" style="transition-delay:.75s"> <span class="font-mono text-[9px] uppercase tracking-[.35em] text-aura-text">Scroll</span> <div class="w-px h-10 bg-gradient-to-b from-aura-neon/60 to-transparent"></div> </div> </section> <!-- ═══════════════════════════ MARQUEE 1 ═══════════════════════════ --> <!-- Inspired by: Capture Camera — repeating neon strip --> <div class="py-3.5 overflow-hidden" style="background:#C8FF00"> <div class="mq-wrap"> <div class="mq-track font-display font-extrabold text-aura-black uppercase tracking-wide" style="font-size:1.15rem"> <span class="px-8">Advanced Robotics</span><span class="opacity-30 px-2">×</span> <span class="px-8">Neural Networks</span><span class="opacity-30 px-2">×</span> <span class="px-8">Quantum Processing</span><span class="opacity-30 px-2">×</span> <span class="px-8">Cyber Security</span><span class="opacity-30 px-2">×</span> <span class="px-8">Bio Synthesis</span><span class="opacity-30 px-2">×</span> <span class="px-8">Advanced Robotics</span><span class="opacity-30 px-2">×</span> <span class="px-8">Neural Networks</span><span class="opacity-30 px-2">×</span> <span class="px-8">Quantum Processing</span><span class="opacity-30 px-2">×</span> <span class="px-8">Cyber Security</span><span class="opacity-30 px-2">×</span> <span class="px-8">Bio Synthesis</span><span class="opacity-30 px-2">×</span> </div> </div> </div> <!-- ═══════════════════════════ VISION / EDITORIAL ═══════════════════════════ --> <!-- Inspired by: Black Sand (small column text, cinematic photo, facts layout) --> <section id="vision" class="relative py-24 md:py-40 overflow-hidden"> <div class="container mx-auto px-6 md:px-16"> <!-- Section header row --> <div class="flex flex-col md:flex-row justify-between items-start mb-16 md:mb-28 gap-8"> <div class="reveal-l"> <div class="section-label mb-4">— 001 / Vision</div> <h2 class="font-display font-extrabold leading-[.88] tracking-tight" style="font-size:clamp(2.5rem,5.5vw,5rem)"> Dreams Are Made<br>Of <span class="text-aura-neon">Dark Matter</span> </h2> </div> <div class="md:max-w-[200px] reveal-r"> <div class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Active in regions where algorithmic mass exceeds human comprehension. </div> </div> </div> <!-- Black Sand editorial grid --> <div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-start"> <!-- Col 1: Small descriptive texts (Black Sand left column) --> <div class="md:col-span-3 space-y-10 md:pt-16 reveal-l" style="transition-delay:.1s"> <div> <div class="hud-label text-aura-neon mb-3" style="font-size:9px">01 / Foundation</div> <p class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Bridges the biological and the digital. Where intuition meets computation at scale. </p> </div> <div class="w-10 h-px bg-white/8"></div> <div> <div class="hud-label text-aura-text mb-3" style="font-size:9px">02 / Discovery</div> <p class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Found mainly in areas with active or past high-density algorithmic activity. </p> </div> <div class="w-10 h-px bg-white/8"></div> <div> <div class="hud-label text-aura-text mb-3" style="font-size:9px">03 / Adaptation</div> <p class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Self-modifying neural pathways running continuous edge-case refinement. </p> </div> </div> <!-- Col 2: Cinematic tall image (Black Sand center) --> <div class="md:col-span-5 reveal" style="transition-delay:.2s"> <div class="bracket relative"> <!-- Capture-style tag --> <div class="absolute top-4 right-4 z-10 hud-label bg-aura-black/80 border border-white/10 px-2.5 py-1.5 rounded text-white" style="font-size:9px"> ## 100% Adaptive </div> <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2600&auto=format&fit=crop" class="w-full aspect-[3/4] object-cover rounded-sm grayscale hover:grayscale-0 transition-all duration-700" alt="Neural Vision"> <!-- Bottom discovery label like Black Sand --> <div class="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-aura-black/90 to-transparent"> <div class="hud-label text-aura-neon mb-1" style="font-size:9px">DISCOVERY</div> <p class="hud-label text-white/70 leading-snug" style="font-size:10px"> Neural patterns are typically formed from recursive data compression, resulting in fragments of emergent cognition. </p> </div> </div> </div> <!-- Col 3: Quote + Facts (Black Sand right column) --> <div class="md:col-span-4 md:pt-16 space-y-8 reveal-r" style="transition-delay:.3s"> <!-- Pull quote --> <div class="border-l-2 border-aura-neon pl-5"> <p class="font-display font-bold leading-snug text-xl md:text-2xl"> "Intelligence is not the goal.<br><span class="text-aura-neon">Consciousness</span> is." </p> </div> <!-- Facts list (Black Sand "More Info" section) --> <div class="space-y-5 pt-2"> <div class="border-b border-white/5 pb-5"> <div class="hud-label text-aura-text mb-2" style="font-size:9px">More Info</div> <p class="font-sans text-sm text-aura-text leading-relaxed"> AURA's core weights span 1.4 trillion parameters across 24 specialised domains, each fine-tuned on real-world edge cases. </p> </div> <div class="border-b border-white/5 pb-5"> <div class="hud-label text-aura-text mb-2" style="font-size:9px">Architecture</div> <p class="font-sans text-sm text-aura-text leading-relaxed"> Distributed across 40+ sovereign data clusters. No single point of failure. No single point of control. </p> </div> <div> <div class="hud-label text-aura-text mb-2" style="font-size:9px">Companies with Research</div> <div class="flex flex-wrap gap-3"> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">IPSUM</span> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">LOCIO</span> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">COREX</span> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">NEMA</span> </div> </div> </div> </div> </div> </div> </section> <!-- ═══════════════════════════ WHITE EDITORIAL ═══════════════════════════ --> <!-- Inspired by: Capture Camera + Portfolio (white, product over type, services list, stats row) --> <section class="s-white relative py-24 md:py-40 overflow-hidden"> <!-- Giant bg typography (Portfolio + Capture style) --> <div class="absolute inset-0 flex items-center pointer-events-none overflow-hidden select-none"> <div class="font-display font-extrabold whitespace-nowrap leading-none text-black/[.04]" style="font-size:clamp(7rem,19vw,20rem); letter-spacing:-.04em; margin-left:-.5rem"> PURE MIND. </div> </div> <div class="container mx-auto px-6 md:px-16 relative z-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 items-center"> <!-- Portrait image (Portfolio style) --> <div class="relative reveal-l"> <div class="bracket relative" style="--bcolor:rgba(0,0,0,.2)"> <img src="https://images.unsplash.com/photo-1547954575-855750c57bd3?q=80&w=2487&auto=format&fit=crop" class="w-full aspect-[4/5] object-cover rounded-sm" alt="Synthetic Mind"> </div> <!-- Capture-style price/date tag --> <div class="absolute top-6 -right-3 md:-right-5 hud-label bg-white border border-black/10 px-3 py-2 rounded shadow-sm text-black" style="font-size:11px"> <span class="text-black/40">EST.</span><span class="font-bold ml-1">2024</span> </div> </div> <!-- Editorial text + services (Portfolio style) --> <div class="reveal-r"> <div class="section-label text-black/35 mb-6" style="color:#050505">[ABOUT THE SYSTEM]</div> <h2 class="font-display font-extrabold leading-[.85] tracking-tight mb-8 text-aura-black" style="font-size:clamp(2.5rem,5vw,4.5rem)"> CRAFTING<br>MINDS<br>THROUGH <span class="text-aura-amber">CODE</span> </h2> <p class="font-sans text-sm text-black/55 leading-relaxed max-w-sm mb-5"> We celebrate the golden era of cognitive engineering. Our purpose lies in preserving the depth of authentic intelligence while making it accessible for the next generation of builders. </p> <p class="font-sans text-sm text-black/40 leading-relaxed max-w-sm mb-10"> Each architecture tells a story — of moments frozen in computational space, of precision beyond pixels. </p> <a href="#" class="inline-flex items-center gap-3 border border-black/20 hud-label text-aura-black px-6 py-3 rounded-full hover:bg-aura-black hover:text-white transition-all hover-t" style="font-size:11px"> View Details <i class="ri-arrow-right-line"></i> </a> <!-- Services list (Portfolio right-side list) --> <div class="mt-12 pt-8 border-t border-black/8"> <div class="hud-label text-black/30 mb-4" style="font-size:9px">Capabilities</div> <div class="space-y-0"> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Neural Architecture</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Synthetic Cognition</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Edge Deployment</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Biometric Interface</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Quantum Encryption</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> </div> </div> </div> </div> <!-- Stats row (Portfolio 5M+ / 3K+ / 24+ style) --> <div class="grid grid-cols-3 md:grid-cols-5 gap-6 mt-20 pt-10 border-t border-black/8 reveal"> <div> <div class="stat-n text-aura-black">1.4T</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">Parameters</div> </div> <div> <div class="stat-n text-aura-black">40+</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">Data Nodes</div> </div> <div> <div class="stat-n text-aura-black">0.02</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">ms Response</div> </div> <div class="hidden md:block"> <div class="stat-n text-aura-black">99.9</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">% Uptime</div> </div> <div class="hidden md:block"> <div class="stat-n text-aura-amber">24/7</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">Live Support</div> </div> </div> </div> </section> <!-- ═══════════════════════════ THE ARSENAL ═══════════════════════════ --> <!-- Inspired by: ZEUS-X + NFT Ninja + Apache Cordova (cards with floating HUD, pill badges) --> <section id="systems" class="relative py-24 md:py-36 bg-aura-black overflow-hidden"> <!-- Ambient glow --> <div class="absolute inset-0 pointer-events-none" style="background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,255,0,.02) 0%, transparent 65%)"></div> <div class="container mx-auto px-6 md:px-16"> <div class="flex flex-col md:flex-row justify-between items-end mb-14 reveal"> <div> <div class="section-label mb-3">— 002 / Systems</div> <h2 class="font-display font-extrabold tracking-tight" style="font-size:clamp(2.5rem,7vw,6rem)">THE ARSENAL</h2> </div> <a href="#" class="hud-label text-aura-neon border-b border-aura-neon/30 pb-1 hover:border-aura-neon transition-colors hover-t mt-4 md:mt-0" style="font-size:10px"> View All Assets → </a> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> <!-- ── CARD 1: NEXUS-V (ZEUS-X inspired) ── --> <div class="group glass rounded-2xl overflow-hidden hover:border-aura-neon/25 transition-all duration-500 reveal hover-t" style="transition-delay:0s"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-600 pointer-events-none" style="background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(200,255,0,.05) 0%,transparent 70%)"></div> <div class="p-6 md:p-8 relative"> <!-- Top --> <div class="flex justify-between items-start mb-6"> <div> <div class="section-label mb-1.5">Neural Compute</div> <h3 class="font-display font-bold" style="font-size:clamp(1.6rem,3vw,2.2rem)">NEXUS-V</h3> </div> <span class="glass-neon hud-label text-aura-neon px-3 py-1.5 rounded-full flex items-center gap-1.5" style="font-size:9px"> <span class="pulse-dot green" style="width:5px;height:5px"></span>Online </span> </div> <!-- Product image zone with ZEUS-X floating widgets --> <div class="relative h-52 md:h-64 bg-white/[.018] rounded-xl overflow-hidden mb-6 border border-white/5"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?q=80&w=2574&auto=format&fit=crop" class="w-full h-full object-cover opacity-40 group-hover:opacity-60 group-hover:scale-105 transition-all duration-700 mix-blend-luminosity" alt="NEXUS-V"> <!-- Grid overlay --> <div class="absolute inset-0 grid-overlay"></div> <!-- ZEUS-X style floating badges --> <div class="absolute top-3 left-3 glass hud-label p-2.5 rounded-lg float-widget delay-1" style="font-size:9px"> <div class="text-aura-text">Sustainability</div> <div class="text-aura-neon font-bold text-[11px]">Zero CO₂</div> </div> <div class="absolute bottom-3 right-3 glass hud-label p-2.5 rounded-lg float-widget delay-2" style="font-size:9px"> <div class="text-aura-text">Power Output</div> <div class="text-aura-neon font-bold text-lg leading-none">150 T/s</div> </div> <!-- Price tag (Capture style) --> <div class="absolute top-3 right-3 hud-label bg-aura-black/80 border border-white/10 px-2 py-1 rounded opacity-60 group-hover:opacity-100 transition-opacity" style="font-size:9px"> ## UNINTERRUPTED </div> </div> <!-- Stats bar --> <div class="grid grid-cols-3 gap-4 border-t border-white/5 pt-5"> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Capacity</div> <div class="font-display font-bold text-sm">10,000 TB</div> </div> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Nodes</div> <div class="font-display font-bold text-sm">40+</div> </div> <div class="flex justify-end items-end"> <button class="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center hover:bg-aura-neon hover:text-aura-black hover:border-transparent transition-all hover-t"> <i class="ri-arrow-right-up-line text-sm"></i> </button> </div> </div> </div> </div> <!-- ── CARD 2: ECHO-UNIT (NFT Ninja + Apache Cordova inspired) ── --> <div class="group glass rounded-2xl overflow-hidden hover:border-aura-amber/25 transition-all duration-500 reveal hover-t" style="transition-delay:.15s"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-600 pointer-events-none" style="background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(255,88,0,.06) 0%,transparent 70%)"></div> <div class="p-6 md:p-8 relative"> <div class="flex justify-between items-start mb-6"> <div> <div class="section-label mb-1.5">Autonomous Agent</div> <h3 class="font-display font-bold" style="font-size:clamp(1.6rem,3vw,2.2rem)">ECHO-UNIT</h3> </div> <span class="glass-amber hud-label text-aura-amber px-3 py-1.5 rounded-full flex items-center gap-1.5" style="font-size:9px"> <span class="pulse-dot amber" style="width:5px;height:5px"></span>Deployed </span> </div> <div class="relative h-52 md:h-64 bg-white/[.018] rounded-xl overflow-hidden mb-6 border border-white/5"> <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=2532&auto=format&fit=crop" class="w-full h-full object-cover opacity-40 group-hover:opacity-60 group-hover:scale-105 transition-all duration-700 mix-blend-luminosity" alt="ECHO-UNIT"> <div class="absolute inset-0 grid-overlay"></div> <!-- Apache Cordova style pill badges --> <div class="absolute bottom-3 left-3 flex gap-2 float-widget delay-1"> <span class="glass hud-label px-2.5 py-1 rounded-full text-white/60" style="font-size:9px">ML</span> <span class="glass hud-label px-2.5 py-1 rounded-full text-white/60" style="font-size:9px">NLP</span> <span class="glass-amber hud-label px-2.5 py-1 rounded-full text-aura-amber" style="font-size:9px">0.02ms</span> </div> <div class="absolute top-3 right-3 glass-amber hud-label p-2.5 rounded-lg float-widget delay-2" style="font-size:9px"> <div class="text-aura-text">Behavior</div> <div class="text-aura-amber font-bold text-[11px]">Adaptive AI</div> </div> </div> <div class="grid grid-cols-3 gap-4 border-t border-white/5 pt-5"> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Evolution</div> <div class="font-display font-bold text-sm">Self-Learn</div> </div> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Response</div> <div class="font-display font-bold text-sm">0.02ms</div> </div> <div class="flex justify-end items-end"> <button class="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center hover:bg-aura-amber hover:text-aura-black hover:border-transparent transition-all hover-t"> <i class="ri-arrow-right-up-line text-sm"></i> </button> </div> </div> </div> </div> </div> </div> </section> <!-- ═══════════════════════════ SAMURAI PROTOCOL ═══════════════════════════ --> <!-- Inspired by: SAMUR.AI — silhouette bg + glassmorphism dashboard overlay --> <section id="intel" class="relative overflow-hidden" style="min-height:85vh; display:flex; align-items:center;"> <!-- Cinematic background --> <div class="absolute inset-0 z-0"> <img src="https://images.unsplash.com/photo-1614854262318-831574f15f1f?q=80&w=2670&auto=format&fit=crop" class="w-full h-full object-cover opacity-25" alt=""> <div class="absolute inset-0" style="background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.65) 50%,rgba(5,5,5,.3) 100%)"></div> <div class="absolute inset-0" style="background:linear-gradient(180deg,#050505 0%,transparent 20%,transparent 80%,#050505 100%)"></div> </div> <div class="relative z-10 container mx-auto px-6 md:px-16 py-24 md:py-32 w-full"> <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center"> <!-- Left: Editorial text --> <div class="reveal-l"> <div class="section-label mb-4">— 003 / Intelligence</div> <h2 class="font-display font-extrabold leading-[.85] tracking-tight mb-6" style="font-size:clamp(3rem,7vw,6rem)"> SAMURAI<br><span class="text-aura-neon">PROTOCOL</span> </h2> <p class="font-sans text-aura-text text-sm leading-relaxed max-w-sm mb-8"> Precision. Discipline. Adaptation. Our defense algorithms operate with the calculated focus of a master tactician — cutting through noise, never wasting a single cycle. </p> <a href="#" class="inline-flex items-center gap-2 hud-label text-aura-neon border-b border-aura-neon/30 pb-1 hover:border-aura-neon transition-colors hover-t" style="font-size:10px"> Learn Protocol → </a> </div> <!-- Right: SAMUR.AI style glassmorphism dashboard --> <div class="reveal-r" style="transition-delay:.2s"> <div class="glass rounded-2xl p-5 md:p-7 glow-n"> <!-- Panel header --> <div class="flex items-center justify-between pb-4 mb-5 border-b border-white/5"> <div class="flex items-center gap-2"> <span class="pulse-dot green"></span> <span class="hud-label text-white" style="font-size:10px">AURA Intelligence Dashboard</span> </div> <span class="hud-label text-aura-text" style="font-size:9px">v4.2.1</span> </div> <!-- Metrics 2-col grid (SAMUR.AI Knowledge / Efficiency) --> <div class="grid grid-cols-2 gap-3 mb-3"> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1.5" style="font-size:9px">Knowledge</div> <div class="font-display font-bold text-xl text-aura-neon">97%</div> <div class="h-0.5 bg-white/5 rounded overflow-hidden mt-2"> <div class="h-full bg-aura-neon/70 rounded" style="width:97%"></div> </div> </div> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1.5" style="font-size:9px">Efficiency</div> <div class="font-display font-bold text-xl">84%</div> <div class="h-0.5 bg-white/5 rounded overflow-hidden mt-2"> <div class="h-full bg-white/40 rounded" style="width:84%"></div> </div> </div> </div> <!-- Tasks / Messages row --> <div class="grid grid-cols-2 gap-3 mb-3"> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1" style="font-size:9px">Tasks</div> <div class="font-display font-bold text-lg">2,847</div> <div class="hud-label text-aura-neon mt-0.5" style="font-size:9px">+12 active</div> </div> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1" style="font-size:9px">Messages</div> <div class="font-display font-bold text-lg">14.2M</div> <div class="hud-label text-aura-text mt-0.5" style="font-size:9px">processed today</div> </div> </div> <!-- Core identity block (SAMUR.AI big display text) --> <div class="glass-neon rounded-xl p-4 flex items-center justify-between"> <div> <div class="hud-label text-aura-text mb-1" style="font-size:9px">Core Identity</div> <div class="font-display font-bold text-xl text-aura-neon">AURA.ai</div> </div> <div class="text-right"> <div class="hud-label text-aura-text" style="font-size:9px">Training</div> <div class="font-display font-bold text-aura-neon">99%</div> </div> </div> </div> </div> </div> </div> </section> <!-- ═══════════════════════════ MARQUEE 2 (reversed, muted) ═══════════════════════════ --> <div class="py-3.5 overflow-hidden bg-aura-surface border-y border-white/[.04]"> <div class="mq-wrap"> <div class="mq-track mq-rev flex items-center hud-label text-aura-text" style="font-size:10px"> <span class="px-7">Adaptive Systems</span><span class="opacity-30 px-2">—</span> <span class="px-7">Real-time Processing</span><span class="opacity-30 px-2">—</span> <span class="px-7">Zero Latency</span><span class="opacity-30 px-2">—</span> <span class="px-7">Secure by Design</span><span class="opacity-30 px-2">—</span> <span class="px-7">Open Protocol</span><span class="opacity-30 px-2">—</span> <span class="px-7">Adaptive Systems</span><span class="opacity-30 px-2">—</span> <span class="px-7">Real-time Processing</span><span class="opacity-30 px-2">—</span> <span class="px-7">Zero Latency</span><span class="opacity-30 px-2">—</span> <span class="px-7">Secure by Design</span><span class="opacity-30 px-2">—</span> <span class="px-7">Open Protocol</span><span class="opacity-30 px-2">—</span> </div> </div> </div> <!-- ═══════════════════════════ FOOTER ═══════════════════════════ --> <footer id="contact" class="bg-aura-black border-t border-white/[.04] pt-20 pb-10"> <div class="container mx-auto px-6 md:px-16"> <div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-16 reveal"> <!-- Brand block --> <div class="md:col-span-5"> <div class="flex items-center gap-2 mb-5"> <span class="w-2 h-2 rounded-full bg-aura-neon"></span> <h2 class="font-display font-extrabold text-2xl">AURA.</h2> </div> <p class="font-sans text-aura-text text-sm leading-relaxed max-w-xs mb-8"> Most platforms look powerful but feel impossible to use. We build synthetics that actually understand the world they inhabit. </p> <div class="flex gap-3"> <a href="#" class="w-9 h-9 glass rounded-full flex items-center justify-center text-aura-text hover:text-aura-neon transition-all hover-t text-sm"> <i class="ri-twitter-x-line"></i> </a> <a href="#" class="w-9 h-9 glass rounded-full flex items-center justify-center text-aura-text hover:text-aura-neon transition-all hover-t text-sm"> <i class="ri-github-line"></i> </a> <a href="#" class="w-9 h-9 glass rounded-full flex items-center justify-center text-aura-text hover:text-aura-neon transition-all hover-t text-sm"> <i class="ri-linkedin-line"></i> </a> </div> </div> <!-- Terminals --> <div class="md:col-span-2"> <div class="hud-label text-aura-text mb-5" style="font-size:9px">Terminals</div> <ul class="space-y-3"> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-aura-neon transition-colors hover-t">Core Engine</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-aura-neon transition-colors hover-t">Neural Web</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Documentation</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">API Access</a></li> </ul> </div> <!-- Company --> <div class="md:col-span-2"> <div class="hud-label text-aura-text mb-5" style="font-size:9px">Company</div> <ul class="space-y-3"> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">About AURA</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Research</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Careers</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Press</a></li> </ul> </div> <!-- Email subscribe --> <div class="md:col-span-3"> <div class="hud-label text-aura-text mb-5" style="font-size:9px">Initialize Link</div> <div class="glass rounded-xl p-4 space-y-3"> <input type="email" placeholder="your@neural.net" class="w-full bg-transparent hud-label text-white placeholder-aura-text outline-none border-b border-white/10 pb-2 focus:border-aura-neon transition-colors hover-t" style="font-size:11px"> <button class="w-full bg-aura-neon text-aura-black hud-label font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity hover-t" style="font-size:10px"> Connect → </button> </div> </div> </div> <!-- Bottom bar --> <div class="flex flex-col md:flex-row justify-between items-center border-t border-white/[.04] pt-8 gap-4"> <div class="hud-label text-aura-text" style="font-size:9px">© 2026 AURA SYNTHETICS. ALL SYSTEMS NOMINAL.</div> <div class="flex items-center gap-5 hud-label text-aura-text" style="font-size:9px"> <a href="#" class="hover:text-white transition-colors hover-t">Privacy</a> <span class="text-white/10">·</span> <a href="#" class="hover:text-white transition-colors hover-t">Terms</a> <span class="text-white/10">·</span> <span class="flex items-center gap-1.5"> <span class="pulse-dot green" style="width:5px;height:5px"></span>All nodes online </span> </div> </div> </div> </footer> </main> <!-- ═══════════════════════════ SCRIPTS ═══════════════════════════ --> <script> // ─── CURSOR ─── const dot = document.getElementById('c-dot'); const ring = document.getElementById('c-ring'); let mx = 0, my = 0, rx = 0, ry = 0; document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; dot.style.cssText += `left:${mx}px;top:${my}px`; }); (function animRing() { rx += (mx - rx) * .11; ry += (my - ry) * .11; ring.style.cssText += `left:${rx}px;top:${ry}px`; requestAnimationFrame(animRing); })(); document.querySelectorAll('.hover-t, a, button, input').forEach(el => { el.addEventListener('mouseenter', () => document.body.classList.add('hovering')); el.addEventListener('mouseleave', () => document.body.classList.remove('hovering')); }); // ─── REVEAL ─── const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('on'); io.unobserve(e.target); } }); }, { threshold: .1, rootMargin: '0px 0px -60px 0px' }); document.querySelectorAll('.reveal, .reveal-l, .reveal-r').forEach(el => io.observe(el)); // ─── NAVBAR SCROLL ─── const nav = document.getElementById('nav'); window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 80)); // ─── PARALLAX HERO ─── const heroImg = document.getElementById('hero-img'); window.addEventListener('scroll', () => { if (heroImg) heroImg.style.transform = `translateY(${window.scrollY * .22}px)`; }); // ─── HERO CANVAS PARTICLES ─── const canvas = document.getElementById('hero-canvas'); const ctx = canvas.getContext('2d'); let W, H, pts = []; function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; } class Pt { constructor() { this.init(); } init() { this.x = Math.random() * W; this.y = Math.random() * H; this.r = Math.random() * 1.4 + .2; this.vx = (Math.random() - .5) * .18; this.vy = -(Math.random() * .28 + .04); this.life = 0; this.max = Math.random() * 220 + 80; this.isNeon = Math.random() > .72; } step() { this.x += this.vx; this.y += this.vy; this.life++; if (this.life > this.max || this.y < 0) this.init(); } draw() { const a = Math.sin((this.life / this.max) * Math.PI) * (this.isNeon ? .28 : .16); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.isNeon ? `rgba(200,255,0,${a})` : `rgba(255,255,255,${a})`; ctx.fill(); } } function initPts() { pts = Array.from({ length: 90 }, () => new Pt()); } (function loop() { ctx.clearRect(0, 0, W, H); pts.forEach(p => { p.step(); p.draw(); }); requestAnimationFrame(loop); })(); resize(); initPts(); window.addEventListener('resize', () => { resize(); initPts(); }); // ─── ANIMATE COUNTERS ─── function animateCounters() { document.querySelectorAll('.stat-n').forEach(el => { const text = el.textContent.trim(); const num = parseFloat(text.replace(/[^0-9.]/g, '')); const suffix = text.replace(/[0-9.]/g, ''); if (!num) return; let start = null; const dur = 1400; function frame(ts) { if (!start) start = ts; const p = Math.min((ts - start) / dur, 1); const val = num * (1 - Math.pow(1 - p, 3)); el.textContent = (Number.isInteger(num) ? Math.round(val) : val.toFixed(1)) + suffix; if (p < 1) requestAnimationFrame(frame); } requestAnimationFrame(frame); }); } const statsObs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { animateCounters(); statsObs.disconnect(); } }); }, { threshold: .5 }); const statsEl = document.querySelector('.stat-n'); if (statsEl) statsObs.observe(statsEl.closest('div')); </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>AURA // Advanced Synthetics</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { aura: { black: '#050505', white: '#F2F2F2', neon: '#C8FF00', amber: '#FF5800', gray: '#111111', surface:'#0E0E0E', text: '#6B6B6B', } }, fontFamily: { display: ['Syne','sans-serif'], sans: ['Space Grotesk','sans-serif'], mono: ['JetBrains Mono','monospace'], } } } } </script> <style> /* ─── BASE ─── */ *, *::before, *::after { box-sizing: border-box; cursor: none !important; } html { scroll-behavior: smooth; } body { background: #050505; color: #F2F2F2; font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; } ::selection { background: #C8FF00; color: #050505; } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: #C8FF00; border-radius: 2px; } /* ─── GRAIN ─── */ .grain { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ─── CUSTOM CURSOR ─── */ #c-dot { position: fixed; width: 5px; height: 5px; background: #C8FF00; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 9999; transition: width .15s, height .15s; } #c-ring { position: fixed; width: 34px; height: 34px; border: 1px solid rgba(200,255,0,.4); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 9998; transition: width .2s ease, height .2s ease, border-color .2s; } body.hovering #c-dot { width: 0; height: 0; } body.hovering #c-ring { width: 50px; height: 50px; border-color: #C8FF00; background: rgba(200,255,0,.04); } /* ─── GLASS VARIANTS ─── */ .glass { background: rgba(255,255,255,.03); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.07); } .glass-neon { background: rgba(200,255,0,.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(200,255,0,.14); } .glass-amber { background: rgba(255,88,0,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,88,0,.18); } .glass-white { background: rgba(255,255,255,.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); } /* ─── BRACKET CORNERS (Capture Camera style) ─── */ .bracket { position: relative; } .bracket::before { content: ''; position: absolute; top: -7px; left: -7px; width: 14px; height: 14px; border-top: 1.5px solid rgba(200,255,0,.55); border-left: 1.5px solid rgba(200,255,0,.55); transition: all .3s ease; } .bracket::after { content: ''; position: absolute; bottom: -7px; right: -7px; width: 14px; height: 14px; border-bottom: 1.5px solid rgba(200,255,0,.55); border-right: 1.5px solid rgba(200,255,0,.55); transition: all .3s ease; } .bracket:hover::before { top: -4px; left: -4px; border-color: #C8FF00; } .bracket:hover::after { bottom: -4px; right: -4px; border-color: #C8FF00; } .bracket-sm::before, .bracket-sm::after { width: 10px; height: 10px; top: -5px; left: -5px; } .bracket-sm::after { top: auto; left: auto; bottom: -5px; right: -5px; } /* ─── REVEAL ANIMATIONS ─── */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal-l { opacity: 0; transform: translateX(-36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal-r { opacity: 0; transform: translateX(36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal.on, .reveal-l.on, .reveal-r.on { opacity: 1; transform: translate(0,0); } /* ─── MARQUEE ─── */ .mq-wrap { overflow: hidden; display: flex; } .mq-track { display: inline-flex; white-space: nowrap; animation: mq 28s linear infinite; } .mq-rev { animation-direction: reverse; } @keyframes mq { to { transform: translateX(-50%); } } /* ─── SCANNING LINE (HUD) ─── */ .scan-line { height: 1px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; } .scan-line::after { content: ''; position: absolute; inset-y: 0; left: -60%; width: 60%; background: linear-gradient(90deg, transparent, #C8FF00, transparent); animation: scan 3.5s linear infinite; } @keyframes scan { to { left: 150%; } } /* ─── PULSE DOT ─── */ .pulse-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .pulse-dot.green { background: #C8FF00; animation: pdot 2s ease infinite; } .pulse-dot.amber { background: #FF5800; animation: pdot 2s ease .5s infinite; } @keyframes pdot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } } /* ─── TYPOGRAPHY HELPERS ─── */ .text-stroke { -webkit-text-stroke: 1px rgba(242,242,242,.2); color: transparent; } .section-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #6B6B6B; } .hud-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; } /* ─── PRODUCT CARD GRID OVERLAY ─── */ .grid-overlay { background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); background-size: 28px 28px; opacity: .025; } /* ─── WHITE SECTION ─── */ .s-white { background: #F2F2F2; color: #050505; } /* ─── STAT NUMBER ─── */ .stat-n { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(2.2rem,5vw,4rem); line-height: 1; letter-spacing: -.03em; } /* ─── GLOW ─── */ .glow-n { box-shadow: 0 0 30px rgba(200,255,0,.08), 0 0 80px rgba(200,255,0,.03); } .glow-a { box-shadow: 0 0 30px rgba(255,88,0,.08), 0 0 80px rgba(255,88,0,.03); } /* ─── NAV SCROLL ─── */ #nav.scrolled { background: rgba(5,5,5,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.04); } /* ─── CARD FLOAT WIDGET ─── */ .float-widget { transform: translateY(8px); opacity: 0; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease; } .group:hover .float-widget { transform: translateY(0); opacity: 1; } .float-widget.delay-1 { transition-delay: .05s; } .float-widget.delay-2 { transition-delay: .12s; } </style> </head> <body> <div class="grain"></div> <div id="c-dot"></div> <div id="c-ring"></div> <!-- ═══════════════════════════ NAVBAR ═══════════════════════════ --> <nav id="nav" class="fixed top-0 w-full z-50 px-6 md:px-16 py-5 flex justify-between items-center transition-all duration-500"> <a href="#" class="font-display font-extrabold text-xl tracking-tight flex items-center gap-2 hover-t"> <span class="w-2 h-2 rounded-full bg-aura-neon"></span>AURA. </a> <div class="hidden md:flex gap-10 font-mono text-[10px] uppercase tracking-[.25em] text-aura-text"> <a href="#vision" class="hover:text-white transition-colors hover-t">Vision</a> <a href="#systems" class="hover:text-white transition-colors hover-t">Systems</a> <a href="#intel" class="hover:text-white transition-colors hover-t">Intel</a> <a href="#contact" class="hover:text-white transition-colors hover-t">Contact</a> </div> <a href="#" class="hidden md:flex items-center gap-2 font-mono text-[10px] uppercase tracking-widest border border-white/15 px-5 py-2.5 rounded-full hover:border-aura-neon hover:text-aura-neon transition-all hover-t"> <span class="pulse-dot green"></span>Access Terminal </a> <button class="md:hidden text-white hover-t"><i class="ri-menu-4-line text-lg"></i></button> </nav> <main> <!-- ═══════════════════════════ HERO ═══════════════════════════ --> <!-- Inspired by: ZEUS-X (floating HUD badges, atmospheric dark, massive product name) --> <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"> <canvas id="hero-canvas" class="absolute inset-0 z-[1] pointer-events-none w-full h-full"></canvas> <!-- Background layers --> <div class="absolute inset-0 z-0"> <img id="hero-img" src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2670&auto=format&fit=crop" class="w-full h-full object-cover opacity-[.12]" alt=""> <div class="absolute inset-0" style="background:linear-gradient(180deg,#050505 0%,rgba(5,5,5,.5) 40%,rgba(5,5,5,.5) 60%,#050505 100%)"></div> <div class="absolute inset-0" style="background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(200,255,0,.035) 0%,transparent 70%)"></div> </div> <!-- ── HUD WIDGETS LEFT (ZEUS-X style) ── --> <div class="absolute top-28 left-6 md:left-20 z-20 hidden lg:flex flex-col gap-3"> <div class="glass hud-label p-3.5 rounded-xl w-44 reveal-l" style="transition-delay:.3s"> <div class="flex items-center justify-between mb-2"> <span class="text-aura-text">SYS.STATUS</span> <span class="pulse-dot green"></span> </div> <div class="font-display font-bold text-sm text-white mb-2">ONLINE</div> <div class="scan-line rounded-full"></div> <div class="mt-2 text-aura-text text-[9px]">All nodes nominal</div> </div> <div class="glass hud-label p-3.5 rounded-xl w-44 reveal-l" style="transition-delay:.45s"> <div class="flex justify-between mb-1.5"> <span class="text-aura-text">NEURAL LOAD</span> <span class="text-aura-neon font-bold text-[11px]">87%</span> </div> <div class="h-0.5 bg-white/5 rounded overflow-hidden"> <div class="h-full bg-aura-neon rounded" style="width:87%"></div> </div> </div> </div> <!-- ── HUD WIDGETS RIGHT (ZEUS-X style) ── --> <div class="absolute top-28 right-6 md:right-20 z-20 hidden lg:flex flex-col gap-3 items-end"> <div class="glass-amber hud-label p-3.5 rounded-xl w-48 reveal-r" style="transition-delay:.35s"> <div class="text-aura-text mb-1">POWER OUTPUT</div> <div class="font-display font-bold text-2xl text-aura-amber">150 T/s</div> <div class="text-aura-text text-[9px] mt-1">Uninterrupted throughput</div> </div> <div class="glass hud-label p-3.5 rounded-xl w-48 reveal-r" style="transition-delay:.5s"> <div class="flex items-center gap-1.5 mb-1.5"> <i class="ri-leaf-line text-aura-neon text-xs"></i> <span class="text-aura-text">SUSTAINABILITY</span> </div> <div class="text-white font-bold text-[13px]">Zero CO₂</div> <div class="text-aura-text text-[9px] mt-0.5">Carbon-neutral ops</div> </div> </div> <!-- ── COORDINATE TAG (bottom-left) ── --> <div class="absolute bottom-24 left-6 md:left-20 z-10 hidden md:block reveal-l" style="transition-delay:.65s"> <div class="hud-label text-aura-text">LOC // 41.0082° N 28.9784° E</div> <div class="hud-label text-aura-text mt-0.5">NODE CLUSTER: ISTANBUL-01</div> </div> <!-- ── MAIN HEADING ── --> <div class="relative z-10 text-center px-4"> <div class="section-label text-aura-neon mb-6 reveal" style="font-size:9px"> ⬡ Advanced Synthetic Intelligence ⬡ </div> <h1 class="font-display font-extrabold leading-[.82] tracking-tight reveal" style="font-size:clamp(4rem,13vw,12rem); transition-delay:.1s"> NEURAL </h1> <h1 class="font-display font-extrabold leading-[.82] tracking-tight text-stroke reveal" style="font-size:clamp(3.4rem,11vw,10.5rem); transition-delay:.18s"> GENESIS </h1> <p class="mt-9 font-sans text-aura-text max-w-xs mx-auto text-sm leading-relaxed reveal" style="transition-delay:.28s"> Biological cognition meets machine precision. We build the minds that run tomorrow's infrastructure. </p> <div class="mt-10 flex items-center justify-center gap-4 reveal" style="transition-delay:.38s"> <a href="#systems" class="flex items-center gap-2 bg-aura-neon text-aura-black font-display font-bold text-sm px-7 py-3.5 rounded-full hover:opacity-90 transition-opacity hover-t"> Explore Systems <i class="ri-arrow-right-line"></i> </a> <a href="#vision" class="flex items-center gap-2 font-mono text-[11px] text-aura-text hover:text-white transition-colors hover-t"> <i class="ri-play-circle-line text-lg"></i>View Demo </a> </div> </div> <!-- Scroll indicator --> <div class="absolute bottom-9 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 reveal" style="transition-delay:.75s"> <span class="font-mono text-[9px] uppercase tracking-[.35em] text-aura-text">Scroll</span> <div class="w-px h-10 bg-gradient-to-b from-aura-neon/60 to-transparent"></div> </div> </section> <!-- ═══════════════════════════ MARQUEE 1 ═══════════════════════════ --> <!-- Inspired by: Capture Camera — repeating neon strip --> <div class="py-3.5 overflow-hidden" style="background:#C8FF00"> <div class="mq-wrap"> <div class="mq-track font-display font-extrabold text-aura-black uppercase tracking-wide" style="font-size:1.15rem"> <span class="px-8">Advanced Robotics</span><span class="opacity-30 px-2">×</span> <span class="px-8">Neural Networks</span><span class="opacity-30 px-2">×</span> <span class="px-8">Quantum Processing</span><span class="opacity-30 px-2">×</span> <span class="px-8">Cyber Security</span><span class="opacity-30 px-2">×</span> <span class="px-8">Bio Synthesis</span><span class="opacity-30 px-2">×</span> <span class="px-8">Advanced Robotics</span><span class="opacity-30 px-2">×</span> <span class="px-8">Neural Networks</span><span class="opacity-30 px-2">×</span> <span class="px-8">Quantum Processing</span><span class="opacity-30 px-2">×</span> <span class="px-8">Cyber Security</span><span class="opacity-30 px-2">×</span> <span class="px-8">Bio Synthesis</span><span class="opacity-30 px-2">×</span> </div> </div> </div> <!-- ═══════════════════════════ VISION / EDITORIAL ═══════════════════════════ --> <!-- Inspired by: Black Sand (small column text, cinematic photo, facts layout) --> <section id="vision" class="relative py-24 md:py-40 overflow-hidden"> <div class="container mx-auto px-6 md:px-16"> <!-- Section header row --> <div class="flex flex-col md:flex-row justify-between items-start mb-16 md:mb-28 gap-8"> <div class="reveal-l"> <div class="section-label mb-4">— 001 / Vision</div> <h2 class="font-display font-extrabold leading-[.88] tracking-tight" style="font-size:clamp(2.5rem,5.5vw,5rem)"> Dreams Are Made<br>Of <span class="text-aura-neon">Dark Matter</span> </h2> </div> <div class="md:max-w-[200px] reveal-r"> <div class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Active in regions where algorithmic mass exceeds human comprehension. </div> </div> </div> <!-- Black Sand editorial grid --> <div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-start"> <!-- Col 1: Small descriptive texts (Black Sand left column) --> <div class="md:col-span-3 space-y-10 md:pt-16 reveal-l" style="transition-delay:.1s"> <div> <div class="hud-label text-aura-neon mb-3" style="font-size:9px">01 / Foundation</div> <p class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Bridges the biological and the digital. Where intuition meets computation at scale. </p> </div> <div class="w-10 h-px bg-white/8"></div> <div> <div class="hud-label text-aura-text mb-3" style="font-size:9px">02 / Discovery</div> <p class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Found mainly in areas with active or past high-density algorithmic activity. </p> </div> <div class="w-10 h-px bg-white/8"></div> <div> <div class="hud-label text-aura-text mb-3" style="font-size:9px">03 / Adaptation</div> <p class="hud-label text-aura-text leading-relaxed" style="font-size:10px"> Self-modifying neural pathways running continuous edge-case refinement. </p> </div> </div> <!-- Col 2: Cinematic tall image (Black Sand center) --> <div class="md:col-span-5 reveal" style="transition-delay:.2s"> <div class="bracket relative"> <!-- Capture-style tag --> <div class="absolute top-4 right-4 z-10 hud-label bg-aura-black/80 border border-white/10 px-2.5 py-1.5 rounded text-white" style="font-size:9px"> ## 100% Adaptive </div> <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2600&auto=format&fit=crop" class="w-full aspect-[3/4] object-cover rounded-sm grayscale hover:grayscale-0 transition-all duration-700" alt="Neural Vision"> <!-- Bottom discovery label like Black Sand --> <div class="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-aura-black/90 to-transparent"> <div class="hud-label text-aura-neon mb-1" style="font-size:9px">DISCOVERY</div> <p class="hud-label text-white/70 leading-snug" style="font-size:10px"> Neural patterns are typically formed from recursive data compression, resulting in fragments of emergent cognition. </p> </div> </div> </div> <!-- Col 3: Quote + Facts (Black Sand right column) --> <div class="md:col-span-4 md:pt-16 space-y-8 reveal-r" style="transition-delay:.3s"> <!-- Pull quote --> <div class="border-l-2 border-aura-neon pl-5"> <p class="font-display font-bold leading-snug text-xl md:text-2xl"> "Intelligence is not the goal.<br><span class="text-aura-neon">Consciousness</span> is." </p> </div> <!-- Facts list (Black Sand "More Info" section) --> <div class="space-y-5 pt-2"> <div class="border-b border-white/5 pb-5"> <div class="hud-label text-aura-text mb-2" style="font-size:9px">More Info</div> <p class="font-sans text-sm text-aura-text leading-relaxed"> AURA's core weights span 1.4 trillion parameters across 24 specialised domains, each fine-tuned on real-world edge cases. </p> </div> <div class="border-b border-white/5 pb-5"> <div class="hud-label text-aura-text mb-2" style="font-size:9px">Architecture</div> <p class="font-sans text-sm text-aura-text leading-relaxed"> Distributed across 40+ sovereign data clusters. No single point of failure. No single point of control. </p> </div> <div> <div class="hud-label text-aura-text mb-2" style="font-size:9px">Companies with Research</div> <div class="flex flex-wrap gap-3"> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">IPSUM</span> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">LOCIO</span> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">COREX</span> <span class="glass hud-label px-3 py-1.5 rounded text-white/40" style="font-size:10px">NEMA</span> </div> </div> </div> </div> </div> </div> </section> <!-- ═══════════════════════════ WHITE EDITORIAL ═══════════════════════════ --> <!-- Inspired by: Capture Camera + Portfolio (white, product over type, services list, stats row) --> <section class="s-white relative py-24 md:py-40 overflow-hidden"> <!-- Giant bg typography (Portfolio + Capture style) --> <div class="absolute inset-0 flex items-center pointer-events-none overflow-hidden select-none"> <div class="font-display font-extrabold whitespace-nowrap leading-none text-black/[.04]" style="font-size:clamp(7rem,19vw,20rem); letter-spacing:-.04em; margin-left:-.5rem"> PURE MIND. </div> </div> <div class="container mx-auto px-6 md:px-16 relative z-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 items-center"> <!-- Portrait image (Portfolio style) --> <div class="relative reveal-l"> <div class="bracket relative" style="--bcolor:rgba(0,0,0,.2)"> <img src="https://images.unsplash.com/photo-1547954575-855750c57bd3?q=80&w=2487&auto=format&fit=crop" class="w-full aspect-[4/5] object-cover rounded-sm" alt="Synthetic Mind"> </div> <!-- Capture-style price/date tag --> <div class="absolute top-6 -right-3 md:-right-5 hud-label bg-white border border-black/10 px-3 py-2 rounded shadow-sm text-black" style="font-size:11px"> <span class="text-black/40">EST.</span><span class="font-bold ml-1">2024</span> </div> </div> <!-- Editorial text + services (Portfolio style) --> <div class="reveal-r"> <div class="section-label text-black/35 mb-6" style="color:#050505">[ABOUT THE SYSTEM]</div> <h2 class="font-display font-extrabold leading-[.85] tracking-tight mb-8 text-aura-black" style="font-size:clamp(2.5rem,5vw,4.5rem)"> CRAFTING<br>MINDS<br>THROUGH <span class="text-aura-amber">CODE</span> </h2> <p class="font-sans text-sm text-black/55 leading-relaxed max-w-sm mb-5"> We celebrate the golden era of cognitive engineering. Our purpose lies in preserving the depth of authentic intelligence while making it accessible for the next generation of builders. </p> <p class="font-sans text-sm text-black/40 leading-relaxed max-w-sm mb-10"> Each architecture tells a story — of moments frozen in computational space, of precision beyond pixels. </p> <a href="#" class="inline-flex items-center gap-3 border border-black/20 hud-label text-aura-black px-6 py-3 rounded-full hover:bg-aura-black hover:text-white transition-all hover-t" style="font-size:11px"> View Details <i class="ri-arrow-right-line"></i> </a> <!-- Services list (Portfolio right-side list) --> <div class="mt-12 pt-8 border-t border-black/8"> <div class="hud-label text-black/30 mb-4" style="font-size:9px">Capabilities</div> <div class="space-y-0"> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Neural Architecture</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Synthetic Cognition</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Edge Deployment</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 border-b border-black/7 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Biometric Interface</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> <div class="group flex justify-between items-center py-2.5 hover-t"> <span class="font-sans text-sm text-black/65 group-hover:text-aura-black transition-colors">Quantum Encryption</span> <i class="ri-arrow-right-up-line text-black/20 group-hover:text-aura-black transition-colors text-sm"></i> </div> </div> </div> </div> </div> <!-- Stats row (Portfolio 5M+ / 3K+ / 24+ style) --> <div class="grid grid-cols-3 md:grid-cols-5 gap-6 mt-20 pt-10 border-t border-black/8 reveal"> <div> <div class="stat-n text-aura-black">1.4T</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">Parameters</div> </div> <div> <div class="stat-n text-aura-black">40+</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">Data Nodes</div> </div> <div> <div class="stat-n text-aura-black">0.02</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">ms Response</div> </div> <div class="hidden md:block"> <div class="stat-n text-aura-black">99.9</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">% Uptime</div> </div> <div class="hidden md:block"> <div class="stat-n text-aura-amber">24/7</div> <div class="hud-label text-black/35 mt-1" style="font-size:9px">Live Support</div> </div> </div> </div> </section> <!-- ═══════════════════════════ THE ARSENAL ═══════════════════════════ --> <!-- Inspired by: ZEUS-X + NFT Ninja + Apache Cordova (cards with floating HUD, pill badges) --> <section id="systems" class="relative py-24 md:py-36 bg-aura-black overflow-hidden"> <!-- Ambient glow --> <div class="absolute inset-0 pointer-events-none" style="background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,255,0,.02) 0%, transparent 65%)"></div> <div class="container mx-auto px-6 md:px-16"> <div class="flex flex-col md:flex-row justify-between items-end mb-14 reveal"> <div> <div class="section-label mb-3">— 002 / Systems</div> <h2 class="font-display font-extrabold tracking-tight" style="font-size:clamp(2.5rem,7vw,6rem)">THE ARSENAL</h2> </div> <a href="#" class="hud-label text-aura-neon border-b border-aura-neon/30 pb-1 hover:border-aura-neon transition-colors hover-t mt-4 md:mt-0" style="font-size:10px"> View All Assets → </a> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> <!-- ── CARD 1: NEXUS-V (ZEUS-X inspired) ── --> <div class="group glass rounded-2xl overflow-hidden hover:border-aura-neon/25 transition-all duration-500 reveal hover-t" style="transition-delay:0s"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-600 pointer-events-none" style="background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(200,255,0,.05) 0%,transparent 70%)"></div> <div class="p-6 md:p-8 relative"> <!-- Top --> <div class="flex justify-between items-start mb-6"> <div> <div class="section-label mb-1.5">Neural Compute</div> <h3 class="font-display font-bold" style="font-size:clamp(1.6rem,3vw,2.2rem)">NEXUS-V</h3> </div> <span class="glass-neon hud-label text-aura-neon px-3 py-1.5 rounded-full flex items-center gap-1.5" style="font-size:9px"> <span class="pulse-dot green" style="width:5px;height:5px"></span>Online </span> </div> <!-- Product image zone with ZEUS-X floating widgets --> <div class="relative h-52 md:h-64 bg-white/[.018] rounded-xl overflow-hidden mb-6 border border-white/5"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?q=80&w=2574&auto=format&fit=crop" class="w-full h-full object-cover opacity-40 group-hover:opacity-60 group-hover:scale-105 transition-all duration-700 mix-blend-luminosity" alt="NEXUS-V"> <!-- Grid overlay --> <div class="absolute inset-0 grid-overlay"></div> <!-- ZEUS-X style floating badges --> <div class="absolute top-3 left-3 glass hud-label p-2.5 rounded-lg float-widget delay-1" style="font-size:9px"> <div class="text-aura-text">Sustainability</div> <div class="text-aura-neon font-bold text-[11px]">Zero CO₂</div> </div> <div class="absolute bottom-3 right-3 glass hud-label p-2.5 rounded-lg float-widget delay-2" style="font-size:9px"> <div class="text-aura-text">Power Output</div> <div class="text-aura-neon font-bold text-lg leading-none">150 T/s</div> </div> <!-- Price tag (Capture style) --> <div class="absolute top-3 right-3 hud-label bg-aura-black/80 border border-white/10 px-2 py-1 rounded opacity-60 group-hover:opacity-100 transition-opacity" style="font-size:9px"> ## UNINTERRUPTED </div> </div> <!-- Stats bar --> <div class="grid grid-cols-3 gap-4 border-t border-white/5 pt-5"> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Capacity</div> <div class="font-display font-bold text-sm">10,000 TB</div> </div> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Nodes</div> <div class="font-display font-bold text-sm">40+</div> </div> <div class="flex justify-end items-end"> <button class="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center hover:bg-aura-neon hover:text-aura-black hover:border-transparent transition-all hover-t"> <i class="ri-arrow-right-up-line text-sm"></i> </button> </div> </div> </div> </div> <!-- ── CARD 2: ECHO-UNIT (NFT Ninja + Apache Cordova inspired) ── --> <div class="group glass rounded-2xl overflow-hidden hover:border-aura-amber/25 transition-all duration-500 reveal hover-t" style="transition-delay:.15s"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-600 pointer-events-none" style="background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(255,88,0,.06) 0%,transparent 70%)"></div> <div class="p-6 md:p-8 relative"> <div class="flex justify-between items-start mb-6"> <div> <div class="section-label mb-1.5">Autonomous Agent</div> <h3 class="font-display font-bold" style="font-size:clamp(1.6rem,3vw,2.2rem)">ECHO-UNIT</h3> </div> <span class="glass-amber hud-label text-aura-amber px-3 py-1.5 rounded-full flex items-center gap-1.5" style="font-size:9px"> <span class="pulse-dot amber" style="width:5px;height:5px"></span>Deployed </span> </div> <div class="relative h-52 md:h-64 bg-white/[.018] rounded-xl overflow-hidden mb-6 border border-white/5"> <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=2532&auto=format&fit=crop" class="w-full h-full object-cover opacity-40 group-hover:opacity-60 group-hover:scale-105 transition-all duration-700 mix-blend-luminosity" alt="ECHO-UNIT"> <div class="absolute inset-0 grid-overlay"></div> <!-- Apache Cordova style pill badges --> <div class="absolute bottom-3 left-3 flex gap-2 float-widget delay-1"> <span class="glass hud-label px-2.5 py-1 rounded-full text-white/60" style="font-size:9px">ML</span> <span class="glass hud-label px-2.5 py-1 rounded-full text-white/60" style="font-size:9px">NLP</span> <span class="glass-amber hud-label px-2.5 py-1 rounded-full text-aura-amber" style="font-size:9px">0.02ms</span> </div> <div class="absolute top-3 right-3 glass-amber hud-label p-2.5 rounded-lg float-widget delay-2" style="font-size:9px"> <div class="text-aura-text">Behavior</div> <div class="text-aura-amber font-bold text-[11px]">Adaptive AI</div> </div> </div> <div class="grid grid-cols-3 gap-4 border-t border-white/5 pt-5"> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Evolution</div> <div class="font-display font-bold text-sm">Self-Learn</div> </div> <div> <div class="hud-label text-aura-text mb-1" style="font-size:8px">Response</div> <div class="font-display font-bold text-sm">0.02ms</div> </div> <div class="flex justify-end items-end"> <button class="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center hover:bg-aura-amber hover:text-aura-black hover:border-transparent transition-all hover-t"> <i class="ri-arrow-right-up-line text-sm"></i> </button> </div> </div> </div> </div> </div> </div> </section> <!-- ═══════════════════════════ SAMURAI PROTOCOL ═══════════════════════════ --> <!-- Inspired by: SAMUR.AI — silhouette bg + glassmorphism dashboard overlay --> <section id="intel" class="relative overflow-hidden" style="min-height:85vh; display:flex; align-items:center;"> <!-- Cinematic background --> <div class="absolute inset-0 z-0"> <img src="https://images.unsplash.com/photo-1614854262318-831574f15f1f?q=80&w=2670&auto=format&fit=crop" class="w-full h-full object-cover opacity-25" alt=""> <div class="absolute inset-0" style="background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.65) 50%,rgba(5,5,5,.3) 100%)"></div> <div class="absolute inset-0" style="background:linear-gradient(180deg,#050505 0%,transparent 20%,transparent 80%,#050505 100%)"></div> </div> <div class="relative z-10 container mx-auto px-6 md:px-16 py-24 md:py-32 w-full"> <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center"> <!-- Left: Editorial text --> <div class="reveal-l"> <div class="section-label mb-4">— 003 / Intelligence</div> <h2 class="font-display font-extrabold leading-[.85] tracking-tight mb-6" style="font-size:clamp(3rem,7vw,6rem)"> SAMURAI<br><span class="text-aura-neon">PROTOCOL</span> </h2> <p class="font-sans text-aura-text text-sm leading-relaxed max-w-sm mb-8"> Precision. Discipline. Adaptation. Our defense algorithms operate with the calculated focus of a master tactician — cutting through noise, never wasting a single cycle. </p> <a href="#" class="inline-flex items-center gap-2 hud-label text-aura-neon border-b border-aura-neon/30 pb-1 hover:border-aura-neon transition-colors hover-t" style="font-size:10px"> Learn Protocol → </a> </div> <!-- Right: SAMUR.AI style glassmorphism dashboard --> <div class="reveal-r" style="transition-delay:.2s"> <div class="glass rounded-2xl p-5 md:p-7 glow-n"> <!-- Panel header --> <div class="flex items-center justify-between pb-4 mb-5 border-b border-white/5"> <div class="flex items-center gap-2"> <span class="pulse-dot green"></span> <span class="hud-label text-white" style="font-size:10px">AURA Intelligence Dashboard</span> </div> <span class="hud-label text-aura-text" style="font-size:9px">v4.2.1</span> </div> <!-- Metrics 2-col grid (SAMUR.AI Knowledge / Efficiency) --> <div class="grid grid-cols-2 gap-3 mb-3"> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1.5" style="font-size:9px">Knowledge</div> <div class="font-display font-bold text-xl text-aura-neon">97%</div> <div class="h-0.5 bg-white/5 rounded overflow-hidden mt-2"> <div class="h-full bg-aura-neon/70 rounded" style="width:97%"></div> </div> </div> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1.5" style="font-size:9px">Efficiency</div> <div class="font-display font-bold text-xl">84%</div> <div class="h-0.5 bg-white/5 rounded overflow-hidden mt-2"> <div class="h-full bg-white/40 rounded" style="width:84%"></div> </div> </div> </div> <!-- Tasks / Messages row --> <div class="grid grid-cols-2 gap-3 mb-3"> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1" style="font-size:9px">Tasks</div> <div class="font-display font-bold text-lg">2,847</div> <div class="hud-label text-aura-neon mt-0.5" style="font-size:9px">+12 active</div> </div> <div class="glass rounded-xl p-3.5"> <div class="hud-label text-aura-text mb-1" style="font-size:9px">Messages</div> <div class="font-display font-bold text-lg">14.2M</div> <div class="hud-label text-aura-text mt-0.5" style="font-size:9px">processed today</div> </div> </div> <!-- Core identity block (SAMUR.AI big display text) --> <div class="glass-neon rounded-xl p-4 flex items-center justify-between"> <div> <div class="hud-label text-aura-text mb-1" style="font-size:9px">Core Identity</div> <div class="font-display font-bold text-xl text-aura-neon">AURA.ai</div> </div> <div class="text-right"> <div class="hud-label text-aura-text" style="font-size:9px">Training</div> <div class="font-display font-bold text-aura-neon">99%</div> </div> </div> </div> </div> </div> </div> </section> <!-- ═══════════════════════════ MARQUEE 2 (reversed, muted) ═══════════════════════════ --> <div class="py-3.5 overflow-hidden bg-aura-surface border-y border-white/[.04]"> <div class="mq-wrap"> <div class="mq-track mq-rev flex items-center hud-label text-aura-text" style="font-size:10px"> <span class="px-7">Adaptive Systems</span><span class="opacity-30 px-2">—</span> <span class="px-7">Real-time Processing</span><span class="opacity-30 px-2">—</span> <span class="px-7">Zero Latency</span><span class="opacity-30 px-2">—</span> <span class="px-7">Secure by Design</span><span class="opacity-30 px-2">—</span> <span class="px-7">Open Protocol</span><span class="opacity-30 px-2">—</span> <span class="px-7">Adaptive Systems</span><span class="opacity-30 px-2">—</span> <span class="px-7">Real-time Processing</span><span class="opacity-30 px-2">—</span> <span class="px-7">Zero Latency</span><span class="opacity-30 px-2">—</span> <span class="px-7">Secure by Design</span><span class="opacity-30 px-2">—</span> <span class="px-7">Open Protocol</span><span class="opacity-30 px-2">—</span> </div> </div> </div> <!-- ═══════════════════════════ FOOTER ═══════════════════════════ --> <footer id="contact" class="bg-aura-black border-t border-white/[.04] pt-20 pb-10"> <div class="container mx-auto px-6 md:px-16"> <div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-16 reveal"> <!-- Brand block --> <div class="md:col-span-5"> <div class="flex items-center gap-2 mb-5"> <span class="w-2 h-2 rounded-full bg-aura-neon"></span> <h2 class="font-display font-extrabold text-2xl">AURA.</h2> </div> <p class="font-sans text-aura-text text-sm leading-relaxed max-w-xs mb-8"> Most platforms look powerful but feel impossible to use. We build synthetics that actually understand the world they inhabit. </p> <div class="flex gap-3"> <a href="#" class="w-9 h-9 glass rounded-full flex items-center justify-center text-aura-text hover:text-aura-neon transition-all hover-t text-sm"> <i class="ri-twitter-x-line"></i> </a> <a href="#" class="w-9 h-9 glass rounded-full flex items-center justify-center text-aura-text hover:text-aura-neon transition-all hover-t text-sm"> <i class="ri-github-line"></i> </a> <a href="#" class="w-9 h-9 glass rounded-full flex items-center justify-center text-aura-text hover:text-aura-neon transition-all hover-t text-sm"> <i class="ri-linkedin-line"></i> </a> </div> </div> <!-- Terminals --> <div class="md:col-span-2"> <div class="hud-label text-aura-text mb-5" style="font-size:9px">Terminals</div> <ul class="space-y-3"> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-aura-neon transition-colors hover-t">Core Engine</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-aura-neon transition-colors hover-t">Neural Web</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Documentation</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">API Access</a></li> </ul> </div> <!-- Company --> <div class="md:col-span-2"> <div class="hud-label text-aura-text mb-5" style="font-size:9px">Company</div> <ul class="space-y-3"> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">About AURA</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Research</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Careers</a></li> <li><a href="#" class="font-sans text-sm text-white/50 hover:text-white transition-colors hover-t">Press</a></li> </ul> </div> <!-- Email subscribe --> <div class="md:col-span-3"> <div class="hud-label text-aura-text mb-5" style="font-size:9px">Initialize Link</div> <div class="glass rounded-xl p-4 space-y-3"> <input type="email" placeholder="your@neural.net" class="w-full bg-transparent hud-label text-white placeholder-aura-text outline-none border-b border-white/10 pb-2 focus:border-aura-neon transition-colors hover-t" style="font-size:11px"> <button class="w-full bg-aura-neon text-aura-black hud-label font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity hover-t" style="font-size:10px"> Connect → </button> </div> </div> </div> <!-- Bottom bar --> <div class="flex flex-col md:flex-row justify-between items-center border-t border-white/[.04] pt-8 gap-4"> <div class="hud-label text-aura-text" style="font-size:9px">© 2026 AURA SYNTHETICS. ALL SYSTEMS NOMINAL.</div> <div class="flex items-center gap-5 hud-label text-aura-text" style="font-size:9px"> <a href="#" class="hover:text-white transition-colors hover-t">Privacy</a> <span class="text-white/10">·</span> <a href="#" class="hover:text-white transition-colors hover-t">Terms</a> <span class="text-white/10">·</span> <span class="flex items-center gap-1.5"> <span class="pulse-dot green" style="width:5px;height:5px"></span>All nodes online </span> </div> </div> </div> </footer> </main> <!-- ═══════════════════════════ SCRIPTS ═══════════════════════════ --> <script> // ─── CURSOR ─── const dot = document.getElementById('c-dot'); const ring = document.getElementById('c-ring'); let mx = 0, my = 0, rx = 0, ry = 0; document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; dot.style.cssText += `left:${mx}px;top:${my}px`; }); (function animRing() { rx += (mx - rx) * .11; ry += (my - ry) * .11; ring.style.cssText += `left:${rx}px;top:${ry}px`; requestAnimationFrame(animRing); })(); document.querySelectorAll('.hover-t, a, button, input').forEach(el => { el.addEventListener('mouseenter', () => document.body.classList.add('hovering')); el.addEventListener('mouseleave', () => document.body.classList.remove('hovering')); }); // ─── REVEAL ─── const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('on'); io.unobserve(e.target); } }); }, { threshold: .1, rootMargin: '0px 0px -60px 0px' }); document.querySelectorAll('.reveal, .reveal-l, .reveal-r').forEach(el => io.observe(el)); // ─── NAVBAR SCROLL ─── const nav = document.getElementById('nav'); window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 80)); // ─── PARALLAX HERO ─── const heroImg = document.getElementById('hero-img'); window.addEventListener('scroll', () => { if (heroImg) heroImg.style.transform = `translateY(${window.scrollY * .22}px)`; }); // ─── HERO CANVAS PARTICLES ─── const canvas = document.getElementById('hero-canvas'); const ctx = canvas.getContext('2d'); let W, H, pts = []; function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; } class Pt { constructor() { this.init(); } init() { this.x = Math.random() * W; this.y = Math.random() * H; this.r = Math.random() * 1.4 + .2; this.vx = (Math.random() - .5) * .18; this.vy = -(Math.random() * .28 + .04); this.life = 0; this.max = Math.random() * 220 + 80; this.isNeon = Math.random() > .72; } step() { this.x += this.vx; this.y += this.vy; this.life++; if (this.life > this.max || this.y < 0) this.init(); } draw() { const a = Math.sin((this.life / this.max) * Math.PI) * (this.isNeon ? .28 : .16); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.isNeon ? `rgba(200,255,0,${a})` : `rgba(255,255,255,${a})`; ctx.fill(); } } function initPts() { pts = Array.from({ length: 90 }, () => new Pt()); } (function loop() { ctx.clearRect(0, 0, W, H); pts.forEach(p => { p.step(); p.draw(); }); requestAnimationFrame(loop); })(); resize(); initPts(); window.addEventListener('resize', () => { resize(); initPts(); }); // ─── ANIMATE COUNTERS ─── function animateCounters() { document.querySelectorAll('.stat-n').forEach(el => { const text = el.textContent.trim(); const num = parseFloat(text.replace(/[^0-9.]/g, '')); const suffix = text.replace(/[0-9.]/g, ''); if (!num) return; let start = null; const dur = 1400; function frame(ts) { if (!start) start = ts; const p = Math.min((ts - start) / dur, 1); const val = num * (1 - Math.pow(1 - p, 3)); el.textContent = (Number.isInteger(num) ? Math.round(val) : val.toFixed(1)) + suffix; if (p < 1) requestAnimationFrame(frame); } requestAnimationFrame(frame); }); } const statsObs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { animateCounters(); statsObs.disconnect(); } }); }, { threshold: .5 }); const statsEl = document.querySelector('.stat-n'); if (statsEl) statsObs.observe(statsEl.closest('div')); </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...