-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
513 lines (503 loc) · 24.5 KB
/
index.html
File metadata and controls
513 lines (503 loc) · 24.5 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
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
508
509
510
511
512
513
<!doctype html>
<html lang="en" class="dark h-full">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Alarado simple homepage as a devchallenges.io challenge."
/>
<title>Alarado | Homepage</title>
<!-- Preloading fonts for better user experience -->
<link
href="./fonts/Poppins/Poppins-Regular.ttf"
type="font/ttf"
rel="preload"
as="font"
crossorigin
/>
<link
href="./assets/Poppins-SemiBold-B_fPDAUb.ttf"
type="font/ttf"
rel="preload"
as="font"
crossorigin
/>
<link
href="./assets/Poppins-Bold-qTAUjFF7.ttf"
type="font/ttf"
rel="preload"
as="font"
crossorigin
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/favicon-C4u-IDeY.ico"
/>
<script type="module" crossorigin src="./assets/index--0yXVMs1.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BoI6zdqu.css">
</head>
<body
class="h-full bg-blue-50 text-base font-semibold text-blue-950/60 transition-all duration-300 ease-in-out dark:bg-blue-950 dark:text-blue-50/50"
>
<header>
<nav class="mx-auto max-w-[1136px] px-6 lg:px-8 xl:px-0">
<div
class="flex h-20 items-center justify-between first:*:flex-1 last:*:flex-1"
>
<div>
<a href="#" class="text-blue-900 dark:text-blue-50">
<svg
class="fill-current"
width="141"
height="24"
viewBox="0 0 141 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.7701 1.42178C19.5512 0.640733 20.8175 0.640733 21.5985 1.42178L30.7624 10.5857C31.5435 11.3667 31.5435 12.6331 30.7624 13.4141L21.5985 22.578C20.8175 23.3591 19.5512 23.3591 18.7701 22.578L9.60621 13.4141C8.82516 12.6331 8.82516 11.3667 9.60621 10.5857L18.7701 1.42178Z"
fill="#4CA154"
/>
<path
d="M10.5782 1.42196C11.3593 0.640916 12.6256 0.640916 13.4066 1.42197L22.5705 10.5859C23.3516 11.3669 23.3516 12.6332 22.5705 13.4143L13.4066 22.5782C12.6256 23.3592 11.3593 23.3592 10.5782 22.5782L1.41432 13.4143C0.633269 12.6332 0.63327 11.3669 1.41432 10.5859L10.5782 1.42196Z"
fill="#2A4DD0"
/>
<path
d="M55.7685 17.808H49.4805L48.4725 20.784H44.1765L50.2725 3.93599H55.0245L61.1205 20.784H56.7765L55.7685 17.808ZM54.7125 14.64L52.6245 8.47199L50.5605 14.64H54.7125Z"
/>
<path d="M66.8398 3.02399V20.784H62.7358V3.02399H66.8398Z" />
<path
d="M68.758 14.064C68.758 12.688 69.014 11.48 69.526 10.44C70.054 9.39999 70.766 8.59999 71.662 8.03999C72.558 7.47999 73.558 7.19999 74.662 7.19999C75.606 7.19999 76.43 7.39199 77.134 7.77599C77.854 8.15999 78.406 8.66399 78.79 9.28799V7.39199H82.894V20.784H78.79V18.888C78.39 19.512 77.83 20.016 77.11 20.4C76.406 20.784 75.582 20.976 74.638 20.976C73.55 20.976 72.558 20.696 71.662 20.136C70.766 19.56 70.054 18.752 69.526 17.712C69.014 16.656 68.758 15.44 68.758 14.064ZM78.79 14.088C78.79 13.064 78.502 12.256 77.926 11.664C77.366 11.072 76.678 10.776 75.862 10.776C75.046 10.776 74.35 11.072 73.774 11.664C73.214 12.24 72.934 13.04 72.934 14.064C72.934 15.088 73.214 15.904 73.774 16.512C74.35 17.104 75.046 17.4 75.862 17.4C76.678 17.4 77.366 17.104 77.926 16.512C78.502 15.92 78.79 15.112 78.79 14.088Z"
/>
<path
d="M89.727 9.62399C90.207 8.88799 90.807 8.31199 91.527 7.89599C92.247 7.46399 93.047 7.24799 93.927 7.24799V11.592H92.799C91.775 11.592 91.007 11.816 90.495 12.264C89.983 12.696 89.727 13.464 89.727 14.568V20.784H85.623V7.39199H89.727V9.62399Z"
/>
<path
d="M94.8326 14.064C94.8326 12.688 95.0886 11.48 95.6006 10.44C96.1286 9.39999 96.8406 8.59999 97.7366 8.03999C98.6326 7.47999 99.6326 7.19999 100.737 7.19999C101.681 7.19999 102.505 7.39199 103.209 7.77599C103.929 8.15999 104.481 8.66399 104.865 9.28799V7.39199H108.969V20.784H104.865V18.888C104.465 19.512 103.905 20.016 103.185 20.4C102.481 20.784 101.657 20.976 100.713 20.976C99.6246 20.976 98.6326 20.696 97.7366 20.136C96.8406 19.56 96.1286 18.752 95.6006 17.712C95.0886 16.656 94.8326 15.44 94.8326 14.064ZM104.865 14.088C104.865 13.064 104.577 12.256 104.001 11.664C103.441 11.072 102.753 10.776 101.937 10.776C101.121 10.776 100.425 11.072 99.8486 11.664C99.2886 12.24 99.0086 13.04 99.0086 14.064C99.0086 15.088 99.2886 15.904 99.8486 16.512C100.425 17.104 101.121 17.4 101.937 17.4C102.753 17.4 103.441 17.104 104.001 16.512C104.577 15.92 104.865 15.112 104.865 14.088Z"
/>
<path
d="M110.882 14.064C110.882 12.688 111.138 11.48 111.65 10.44C112.178 9.39999 112.89 8.59999 113.786 8.03999C114.682 7.47999 115.682 7.19999 116.786 7.19999C117.666 7.19999 118.466 7.38399 119.186 7.75199C119.922 8.11999 120.498 8.61599 120.914 9.23999V3.02399H125.018V20.784H120.914V18.864C120.53 19.504 119.978 20.016 119.258 20.4C118.554 20.784 117.73 20.976 116.786 20.976C115.682 20.976 114.682 20.696 113.786 20.136C112.89 19.56 112.178 18.752 111.65 17.712C111.138 16.656 110.882 15.44 110.882 14.064ZM120.914 14.088C120.914 13.064 120.626 12.256 120.05 11.664C119.49 11.072 118.802 10.776 117.986 10.776C117.17 10.776 116.474 11.072 115.898 11.664C115.338 12.24 115.058 13.04 115.058 14.064C115.058 15.088 115.338 15.904 115.898 16.512C116.474 17.104 117.17 17.4 117.986 17.4C118.802 17.4 119.49 17.104 120.05 16.512C120.626 15.92 120.914 15.112 120.914 14.088Z"
/>
<path
d="M133.843 20.976C132.531 20.976 131.347 20.696 130.291 20.136C129.251 19.576 128.427 18.776 127.819 17.736C127.227 16.696 126.931 15.48 126.931 14.088C126.931 12.712 127.235 11.504 127.843 10.464C128.451 9.40799 129.283 8.59999 130.339 8.03999C131.395 7.47999 132.579 7.19999 133.891 7.19999C135.203 7.19999 136.387 7.47999 137.443 8.03999C138.499 8.59999 139.331 9.40799 139.939 10.464C140.547 11.504 140.851 12.712 140.851 14.088C140.851 15.464 140.539 16.68 139.915 17.736C139.307 18.776 138.467 19.576 137.395 20.136C136.339 20.696 135.155 20.976 133.843 20.976ZM133.843 17.424C134.627 17.424 135.291 17.136 135.835 16.56C136.395 15.984 136.675 15.16 136.675 14.088C136.675 13.016 136.403 12.192 135.859 11.616C135.331 11.04 134.675 10.752 133.891 10.752C133.091 10.752 132.427 11.04 131.899 11.616C131.371 12.176 131.107 13 131.107 14.088C131.107 15.16 131.363 15.984 131.875 16.56C132.403 17.136 133.059 17.424 133.843 17.424Z"
/>
</svg>
</a>
</div>
<div>
<ul class="hidden lg:flex lg:gap-10 xl:ml-8">
<li>
<a
href="#"
class="flex h-12 items-center text-sm text-blue-950 dark:text-white"
aria-current="page"
>About us</a
>
</li>
<li>
<a
href="#"
class="flex h-12 items-center text-sm hover:text-blue-950 dark:hover:text-white"
>Product</a
>
</li>
<li>
<a
href="#"
class="flex h-12 items-center text-sm hover:text-blue-950 dark:hover:text-white"
>Resource</a
>
</li>
<li>
<a
href="#"
class="flex h-12 items-center text-sm hover:text-blue-950 dark:hover:text-white"
>Contact</a
>
</li>
</ul>
</div>
<div class="flex justify-end">
<!-- Mobile menu button-->
<button
type="button"
class="relative flex items-center justify-center rounded-md text-blue-900 lg:hidden dark:text-white"
data-sidebar-button="open"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Menu open: "hidden", Menu closed: "block"
-->
<svg
viewBox="0 0 23 23"
class="size-6 fill-current stroke-current"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 8.5C22 8.72101 21.9078 8.93298 21.7437 9.08926C21.5796 9.24554 21.3571 9.33333 21.125 9.33333H1.875C1.64294 9.33333 1.42038 9.24554 1.25628 9.08926C1.09219 8.93298 1 8.72101 1 8.5C1 8.27899 1.09219 8.06702 1.25628 7.91074C1.42038 7.75446 1.64294 7.66667 1.875 7.66667H21.125C21.3571 7.66667 21.5796 7.75446 21.7437 7.91074C21.9078 8.06702 22 8.27899 22 8.5ZM1.875 2.66667H21.125C21.3571 2.66667 21.5796 2.57887 21.7437 2.42259C21.9078 2.26631 22 2.05435 22 1.83333C22 1.61232 21.9078 1.40036 21.7437 1.24408C21.5796 1.0878 21.3571 1 21.125 1H1.875C1.64294 1 1.42038 1.0878 1.25628 1.24408C1.09219 1.40036 1 1.61232 1 1.83333C1 2.05435 1.09219 2.26631 1.25628 2.42259C1.42038 2.57887 1.64294 2.66667 1.875 2.66667ZM21.125 14.3333H1.875C1.64294 14.3333 1.42038 14.4211 1.25628 14.5774C1.09219 14.7337 1 14.9457 1 15.1667C1 15.3877 1.09219 15.5996 1.25628 15.7559C1.42038 15.9122 1.64294 16 1.875 16H21.125C21.3571 16 21.5796 15.9122 21.7437 15.7559C21.9078 15.5996 22 15.3877 22 15.1667C22 14.9457 21.9078 14.7337 21.7437 14.5774C21.5796 14.4211 21.3571 14.3333 21.125 14.3333Z"
stroke-width="1.3"
/>
</svg>
<!--
Icon when menu is open.
Menu open: "block", Menu closed: "hidden"
-->
<svg
class="hidden h-full w-full fill-current"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z"
/>
</svg>
</button>
<!-- dark/light toggle -->
<menu
class="hidden h-6 w-12 rounded-full bg-blue-900 px-[.12rem] py-[.2rem] lg:flex lg:items-center lg:justify-between"
>
<li>
<button
data-theme-button="dark"
type="button"
class="relative z-0 flex size-5 items-center justify-center rounded-full text-white before:absolute before:-z-10 before:hidden before:h-full before:w-full before:rounded-full before:bg-blue-50 dark:text-blue-900 dark:before:block"
>
<span class="sr-only">Active dark mode</span>
<svg
width="24"
height="24"
class="h-4 w-4 select-none fill-current stroke-current"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15 4C15.292 4 15.438 4 15.5781 4.04183C16.192 4.22522 16.4775 4.93111 16.1637 5.48976C16.0921 5.61719 15.8744 5.82779 15.4389 6.249C13.935 7.70352 13 9.74257 13 12C13 14.2574 13.935 16.2965 15.4389 17.751C15.8744 18.1722 16.0921 18.3828 16.1637 18.5102C16.4775 19.0689 16.192 19.7748 15.5781 19.9582C15.438 20 15.292 20 15 20V20C10.5817 20 7 16.4183 7 12C7 7.58172 10.5817 4 15 4V4Z"
/>
</svg>
</button>
</li>
<li>
<button
data-theme-button="light"
type="button"
class="relative z-0 flex size-5 items-center justify-center rounded-full text-blue-900 before:absolute before:-z-10 before:h-full before:w-full before:rounded-full before:bg-blue-50 dark:text-white dark:before:hidden"
>
<span class="sr-only">Active light mode</span>
<svg
width="24"
height="24"
class="h-4 w-4 select-none fill-current stroke-current"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<circle cx="12" cy="12" r="4" stroke-width="1" />
<path
d="M12 5V3"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M12 21V19"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M16.9498 7.04996L18.364 5.63574"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M5.63608 18.3644L7.05029 16.9502"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M19 12L21 12"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M3 12L5 12"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M16.9498 16.95L18.364 18.3643"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M5.63608 5.63559L7.05029 7.0498"
stroke-width="2.8"
stroke-linecap="round"
/>
</svg>
</button>
</li>
</menu>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div
class="fixed right-0 top-0 hidden h-full w-7/12 bg-white pt-20 lg:hidden dark:bg-blue-950"
id="mobile-menu"
data-mobile-menu
>
<button
type="button"
class="absolute right-5 top-6 flex items-center justify-center rounded-md text-blue-900 lg:hidden dark:text-white"
aria-controls="mobile-menu"
data-sidebar-button="close"
>
<span class="sr-only">Close main menu</span>
<svg
width="19"
height="20"
viewBox="0 0 19 20"
class="fill-current stroke-current"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="2.08567"
y1="16.1729"
x2="16.1729"
y2="2.91433"
stroke-width="4"
stroke-linecap="round"
/>
<line
x1="2.8284"
y1="3.01283"
x2="16.4453"
y2="16.7539"
stroke-width="4"
stroke-linecap="round"
/>
</svg>
</button>
<div class="text-center text-4xl">
<ul class="space-y-8">
<li>
<a
href="#"
class="block px-3 py-2 font-semibold text-blue-900 dark:text-white"
aria-current="page"
>About us</a
>
</li>
<li>
<a
href="#"
class="block px-3 py-2 font-semibold hover:text-blue-950 dark:hover:text-white"
>Product</a
>
</li>
<li>
<a
href="#"
class="block px-3 py-2 font-semibold hover:text-blue-950 dark:hover:text-white"
>Resource</a
>
</li>
<li>
<a
href="#"
class="block px-3 py-2 font-semibold hover:text-blue-950 dark:hover:text-white"
>Contact</a
>
</li>
</ul>
</div>
<!-- dark/light toggle -->
<menu
class="mx-auto mt-6 flex h-6 w-12 items-center justify-between rounded-full bg-blue-900 px-[.12rem] py-[.2rem] lg:hidden"
>
<li>
<button
data-theme-button="dark"
type="button"
class="relative z-0 flex size-5 items-center justify-center rounded-full text-white before:absolute before:-z-10 before:hidden before:h-full before:w-full before:rounded-full before:bg-blue-50 dark:text-blue-900 dark:before:block"
>
<span class="sr-only">Active dark mode</span>
<svg
width="24"
height="24"
class="h-4 w-4 select-none fill-current stroke-current"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15 4C15.292 4 15.438 4 15.5781 4.04183C16.192 4.22522 16.4775 4.93111 16.1637 5.48976C16.0921 5.61719 15.8744 5.82779 15.4389 6.249C13.935 7.70352 13 9.74257 13 12C13 14.2574 13.935 16.2965 15.4389 17.751C15.8744 18.1722 16.0921 18.3828 16.1637 18.5102C16.4775 19.0689 16.192 19.7748 15.5781 19.9582C15.438 20 15.292 20 15 20V20C10.5817 20 7 16.4183 7 12C7 7.58172 10.5817 4 15 4V4Z"
/>
</svg>
</button>
</li>
<li>
<button
data-theme-button="light"
type="button"
class="relative z-0 flex size-5 items-center justify-center rounded-full text-blue-900 before:absolute before:-z-10 before:h-full before:w-full before:rounded-full before:bg-blue-50 dark:text-white dark:before:hidden"
>
<span class="sr-only">Active light mode</span>
<svg
width="24"
height="24"
class="h-4 w-4 select-none fill-current stroke-current"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<circle cx="12" cy="12" r="4" stroke-width="1" />
<path d="M12 5V3" stroke-width="2.8" stroke-linecap="round" />
<path
d="M12 21V19"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M16.9498 7.04996L18.364 5.63574"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M5.63608 18.3644L7.05029 16.9502"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M19 12L21 12"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M3 12L5 12"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M16.9498 16.95L18.364 18.3643"
stroke-width="2.8"
stroke-linecap="round"
/>
<path
d="M5.63608 5.63559L7.05029 7.0498"
stroke-width="2.8"
stroke-linecap="round"
/>
</svg>
</button>
</li>
</menu>
</div>
</nav>
<div
class="mx-auto max-w-[1136px] space-y-16 px-6 py-16 sm:space-y-[153px] sm:px-[14px] lg:space-y-[92px] lg:px-8 xl:flex xl:flex-row-reverse xl:items-center xl:gap-24 xl:space-y-0 xl:px-0 xl:pb-0"
>
<div
class="mx-auto max-w-[560px] xl:translate-x-[5px] xl:translate-y-[5px]"
>
<picture>
<img
src="./assets/hero-image-simple-homepage-zWohgOXw.png"
alt=""
class="object-cover"
/>
</picture>
</div>
<div class="sm:pl-[58px] sm:pr-24 lg:pl-[80px] xl:px-0">
<div>
<p
class="text-sm uppercase tracking-[-0.01em] text-blue-900 dark:text-white"
>
<span class="mr-1 inline-block size-3.5 align-middle"
><img
src="./assets/smiling-face-with-sunglasses_1f60e-Bo-Drqd6.png"
alt=""
/></span>
Simple way to communicate
</p>
<h1
class="mt-[12px] text-5xl font-bold leading-[1.2] text-blue-900 sm:text-[63px] sm:leading-[1.53] dark:text-white"
>
Actions for Accessibility in Design
</h1>
<p class="mt-[32px] max-w-[45ch] text-lg tracking-[-0.01em]">
The fastest way to build and deploy websites with resusable
components.
</p>
</div>
<div
class="mt-[20px] flex flex-col gap-8 sm:flex-row sm:items-center"
>
<a
href="#"
class="flex items-center justify-center rounded-[12px] bg-blue-700 px-[2em] py-[.85em] text-sm uppercase tracking-wide text-white transition-all duration-200 ease-in-out hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-950 sm:text-base dark:hover:bg-blue-600 dark:focus:ring-white"
>get started</a
><a
href="#"
class="flex items-center justify-center bg-transparent text-sm leading-4 text-blue-700 underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-blue-950 sm:text-base"
>Get live demo</a
>
</div>
<ul class="mt-[42px] flex items-center gap-4 text-sm">
<li class="flex items-center gap-2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 10.1666 20.4518 8.46124 19.5103 7.03891L12.355 14.9893C11.6624 15.7589 10.4968 15.8726 9.66844 15.2513L6.4 12.8C5.95817 12.4686 5.86863 11.8418 6.2 11.4C6.53137 10.9582 7.15817 10.8686 7.6 11.2L10.8684 13.6513L18.214 5.48955C16.5986 3.94717 14.4099 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
fill="#4CA154"
/>
</svg>
No credit card required
</li>
<li class="flex items-center gap-2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 21C16.9706 21 21 16.9706 21 12C21 10.1666 20.4518 8.46124 19.5103 7.03891L12.355 14.9893C11.6624 15.7589 10.4968 15.8726 9.66844 15.2513L6.4 12.8C5.95817 12.4686 5.86863 11.8418 6.2 11.4C6.53137 10.9582 7.15817 10.8686 7.6 11.2L10.8684 13.6513L18.214 5.48955C16.5986 3.94717 14.4099 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
fill="#4CA154"
/>
</svg>
No software to install
</li>
</ul>
</div>
</div>
</header>
</body>
</html>