-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
261 lines (232 loc) · 15.2 KB
/
index.html
File metadata and controls
261 lines (232 loc) · 15.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.7/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class=" min-h-screen min-w-screen flex items-center justify-center">
<div class="outerbox">
<div class="box1 mt-4 ">
<div class=" p-4 py-2 flex justify-between items-center">
<div class="flex items-center space-x-4 ml-4">
<img src="https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/2a/3f/ad/2a3fad27-0900-8d2a-a1d2-67b675e18c1a/AppIcon-1x_U007emarketing-0-7-0-85-220.png/246x0w.webp" alt="Logo" class="h-10 w-10 ml-12 mr-36 ">
<a href="#" class="text-black hover:text-gray-300 ">Emotions</a>
<a href="#" class="text-black hover:text-gray-300">Manifesto</a>
<a href="#" class="text-black hover:text-gray-300">Self-Awareness test</a>
<a href="#" class="text-black hover:text-gray-300">Work with us</a>
</div>
<a href="#" class="bg-black text-white px-4 py-2 rounded-full mr-4 hover:bg-gray-800">Download App</a>
</div>
<div class="content">
<div class="item11">
<div class="item111" >
<div class="element1"> </div>
<div class="element2" style="padding-left: 20px;">
<p style="padding-bottom: 10px;">Ahead App</p>
<div class="text-5xl font-bold">
Master your life
</div>
<div class="text-5xl font-bold">
by mastering
</div>
<div class="text-5xl font-bold" >
emotions
</div> </div>
</div>
<div class="item112" style="padding-left: 10px;" >
<div class="logo1"><img src="https://imgs.search.brave.com/-OozSp3P6msiNA5b07-nMOP4rUc0ii2P4ROL_Zifg04/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9kZXZl/bG9wZXIuYXBwbGUu/Y29tL2Fzc2V0cy9l/bGVtZW50cy9iYWRn/ZXMvZG93bmxvYWQt/b24tdGhlLWFwcC1z/dG9yZS5zdmc.svg" alt="Logo" class="h-30 w-30 ml-4 mt-4"></div>
<div class="logo2"><img src="https://imgs.search.brave.com/sEcqtj6_95Lj3VaiMPc_SgMddMvKdVCINJ1DTpXd3rM/rs:fit:500:0:0/g:ce/aHR0cHM6Ly90My5m/dGNkbi5uZXQvanBn/LzAzLzM1LzkxLzkw/LzM2MF9GXzMzNTkx/OTAwM19USDBadEha/WjVRR1QzNG4xTmNR/WHpSR3Z6NFB0aGcx/MS5qcGc" alt="Image Description" class="h-15 w-20 mt-4 "></div>
</div>
</div>
<div class="item12"> </div>
</div>
</div>
<div class="box2 mt-4"><div class="item21">
<div class="item211 p-6"><p class="font-bold text-2xl px-4 py-2">EQ beats IQ</p></div>
<div class="item212 p-6"><p>People with high emotional intelligence (EQ) live more fulfilled lives. They tend to be happier and have healthier relationships.</p></div>
<div class="item213 p-6"><p>They are more successful in their pursuits and make for inspiring leaders. According to science, they earn $29k per year.</p></div>
</div>
<div class="item22">
<div class="item221"><p class="font-bold text-4xl px-4 py-2">Does this sound familiar...</p></div>
<div class="item222">
<div class="boxes bg-red-100" id="box1">
<p class="text-3xl text-red-600 pl-4 pt-4">😠</p>
<p class="font-bold">You argue with a colleage</p>
<p>You get angry and defensive, instead of staying open and working towards common ground.</p>
</div>
<div class="boxes bg-green-100" id="box2">
<p class="text-3xl text-red-600 pl-4 pt-4">🤨</p>
<p class="font-bold">You attend a class reunion</p>
<p>You compare yourself with your peers' achievements, instead of making your self-judgement more independent of others</p>
</div>
<div class="boxes bg-blue-100 rotate-12" id="box3">
<p class="text-3xl text-red-600 pl-4 pt-4">😒</p>
<p class="font-bold">You are at a lively dinner party</p>
<p>You play on your phone,instead of confidently approaching strangers and striking up a chat.</p>
</div>
<div class="boxes bg-yellow-100" id="box4">
<p class="text-3xl text-red-600 pl-4 pt-4">😬</p>
<p class="font-bold">You hit dead end in a negotiation</p>
<p>You get nervous,frazzled and frustrated,instead of staying calm and solution-oriented.</p>
</div>
</div>
</div></div>
<div class="box3 mt-4 "><div class="item31">
<p class=" pt-24 pl-12">Built out of frustration</p>
<p class="font-bold text-4xl pl-12">Meet the ahead app</p>
</div>
<div class="item32"><p class="pt-48 pr-4">A personlised pocket coach that provides bite-sized ,science-driven tools to boost emotional intelligence.<br> <br>Think of it as a pocket cheerleader towards a better, more fulfilling.</p></div></div>
<div class="box4 mt-4 "><div class="item41">
<p class=" font-bold pt-16">Wrong with self-improvement & how we're fixing it.</p>
<p class="font-bold text-4xl">Self-improvement.Ugh.</p>
</div>
<div class="item42">
<div class="item421">
</div>
<div class="item422">
<div class="h-96 overflow-y-scroll pl-24">
<ul class="space-y-4 p-4">
<li class= " fade-item">
<p class=" font-bold text-lg">Its not as easy as 1-2-3</p>
<p class="text-lg">The journey of change maybe long, but our sessions are quick. We get to the point and tell you what you want to know.</p>
</li>
<li class=" fade-item">
<p class=" font-bold text-lg">Old habits are hard to break</p>
<p class="text-lg">And bad behaviours die hard.Fortunately,we give you great, science-backed techniques to use.</p>
</li>
<li class=" fade-item">
<p class=" font-bold text-lg">You and your motivation don't have a long term relationship.</p>
<p class="text-lg">Luckily, we can proactively prepare you for the marathon,not just the race. Effectively, memorable exercise will help you stick to your goals</p>
</li>
<li class= "fade-item">
<p class=" font-bold text-lg "> Books just don't offer practical solution.</p>
<p class="text-lg"> Remember when you learned to ride a bike just by reading? Yeah, we don't either</p>
</li>
<li class=" fade-item ">
<p class=" font-bold text-lg">Inspiration is great, but then what</p>
<p >We make sure your energy from all the content you consume does not fizzle out.</p>
</li>
</ul>
</div>
</div>
</div></div>
<div class="box5 mt-4 "><div class="item51"><p class="font-bold text-4xl p-4">Be the best you with EQ</p></div>
<div class="item52 font-bold p-4"><p>Not having your own emotions under control might be holding you back.</p></div>
<div class="item53 font-bold p-4"><p>Additionally,not understanding those of others stops you from being parent,friend you can be.</p></div></div>
<div class="box6 mt-4"><div class="item61"><div class="text1">
<p class="font-bold text-center ">Let your friends, family and co-workers(anonymously) rate your social skills.</p>
<p class="text-4xl text-center font-bold"> Ever wondered what others think of you?</p> </div>
<ul class=" pl-24 pt-12 list-none p-0 flex space-x-48">
<li class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-yellow-400 text-white rounded-full mr-2">1</div>
</li>
<li class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-yellow-400 text-white rounded-full mr-2">2</div>
</li>
<li class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-yellow-400 text-white rounded-full mr-2">3</div>
</li>
</ul>
<ul class=" pl-20 list-none p-0 flex space-x-20">
<li class="flex items-center">Analyze questions on <br>your social skills</li>
<li class="flex items-center">Let others anonymously <br> answer same questions about you</li>
<li class="flex items-center">Find out where you and others see things<br> the same way- and where not!</li>
</div>
<div class="item62">
<div class="innerbox"></div>
</div></div>
<div class="box7">
<p class=" font-bold text-center mt-24"> We take privacy seriously.</p>
<p class="text-3xl text-center font-bold">Before you get started</p>
<p class="text-xl text-center"> "We won't share your answers with anyone (and won't ever tell <br> yoou which friends said what about you)" </p>
<p class="text-center">with love,</p>
<div class="flex justify-center">
<a href="#" class=" text-center bg-black text-white px-4 py-2 rounded-full mt-4 hover:bg-gray-800">Start a test</a> </div>
<p class="text-center text-sm mt-4">Take only 5 minutes.</p>
</div>
<div class="box8 mt-4">
<div class="item81">
<p class="text-5xl font-bold pl-8 pt-16">Work with us</p>
<div class="w-1/0.8 h-72 rounded ml-8 mt-8 bg-white">
<p class="font-bold text-xl pl-4 pt-16">About</p>
<p class="p-4">At ahead our goal is to make self-improvement fun and lasting. We know there's a way how to make it work. And that's what ahead is all about!</p>
</div>
<div class=" product w-1/0.8 h-48 rounded ml-8 bg-white">
<p class="font-bold text-xl p-4">Product</p>
<p class="p-4">Sure, you can spend ages reading books or sitting in seminars on how to become a better spouse,parent, or manager-like we did...</p>
</div>
</div>
<div class="item81">
<p class="font-bold text-5xl text-blue-500 pt-16 text-right pr-12 pb-12">ahead</p>
<div class="h-96 overflow-y-scroll pt-12">
<ul>
<li ><div class=" flash h-40 w-1/2 bg-white rounded ml-auto mr-12 mt-4">
<p class="font-bold">Power through, even when the going gets tough.</p>
<p>We help you spot and work around whatever stands in the way, be it bad habits, fears etc</p>
</div></li>
<li ><div class=" flash h-40 w-1/2 bg-white rounded ml-auto mr-12 mt-4">
<p class="font-bold">Learn more about who you are and where you want to go</p>
<p>We ask the right questions to help you better understand why you do the things the way you do</p>
</div></li>
<li ><div class=" flash h-40 w-1/2 bg-white rounded ml-auto mr-12 mt-4">
<p class="font-bold">Play and grow together with others on the same journey.</p>
<p>Ahead feels like a game,not like a chore.See yourself grow everyday towards achieving your goal.</p>
</div></li>
<li ><div class=" flash h-40 w-1/2 bg-white rounded ml-auto mr-12 mt-4">
<p class="font-bold">Learn about practical skills that you can actually use in real life</p>
<p>We teach you smart psychological techniques and habit-forming strategies that are easy to apply.</p>
</div></li>
</ul> </div>
</div>
</div>
<div class="box9 mt-4">
<p class="text-4xl font-bold pl-8 pt-8">Open vacancies</p>
<div class="flex">
<div class="relative spaces w-1/3 h-52 p-4 m-12 " >
<p class="text-lg font-bold">Senior Full-stack engineer</p>
<ul class="list-disc pl-4">
<li>Full-time position</li>
<li>Berlin or remote</li>
<li>€ 65-85k,0.5-1.5% equity share options</li>
</ul>
<a href="#" class=" hiddenlink hidden absolute bottom-2 bg-black text-white px-4 py-2 rounded-full ml-4 hover:bg-gray-800">See Details</a>
</div>
<div class="relative spaces w-1/3 h-52 p-4 m-12 ">
<p class="text-lg font-bold">Senior Designer</p>
<ul class="list-disc pl-4">
<li>Full-time position</li>
<li>Berlin or remote</li>
<li>€ 40-55k,0.25-0.50% equity share options</li>
</ul>
<a href="#" class="hiddenlink hidden absolute bottom-2 bg-black text-white px-4 py-2 rounded-full ml-4 hover:bg-gray-800">See Details</a>
</div>
<div class=" relative spaces w-1/3 h-52 p-4 m-12 ">
<p class="text-lg font-bold">Senior Full-stack engineer</p>
<ul class="list-disc pl-4">
<li>Full-time position</li>
<li>Berlin or remote</li>
<li>€ 20-24k,0.50-1.50% equity share options</li>
</ul>
<a href="#" class="hiddenlink hidden absolute bottom-2 bg-black text-white px-4 py-2 rounded-full ml-4 hover:bg-gray-800">See Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="border-t-2 border-gray-500 mt-4"></div>
<footer class=" text-black p-4 h-100">
<div class=" p-4 text-center"><figure>
<img src="https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/2a/3f/ad/2a3fad27-0900-8d2a-a1d2-67b675e18c1a/AppIcon-1x_U007emarketing-0-7-0-85-220.png/246x0w.webp" alt="Logo" class="h-10 w-10 mx-auto"><figcaption class="font-bold text-xl text-blue-500"> ahead</figcaption>
</div>
<img src="https://imgs.search.brave.com/-OozSp3P6msiNA5b07-nMOP4rUc0ii2P4ROL_Zifg04/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9kZXZl/bG9wZXIuYXBwbGUu/Y29tL2Fzc2V0cy9l/bGVtZW50cy9iYWRn/ZXMvZG93bmxvYWQt/b24tdGhlLWFwcC1z/dG9yZS5zdmc.svg" alt="Logo" class="h-30 w-30 mx-auto">
<div class="text-sm mt-4 text-center">
© 2022 Ahead app. All rights reserved.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="index.js"></script>
</body></html>