Mental-Health/about.html at main · K-Mirembe-Mercy/Mental-Health · GitHub

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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About MindLift — Our Mission & Values</title>
<meta name="description" content="MindLift is a free mental health support platform built with compassion. Learn about our mission, values, and important medical disclaimers.">
<meta name="robots" content="index, follow">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="shared.css">
<style>
/* Hero */
.about-hero {
  padding: 88px 5vw 64px;
  background: linear-gradient(135deg, var(--bg2), var(--bg));
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  max-width: var(--max-w); margin: 0 auto;
}
@media(max-width:720px){ .about-hero { grid-template-columns: 1fr; } }
.about-hero h1 { font-family: var(--font-d); font-size: clamp(2.2rem,6vw,4rem); font-weight: 300; line-height: 1.1; }
.about-hero h1 em { font-style: italic; color: var(--accent); }
.about-hero p { color: var(--text2); font-size: 1.05rem; font-weight: 300; line-height: 1.8; margin-top: 16px; }
.about-visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.about-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  text-align: center;
}
.about-stat-card:nth-child(odd) { margin-top: 20px; }
.about-stat-num { font-family: var(--font-d); font-size: 2.5rem; font-weight: 300; }
.about-stat-label { font-size: 0.78rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

/* Mission */
.mission-section {
  padding: 80px 5vw; max-width: var(--max-w); margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media(max-width:720px){ .mission-grid { grid-template-columns: 1fr; } }
.mission-text h2 { font-family: var(--font-d); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 300; margin-bottom: 20px; line-height: 1.2; }
.mission-text h2 em { font-style: italic; color: var(--accent3); }
.mission-text p { color: var(--text2); font-size: 0.97rem; line-height: 1.85; font-weight: 300; margin-bottom: 14px; }
.principle-list { display: flex; flex-direction: column; gap: 14px; }
.principle { display: flex; gap: 14px; align-items: flex-start; }
.principle-icon { font-size: 1.5rem; flex-shrink: 0; width: 44px; height: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.principle-text h4 { font-weight: 700; font-size: 0.95rem; margin-bottom: 3px; }
.principle-text p { font-size: 0.85rem; color: var(--text2); margin: 0; }

/* Values */
.values-section { padding: 80px 5vw; max-width: var(--max-w); margin: 0 auto; border-bottom: 1px solid var(--border); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.value-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  position: relative; overflow: hidden;
  transition: all 0.3s;
}
.value-card:hover { transform: translateY(-4px); border-color: var(--border2); box-shadow: var(--shadow); }
.value-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient, linear-gradient(90deg, var(--accent), var(--accent3)));
}
.value-icon { font-size: 1.8rem; margin-bottom: 12px; display: block; }
.value-name { font-weight: 700; font-size: 0.98rem; margin-bottom: 8px; }
.value-desc { font-size: 0.85rem; color: var(--text2); line-height: 1.65; }

/* Team */
.team-section { padding: 80px 5vw; max-width: var(--max-w); margin: 0 auto; border-bottom: 1px solid var(--border); }
.team-intro {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px;
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.team-intro-icon { font-size: 3rem; flex-shrink: 0; }
.team-intro-text h3 { font-family: var(--font-d); font-size: 1.6rem; font-weight: 400; margin-bottom: 12px; }
.team-intro-text p { color: var(--text2); font-size: 0.92rem; line-height: 1.8; }

/* Disclaimer */
.disclaimer-section { padding: 80px 5vw; max-width: var(--max-w); margin: 0 auto; }
.disclaimer-card {
  background: rgba(255,140,107,0.05);
  border: 1.5px solid rgba(255,140,107,0.2);
  border-radius: var(--radius-lg); padding: 36px;
}
.disclaimer-card h3 { font-family: var(--font-d); font-size: 1.5rem; font-weight: 400; color: var(--accent2); margin-bottom: 16px; }
.disclaimer-card p { color: var(--text2); font-size: 0.9rem; line-height: 1.85; margin-bottom: 14px; }
.disclaimer-card p:last-child { margin-bottom: 0; }
.disclaimer-card strong { color: var(--text); }

/* Timeline */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--border2); }
.timeline-item { position: relative; margin-bottom: 28px; }
.timeline-item::before { content: ''; position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.timeline-date { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 4px; }
.timeline-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.timeline-desc { font-size: 0.85rem; color: var(--text2); }
</style>
</head>
<body>
<main id="main">

<!-- HERO -->
<div style="background: linear-gradient(135deg, var(--bg2), var(--bg)); border-bottom: 1px solid var(--border);">
  <div class="about-hero">
    <div>
      <div class="tag">Our Story</div>
      <h1>Built with <em>compassion,</em><br>not algorithms.</h1>
      <p>MindLift began with a simple belief: everyone deserves access to quality mental health support, regardless of where they live or what they can afford. We built the tools we wished existed.</p>
      <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:28px">
        <a href="tools.html" class="btn btn-primary">Explore the Tools</a>
        <a href="#disclaimer" class="btn btn-ghost">Read Disclaimer</a>
      </div>
    </div>
    <div class="about-visual" aria-hidden="true">
      <div class="about-stat-card"><div class="about-stat-num" style="color:var(--accent)">5</div><div class="about-stat-label">Free Tools</div></div>
      <div class="about-stat-card"><div class="about-stat-num" style="color:var(--accent3)">8+</div><div class="about-stat-label">Articles</div></div>
      <div class="about-stat-card"><div class="about-stat-num" style="color:var(--accent2)">15+</div><div class="about-stat-label">Helplines</div></div>
      <div class="about-stat-card"><div class="about-stat-num" style="color:var(--accent4)">∞</div><div class="about-stat-label">Free Forever</div></div>
    </div>
  </div>
</div>

<!-- MISSION -->
<section class="mission-section reveal" aria-labelledby="mission-heading">
  <div class="mission-grid">
    <div class="mission-text">
      <div class="tag mint">Our Mission</div>
      <h2 id="mission-heading">Making mental health support <em>accessible to all.</em></h2>
      <p>Mental health care is a human right, not a luxury. Yet globally, more than 75% of people with mental health conditions receive no treatment — often due to cost, stigma, or simply not knowing where to start.</p>
      <p>MindLift doesn't replace therapy. We fill the gap: providing immediate tools for difficult moments, education to reduce stigma, and clear pathways to professional help when it's needed.</p>
    </div>
    <div class="principle-list">
      <div class="principle">
        <div class="principle-icon">🌱</div>
        <div class="principle-text"><h4>Evidence-Based</h4><p>Every tool and article is grounded in peer-reviewed research and validated clinical frameworks like CBT, DBT, and mindfulness-based approaches.</p></div>
      </div>
      <div class="principle">
        <div class="principle-icon">🔒</div>
        <div class="principle-text"><h4>Privacy-First</h4><p>Your mood logs and journal entries are stored locally on your device. We don't collect, sell, or analyze your personal emotional data.</p></div>
      </div>
      <div class="principle">
        <div class="principle-icon">💙</div>
        <div class="principle-text"><h4>Compassion First</h4><p>Every word on this site was written for someone who is struggling. We don't pathologize, stigmatize, or minimize. We meet you where you are.</p></div>
      </div>
      <div class="principle">
        <div class="principle-icon">🚀</div>
        <div class="principle-text"><h4>Always Improving</h4><p>We continuously update our tools and content based on emerging research, user feedback, and evolving best practices in mental health care.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- VALUES -->
<section class="values-section" aria-labelledby="values-heading">
  <div class="reveal">
    <div class="tag">What We Stand For</div>
    <h2 class="section-title" id="values-heading">Our <em>values</em></h2>
    <p class="section-sub">These aren't just words on a page — they guide every decision we make.</p>
  </div>
  <div class="values-grid reveal">
    <div class="value-card" style="--gradient:linear-gradient(90deg,#5e9bff,#5effd8)">
      <span class="value-icon">🧠</span>
      <div class="value-name">Science-Backed</div>
      <p class="value-desc">We use validated tools (PHQ-9, GAD-7) and evidence-based frameworks (CBT, ACT, DBT). No pseudoscience, no wellness buzzwords without research.</p>
    </div>
    <div class="value-card" style="--gradient:linear-gradient(90deg,#5effd8,#c084fc)">
      <span class="value-icon">🚫</span>
      <div class="value-name">Zero Judgment</div>
      <p class="value-desc">Mental illness is not weakness. Seeking help is courage. Every person who comes to MindLift deserves dignity, not shame.</p>
    </div>
    <div class="value-card" style="--gradient:linear-gradient(90deg,#c084fc,#ff8c6b)">
      <span class="value-icon">🌍</span>
      <div class="value-name">Inclusive</div>
      <p class="value-desc">Mental health challenges affect everyone, regardless of age, culture, gender, or background. Our resources are as universal as we can make them.</p>
    </div>
    <div class="value-card" style="--gradient:linear-gradient(90deg,#ff8c6b,#5e9bff)">
      <span class="value-icon">🔑</span>
      <div class="value-name">Free & Open</div>
      <p class="value-desc">Every tool, article, and resource on MindLift is completely free. Mental health support should not be gated by ability to pay.</p>
    </div>
    <div class="value-card" style="--gradient:linear-gradient(90deg,#5e9bff,#c084fc)">
      <span class="value-icon">🏥</span>
      <div class="value-name">Pro-Professional</div>
      <p class="value-desc">We actively encourage users to seek professional help. Our tools are bridges, not replacements for therapy, psychiatry, or crisis services.</p>
    </div>
    <div class="value-card" style="--gradient:linear-gradient(90deg,#5effd8,#ff8c6b)">
      <span class="value-icon">🔒</span>
      <div class="value-name">Private by Design</div>
      <p class="value-desc">Your personal data stays on your device. We won't profit from your pain. Your emotional health data is yours alone.</p>
    </div>
  </div>
</section>

<!-- TEAM -->
<section class="team-section reveal" aria-labelledby="team-heading">
  <div class="tag violet">Behind MindLift</div>
  <h2 class="section-title" id="team-heading">Built by people who <em>get it.</em></h2>
  <p class="section-sub">MindLift was built by a team that includes people with lived experience of anxiety and depression, alongside researchers, designers, and mental health advocates.</p>
  <div class="team-intro">
    <div class="team-intro-icon">💙</div>
    <div class="team-intro-text">
      <h3>A Note from Our Team</h3>
      <p>Many of us built MindLift because we needed it. We've sat with anxiety at 3am, struggled to get out of bed, and navigated the confusing world of finding help. We know what it feels like to not know where to start.</p>
      <p>We built MindLift to be the resource we wished we'd had: honest, evidence-based, free, and kind. No upsells. No "premium features" that gate the support you need. Just tools, information, and pathways to real help.</p>
      <p>If you have feedback, if something helped you, or if something could be better — we genuinely want to know. Every improvement makes a real difference to real people on hard days.</p>
    </div>
  </div>
</section>

<!-- DISCLAIMER -->
<section class="disclaimer-section" id="disclaimer" aria-labelledby="disclaimer-heading">
  <div class="reveal">
    <div class="tag coral">Important Information</div>
    <h2 class="section-title" id="disclaimer-heading">Medical <em>Disclaimer</em></h2>
  </div>
  <div class="disclaimer-card reveal">
    <h3>⚠️ Please Read</h3>
    <p><strong>MindLift is not a medical service and is not a substitute for professional mental health care.</strong> The information, tools, and content provided on this website are for general informational and educational purposes only.</p>
    <p>The self-assessment tools on MindLift (including the PHQ-9 and GAD-7-based questionnaires) are <strong>screening tools only and do not constitute a clinical diagnosis</strong>. A formal diagnosis of any mental health condition must be made by a qualified healthcare professional.</p>
    <p>The AI Companion on MindLift is an artificial intelligence model and is <strong>not a licensed therapist, counselor, psychologist, or physician</strong>. It is not capable of providing clinical assessments, diagnoses, or treatment plans.</p>
    <p><strong>If you are experiencing a mental health crisis, having thoughts of suicide or self-harm, or are in immediate danger</strong>, please contact emergency services or a crisis helpline immediately. Do not rely on this website in an emergency situation.</p>
    <p>Always seek the advice of a qualified mental health professional before making any decisions about your treatment or healthcare. Never disregard professional medical advice or delay seeking it because of information you have read on this website.</p>
    <p><strong>Crisis resources</strong> are available at all times on our <a href="resources.html">Resources page</a>, or call 988 (US), 116 123 (UK), or your local emergency number.</p>
  </div>
</section>

<!-- CTA -->
<section class="section" style="padding-top:0;text-align:center">
  <div class="card reveal" style="border-radius:22px;padding:48px;max-width:600px;margin:0 auto">
    <div style="font-size:3rem;margin-bottom:16px">🌱</div>
    <h2 style="font-family:var(--font-d);font-size:2rem;font-weight:300;margin-bottom:12px">Ready to start?</h2>
    <p style="color:var(--text2);margin-bottom:28px">Everything is here, everything is free, and it only takes a moment to begin.</p>
    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
      <a href="tools.html" class="btn btn-primary">🛠️ Open the Toolkit</a>
      <a href="resources.html" class="btn btn-ghost">🆘 Find Help Now</a>
    </div>
  </div>
</section>

</main>
<script src="nav.js"></script>
</body>
</html>