-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
765 lines (752 loc) · 67.3 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
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smarty v5</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="dist/output.css" />
</head>
<body>
<div class="scroll-to-top show flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#ffffff" class="bi bi-arrow-up-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z" />
</svg>
</div>
<!-- Navbar -->
<nav id="navbar" class="absolute w-full z-50">
<!-- Flex container -->
<div class="container flex items-center justify-between mx-auto p-5">
<!-- Logo -->
<div class="pt-2">
<a href="" class="logo1"><img src="img/logo/logo_light.svg" width="110" height="38" alt="" /></a>
<a href="" class="logo2"><img src="img/logo/logo_dark.svg" width="110" height="38" alt="" /></a>
</div>
<!-- Menu Items -->
<div class="hidden space-x-6 md:flex">
<a href="#index.html" class="text-white">HOME</a>
<a href="#FEATURES" class="text-white">FEATURES</a>
<a href="#PRICING" class="text-white">PRICING</a>
<a href="#contact" class="text-white">CONTACT US</a>
</div>
<!-- Hamburger Icon -->
<button id="menu-btn" class="block hamburger md:hidden focus:outline-none">
<span class="hamburger-top"></span>
<span class="hamburger-middle"></span>
<span class="hamburger-bottom"></span>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<div id="menu" class="absolute bg-otBg3 h-screen hidden self-end w-full sm:w-auto sm:self-center left-0 right-0">
<div class="flex flex-col space-y-6 font-bold container mx-auto mt-9 h-bannerH w-full bg-white py-8">
<a href="index.html" class="text-title">HOME</a>
<a href="#FEATURES" class="text-title">FEATURES</a>
<a href="#PRICING" class="text-title">PRICING</a>
<a href="#CONTACT" class="text-title">CONTACT US</a>
</div>
</div>
</div>
</nav>
<div class="main">
<!-- Hero Section -->
<section id="hero" class="relative lg:h-bannerH pt-32 lg:pt-24">
<!-- Flex Container -->
<div class="container mx-auto p-5">
<div class="lg:flex items-center mx-auto space-y-0 md:space-y-0">
<!-- Left item -->
<div class="flex flex-col lg:w-1/2 w-full">
<h3 class="text-white font-bold lg:text-h3 text-h4">
Amazing employees deserve
</h3>
<h1 class="text-white font-bold lg:text-h1 md:text-h2 text-h3">
amazing software
</h1>
<p class="text-white mb-12">
The simplest way to work together in the cloud! Start in one
step now, no credit card required.
</p>
<div>
<a href="#"
class="p-4 px-6 text-title bg-warning rounded-lg baseline hover:bg-brightRedLight font-medium">Start Now
<span class="font-normal"> - It's Free</span></a>
</div>
</div>
<!-- Image -->
<div class="lg:w-1/2 w-full mx-auto">
<img src="img/using_product.svg" alt="" />
</div>
</div>
</div>
<svg class="absolute bottom-0" viewBox="0 0 1200 120"
style="transform: rotate(180deg) rotateY(180deg); bottom: -1px">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" fill="#ffffff"></path>
</svg>
</section>
<section id="FEATURES">
<div class="container mx-auto p-5">
<div class="lg:flex items-center">
<div class="flex-col lg:w-1/2">
<h2 class="text-h4 md:text-h3 lg:text-h2 font-bold text-title">
Go Enterprise
</h2>
<p class="max-w-md text-desc text-p mt-5">
The simplest way to work together in the cloud! Start in one
step now, no credit card required.
</p>
<input type="email" placeholder="Email address" class="border-b px-4 py-3 mt-11" />
<div class="mt-8">
<a href="#" class="p-4 px-6 text-title bg-green rounded-lg baseline hover:translate-x-1 font-medium">TRY
FOR FREE</a>
</div>
</div>
<div class="w-full lg:w-1/2 mt-12 lg:mt-0">
<div class="grid grid-cols-2 md:grid-cols-3 shadow-xl shadow-indigo-100/50">
<div>
<img src="img/logo/vendor_airbnb.svg" width="200px"
class="opacity-40 py-11 px-6 border-b border-r w-fit" alt="" />
</div>
<div>
<img src="img/logo/vendor_coinbase.svg" width="200px"
class="opacity-40 py-11 px-6 border-b border-r w-fit" alt="" />
</div>
<div>
<img src="img/logo/vendor_dribble.svg" width="200px"
class="opacity-40 py-11 px-6 border-b border-r w-fit" alt="" />
</div>
<div>
<img src="img/logo/vendor_instagram.svg" width="200px"
class="opacity-40 py-11 px-6 border-b border-r w-fit" alt="" />
</div>
<div>
<img src="img/logo/vendor_netflix.svg" width="200px"
class="opacity-40 py-11 px-6 border-b border-r w-fit" alt="" />
</div>
<div>
<img src="img/logo/vendor_pinterest.svg" width="200px"
class="opacity-40 py-11 px-6 border-b border-r w-fit" alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
<section id="pricing">
<div class="container mx-auto p-5">
<div class="grid md:grid-cols-3 grid-cols-1 gap-5">
<!-- Card -->
<div>
<svg width="35" fill="#377dff" viewBox="0 0 496 496.01195">
<path
d="M451.023 405.316c7.926-7.313 12.984-17.695 12.984-29.305v-16c0-22.055-17.945-40-40-40-19.313 0-35.473 13.77-39.195 32h-26.277c-3.313-9.289-12.113-16-22.527-16-10.418 0-19.219 6.711-22.531 16h-26.277c-3.191-15.648-15.547-28-31.191-31.191v-17.945c13.766-3.574 24-15.992 24-30.863h8c4.422 0 8-3.574 8-8v-24h16v-16h-16v-.086c0-15.305 7.254-30.348 19.902-41.242 22.938-19.785 36.098-48.457 36.098-78.672 0-28.574-11.355-55.215-31.969-75.016-20.602-19.801-47.832-30.137-76.32-28.895-54 2.176-98.73 47.941-99.695 102.016-.555 30.605 12.352 59.758 35.406 79.984 12.688 11.117 20.063 26.328 20.496 41.91h-15.918v16h16v24c0 4.426 3.574 8 8 8h8c0 14.871 10.23 27.289 24 30.863v17.945c-15.648 3.191-28 15.543-31.195 31.191h-26.277c-3.313-9.289-12.113-16-22.527-16-10.418 0-19.219 6.711-22.531 16h-26.277c-3.723-18.23-19.875-32-39.191-32-22.059 0-40 17.945-40 40v16c0 11.609 5.055 21.992 12.98 29.305-26.344 10.711-44.98 36.551-44.98 66.695v16c0 4.426 3.574 8 8 8h128c4.422 0 8-3.574 8-8v-16c0-30.145-18.641-55.984-44.984-66.695 7.926-7.313 12.984-17.695 12.984-29.305v-8h25.469c3.313 9.289 12.113 16 22.531 16 10.414 0 19.215-6.711 22.527-16h25.473v8c0 11.609 5.055 21.992 12.98 29.305-26.344 10.711-44.98 36.551-44.98 66.695v16c0 4.426 3.574 8 8 8h128c4.422 0 8-3.574 8-8v-16c0-30.145-18.641-55.984-44.984-66.695 7.926-7.313 12.984-17.695 12.984-29.305v-8h25.469c3.313 9.289 12.113 16 22.531 16 10.414 0 19.215-6.711 22.527-16h25.473v8c0 11.609 5.055 21.992 12.98 29.305-26.344 10.711-44.98 36.551-44.98 66.695v16c0 4.426 3.574 8 8 8h128c4.422 0 8-3.574 8-8v-16c0-30.145-18.641-55.984-44.984-66.695zm-323.016 66.695v8h-16v-16h-16v16h-48v-16h-16v16h-16v-8c0-30.871 25.125-56 56-56 30.871 0 56 25.129 56 56zm-80-96v-16c0-13.23 10.766-24 24-24 13.23 0 24 10.77 24 24v16c0 13.23-10.77 24-24 24-13.234 0-24-10.77-24-24zm112-8c-4.418 0-8-3.582-8-8 0-4.414 3.582-8 8-8 4.414 0 8 3.586 8 8 0 4.418-3.586 8-8 8zm29.965-197.945c-19.504-17.109-30.422-41.773-29.949-67.672.824-45.75 38.656-84.469 84.336-86.313 24.406-.887 47.168 7.715 64.59 24.457 17.449 16.746 27.059 39.297 27.059 63.473 0 25.559-11.137 49.816-30.547 66.543-16.176 13.953-25.453 33.402-25.453 53.371v.086h-64.082c-.434-20.184-9.793-39.785-25.953-53.945zm90.035 69.945v16h-64v-16zm-48 32h32c0 8.824-7.18 16-16 16-8.824 0-16-7.176-16-16zm72 200v8h-16v-16h-16v16h-48v-16h-16v16h-16v-8c0-30.871 25.125-56 56-56 30.871 0 56 25.129 56 56zm-80-96v-16c0-13.23 10.766-24 24-24 13.23 0 24 10.77 24 24v16c0 13.23-10.77 24-24 24-13.234 0-24-10.77-24-24zm112-8c-4.418 0-8-3.582-8-8 0-4.414 3.582-8 8-8 4.414 0 8 3.586 8 8 0 4.418-3.586 8-8 8zm64 8v-16c0-13.23 10.766-24 24-24 13.23 0 24 10.77 24 24v16c0 13.23-10.77 24-24 24-13.234 0-24-10.77-24-24zm80 104h-16v-16h-16v16h-48v-16h-16v16h-16v-8c0-30.871 25.125-56 56-56 30.871 0 56 25.129 56 56zm0 0M232.008 192.012h32v16h-32zm0 0M240.008 143.203v16.809h16v-16.809c5.094-1.039 9.832-3.07 14.023-5.855l12.32 12.32 11.309-11.313-12.316-12.32c2.781-4.191 4.813-8.926 5.855-14.023h16.809v-16h-16.809c-1.043-5.098-3.074-9.832-5.855-14.023l12.316-12.32-11.309-11.313-12.32 12.32c-4.191-2.785-8.93-4.816-14.023-5.855v-16.809h-16v16.809c-5.098 1.039-9.832 3.07-14.027 5.855l-12.32-12.32-11.309 11.313 12.32 12.32c-2.785 4.191-4.816 8.926-5.859 14.023h-16.805v16h16.805c1.043 5.098 3.074 9.832 5.859 14.023l-12.32 12.32 11.309 11.313 12.32-12.32c4.195 2.785 8.93 4.816 14.027 5.855zm8-63.191c13.23 0 24 10.77 24 24s-10.77 24-24 24c-13.234 0-24-10.77-24-24s10.766-24 24-24zm0 0">
</path>
</svg>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Superhero Teamwork
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<svg width="35" fill="#377dff" viewBox="-32 0 496 496.00935">
<path
d="M137.973 98.68c-15.129 5.715-25.969 20.227-25.969 37.328 0 6.586 1.754 12.715 4.586 18.203-12 4.613-20.586 16.184-20.586 29.797 0 13.617 8.586 25.184 20.586 29.801-2.832 5.488-4.586 11.617-4.586 18.199 0 17.105 10.84 31.617 25.969 37.328-1.199 3.352-1.969 6.914-1.969 10.672 0 17.648 14.352 32 32 32 3.984 0 7.762-.824 11.281-2.152 5.184 10.699 16.055 18.152 28.719 18.152 17.648 0 32-14.352 32-32v-224c0-17.645-14.352-32-32-32-12.664 0-23.535 7.457-28.719 18.152-3.52-1.328-7.297-2.152-11.281-2.152-17.648 0-32 14.355-32 32 0 3.762.77 7.32 1.969 10.672zm30.031-26.672c8.824 0 16 7.176 16 16h16c0-7.688-2.84-14.664-7.375-20.184 1.855-6.781 8.008-11.816 15.375-11.816 8.824 0 16 7.176 16 16v224c0 8.824-7.176 16-16 16-7.367 0-13.52-5.031-15.375-11.816 4.535-5.52 7.375-12.492 7.375-20.184h-16c0 8.824-7.176 16-16 16s-16-7.176-16-16 7.176-16 16-16v-16c-7.793 0-14.848 2.914-20.398 7.555-11.137-2.074-19.602-11.824-19.602-23.555 0-13.23 10.77-24 24-24 13.234 0 24 10.77 24 24h16c0-22.055-17.941-40-40-40-9.039 0-17.297 3.129-24 8.211v-.211c-8.824 0-16-7.176-16-16s7.176-16 16-16v-.207c6.703 5.082 14.961 8.207 24 8.207 22.059 0 40-17.941 40-40h-16c0 13.234-10.766 24-24 24-13.23 0-24-10.766-24-24 0-11.727 8.465-21.477 19.602-23.551 5.551 4.641 12.605 7.551 20.398 7.551v-16c-8.824 0-16-7.176-16-16s7.176-16 16-16zm0 0M328.004 56.008c-3.984 0-7.758.824-11.277 2.152-5.188-10.695-16.059-18.152-28.723-18.152-17.648 0-32 14.355-32 32v224c0 17.648 14.352 32 32 32 12.664 0 23.535-7.453 28.723-18.152 3.52 1.328 7.293 2.152 11.277 2.152 17.648 0 32-14.352 32-32 0-3.758-.766-7.32-1.969-10.672 15.129-5.711 25.969-20.223 25.969-37.328 0-6.582-1.75-12.711-4.582-18.199 12-4.617 20.582-16.184 20.582-29.801 0-13.613-8.582-25.184-20.582-29.797 2.832-5.488 4.582-11.617 4.582-18.203 0-17.102-10.84-31.613-25.969-37.328 1.203-3.352 1.969-6.91 1.969-10.672 0-17.645-14.352-32-32-32zm40 80c0 13.234-10.766 24-24 24-13.23 0-24-10.766-24-24h-16c0 22.059 17.945 40 40 40 9.039 0 17.297-3.125 24-8.207v.207c8.824 0 16 7.176 16 16s-7.176 16-16 16v.211c-6.703-5.082-14.961-8.211-24-8.211-22.055 0-40 17.945-40 40h16c0-13.23 10.77-24 24-24 13.234 0 24 10.77 24 24 0 11.73-8.465 21.48-19.598 23.555-5.555-4.641-12.609-7.555-20.402-7.555v16c8.824 0 16 7.176 16 16s-7.176 16-16 16-16-7.176-16-16h-16c0 7.691 2.84 14.664 7.375 20.184-1.855 6.785-8.008 11.816-15.375 11.816-8.824 0-16-7.176-16-16v-224c0-8.824 7.176-16 16-16 7.367 0 13.52 5.035 15.375 11.816-4.535 5.52-7.375 12.496-7.375 20.184h16c0-8.824 7.176-16 16-16s16 7.176 16 16-7.176 16-16 16v16c7.793 0 14.848-2.91 20.402-7.551 11.133 2.074 19.598 11.824 19.598 23.551zm0 0M373.98 49.898c-37.383-35.137-86.344-52.754-137.727-49.52l.992 15.965c46.949-2.918 91.637 13.137 125.781 45.211 34.16 32.102 52.977 75.598 52.977 122.453 0 56.465-28.145 108.824-75.289 140.066-16.262 10.781-28.566 26.16-36.148 43.934h-113.457c-7.688-17.902-20.039-33.391-36.328-44.27-48.586-32.473-76.504-86.703-74.688-145.09l-15.992-.496c-1.992 63.938 28.59 123.336 81.793 158.883 11.75 7.855 21.133 18.551 27.672 30.973h-21.563v16h27.945c1.551 5.184 2.793 10.496 3.422 16h-15.367v16h16v24c0 4.426 3.586 8 8 8h8c0 26.473 21.527 48 48 48s48-21.527 48-48h8c4.418 0 8-3.574 8-8v-24h16v-16h-15.438c.566-5.496 1.695-10.824 3.215-16h28.223v-16h-21.91c6.445-12.285 15.773-22.848 27.465-30.59 51.621-34.234 82.445-91.578 82.445-153.41 0-50.574-21.152-99.461-58.023-134.109zm-125.977 430.109c-17.648 0-32-14.352-32-32h64c0 17.648-14.352 32-32 32zm48-48h-96v-16h96zm.57-32h-97.211c-.535-5.445-1.398-10.797-2.711-16h102.41c-1.273 5.195-2.012 10.57-2.488 16zm0 0M56.004 56.008c17.648 0 32 14.355 32 32 0 4.426 3.586 8 8 8 4.418 0 8-3.574 8-8 0-17.645 14.352-32 32-32 4.418 0 8-3.574 8-8 0-4.422-3.582-8-8-8-17.648 0-32-14.352-32-32 0-4.422-3.582-8-8-8-4.414 0-8 3.578-8 8 0 17.648-14.352 32-32 32-4.414 0-8 3.578-8 8 0 4.426 3.586 8 8 8zm40-21.496c3.555 5.344 8.152 9.945 13.496 13.496-5.344 3.555-9.941 8.152-13.496 13.496-3.551-5.344-8.152-9.941-13.496-13.496 5.344-3.551 9.945-8.152 13.496-13.496zm0 0M88.004 136.008c4.418 0 8-3.574 8-8 0-4.422-3.582-8-8-8-17.648 0-32-14.352-32-32 0-4.422-3.582-8-8-8-4.414 0-8 3.578-8 8 0 17.648-14.352 32-32 32-4.414 0-8 3.578-8 8 0 4.426 3.586 8 8 8 17.648 0 32 14.355 32 32 0 4.426 3.586 8 8 8 4.418 0 8-3.574 8-8 0-17.645 14.352-32 32-32zm-40 5.496c-3.551-5.344-8.152-9.941-13.496-13.496 5.344-3.551 9.938-8.152 13.496-13.496 3.555 5.344 8.152 9.938 13.496 13.496-5.344 3.555-9.941 8.152-13.496 13.496zm0 0">
</path>
</svg>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Superhero Teamwork
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<svg width="35" fill="#377dff" viewBox="0 0 60 60">
<path
d="M51.768 44c.318-1.686.309-3.417-.024-5.1l4.58-11.053v-.022c.742-2.032 1.83-3.92 3.215-5.582.345-.364.483-.877.369-1.365l-1.878-8.11-.1-.242-.019-.047-.063-.074-.141-.165-.109-.066-.155-.094-.234-.057-.066-.017c-.192-.013-.383.03-.551.123l-.048.02h-.01l-7.061 4.407c-.428.265-.693.727-.706 1.23-.196 2.159-.765 4.268-1.681 6.233v.011l-2.289 5.533c-1.123-.597-2.326-1.032-3.572-1.29.472-3.255.645-6.546.518-9.833 1.862-2.233 2.755-5.117 2.482-8.012-.625-5.828-5.892-10.037-6.117-10.214-.338-.266-.809-.286-1.168-.05-.36.237-.527.677-.417 1.093.515 1.934.069 3.975-3.735 8.172-1.709 1.65-2.251 4.17-1.371 6.377.336.844.818 1.623 1.424 2.3-.242 1.545-.432 3.008-.563 4.433-.226 2.357-.284 4.727-.174 7.092-.892.484-1.727 1.066-2.49 1.735l-4.85-20.74-.026-.055-.07-.193-4.954-9.149c-.496-.916-1.543-1.386-2.557-1.149-1.014.237-1.743 1.124-1.781 2.165l-.376 10.395.025.223v.045l4.948 21.117c-.781.034-1.555.15-2.312.345l-5.443-13.145c-.436-1.005-1.594-1.479-2.61-1.069l-8.319 3.444c-1.018.425-1.502 1.592-1.083 2.613l7.382 17.808c-4.326.227-7.685 3.859-7.573 8.19.112 4.331 3.653 7.785 7.985 7.789h44c2.858-.041 5.477-1.605 6.87-4.1 1.393-2.496 1.349-5.546-.116-8-1.465-2.454-4.128-3.941-6.986-3.9zm-1.019-25.884l4.192-2.616-1.484 3.584c-.212.51.031 1.095.541 1.307.51.212 1.095-.031 1.307-.541l1.484-3.584 1.111 4.813c-1.189 1.45-2.165 3.062-2.9 4.787-1.043.483-2.24.508-3.302.069-1.062-.439-1.892-1.303-2.288-2.381.702-1.74 1.153-3.571 1.339-5.438zm-2.3 7.851c.662.809 1.52 1.434 2.493 1.815.773.333 1.605.508 2.447.516.203-.001.405-.013.606-.037l-3.191 7.7c-.956-2.107-2.434-3.934-4.294-5.309l1.939-4.685zm-13.7-7.142l5.024.307c.031.934.02 1.9-.011 2.881-1.674.12-3.356.038-5.01-.242l-.374-.049c.1-.942.222-1.896.369-2.897h.002zm-.477-8.053c2.655-2.929 4.031-5.182 4.351-7.3 1.908 1.964 3.168 4.466 3.609 7.168.21 2.353-.517 4.693-2.024 6.512-1.975-.12-3.929-.24-5.861-.36-.83-.776-1.308-1.857-1.322-2.994-.015-1.136.435-2.229 1.245-3.026h.002zm-.076 12.943l.29.038c1.289.199 2.589.31 3.893.331.414 0 .85-.033 1.287-.067-.091 1.287-.24 2.631-.429 4.02-.247-.013-.489-.037-.737-.037-1.51.003-3.008.261-4.432.763-.046-1.684-.004-3.369.126-5.048h.002zm-7.735 11.694l-2.861-12.187c-.134-.529-.666-.853-1.197-.728-.531.124-.864.651-.75 1.184l2.571 10.969c-.707-.253-1.437-.435-2.18-.543l-4.389-18.73c.615.28 1.282.425 1.958.426l.194-.012.707 3.019c.076.353.337.638.683.745.345.107.721.019.984-.23.262-.249.37-.62.281-.97l-.708-3.021c.678-.3 1.277-.756 1.747-1.33l4.462 19.079c-.579.723-1.082 1.504-1.501 2.33zm-6.11-21.7c-1.279.248-2.585-.275-3.339-1.337l.127-3.522c.348.065.701.098 1.055.1.342.001.683-.036 1.016-.113.675-.177 1.306-.491 1.854-.922l1.684 3.108c-.201 1.29-1.139 2.342-2.397 2.688v-.002zm-2.739-11.682c.136-.032.277.031.344.154l2.144 3.965c-.387.35-.849.606-1.35.75-.512.094-1.04.069-1.541-.073l.163-4.506c.005-.14.104-.259.24-.29zm-7.237 19.973l.764 1.846-3.7 1.532c-.439.184-.687.652-.593 1.118.093.466.503.803.978.804.131 0 .261-.026.383-.076l3.7-1.533.765 1.848-1.851.767c-.441.183-.692.652-.598 1.12.093.468.505.805.982.804.131 0 .261-.026.382-.076l1.851-.767.765 1.848-3.703 1.535c-.441.183-.692.652-.598 1.12.093.468.505.805.982.804.131 0 .261-.026.382-.076l3.7-1.532.809 1.953c-3.259 1.487-5.648 4.396-6.475 7.881l-7.248-17.476 8.323-3.444zm41.625 36h-44c-3.314 0-6-2.686-6-6s2.686-6 6-6c.579-.002 1.156.082 1.711.248.3.091.625.035.878-.149s.405-.477.411-.79c.071-3.564 2.131-6.788 5.336-8.35 3.204-1.562 7.013-1.199 9.864.941.252.188.577.246.879.157.301-.088.544-.313.654-.607 1.954-5.207 7.353-8.27 12.825-7.274 5.472.995 9.447 5.763 9.442 11.324.002 1.144-.168 2.281-.505 3.374-.105.34-.022.71.219.972s.603.376.951.3c.438-.097.886-.145 1.335-.146 3.314 0 6 2.686 6 6s-2.686 6-6 6zM38.685 15.7c.314.001.61-.145.8-.395 1.248-1.69 1.731-3.826 1.33-5.888-.085-.353-.355-.631-.704-.728-.35-.097-.724.003-.979.261s-.35.634-.248.982c.239 1.465-.118 2.966-.992 4.166-.227.303-.264.708-.094 1.047.169.339.516.553.894.553l-.006.002zM37.37 46c-.744.002-1.477.173-2.145.5-1.799-2.462-5.158-3.183-7.809-1.676-2.651 1.506-3.75 4.761-2.556 7.566.157.369.519.608.92.608.135 0 .268-.027.392-.08.244-.104.437-.301.536-.547.099-.246.096-.521-.008-.765-.218-.507-.33-1.054-.33-1.606 0-2.209 1.791-4 4-4 1.552-.008 2.965.891 3.615 2.3l.07.094.053.1.064.053.155.13.16.1.18.056.188.029c.13-.001.259-.023.382-.064l.079-.019.093-.069.105-.054c.525-.425 1.18-.656 1.856-.656 1.169.002 2.231.683 2.72 1.745.229.503.822.724 1.325.495.503-.229.724-.822.495-1.325-.814-1.775-2.587-2.913-4.54-2.915zM17.684 39.051c-.151.049-3.684 1.271-3.684 4.949 0 .552.448 1 1 1s1-.448 1-1c.082-1.395.999-2.602 2.322-3.053.525-.176.807-.744.631-1.269-.176-.525-.744-.807-1.269-.631v.004zM31.757 37.97l.243.03c.458 0 .858-.312.969-.757.46-1.867 2.113-3.196 4.036-3.243.552-.001.999-.45.997-1.002-.001-.552-.45-.999-1.002-.998-2.842.038-5.299 1.995-5.97 4.757-.134.536.191 1.079.727 1.213z">
</path>
</svg>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Superhero Teamwork
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
</div>
</div>
</section>
<hr />
<section>
<div class="container mx-auto p-5">
<div class="space-y-20">
<div class="lg:flex flex-cols items-center justify-between">
<div class="lg:w-1/2 w-full">
<h2 class="sm:text-h3 lg:text-h2 text-h5 text-title font-bold">
60% Faster Business
</h2>
<p class="text-p mt-5">
Answering those questions and more is a tall order, but one
you should approach with enthusiasm. After all, this is the
one place you can and should sing your own praises.
</p>
</div>
<div class="lg:w-1/2 w-full mt-12 lg:mt-0">
<svg style="max-height: 300px" class="m-auto" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path
d="M435.566 33.37h-72.196c-10.674 9.755-17.37 23.773-17.37 39.356 0 9.56 2.531 18.524 6.943 26.284l-11.781 11.788c3.771 1.59 7.236 3.909 10.216 6.891l13.425 13.433 10.696-10.703c7.212 3.616 15.349 5.663 23.97 5.663 29.53 0 53.468-23.887 53.468-53.355-.001-15.584-6.697-29.602-17.371-39.357z"
fill="#fed2a4"></path>
<path
d="M362.319 34.37c-10.057 9.701-16.319 23.294-16.319 38.356 0 9.56 2.531 18.524 6.943 26.284l-11.781 11.788c3.771 1.59 7.236 3.909 10.216 6.891l3.947 3.949 17.618-17.628c-4.412-7.76-6.943-16.725-6.943-26.284 0-17.868 8.81-33.673 22.322-43.356z"
fill="#ffbd86"></path>
<path
d="M420.45 86.304c-4.142 0-7.5-3.357-7.5-7.5v-12.157c0-4.143 3.358-7.5 7.5-7.5s7.5 3.357 7.5 7.5v12.156c0 4.143-3.358 7.501-7.5 7.501z"
fill="#6d3326"></path>
<path
d="M473.677 201.135l-55.471.001-37.572-37.597c-.692 7.145-3.766 14.099-9.222 19.558l-9.527 9.533 39.772 39.797c1.859 1.86 4.383 2.9 7.013 2.888h65.006z"
fill="#fe9901"></path>
<path
d="M473.677 220.314h-55.007c-2.63.013-5.154-1.027-7.013-2.888l-37.478-37.501c-.844 1.102-1.761 2.164-2.768 3.171l-9.527 9.533 39.772 39.797c1.859 1.86 4.383 2.9 7.013 2.888h65.006v-15z"
fill="#fb8801"></path>
<path
d="M504.5 200.385c0-2.75-2.25-5-5-5h-21.823c-2.75 0-5 2.25-5 5v36.299c0 2.75 2.25 5 5 5l21.823.001c2.75 0 5-2.25 5-5z"
fill="#fed2a4"></path>
<path
d="M177.564 261.767l-32.249 32.269h-106.958c.036.227.07.454.07.69v50.3h117.442c6.757 0 13.238-2.686 18.017-7.467l50.861-50.893-24.885-24.899z"
fill="#5a5a5a"></path>
<path d="M145.315 294.035h-106.958c.036.227.07.454.07.69v24.31h116.888l57.234-57.269h-34.985z"
fill="#444"></path>
<path
d="M188.982 179.667l1.236 1.237c1.56 1.56 1.56 4.099 0 5.658l-15.434 15.443c-.751.751-1.755 1.165-2.827 1.165s-2.076-.414-2.828-1.165l-25.649-25.666c-.752-.752-1.166-1.756-1.166-2.829s.414-2.077 1.165-2.829l5.567-5.57h-60.233c-2.75 0-3.658 1.807-2.019 4.014l8.297 11.173c1.64 2.207 1.669 5.842.065 8.075l-8.428 11.737c-1.604 2.233-.666 4.062 2.084 4.062h130.792l39.039-39.061h-55.115z"
fill="#fe646f"></path>
<path
d="M116.729 200.11l8.428-11.737c1.604-2.233 1.574-5.868-.065-8.075l-8.297-11.173c-1.64-2.207-.731-4.014 2.019-4.014h-30c-2.75 0-3.658 1.807-2.019 4.014l8.297 11.173c1.64 2.207 1.669 5.842.065 8.075l-8.428 11.737c-1.604 2.233-.666 4.062 2.084 4.062h30c-2.75 0-3.687-1.828-2.084-4.062z"
fill="#fd4755"></path>
<path
d="M281.653 274.326l12.551-12.559h-25.102zM372.119 137.027l-20.035-20.046c-4.328-4.33-9.558-7.201-15.084-8.627v.587c2.525.74 4.841 2.102 6.754 4.017 3.003 3.004 4.657 7.001 4.657 11.254 0 8.778-7.136 15.92-15.908 15.92l-50.305-.002-67.332 67.37 17.198 17.206h99.178l40.877-40.902c12.909-12.914 12.909-33.858 0-46.777z"
fill="#ffdc48"></path>
<path d="M282.198 140.13l-67.332 67.37 17.198 17.206h.6l84.526-84.575z" fill="#fac600"></path>
<path
d="M233.477 224.706l-17.901-17.913-17.904 17.913zM278.19 454.203l.207-.021h50.752v-123.186c0-6.762-2.684-13.246-7.463-18.027l-51.17-51.202h-72.067l79.742 79.79v112.646z"
fill="#5a5a5a"></path>
<path
d="M212.678 224.706l10.4-10.406-7.502-7.507-17.904 17.913zM278.19 454.203l.207-.021h24.793v-122.625l-69.748-69.79h-34.994l79.742 79.79z"
fill="#444"></path>
<path
d="M352.82 478.63v-13.425c0-6.629-5.39-12.023-12.015-12.023h-62.409c-2.978 0-5.391 2.416-5.391 5.396v20.052z"
fill="#d78878"></path>
<path
d="M303.005 478.63v-20.052c0-2.979 2.414-5.396 5.391-5.396h-30c-2.978 0-5.391 2.416-5.391 5.396v20.052z"
fill="#ca6e59"></path>
<path
d="M344.461 112.251c-3.194-3.197-7.441-4.958-11.959-4.958h-114c-2.629 0-5.15 1.05-7.001 2.92l-45.761 46.198 23.949 23.964 39.224-39.247 103.59.004c9.323 0 16.908-7.591 16.908-16.92 0-4.522-1.759-8.77-4.95-11.961z"
fill="#fe9901"></path>
<path
d="M344.461 112.251c-3.194-3.197-7.441-4.958-11.959-4.958h-114c-2.629 0-5.15 1.05-7.001 2.92l-45.761 46.198 12.484 12.492 43.277-43.69c1.851-1.87 4.372-2.92 7.001-2.92h114c2.415 0 4.746.518 6.887 1.475-.112-4.354-1.843-8.431-4.928-11.517z"
fill="#fb8801"></path>
<path
d="M168.423 202.713c1.944 1.944 5.125 1.944 7.069 0l15.433-15.443c1.944-1.944 1.944-5.128 0-7.072l-25.65-25.666c-1.944-1.945-5.125-1.945-7.069 0l-15.434 15.443c-1.944 1.944-1.944 5.128 0 7.072z"
fill="#fed2a4"></path>
<path
d="M304.511 259.215c-1.936 1.953-5.77 3.552-8.52 3.552h-252.267c-2.75 0-3.688-1.828-2.084-4.061l8.428-11.738c1.604-2.233 1.574-5.868-.066-8.075l-8.297-11.172c-1.64-2.207-.732-4.014 2.018-4.014h290.973c2.75 0 3.417 1.599 1.48 3.552z"
fill="#fe646f"></path>
<path
d="M76.64 258.705l8.428-11.738c1.604-2.233 1.574-5.868-.065-8.075l-8.297-11.172c-1.64-2.207-.731-4.014 2.019-4.014h-35c-2.75 0-3.658 1.807-2.018 4.014l8.297 11.172c1.64 2.207 1.67 5.842.066 8.075l-8.428 11.738c-1.604 2.233-.666 4.061 2.084 4.061h35c-2.752.001-3.69-1.827-2.086-4.061z"
fill="#fd4755"></path>
<path
d="M504.5 492.63h-497c-4.142 0-7.5-3.357-7.5-7.5s3.358-7.5 7.5-7.5h497c4.142 0 7.5 3.357 7.5 7.5 0 4.142-3.358 7.5-7.5 7.5z"
fill="#5a5a5a"></path>
<path
d="M10.558 369.193c-1.689 0-3.058-1.369-3.058-3.06v-73.742c0-1.69 1.369-3.059 3.058-3.059h23.478c2.973 0 5.391 2.419 5.391 5.393v62.446c0 6.629-5.389 12.021-12.014 12.021h-16.855z"
fill="#d78878"></path>
<path
d="M34.036 289.333h-23.478c-1.689 0-3.058 1.369-3.058 3.059v30c0-1.69 1.369-3.059 3.058-3.059h23.478c2.973 0 5.391 2.419 5.391 5.393v-30c0-2.974-2.418-5.393-5.391-5.393z"
fill="#ca6e59"></path>
<path
d="M450.11 34.37c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-50.642c-14.438 0-27.529 5.72-37.149 15z"
fill="#d78878"></path>
</svg>
</div>
</div>
<!-- card -->
<div class="flex flex-col-reverse items-center md:space-y-0 md:flex-row">
<div class="lg:w-1/2 w-full mt-12 lg:mt-0">
<svg style="max-height: 300px" class="m-auto" viewBox="-29 0 511 512">
<path
d="M366.168 0h-138.914l-20.02 235.668 20.02 276.332c136.426-51.363 226.75-181.883 226.75-327.656v-96.508c-43.254-10.551-77.285-44.582-87.836-87.836zm0 0"
fill="#ff4a4a"></path>
<path
d="M88.336 0c-10.551 43.254-44.582 77.285-87.836 87.836v96.508c0 145.773 90.324 276.293 226.754 327.656v-512zm0 0"
fill="#ff9f22"></path>
<path
d="M352.66 101.344c-11.262-11.266-20.949-23.867-28.879-37.477h-96.527l-20.02 147.801 20.02 230.988c44.996-21.434 83.398-54.074 112.016-95.422 33.277-48.086 50.867-104.414 50.867-162.891v-54.121c-13.609-7.926-26.211-17.617-37.477-28.879zm0 0"
fill="#b4d2d7"></path>
<path
d="M130.723 63.867c-7.926 13.609-17.617 26.215-28.879 37.477s-23.867 20.953-37.477 28.879v54.121c0 58.477 17.59 114.805 50.867 162.891 28.617 41.348 67.02 73.988 112.02 95.422v-378.789zm0 0"
fill="#e1ebf0"></path>
<path
d="M212.254 251.875h30v71.547h-30zm0 0M227.254 167.668l-20.02 49.602 20.02 49.605c27.348 0 49.602-22.254 49.602-49.605 0-27.348-22.254-49.602-49.602-49.602zm0 0"
fill="#03232e"></path>
<path
d="M177.648 217.27c0 27.352 22.254 49.602 49.605 49.602v-99.207c-27.352.004-49.605 22.254-49.605 49.605zm0 0"
fill="#07485e"></path>
</svg>
</div>
<div class="lg:w-1/2 w-full">
<h2 class="sm:text-h3 lg:text-h2 text-h5 text-title font-bold">
Control & Protection
</h2>
<p class="text-p mt-5">
Answering those questions and more is a tall order, but one
you should approach with enthusiasm. After all, this is the
one place you can and should sing your own praises.
</p>
</div>
</div>
</div>
</div>
</section>
<hr class="container mx-auto p-5" />
<section>
<div class="container mx-auto p-5">
<div class="grid md:grid-cols-3 grid-cols-1 gap-5">
<!-- Card -->
<div>
<div class="bg-gradient-to-b from-otBg1 to-otBg2 flex rounded-full" style="width: 80px; height: 80px">
<svg class="m-auto" width="40" fill="#ffffff" viewBox="0 0 513.6 513.6">
<path
d="M508 384.8c-5.6-7.2-11.2-12.8-18.4-16l-46.4-23.2c-.8-.8-3.2-4-3.2-8.8v-5.6c10.4-11.2 16-26.4 16-42.4v-16c0-12.8-4.8-24.8-14.4-33.6-8.8-9.6-20.8-14.4-33.6-14.4s-24.8 4.8-33.6 14.4c-9.6 8.8-14.4 20.8-14.4 33.6v16c0 15.2 5.6 31.2 16 42.4v5.6c0 4.8-2.4 8-3.2 8.8l-24.8 12-40.8-20c-.8-.8-3.2-3.2-3.2-8.8v-27.2c14.4-14.4 22.4-34.4 24-54.4 1.6-.8 2.4-1.6 3.2-2.4 3.2-4 4.8-8 4.8-12v-40c0-21.6-8-41.6-23.2-56.8-15.2-15.2-35.2-23.2-56.8-23.2-21.6 0-41.6 8-56.8 23.2-15.2 15.2-23.2 35.2-23.2 56.8v40c0 4 1.6 8 4.8 11.2l3.2 2.4c1.6 20 9.6 40.8 24 54.4v28c0 5.6-2.4 8-3.2 8.8l-40.8 20-24.8-12c-.8-.8-3.2-4-3.2-8.8v-5.6c10.4-11.2 16-26.4 16-42.4v-16c0-12.8-4.8-24.8-14.4-33.6-8.8-9.6-20.8-14.4-33.6-14.4s-24.8 4.8-33.6 14.4c-9.6 8.8-14.4 20.8-14.4 33.6v16c0 15.2 5.6 31.2 16 42.4v5.6c0 4.8-2.4 8-3.2 8.8l-46.4 23.2c-6.4 3.2-12 8.8-16 14.4-4 6.4-6.4 13.6-6.4 21.6v24.8l10.4 4.8c14.4 7.2 29.6 12.8 45.6 16 10.4 2.4 21.6 4 32.8 4.8v57.6h16v-72c0-35.2 24.8-47.2 59.2-64.8h1.6v-.8l36.8-18.4c5.6 24.8 28 44 54.4 44s48.8-18.4 54.4-44l36.8 18.4v.8h1.6c34.4 17.6 59.2 29.6 59.2 64.8v72h16v-56.8c11.2-.8 22.4-2.4 32.8-4.8 16-4 31.2-9.6 45.6-16l10.4-4.8v-24.8c0-7.2-2.4-14.4-5.6-20.8zm-436-112c0-8.8 3.2-16.8 9.6-22.4 6.4-6.4 14.4-9.6 22.4-9.6s16.8 3.2 22.4 9.6c6.4 6.4 9.6 14.4 9.6 22.4v16c0 16.8-9.6 40-32 40s-32-23.2-32-40v-16zm16 167.2c-9.6-.8-20-2.4-28.8-4.8-14.4-3.2-28.8-8.8-41.6-15.2h-1.6v-15.2c0-4.8 1.6-8.8 3.2-12.8 2.4-4 5.6-7.2 9.6-8.8l46.4-23.2c4.8-2.4 10.4-8.8 12-18.4 4.8 2.4 10.4 3.2 16.8 3.2s11.2-.8 16.8-3.2c1.6 8.8 7.2 16 12 18.4l13.6 7.2c-31.2 15.2-58.4 32.8-58.4 72.8zm122.4-292.8c12-12 28-18.4 45.6-18.4 16.8 0 32.8 6.4 45.6 18.4 11.2 11.2 17.6 25.6 18.4 41.6-4.8-2.4-10.4-4-16-4h-8c-2.4 0-4-.8-5.6-2.4-1.6-1.6-2.4-3.2-2.4-5.6 0-3.2-1.6-6.4-4.8-7.2-3.2-1.6-6.4-.8-8.8 1.6l-13.6 13.6h-52.8c-5.6 0-11.2 1.6-16 4 .8-15.2 7.2-30.4 18.4-41.6zm-10.4 93.6c0-4.8-3.2-8-8-8v-16c0-4 1.6-8 4.8-11.2 3.2-3.2 7.2-4.8 11.2-4.8h56c2.4 0 4-.8 5.6-2.4l7.2-7.2 2.4 2.4c4.8 4.8 10.4 7.2 16.8 7.2h8c4 0 8 1.6 11.2 4.8s4.8 7.2 4.8 11.2v16c-4.8 0-8 3.2-8 8 0 24.8-15.2 64-56 64s-56-39.2-56-64zm56 144c-20.8 0-37.6-16-40-36 4.8-4.8 8-12 8-20v-16c8.8 4.8 20 8 32 8s23.2-3.2 32-8v16c0 8 3.2 15.2 8 20-2.4 20-19.2 36-40 36zm120-112c0-8.8 3.2-16.8 9.6-22.4 6.4-6.4 14.4-9.6 22.4-9.6s16.8 3.2 22.4 9.6c6.4 6.4 9.6 14.4 9.6 22.4v16c0 16.8-9.6 40-32 40s-32-23.2-32-40v-16zm120 147.2l-1.6.8c-13.6 6.4-27.2 12-41.6 15.2-9.6 2.4-19.2 4-28.8 4.8 0-40-27.2-57.6-58.4-73.6l13.6-7.2c4.8-2.4 10.4-8.8 12-18.4 4.8 2.4 10.4 3.2 16.8 3.2s11.2-.8 16.8-3.2c1.6 8.8 7.2 16 12 18.4l46.4 23.2c4 1.6 7.2 4.8 9.6 8.8 2.4 4 3.2 8 3.2 12.8v15.2zM152 464.8h16v48h-16zM344 464.8h16v48h-16zM368 128.8h16v16h-16zM400 128.8h16v16h-16zM432 128.8h16v16h-16zM320 88.8h176v96h-24v20.8l-18.4-18.4c-1.6-1.6-3.2-2.4-5.6-2.4h-96v16h92.8l29.6 29.6c1.6 1.6 3.2 2.4 5.6 2.4.8 0 2.4 0 3.2-.8 3.2-1.6 4.8-4 4.8-7.2v-24h24v-128h-208v40h16v-24zM48 48.8h160v16h-160zM48 80.8h160v16h-160zM48 112.8h112v16h-112zM24 200.8c0 3.2 1.6 6.4 4.8 7.2.8.8 2.4.8 3.2.8 2.4 0 4-.8 5.6-2.4l29.6-29.6h92.8v-16h-96c-2.4 0-4 .8-5.6 2.4l-18.4 18.4v-20.8h-24v-144h224v80h16v-96h-256v176h24v24z">
</path>
</svg>
</div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Superhero Teamwork
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<div class="bg-gradient-to-b from-otBg1 to-otBg2 flex rounded-full" style="width: 80px; height: 80px">
<svg class="m-auto" width="40" fill="#ffffff" viewBox="0 0 513.6 513.6">
<path
d="M314.629 321.023c.445-2.004-.164-4.094-1.613-5.543l-43.516-43.516c12.785-17.621 10.863-41.922-4.531-57.316-15.395-15.395-39.695-17.316-57.316-4.531l-43.52-43.516c-1.449-1.453-3.539-2.059-5.539-1.617-2.004.445-3.641 1.879-4.34 3.809l-35.824 98.512c-11.809 32.328-30.516 61.699-54.816 86.074-9.816 9.816-9.816 25.734 0 35.555l27.07 27.066c9.816 9.82 25.734 9.82 35.551 0l.5-.488 55.98 55.98c2.344 2.344 6.141 2.344 8.484 0 17.297-17.293 17.297-45.332 0-62.625l-24.941-24.941c14.477-9.234 29.918-16.859 46.051-22.742l98.512-35.824c1.926-.699 3.363-2.336 3.809-4.336zm-80.977-107.344c11.793 0 22.645 6.426 28.313 16.766 5.668 10.34 5.246 22.949-1.102 32.887l-44.582-44.582c5.184-3.324 11.215-5.086 17.371-5.07zm-125.191 197.684c-3.488.012-6.832-1.375-9.293-3.848l-27.066-27.07c-5.133-5.129-5.133-13.449 0-18.582 4.672-4.676 9.156-9.547 13.453-14.605l46.797 46.805c-5.051 4.293-9.918 8.777-14.605 13.453-2.457 2.473-5.801 3.859-9.285 3.848zm74.258 5.992c10.969 10.973 12.586 28.195 3.852 41.02l-51.102-51.102c6.574-5.883 13.473-11.395 20.66-16.508zm25.488-67.449c-23.887 8.73-46.301 21.066-66.453 36.582l-48.625-48.625c15.512-20.156 27.848-42.566 36.578-66.457l32.602-89.66 135.559 135.555zm0 0M298.98 193.5c-18.473-18.508-46.223-24.172-70.465-14.375-3.074 1.238-4.563 4.734-3.324 7.809 1.238 3.074 4.734 4.563 7.809 3.324 19.781-7.969 42.41-3.355 57.492 11.727 15.078 15.078 19.695 37.707 11.727 57.492-1.238 3.07.25 6.566 3.324 7.805s6.566-.25 7.805-3.32c9.797-24.242 4.137-51.992-14.367-70.461zm0 0M334.734 278.438c3.074 1.238 6.57-.25 7.809-3.324 14.414-35.777 6.07-76.703-21.207-103.977-27.273-27.277-68.203-35.621-103.977-21.207-3.074 1.238-4.563 4.734-3.324 7.809 1.238 3.074 4.734 4.563 7.809 3.324 31.313-12.617 67.137-5.313 91.008 18.559 23.871 23.871 31.176 59.695 18.559 91.008-1.238 3.074.25 6.57 3.324 7.809zm0 0M401.625 0c-49.914 0-90.375 40.461-90.375 90.375s40.461 90.375 90.375 90.375 90.375-40.461 90.375-90.375c-.055-49.891-40.484-90.32-90.375-90.375zm0 168.75c-43.285 0-78.375-35.09-78.375-78.375s35.09-78.375 78.375-78.375 78.375 35.09 78.375 78.375c-.051 43.266-35.109 78.324-78.375 78.375zm0 0M434.09 79.879c12.379 0 22.418-10.023 22.438-22.406.016-12.379-9.996-22.434-22.375-22.469s-22.449 9.965-22.5 22.344l-27.824 16.066c-8.98-7.773-22.461-7.203-30.754 1.301-8.289 8.504-8.516 21.996-.512 30.773 8 8.777 21.457 9.797 30.691 2.328l28.523 17.875c1.176 11.082 10.297 19.625 21.434 20.07 11.133.445 20.91-7.34 22.969-18.293 2.055-10.953-4.23-21.758-14.77-25.379-10.539-3.625-22.141 1.027-27.254 10.93l-23.906-14.98c1.711-4.707 1.797-9.855.242-14.617l24.531-14.168c4.09 6.602 11.301 10.621 19.066 10.625zm0-32.871c5.762 0 10.434 4.672 10.434 10.438 0 5.762-4.672 10.434-10.438 10.434-5.762 0-10.438-4.672-10.438-10.438.008-5.762 4.676-10.43 10.441-10.434zm-64.93 53.805c-5.762 0-10.434-4.676-10.434-10.438 0-5.766 4.672-10.438 10.438-10.438 5.762 0 10.438 4.672 10.438 10.438-.008 5.762-4.676 10.43-10.441 10.438zm64.93 12.059c5.762 0 10.434 4.672 10.434 10.438s-4.672 10.438-10.438 10.438c-5.766 0-10.438-4.676-10.438-10.438.008-5.762 4.676-10.434 10.441-10.438zm0 0M401.625 311.25c-49.914 0-90.375 40.461-90.375 90.375s40.461 90.375 90.375 90.375 90.375-40.461 90.375-90.375c-.055-49.891-40.484-90.32-90.375-90.375zm0 168.75c-43.285 0-78.375-35.09-78.375-78.375s35.09-78.375 78.375-78.375 78.375 35.09 78.375 78.375c-.051 43.266-35.109 78.324-78.375 78.375zm0 0M438.73 396.523l-49.148-30.402c-1.852-1.145-4.176-1.195-6.078-.137-1.898 1.059-3.078 3.063-3.078 5.238v60.801c0 2.176 1.18 4.18 3.078 5.238 1.902 1.059 4.227 1.004 6.078-.141l49.148-30.398c1.77-1.094 2.844-3.023 2.844-5.105 0-2.078-1.074-4.008-2.844-5.102zm-46.305 24.734v-39.266l31.742 19.633zm0 0M90.375 180.75c49.914 0 90.375-40.461 90.375-90.375s-40.461-90.375-90.375-90.375-90.375 40.461-90.375 90.375c.055 49.891 40.484 90.32 90.375 90.375zm0-168.75c43.285 0 78.375 35.09 78.375 78.375s-35.09 78.375-78.375 78.375-78.375-35.09-78.375-78.375c.051-43.266 35.109-78.324 78.375-78.375zm0 0M53.5 126.258h42.938c8.836-.012 15.992-7.168 16-16v-.953l21.926 12.031c1.859 1.02 4.117.984 5.941-.098 1.828-1.078 2.945-3.043 2.945-5.164v-51.398c0-2.121-1.121-4.082-2.945-5.164-1.824-1.078-4.082-1.117-5.941-.098l-21.926 12.035v-.957c-.008-8.832-7.164-15.988-16-16h-42.938c-8.832.012-15.988 7.168-16 16v39.766c.012 8.832 7.168 15.988 16 16zm77.75-51.445v31.125l-18.813-10.32v-10.48zm-81.75-4.32c0-2.207 1.789-4 4-4h42.938c2.211 0 4 1.793 4 4v39.766c0 2.207-1.789 4-4 4h-42.938c-2.211 0-4-1.793-4-4zm0 0">
</path>
</svg>
</div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
AI Productivity Boost
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<div class="bg-gradient-to-b from-otBg1 to-otBg2 flex rounded-full" style="width: 80px; height: 80px">
<svg class="m-auto" width="40" fill="#ffffff" viewBox="0 0 513.6 513.6">
<path
d="M454.889 430.401l-8.412-3.373c42.303-47.058 65.523-107.502 65.523-171.028 0-51.971-15.712-101.977-44.339-144.014-.347-.683-.777-1.298-1.277-1.835-12.541-18.075-27.47-34.653-44.602-49.226-3.401-2.893-8.502-2.481-11.395.92-2.893 3.401-2.481 8.504.919 11.396 13.744 11.691 25.977 24.759 36.589 38.902-17.112 6.688-37.652 12.352-60.582 16.827-6.33-18.86-14.11-36.444-23.256-52.309-12.327-21.385-26.506-38.605-41.959-51.27 24.051 6.876 46.962 17.53 67.987 31.733 3.7 2.497 8.724 1.526 11.224-2.174 2.499-3.699 1.526-8.724-2.174-11.224-42.339-28.606-91.835-43.726-143.135-43.726-68.381 0-132.667 26.628-181.018 74.982-48.354 48.351-74.982 112.639-74.982 181.018 0 63.608 23.252 124.06 65.624 171.135l-8.306 3.253c-3.059 1.105-29.07 11.48-29.07 44.553v28.967c0 4.466 3.618 8.092 8.084 8.092h118.994c.39 0 .771-.037 1.146-.091.376.054.756.091 1.146.091h32.894c4.466 0 8.084-3.618 8.084-8.084 0-4.466-3.619-8.084-8.084-8.084h-24.81v-28.155c0-29.704 23.332-38.248 24.274-38.58l.373-.136 39.368-15.418.255.276 20.922 20.378c1.511 1.47 3.536 2.293 5.641 2.293l.127-.001c2.151-.033 4.202-.924 5.693-2.474l20.089-20.844 39.315 15.766.383.142c.993.349 24.328 8.896 24.328 38.598v28.155h-130.692c-4.466 0-8.084 3.619-8.084 8.084 0 4.466 3.619 8.084 8.084 8.084h260.061c4.466 0 8.084-3.676 8.084-8.141v-28.918c.002-32.946-25.813-43.369-29.034-44.54zm-24.461-9.809l-7.969-3.196v-4.6c8.807-5.165 15.576-13.438 18.792-23.306 11.761-.929 21.051-10.776 21.051-22.771 0-7.134-3.288-13.51-8.423-17.708v-14.368c0-27.702-20.788-50.625-47.58-54.027.305-5.481.516-11.003.618-16.532h88.765c-1.943 58.517-24.929 113.79-65.254 156.508zm-29.186-18.199h-7.373c-14.285 0-25.906-11.621-25.906-25.904v-21.39c10.531-1.143 29.184-4.824 43.555-16.826 3.219 5.521 8.2 11.492 15.63 14.979v23.236c-.001 14.284-11.622 25.905-25.906 25.905zm5.05 15.854v4.482l-9.008 9.346-8.464-8.243v-5.586c1.657.199 3.34.314 5.05.314h7.373c1.71.001 3.391-.114 5.049-.313zm-46.387-78.791h-.027c-.278 0-.554.015-.825.042l-.259.039-.542.083-.359.092-.414.107-.258.094v-5.269c0-21.126 17.187-38.312 38.313-38.312h3.866c21.125 0 38.309 17.186 38.309 38.312v5.203l-.462-.126-.223-.064c-11.27-2.563-14.956-17.604-14.983-17.718-.701-3.098-3.152-5.498-6.265-6.134-3.113-.638-6.308.608-8.17 3.182-14.639 20.237-47.273 20.469-47.701 20.469zm83.41 32.711v-10.894c1.702 1.215 2.818 3.202 2.818 5.448s-1.116 4.231-2.818 5.446zm14.068-246.419c23.417 36.176 36.826 78.29 38.297 122.167h-88.767c-.656-36.389-5.741-71.486-14.808-103.449 24.855-4.937 47.016-11.246 65.278-18.718zm-66.64 122.169h-82.766c-11.029-12.192-26.533-20.247-43.893-21.587v-69.52c39.671-.395 77.954-3.694 112.062-9.427 8.925 30.912 13.934 65.046 14.597 100.534zm-71.313 84.418c0 4.755-3.212 8.764-7.579 9.997v-19.997c4.367 1.235 7.579 5.245 7.579 10zm-55.346-315.718c32.171 3.436 62.439 27.306 85.965 68.118 8.256 14.321 15.345 30.143 21.189 47.115-32.594 5.337-69.173 8.409-107.155 8.79v-124.023zm-5.127 225.663c27.537 0 49.939 22.404 49.939 49.942v9.879l-.166-.124-.359-.267-.291-.189-.367-.223-.352-.181-.341-.165-.434-.17-.303-.111-.498-.14-.223-.064c-15.357-3.492-20.222-23.515-20.263-23.689-.701-3.098-3.152-5.498-6.265-6.134-3.112-.64-6.308.608-8.17 3.182-18.931 26.172-60.75 26.44-61.302 26.44h-.031c-.278 0-.554.014-.825.041l-.252.039-.549.083-.342.088-.431.111-.385.141-.355.129-.43.206-.275.133-.422.254-.244.149-.379.282-.244.182-.216.194v-10.077c0-27.538 22.402-49.941 49.939-49.941h4.836zm-137.7 5.636c.663-35.494 5.674-69.635 14.601-100.55 34.156 5.741 72.48 9.047 112.058 9.445v69.602c-16.947 1.587-32.054 9.589-42.859 21.557-.294-.032-.593-.053-.896-.053h-82.904zm80.19 74.336v20.166c-4.533-1.121-7.906-5.209-7.906-10.083-.001-4.873 3.373-8.961 7.906-10.083zm46.469-305.635v124.023c-37.892-.384-74.5-3.468-107.146-8.815 5.843-16.962 12.929-32.774 21.181-47.09 23.526-40.812 53.794-64.682 85.965-68.118zm-58.103 8.845c-15.418 12.66-29.567 29.853-41.871 51.198-9.143 15.861-16.92 33.437-23.249 52.292-22.901-4.469-43.408-10.12-60.488-16.782 30.962-41.185 74.862-72.116 125.608-86.708zm-135.123 100.324c18.216 7.444 40.381 13.729 65.212 18.661-9.073 31.967-14.158 67.072-14.816 103.469h-88.766c1.495-44.906 15.39-86.723 38.37-122.13zm52.093 292.462c1.657.199 3.34.313 5.05.313h7.374c1.708 0 3.391-.114 5.047-.314v4.481l-9.006 9.346-8.465-8.243v-5.583zm12.424-15.855h-7.374c-14.285 0-25.906-11.621-25.906-25.905v-21.38c10.529-1.139 29.175-4.826 43.555-16.835 3.22 5.522 8.2 11.494 15.629 14.981v23.235c-.001 14.283-11.621 25.904-25.904 25.904zm20.801-80.455c-.701-3.098-3.152-5.498-6.265-6.134-3.113-.638-6.309.608-8.169 3.182-14.65 20.249-47.31 20.471-47.704 20.471h-.027c-.278 0-.554.014-.825.041l-.252.039-.549.083-.342.088-.431.111-.255.094v-5.269c0-21.126 17.186-38.313 38.312-38.313h3.867c21.125 0 38.309 17.187 38.309 38.313v5.204h-.002l-.474-.13-.212-.06c-11.268-2.563-14.954-17.607-14.981-17.72zm-123.689-57.854h88.765c.101 5.568.316 11.129.623 16.645-26.361 3.791-46.689 26.519-46.689 53.914v14.305c-5.185 4.196-8.51 10.6-8.51 17.771 0 12.084 9.433 21.983 21.32 22.785 3.216 9.862 9.982 18.128 18.786 23.292v4.553l-8.831 3.458c-40.461-42.751-63.52-98.08-65.464-156.723zm53.438 97.009v11.252c-1.85-1.192-3.081-3.266-3.081-5.624 0-2.36 1.231-4.434 3.081-5.628zm79.775 106.585v28.154h-105.115v-20.891c0-22.539 17.62-29.071 18.305-29.314l.373-.136 30.491-11.941 16.202 15.78c1.51 1.471 3.534 2.293 5.64 2.293l.128-.001c2.151-.033 4.201-.924 5.692-2.474l15.304-15.882 18.917 7.585c-3.587 7.341-5.937 16.232-5.937 26.827zm77.998-70.642l-42.908 16.803c-5.464 1.88-13.026 6.217-19.734 13.369l-24.467-9.812v-4.598c8.809-5.166 15.577-13.439 18.793-23.308 11.762-.929 21.053-10.776 21.053-22.771 0-7.134-3.289-13.51-8.424-17.708v-14.368c0-28.519-22.03-51.974-49.963-54.279-.308-5.393-.521-10.833-.624-16.281h73.06c-4.036 8.543-6.304 18.078-6.304 28.137v18.864c-6.457 4.851-10.642 12.57-10.642 21.251 0 14.51 11.697 26.334 26.157 26.556 3.794 12.814 12.533 23.52 24.001 29.899v8.246zm-66.251-24.868v-10.898c1.703 1.216 2.82 3.203 2.82 5.45s-1.117 4.233-2.82 5.448zm108.322 30.51v.52l-13.246 13.745-12.657-12.328v-10.172c2.715.453 5.499.7 8.342.7h9.222c2.841 0 5.624-.247 8.339-.698v8.233zm-8.339-23.702h-9.222c-18.982 0-34.425-15.442-34.425-34.424v-28.542c12.902-1.188 38.414-5.673 57.049-22.402 3.933 7.443 10.526 16.084 21.02 20.566v30.377c-.001 18.983-15.442 34.425-34.422 34.425zm86.072 48.287c-6.707-7.17-14.278-11.522-19.754-13.412l-41.812-16.769v-8.292c11.471-6.38 20.208-17.089 24.001-29.907 14.307-.396 25.827-12.149 25.827-26.547 0-8.631-4.14-16.311-10.534-21.167v-18.948c0-10.058-2.267-19.594-6.304-28.137h71.983c-.105 5.47-.319 10.932-.631 16.351-27.506 2.729-49.06 25.998-49.06 54.208v14.307c-5.184 4.195-8.508 10.599-8.508 17.77 0 12.085 9.433 21.984 21.32 22.785 3.216 9.862 9.983 18.128 18.787 23.292v4.553l-25.315 9.913zm4.461-66.17v11.252c-1.851-1.192-3.081-3.266-3.081-5.624 0-2.36 1.231-4.435 3.081-5.628zm115.962 134.739h-105.116v-28.155c0-10.552-2.329-19.413-5.893-26.736l18.876-7.392 16.2 15.78c1.51 1.471 3.534 2.294 5.641 2.294l.127-.001c2.151-.033 4.201-.924 5.693-2.474l15.305-15.882 30.426 12.2.368.138c.75.266 18.374 6.799 18.374 29.338v20.89z">
</path>
</svg>
</div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Integrated APIs
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
</div>
</div>
</section>
<hr />
<section id="features">
<div class="container mx-auto p-5">
<h2 class="text-h4 md:text-h3 lg:text-h2 font-bold text-title text-center mb-16">
Features
</h2>
<div class="grid md:grid-cols-3 grid-cols-1 gap-5">
<!-- Card -->
<div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Netowking for Success
</h5>
<p class="text-desc">
Answering those questions and
<a href="#" class="text-primary">more is</a> a tall order, but
one you should approach with enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Instant Insights
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Intelligent Learning
</h5>
<p class="text-desc">
Answering<a href="#" class="text-primary">those questions</a>
and more is a tall order, but one you should approach with
enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Superhero Teamwork
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
<!-- Card -->
<div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
AI Productivity Boost
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach
<a href="#" class="text-primary">with enthusiasm.</a>
</p>
</div>
<!-- Card -->
<div>
<h5 class="text-h5 font-medium mt-4 mb-5 text-desc">
Integrated APIs
</h5>
<p class="text-desc">
Answering those questions and more is a tall order, but one you
should approach with enthusiasm.
</p>
</div>
</div>
</div>
</section>
<hr />
<section id="PRICING">
<div class="container mx-auto p-5">
<h2 class="text-h4 md:text-h3 lg:text-h2 font-bold text-title text-center mb-16">
Pay for what you use
</h2>
<div class="md:flex items-center justify-center md:space-x-24 py-14 px-5 border rounded-lg w-full">
<div class="flex flex-col items-center">
<!-- <h1 class="text-h1"><span class="text-h4">$</span>5 <span>per active user/month</span></h1> -->
<div class="flex items-center">
<span class="text-h3 text-primary">$</span>
<h1 class="text-h1 mx-3 text-primary">5</h1>
<span class="text-justify text-desc">per active user <br />
/month</span>
</div>
<p class="text-desc">$1.25 per user</p>
<div class="mt-12 space-x-3 items-center">
<a href="#"
class="p-4 px-6 text-white bg-primary rounded-lg baseline hover:bg-brightRedLight font-medium">Try for
Free</a>
<a href="#"
class="p-4 px-6 text-title bg-otBg3 rounded-lg baseline hover:bg-brightRedLight font-medium">Contact
Us</a>
</div>
</div>
<div class="flex flex-col space-y-5 md:mt-0 mt-16">
<div class="flex items-center">
<div class="bg-otBg4 flex rounded-full items-center" style="width: 40px; height: 40px">
<svg class="m-auto" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
class="bi bi-check2" viewBox="0 0 16 16">
<path
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</svg>
</div>
<p class="ml-4">Easy access for your team</p>
</div>
<div class="flex items-center">
<div class="bg-otBg4 flex rounded-full items-center" style="width: 40px; height: 40px">
<svg class="m-auto" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
class="bi bi-check2" viewBox="0 0 16 16">
<path
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</svg>
</div>
<p class="ml-4">All future APIs included</p>
</div>
<div class="flex items-center">
<div class="bg-otBg4 flex rounded-full items-center" style="width: 40px; height: 40px">
<svg class="m-auto" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
class="bi bi-check2" viewBox="0 0 16 16">
<path
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</svg>
</div>
<p class="ml-4">Highly security guaranteed</p>
</div>
<div class="flex items-center">
<div class="bg-otBg4 flex rounded-full items-center" style="width: 40px; height: 40px">
<svg class="m-auto" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
class="bi bi-check2" viewBox="0 0 16 16">
<path
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</svg>
</div>
<p class="ml-4">24/7 phone and email support</p>
</div>
</div>
</div>
</div>
</section>
<hr />
<section>
<div class="container mx-auto p-5">
<div class="lg:flex flex-col md:flex-row justify-between">
<div>
<h4 class="text-h4 font-medium text-title">
Let's connect to share the
<span class="text-red-500">best deals</span>!
</h4>
<p class="text-desc">
You know you want the best deals, especially tasty best deals,
isn't it?
</p>
</div>
<div class="group w-full lg:w-96 mt-7 lg:mt-7">
<div class="relative flex items-center">
<input id="email" type="email" placeholder="email address"
class="relative w-full rounded-full border pl-5 pr-10 py-4 outline-none drop-shadow-sm transition-all duration-200 ease-in-out focus:bg-white focus:ring-2 focus:primary focus:drop-shadow-lg" />
<span class="absolute right-5 transition-all duration-200 ease-in-out group-focus-within:primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send"
viewBox="0 0 16 16">
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="bg-otBg3">
<div class="container mx-auto p-5">
<div class="flex lg:flex-row flex-col items-center lg:space-x-10">
<div class="space-y-8 w-full lg:w-1/2">
<div>
<h3 class="text-h3 font-bold text-title">Contact us</h3>
<p class="text-desc">Let us know how can we help you!</p>
</div>
<div class="flex space-x-16">
<div>
<h6 class="text-h6 text-primary font-bold">Call Us</h6>
<p class="mt-5 mb-1 text-desc">+01 785-388-9450</p>
<p class="text-desc">[email protected]</p>
</div>
<div>
<h6 class="text-h6 text-primary font-bold">Our Address</h6>
<p class="mt-5 mb-1 text-desc">Road 741, No.44, New York</p>
<p class="text-desc">United States</p>
</div>
</div>
<div class="bg-white shadow-lg shadow-indigo-100/50 rounded-lg mt-5">
<iframe
src="https://api.mapbox.com/styles/v1/mahfuzuruiux/cl0hsp3my000p14o39wsmhmp3.html?title=false&access_token=pk.eyJ1IjoibWFoZnV6dXJ1aXV4IiwiYSI6ImNsMGhzYWRiMTA4bnkzY21scHE4c3locDgifQ.8rXcX1XkhGVAG86EFLgqlQ&zoomwheel=false#12.99/23.75338/90.37437"
title="Basic" style="border: none; width: 100%; height: 400px; padding: 8px"></iframe>
</div>
</div>
<div class="w-full lg:w-1/2 mt-10 lg:mt-0">
<div class="shadow-lg shadow-indigo-100/50 p-10 bg-white rounded-lg">
<h3 class="text-h3 mb-4">Send us a message</h3>
<div class="mb-4 relative">
<input
class="input border appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"
id="email" type="text" autofocus />
<label for="email"
class="label absolute mb-0 -mt-2 pt-4 pl-3 leading-tighter text-gray-400 text-base cursor-text">Name</label>
</div>
<div class="mb-4 relative">
<input
class="input border appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"
id="email" type="text" autofocus />
<label for="email"
class="label absolute mb-0 -mt-2 pt-4 pl-3 leading-tighter text-gray-400 text-base cursor-text">Email</label>
</div>
<div class="mb-4 relative">
<input
class="input border before:after:appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"
id="email" type="text" autofocus />
<label for="email"
class="label absolute mb-0 -mt-2 pt-4 pl-3 leading-tighter text-gray-400 text-base cursor-text">Phone</label>
</div>
<div class="mb-4 relative">
<textarea name="" id="" cols="30" rows="3"
class="input border appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"></textarea>
<label for="password"
class="label absolute mb-0 -mt-2 pt-4 pl-3 leading-tighter text-gray-400 text-base cursor-text">Message</label>
</div>
<div class="border rounded-md p-4">
<p class="text-sm py-2 text-desc">
I consent that my personal data is stored according to
2016/679/UE (UE GDPR).
</p>
<hr />
<div class="mt-4 flex items-center text-desc">
<input type="checkbox" id="remember" name="remember" class="mr-2" />
<label class="text-md" for="remember">I do accept Smarty
<a class="text-primary hover:text-primary">terms & conditions.</a>
</label>
</div>
</div>
<button class="bg-primary hover:bg-blue-dark text-white font-bold py-3 px-6 w-full rounded-lg mt-7">
Submit
</button>
</div>
</div>
</div>
</div>
</section>
<!--!Footer -->
<section class="bg-footer pb-0">
<footer class="text-center lg:text-left text-white">
<div class="container mx-auto p-5 text-center md:text-left">
<div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="flex flex-col items-center gap-3 md:items-start">
<img class="w-28" src="img/logo/logo_light.svg" alt="" />
<p class="text-p">
Coming together is a beginning; keeping together is progress;
working together is success.
<span class="italic">– Henry Ford</span>
</p>
<div class="mt-3 flex gap-2">
<div class="w-8 h-8 flex justify-center items-center bg-fb rounded-full">
<a href="#">
<svg class="w-3 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
</svg>
</a>
</div>
<div class="w-8 h-8 flex justify-center items-center bg-tw rounded-full">
<a href="#">
<svg class="w-3 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
</svg>
</a>
</div>
<div class="w-8 h-8 flex justify-center items-center bg-in rounded-full">
<a href="#">
<svg class="w-3 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
</svg>
</a>
</div>
<div class="w-8 h-8 flex justify-center items-center bg-youtube rounded-full">
<a href="#">
<svg class="w-3 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
</svg>
</a>
</div>
</div>
</div>
<div class="">
<h6 class="text-h6 font-semibold mb-4 flex justify-center md:justify-start">
Services
</h6>
<p class="mb-2">
<a href="#!" class="font-normal">Contact</a>
</p>
<p class="mb-2">
<a href="#!" class="font-normal">About Us</a>
</p>
<p class="mb-2">
<a href="#!" class="font-normal">Terms & Conditions</a>
</p>
<p>
<a href="#!" class="font-normal">GDPR & Cookies</a>
</p>
</div>
<div class="">
<h6 class="text-h6 font-semibold mb-4 flex justify-center md:justify-start">
Blog
</h6>
<p class="mb-2">
<a href="#!" class="">Blog</a>
</p>
<p class="mb-2">
<a href="#!" class="">Multimedia</a>
</p>
<p class="mb-2">
<a href="#!" class="">Documentations</a>
</p>
<p>
<a href="#!" class="">Help Center</a>
</p>
</div>
<div class="">
<h6 class="text-h6 font-semibold mb-4 flex justify-center md:justify-start">
Contact
</h6>
<div class="flex items-center justify-center md:justify-start mb-4 text-2xl text-call_color">
<svg class="w-7 fill-call_color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M188.8 39.3c13.8 8.5 19.6 26.8 13.6 42.7L174.2 156c-5.3 14-18.5 22.5-32.4 21l-42.6-4.6c-17.4 54.1-17.4 113.2 0 167.3l42.6-4.6c13.9-1.5 27.1 7 32.4 21L202.4 430c6.1 15.9 .3 34.2-13.6 42.7l-56.4 34.8c-12.4 7.7-28 5.4-38.1-5.5C-31.4 366.1-31.4 145.9 94.3 10C104.4-.9 120.1-3.1 132.5 4.5l56.4 34.8zm218.4-5.5C471.2 86.6 512 166.6 512 256s-40.8 169.4-104.7 222.2c-10.2 8.4-25.3 7-33.8-3.2s-7-25.3 3.2-33.8C430.1 397.1 464 330.5 464 256s-33.9-141.1-87.3-185.2c-10.2-8.4-11.7-23.6-3.2-33.8s23.6-11.7 33.8-3.2zm-64.4 71.4C387.4 140.4 416 194.8 416 256s-28.6 115.6-73.1 150.8c-10.4 8.2-25.5 6.4-33.7-4s-6.4-25.5 4-33.7C346.6 342.7 368 301.8 368 256s-21.4-86.7-54.8-113.1c-10.4-8.2-12.2-23.3-4-33.7s23.3-12.2 33.7-4zm-65.4 71C303.1 193.5 320 222.8 320 256s-16.9 62.5-42.5 79.7c-11 7.4-25.9 4.5-33.3-6.5s-4.5-25.9 6.5-33.3c12.9-8.7 21.3-23.3 21.3-39.9s-8.4-31.2-21.3-39.9c-11-7.4-13.9-22.3-6.5-33.3s22.3-13.9 33.3-6.5z" />
</svg>
<div class="text-2xl pl-2">785-388-9450</div>
</div>
<div class="flex items-center justify-center md:justify-start mb-4 text-xl text-yellow">
<svg class="w-7 fill-yellow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM48 128V150.1L220.5 291.7C241.1 308.7 270.9 308.7 291.5 291.7L464 150.1V127.1C464 119.2 456.8 111.1 448 111.1H64C55.16 111.1 48 119.2 48 127.1L48 128zM48 212.2V384C48 392.8 55.16 400 64 400H448C456.8 400 464 392.8 464 384V212.2L322 328.8C283.6 360.3 228.4 360.3 189.1 328.8L48 212.2z" />
</svg>
<div class="text-2xl pl-2">[email protected]</div>
</div>
<p class="flex items-center justify-center md:justify-start mb-4">
If you have questions, or you want more information, our team
is available for you 24/24.
</p>
</div>
</div>
</div>
</footer>
<div class="bg-slate-800 mt-8">
<div class="container mx-auto py-5 flex flex-col items-center gap-3 lg:flex-row justify-between">
<div class="text-white">© My Company Inc.</div>
<div class="flex gap-2">
<img class="w-12" src="img/visa.svg" alt="visa" />
<img class="w-12" src="img/mastercard.svg" alt="mastercard" />
<img class="w-12" src="img/discover.svg" alt="discover" />
<img class="w-12" src="img/amazon.svg" alt="amazon" />
<img class="w-12" src="img/paypal.svg" alt="paypal" />
<img class="w-12" src="img/skrill.svg" alt="skrill" />
</div>
</div>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="src/script.js"></script>
<script></script>
</body>
</html>