-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
400 lines (360 loc) · 19.4 KB
/
index.html
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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Elixir✨</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> -->
<link href="https://use.typekit.net/aau7bqv.css%22%3E rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top header-transparent ">
<div class="container d-flex align-items-center">
<div class="logo mr-auto">
<h1 class="text-light" style="font-family: 'Inter', sans-serif"><a href="index.html">Elixir✨</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#features">Distortions</a></li>
<li><a href="#details">CBT</a></li>
<li><a href="#privacy">Privacy</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#testimonials">Team</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<div class="container">
<div class="row">
<div
class="col-lg-6 d-lg-flex flex-lg-column justify-content-center align-items-stretch pt-5 pt-lg-0 order-2 order-lg-1"
data-aos="fade-up">
<div>
<h1>Get Access To Cognitive Behavioral Therapy</h1>
<h2>We see quirk as a "front-door" to professional help. Many people neglect seeking a therapist or
psychiatrist because they don't feel their problem is "big enough" or they're not aware just how effective
CBT can be.</h2>
<a target = "_blank" href="https://github.com/SuhitAgarwal/quirk-by-elixir" class="download-btn"><i class="bx bx-download"></i> Get App</a>
</div>
</div>
<div class="col-lg-6 d-lg-flex flex-lg-column align-items-stretch order-1 order-lg-2 hero-img"
data-aos="fade-up">
<img src="https://user-images.githubusercontent.com/5942769/54972305-4081d180-4f48-11e9-91d8-7e8117668418.gif" class="img-fluid" alt="">
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= App Features Section ======= -->
<section id="features" class="features">
<div class="container">
<div class="section-title">
<h2>Cognitive Distortion</h2>
<p>Your brain is really good at making you feel exactly what you're thinking. We'll have "automatic negative
thoughts" that lead us to fume on something that may not be "true". The thought process here is a type of
<b>Cognitive Distortion</b> that mental health professionals call Catastrophizing. It's like a logicial
fallacy that's often at the root of your automatic negative thoughts.
</p>
</div>
<div class="row no-gutters">
<div class="col-xl-7 d-flex align-items-stretch order-2 order-lg-1">
<div class="content d-flex flex-column justify-content-center">
<div class="row">
<div class="col-md-6 icon-box" data-aos="fade-up">
<i class="bx bx-meh-blank"></i>
<h4>All or Nothing Thinking</h4>
<p>This distortion happens when we have no room for middle ground. If we think that a small fault in
ourselves means we’re fundamentally rotten or otherwise terrible, we’re likely engaging in <b>All or
Nothing Thinking.</b></p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<i class="bx bx-dizzy"></i>
<h4>Catastrophizing</h4>
<p>If we’re taking a small problem and blowing it way out of proportion, we’re <b>Catastrophizing</b>.
Did you make a small mistake at work and are dreading if someone found out even though it’s nothing
serious? You’re probably catastrophizing.</p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<i class="bx bx-brain"></i>
<h4>Mind Reading</h4>
<p>If we're worried about what someone else is thinking about us, we're <b>Mind Reading</b>. Unless
someone tells you what they're thinking, you have absolutely no way of knowing. So why assume the
worst?</p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
<i class="bx bx-downvote"></i>
<h4>Minimization of the Positive</h4>
<p>If we downplay the good things that are happening to us, we're <b>minimizing the positive</b>. Even
if our day didn't go 100% as planned, it doesn't mean that the 60% that did go right should be
ignored.</p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400">
<i class="bx bx-zoom-out"></i>
<h4>Magnification of the Negative</h4>
<p>If we're judging a situation based entirely on the negative parts and not considering the positive
parts, we're likely <b>magnifying the negative</b>. If we’re constantly berating ourselves for
bombing a job interview, we're probably filtering out all the experience we gained from that
interview.</p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
<i class="bx bx-transfer"></i>
<h4>Labeling</h4>
<p>If we're taking one characteristic of a person and applying it to the whole person, we're
<b>Labeling</b>. If someone brushed us off, they might not be a "jerk," maybe they're just in a
hurry. This applies to ourselves as well; just because we make a mistake doesn't mean we're a
"failure."
</p>
</div>
</div>
</div>
</div>
<div class="image col-xl-5 d-flex align-items-stretch justify-content-center order-1 order-lg-2"
data-aos="fade-left" data-aos-delay="100">
<img src="assets/img/features.svg" class="img-fluid" alt="">
</div>
</div>
</div>
</section><!-- End App Features Section -->
<!-- ======= Details Section ======= -->
<section id="details" class="details">
<div class="container">
<div class="row content">
<div class="col-md-4" data-aos="fade-right">
<img src="assets/img/details-1.png" class="img-fluid" alt="">
</div>
<div class="col-md-8 pt-4" data-aos="fade-up">
<h3>What is Cognitive Behavioral Therapy?</h3>
<p>
Cognitive Behavioral Therapy (CBT) is the <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5797481/"
target="_blank">"gold standard" of psychotherapy</a> and is widely considered to be one of the <a
target="_blank" href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3584580/">most effective, evidence
backed treatments</a> for depression, anxiety, and panic. If you go into just about any therapist or
psychiatrist, CBT will likely be one of the first treatments they try.
</p>
<p>
quirk is a companion app for one of the most common exercises in CBT. You may have heard it called "the
three column technique" or "catch it, check it, change it."
</p>
<p>You don't need to be diagnosed with anything to try CBT. It can still help you overcome any stress, fear,
and sadness you encounter in life.</p>
</div>
</div>
<div class="row content">
<div class="col-md-4 order-1 order-md-2" data-aos="fade-left">
<img src="assets/img/details-2.png" class="img-fluid" alt="">
</div>
<div class="col-md-8 pt-5 order-2 order-md-1" data-aos="fade-up">
<h3>Your thoughts cause your moods</h3>
<p>
Your brain is really good at making you feel exactly what you're thinking. We'll have "automatic negative
thoughts" that lead us to fume on something that may not be "true". Often the more our thoughts cause us
distress, the more likely they are to be distorted.
</p>
<p>
For example, let's say we just got out of a job interview and thought this:
</p>
<p class="font-italic">"I took too long to answer that question"</p>
<p>
The thought is pretty harmless, but it could lead to a series of more upsetting and distorted thoughts:
</p>
<p class="font-italic">"Because I took too long, I'll bet I failed the interview."</p>
<p class="font-italic">"Because I failed this one, I'll probably fail all interviews I get."</p>
<p class="font-italic">"Because I'll fail all my interviews, I'm probably just bad at this career and I
should give up."</p>
</div>
</div>
<div class="row content">
<div class="col-md-4" data-aos="fade-right">
<img src="assets/img/details-3.png" class="img-fluid" alt="">
</div>
<div class="col-md-8 pt-5" data-aos="fade-up">
<h3>Challenge the Thought</h3>
<p>Distortions give us a framework to challenge the negative thoughts.</p>
<ul>
<li> Is it true that taking too long to answer an interview question will lead to failing the interview?
Or are we <b>Fortune Telling?</b></li>
<li>Is it true that failing one interview will cause us to fail other interviews? Or are we
<b>Catastrophizing?</b>
</li>
</ul>
<p>
Even if we were "bad" at this career (<b>Labeling</b>), would it be so bad? Many people are terrible at a
whole number of careers. An astrophysicist isn't remotely good at surgery. A teacher might be an awful
lawyer. A banker may not be the best firefighter.
</p>
<p>
Digging deeper into our thoughts can often help us find core beliefs that are fueling the thoughts. In
this case, we likely believe that we should be great at our job. But no one is guaranteed to be the best
at everything and it's fine to just be average. By definition, most people are.
</p>
</div>
</div>
<div class="row content">
<div class="col-md-4 order-1 order-md-2" data-aos="fade-left">
<img src="assets/img/details-4.png" class="img-fluid" alt="">
</div>
<div class="col-md-8 pt-5 order-2 order-md-1" data-aos="fade-up">
<h3>Change the Thought</h3>
<p>
Finally, we get to the <b>point of this exercise:</b> changing your thoughts. If we let ourselves sit and
cycle through this type of thought, we'll just make ourselves miserable.
</p>
<p>
So instead, we'll incorporate our challenges and write down what a logical automatic thought might be:
</p>
<p class="font-italic">
"I may not have done as well as I would have liked in that interview, but it's good practice."
</p>
</div>
</div>
</div>
</section><!-- End Details Section -->
<!-- ======= Privacy Section ======= -->
<section id="privacy" class="pricing">
<div class="container">
<div class="section-title">
<h2>Privacy & Data Collection</h2>
<p>quirk treats your thoughts as the most sensitive possible data, because it is your most sensitive possible
data.</p>
<br>
<p>So like rational people: <b>we do not record or store your thoughts.</b></p>
<br>
<p>We don't want to know your thoughts. When you will record something in quirk, it will live on your phone,
not on some server in some city or something. In the future, we could create a cloud-sync feature. If we do
this, your thoughts will be client-side encrypted.</p>
</div>
</div>
</section><!-- End Privacy Section -->
<!-- ======= Gallery Section ======= -->
<section id="gallery" class="gallery">
<div class="container">
<div class="section-title">
<h2>Gallery</h2>
</div>
<div class="owl-carousel gallery-carousel" data-aos="fade-up">
<a href="assets/img/gallery/gallery-1.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-1.png" alt=""></a>
<a href="assets/img/gallery/gallery-2.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-2.png" alt=""></a>
<a href="assets/img/gallery/gallery-3.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-3.png" alt=""></a>
<a href="assets/img/gallery/gallery-4.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-4.png" alt=""></a>
<a href="assets/img/gallery/gallery-5.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-5.png" alt=""></a>
<!-- <a href="assets/img/gallery/gallery-6.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-6.png" alt=""></a>
<a href="assets/img/gallery/gallery-7.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-7.png" alt=""></a>
<a href="assets/img/gallery/gallery-8.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-8.png" alt=""></a>
<a href="assets/img/gallery/gallery-9.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-9.png" alt=""></a>
<a href="assets/img/gallery/gallery-10.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-10.png" alt=""></a>
<a href="assets/img/gallery/gallery-11.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-11.png" alt=""></a>
<a href="assets/img/gallery/gallery-12.png" class="venobox" data-gall="gallery-carousel"><img
src="assets/img/gallery/gallery-12.png" alt=""></a> -->
</div>
</div>
</section><!-- End Gallery Section -->
<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials section-bg">
<div class="container">
<div class="section-title">
<h2>Our Team</h2>
<p>We are a team of undergraduate developers who are enthusiastic about making a difference in these trying
times.</p>
</div>
<div class="" data-aos="fade-up">
<div class="testimonial-wrap">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
<h3>Suhit Agarwal</h3>
<h6>App Developer</h6>
<h4><a target="_blank" href="https://suhit.me/">Website</a></h4>
</div>
</div>
<div class="testimonial-wrap">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
<h3>Anubhav Bagri</h3>
<h6>Web Developer</h6>
<h4><a target="_blank" href="https://www.linkedin.com/in/anubhavbagri/">LinkedIn</a></h4>
</div>
</div>
</div>
</div>
</section><!-- End Team Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-contact" data-aos="fade-up">
<h3>Elixir✨</h3>
<p>
Elixir's purpose is to help <br>
people get access to Cognitive <br>
Behavioral Therapy. <br><br>
<strong>Email : </strong><a href="#">contact@elixiryouneed.co</a><br>
<strong>Website Github : </strong> <a target = "_blank" href="https://github.com/anubhavbagri/elixir">source code</a><br>
<strong>App Github : </strong> <a target = "_blank" href="https://github.com/SuhitAgarwal/quirk-by-elixir">source code</a><br>
</p>
</div>
<div class="col-lg-3 col-md-6 footer-links" data-aos="fade-up" data-aos-delay="100">
</div>
<div class="col-lg-3 col-md-6 footer-links" data-aos="fade-up" data-aos-delay="200">
</div>
<div class="col-lg-3 col-md-6 footer-links" data-aos="fade-up" data-aos-delay="300">
</div>
</div>
</div>
</div>
<div class="container py-4">
<div class="copyright">
© Copyright <strong><span>Elixir✨</span></strong>. All Rights Reserved
</div>
<div class="credits">
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>