-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdemo.html
672 lines (643 loc) · 52.1 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>哥飞教即刻产品经理做网站</title>
<meta name="description" content="哥飞免费教即刻里的产品经理怎么快速做网站">
<script src="https://seo.box/static/css/tailwind.3.4.3.js"></script>
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="canonical" href="https://seo.box/demo.html"/>
<style type="text/css">
</style>
</head>
<body>
<!-- Navbar Dropdown 2 rows -->
<section>
<div class="h-auto w-screen bg-[#020d24] py-2 text-white [border-bottom:1px_solid_rgb(91,_103,_130)]">
<!-- NAVBAR -->
<nav class="font-inter mx-auto h-auto w-full max-w-[1600px] lg:relative lg:top-0" x-data="{isOpen: false, menuOne:false}">
<!-- CONTAINER -->
<div class="flex flex-col px-6 py-6 lg:flex-row lg:items-center lg:justify-between lg:px-10 lg:py-4 xl:px-20">
<!-- LOGO - YOU CAN REPLACE THIS -->
<a href="#">
<img src="https://assets.website-files.com/647e296b89c00bcfafccf696/647f03f3e434e2326e8af190_%5BA%5D--Navbar%20Brand%20(1).png" alt="" class="inline-block max-h-6 max-w-full" />
</a>
<!-- MENU CONTENT 2 -->
<div class="mt-10 flex flex-col items-start space-y-8 lg:mt-0 lg:flex lg:flex-row lg:items-center lg:space-x-3 lg:space-y-0" x-bind:class="isOpen ? 'show' : 'hidden'">
<a href="https://flowspark-quantumcal.webflow.io/" class="px-5 py-2 font-semibold text-[#5b6782] transition hover:text-white max-[991px]:block md:px-10 lg:px-4">Home</a>
<a href="https://flowspark-quantumcal.webflow.io/pricing" class="px-5 py-2 font-semibold text-[#5b6782] transition hover:text-white max-[991px]:block md:px-10 lg:px-4">Pricing</a>
<a href="https://flowspark-quantumcal.webflow.io/blog" class="px-5 py-2 font-semibold text-[#5b6782] transition hover:text-white max-[991px]:block md:px-10 lg:px-4">Blog</a>
<a href="https://build.flowspark.co/template" target="_blank" class="px-5 py-2 font-semibold text-[#5b6782] transition hover:text-white max-[991px]:block md:px-10 lg:px-4">Templates</a>
<a href="https://flowspark.co/designs" class="2 ml-5 rounded-full bg-[#081631] px-6 py-4 text-center font-semibold text-white transition hover:bg-[#2d6ae0] md:ml-10 lg:ml-4">Get Custom Designs</a>
</div>
<!-- BURGER MENU -->
<a href="#" class="absolute right-5 lg:hidden" x-on:click.prevent="isOpen = !isOpen">
<svg width="1.25rem" height="1rem" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 7H1C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9H19C19.5523 9 20 8.55228 20 8C20 7.44772 19.5523 7 19 7Z" fill="currentColor"></path>
<path d="M19 0H7C6.44772 0 6 0.447715 6 1C6 1.55228 6.44772 2 7 2H19C19.5523 2 20 1.55228 20 1C20 0.447715 19.5523 0 19 0Z" fill="currentColor"></path>
<path d="M19 14H11C10.4477 14 10 14.4477 10 15C10 15.5523 10.4477 16 11 16H19C19.5523 16 20 15.5523 20 15C20 14.4477 19.5523 14 19 14Z" fill="currentColor"></path>
</svg>
</a>
</div>
</nav>
</div>
</section>
<section>
<!-- Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-24 lg:py-32">
<!-- Component -->
<div class="grid grid-cols-1 items-center gap-8 sm:gap-20 lg:grid-cols-2">
<!-- Heading Div -->
<div class="max-w-[720px]">
<h1 class="mb-6 pb-4 text-4xl font-bold md:text-6xl">Fast,Reliable and Secure</h1>
<p class="mb-6 max-w-[528px] text-[#636262] md:mb-10 lg:mb-12">Say goodbye to payment headaches with SecurePay! Our easy-to-use payment platform makes it simple for businesses and individuals to send and receive payments</p>
<a href="#" class="mb-5 mr-5 inline-block rounded-full bg-[#c9fd02] px-6 py-4 text-center font-bold text-black transition hover:border-black hover:bg-white lg:mb-8 lg:mr-8">Open Account</a>
<div class="w-full max-w-xs">
<!-- Testimonial -->
<div class="mb-4 py-1.5 pl-4 [border-left:2px_solid_rgb(201,_253,_2)]">
<p class="text-sm text-[#636262]">A secure and convenient payment app that makes transactions a breeze, offering a seamless way to manage finances on the go.</p>
</div>
<!-- Author -->
<div class="flex items-center">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c349_Ellipse%2020%20(1).png" alt="" class="mr-2 inline-block h-7 w-7" />
<p class="text-sm font-bold">Jessica Smith</p>
<div class="mx-4 h-full py-3 [border-right-style:solid]"></div>
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<p class="text-sm text-[#636262]">5 stars</p>
</div>
</div>
</div>
<!-- Image Div -->
<div>
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c34b_Rectangle%2094.svg" alt="" class="mx-auto inline-block h-full w-full max-w-[640px] rounded-2xl object-cover" />
</div>
</div>
</div>
</section>
<section class="bg-[#020d24] bg-cover bg-center text-white">
<!-- Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-24 lg:py-32">
<!-- Heading -->
<div class="mx-auto flex max-w-3xl flex-col items-center text-center">
<h2 class="text-3xl font-bold md:text-5xl">Seamlessly Organize and <span class="text-[#2d6ae0]">Prioritize Tasks</span>
</h2>
<div class="mx-auto mb-8 mt-4 max-w-[528px] md:mb-12 lg:mb-16">
<p class="text-[#7c8aaa]">Lorem ipsum dolor sit amet consectetur adipiscing</p>
</div>
</div>
<!-- Main Content -->
<div class="grid grid-cols-1 justify-items-center gap-5 sm:grid-cols-2 sm:justify-items-stretch">
<div class="rounded-xl bg-[#07132d] p-8 md:p-10">
<div class="flex flex-row items-center justify-between">
<p class="mr-4 rounded-md bg-[#0a1836] px-4 py-2 font-semibold uppercase">Strategy</p>
<div class="flex flex-col items-center justify-center text-[#2d6ae0]">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2972 10.8739L20.4472 5.0869C20.1603 4.97103 19.8397 4.97103 19.5528 5.0869L5.70277 10.8739C5.4697 10.9755 5.276 11.1505 5.15104 11.3724C5.02607 11.5943 4.97665 11.8511 5.01027 12.1037L7.3186 29.4647C7.34387 29.6509 7.41342 29.8283 7.52139 29.9819C7.62935 30.1355 7.77257 30.2608 7.93897 30.3472L19.4806 36.1343C19.6432 36.2105 19.8205 36.25 20 36.25C20.1795 36.25 20.3568 36.2105 20.5194 36.1343L32.061 30.3472C32.2274 30.2608 32.3706 30.1355 32.4786 29.9819C32.5866 29.8283 32.6561 29.6509 32.6814 29.4647L34.9897 12.1037C35.0233 11.8511 34.9739 11.5943 34.849 11.3724C34.724 11.1505 34.5303 10.9755 34.2972 10.8739V10.8739ZM25.7131 25.7176C25.5493 25.7902 25.3728 25.8296 25.1937 25.8334C24.979 25.8332 24.7684 25.7737 24.5852 25.6614C24.4019 25.5491 24.2531 25.3884 24.155 25.1968L22.9431 22.7518H17.0569L15.845 25.1968C15.7073 25.4731 15.4657 25.6831 15.1735 25.7808C14.8813 25.8785 14.5624 25.8558 14.2869 25.7176C14.0114 25.5795 13.8019 25.3373 13.7045 25.0442C13.6071 24.7512 13.6298 24.4314 13.7675 24.1551L18.9613 13.7385C19.0596 13.5472 19.2085 13.3868 19.3917 13.2748C19.575 13.1627 19.7854 13.1035 20 13.1035C20.2146 13.1035 20.425 13.1627 20.6083 13.2748C20.7915 13.3868 20.9404 13.5472 21.0387 13.7385L26.2325 24.1551C26.3645 24.4323 26.3841 24.7501 26.2873 25.0415C26.1904 25.3329 25.9846 25.5753 25.7131 25.7176V25.7176ZM20 16.849L21.789 20.437H18.211L20 16.849Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="mb-20 mt-4 h-0.5 w-full bg-[#1b2e56]"></div>
<div class="flex max-w-lg flex-col items-start gap-3">
<p class="text-xl font-semibold">Intuitive Calendar Interface</p>
<p class="text-[#7c8aaa]">The XYZ Payment App is a user-friendly mobile application that revolutionizes the way you handle your payments and transactions. With its intuitive interface and robust functionality.</p>
</div>
</div>
<div class="rounded-xl bg-[#07132d] p-8 md:p-10">
<div class="flex flex-row items-center justify-between">
<p class="mr-4 rounded-md bg-[#0a1836] px-4 py-2 font-semibold uppercase">Strategy</p>
<div class="flex flex-col items-center justify-center text-[#2d6ae0]">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2972 10.8739L20.4472 5.0869C20.1603 4.97103 19.8397 4.97103 19.5528 5.0869L5.70277 10.8739C5.4697 10.9755 5.276 11.1505 5.15104 11.3724C5.02607 11.5943 4.97665 11.8511 5.01027 12.1037L7.3186 29.4647C7.34387 29.6509 7.41342 29.8283 7.52139 29.9819C7.62935 30.1355 7.77257 30.2608 7.93897 30.3472L19.4806 36.1343C19.6432 36.2105 19.8205 36.25 20 36.25C20.1795 36.25 20.3568 36.2105 20.5194 36.1343L32.061 30.3472C32.2274 30.2608 32.3706 30.1355 32.4786 29.9819C32.5866 29.8283 32.6561 29.6509 32.6814 29.4647L34.9897 12.1037C35.0233 11.8511 34.9739 11.5943 34.849 11.3724C34.724 11.1505 34.5303 10.9755 34.2972 10.8739V10.8739ZM25.7131 25.7176C25.5493 25.7902 25.3728 25.8296 25.1937 25.8334C24.979 25.8332 24.7684 25.7737 24.5852 25.6614C24.4019 25.5491 24.2531 25.3884 24.155 25.1968L22.9431 22.7518H17.0569L15.845 25.1968C15.7073 25.4731 15.4657 25.6831 15.1735 25.7808C14.8813 25.8785 14.5624 25.8558 14.2869 25.7176C14.0114 25.5795 13.8019 25.3373 13.7045 25.0442C13.6071 24.7512 13.6298 24.4314 13.7675 24.1551L18.9613 13.7385C19.0596 13.5472 19.2085 13.3868 19.3917 13.2748C19.575 13.1627 19.7854 13.1035 20 13.1035C20.2146 13.1035 20.425 13.1627 20.6083 13.2748C20.7915 13.3868 20.9404 13.5472 21.0387 13.7385L26.2325 24.1551C26.3645 24.4323 26.3841 24.7501 26.2873 25.0415C26.1904 25.3329 25.9846 25.5753 25.7131 25.7176V25.7176ZM20 16.849L21.789 20.437H18.211L20 16.849Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="mb-20 mt-4 h-0.5 w-full bg-[#1b2e56]"></div>
<div class="flex max-w-lg flex-col items-start gap-3">
<p class="text-xl font-semibold">Intuitive Calendar Interface</p>
<p class="text-[#7c8aaa]">The XYZ Payment App is a user-friendly mobile application that revolutionizes the way you handle your payments and transactions. With its intuitive interface and robust functionality.</p>
</div>
</div>
<div class="rounded-xl bg-[#07132d] p-8 md:p-10">
<div class="flex flex-row items-center justify-between">
<p class="mr-4 rounded-md bg-[#0a1836] px-4 py-2 font-semibold uppercase">Strategy</p>
<div class="flex flex-col items-center justify-center text-[#2d6ae0]">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2972 10.8739L20.4472 5.0869C20.1603 4.97103 19.8397 4.97103 19.5528 5.0869L5.70277 10.8739C5.4697 10.9755 5.276 11.1505 5.15104 11.3724C5.02607 11.5943 4.97665 11.8511 5.01027 12.1037L7.3186 29.4647C7.34387 29.6509 7.41342 29.8283 7.52139 29.9819C7.62935 30.1355 7.77257 30.2608 7.93897 30.3472L19.4806 36.1343C19.6432 36.2105 19.8205 36.25 20 36.25C20.1795 36.25 20.3568 36.2105 20.5194 36.1343L32.061 30.3472C32.2274 30.2608 32.3706 30.1355 32.4786 29.9819C32.5866 29.8283 32.6561 29.6509 32.6814 29.4647L34.9897 12.1037C35.0233 11.8511 34.9739 11.5943 34.849 11.3724C34.724 11.1505 34.5303 10.9755 34.2972 10.8739V10.8739ZM25.7131 25.7176C25.5493 25.7902 25.3728 25.8296 25.1937 25.8334C24.979 25.8332 24.7684 25.7737 24.5852 25.6614C24.4019 25.5491 24.2531 25.3884 24.155 25.1968L22.9431 22.7518H17.0569L15.845 25.1968C15.7073 25.4731 15.4657 25.6831 15.1735 25.7808C14.8813 25.8785 14.5624 25.8558 14.2869 25.7176C14.0114 25.5795 13.8019 25.3373 13.7045 25.0442C13.6071 24.7512 13.6298 24.4314 13.7675 24.1551L18.9613 13.7385C19.0596 13.5472 19.2085 13.3868 19.3917 13.2748C19.575 13.1627 19.7854 13.1035 20 13.1035C20.2146 13.1035 20.425 13.1627 20.6083 13.2748C20.7915 13.3868 20.9404 13.5472 21.0387 13.7385L26.2325 24.1551C26.3645 24.4323 26.3841 24.7501 26.2873 25.0415C26.1904 25.3329 25.9846 25.5753 25.7131 25.7176V25.7176ZM20 16.849L21.789 20.437H18.211L20 16.849Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="mb-20 mt-4 h-0.5 w-full bg-[#1b2e56]"></div>
<div class="flex max-w-lg flex-col items-start gap-3">
<p class="text-xl font-semibold">Intuitive Calendar Interface</p>
<p class="text-[#7c8aaa]">The XYZ Payment App is a user-friendly mobile application that revolutionizes the way you handle your payments and transactions. With its intuitive interface and robust functionality.</p>
</div>
</div>
<div class="rounded-xl bg-[#07132d] p-8 md:p-10">
<div class="flex flex-row items-center justify-between">
<p class="mr-4 rounded-md bg-[#0a1836] px-4 py-2 font-semibold uppercase">Strategy</p>
<div class="flex flex-col items-center justify-center text-[#2d6ae0]">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2972 10.8739L20.4472 5.0869C20.1603 4.97103 19.8397 4.97103 19.5528 5.0869L5.70277 10.8739C5.4697 10.9755 5.276 11.1505 5.15104 11.3724C5.02607 11.5943 4.97665 11.8511 5.01027 12.1037L7.3186 29.4647C7.34387 29.6509 7.41342 29.8283 7.52139 29.9819C7.62935 30.1355 7.77257 30.2608 7.93897 30.3472L19.4806 36.1343C19.6432 36.2105 19.8205 36.25 20 36.25C20.1795 36.25 20.3568 36.2105 20.5194 36.1343L32.061 30.3472C32.2274 30.2608 32.3706 30.1355 32.4786 29.9819C32.5866 29.8283 32.6561 29.6509 32.6814 29.4647L34.9897 12.1037C35.0233 11.8511 34.9739 11.5943 34.849 11.3724C34.724 11.1505 34.5303 10.9755 34.2972 10.8739V10.8739ZM25.7131 25.7176C25.5493 25.7902 25.3728 25.8296 25.1937 25.8334C24.979 25.8332 24.7684 25.7737 24.5852 25.6614C24.4019 25.5491 24.2531 25.3884 24.155 25.1968L22.9431 22.7518H17.0569L15.845 25.1968C15.7073 25.4731 15.4657 25.6831 15.1735 25.7808C14.8813 25.8785 14.5624 25.8558 14.2869 25.7176C14.0114 25.5795 13.8019 25.3373 13.7045 25.0442C13.6071 24.7512 13.6298 24.4314 13.7675 24.1551L18.9613 13.7385C19.0596 13.5472 19.2085 13.3868 19.3917 13.2748C19.575 13.1627 19.7854 13.1035 20 13.1035C20.2146 13.1035 20.425 13.1627 20.6083 13.2748C20.7915 13.3868 20.9404 13.5472 21.0387 13.7385L26.2325 24.1551C26.3645 24.4323 26.3841 24.7501 26.2873 25.0415C26.1904 25.3329 25.9846 25.5753 25.7131 25.7176V25.7176ZM20 16.849L21.789 20.437H18.211L20 16.849Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="mb-20 mt-4 h-0.5 w-full bg-[#1b2e56]"></div>
<div class="flex max-w-lg flex-col items-start gap-3">
<p class="text-xl font-semibold">Intuitive Calendar Interface</p>
<p class="text-[#7c8aaa]">The XYZ Payment App is a user-friendly mobile application that revolutionizes the way you handle your payments and transactions. With its intuitive interface and robust functionality.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<!-- Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-12 md:px-10 md:py-16 lg:py-20">
<!-- Header -->
<div class="mx-auto mb-8 flex max-w-3xl flex-col items-center text-center md:mb-12 lg:mb-16">
<p class="text-sm font-semibold uppercase text-[#2d6ae0]">3 easy steps</p>
<h2 class="text-3xl font-bold md:text-5xl">How it works</h2>
<div class="mx-auto my-4 max-w-[528px] md:mb-6 lg:mb-8">
<p class="text-[#636262]">Lorem ipsum dolor sit amet consectetur adipiscing</p>
</div>
</div>
<!-- Content -->
<div class="flex flex-col items-start gap-8 md:flex-row-reverse lg:gap-12">
<!-- Steps -->
<div class="flex max-w-[496px] flex-1 flex-col items-start">
<a class="relative mb-8 flex gap-4 p-6">
<div class="flex h-10 w-10 flex-none flex-col items-center justify-center rounded-full bg-[#dae2f3]">
<p class="font-bold text-[#7c8aaa]">1</p>
</div>
<div class="ml-4 flex flex-col gap-2">
<h5 class="font-bold md:text-xl">Setup your Link</h5>
<p class="text-[#636262]">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam, purus sit.</p>
</div>
</a>
<a class="relative mb-8 flex gap-4 p-6">
<div class="flex h-10 w-10 flex-none flex-col items-center justify-center rounded-full bg-[#dae2f3]">
<p class="font-bold text-[#7c8aaa]">2</p>
</div>
<div class="ml-4 flex flex-col gap-2">
<h5 class="font-bold md:text-xl">Send Invites</h5>
<p class="text-[#636262]">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam, purus sit.</p>
</div>
</a>
<a class="relative mb-8 flex flex-row gap-4 p-6">
<div class="flex h-10 w-10 flex-none flex-col items-center justify-center rounded-full bg-[#dae2f3]">
<p class="font-bold text-[#7c8aaa]">3</p>
</div>
<div class="ml-4 flex flex-col gap-2">
<h5 class="font-bold md:text-xl">Get More Sales!</h5>
<p class="text-[#636262]">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam, purus sit.</p>
</div>
</a>
</div>
<!-- Image -->
<div class="flex-1">
<img src="https://assets.website-files.com/647e296b89c00bcfafccf696/647f0b14162c5306c7cfdcc9_Rectangle%20106.jpg" alt="Image showing dashboard of the app" class="inline-block h-full w-full" />
</div>
</div>
</div>
</section>
<section class="bg-[#eef0f4]">
<!-- Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-24 lg:py-32">
<!-- Header -->
<div class="mx-auto mb-8 flex max-w-3xl flex-col items-center text-center md:mb-12 lg:mb-16">
<h2 class="text-3xl font-bold md:text-5xl">Frequently Asked</h2>
<p class="mx-auto mt-4 max-w-[528px] tracking-[0.2px] text-[#636262]">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam,purus sit amet luctus magna fringilla urna</p>
</div>
<!-- FAQ Items -->
<div class="mb-8 grid grid-cols-1 justify-center gap-4 md:mb-12 lg:mb-16 lg:grid-cols-2">
<!-- FAQ Left Col -->
<div class="w-full">
<div class="mb-6 w-full rounded-xl bg-white p-8">
<div class="flex cursor-pointer items-start justify-between">
<div class="text-xl font-bold">How this theme is different from others in market?</div>
<div class="relative ml-10 mt-1 flex h-5 w-5 items-center justify-center">
<div class="absolute h-5 w-0.5 bg-[#0b0b1f]"></div>
<div class="h-0.5 w-5 bg-[#0b0b1f]"></div>
</div>
</div>
<div class="w-full max-w-[640px] pt-4 lg:max-w-[960px]">
<p class="tracking-[0.2px]">Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque purus eget, imperdiet turpis.</p>
</div>
</div>
<div class="mb-6 w-full rounded-xl bg-white p-8">
<div class="flex cursor-pointer items-start justify-between">
<div class="text-xl font-bold">What is your policy on distributon</div>
<div class="relative ml-10 mt-1 flex h-5 w-5 items-center justify-center">
<div class="absolute h-5 w-0.5 bg-[#0b0b1f]"></div>
<div class="h-0.5 w-5 bg-[#0b0b1f]"></div>
</div>
</div>
<div class="w-full max-w-[640px] pt-4 lg:max-w-[960px]">
<p class="tracking-[0.2px]">Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque purus eget, imperdiet turpis.</p>
</div>
</div>
<div class="mb-6 w-full rounded-xl bg-white p-8">
<div class="flex cursor-pointer items-start justify-between">
<div class="text-xl font-bold">How can I contribute to Flowspark?</div>
<div class="relative ml-10 mt-1 flex h-5 w-5 items-center justify-center">
<div class="absolute h-5 w-0.5 bg-[#0b0b1f]"></div>
<div class="h-0.5 w-5 bg-[#0b0b1f]"></div>
</div>
</div>
<div class="w-full max-w-[640px] pt-4 lg:max-w-[960px]">
<p class="tracking-[0.2px]">Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque purus eget, imperdiet turpis.</p>
</div>
</div>
</div>
<!-- FAQ Right Col -->
<div class="w-full">
<div class="mb-6 w-full rounded-xl bg-white p-8">
<div class="flex cursor-pointer items-start justify-between">
<div class="text-xl font-bold">How can I contribute to Flowspark?</div>
<div class="relative ml-10 mt-1 flex h-5 w-5 items-center justify-center">
<div class="absolute h-5 w-0.5 bg-[#0b0b1f]"></div>
<div class="h-0.5 w-5 bg-[#0b0b1f]"></div>
</div>
</div>
<div class="w-full max-w-[640px] pt-4 lg:max-w-[960px]">
<p class="tracking-[0.2px]">Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque purus eget, imperdiet turpis.</p>
</div>
</div>
<div class="mb-6 w-full rounded-xl bg-white p-8">
<div class="flex cursor-pointer items-start justify-between">
<div class="text-xl font-bold">How can I contribute to Flowspark?</div>
<div class="relative ml-10 mt-1 flex h-5 w-5 items-center justify-center">
<div class="absolute h-5 w-0.5 bg-[#0b0b1f]"></div>
<div class="h-0.5 w-5 bg-[#0b0b1f]"></div>
</div>
</div>
<div class="w-full max-w-[640px] pt-4 lg:max-w-[960px]">
<p class="tracking-[0.2px]">Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque purus eget, imperdiet turpis.</p>
</div>
</div>
<div class="mb-6 w-full rounded-xl bg-white p-8">
<div class="flex cursor-pointer items-start justify-between">
<div class="text-xl font-bold">How can I contribute to Flowspark?</div>
<div class="relative ml-10 mt-1 flex h-5 w-5 items-center justify-center">
<div class="absolute h-5 w-0.5 bg-[#0b0b1f]"></div>
<div class="h-0.5 w-5 bg-[#0b0b1f]"></div>
</div>
</div>
<div class="w-full max-w-[640px] pt-4 lg:max-w-[960px]">
<p class="tracking-[0.2px]">Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque purus eget, imperdiet turpis.</p>
</div>
</div>
</div>
</div>
<p class="text-center tracking-[0.2px]">Can’t find the answer you’re looking for? Reach out to our <a href="#" class="font-bold">customer support team</a>.</p>
</div>
</section>
<section class="bg-[#f7f6f2]">
<!-- Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-24 lg:py-32">
<h2 class="mx-auto mb-8 mt-6 max-w-3xl text-center text-3xl font-extrabold md:mb-16 md:text-5xl">What our clients are saying</h2>
<!-- Testimonails -->
<div class="mb-5 grid grid-cols-1 gap-5 md:grid-cols-2 lg:mb-8">
<!-- Item -->
<div class="grid min-h-[280px] grid-cols-[1fr_1.75fr] gap-6 rounded-2xl bg-white p-8 md:p-10">
<!-- Author -->
<div class="flex flex-col justify-between">
<div class="flex flex-col items-start gap-4">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c34e_Image%20%26%20Quotation.svg" alt="" class="inline-block h-16" />
<div class="flex flex-col">
<h6 class="text-sm font-bold md:text-base">Jonathan Smith</h6>
<p class="text-sm text-[#636262]">Small Business Owner</p>
</div>
</div>
<div class="flex">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
</div>
</div>
<p class="text-[#636262]">“Lorem ipsum dolor sit amet, elit ut aliquam, purus sit amet luctus venenatis elit ut aliquam, purus sit amet luctus venenatis"</p>
</div>
<!-- Item -->
<div class="grid min-h-[280px] grid-cols-[1fr_1.75fr] gap-6 rounded-2xl bg-white p-8 md:p-10">
<!-- Author -->
<div class="flex flex-col justify-between">
<div class="flex flex-col items-start gap-4">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c350_Image%20%26%20Quotation-1.svg" alt="" class="inline-block h-16" />
<div class="flex flex-col">
<h6 class="text-sm font-bold md:text-base">Jonathan Smith</h6>
<p class="text-sm text-[#636262]">Small Business Owner</p>
</div>
</div>
<div class="flex">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
</div>
</div>
<p class="text-[#636262]">“Lorem ipsum dolor sit amet, elit ut aliquam, purus sit amet luctus venenatis elit ut aliquam, purus sit amet luctus venenatis"</p>
</div>
<!-- Item -->
<div class="grid min-h-[280px] grid-cols-[1fr_1.75fr] gap-6 rounded-2xl bg-white p-8 md:p-10">
<!-- Author -->
<div class="flex flex-col justify-between">
<div class="flex flex-col items-start gap-4">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c34d_Image%20%26%20Quotation-2.svg" width="90" alt="" class="inline-block h-16" />
<div class="flex flex-col">
<h6 class="text-sm font-bold md:text-base">Jonathan Smith</h6>
<p class="text-sm text-[#636262]">Small Business Owner</p>
</div>
</div>
<div class="flex">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
</div>
</div>
<p class="text-[#636262]">“Lorem ipsum dolor sit amet, elit ut aliquam, purus sit amet luctus venenatis elit ut aliquam, purus sit amet luctus venenatis"</p>
</div>
<!-- Item -->
<div class="grid min-h-[280px] grid-cols-[1fr_1.75fr] gap-6 rounded-2xl bg-white p-8 md:p-10">
<!-- Author -->
<div class="flex flex-col justify-between">
<div class="flex flex-col items-start gap-4">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c34f_Image%20%26%20Quotation-3.svg" alt="" class="inline-block h-16" />
<div class="flex flex-col">
<h6 class="text-sm font-bold md:text-base">Jonathan Smith</h6>
<p class="text-sm text-[#636262]">Small Business Owner</p>
</div>
</div>
<div class="flex">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f683b1e3793b739a1c347_Vector.svg" alt="" class="mr-1 inline-block w-3.5 flex-none" />
</div>
</div>
<p class="text-[#636262]">“Lorem ipsum dolor sit amet, elit ut aliquam, purus sit amet luctus venenatis elit ut aliquam, purus sit amet luctus venenatis"</p>
</div>
</div>
<div class="flex flex-col items-center">
<a href="#" class="mx-auto font-bold text-black">Check all reviews</a>
</div>
</div>
</section>
<section class="relative">
<!-- BG Image -->
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fa_Get%20Started%20BG.svg" alt="" class="absolute -z-[1] h-full w-full object-cover" />
<!-- Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-24 lg:py-32">
<!-- Component -->
<div class="flex flex-col items-center">
<!-- Heading Content -->
<div class="mb-8 max-w-3xl text-center md:mb-12 lg:mb-16">
<h2 class="mb-4 mt-6 text-3xl font-extrabold text-white md:text-5xl">Simple & Affordable Pricing</h2>
<div class="mx-auto mt-4 max-w-[528px]">
<p class="text-[#636262]">Simple & fixed pricing. 30 days money-back guarantee</p>
</div>
</div>
<!-- Pricing Cards -->
<div class="grid w-full grid-cols-1 gap-8 md:grid-cols-3 md:gap-4">
<!-- Pricing Card -->
<div class="mx-auto flex w-full max-w-[416px] flex-col items-start rounded-md bg-[#131313] p-8 text-white">
<div class="mb-4 rounded-lg bg-[#cf8f1329] px-5 py-2 text-[#cf8f13]">
<p class="font-bold">Basic</p>
</div>
<p class="mb-6 font-light text-[#636262] md:mb-10 lg:mb-12">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam, purus sit</p>
<h2 class="my-6 pb-8 text-3xl font-extrabold md:text-5xl">$99<span class="text-sm font-light text-[#636262]">/year</span>
</h2>
<a href="#" class="mb-5 inline-block w-full rounded-lg bg-neutral-900 px-6 py-4 text-center font-bold text-[#636262] transition hover:border-black hover:bg-[#c9fd02] hover:text-black lg:mb-8">Get started</a>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Premium Designs</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Exclusive Freebies</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Monthly Free Exclusive</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Customer Support</p>
</div>
</div>
<!-- Pricing Card -->
<div class="mx-auto flex w-full max-w-[416px] flex-col items-start rounded-md bg-[#131313] p-8 text-white">
<div class="mb-4 rounded-lg bg-[#0caeb929] px-5 py-2 text-[#0caeb9]">
<p class="font-bold">Growth</p>
</div>
<p class="mb-6 font-light text-[#636262] md:mb-10 lg:mb-12">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam, purus sit</p>
<h2 class="my-6 pb-8 text-3xl font-extrabold md:text-5xl">$149<span class="text-sm font-light text-[#636262]">/year</span>
</h2>
<a href="#" class="mb-5 inline-block w-full rounded-lg bg-[#c9fd02] px-6 py-4 text-center font-bold text-black transition hover:border-black hover:bg-neutral-900 hover:text-[#636262] md:mb-6 lg:mb-8">Get started</a>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Premium Designs</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Exclusive Freebies</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Monthly Free Exclusive</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Customer Support</p>
</div>
</div>
<!-- Pricing Card -->
<div class="mx-auto flex w-full max-w-[416px] flex-col items-start rounded-md bg-[#131313] p-8 text-white">
<div class="mb-4 rounded-lg bg-[#c013cf29] px-5 py-2 text-[#c013cf]">
<p class="font-bold">Premium</p>
</div>
<p class="mb-6 font-light text-[#636262] md:mb-10 lg:mb-12">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam, purus sit</p>
<h2 class="my-6 pb-8 text-3xl font-extrabold md:text-5xl">$249<span class="text-sm font-light text-[#636262]">/year</span>
</h2>
<a href="#" class="mb-5 inline-block w-full rounded-lg bg-neutral-900 px-6 py-4 text-center font-bold text-[#636262] transition hover:border-black hover:bg-[#c9fd02] hover:text-black lg:mb-8">Get started</a>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Premium Designs</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Exclusive Freebies</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Monthly Free Exclusive</p>
</div>
<div class="mt-2 flex flex-row">
<img src="https://uploads-ssl.webflow.com/646f65e37fe0275cfb808405/646f68133fc5cb4e29ed28fb_akar-icons_circle-check-fill.svg" alt="" class="mr-2 inline-block w-5" />
<p>Customer Support</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section Contact -->
<section>
<!-- Contact Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-24 lg:py-32">
<!-- Contact Component -->
<div class="">
<!-- Contact Title -->
<div class="mx-auto max-w-3xl text-center">
<h2 class="text-3xl font-bold md:text-5xl">Contact Sales</h2>
<p class="mx-auto mb-12 mt-4 max-w-xl text-[#647084]">Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam,purus sit amet luctus magna fringilla urna</p>
</div>
<!-- Contact Form -->
<form class="mb-4 text-left sm:px-4 md:px-20" name="wf-form-name" method="get">
<div class="mb-4 grid grid-cols-2 gap-6">
<div>
<label for="name-2" class="mb-1 font-medium">First Name</label>
<input type="text" class="h-9 w-full bg-[#f2f2f7] px-3 py-6 text-sm text-[#333333]" placeholder="" required="" />
</div>
<div>
<label for="name-3" class="mb-1 font-medium">Last Name</label>
<input type="text" class="h-9 w-full bg-[#f2f2f7] px-3 py-6 text-sm text-[#333333]" placeholder="" required="" />
</div>
</div>
<div class="mb-4">
<label for="field" class="mb-1 font-medium">Company Website</label>
<input type="text" class="h-9 w-full bg-[#f2f2f7] px-3 py-6 text-sm text-[#333333]" placeholder="" required="" />
</div>
<div class="mb-4">
<label for="field" class="mb-1 font-medium">Email</label>
<input type="text" class="h-9 w-full bg-[#f2f2f7] px-3 py-6 text-sm text-[#333333]" placeholder="" required="" />
</div>
<div class="mb-8">
<label for="field" class="mb-1 font-medium">Message</label>
<textarea placeholder="" class="h-auto min-h-[186px] w-full overflow-auto bg-[#f2f2f7] px-3 py-2 text-sm text-[#333333]"> </textarea>
</div>
<label class="mb-1 flex pb-4 font-medium">
<input type="checkbox" name="checkbox-3" />
<span class="ml-4 inline-block cursor-pointer text-sm" for="checkbox-3">I agree with the <a href="#" class="font-bold text-[#0b0b1f]">Terms & Conditions</a>
</span>
</label>
<a href="#" class="mr-5 flex w-full items-center justify-center bg-[#276ef1] px-8 py-4 font-semibold text-white transition [box-shadow:rgb(171,_196,245)-8px_8px] hover:[box-shadow:rgb(171,_196,_245)_0px_0px] md:mr-6 lg:mr-8">
<p class="mr-6 font-bold">Let's Talk</p>
<svg fill="currentColor" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-none">
<title>Arrow Right</title>
<polygon points="16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707 11.515 18.485 10.101 17.071 16.172 11 0 11 0 9"></polygon>
</svg>
</a>
</form>
</div>
</div>
</section>
<!-- Footer Standard Email V2 -->
<section class="bg-black text-white">
<div class="flex w-screen flex-col px-6 py-20 lg:px-10 xl:px-24">
<!-- TOP CONTAINER -->
<div class="flex flex-col lg:flex-row lg:justify-between">
<!-- LEFT DIV -->
<div class="flex flex-col lg:mr-20">
<!-- LOGO -->
<a href="#" class="mb-12 inline-block max-w-full font-bold text-[#1353fe]">
<img src="https://assets.website-files.com/63904f663019b0d8edf8d57c/6399728d302d2471f18b229f_Group%2047874%20(2).svg" alt="" class="inline-block max-h-10" />
</a>
<p class="font-inter my-4 max-w-[350px] text-base font-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut al</p>
<!-- NEWSLETTER & EMAIL -->
<div class="flex flex-col">
<form action="" class="mb-10 mt-5 max-w-[421px]">
<div class="relative">
<label for="email" class="font-inter font-medium">SUBSCRIBE TO NEWSLETTER</label>
<input type="email" class="font-inter relative mt-4 w-full rounded-md border border-black bg-[#232323] px-6 py-4 text-base" placeholder="Enter your email" name="email" />
<button type="submit" class="absolute right-[15px] top-[55px]">
<img src="https://assets.website-files.com/63904f663019b0d8edf8d57c/639974a7f44de6baa9a134aa_PaperPlaneTilt%20(1).svg" alt="" class="inline-block" />
</button>
</div>
</form>
<div>
<h3 for="email" class="font-inter mb-4 mt-8 font-medium">EMAIL US</h3>
<p class="font-inter text-base">[email protected]</p>
</div>
</div>
</div>
<!-- RIGHT DIV -->
<div class="mt-7 max-w-[700px] grow lg:flex lg:flex-row">
<!-- FOOTER LINKS -->
<div class="flex grow flex-row flex-wrap lg:flex-nowrap lg:items-start">
<!-- LINK BLOCK -->
<div class="my-5 mr-8 flex max-w-[500px] grow basis-[100px] flex-col space-y-5 lg:my-0">
<h2 class="font-inter font-medium">SOLUTION</h2>
<a href="" class="font-inter font-light text-gray-500">Marketing</a>
<a href="" class="font-inter font-light text-gray-500">Analytics</a>
<a href="" class="font-inter font-light text-gray-500">Commerce</a>
<a href="" class="font-inter font-light text-gray-500">Insights</a>
</div>
<!-- LINK BLOCK -->
<div class="my-5 mr-8 flex max-w-[500px] grow basis-[100px] flex-col space-y-5 lg:my-0">
<h2 class="font-inter font-medium">SUPPORT</h2>
<a href="" class="font-inter font-light text-gray-500">Pricing</a>
<a href="" class="font-inter font-light text-gray-500">Documentation</a>
<a href="" class="font-inter font-light text-gray-500">Guides</a>
<a href="" class="font-inter font-light text-gray-500">API Status</a>
</div>
<!-- LINK BLOCK -->
<div class="my-5 mr-8 flex max-w-[500px] grow basis-[100px] flex-col space-y-5 lg:my-0 lg:mr-0">
<h2 class="font-inter font-medium">COMPANY</h2>
<a href="" class="font-inter font-light text-gray-500">About</a>
<a href="" class="font-inter font-light text-gray-500">Blog</a>
<a href="" class="font-inter font-light text-gray-500">Jobs</a>
<a href="" class="font-inter font-light text-gray-500">Press</a>
<a href="" class="font-inter font-light text-gray-500">Partners</a>
</div>
</div>
</div>
</div>
<!-- BOTTOM CONTAINER -->
<div class="mt-20 lg:flex lg:flex-row-reverse lg:justify-between">
<!-- SOCIAL MEDIA ICONS -->
<div class="mb-8 mt-6 flex flex-row lg:mb-0 lg:mt-0">
<a href="" class="mr-4 transition hover:text-gray-400">
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.25C9.4791 2.25005 7.05619 3.22647 5.23968 4.97439C3.42317 6.72231 2.35426 9.10586 2.25723 11.6249C2.1602 14.1439 3.0426 16.6026 4.71928 18.4851C6.39595 20.3676 8.73657 21.5275 11.25 21.7214V14.2501H9C8.80109 14.2501 8.61032 14.1711 8.46967 14.0304C8.32902 13.8898 8.25 13.699 8.25 13.5001C8.25 13.3012 8.32902 13.1104 8.46967 12.9698C8.61032 12.8291 8.80109 12.7501 9 12.7501H11.25V10.5001C11.2509 9.70472 11.5673 8.94218 12.1297 8.37977C12.6921 7.81736 13.4546 7.501 14.25 7.50009H15.75C15.9489 7.50009 16.1397 7.57911 16.2803 7.71976C16.421 7.86041 16.5 8.05118 16.5 8.25009C16.5 8.449 16.421 8.63977 16.2803 8.78042C16.1397 8.92107 15.9489 9.00009 15.75 9.00009H14.25C13.8523 9.00054 13.471 9.15872 13.1898 9.43993C12.9086 9.72114 12.7505 10.1024 12.75 10.5001V12.7501H15C15.1989 12.7501 15.3897 12.8291 15.5303 12.9698C15.671 13.1104 15.75 13.3012 15.75 13.5001C15.75 13.699 15.671 13.8898 15.5303 14.0304C15.3897 14.1711 15.1989 14.2501 15 14.2501H12.75V21.7214C15.2634 21.5275 17.604 20.3676 19.2807 18.4851C20.9574 16.6026 21.8398 14.1439 21.7427 11.6249C21.6457 9.10587 20.5768 6.72232 18.7603 4.9744C16.9438 3.22649 14.5209 2.25006 12 2.25Z" />
</svg>
</a>
<a href="" class="mx-4 transition hover:text-gray-400">
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" />
<path d="M16.125 2.625H7.875C6.4831 2.62658 5.14865 3.18021 4.16443 4.16443C3.18021 5.14865 2.62658 6.4831 2.625 7.875V16.125C2.62658 17.5169 3.18021 18.8513 4.16443 19.8356C5.14865 20.8198 6.4831 21.3734 7.875 21.375H16.125C17.5169 21.3734 18.8513 20.8198 19.8356 19.8356C20.8198 18.8513 21.3734 17.5169 21.375 16.125V7.875C21.3734 6.4831 20.8198 5.14865 19.8356 4.16443C18.8513 3.18021 17.5169 2.62658 16.125 2.625ZM12 16.5C11.11 16.5 10.24 16.2361 9.49993 15.7416C8.75991 15.2471 8.18314 14.5443 7.84254 13.7221C7.50195 12.8998 7.41283 11.995 7.58647 11.1221C7.7601 10.2492 8.18868 9.44736 8.81802 8.81802C9.44736 8.18868 10.2492 7.7601 11.1221 7.58647C11.995 7.41283 12.8998 7.50195 13.7221 7.84254C14.5443 8.18314 15.2471 8.75991 15.7416 9.49993C16.2361 10.24 16.5 11.11 16.5 12C16.4987 13.1931 16.0241 14.3369 15.1805 15.1805C14.3369 16.0241 13.1931 16.4987 12 16.5ZM16.875 8.25C16.6525 8.25 16.435 8.18402 16.25 8.0604C16.065 7.93679 15.9208 7.76109 15.8356 7.55552C15.7505 7.34995 15.7282 7.12375 15.7716 6.90552C15.815 6.68729 15.9222 6.48684 16.0795 6.3295C16.2368 6.17217 16.4373 6.06502 16.6555 6.02162C16.8738 5.97821 17.1 6.00049 17.3055 6.08564C17.5111 6.17078 17.6868 6.31498 17.8104 6.49998C17.934 6.68499 18 6.9025 18 7.125C18 7.42337 17.8815 7.70952 17.6705 7.9205C17.4595 8.13147 17.1734 8.25 16.875 8.25Z" />
</svg>
</a>
<a href="" class="mx-4 transition hover:text-gray-400">
<svg class="fill-current" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path d="M21.5952 12.4998C22.1776 11.988 22.5489 11.2779 22.6367 10.5076C22.7245 9.73723 22.5226 8.96177 22.0703 8.33205C21.618 7.70233 20.9476 7.2634 20.1895 7.10064C19.4315 6.93788 18.64 7.06293 17.969 7.45147V5.46854C17.9694 4.83357 17.7763 4.21356 17.4153 3.69117C17.0544 3.16878 16.5427 2.76884 15.9486 2.54466C15.3546 2.32048 14.7063 2.28271 14.0902 2.4364C13.4741 2.59009 12.9195 2.92793 12.5003 3.40487C11.9885 2.82243 11.2784 2.45118 10.5081 2.36336C9.73772 2.27555 8.96225 2.47744 8.33253 2.92976C7.70282 3.38208 7.26388 4.05249 7.10112 4.81054C6.93836 5.5686 7.06342 6.36009 7.45197 7.03104H5.46904C4.83406 7.03063 4.21405 7.22379 3.69166 7.58476C3.16927 7.94573 2.76933 8.45736 2.54515 9.05144C2.32097 9.64552 2.28321 10.2938 2.4369 10.9099C2.59059 11.526 2.92843 12.0806 3.40538 12.4998C2.82293 13.0115 2.45168 13.7217 2.36386 14.492C2.27603 15.2624 2.47792 16.0378 2.93024 16.6676C3.38257 17.2973 4.05297 17.7362 4.81103 17.899C5.56909 18.0617 6.36059 17.9367 7.03154 17.5481V19.531C7.03113 20.166 7.22428 20.786 7.58525 21.3084C7.94622 21.8308 8.45785 22.2307 9.05193 22.4549C9.64602 22.6791 10.2943 22.7169 10.9104 22.5632C11.5265 22.4095 12.0811 22.0717 12.5003 21.5947C13.012 22.1772 13.7222 22.5484 14.4925 22.6362C15.2629 22.724 16.0383 22.5221 16.668 22.0698C17.2978 21.6175 17.7367 20.9471 17.8995 20.189C18.0622 19.431 17.9372 18.6395 17.5486 17.9685H19.5315C20.1665 17.969 20.7865 17.7758 21.3089 17.4148C21.8313 17.0539 22.2312 16.5422 22.4554 15.9481C22.6796 15.3541 22.7174 14.7058 22.5637 14.0897C22.41 13.4736 22.0721 12.919 21.5952 12.4998ZM8.59404 5.46854C8.59404 5.05414 8.75866 4.65671 9.05168 4.36369C9.34471 4.07066 9.74214 3.90604 10.1565 3.90604C10.5709 3.90604 10.9684 4.07066 11.2614 4.36369C11.5544 4.65671 11.719 5.05414 11.719 5.46854V7.03104H10.1565C9.74228 7.03057 9.34513 6.8658 9.05221 6.57287C8.75928 6.27995 8.59451 5.8828 8.59404 5.46854ZM3.90654 10.156C3.90701 9.74179 4.07178 9.34463 4.36471 9.05171C4.65763 8.75879 5.05478 8.59402 5.46904 8.59354H10.1565C10.5708 8.59402 10.9679 8.75879 11.2609 9.05171C11.5538 9.34463 11.7186 9.74179 11.719 10.156V11.7185H5.46904C5.05478 11.7181 4.65763 11.5533 4.36471 11.2604C4.07178 10.9675 3.90701 10.5703 3.90654 10.156ZM16.4065 19.531C16.4065 19.9454 16.2419 20.3429 15.9489 20.6359C15.6559 20.9289 15.2584 21.0935 14.844 21.0935C14.4296 21.0935 14.0322 20.9289 13.7392 20.6359C13.4462 20.3429 13.2815 19.9454 13.2815 19.531V17.9685H14.844C15.2583 17.969 15.6554 18.1338 15.9484 18.4267C16.2413 18.7196 16.4061 19.1168 16.4065 19.531ZM19.5315 16.406H14.844C14.4298 16.4056 14.0326 16.2408 13.7397 15.9479C13.4468 15.655 13.282 15.2578 13.2815 14.8435V13.281H19.5315C19.9459 13.281 20.3434 13.4457 20.6364 13.7387C20.9294 14.0317 21.094 14.4291 21.094 14.8435C21.094 15.2579 20.9294 15.6554 20.6364 15.9484C20.3434 16.2414 19.9459 16.406 19.5315 16.406Z" />
</svg>
</a>
<a href="" class="mx-4 transition hover:text-gray-400">
<svg class="fill-current" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path d="M23.9883 7.58391L21.0426 10.5297C20.4545 17.354 14.6994 22.6565 7.81089 22.6565C6.39249 22.6565 5.22357 22.4316 4.33651 21.9881C3.62063 21.6301 3.32738 21.246 3.25461 21.1367C3.18933 21.0388 3.14702 20.9274 3.13083 20.8108C3.11464 20.6943 3.12499 20.5755 3.16112 20.4635C3.19724 20.3515 3.2582 20.2491 3.33945 20.164C3.42069 20.0789 3.52012 20.0132 3.63031 19.9718C3.65544 19.9624 5.95923 19.0775 7.44821 17.3929C6.52206 16.7334 5.70694 15.9305 5.0335 15.0145C3.69483 13.1977 2.27901 10.0427 3.13598 5.32923C3.16148 5.18895 3.22489 5.05833 3.31932 4.95152C3.41376 4.8447 3.53562 4.76577 3.67171 4.72326C3.8078 4.68075 3.95293 4.67629 4.09137 4.71037C4.22981 4.74445 4.35629 4.81575 4.4571 4.91657C4.49153 4.9509 7.74246 8.15592 11.7166 9.19118L11.7171 8.59361C11.7256 7.34276 12.2303 6.14644 13.1204 5.26759C14.0105 4.38874 15.2132 3.89929 16.4641 3.90682C17.2766 3.91808 18.0724 4.1399 18.7737 4.55063C19.4749 4.96136 20.0576 5.54694 20.4649 6.25019L23.4359 6.25024C23.5904 6.25024 23.7414 6.29606 23.8699 6.3819C23.9984 6.46774 24.0985 6.58975 24.1577 6.73251C24.2168 6.87526 24.2323 7.03234 24.2021 7.18389C24.172 7.33543 24.0976 7.47464 23.9883 7.58391Z" />
</svg>
</a>
</div>
<p class="font-inter text-sm text-gray-500 lg:mt-0">© Copyright 2021. All rights reserved.</p>
</div>
</div>
</section>
<div style="display: none;">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BE6037ZLBE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BE6037ZLBE');
</script>
</div>
</body>
</html>