Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>About — Q-Simplified</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet"/> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{--primary:#003465;--on-tertiary:#ffdbd1;--surface:#f8f9fa;--surface-card:#fff;--surface-low:#f3f4f5;--text-primary:#191c1d;--text-secondary:#4e5f7b;--text-muted:#7a8fa6;--radius-full:9999px;--radius-xl:3rem;--shadow:0 4px 40px rgba(0,52,101,0.06)} | |
| body{font-family:'Work Sans',sans-serif;background:var(--surface);color:var(--text-primary);min-height:100vh} | |
| .nav-wrapper{background:var(--primary);padding:0 2rem} | |
| .nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:2rem;height:64px} | |
| .logo{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.25rem;color:#fff;text-decoration:none;letter-spacing:-0.02em} | |
| .nav-links{display:flex;align-items:center;gap:.25rem;flex:1;justify-content:center} | |
| .nav-links a{font-size:.875rem;color:rgba(255,255,255,.7);text-decoration:none;padding:.4rem .75rem;border-radius:var(--radius-full);transition:all .2s} | |
| .nav-links a:hover{color:#fff;background:rgba(255,255,255,.1)} | |
| .nav-links a.active{color:#fff;font-weight:600} | |
| .btn-login{font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.6);border-radius:var(--radius-full);padding:.5rem 1.25rem;text-decoration:none;transition:all .2s;white-space:nowrap} | |
| .btn-login:hover{background:#fff;color:var(--primary)} | |
| .hero{background:var(--primary);padding:5rem 2rem;text-align:center;position:relative;overflow:hidden} | |
| .hero::after{content:'ABOUT';position:absolute;left:50%;bottom:-2rem;transform:translateX(-50%);font-family:'Manrope',sans-serif;font-size:9rem;font-weight:800;color:rgba(255,255,255,.03);white-space:nowrap;pointer-events:none} | |
| .hero-tag{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-tertiary);opacity:.8;margin-bottom:.75rem} | |
| .hero-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:2.75rem;color:#fff;letter-spacing:-.03em;line-height:1.15;margin-bottom:1rem} | |
| .hero-desc{font-size:1rem;color:rgba(255,255,255,.65);max-width:520px;margin:0 auto 2rem;line-height:1.65} | |
| .coming-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-full);padding:.5rem 1.25rem;font-size:.8125rem;color:rgba(255,255,255,.8);font-weight:500} | |
| .coming-dot{width:6px;height:6px;border-radius:50%;background:#4caf82;animation:pulse 2s infinite} | |
| @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(76,175,130,.4)}50%{box-shadow:0 0 0 4px rgba(76,175,130,0)}} | |
| .main{max-width:900px;margin:4rem auto;padding:0 1.5rem} | |
| .notify-card{background:var(--surface-card);border-radius:var(--radius-xl);padding:3rem;box-shadow:var(--shadow);text-align:center} | |
| .notify-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.375rem;margin-bottom:.75rem} | |
| .notify-desc{color:var(--text-muted);font-size:.9375rem;line-height:1.6;margin-bottom:2rem} | |
| .notify-form{display:flex;gap:.75rem;max-width:420px;margin:0 auto} | |
| .notify-input{flex:1;padding:.75rem 1rem;background:var(--surface-low);border:2px solid transparent;border-radius:var(--radius-full);font-family:'Work Sans',sans-serif;font-size:.9375rem;outline:none;transition:border .2s} | |
| .notify-input:focus{border-color:var(--primary);background:#fff} | |
| .notify-btn{padding:.75rem 1.5rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-full);font-family:'Work Sans',sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s} | |
| .notify-btn:hover{background:#004b8d;transform:translateY(-1px)} | |
| .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem} | |
| .feature-card{background:var(--surface-low);border-radius:1.5rem;padding:1.5rem;text-align:left} | |
| .feat-icon{font-size:1.5rem;margin-bottom:.75rem} | |
| .feat-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:.9375rem;margin-bottom:.375rem} | |
| .feat-desc{font-size:.8125rem;color:var(--text-muted);line-height:1.55} | |
| .footer{background:var(--primary);margin-top:4rem} | |
| .footer-inner{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem} | |
| .footer-logo{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.125rem;color:#fff;letter-spacing:-.02em} | |
| .footer-copy{font-size:.6875rem;color:rgba(255,255,255,.4);margin-top:.125rem} | |
| .footer-links{flex:1;display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap} | |
| .footer-links a{font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none} | |
| .footer-links a:hover{color:#fff} | |
| @media(max-width:640px){.features{grid-template-columns:1fr}.notify-form{flex-direction:column}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="nav-wrapper"> | |
| <nav class="nav"> | |
| <a href="/" class="logo">Q-Simplified</a> | |
| <div class="nav-links"><a href="/about" class="active">About</a><a href="/trends" >Trends</a><a href="/study-zone" >Study Zone</a><a href="/test-series" >Test Series</a><a href="/simplified-zone" >Simplified Zone</a><a href="/book-class" >Book Class</a></div> | |
| <a href="/login" class="btn-login" id="nav-auth-btn">Login</a> | |
| </nav> | |
| </div> | |
| <div class="hero"> | |
| <div class="hero-tag">Q-Simplified</div> | |
| <h1 class="hero-title">Our Story</h1> | |
| <p class="hero-desc">Who we are and why we built Q-Simplified</p> | |
| <div class="coming-badge"><div class="coming-dot"></div> Coming soon — be the first to know</div> | |
| </div> | |
| <main class="main"> | |
| <div class="notify-card"> | |
| <h2 class="notify-title">Get notified when it launches</h2> | |
| <p class="notify-desc">We're working hard to bring you the best experience. Drop your email and we'll let you know the moment it's live.</p> | |
| <div class="notify-form"> | |
| <input class="notify-input" id="notify-email" type="email" placeholder="your@email.com"/> | |
| <button class="notify-btn" onclick="notify()">Notify Me</button> | |
| </div> | |
| <p id="notify-msg" style="margin-top:1rem;font-size:.875rem;color:#1a7a4a;display:none">✅ You're on the list!</p> | |
| <div class="features"><div class="feature-card"><div class="feat-icon">🎯</div><div class="feat-title">Our Mission</div><div class="feat-desc">Democratise financial literacy for every Indian investor, regardless of background.</div></div><div class="feature-card"><div class="feat-icon">👥</div><div class="feat-title">Expert Team</div><div class="feat-desc">Ex-bankers, chartered accountants, and educators who've lived the markets.</div></div><div class="feature-card"><div class="feat-icon">📊</div><div class="feat-title">Data-Driven</div><div class="feat-desc">Everything we publish is backed by real data, not opinions or speculation.</div></div></div> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| <div class="footer-inner"> | |
| <div><div class="footer-logo">Q-Simplified</div><div class="footer-copy">© 2024 Q-SIMPLIFIED. THE FINANCIAL ARCHITECT.</div></div> | |
| <nav class="footer-links"><a href="#">Privacy Policy</a><a href="#">Terms of Service</a><a href="#">Contact Us</a></nav> | |
| </div> | |
| </footer> | |
| <script> | |
| function notify(){ | |
| const email=document.getElementById('notify-email').value; | |
| if(!email||!email.includes('@')){alert('Please enter a valid email');return;} | |
| document.getElementById('notify-msg').style.display='block'; | |
| document.getElementById('notify-email').value=''; | |
| // TODO: save to Supabase waitlist table | |
| } | |
| const user=JSON.parse(localStorage.getItem('qs_user')||'null'); | |
| const exp=+localStorage.getItem('qs_token_exp'); | |
| if(user&&exp&&Date.now()<exp){ | |
| const btn=document.getElementById('nav-auth-btn'); | |
| if(btn){btn.textContent=user.full_name?.split(' ')[0]||'Account';btn.href='/profile';} | |
| } | |
| </script> | |
| </body> | |
| </html> |