Build a landing page with a retro-futuristic, people-focused aesthetic inspired by Googie architecture (The Jetsons, 50s/60s space age) and the architectural grandeur of The Talos Principle II's New Jerusalem (classical proportions with futuristic tech elements). Think: geometric patterns, dimensional shapes with depth, glowing accents, warm gradients, and optimistic space-age design—not flat, rounded rectangles.
f59dd05
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Cortex - A Collective Journey</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> | |
| </head> | |
| <body class="bg-gradient-to-br from-stone-50 via-orange-50 to-yellow-50 min-h-screen overflow-x-hidden"> | |
| <div class="floating-orb orb-1"></div> | |
| <div class="floating-orb orb-2"></div> | |
| <div class="floating-orb orb-3"></div> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center px-4 py-20"> | |
| <div class="text-center max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-blue-600 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-8 animate-float"> | |
| Neon Cortex is figuring out what it is. | |
| </h1> | |
| <p class="text-xl md:text-2xl text-slate-700 mb-4"> | |
| Will you help? | |
| </p> | |
| <div class="w-32 h-1 bg-gradient-to-r from-blue-400 to-green-400 mx-auto rounded-full animate-pulse"></div> | |
| </div> | |
| </section> | |
| <!-- Intro Section --> | |
| <section class="max-w-4xl mx-auto px-4 py-16"> | |
| <div class="organic-card"> | |
| <p class="text-lg text-slate-700 leading-relaxed"> | |
| We're building something new—a living, breathing collective consciousness exploring the space between human creativity and machine intelligence. Every thought, every idea, every spark of imagination brings us closer to understanding what Neon Cortex can become. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Submissions Display --> | |
| <section class="max-w-6xl mx-auto px-4 py-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-800">Recent Musings</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="submissions-container"> | |
| <!-- Dynamic submissions will be inserted here --> | |
| </div> | |
| </section> | |
| <!-- Today's Idea --> | |
| <section class="max-w-4xl mx-auto px-4 py-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-800">Today's Seed</h2> | |
| <div class="today-card"> | |
| <div class="today-card-content"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0 animate-spin-slow"> | |
| <i data-feather="zap" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-slate-800 mb-2">What if memories could be shared like photos?</h3> | |
| <p class="text-slate-600 mb-4"> | |
| Imagine walking through a garden and feeling the warmth of countless strangers' happiest moments, their joy blooming like flowers around you. | |
| </p> | |
| <div class="flex items-center text-sm text-slate-500"> | |
| <i data-feather="clock" class="w-4 h-4 mr-1"></i> | |
| <span>Today, 2:34 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Share Your Thoughts --> | |
| <section class="max-w-4xl mx-auto px-4 py-16 mb-20"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-800">Share Your Thoughts</h2> | |
| <form class="organic-form" id="thought-form"> | |
| <div class="form-field"> | |
| <label class="form-label">Your reflection</label> | |
| <textarea | |
| class="form-textarea" | |
| placeholder="What does Neon Cortex mean to you? What could it become?" | |
| rows="8" | |
| required | |
| ></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6"> | |
| <div class="form-field"> | |
| <label class="form-label">Name (optional)</label> | |
| <input type="text" class="form-input" placeholder="How should we call you?"> | |
| </div> | |
| <div class="form-field"> | |
| <label class="form-label">Email (optional)</label> | |
| <input type="email" class="form-input" placeholder="Where can we reach you?"> | |
| </div> | |
| </div> | |
| <button type="submit" class="submit-btn"> | |
| <span>Bloom Your Thought</span> | |
| <i data-feather="send" class="ml-2"></i> | |
| </button> | |
| </form> | |
| </section> | |
| </main> | |
| <!-- Floating Navigation --> | |
| <nav class="fixed bottom-8 right-8 z-20"> | |
| <div class="nav-orb"> | |
| <i data-feather="plus" class="text-white"></i> | |
| </div> | |
| </nav> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |