Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Somnia OS | Intent-Centric OS for the Metaverse</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| somnia: { | |
| primary: '#6C63FF', | |
| secondary: '#35C5CF', | |
| dark: '#121826', | |
| accent: '#FF7BAC', | |
| light: '#F8F9FF' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0A0F1D; | |
| color: #E2E8F0; | |
| overflow-x: hidden; | |
| } | |
| .space-font { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .glow { | |
| box-shadow: 0 0 30px rgba(108, 99, 255, 0.3); | |
| } | |
| .hero-gradient { | |
| background: radial-gradient(circle at 10% 20%, rgba(108, 99, 255, 0.15) 0%, rgba(53, 197, 207, 0.1) 50%, transparent 80%); | |
| } | |
| .gradient-border { | |
| border: 2px solid transparent; | |
| position: relative; | |
| border-radius: 12px; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 12px; | |
| border: 2px solid transparent; | |
| background: linear-gradient(45deg, #6C63FF, #35C5CF, #FF7BAC) border-box; | |
| -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| z-index: -1; | |
| } | |
| .cube { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background: linear-gradient(135deg, #6C63FF, #35C5CF); | |
| transform: rotate(45deg); | |
| box-shadow: 0 0 20px rgba(108, 99, 255, 0.5); | |
| z-index: 0; | |
| opacity: 0.7; | |
| } | |
| .hollow-text { | |
| -webkit-text-stroke: 1px rgba(108, 99, 255, 0.8); | |
| color: transparent; | |
| opacity: 0.2; | |
| } | |
| .module-card:hover { | |
| transform: translateY(-10px); | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-icon { | |
| width: 70px; | |
| height: 70px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 16px; | |
| background: rgba(108, 99, 255, 0.1); | |
| margin-bottom: 20px; | |
| } | |
| .gradient-badge { | |
| background: linear-gradient(90deg, #6C63FF, #35C5CF); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .roadmap-phase::after { | |
| content: ''; | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| background: linear-gradient(135deg, #6C63FF, #35C5CF); | |
| border-radius: 50%; | |
| right: 15px; | |
| top: 15px; | |
| z-index: 10; | |
| } | |
| .timeline::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 4px; | |
| background: linear-gradient(180deg, #6C63FF, #35C5CF, #FF7BAC); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 0; | |
| } | |
| @media (max-width: 768px) { | |
| .timeline::after { | |
| left: 1.5rem; | |
| } | |
| } | |
| .animated-background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: linear-gradient(320deg, #0A0F1D 25%, #1A2035 50%, #0A0F1D 75%); | |
| background-size: 200% 200%; | |
| animation: gradientShift 25s ease infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .pulse { | |
| animation: pulse-animation 3s infinite; | |
| } | |
| @keyframes pulse-animation { | |
| 0% { transform: scale(1); opacity: 0.7; } | |
| 50% { transform: scale(1.03); opacity: 1; } | |
| 100% { transform: scale(1); opacity: 0.7; } | |
| } | |
| .hero-box { | |
| perspective: 1000px; | |
| } | |
| .hero-box-inner { | |
| transform-style: preserve-3d; | |
| transform: rotateX(5deg) rotateY(-5deg); | |
| animation: float 8s ease-in-out infinite; | |
| background: rgba(25, 30, 45, 0.6); | |
| border-radius: 24px; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); | |
| border: 1px solid rgba(108, 99, 255, 0.3); | |
| } | |
| @keyframes float { | |
| 0% { transform: rotateX(5deg) rotateY(-5deg) translateY(0px); } | |
| 50% { transform: rotateX(10deg) rotateY(5deg) translateY(-20px); } | |
| 100% { transform: rotateX(5deg) rotateY(-5deg) translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="animated-background"></div> | |
| <!-- Floating cubes decoration --> | |
| <div class="cube top-20 left-1/4"></div> | |
| <div class="cube top-1/3 right-20 w-16 h-16"></div> | |
| <div class="cube bottom-1/4 left-10 w-12 h-12"></div> | |
| <div class="cube bottom-40 right-1/3 w-10 h-10"></div> | |
| <div class="cube top-60 right-1/2 w-8 h-8"></div> | |
| <!-- Header --> | |
| <header class="relative z-10"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-somnia-primary to-somnia-secondary rounded-xl flex items-center justify-center"> | |
| <span class="text-2xl font-bold">S</span> | |
| </div> | |
| <span class="text-2xl font-bold space-font">SOMNIA OS</span> | |
| </div> | |
| <nav class="hidden lg:flex space-x-8"> | |
| <a href="#" class="text-somnia-secondary font-medium hover:text-somnia-primary transition">Vision</a> | |
| <a href="#" class="text-gray-400 font-medium hover:text-white transition">Architecture</a> | |
| <a href="#" class="text-gray-400 font-medium hover:text-white transition">Modules</a> | |
| <a href="#" class="text-gray-400 font-medium hover:text-white transition">Roadmap</a> | |
| <a href="#" class="text-gray-400 font-medium hover:text-white transition">Ecosystem</a> | |
| </nav> | |
| <button class="bg-gradient-to-r from-somnia-primary to-somnia-secondary hover:opacity-90 transition text-white px-6 py-2 rounded-full font-medium"> | |
| Developer Preview | |
| </button> | |
| <button class="lg:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden pt-16 pb-32 hero-gradient"> | |
| <div class="container mx-auto px-4 mt-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col lg:flex-row items-center justify-between"> | |
| <div class="lg:w-1/2 mb-16 lg:mb-0 text-center lg:text-left"> | |
| <div class="mb-6"> | |
| <div class="bg-gray-800 inline-block px-4 py-1 rounded-full"> | |
| <span class="font-bold gradient-badge">V1 LAUNCHING Q3 2024</span> | |
| </div> | |
| </div> | |
| <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold mb-6 space-font leading-tight"> | |
| The <span class="text-somnia-primary">Intent-Centric</span> Operating System | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-xl"> | |
| Somnia OS is the foundational economic layer translating complex user goals into one-click, optimized transactions. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-gradient-to-r from-somnia-primary to-somnia-secondary hover:from-somnia-secondary hover:to-somnia-primary text-white px-8 py-4 rounded-lg text-lg font-bold transition-all duration-300 transform hover:scale-105"> | |
| Get Early Access | |
| </button> | |
| <button class="border border-somnia-primary bg-gray-900/50 px-8 py-4 rounded-lg text-lg font-medium hover:bg-somnia-primary/10 transition"> | |
| Read Whitepaper | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 flex justify-center hero-box"> | |
| <div class="hero-box-inner w-full max-w-md gradient-border p-1 glow"> | |
| <div class="bg-gray-900/80 backdrop-blur-md rounded-2xl p-8"> | |
| <div class="mb-6"> | |
| <div class="flex space-x-2 mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">User Intent Console</h3> | |
| <p class="text-gray-400 mb-4">Define your economic goal in one sentence</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="relative"> | |
| <div class="absolute left-3 top-3 text-somnia-secondary"> | |
| <i class="fas fa-bullseye"></i> | |
| </div> | |
| <input type="text" placeholder="I want to invest $1000 in Somnia blue chips" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg pl-10 pr-4 py-3 focus:outline-none focus:border-somnia-primary"> | |
| </div> | |
| <button class="w-full bg-somnia-primary text-white py-3 rounded-lg font-bold flex items-center justify-center gap-2"> | |
| <i class="fas fa-bolt"></i> Optimize & Execute | |
| </button> | |
| <div class="bg-gray-800/50 p-4 rounded-lg text-sm"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Transaction Complexity:</span> | |
| <span class="font-bold">7 steps → 1 click</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Optimization:</span> | |
| <span class="text-green-400 font-bold">26.7% better yield</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Security:</span> | |
| <span class="text-somnia-secondary font-bold">Atomic Guarantee</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating text decoration --> | |
| <div class="absolute -bottom-20 -left-20 transform rotate-12 text-9xl font-bold space-font hollow-text"> | |
| INTENT | |
| </div> | |
| <div class="absolute -top-10 -right-20 text-9xl font-bold space-font hollow-text"> | |
| ECONOMY | |
| </div> | |
| </section> | |
| <!-- Vision Section --> | |
| <section class="py-24 relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 space-font">The Vision for a Seamless Virtual Society</h2> | |
| <p class="text-xl text-gray-400">Somnia OS is not just an application—it's the foundational economic layer for the entire metaverse ecosystem.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <div class="gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gray-900/60 h-full rounded-2xl p-8"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-layer-group text-3xl text-somnia-secondary"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Economic Infrastructure</h3> | |
| <p class="text-gray-400">The roads and bridges that enable a thriving virtual economy where users truly own their digital assets.</p> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gray-900/60 h-full rounded-2xl p-8"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-gem text-3xl text-somnia-accent"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Eliminate Complexity Tax</h3> | |
| <p class="text-gray-400">By replacing manual multi-step processes with single-click execution of complex intents.</p> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gray-900/60 h-full rounded-2xl p-8"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-infinity text-3xl text-somnia-primary"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Infinite Composability</h3> | |
| <p class="text-gray-400">A universal layer that connects all protocols and dApps in the Somnia ecosystem seamlessly.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Architecture Section --> | |
| <section class="py-24 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| <h3 class="text-[20rem] font-bold absolute space-font hollow-text -mt-20 opacity-5">ARCHITECTURE</h3> | |
| </div> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 space-font">Intent-Centric Architecture</h2> | |
| <p class="text-xl text-gray-400">The sophisticated multi-layered design that powers Somnia OS</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto timeline relative"> | |
| <!-- Layer 1 --> | |
| <div class="relative mb-16 w-full lg:w-1/2 lg:mr-auto lg:pr-32 lg:pl-0 pl-16"> | |
| <div class="gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gray-900/80 backdrop-blur-md rounded-2xl p-8"> | |
| <div class="mb-2 font-semibold text-somnia-secondary">Layer 1</div> | |
| <h3 class="text-3xl font-bold mb-3 space-font">Intent Abstraction Layer</h3> | |
| <p class="text-gray-400 mb-4">The user-facing "shell" that captures and standardizes user intents</p> | |
| <div class="bg-gray-800/30 p-4 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-somnia-dark w-10 h-10 rounded-md flex items-center justify-center mr-3"> | |
| <i class="fas fa-cubes text-somnia-secondary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Modular Intents (V1)</h4> | |
| <p class="text-sm text-gray-400">Pre-built, audited intent modules for common economic goals</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-somnia-dark w-10 h-10 rounded-md flex items-center justify-center mr-3"> | |
| <i class="fas fa-language text-somnia-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Generalized Intents (V2)</h4> | |
| <p class="text-sm text-gray-400">Natural language processing for novel, complex intents</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layer 2 --> | |
| <div class="relative mb-16 w-full lg:w-1/2 lg:ml-auto lg:pl-32 lg:pr-0 pl-16"> | |
| <div class="gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gray-900/80 backdrop-blur-md rounded-2xl p-8"> | |
| <div class="mb-2 font-semibold text-somnia-accent">Layer 2</div> | |
| <h3 class="text-3xl font-bold mb-3 space-font">Execution Engine</h3> | |
| <p class="text-gray-400 mb-4">The "kernel" that processes and executes intents securely</p> | |
| <div class="bg-gray-800/30 p-4 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-somnia-dark w-10 h-10 rounded-md flex items-center justify-center mr-3"> | |
| <i class="fas fa-sitemap text-somnia-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Pathfinding Algorithm</h4> | |
| <p class="text-sm text-gray-400">Optimizes transaction paths across all Somnia protocols</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-somnia-dark w-10 h-10 rounded-md flex items-center justify-center mr-3"> | |
| <i class="fas fa-shield-alt text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Atomic Execution</h4> | |
| <p class="text-sm text-gray-400">All or nothing transaction guarantee</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-somnia-dark w-10 h-10 rounded-md flex items-center justify-center mr-3"> | |
| <i class="fas fa-check-double text-somnia-secondary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">State Verification</h4> | |
| <p class="text-sm text-gray-400">End-state cryptographically enforced</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layer 3 --> | |
| <div class="relative w-full lg:w-1/2 lg:mr-auto lg:pr-32 lg:pl-0 pl-16"> | |
| <div class="gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gray-900/80 backdrop-blur-md rounded-2xl p-8"> | |
| <div class="mb-2 font-semibold text-somnia-primary">Layer 3</div> | |
| <h3 class="text-3xl font-bold mb-3 space-font">Integration SDK</h3> | |
| <p class="text-gray-400 mb-4">The "API" that empowers the entire developer ecosystem</p> | |
| <div class="bg-gray-800/30 p-4 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-somnia-dark w-10 h-10 rounded-md flex items-center justify-center mr-3"> | |
| <i class="fas fa-plug text-somnia-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Universal Composability</h4> | |
| <p class="text-sm text-gray-400">Seamless integration with any Somnia protocol</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-somnia-dark w-10 h-10 rounded-md flex items-center justify-center mr-3"> | |
| <i class="fas fa-bolt text-yellow-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">One-Click Solutions</h4> | |
| <p class="text-sm text-gray-400">Transform complex processes into single-click actions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modules Section --> | |
| <section class="py-24 relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 space-font">V1 Launch Modules</h2> | |
| <p class="text-xl text-gray-400">Pre-built, rigorously audited modules for the most common economic intents</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Module 1 --> | |
| <div class="module-card gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gradient-to-b from-gray-900/80 to-somnia-dark/80 h-full rounded-2xl p-8 relative overflow-hidden"> | |
| <div class="absolute top-4 right-4 text-xs bg-somnia-primary py-1 px-3 rounded-full">Onboarding</div> | |
| <h3 class="text-3xl font-bold mb-4 space-font">Somnia Starter Pack</h3> | |
| <p class="text-gray-400 mb-6">The ultimate onboarding experience: one-click diversification into the heart of the Somnia ecosystem</p> | |
| <div class="mb-6"> | |
| <div class="bg-gray-800/50 rounded-lg p-4 mb-3"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Intended Goal:</span> | |
| <span class="font-medium">"I want to invest $1000 in the Somnia ecosystem"</span> | |
| </div> | |
| </div> | |
| <div class="text-sm flex flex-wrap gap-2"> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Diversification</span> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Autostaking</span> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Blue-chip assets</span> | |
| </div> | |
| </div> | |
| <div class="bg-somnia-primary/10 border border-somnia-primary rounded-lg p-3 text-center text-somnia-primary font-bold"> | |
| Automated portfolio rebalancing | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 2 --> | |
| <div class="module-card gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gradient-to-b from-gray-900/80 to-somnia-dark/80 h-full rounded-2xl p-8 relative overflow-hidden"> | |
| <div class="absolute top-4 right-4 text-xs bg-somnia-secondary py-1 px-3 rounded-full">DeFi</div> | |
| <h3 class="text-3xl font-bold mb-4 space-font">High-Yield Seeker</h3> | |
| <p class="text-gray-400 mb-6">Automatically finds and deposits assets into the optimal yield farms</p> | |
| <div class="mb-6"> | |
| <div class="bg-gray-800/50 rounded-lg p-4 mb-3"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Intended Goal:</span> | |
| <span class="font-medium">"Maximize yield with my digital assets"</span> | |
| </div> | |
| </div> | |
| <div class="text-sm flex flex-wrap gap-2"> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Yield optimization</span> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Risk-adjusted returns</span> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Dynamic rebalancing</span> | |
| </div> | |
| </div> | |
| <div class="bg-somnia-secondary/10 border border-somnia-secondary rounded-lg p-3 text-center text-somnia-secondary font-bold"> | |
| Real-time monitoring across 50+ protocols | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 3 --> | |
| <div class="module-card gradient-border p-1 rounded-2xl"> | |
| <div class="bg-gradient-to-b from-gray-900/80 to-somnia-dark/80 h-full rounded-2xl p-8 relative overflow-hidden"> | |
| <div class="absolute top-4 right-4 text-xs bg-somnia-accent py-1 px-3 rounded-full">Creator</div> | |
| <h3 class="text-3xl font-bold mb-4 space-font">Creator Patron</h3> | |
| <p class="text-gray-400 mb-6">Support your favorite creators while building a valuable collection</p> | |
| <div class="mb-6"> | |
| <div class="bg-gray-800/50 rounded-lg p-4 mb-3"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Intended Goal:</span> | |
| <span class="font-medium">"Invest in emerging Somnia creators"</span> | |
| </div> | |
| </div> | |
| <div class="text-sm flex flex-wrap gap-2"> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">NFT baskets</span> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Emerging artists</span> | |
| <span class="bg-gray-800 py-1 px-3 rounded-full">Royalty sharing</span> | |
| </div> | |
| </div> | |
| <div class="bg-somnia-accent/10 border border-somnia-accent rounded-lg p-3 text-center text-somnia-accent font-bold"> | |
| Curation algorithms identifying trending artists | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Roadmap Section --> | |
| <section class="py-24"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 space-font">Development Roadmap</h2> | |
| <p class="text-xl text-gray-400">V1: Concrete deliverables focused on immediate ecosystem value</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto"> | |
| <!-- Phase 1 --> | |
| <div class="roadmap-phase bg-gradient-to-br from-gray-900/70 to-somnia-dark/70 rounded-3xl p-8 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 h-20 w-20 bg-somnia-primary/10 transform rotate-45 translate-x-10 -translate-y-10"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-somnia-primary/20 flex items-center justify-center mr-4"> | |
| <span class="text-2xl font-bold text-somnia-primary">1</span> | |
| </div> | |
| <h3 class="text-2xl font-bold">Phase 1: Core Infrastructure</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6">Months 1-3: Building the foundation</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-green-400/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-check text-green-400 text-xs"></i> | |
| </div> | |
| <span>Finalize and audit core Execution Engine contracts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-green-400/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-check text-green-400 text-xs"></i> | |
| </div> | |
| <span>Develop and test initial Intent Modules</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-400/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-code text-yellow-400 text-xs"></i> | |
| </div> | |
| <span>Create pathfinding algorithms</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-400/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-code text-yellow-400 text-xs"></i> | |
| </div> | |
| <span>Implement atomic execution guarantees</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Phase 2 --> | |
| <div class="roadmap-phase bg-gradient-to-br from-gray-900/70 to-somnia-dark/70 rounded-3xl p-8 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 h-20 w-20 bg-somnia-secondary/10 transform rotate-45 translate-x-10 -translate-y-10"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-somnia-secondary/20 flex items-center justify-center mr-4"> | |
| <span class="text-2xl font-bold text-somnia-secondary">2</span> | |
| </div> | |
| <h3 class="text-2xl font-bold">Phase 2: Ecosystem Launch</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6">Month 4: Bringing Somnia OS to the world</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-600/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-rocket text-gray-400 text-xs"></i> | |
| </div> | |
| <span>Launch the Somnia OS dApp interface</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-600/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-rocket text-gray-400 text-xs"></i> | |
| </div> | |
| <span>Release Integration SDK to partners</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-600/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-rocket text-gray-400 text-xs"></i> | |
| </div> | |
| <span>Publish developer documentation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-600/20 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-rocket text-gray-400 text-xs"></i> | |
| </div> | |
| <span>Onboard initial developer workshops</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-24 relative"> | |
| <div class="max-w-5xl mx-auto bg-gradient-to-r from-somnia-primary/10 to-somnia-secondary/10 rounded-3xl p-1 glow"> | |
| <div class="bg-gray-900/80 rounded-3xl p-12 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 space-font">Build the Foundation of the Metaverse Economy</h2> | |
| <p class="text-xl max-w-2xl mx-auto text-gray-400 mb-8">Join our developer program, contribute to the core protocol, or build your application on the Intent-Centric OS.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-gradient-to-r from-somnia-primary to-somnia-secondary hover:from-somnia-secondary hover:to-somnia-primary text-white px-8 py-4 rounded-full text-lg font-bold transition-all duration-300 transform hover:scale-105"> | |
| <i class="fas fa-code mr-2"></i> Developer Portal | |
| </button> | |
| <button class="border border-white/30 bg-transparent hover:bg-white/10 px-8 py-4 rounded-full text-lg font-medium transition"> | |
| Explore Documentation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="pt-20 pb-10 border-t border-gray-800/30 relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-16"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-somnia-primary to-somnia-secondary rounded-xl flex items-center justify-center"> | |
| <span class="text-2xl font-bold">S</span> | |
| </div> | |
| <span class="text-2xl font-bold space-font">SOMNIA OS</span> | |
| </div> | |
| <p class="text-gray-500 max-w-xs">The Intent-Centric Operating System for the Virtual Economy.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6 space-font">Protocol</h4> | |
| <ul class="space-y-4"> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Whitepaper</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">GitHub</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Audits</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Governance</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6 space-font">Developers</h4> | |
| <ul class="space-y-4"> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">SDK</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">API Reference</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6 space-font">Community</h4> | |
| <ul class="space-y-4"> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Twitter</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Discord</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Telegram</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-white transition">Forum</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-10 border-t border-gray-800/30 text-center"> | |
| <p class="text-gray-500">© 2024 Somnia OS. The operating system for the open metaverse.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for visual elements | |
| document.querySelectorAll('.cube').forEach(cube => { | |
| // Randomize starting position and size a bit more | |
| const randomTop = Math.random() * 100; | |
| const randomLeft = Math.random() * 100; | |
| const randomSize = 10 + Math.random() * 40; | |
| cube.style.top = `${randomTop}%`; | |
| cube.style.left = `${randomLeft}%`; | |
| cube.style.width = `${randomSize}px`; | |
| cube.style.height = `${randomSize}px`; | |
| // Add animation for floating cubes | |
| setTimeout(() => { | |
| cube.style.transition = 'transform 5s ease-in-out'; | |
| setInterval(() => { | |
| const newX = (Math.random() * 20) - 10; | |
| const newY = (Math.random() * 20) - 10; | |
| const rotate = Math.random() * 360; | |
| cube.style.transform = `translate(${newX}px, ${newY}px) rotate(${rotate}deg)`; | |
| }, 5000); | |
| }, Math.random() * 1000); | |
| }); | |
| // Add parallax effect to hero section | |
| window.addEventListener('mousemove', function(e) { | |
| const heroBox = document.querySelector('.hero-box-inner'); | |
| if (heroBox) { | |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 25; | |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 25; | |
| heroBox.style.transform = `rotateX(${yAxis}deg) rotateY(${xAxis}deg)`; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=notyourliability/proj" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |