| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Orbit Notes - Product Landing Page</title> |
| <style> |
| |
| |
| |
| |
| :root { |
| --bg-color: #0a0a0a; |
| --card-bg: #141414; |
| --text-main: #e0e0e0; |
| --text-muted: #888888; |
| --accent-navy: #0f172a; |
| --accent-blue: #3b82f6; |
| --accent-gold: #fbbf24; |
| --accent-red: #ef4444; |
| --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| background-color: var(--bg-color); |
| color: var(--text-main); |
| font-family: var(--font-main); |
| line-height: 1.6; |
| overflow-x: hidden; |
| } |
| |
| |
| |
| |
| nav { |
| position: fixed; |
| top: 0; |
| width: 100%; |
| background: rgba(10, 10, 10, 0.85); |
| backdrop-filter: blur(10px); |
| z-index: 1000; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
| padding: 1rem 5%; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .logo { |
| font-size: 1.5rem; |
| font-weight: 700; |
| letter-spacing: -0.05em; |
| color: var(--accent-blue); |
| text-decoration: none; |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 2rem; |
| } |
| |
| .nav-links a { |
| color: var(--text-main); |
| text-decoration: none; |
| font-size: 0.95rem; |
| transition: var(--transition); |
| } |
| |
| .nav-links a:hover { |
| color: var(--accent-blue); |
| } |
| |
| .mobile-toggle { |
| display: none; |
| background: none; |
| border: none; |
| color: var(--text-main); |
| font-size: 1.5rem; |
| cursor: pointer; |
| } |
| |
| |
| |
| |
| .hero { |
| height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| padding: 0 5%; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| |
| .orb { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(80px); |
| z-index: -1; |
| opacity: 0.6; |
| } |
| .orb-1 { width: 400px; height: 400px; background: #334155; top: -100px; left: -100px; } |
| .orb-2 { width: 300px; height: 300px; background: #475569; bottom: -50px; right: -50px; } |
| |
| .hero-content { |
| max-width: 800px; |
| z-index: 1; |
| } |
| |
| h1 { |
| font-size: 4rem; |
| font-weight: 800; |
| line-height: 1.1; |
| margin-bottom: 1.5rem; |
| background: linear-gradient(to right, #fff, #94a3b8); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .hero p { |
| font-size: 1.25rem; |
| color: var(--text-muted); |
| margin-bottom: 2.5rem; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| .cta-group { |
| display: flex; |
| gap: 1rem; |
| justify-content: center; |
| } |
| |
| .btn { |
| padding: 1rem 2rem; |
| border-radius: 50px; |
| font-weight: 600; |
| text-decoration: none; |
| transition: var(--transition); |
| display: inline-block; |
| } |
| |
| .btn-primary { |
| background-color: var(--accent-blue); |
| color: white; |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); |
| } |
| |
| .btn-secondary { |
| background-color: transparent; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| color: var(--text-main); |
| } |
| |
| .btn-secondary:hover { |
| border-color: var(--text-main); |
| color: var(--text-main); |
| } |
| |
| |
| |
| |
| .features { |
| padding: 5rem 5%; |
| background-color: var(--bg-color); |
| } |
| |
| .section-header { |
| text-align: center; |
| margin-bottom: 4rem; |
| } |
| |
| .section-header h2 { |
| font-size: 2.5rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .section-header p { |
| color: var(--text-muted); |
| } |
| |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| } |
| |
| .card { |
| background-color: var(--card-bg); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| padding: 2.5rem; |
| border-radius: 16px; |
| transition: var(--transition); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .card:hover { |
| transform: translateY(-5px); |
| border-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| .card-icon { |
| width: 50px; |
| height: 50px; |
| background: rgba(59, 130, 246, 0.1); |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 1.5rem; |
| color: var(--accent-blue); |
| font-size: 1.5rem; |
| } |
| |
| .card h3 { |
| font-size: 1.5rem; |
| margin-bottom: 0.75rem; |
| } |
| |
| .card p { |
| color: var(--text-muted); |
| font-size: 0.95rem; |
| } |
| |
| |
| |
| |
| footer { |
| padding: 4rem 5%; |
| border-top: 1px solid rgba(255, 255, 255, 0.05); |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.9rem; |
| } |
| |
| |
| |
| |
| @media (max-width: 768px) { |
| h1 { font-size: 2.5rem; } |
| |
| .nav-links { |
| display: none; |
| flex-direction: column; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| width: 100%; |
| background: var(--bg-color); |
| padding: 1.5rem; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| |
| .nav-links.active { |
| display: flex; |
| } |
| |
| .mobile-toggle { |
| display: block; |
| } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <nav> |
| <a href="#" class="logo">Orbit Notes</a> |
| <div class="mobile-toggle" onclick="toggleMenu()">☰</div> |
| <div class="nav-links" id="navLinks"> |
| <a href="#features">Features</a> |
| <a href="#about">About</a> |
| <a href="#pricing">Pricing</a> |
| <a href="#contact">Contact</a> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero"> |
| <div class="orb orb-1"></div> |
| <div class="orb orb-2"></div> |
| |
| <div class="hero-content"> |
| <h1>Think in Orbit</h1> |
| <p>Experience the next generation of note-taking. Organize your thoughts, collaborate in real-time, and build a productivity ecosystem that feels like a spaceship.</p> |
| <div class="cta-group"> |
| <a href="#" class="btn btn-primary">Start Free Trial</a> |
| <a href="#" class="btn btn-secondary">Learn More</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="features" id="features"> |
| <div class="section-header"> |
| <h2>Why Orbit Notes?</h2> |
| <p>Everything you need to master the art of note-taking.</p> |
| </div> |
|
|
| <div class="grid"> |
| |
| <div class="card"> |
| <div class="card-icon">🧠</div> |
| <h3>Deep Focus</h3> |
| <p>Eliminate distractions with our ultra-low latency connection and a dedicated workspace that keeps your brain in a state of deep concentration.</p> |
| </div> |
|
|
| |
| <div class="card"> |
| <div class="card-icon">🤝</div> |
| <h3>Collaborate</h3> |
| <p>Share your notes with team members in real-time. Use the cloud-first architecture to ensure your thoughts are accessible to everyone, anywhere.</p> |
| </div> |
|
|
| |
| <div class="card"> |
| <div class="card-icon">📊</div> |
| <h3>Analytics</h3> |
| <p>Track your productivity with our built-in dashboard. See how you spend your time, what you're doing well, and where you can optimize your workflow.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <p>© 2023 Orbit Notes Inc. All rights reserved.</p> |
| </footer> |
|
|
| |
| <script> |
| |
| function toggleMenu() { |
| const navLinks = document.getElementById('navLinks'); |
| navLinks.classList.toggle('active'); |
| } |
| |
| |
| document.querySelectorAll('.nav-links a').forEach(link => { |
| link.addEventListener('click', () => { |
| document.getElementById('navLinks').classList.remove('active'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
