Hugging Face's logo

Spaces:
ufocoder
/
serenecampus-haven
Running

App Files Community
serenecampus-haven
File size: 10,256 Bytes 
08fe009
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
 
<!DOCTYPE html>
<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>