Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
| <title>CampusMind — A quiet place for busy minds</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💜</text></svg>"> | |
| <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-slate-50 text-slate-800"> | |
| <!-- NAV --> | |
| <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur z-50 border-b border-slate-100"> | |
| <div class="max-w-6xl mx-auto px-6 h-20 flex items-center justify-between"> | |
| <a class="flex items-center gap-2 font-bold text-indigo-600 text-lg" href="#"> | |
| <i data-feather="cloud" class="w-5 h-5"></i>CampusMind | |
| </a> | |
| <a class="btn-primary" href="#waitlist">Join waitlist</a> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <header class="relative pt-32 pb-20 text-center overflow-hidden"> | |
| <div class="absolute -top-20 -left-20 w-64 h-64 bg-indigo-100 rounded-full opacity-50 blur-3xl"></div> | |
| <div class="absolute bottom-0 right-0 w-80 h-80 bg-teal-100 rounded-full opacity-50 blur-3xl"></div> | |
| <div class="max-w-4xl mx-auto px-6"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-slate-900"> | |
| University is tough.<br> | |
| <span class="text-indigo-600">You don’t have to be.</span> | |
| </h1> | |
| <p class="mt-6 text-lg md:text-xl text-slate-600 max-w-2xl mx-auto"> | |
| A calm, anonymous space built for Narxoz students to breathe, share, and feel less alone. | |
| </p> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a class="btn-primary" href="#waitlist">Join the waitlist</a> | |
| <button id="playBtn" class="btn-secondary"> | |
| <i data-feather="play-circle" class="w-5 h-5"></i>Watch 30-sec demo | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- DEMO MODAL --> | |
| <div id="demoModal" class="fixed inset-0 bg-black/60 backdrop-blur hidden place-items-center z-60"> | |
| <div class="bg-white rounded-2xl p-6 max-w-2xl w-full mx-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-slate-900">Quick demo</h3> | |
| <button id="closeModal" class="text-slate-400 hover:text-slate-800"><i data-feather="x"></i></button> | |
| </div> | |
| <video controls class="w-full rounded-xl" poster="http://static.photos/people/640x360/42"> | |
| <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| </div> | |
| <!-- PROBLEM --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-5xl mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-10 items-center"> | |
| <div> | |
| <h2 class="text-3xl font-bold text-slate-900">Burnout, all-nighters, and the quiet ache of “I’m the only one.”</h2> | |
| <p class="mt-4 text-slate-600"> | |
| Deadlines, group chats, part-time jobs, family expectations—student life stacks up. When everyone seems to be coping, admitting you’re not feels risky. | |
| </p> | |
| <p class="mt-4 text-slate-600"> | |
| So the stress stays silent. And silence grows heavy. | |
| </p> | |
| </div> | |
| <img src="http://static.photos/studio/640x360/11" alt="Tired student" class="rounded-2xl shadow-xl"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SOLUTION / HOW IT WORKS --> | |
| <section class="py-20"> | |
| <div class="max-w-5xl mx-auto px-6 text-center"> | |
| <span class="text-sm uppercase tracking-widest text-indigo-600">How CampusMind works</span> | |
| <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Three small steps to lighter days</h2> | |
| <div class="mt-12 grid sm:grid-cols-3 gap-8"> | |
| <div class="card-feature"> | |
| <div class="icon-box bg-indigo-100"><i data-feather="message-circle" class="text-indigo-600"></i></div> | |
| <h3 class="mt-4 font-semibold text-slate-900">1. Whisper, anonymously</h3> | |
| <p class="text-sm text-slate-600">Chat with peers who get it—no names, no pressure.</p> | |
| </div> | |
| <div class="card-feature"> | |
| <div class="icon-box bg-teal-100"><i data-feather="cloud-lightning" class="text-teal-600"></i></div> | |
| <h3 class="mt-4 font-semibold text-slate-900">2. AI gentle nudge</h3> | |
| <p class="text-sm text-slate-600">24/7 assistant that listens, reflects, never judges.</p> | |
| </div> | |
| <div class="card-feature"> | |
| <div class="icon-box bg-rose-100"><i data-feather="heart" class="text-rose-500"></i></div> | |
| <h3 class="mt-4 font-semibold text-slate-900">3. Real help, when you choose</h3> | |
| <p class="text-sm text-slate-600">One click to Narxoz counselors—confidential and kind.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- BENEFITS / FEELING --> | |
| <section class="py-20 bg-indigo-50"> | |
| <div class="max-w-4xl mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold text-slate-900">Feel seen, heard, and a little more hopeful</h2> | |
| <p class="mt-4 text-slate-600">We built CampusMind to create tiny moments of relief—small conversations that remind you you’re not broken, just human.</p> | |
| <div class="mt-10 grid sm:grid-cols-3 gap-6 text-left"> | |
| <div class="p-4"><i data-feather="sunrise" class="inline w-5 h-5 text-indigo-600 mr-2"></i>Wake up lighter</div> | |
| <div class="p-4"><i data-feather="users" class="inline w-5 h-5 text-indigo-600 mr-2"></i>Find your people</div> | |
| <div class="p-4"><i data-feather="shield" class="inline w-5 h-5 text-indigo-600 mr-2"></i>Private & safe</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SAFETY / TRUST --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-4xl mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-10 items-center"> | |
| <img src="http://static.photos/workspace/640x360/77" alt="Safe space" class="rounded-2xl shadow-xl"> | |
| <div> | |
| <h2 class="text-2xl md:text-3xl font-bold text-slate-900">Your story stays yours</h2> | |
| <ul class="mt-4 space-y-3 text-slate-700"> | |
| <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>No phone number, no email—just a nickname.</li> | |
| <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>End-to-end encrypted chats.</li> | |
| <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>Zero ads, zero data sold.</li> | |
| <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>Kindness strictly enforced (real humans review reports).</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TESTIMONIALS (STUDENT VOICES) --> | |
| <section class="py-20"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <h2 class="text-center text-3xl font-bold text-slate-900">First voices from Narxoz</h2> | |
| <p class="text-center text-slate-600">Pre-launch testers shared anonymous feedback.</p> | |
| <div class="mt-10 grid md:grid-cols-3 gap-6"> | |
| <blockquote class="card-testi"><p class="text-sm text-slate-700">“I could finally say I’m drowning without worrying someone would screenshot it.”</p><span class="text-xs text-slate-500 mt-3 block">— 2nd-year Finance</span></blockquote> | |
| <blockquote class="card-testi"><p class="text-sm text-slate-700">“The AI asked how my day <em>really</em> was. Weirdly healing.”</p><span class="text-xs text-slate-500 mt-3 block">— 1st-year CS</span></blockquote> | |
| <blockquote class="card-testi"><p class="text-sm text-slate-700">“Booked a counselor in two clicks, no awkward phone calls.”</p><span class="text-xs text-slate-500 mt-3 block">— 3rd-year IBS</span></blockquote> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- WAITLIST CTA --> | |
| <section id="waitlist" class="py-24 bg-gradient-to-br from-indigo-600 to-teal-500 text-white"> | |
| <div class="max-w-2xl mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Be first in when we open the doors</h2> | |
| <p class="mt-4 opacity-90">Only 500 early spots for Narxoz students—so we can keep things kind and close-knit.</p> | |
| <form id="waitlistForm" class="mt-8 flex flex-col sm:flex-row gap-3 max-w-md mx-auto"> | |
| <input type="email" placeholder="your@stu.narxoz.kz" required class="flex-1 px-4 py-3 rounded-lg text-slate-900 focus:outline-none focus:ring-2 focus:ring-white/70"> | |
| <button type="submit" class="bg-white text-indigo-600 font-semibold px-5 py-3 rounded-lg hover:bg-slate-50 transition">Join waitlist</button> | |
| </form> | |
| <p class="text-xs mt-3 opacity-80">Free forever for students. No spam, unsubscribe any time.</p> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer class="bg-slate-900 text-slate-200"> | |
| <div class="max-w-6xl mx-auto px-6 py-12"> | |
| <div class="flex flex-col md:flex-row items-center justify-between gap-6"> | |
| <div class="flex items-center gap-2 font-bold text-lg"> | |
| <i data-feather="cloud" class="w-5 h-5"></i>CampusMind | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <a href="mailto:hello@campusmind.me" class="hover:text-white"><i data-feather="mail"></i></a> | |
| <a href="https://t.me/campusmind" target="_blank" class="hover:text-white"><i data-feather="send"></i></a> | |
| <a href="https://instagram.com/campusmind" target="_blank" class="hover:text-white"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-xs text-slate-400">© <span id="year"></span> CampusMind. Made with ❤️ for Narxoz students.</div> | |
| </div> | |
| </footer> | |
| <!-- SCRIPTS --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |