-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
507 lines (443 loc) · 50.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
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Title -->
<title>Qontext ™ | Remote Design Venture - Dare to be different</title>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="./favicon.ico">
<!-- Font -->
<link src="./assets/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin="">
<!-- Tailwind UI -->
<link href="./assets/css/app.css" rel="stylesheet" />
<!-- Scripts -->
<script src="https://right-distinct.tailwindui.com/script.js" data-site="SOXJJCZQ" data-auto="false" defer></script>
<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script>
window.Prism = window.Prism || {};
Prism.manual = true;
</script>
<script src="./assets/js/prism.js" defer></script>
<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script src="./assets/js/inertia.js" defer></script>
<!-- Facebook meta -->
<meta property="og:url" content="https://qontext.co" />
<meta property="og:type" content="company" />
<meta property="og:title" content="Qontext ™ | Remote Design Venture" />
<meta property="og:description" content="Grow your business through product design." />
<meta property="og:image" content="https://qontext.co/assets/img/meta/facebook.jpg" />
<!-- Twitter meta -->
<meta name="twitter:title" content="Qontext ™ | Remote Design Venture ">
<meta name="twitter:description" content="Grow your business through product design.">
<meta name="twitter:image" content=" https://qontext.co/assets/img/meta/twitter.jpg">
<meta name="twitter:card" content="summary_large_image">
</head>
<body class="font-sans antialiased text-gray-600 min-h-full flex flex-col">
<header class="relative z-50 w-full flex-none text-sm font-semibold leading-6 text-slate-900">
<nav aria-label="Global" class="mx-auto max-w-container px-4 sm:px-6 lg:px-8">
<div class="relative flex items-center py-[2.125rem]"><a class="mr-auto flex-none text-slate-900" href="/"><span class="sr-only">Tailwind UI</span>
<svg width="143" height="42" viewBox="0 0 143 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="41.3295" height="41.3295" rx="8" fill="#000"/>
<mask id="mask0_12_37" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="8" width="25" height="25">
<rect x="8" y="8" width="25" height="25" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_12_37)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.3138 14.9788C24.7037 14.8768 24.073 14.8395 23.4295 14.8739C18.6909 15.1275 15.0551 19.1745 15.3087 23.9131C15.3431 24.5565 15.4475 25.1796 15.6141 25.7754C11.7306 25.1262 8.67833 21.8546 8.45917 17.7595C8.20558 13.0208 11.8414 8.97386 16.58 8.72027C20.6752 8.50111 24.2538 11.1868 25.3138 14.9788Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6227 25.7832C16.2328 25.8852 16.8634 25.9225 17.5068 25.888C22.2454 25.6344 25.8812 21.5875 25.6276 16.8488C25.5932 16.2054 25.4888 15.5823 25.3223 14.9865C29.2058 15.6357 32.2582 18.9073 32.4773 23.0025C32.7309 27.7411 29.0951 31.7881 24.3565 32.0417C20.2613 32.2609 16.6827 29.5751 15.6227 25.7832Z" fill="white"/>
</g>
<path d="M84.3885 27.9271C83.3043 29.0188 81.9807 29.5647 80.4177 29.5647C78.8548 29.5647 77.5312 29.0188 76.447 27.9271C75.3768 26.821 74.8417 25.4706 74.8417 23.8761C74.8417 22.2816 75.3768 20.9385 76.447 19.8468C77.5312 18.7407 78.8548 18.1876 80.4177 18.1876C81.9807 18.1876 83.3043 18.7407 84.3885 19.8468C85.4727 20.9385 86.0149 22.2816 86.0149 23.8761C86.0149 25.4706 85.4727 26.821 84.3885 27.9271ZM78.369 26.0093C78.9181 26.5696 79.601 26.8497 80.4177 26.8497C81.2344 26.8497 81.9173 26.5696 82.4665 26.0093C83.0156 25.4491 83.2902 24.738 83.2902 23.8761C83.2902 23.0142 83.0156 22.3032 82.4665 21.7429C81.9173 21.1827 81.2344 20.9026 80.4177 20.9026C79.601 20.9026 78.9181 21.1827 78.369 21.7429C77.8339 22.3032 77.5664 23.0142 77.5664 23.8761C77.5664 24.738 77.8339 25.4491 78.369 26.0093Z" fill="#000"/>
<path d="M93.5921 18.1876C94.7467 18.1876 95.6972 18.5826 96.4435 19.3727C97.2038 20.1628 97.584 21.2545 97.584 22.6479V29.263H94.8594V22.9927C94.8594 22.2744 94.6693 21.7286 94.2891 21.3551C93.9089 20.9672 93.402 20.7733 92.7684 20.7733C92.0643 20.7733 91.5011 20.996 91.0787 21.4413C90.6562 21.8866 90.445 22.5546 90.445 23.4452V29.263H87.7204V18.4893H90.445V19.6959C91.1068 18.6904 92.1558 18.1876 93.5921 18.1876Z" fill="#000"/>
<path d="M105.74 21.1612H103.353V25.643C103.353 26.0165 103.445 26.2895 103.628 26.4618C103.811 26.6342 104.078 26.7348 104.43 26.7635C104.782 26.7779 105.219 26.7707 105.74 26.742V29.263C103.867 29.4785 102.544 29.2989 101.769 28.7243C101.009 28.1497 100.629 27.1226 100.629 25.643V21.1612H98.791V18.4893H100.629V16.313L103.353 15.4726V18.4893H105.74V21.1612Z" fill="#000"/>
<path d="M109.422 25.0182C109.788 26.3685 110.781 27.0436 112.4 27.0436C113.442 27.0436 114.231 26.6845 114.766 25.9662L116.962 27.2591C115.92 28.7961 114.385 29.5647 112.358 29.5647C110.612 29.5647 109.211 29.026 108.155 27.9486C107.099 26.8712 106.571 25.5137 106.571 23.8761C106.571 22.2529 107.092 20.9026 108.134 19.8252C109.176 18.7335 110.513 18.1876 112.147 18.1876C113.695 18.1876 114.97 18.7335 115.969 19.8252C116.983 20.9169 117.49 22.2673 117.49 23.8761C117.49 24.2353 117.455 24.6159 117.385 25.0182H109.422ZM109.38 22.8634H114.766C114.611 22.1308 114.287 21.5849 113.794 21.2258C113.315 20.8667 112.766 20.6871 112.147 20.6871C111.414 20.6871 110.809 20.881 110.33 21.2689C109.851 21.6424 109.535 22.1739 109.38 22.8634Z" fill="#000"/>
<path d="M128.32 29.263H125.173L122.892 25.9878L120.589 29.263H117.442L121.308 23.7684L117.611 18.4893H120.758L122.892 21.5275L125.025 18.4893H128.151L124.455 23.7468L128.32 29.263Z" fill="#000"/>
<path d="M135.509 21.1612H133.123V25.643C133.123 26.0165 133.214 26.2895 133.397 26.4618C133.58 26.6342 133.848 26.7348 134.2 26.7635C134.552 26.7779 134.988 26.7707 135.509 26.742V29.263C133.637 29.4785 132.313 29.2989 131.538 28.7243C130.778 28.1497 130.398 27.1226 130.398 25.643V21.1612H128.56V18.4893H130.398V16.313L133.123 15.4726V18.4893H135.509V21.1612Z" fill="#000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.9605 26.5695C67.3324 26.5695 70.0658 23.7809 70.0658 20.341C70.0658 16.901 67.3324 14.1124 63.9605 14.1124C60.5886 14.1124 57.8551 16.901 57.8551 20.341C57.8551 23.7809 60.5886 26.5695 63.9605 26.5695ZM63.9605 29.9363C69.155 29.9363 73.366 25.6404 73.366 20.341C73.366 15.0416 69.155 10.7456 63.9605 10.7456C58.7659 10.7456 54.5549 15.0416 54.5549 20.341C54.5549 25.6404 58.7659 29.9363 63.9605 29.9363Z" fill="#000"/>
<path d="M73.292 30.5838L73.6867 27.6034C68.7932 26.9084 66.1003 22.3201 65.3655 20.1129L62.4919 21.2675C64.964 27.8645 70.722 30.2271 73.292 30.5838Z" fill="#000"/>
<path d="M138.388 19.0021H137.72V18.4893H139.676V19.0021H139.003V21.1827H138.388V19.0021ZM139.971 18.4893H140.768L141.456 20.3871H141.505L142.184 18.4893H143V21.1827H142.42V19.3615H142.371L141.717 21.1827H141.255L140.601 19.3615H140.552V21.1827H139.971V18.4893Z" fill="#000"/>
</svg>
</a>
<div class="d-none hidden lg:flex lg:items-center"><a href="/components">Components</a><a class="ml-8" href="/templates">Templates</a>
<button type="button" class="-my-1 ml-6 -mr-1 flex h-8 w-8 items-center justify-center lg:hidden"><span class="sr-only">Open navigation</span><svg viewBox="0 0 24 24" class="h-6 w-6 stroke-slate-900"><path d="M3.75 12h16.5M3.75 6.75h16.5M3.75 17.25h16.5" fill="none" stroke-width="1.5" stroke-linecap="round"></path></svg></button>
<div class="hidden lg:ml-8 lg:flex lg:items-center lg:border-l lg:border-slate-900/15 lg:pl-8"><a href="/login">Sign in</a><a class="inline-flex justify-center rounded-lg text-sm font-semibold py-2.5 px-4 bg-slate-900 text-white hover:bg-slate-700 -my-2.5 ml-8" href="/all-access"><span>Get all-access <span aria-hidden="true">→</span></span></a></div>
</div>
</nav>
</header>
<div class="frame-general relative -mt-[5.75rem] overflow-hidden pt-[5.75rem] pb-24"><img src="#" alt="" class="absolute -top-[1rem] left-1/2 -ml-[40rem] w-[163.125rem] max-w-none sm:-ml-[67.5rem]">
<img src="./assets/svg/qontext-seal.svg" class="qontext-seal spin" width="185">
<img src="#" alt="" class="absolute -top-[1rem] left-1/2 -ml-[40rem] w-[163.125rem] max-w-none sm:-ml-[67.5rem]">
<div class="relative mx-auto mt-16 grid w-full max-w-container grid-cols-1 px-4 sm:mt-20 sm:px-6 lg:px-8 xl:mt-20">
<div class="col-start-1 row-start-1 h-7 text-base font-semibold leading-7" aria-hidden="true">Remote Design Venture</div>
<h1 class="col-start-1 row-start-2 mt-4 max-w-[36rem] text-4xl font-extrabold tracking-tight text-slate-900 sm:text-7xl xl:max-w-[40.5rem]">Defy convention. </br>Be different.</h1>
<p class="hero-text col-start-1 row-start-3 mt-4 max-w-lg text-lg text-slate-700">We help companies and startups exploit differenciating values to impact their business <span class="inline-q">Q</span>ontext through product design and digital user experiences.</p>
<div class="col-start-1 row-start-4 mt-10 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0"><a class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700" href="https://contact.qontext.co" target="_blank"><span>Get your idea started <span aria-hidden="true" class="hidden text-slate-400 sm:inline">→</span></span></a>
<a class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-white/0 text-slate-900 ring-1 ring-slate-900/10 hover:bg-white/25 hover:ring-slate-900/15 " href="https://book.qontext.co" target="_blank"><span>Schedule a virtual call <span aria-hidden="true" class="hidden text-black/25 sm:inline">→</span></span>
</a>
</div>
<div class="frame-components pointer-events-none col-start-1 row-start-5 flex md:row-span-3 md:row-start-3 lg:row-span-4 lg:row-start-2 xl:row-span-5 xl:row-start-1 xl:justify-end">
<div class="mt-12 -ml-[32rem] h-[46.375rem] origin-top scale-[calc(204/299)] select-none sm:-mt-20 sm:-ml-[24rem] sm:h-auto sm:transform-none md:-ml-64 md:mt-10 lg:-ml-16 lg:mt-0 xl:ml-0 xl:-mr-4">
<div class="flex justify-end">
<div class="relative flex items-end">
<div class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="hidden absolute top-full left-16 -mt-px h-8 overflow-hidden">
<div class="flex -mt-px h-[2px] w-56">
<div class="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
<div class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
</div>
</div>
<div>
<div class="p-4">
<div class="ml-auto pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 ring-inset transition duration-200 ease-in-out bg-black-600 ring-black/20">
<div class="h-4 w-4 rounded-full bg-white shadow-sm ring-1 ring-slate-700/10 transition duration-200 ease-in-out translate-x-4"></div>
</div>
<div class="mt-8 flex items-center justify-end">
<div class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 ring-inset transition duration-200 ease-in-out bg-slate-900/10 ring-slate-900/5">
<div class="h-4 w-4 rounded-full bg-white shadow-sm ring-1 ring-slate-700/10 transition duration-200 ease-in-out"></div>
</div>
<div class="pointer-events-auto ml-8 rounded-md bg-black-600 py-2 px-3 text-[0.8125rem] font-semibold leading-5 text-white hover:bg-black-500">Button A</div>
</div>
</div>
<div class="relative z-10 p-4 text-right">
<div class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute inset-0 -right-px bg-gradient-to-br from-white/0 via-white/25 to-white/0"></div>
<div class="pointer-events-auto relative inline-flex rounded-md bg-white text-[0.8125rem] font-medium leading-5 text-slate-700 shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50 hover:text-slate-900">
<div class="flex py-2 px-3"><svg class="mr-2.5 h-5 w-5 flex-none fill-slate-400"><path d="M5 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v14l-5-2.5L5 18V4Z"></path></svg>Bookmark</div>
<div class="border-l border-slate-400/20 py-2 px-2.5">12k</div>
</div>
</div>
</div>
<div class="relative z-10 p-4">
<div class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="hidden absolute bottom-full left-40 -mb-px flex h-8 items-end overflow-hidden">
<div class="flex -mb-px h-[2px] w-56">
<div class="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
<div class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
</div>
</div>
<div class="w-[24.5rem] divide-y divide-slate-400/20 rounded-lg bg-white text-[0.8125rem] leading-5 text-slate-900 shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
<div class="flex items-center p-4"><img src="./assets/img/avatar-1.jpg" alt="" class="h-10 w-10 flex-none rounded-full">
<div class="ml-4 flex-auto">
<div class="font-medium">Leonard Krasner</div>
<div class="mt-1 text-slate-700">@leonardkrasner</div>
</div>
<div class="pointer-events-auto ml-4 flex-none rounded-md py-[0.3125rem] px-2 font-medium text-slate-700 shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50">View</div>
</div>
<div class="flex items-center p-4"><img src="./assets/img/avatar-2.jpg" alt="" class="h-10 w-10 flex-none rounded-full">
<div class="ml-4 flex-auto">
<div class="font-medium">Floyd Miles</div>
<div class="mt-1 text-slate-700">@floydmiles</div>
</div>
<div class="pointer-events-auto ml-4 flex-none rounded-md py-[0.3125rem] px-2 font-medium text-slate-700 shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50">View</div>
</div>
<div class="flex items-center p-4"><img src="./assets/img/avatar-3.jpg" alt="" class="h-10 w-10 flex-none rounded-full">
<div class="ml-4 flex-auto">
<div class="font-medium">Emily Selman</div>
<div class="mt-1 text-slate-700">@emilyselman</div>
</div>
<div class="pointer-events-auto ml-4 flex-none rounded-md py-[0.3125rem] px-2 font-medium text-slate-700 shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50">View</div>
</div>
<div class="p-4">
<div class="pointer-events-auto rounded-md py-2 px-4 text-center font-medium shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50">View all</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="relative z-10 p-4">
<div class="flex w-[41rem] rounded-lg bg-white shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
<div class="flex items-center space-x-4 py-4 px-6"><svg class="h-6 w-6 flex-none" fill="none"><path d="M6.22 11.03a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM3 6.75l-.53-.53a.75.75 0 0 0 0 1.06L3 6.75Zm4.28-3.22a.75.75 0 0 0-1.06-1.06l1.06 1.06ZM13.5 18a.75.75 0 0 0 0 1.5V18ZM7.28 9.97 3.53 6.22 2.47 7.28l3.75 3.75 1.06-1.06ZM3.53 7.28l3.75-3.75-1.06-1.06-3.75 3.75 1.06 1.06Zm16.72 5.47c0 2.9-2.35 5.25-5.25 5.25v1.5a6.75 6.75 0 0 0 6.75-6.75h-1.5ZM15 7.5c2.9 0 5.25 2.35 5.25 5.25h1.5A6.75 6.75 0 0 0 15 6v1.5ZM15 6H3v1.5h12V6Zm0 12h-1.5v1.5H15V18Z" fill="#64748B"></path><path d="M3 15.75h.75V21" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 16.5A.75.75 0 0 0 9 15v1.5Zm-2.25-.75V15a.75.75 0 0 0-.75.75h.75Zm0 2.25H6c0 .414.336.75.75.75V18Zm0 2.25a.75.75 0 0 0 0 1.5v-1.5ZM9 15H6.75v1.5H9V15Zm-3 .75V18h1.5v-2.25H6Zm.75 3h1.5v-1.5h-1.5v1.5Zm1.5 1.5h-1.5v1.5h1.5v-1.5ZM9 19.5a.75.75 0 0 1-.75.75v1.5a2.25 2.25 0 0 0 2.25-2.25H9Zm-.75-.75a.75.75 0 0 1 .75.75h1.5a2.25 2.25 0 0 0-2.25-2.25v1.5Z" fill="#64748B"></path></svg>
<svg class="h-10 w-10 flex-none" fill="none">
<circle cx="20" cy="20" r="20" fill="#000"></circle>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 13.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L16.28 27.99c-1.25.687-2.779-.217-2.779-1.643V13.653Z" fill="#fff"></path>
</svg><svg class="h-6 w-6 flex-none" fill="none"><path d="M16.72 9.97a.75.75 0 1 0 1.06 1.06l-1.06-1.06ZM21 6.75l.53.53a.75.75 0 0 0 0-1.06l-.53.53Zm-3.22-4.28a.75.75 0 1 0-1.06 1.06l1.06-1.06ZM10.5 19.5a.75.75 0 0 0 0-1.5v1.5Zm3.75-4.5a.75.75 0 0 0 0 1.5V15Zm.75.75h.75A.75.75 0 0 0 15 15v.75ZM14.25 21a.75.75 0 0 0 1.5 0h-1.5Zm6-4.5a.75.75 0 0 0 0-1.5v1.5ZM18 15.75V15a.75.75 0 0 0-.75.75H18ZM18 18h-.75c0 .414.336.75.75.75V18Zm0 2.25a.75.75 0 0 0 0 1.5v-1.5Zm-.22-9.22 3.75-3.75-1.06-1.06-3.75 3.75 1.06 1.06Zm3.75-4.81-3.75-3.75-1.06 1.06 3.75 3.75 1.06-1.06ZM2.25 12.75A6.75 6.75 0 0 0 9 19.5V18a5.25 5.25 0 0 1-5.25-5.25h-1.5ZM9 6a6.75 6.75 0 0 0-6.75 6.75h1.5C3.75 9.85 6.1 7.5 9 7.5V6Zm0 1.5h12V6H9v1.5Zm0 12h1.5V18H9v1.5Zm5.25-3H15V15h-.75v1.5Zm0-.75V21h1.5v-5.25h-1.5Zm6-.75H18v1.5h2.25V15Zm-3 .75V18h1.5v-2.25h-1.5Zm.75 3h1.5v-1.5H18v1.5Zm1.5 1.5H18v1.5h1.5v-1.5Zm.75-.75a.75.75 0 0 1-.75.75v1.5a2.25 2.25 0 0 0 2.25-2.25h-1.5Zm-.75-.75a.75.75 0 0 1 .75.75h1.5a2.25 2.25 0 0 0-2.25-2.25v1.5Z" fill="#64748B"></path></svg></div>
<div class="flex flex-auto items-center border-l border-slate-200/60 pr-4 pl-6 text-[0.8125rem] leading-5 text-slate-700">
<div>00:51</div>
<div class="ml-4 flex flex-auto rounded-full bg-slate-100">
<div class="h-2 w-1/3 flex-none rounded-l-full rounded-r-[1px] bg-black-600"></div>
<div class="-my-[0.3125rem] ml-0.5 h-[1.125rem] w-1 rounded-full bg-black-600"></div>
</div>
<div class="ml-4">55:43</div><svg class="ml-6 h-6 w-6 flex-none" fill="none"><path d="M14 5 9 9H6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3l5 4V5Z" fill="#64748B" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 12c0-1.5-1-2-1-2v4s1-.5 1-2Z" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<svg class="ml-6 h-6 w-6 flex-none" fill="none">
<path d="M12 8v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1V8Zm0 0V7a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1ZM12 12v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1v-1Zm0 0v-1a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1ZM12 16v1a1 1 0 0 0 1-1h-1Zm0 0h-1a1 1 0 0 0 1 1v-1Zm0 0v-1a1 1 0 0 0-1 1h1Zm0 0h1a1 1 0 0 0-1-1v1Z"
fill="#64748B"></path>
</svg>
</div>
</div>
</div>
</div>
<div class="flex items-start justify-end">
<div>
<div class="relative flex items-end justify-end">
<div class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div>
<div class="flex justify-end p-4">
<div class="pointer-events-auto flex divide-x divide-slate-400/20 overflow-hidden rounded-md bg-white text-[0.8125rem] font-medium leading-5 text-slate-700 shadow-sm ring-1 ring-slate-700/10">
<div class="py-2 px-4 hover:bg-slate-50 hover:text-slate-900">Years</div>
<div class="py-2 px-4 hover:bg-slate-50 hover:text-slate-900">Months</div>
<div class="py-2 px-4 hover:bg-slate-50 hover:text-slate-900">Days</div>
</div>
</div>
<div class="relative z-10 p-4">
<div class="absolute -inset-x-8 top-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="hidden absolute bottom-full left-16 -mb-px flex h-8 items-end overflow-hidden">
<div class="flex -mb-px h-[2px] w-56">
<div class="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
<div class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
</div>
</div>
<div class="flex w-[23.5625rem] items-center rounded-md bg-white p-4 shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
<svg class="h-6 w-6 flex-none stroke-slate-500" stroke-width="2" stroke-linecap="round" fill="none"><path d="M4 7h16M4 12h16M4 17h16"></path></svg>
<svg class="ml-6 h-10 w-10 flex-none" width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_34_200)">
<path d="M33.3295 0H8C3.58172 0 0 3.58173 0 8.00001V33.3295C0 37.7478 3.58173 41.3295 8.00001 41.3295H33.3295C37.7478 41.3295 41.3295 37.7478 41.3295 33.3295V8C41.3295 3.58172 37.7478 0 33.3295 0Z" fill="#000"/>
<mask id="mask0_34_200" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="33" height="33">
<path d="M36.8144 4.51498H4.51489V36.8145H36.8144V4.51498Z" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_34_200)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5383 15.006C24.9039 14.9 24.2481 14.8612 23.579 14.897C18.6518 15.1607 14.8714 19.3687 15.1351 24.2959C15.1709 24.9649 15.2794 25.6128 15.4526 26.2323C11.4146 25.5572 8.24088 22.1555 8.013 17.8974C7.74931 12.9702 11.5298 8.76219 16.457 8.4985C20.7151 8.27062 24.4361 11.0632 25.5383 15.006Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4617 26.2404C16.0961 26.3465 16.7519 26.3853 17.4209 26.3495C22.3481 26.0857 26.1286 21.8777 25.8648 16.9505C25.8291 16.2815 25.7205 15.6336 25.5473 15.0141C29.5854 15.6892 32.7591 19.0909 32.987 23.3491C33.2507 28.2762 29.4702 32.4843 24.543 32.748C20.2849 32.9758 16.5639 30.1832 15.4617 26.2404Z" fill="white"/>
</g>
</g>
<defs>
<clipPath id="clip0_34_200">
<rect width="42" height="42" fill="white"/>
</clipPath>
</defs>
</svg>
<div class="ml-auto flex h-6 w-6 items-center justify-center rounded-md shadow ring-1 ring-slate-900/10"><svg class="h-4 w-4 " viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 1C7 0.447715 7.44772 0 8 0C8.55228 0 9 0.447715 9 1V2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2V1ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8ZM13.6563 2.34285C13.2658 1.95232 12.6326 1.95232 12.2421 2.34285L11.535 3.04996C11.1445 3.44048 11.1445 4.07365 11.535 4.46417C11.9255 4.85469 12.5587 4.85469 12.9492 4.46417L13.6563 3.75706C14.0469 3.36654 14.0469 2.73337 13.6563 2.34285ZM12.242 13.6563L11.5349 12.9492C11.1443 12.5587 11.1443 11.9255 11.5349 11.535C11.9254 11.1445 12.5585 11.1445 12.9491 11.535L13.6562 12.2421C14.0467 12.6326 14.0467 13.2658 13.6562 13.6563C13.2656 14.0468 12.6325 14.0468 12.242 13.6563ZM16 7.99902C16 7.44674 15.5523 6.99902 15 6.99902H14C13.4477 6.99902 13 7.44674 13 7.99902C13 8.55131 13.4477 8.99902 14 8.99902H15C15.5523 8.99902 16 8.55131 16 7.99902ZM7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V14ZM4.46492 11.5352C4.0744 11.1447 3.44123 11.1447 3.05071 11.5352L2.3436 12.2423C1.95307 12.6329 1.95307 13.266 2.3436 13.6566C2.73412 14.0471 3.36729 14.0471 3.75781 13.6566L4.46492 12.9494C4.85544 12.5589 4.85544 11.9258 4.46492 11.5352ZM4.46477 3.04973C4.85529 3.44025 4.85529 4.07342 4.46477 4.46394C4.07424 4.85447 3.44108 4.85447 3.05055 4.46394L2.34345 3.75684C1.95292 3.36631 1.95292 2.73315 2.34345 2.34262C2.73397 1.9521 3.36714 1.9521 3.75766 2.34262L4.46477 3.04973ZM3 8C3 7.44772 2.55228 7 2 7H1C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9H2C2.55228 9 3 8.55228 3 8Z" fill="#000"></path></svg></div>
<div class="ml-6 text-[0.8125rem] font-medium text-slate-700">v3.0</div><svg class="ml-2 h-1 w-1.5 overflow-visible fill-slate-400 stroke-slate-400"><path d="M0 0H6L3 4Z" stroke-width="1" stroke-linejoin="round"></path></svg><svg viewBox="0 0 16 16" class="ml-6 h-6 w-6 fill-slate-400"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"></path></svg></div>
</div>
</div>
<div class="relative z-10 p-4">
<div class="space-y-4">
<div class="pointer-events-auto w-[21rem] rounded-lg bg-white p-4 text-[0.8125rem] leading-5 shadow-xl shadow-black/5 hover:bg-slate-50 ring-2 ring-black-600">
<div class="flex justify-between">
<div class="font-medium text-slate-900">Newsletter</div><svg class="h-5 w-5 flex-none" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.707-9.293a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z" fill="#000"></path></svg></div>
<div class="mt-1 text-slate-700">Last message sent an hour ago</div>
<div class="mt-6 font-medium text-slate-900">621 users</div>
</div>
<div class="pointer-events-auto w-[21rem] rounded-lg bg-white p-4 text-[0.8125rem] leading-5 shadow-xl shadow-black/5 hover:bg-slate-50 ring-1 ring-slate-700/10">
<div class="flex justify-between">
<div class="font-medium text-slate-900">Existing customers</div>
</div>
<div class="mt-1 text-slate-700">Last message sent an hour ago</div>
<div class="mt-6 font-medium text-slate-900">1200 users</div>
</div>
</div>
</div>
</div>
<div class="flex items-start justify-end">
<div class="relative p-4">
<div class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="pointer-events-auto w-36 space-y-1 rounded-lg bg-white p-3 text-[0.8125rem] font-medium leading-6 text-slate-700 shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
<div class="flex rounded-[10px] p-1">
<div class="flex h-6 w-6 flex-none items-center justify-center rounded-md bg-white shadow ring-1 ring-slate-900/10"><svg class="h-4 w-4 fill-slate-400"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 1C7 0.447715 7.44772 0 8 0C8.55228 0 9 0.447715 9 1V2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2V1ZM11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8ZM13.6563 2.34285C13.2658 1.95232 12.6326 1.95232 12.2421 2.34285L11.535 3.04996C11.1445 3.44048 11.1445 4.07365 11.535 4.46417C11.9255 4.85469 12.5587 4.85469 12.9492 4.46417L13.6563 3.75706C14.0469 3.36654 14.0469 2.73337 13.6563 2.34285ZM12.242 13.6563L11.5349 12.9492C11.1443 12.5587 11.1443 11.9255 11.5349 11.535C11.9254 11.1445 12.5585 11.1445 12.9491 11.535L13.6562 12.2421C14.0467 12.6326 14.0467 13.2658 13.6562 13.6563C13.2656 14.0468 12.6325 14.0468 12.242 13.6563ZM16 7.99902C16 7.44674 15.5523 6.99902 15 6.99902H14C13.4477 6.99902 13 7.44674 13 7.99902C13 8.55131 13.4477 8.99902 14 8.99902H15C15.5523 8.99902 16 8.55131 16 7.99902ZM7 14C7 13.4477 7.44772 13 8 13C8.55228 13 9 13.4477 9 14V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V14ZM4.46492 11.5352C4.0744 11.1447 3.44123 11.1447 3.05071 11.5352L2.3436 12.2423C1.95307 12.6329 1.95307 13.266 2.3436 13.6566C2.73412 14.0471 3.36729 14.0471 3.75781 13.6566L4.46492 12.9494C4.85544 12.5589 4.85544 11.9258 4.46492 11.5352ZM4.46477 3.04973C4.85529 3.44025 4.85529 4.07342 4.46477 4.46394C4.07424 4.85447 3.44108 4.85447 3.05055 4.46394L2.34345 3.75684C1.95292 3.36631 1.95292 2.73315 2.34345 2.34262C2.73397 1.9521 3.36714 1.9521 3.75766 2.34262L4.46477 3.04973ZM3 8C3 7.44772 2.55228 7 2 7H1C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9H2C2.55228 9 3 8.55228 3 8Z" fill="#000"></path></svg></div>
<div class="ml-3">Light</div>
</div>
<div class="flex rounded-[10px] p-1">
<div class="flex h-6 w-6 flex-none items-center justify-center rounded-md bg-white shadow ring-1 ring-slate-900/10"><svg class="h-4 w-4 fill-slate-400"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"></path></svg></div>
<div class="ml-3">Dark</div>
</div>
<div class="flex rounded-[10px] p-1 bg-slate-50">
<div class="flex h-6 w-6 flex-none items-center justify-center rounded-md bg-white shadow ring-1 ring-slate-900/10"><svg class="h-4 w-4 fill-slate-400"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"></path></svg></div>
<div class="ml-3 text-slate-900">System</div>
</div>
</div>
</div>
<div class="relative p-4">
<div class="absolute -inset-y-8 right-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-y-8 left-0 w-px bg-slate-900/15 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/15 [mask-image:linear-gradient(to_left,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
<div class="hidden absolute -top-px right-16 h-8 overflow-hidden">
<div class="flex -mt-px h-[2px] w-56 -scale-x-100">
<div class="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
<div class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
</div>
</div>
<div class="pointer-events-auto w-[28.125rem] text-[0.8125rem] leading-5 text-slate-700">
<div class="font-semibold text-slate-900">Assigned to</div>
<div class="mt-2 flex items-center justify-between rounded-md bg-white py-2 px-3 shadow-sm ring-1 ring-slate-700/10">Tom Cook<svg class="h-5 w-5 flex-none fill-slate-400"><path d="M10 3a1 1 0 0 1 .707.293l3 3a1 1 0 0 1-1.414 1.414L10 5.414 7.707 7.707a1 1 0 0 1-1.414-1.414l3-3A1 1 0 0 1 10 3Zm-3.707 9.293a1 1 0 0 1 1.414 0L10 14.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414Z"></path></svg></div>
<div class="mt-4 overflow-hidden rounded-md bg-white py-1 shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
<div class="py-2 px-3">Wade Cooper</div>
<div class="py-2 px-3">Arlene Mccoy</div>
<div class="py-2 px-3 bg-black-600 text-white">Tom Cook</div>
<div class="py-2 px-3">Devon Webb</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="relative p-4">
<div class="pointer-events-auto w-[25.625rem] rounded-lg bg-white text-[0.8125rem] leading-5 text-slate-700 shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
<div class="flex items-center py-2.5 px-3.5 text-slate-400"><svg class="mr-2 h-5 w-5 stroke-slate-500" fill="none" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search projects...
</div>
<div class="border-t border-slate-400/20 py-3 px-3.5">
<div class="mb-1.5 text-[0.6875rem] font-semibold text-slate-500">Recent searches</div>
<div class="flex items-center rounded-md p-1.5"><svg class="mr-2.5 h-5 w-5 flex-none stroke-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>Tailwind
Labs / Website Redesign</div>
<div class="flex items-center rounded-md p-1.5"><svg class="mr-2.5 h-5 w-5 flex-none stroke-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>Laravel
LLC / Conference Branding</div>
</div>
<div class="border-t border-slate-400/20 py-3 px-3.5">
<div class="flex items-center rounded-md p-1.5"><svg class="mr-2.5 h-5 w-5 flex-none stroke-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>Add
new file...</div>
<div class="flex items-center rounded-md p-1.5"><svg class="mr-2.5 h-5 w-5 flex-none stroke-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path></svg>Add
new folder...</div>
<div class="flex items-center rounded-md p-1.5"><svg class="mr-2.5 h-5 w-5 flex-none stroke-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path></svg>Add
hashtag...
</div>
<div class="flex items-center rounded-md p-1.5 bg-black-600 text-white"><svg class="mr-2.5 h-5 w-5 flex-none stroke-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>Add
label...
</div>
</div>
</div>
</div>
<div class="relative p-4">
<div class="-mr-[4.625rem] w-[30.25rem] rounded-md bg-white p-4 text-[0.8125rem] leading-6 text-slate-900 shadow-xl shadow-black/5 ring-1 ring-slate-700/10">
<div class="font-semibold leading-5">Account</div>
<div class="mt-2 leading-5 text-slate-500">Manage how information is displayed on your account.</div>
<div class="mt-4 flex items-center border-t border-slate-400/20 py-3"><span class="w-2/5 flex-none">Language</span><span class="">English</span><span class="pointer-events-auto ml-auto font-medium text-indigo-600 hover:text-indigo-500">Update</span></div>
<div class="flex items-center border-t border-slate-400/20 py-3"><span class="w-2/5 flex-none">Date format</span><span class="">DD-MM-YYYY</span><span class="ml-auto flex items-center font-medium text-indigo-600"><span class="pointer-events-auto hover:text-indigo-500">Update</span>
<span class="mx-3 h-6 w-px bg-slate-400/20"></span>
<span class="pointer-events-auto hover:text-indigo-500">Remove</span>
</span>
</div>
<div class="flex items-center border-t border-slate-400/20 py-3"><span>Automatic timezone</span><span class="ml-auto"><div class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 ring-inset transition duration-200 ease-in-out bg-black-600 ring-black/20"><div class="h-4 w-4 rounded-full bg-white shadow-sm ring-1 ring-slate-700/10 transition duration-200 ease-in-out translate-x-4"></div></div></span></div>
<div class="flex items-center border-t border-slate-400/20 pt-3"><span>Auto-update applicant data</span><span class="ml-auto"><div class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 ring-inset transition duration-200 ease-in-out bg-slate-900/10 ring-slate-900/5"><div class="h-4 w-4 rounded-full bg-white shadow-sm ring-1 ring-slate-700/10 transition duration-200 ease-in-out"></div></div></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mx-auto w-full max-w-container px-4 sm:px-6 lg:px-8">
<div class="border-t border-slate-900/5 py-10">
<p class="mt-5 text-center text-sm leading-6 text-slate-500">© 2022 Qontext. All rights reserved.</p>
</div>
</footer>
<!-- End Footer -->
<!-- Copyright -->
<div class="w-md-75 text-lg-center mx-lg-auto ">
</div>
<!-- End Copyright -->
</div>
</div>
</footer>
<!-- ========== END FOOTER ========== -->
<!-- Go to Top -->
<a class="js-go-to go-to position-fixed " href="javascript:; " style="visibility: hidden; " data-hs-go-to-options='{
"offsetTop ": 700,
"position ": {
"init ": {
"right ": 15
},
"show ": {
"bottom ": 15
},
"hide ": {
"bottom ": -15
}
}
}'>
<i class="fas fa-angle-up "></i>
</a>
<!-- End Go to Top -->
<!-- JS Global Compulsory -->
<script src="./assets/vendor/jquery/dist/jquery.min.js "></script>
<script src="./assets/vendor/jquery-migrate/dist/jquery-migrate.min.js "></script>
<script src="./assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js "></script>
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-header/dist/hs-header.min.js "></script>
<script src="./assets/vendor/hs-go-to/dist/hs-go-to.min.js "></script>
<script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js "></script>
<script src="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js "></script>
<script src="./assets/vendor/hs-show-animation/dist/hs-show-animation.min.js "></script>
<script src="./assets/vendor/jquery-validation/dist/jquery.validate.min.js "></script>
<script src="./assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js "></script>
<script src="./assets/vendor/slick-carousel/slick/slick.js "></script>
<script src="./assets/vendor/aos/dist/aos.js "></script>
<!-- JS Front -->
<script src="./assets/js/theme.min.js "></script>
<!--
JS Plugins Init.
<script>
$(document).on('ready', function() {
// INITIALIZATION OF HEADER
// =======================================================
var header = new HSHeader($('#header')).init();
// INITIALIZATION OF MEGA MENU
// =======================================================
var megaMenu = new HSMegaMenu($('.js-mega-menu'), {
desktop: {
position: 'left'
}
}).init();
// INITIALIZATION OF UNFOLD
// =======================================================
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
// INITIALIZATION OF FORM VALIDATION
// =======================================================
$('.js-validate').each(function() {
$.HSCore.components.HSValidation.init($(this), {
rules: {
confirmPassword: {
equalTo: '#signupPassword'
}
}
});
});
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
$('.js-animation-link').each(function() {
var showAnimation = new HSShowAnimation($(this)).init();
});
// INITIALIZATION OF CUBEPORTFOLIO
// =======================================================
$('.cbp').each(function() {
var cbp = $.HSCore.components.HSCubeportfolio.init($(this), {
plugins: {
loadMore: {
element: '#cubeLoadMore',
action: 'click',
loadItems: 4,
}
}
});
});
// INITIALIZATION OF SLICK CAROUSEL
// =======================================================
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
// INITIALIZATION OF AOS
// =======================================================
AOS.init({
duration: 650,
once: true
});
// INITIALIZATION OF GO TO
// =======================================================
$('.js-go-to').each(function() {
var goTo = new HSGoTo($(this)).init();
});
});
</script>
-->
<!-- IE Support -->
<script>
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script src="./assets/vendor/babel-polyfill/dist/polyfill.js "><\/script>');
</script>
</body>
</html>