| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cosmic Void Navigation</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| 950: '#082f49', |
| }, |
| secondary: { |
| 50: '#fdf4ff', |
| 100: '#fae8ff', |
| 200: '#f5d0fe', |
| 300: '#f0abfc', |
| 400: '#e879f9', |
| 500: '#d946ef', |
| 600: '#c026d3', |
| 700: '#a21caf', |
| 800: '#86198f', |
| 900: '#701a75', |
| 950: '#4a044e', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-950 text-gray-100"> |
| <cosmic-navbar></cosmic-navbar> |
| |
| <main class="pt-20"> |
| |
| <section class="relative min-h-[80vh] flex items-center justify-center overflow-hidden"> |
| |
| <div class="absolute inset-0 overflow-hidden"> |
| <div class="absolute -inset-[100%] animate-[spin_60s_linear_infinite] opacity-20"> |
| <div class="absolute top-1/2 left-1/2 w-[200%] h-[200%] -translate-x-1/2 -translate-y-1/2 bg-[conic-gradient(from_0deg,transparent_0_340deg,primary-500_360deg)]"></div> |
| </div> |
| <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(14,165,233,0.3),transparent)]"></div> |
| </div> |
| |
| <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-500/10 border border-primary-500/20 mb-6"> |
| <span class="w-2 h-2 rounded-full bg-primary-400 animate-pulse"></span> |
| <span class="text-sm text-primary-300">Now in Dark Mode</span> |
| </div> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary-300 via-secondary-300 to-primary-400 bg-clip-text text-transparent"> |
| Navigate the Void |
| </h1> |
| <p class="text-xl text-gray-400 mb-8 max-w-2xl mx-auto"> |
| A cosmic navigation experience with fluid animations, |
| ethereal gradients, and infinite possibilities. |
| </p> |
| <div class="flex flex-wrap gap-4 justify-center"> |
| <a href="#" class="group relative px-8 py-4 bg-primary-600 hover:bg-primary-500 rounded-xl font-semibold transition-all duration-300 overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-r from-secondary-500 to-primary-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
| <span class="relative flex items-center gap-2"> |
| Get Started |
| <i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i> |
| </span> |
| </a> |
| <a href="#" class="px-8 py-4 bg-gray-900/50 hover:bg-gray-900 border border-gray-700 hover:border-primary-500/50 rounded-xl font-semibold transition-all duration-300 backdrop-blur-sm"> |
| Learn More |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-24 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="group p-8 rounded-2xl bg-gray-900/50 border border-gray-800 hover:border-primary-500/30 transition-all duration-500 hover:-translate-y-2"> |
| <div class="w-14 h-14 rounded-xl bg-primary-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> |
| <i data-feather="zap" class="w-7 h-7 text-primary-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-100">Lightning Fast</h3> |
| <p class="text-gray-400">Optimized performance with zero-latency interactions and smooth 60fps animations.</p> |
| </div> |
| <div class="group p-8 rounded-2xl bg-gray-900/50 border border-gray-800 hover:border-secondary-500/30 transition-all duration-500 hover:-translate-y-2"> |
| <div class="w-14 h-14 rounded-xl bg-secondary-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> |
| <i data-feather="moon" class="w-7 h-7 text-secondary-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-100">Dark First</h3> |
| <p class="text-gray-400">Designed from the ground up for dark mode with perfect contrast ratios.</p> |
| </div> |
| <div class="group p-8 rounded-2xl bg-gray-900/50 border border-gray-800 hover:border-primary-500/30 transition-all duration-500 hover:-translate-y-2"> |
| <div class="w-14 h-14 rounded-xl bg-primary-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> |
| <i data-feather="layers" class="w-7 h-7 text-primary-400"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-100">Modular Design</h3> |
| <p class="text-gray-400">Built with web components for maximum reusability and maintainability.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
