Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>The Oracle Engine — See the Future of Product Before It's Designed</title> | |
| <meta name="description" content="Oracle Engine is a visionary R&D platform. AI analyzes global design trends, technology advancements, and socio-economic shifts to generate market-disrupting product concepts." /> | |
| <meta name="theme-color" content="#0B1020" /> | |
| <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=Space+Grotesk:wght@400;600;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet" /> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='44' fill='%230B1020'/%3E%3Cpath d='M20 48c0-15 12-27 27-27s28 12 28 27-13 28-28 28-27-13-27-28zm14 0c0 7 6 13 13 13s14-6 14-13-7-14-14-14-13 7-13 14z' fill='%238B5CF6'/%3E%3Ccircle cx='63' cy='35' r='6' fill='%2306B6D4'/%3E%3C/svg%3E" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#ECF0FF', | |
| 100: '#DCE2FF', | |
| 200: '#B9C4FF', | |
| 300: '#8EA1FF', | |
| 400: '#6279FF', | |
| 500: '#3B52FF', | |
| 600: '#2D3ECC', | |
| 700: '#212F99', | |
| 800: '#172272', | |
| 900: '#0F184F', | |
| }, | |
| accent: { | |
| 500: '#06B6D4', | |
| 600: '#0891B2', | |
| }, | |
| concept: { | |
| cyan: '#06B6D4', | |
| magenta: '#D946EF', | |
| lime: '#A3E635', | |
| orange: '#FB923C', | |
| }, | |
| }, | |
| fontFamily: { | |
| display: ['Space Grotesk', 'ui-sans-serif', 'system-ui'], | |
| sans: ['Inter', 'ui-sans-serif', 'system-ui'], | |
| }, | |
| keyframes: { | |
| float: { '0%,100%': { transform: 'translateY(0px)' }, '50%': { transform: 'translateY(-10px)' } }, | |
| glow: { '0%,100%': { opacity: 0.6 }, '50%': { opacity: 1 } }, | |
| rotateSlow: { '0%': { transform: 'rotate(0deg)' }, '100%': { transform: 'rotate(360deg)' } }, | |
| gradientShift: { '0%': { backgroundPosition: '0% 50%' }, '50%': { backgroundPosition: '100% 50%' }, '100%': { backgroundPosition: '0% 50%' } }, | |
| shimmer: { '0%': { transform: 'translateX(-100%)' }, '100%': { transform: 'translateX(100%)' } }, | |
| }, | |
| animation: { | |
| float: 'float 8s ease-in-out infinite', | |
| glow: 'glow 4s ease-in-out infinite', | |
| rotateSlow: 'rotateSlow 40s linear infinite', | |
| gradientShift: 'gradientShift 12s ease infinite', | |
| shimmer: 'shimmer 2.5s ease-in-out infinite', | |
| }, | |
| boxShadow: { | |
| glow: '0 0 40px rgba(99,102,241,0.15), 0 0 80px rgba(6,182,212,0.12)', | |
| neon: '0 0 10px rgba(6,182,212,0.8), 0 0 30px rgba(6,182,212,0.6), 0 0 60px rgba(6,182,212,0.4)', | |
| }, | |
| }, | |
| }, | |
| darkMode: 'class', | |
| }; | |
| </script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-[#0B1020] text-slate-100 font-sans selection:bg-primary-500/30 selection:text-white"> | |
| <canvas id="orbits" class="pointer-events-none fixed inset-0 -z-10"></canvas> | |
| <header class="fixed inset-x-0 top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-[#0B1020]/50 border-b border-white/5"> | |
| <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"> | |
| <a href="#" class="flex items-center gap-3 group"> | |
| <div class="relative"> | |
| <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-primary-500 via-accent-500 to-concept-magenta animate-rotateSlow shadow-glow"></div> | |
| <i data-feather="cpu" class="w-5 h-5 absolute inset-0 m-auto text-white/90"></i> | |
| </div> | |
| <span class="font-display text-lg tracking-wide">Oracle Engine</span> | |
| </a> | |
| <nav class="hidden md:flex items-center gap-6 text-sm text-slate-300"> | |
| <a href="#how" class="hover:text-white">How it works</a> | |
| <a href="#features" class="hover:text-white">Features</a> | |
| <a href="#concepts" class="hover:text-white">Concept Engine</a> | |
| <a href="#pricing" class="hover:text-white">Pricing</a> | |
| </nav> | |
| <div class="flex items-center gap-3"> | |
| <button id="themeToggle" class="rounded-full border border-white/10 p-2 hover:bg-white/5"> | |
| <i data-feather="moon" class="w-4 h-4"></i> | |
| </button> | |
| <a href="#pricing" class="hidden sm:inline-flex items-center gap-2 rounded-lg bg-primary-500 hover:bg-primary-400 text-white px-4 py-2 text-sm shadow-neon"> | |
| Start Free Trial | |
| </a> | |
| <button id="menuBtn" class="md:hidden rounded-lg border border-white/10 p-2 hover:bg-white/5"> | |
| <i data-feather="menu" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <section id="mobileNav" class="fixed inset-x-0 top-[64px] z-40 hidden bg-[#0B1020]/95 backdrop-blur border-b border-white/5"> | |
| <div class="max-w-7xl mx-auto px-6 py-4 grid gap-3 text-sm"> | |
| <a href="#how" class="py-2 hover:text-white">How it works</a> | |
| <a href="#features" class="py-2 hover:text-white">Features</a> | |
| <a href="#concepts" class="py-2 hover:text-white">Concept Engine</a> | |
| <a href="#pricing" class="py-2 hover:text-white">Pricing</a> | |
| </div> | |
| </section> | |
| <main> | |
| <section class="relative pt-32 pb-16 md:pt-40 md:pb-24 overflow-hidden"> | |
| <div class="absolute inset-0 -z-10"> | |
| <div class="absolute top-1/4 -left-36 w-[36rem] h-[36rem] bg-gradient-to-br from-primary-500/30 to-transparent rounded-full blur-3xl animate-glow"></div> | |
| <div class="absolute bottom-0 right-[-10rem] w-[32rem] h-[32rem] bg-gradient-to-tr from-accent-500/30 to-transparent rounded-full blur-3xl animate-glow"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-300"> | |
| <span class="w-2 h-2 rounded-full bg-accent-500 animate-pulse"></span> | |
| Visionary R&D Platform | |
| </div> | |
| <h1 class="mt-5 font-display text-4xl md:text-6xl leading-[1.05] tracking-tight"> | |
| See the Future of Product Before It's Designed. | |
| </h1> | |
| <p class="mt-5 text-slate-300 text-lg"> | |
| Oracle Engine uses AI to analyze global design trends, technology advancements, and socio‑economic shifts—generating novel, market‑disrupting product concepts 5–10 years out. | |
| </p> | |
| <div class="mt-8 flex flex-wrap gap-3"> | |
| <button id="openSignup" class="inline-flex items-center gap-2 rounded-lg bg-primary-500 hover:bg-primary-400 text-white px-5 py-3 text-sm shadow-neon"> | |
| <i data-feather="zap"></i> | |
| Start Free Trial | |
| </button> | |
| <a href="#concepts" class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-white px-5 py-3 text-sm"> | |
| <i data-feather="play"></i> | |
| See Concept Engine | |
| </a> | |
| </div> | |
| <div class="mt-8 grid grid-cols-3 gap-4 max-w-xl text-sm"> | |
| <div class="rounded-xl border border-white/10 bg-white/5 p-4"> | |
| <div class="text-slate-400">Prediction Horizon</div> | |
| <div class="font-semibold">5–10 years</div> | |
| </div> | |
| <div class="rounded-xl border border-white/10 bg-white/5 p-4"> | |
| <div class="text-slate-400">Concepts Generated</div> | |
| <div class="font-semibold" id="conceptCounter">0</div> | |
| </div> | |
| <div class="rounded-xl border border-white/10 bg-white/5 p-4"> | |
| <div class="text-slate-400">Forecast Accuracy</div> | |
| <div class="font-semibold">86%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative rounded-2xl border border-white/10 bg-gradient-to-br from-white/5 to-white/[0.02] p-6 backdrop-blur shadow-glow overflow-hidden"> | |
| <div class="absolute inset-0 bg-[radial-gradient(60%_60%_at_70%_10%,rgba(99,102,241,0.25)_0,transparent_60%)]"></div> | |
| <div class="relative"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-slate-300">Syntactic Concept Generation</div> | |
| <div class="text-lg font-semibold">AI Hook</div> | |
| </div> | |
| <div class="text-xs rounded-full border border-white/10 px-2 py-1 text-slate-300">Live</div> | |
| </div> | |
| <div class="mt-6 grid gap-4"> | |
| <div class="rounded-xl border border-white/10 bg-[#0F1430]/60 p-4"> | |
| <div class="text-slate-400 text-xs mb-2">Fusion Inputs</div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center gap-1 rounded-lg bg-accent-500/20 text-accent-300 px-2 py-1 text-xs"><i data-feather="droplet"></i> Water</span> | |
| <span class="inline-flex items-center gap-1 rounded-lg bg-primary-500/20 text-primary-300 px-2 py-1 text-xs"><i data-feather="box"></i> Materials</span> | |
| <span class="inline-flex items-center gap-1 rounded-lg bg-concept-magenta/20 text-concept-magenta px-2 py-1 text-xs"><i data-feather="activity"></i> Bio/AI</span> | |
| <span class="inline-flex items-center gap-1 rounded-lg bg-concept-lime/20 text-concept-lime px-2 py-1 text-xs"><i data-feather="cpu"></i> Compute</span> | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-white/10 bg-[#0F1430]/60 p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="text-slate-400 text-xs">AI Projection Weave</div> | |
| <div class="text-xs text-slate-400">Latent Space</div> | |
| </div> | |
| <div class="h-32 rounded-lg bg-gradient-to-r from-primary-500/20 via-accent-500/20 to-concept-magenta/20 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent)] animate-shimmer"></div> | |
| <div class="absolute inset-0 opacity-60"> | |
| <svg viewBox="0 0 100 40" class="w-full h-full"> | |
| <defs> | |
| <linearGradient id="g" x1="0" x2="1" y1="0" y2="0"> | |
| <stop offset="0%" stop-color="#06B6D4" stop-opacity="0.8" /> | |
| <stop offset="50%" stop-color="#3B52FF" stop-opacity="0.8" /> | |
| <stop offset="100%" stop-color="#D946EF" stop-opacity="0.8" /> | |
| </linearGradient> | |
| </defs> | |
| <polyline fill="none" stroke="url(#g)" stroke-width="1.5" | |
| points="0,30 10,26 20,28 30,18 40,22 50,12 60,15 70,8 80,10 90,5 100,7" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-white/10 bg-[#0F1430]/60 p-4"> | |
| <div class="text-slate-400 text-xs mb-3">Next-Wave Category Forecast</div> | |
| <div class="grid gap-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm">Bio‑responsive Hydration Platforms</div> | |
| <div class="text-xs text-accent-400">92%</div> | |
| </div> | |
| <div class="h-1.5 rounded bg-white/10 overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-accent-500 to-concept-cyan w-[92%]"></div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm">Neural‑Loom Adaptive Textiles</div> | |
| <div class="text-xs text-primary-400">88%</div> | |
| </div> | |
| <div class="h-1.5 rounded bg-white/10 overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-primary-500 to-concept-magenta w-[88%]"></div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm">Carbon‑Sequestering Architecture</div> | |
| <div class="text-xs text-concept-lime">85%</div> | |
| </div> | |
| <div class="h-1.5 rounded bg-white/10 overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-concept-lime to-accent-500 w-[85%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 hidden lg:block"> | |
| <div class="relative w-48 h-48 rounded-full bg-gradient-to-br from-accent-500/30 to-primary-500/30 blur-2xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="how" class="py-16 md:py-24"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="max-w-2xl"> | |
| <h2 class="font-display text-3xl md:text-4xl">How Oracle Engine Works</h2> | |
| <p class="mt-3 text-slate-300"> | |
| Syntactic Concept Generation interprets the confluence of technologies to predict the next wave of product categories—providing your competitive R&D roadmap. | |
| </p> | |
| </div> | |
| <div class="mt-10 grid md:grid-cols-3 gap-6"> | |
| <div class="rounded-2xl border border-white/10 bg-white/5 p-6"> | |
| <div class="w-10 h-10 rounded-lg bg-accent-500/20 text-accent-400 flex items-center justify-center"><i data-feather="layers"></i></div> | |
| <div class="mt-4 font-semibold">Data Fusion</div> | |
| <div class="mt-2 text-slate-300 text-sm">Aggregates global design, technology, and socio‑economic signals into a unified latent space.</div> | |
| </div> | |
| <div class="rounded-2xl border border-white/10 bg-white/5 p-6"> | |
| <div class="w-10 h-10 rounded-lg bg-primary-500/20 text-primary-400 flex items-center justify-center"><i data-feather="git-branch"></i></div> | |
| <div class="mt-4 font-semibold">Syntactic Weaving</div> | |
| <div class="mt-2 text-slate-300 text-sm">Generates novel combinations by recombining semantic primitives across domains.</div> | |
| </div> | |
| <div class="rounded-2xl border border-white/10 bg-white/5 p-6"> | |
| <div class="w-10 h-10 rounded-lg bg-concept-magenta/20 text-concept-magenta flex items-center justify-center"><i data-feather="compass"></i></div> | |
| <div class="mt-4 font-semibold">Roadmap Delivery</div> | |
| <div class="mt-2 text-slate-300 text-sm">Outputs validated concept sheets with feasibility, timelines, and IP implications.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="features" class="py-16 md:py-24"> | |
| <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-10 items-center"> | |
| <div> | |
| <h2 class="font-display text-3xl md:text-4xl">Built for Visionary Teams</h2> | |
| <p class="mt-3 text-slate-300">Plug Oracle Engine into your R&D workflow and align innovation with market timing.</p> | |
| <div class="mt-6 grid gap-3"> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-accent-400 mt-0.5"></i> | |
| <div> | |
| <div class="font-semibold">Concept Sheets</div> | |
| <div class="text-sm text-slate-300">Detailed product concepts with materials, interaction patterns, and sustainability metrics.</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-accent-400 mt-0.5"></i> | |
| <div> | |
| <div class="font-semibold">Trend Forecasting</div> | |
| <div class="text-sm text-slate-300">Data-driven signals with confidence levels for the next 5–10 years.</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-accent-400 mt-0.5"></i> | |
| <div> | |
| <div class="font-semibold">IP Risk Radar</div> | |
| <div class="text-sm text-slate-300">Proactive IP overlap detection and white-space opportunity mapping.</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-accent-400 mt-0.5"></i> | |
| <div> | |
| <div class="font-semibold">Collaboration</div> | |
| <div class="text-sm text-slate-300">Shared canvases, annotations, and concept voting for cross‑functional teams.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="rounded-2xl border border-white/10 bg-gradient-to-br from-white/5 to-white/[0.02] p-6 shadow-glow"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-2.5 h-2.5 rounded-full bg-red-400/70"></div> | |
| <div class="w-2.5 h-2.5 rounded-full bg-yellow-400/70"></div> | |
| <div class="w-2.5 h-2.5 rounded-full bg-green-400/70"></div> | |
| <div class="ml-auto text-xs text-slate-400">Oracle Shell</div> | |
| </div> | |
| <pre class="mt-4 text-xs text-slate-300 bg-[#0A0E23]/60 rounded-lg p-4 overflow-x-auto"> | |
| <code>$ oracle generate --horizon 8y --domains bio,compute,energy | |
| Syntactic engine weaving... | |
| ✓ Latent vectors hydrated. | |
| ✓ Concept lattice assembled. | |
| → Top concepts: | |
| 1) Bio‑Responsive Hydration Platform | |
| • Materials: Algae‑infused polymer, mineral composites | |
| • Signals: Wellness + sustainability + micro‑dosage | |
| 2) Neural‑Loom Adaptive Textiles | |
| • Materials: Piezo‑fiber mesh, biofeedback dyes | |
| • Signals: Comfort + physiology + AR adjacency | |
| 3) Carbon‑Sequestering Architecture Blocks | |
| • Materials: Mycelium + mineral matrix | |
| • Signals: Climate + regulation + urbanization</code> | |
| </pre> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="concepts" class="py-16 md:py-24"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="flex items-end justify-between gap-4"> | |
| <div> | |
| <h2 class="font-display text-3xl md:text-4xl">Concept Engine</h2> | |
| <p class="mt-3 text-slate-300">Preview the types of disruptive ideas Oracle Engine can produce—generated live.</p> | |
| </div> | |
| <button id="generateBtn" class="hidden sm:inline-flex items-center gap-2 rounded-lg bg-accent-500 hover:bg-accent-400 text-white px-4 py-2 text-sm shadow-neon"> | |
| <i data-feather="refresh-ccw"></i> | |
| Generate New | |
| </button> | |
| </div> | |
| <div id="conceptGrid" class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Concept Cards Injected Here --> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button id="generateBtnMobile" class="sm:hidden inline-flex items-center gap-2 rounded-lg bg-accent-500 hover:bg-accent-400 text-white px-4 py-2 text-sm shadow-neon"> | |
| <i data-feather="refresh-ccw"></i> | |
| Generate New | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="pricing" class="py-16 md:py-24"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="max-w-2xl"> | |
| <h2 class="font-display text-3xl md:text-4xl">Pricing</h2> | |
| <p class="mt-3 text-slate-300">Start free. Scale as your innovation pipeline matures.</p> | |
| </div> | |
| <div class="mt-8 grid md:grid-cols-3 gap-6"> | |
| <div class="rounded-2xl border border-white/10 bg-white/5 p-6 flex flex-col"> | |
| <div class="font-semibold">Explorer</div> | |
| <div class="text-slate-400 text-sm mt-1">For individual innovators</div> | |
| <div class="mt-4 text-3xl font-semibold">$0<span class="text-base text-slate-400">/mo</span></div> | |
| <ul class="mt-4 grid gap-2 text-sm text-slate-300"> | |
| <li>• 10 concepts / month</li> | |
| <li>• 2‑year trend signals</li> | |
| <li>• Community support</li> | |
| </ul> | |
| <a href="#" class="mt-6 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-white px-4 py-2 text-sm text-center">Get Started</a> | |
| </div> | |
| <div class="rounded-2xl border border-white/10 bg-gradient-to-br from-primary-500/10 to-accent-500/10 p-6 shadow-glow flex flex-col"> | |
| <div class="font-semibold">Strategist</div> | |
| <div class="text-slate-400 text-sm mt-1">For product teams</div> | |
| <div class="mt-4 text-3xl font-semibold">$99<span class="text-base text-slate-400">/mo</span></div> | |
| <ul class="mt-4 grid gap-2 text-sm text-slate-300"> | |
| <li>• Unlimited concepts</li> | |
| <li>• 5–10 year forecasts</li> | |
| <li>• IP Risk Radar</li> | |
| <li>• Email support</li> | |
| </ul> | |
| <a href="#" class="mt-6 rounded-lg bg-primary-500 hover:bg-primary-400 text-white px-4 py-2 text-sm text-center">Start Free Trial</a> | |
| </div> | |
| <div class="rounded-2xl border border-white/10 bg-white/5 p-6 flex flex-col"> | |
| <div class="font-semibold">Enterprise</div> | |
| <div class="text-slate-400 text-sm mt-1">For R&D organizations</div> | |
| <div class="mt-4 text-3xl font-semibold">Custom</div> | |
| <ul class="mt-4 grid gap-2 text-sm text-slate-300"> | |
| <li>• Private deployments</li> | |
| <li>• Custom ontologies</li> | |
| <li>• SSO, SOC2</li> | |
| <li>• Dedicated success</li> | |
| </ul> | |
| <a href="#" class="mt-6 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-white px-4 py-2 text-sm text-center">Contact Sales</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="border-t border-white/5"> | |
| <div class="max-w-7xl mx-auto px-6 py-10 grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-primary-500 via-accent-500 to-concept-magenta animate-rotateSlow"></div> | |
| <span class="font-display">Oracle Engine</span> | |
| </div> | |
| <p class="mt-3 text-sm text-slate-300">See the future of product before it's designed.</p> | |
| <div class="mt-4 flex gap-2"> | |
| <a class="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/5" href="#"><i data-feather="twitter" class="w-4 h-4"></i></a> | |
| <a class="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/5" href="#"><i data-feather="github" class="w-4 h-4"></i></a> | |
| <a class="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/5" href="#"><i data-feather="linkedin" class="w-4 h-4"></i></a> | |
| </div> | |
| </div> | |
| <div class="grid sm:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="font-semibold">Product</div> | |
| <div class="mt-3 grid gap-2 text-sm text-slate-300"> | |
| <a href="#how" class="hover:text-white">How it works</a> | |
| <a href="#features" class="hover:text-white">Features</a> | |
| <a href="#concepts" class="hover:text-white">Concept Engine</a> | |
| <a href="#pricing" class="hover:text-white">Pricing</a> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Company</div> | |
| <div class="mt-3 grid gap-2 text-sm text-slate-300"> | |
| <a href="#" class="hover:text-white">About</a> | |
| <a href="#" class="hover:text-white">Careers</a> | |
| <a href="#" class="hover:text-white">Contact</a> | |
| <a href="#" class="hover:text-white">Privacy</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Stay in the loop</div> | |
| <p class="mt-3 text-sm text-slate-300">Monthly insights on future product signals.</p> | |
| <form id="newsletter" class="mt-4 flex gap-2"> | |
| <input required type="email" placeholder="you@company.com" class="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-accent-500" /> | |
| <button class="rounded-lg bg-accent-500 hover:bg-accent-400 text-white px-4 py-2 text-sm">Subscribe</button> | |
| </form> | |
| <div id="newsletterMsg" class="mt-2 text-xs text-slate-400"></div> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/5"> | |
| <div class="max-w-7xl mx-auto px-6 py-4 text-xs text-slate-400 flex items-center justify-between"> | |
| <div>© <span id="year"></span> Oracle Engine</div> | |
| <div>Visionary R&D Platform</div> | |
| </div> | |
| </div> | |
| </footer> | |
| <div id="signupModal" class="fixed inset-0 z-[60] hidden items-center justify-center"> | |
| <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div> | |
| <div class="relative w-[92%] max-w-md rounded-2xl border border-white/10 bg-[#0B1020] p-6 shadow-glow"> | |
| <button id="closeSignup" class="absolute top-3 right-3 rounded-lg border border-white/10 p-2 hover:bg-white/5"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| <div class="font-display text-xl">Start your free trial</div> | |
| <p class="mt-1 text-sm text-slate-300">No credit card required.</p> | |
| <form id="signupForm" class="mt-6 grid gap-3"> | |
| <div> | |
| <label class="text-xs text-slate-400">Name</label> | |
| <input required type="text" class="mt-1 w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-accent-500" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-slate-400">Email</label> | |
| <input required type="email" class="mt-1 w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-accent-500" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-slate-400">Team Size</label> | |
| <select class="mt-1 w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-accent-500"> | |
| <option>1–5</option> | |
| <option>6–20</option> | |
| <option>21–100</option> | |
| <option>100+</option> | |
| </select> | |
| </div> | |
| <button class="mt-2 rounded-lg bg-primary-500 hover:bg-primary-400 text-white px-4 py-2 text-sm">Create account</button> | |
| </form> | |
| <div id="signupMsg" class="mt-3 text-xs text-slate-400"></div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |