-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1631 lines (1631 loc) · 170 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
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta itemProp="name" content="Modern landing page" />
<meta itemProp="description" content="Modern landing page" />
<meta
itemProp="image"
content="public/favicon/android-chrome-512x512.png"
/>
<meta
name="keywords"
content="modern, landing, page, html, css, js, javascript, no framework, modern design, landing page"
/>
<meta property="og:image" content="public/favicon/android-chrome-512x512.png" />
<meta property="og:site_name" content="Modern landing page" />
<link rel="icon" href="public/favicon/favicon.ico" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="public/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="public/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="public/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="public/site.webmanifest" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="#53389E"
/>
<meta name="apple-mobile-web-app-title" content="Modern landing page" />
<meta name="msapplication-TileImage" content="public/favicon/favicon.ico" />
<meta name="msapplication-TileColor" content="#53389E" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="theme-color" content="#53389E" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta property="title" content="Modern landing page" key="title" />
<meta property="og:title" content="Modern landing page" key="title" />
<meta name="description" content="Modern landing page" />
<meta name="og:description" content="Modern landing page" />
<meta property="og:url" content="https://landing-page-html-css-js-eight.vercel.app/" />
<link rel="canonical" href="https://landing-page-html-css-js-eight.vercel.app/" />
<title>Modern landing page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<script>
function openDrawer() {
var x = document.getElementById("nav-mobile");
var open = document.getElementById("menu-button-open");
var close = document.getElementById("menu-button-close")
if (x.className === "nav-mobile") {
x.className += " responsive";
} else {
x.className = "nav-mobile";
}
if (open.className === "menu-button-open" && close.className === "menu-button-close") {
open.className += " hide";
close.className += " show"
} else {
open.className = "menu-button-open";
close.className = "menu-button-close"
}
}
</script>
<body>
<!-- Hero header section -->
<section id="hero-header-section" class="hero-header-section">
<nav id="nav" class="nav">
<div id="nav-header" class="nav-header">
<div id="nav-container" class="nav-container">
<div id="nav-links" class="nav-links">
<div id="nav-links-list" class="nav-links-list">
<svg width="145" height="38" viewBox="0 0 145 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd_222_1892)">
<g clip-path="url(#clip0_222_1892)">
<rect x="3" y="2" width="32" height="32" rx="8" fill="white"/>
<rect x="3" y="2" width="32" height="32" rx="8" fill="url(#paint0_linear_222_1892)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 4.03882C11.2895 4.03882 5.03884 10.2894 5.03884 18C5.03884 25.7105 11.2895 31.9612 19 31.9612C26.7105 31.9612 32.9612 25.7105 32.9612 18C32.9612 10.2894 26.7105 4.03882 19 4.03882ZM4.96117 18C4.96117 10.2466 11.2466 3.96115 19 3.96115C26.7534 3.96115 33.0388 10.2466 33.0388 18C33.0388 25.7534 26.7534 32.0388 19 32.0388C11.2466 32.0388 4.96117 25.7534 4.96117 18Z" fill="#D0D5DD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 14.0779C16.8338 14.0779 15.0777 15.834 15.0777 18.0002C15.0777 20.1665 16.8338 21.9225 19 21.9225C21.1663 21.9225 22.9223 20.1665 22.9223 18.0002C22.9223 15.834 21.1663 14.0779 19 14.0779ZM15 18.0002C15 15.7911 16.7909 14.0002 19 14.0002C21.2092 14.0002 23 15.7911 23 18.0002C23 20.2094 21.2092 22.0002 19 22.0002C16.7909 22.0002 15 20.2094 15 18.0002Z" fill="#D0D5DD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 15.3201C17.5201 15.3201 16.3204 16.5198 16.3204 17.9997C16.3204 19.4796 17.5201 20.6793 19 20.6793C20.4799 20.6793 21.6796 19.4796 21.6796 17.9997C21.6796 16.5198 20.4799 15.3201 19 15.3201ZM16.2427 17.9997C16.2427 16.4769 17.4772 15.2424 19 15.2424C20.5228 15.2424 21.7573 16.4769 21.7573 17.9997C21.7573 19.5225 20.5228 20.757 19 20.757C17.4772 20.757 16.2427 19.5225 16.2427 17.9997Z" fill="#D0D5DD"/>
<path d="M18.9612 2H19.0388V34H18.9612V2Z" fill="#D0D5DD"/>
<path d="M35 17.9609L35 18.0386L3 18.0386L3 17.9609L35 17.9609Z" fill="#D0D5DD"/>
<path d="M29.602 2H29.6796V34H29.602V2Z" fill="#D0D5DD"/>
<path d="M13.6408 2H13.7184V34H13.6408V2Z" fill="#D0D5DD"/>
<path d="M24.2816 2H24.3592V34H24.2816V2Z" fill="#D0D5DD"/>
<path d="M8.32037 2H8.39804V34H8.32037V2Z" fill="#D0D5DD"/>
<path d="M35 28.6016L35 28.6792L3 28.6792L3 28.6016L35 28.6016Z" fill="#D0D5DD"/>
<path d="M35 12.6406L35 12.7183L3 12.7183L3 12.6406L35 12.6406Z" fill="#D0D5DD"/>
<path d="M35 23.2812L35 23.3589L3 23.3589L3 23.2812L35 23.2812Z" fill="#D0D5DD"/>
<path d="M35 7.32031L35 7.39798L3 7.39798L3 7.32031L35 7.32031Z" fill="#D0D5DD"/>
<g filter="url(#filter1_dd_222_1892)">
<circle cx="19" cy="18" r="8" fill="url(#paint1_linear_222_1892)"/>
</g>
<g filter="url(#filter2_b_222_1892)">
<path d="M3 18H35V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V18Z" fill="white" fill-opacity="0.2"/>
</g>
</g>
<rect x="3.1" y="2.1" width="31.8" height="31.8" rx="7.9" stroke="#D0D5DD" stroke-width="0.2"/>
</g>
<path d="M54.3537 10.4535V19.8427C54.3537 21.8171 52.9901 23.2376 50.7741 23.2376C48.5653 23.2376 47.1946 21.8171 47.1946 19.8427V10.4535H45V20.0202C45 23.0742 47.2869 25.2404 50.7741 25.2404C54.2614 25.2404 56.5554 23.0742 56.5554 20.0202V10.4535H54.3537Z" fill="#101828"/>
<path d="M61.6992 18.5217C61.6992 16.7816 62.7646 15.7873 64.2418 15.7873C65.6836 15.7873 66.5572 16.7319 66.5572 18.3157V24.9989H68.6808V18.06C68.6808 15.3611 67.1964 13.9478 64.9663 13.9478C63.3256 13.9478 62.2532 14.7077 61.7489 15.8654H61.614V14.0898H59.5756V24.9989H61.6992V18.5217Z" fill="#101828"/>
<path d="M76.6211 14.0898H74.3839V11.4762H72.2603V14.0898H70.6623V15.7944H72.2603V22.2362C72.2532 24.2177 73.766 25.1765 75.4421 25.141C76.1168 25.1339 76.5714 25.006 76.82 24.9137L76.4364 23.1594C76.2944 23.1879 76.0316 23.2518 75.6907 23.2518C75.0018 23.2518 74.3839 23.0245 74.3839 21.7958V15.7944H76.6211V14.0898Z" fill="#101828"/>
<path d="M78.9702 24.9989H81.0938V14.0898H78.9702V24.9989ZM80.0426 12.4066C80.7741 12.4066 81.3849 11.8384 81.3849 11.1424C81.3849 10.4464 80.7741 9.87109 80.0426 9.87109C79.304 9.87109 78.7003 10.4464 78.7003 11.1424C78.7003 11.8384 79.304 12.4066 80.0426 12.4066Z" fill="#101828"/>
<path d="M89.043 14.0898H86.8058V11.4762H84.6822V14.0898H83.0842V15.7944H84.6822V22.2362C84.6751 24.2177 86.1879 25.1765 87.864 25.141C88.5387 25.1339 88.9933 25.006 89.2418 24.9137L88.8583 23.1594C88.7163 23.1879 88.4535 23.2518 88.1126 23.2518C87.4237 23.2518 86.8058 23.0245 86.8058 21.7958V15.7944H89.043V14.0898Z" fill="#101828"/>
<path d="M93.75 10.4535H91.6264V24.9989H93.75V10.4535Z" fill="#101828"/>
<path d="M101.309 25.2191C103.688 25.2191 105.371 24.0472 105.854 22.2717L103.844 21.9094C103.461 22.9393 102.537 23.4648 101.33 23.4648C99.5117 23.4648 98.2901 22.2859 98.2333 20.1836H105.989V19.4308C105.989 15.489 103.631 13.9478 101.159 13.9478C98.1197 13.9478 96.1168 16.2631 96.1168 19.6154C96.1168 23.0032 98.0913 25.2191 101.309 25.2191ZM98.2404 18.5927C98.3256 17.0444 99.4478 15.7021 101.174 15.7021C102.821 15.7021 103.901 16.9237 103.908 18.5927H98.2404Z" fill="#101828"/>
<path d="M112.429 25.212C114.418 25.212 115.199 23.9975 115.582 23.3015H115.76V24.9989H117.834V10.4535H115.71V15.8583H115.582C115.199 15.1836 114.474 13.9478 112.443 13.9478C109.808 13.9478 107.869 16.0288 107.869 19.5657C107.869 23.0955 109.78 25.212 112.429 25.212ZM112.898 23.4009C111.001 23.4009 110.014 21.7319 110.014 19.5444C110.014 17.3782 110.98 15.7518 112.898 15.7518C114.751 15.7518 115.746 17.2646 115.746 19.5444C115.746 21.8384 114.73 23.4009 112.898 23.4009Z" fill="#101828"/>
<path d="M135.682 10.4535V19.8427C135.682 21.8171 134.318 23.2376 132.102 23.2376C129.893 23.2376 128.523 21.8171 128.523 19.8427V10.4535H126.328V20.0202C126.328 23.0742 128.615 25.2404 132.102 25.2404C135.589 25.2404 137.884 23.0742 137.884 20.0202V10.4535H135.682Z" fill="#101828"/>
<path d="M143.269 10.4535H141.074V24.9989H143.269V10.4535Z" fill="#101828"/>
<defs>
<filter id="filter0_dd_222_1892" x="0" y="0" width="38" height="38" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_222_1892"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_222_1892" result="effect2_dropShadow_222_1892"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_222_1892" result="shape"/>
</filter>
<filter id="filter1_dd_222_1892" x="8" y="8" width="22" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_222_1892"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_222_1892" result="effect2_dropShadow_222_1892"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_222_1892" result="shape"/>
</filter>
<filter id="filter2_b_222_1892" x="-2" y="13" width="42" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_222_1892"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_222_1892" result="shape"/>
</filter>
<linearGradient id="paint0_linear_222_1892" x1="19" y1="2" x2="19" y2="34" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#D0D5DD"/>
</linearGradient>
<linearGradient id="paint1_linear_222_1892" x1="15" y1="26" x2="23" y2="10" gradientUnits="userSpaceOnUse">
<stop stop-color="#53389E"/>
<stop offset="1" stop-color="#6941C6"/>
</linearGradient>
<clipPath id="clip0_222_1892">
<rect x="3" y="2" width="32" height="32" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>
<a href="#" class="nav-links-list-item">Home</a>
<div class="dropdown">
<a href="#" class="nav-links-list-item">
Resources
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<div class="dropdown-content">
<div class="dropdown-content-container">
<div class="dropdown-content-container-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M4 20C4 19.337 4.26339 18.7011 4.73223 18.2322C5.20107 17.7634 5.83696 17.5 6.5 17.5H20M4 20C4 20.663 4.26339 21.2989 4.73223 21.7678C5.20107 22.2366 5.83696 22.5 6.5 22.5H20V2.5H6.5C5.83696 2.5 5.20107 2.76339 4.73223 3.23223C4.26339 3.70107 4 4.33696 4 5V20Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="dropdown-content-container-item-text">
<p>Blog</p>
<p>The latest industry news, updates and info.</p>
</div>
</div>
<div class="dropdown-content-container-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M13 2.5L3 14.5H12L11 22.5L21 10.5H12L13 2.5Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="dropdown-content-container-item-text">
<p>Customer stories</p>
<p>Learn how our customers are making big changes.</p>
</div>
</div>
<div class="dropdown-content-container-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M12 22.5C17.5228 22.5 22 18.0228 22 12.5C22 6.97715 17.5228 2.5 12 2.5C6.47715 2.5 2 6.97715 2 12.5C2 18.0228 6.47715 22.5 12 22.5Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 8.5L16 12.5L10 16.5V8.5Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="dropdown-content-container-item-text">
<p>Video tutorials</p>
<p>Get up and running on new features and techniques.</p>
</div>
</div>
</div>
<div class="dropdown-content-container">
<div class="dropdown-content-container-item-card">
<img alt="dropdown-udpate-image" src="public/images/dropdown-card-image.png" />
<div class="dropdown-content-container-item-card-content">
<div class="dropdown-content-container-item-card-text">
<p>We've just released an update!</p>
<p>Check out the all new dashboard view. Pages now load faster. </p>
</div>
<div class="dropdown-content-container-item-card-buttons">
<button>Dismiss</button>
<button>Changelog</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-links-list-item">
Resources
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<div class="dropdown-content">
<div class="dropdown-content-container">
<div class="dropdown-content-container-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M4 20C4 19.337 4.26339 18.7011 4.73223 18.2322C5.20107 17.7634 5.83696 17.5 6.5 17.5H20M4 20C4 20.663 4.26339 21.2989 4.73223 21.7678C5.20107 22.2366 5.83696 22.5 6.5 22.5H20V2.5H6.5C5.83696 2.5 5.20107 2.76339 4.73223 3.23223C4.26339 3.70107 4 4.33696 4 5V20Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="dropdown-content-container-item-text">
<p>Blog</p>
<p>The latest industry news, updates and info.</p>
</div>
</div>
<div class="dropdown-content-container-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M13 2.5L3 14.5H12L11 22.5L21 10.5H12L13 2.5Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="dropdown-content-container-item-text">
<p>Customer stories</p>
<p>Learn how our customers are making big changes.</p>
</div>
</div>
<div class="dropdown-content-container-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M12 22.5C17.5228 22.5 22 18.0228 22 12.5C22 6.97715 17.5228 2.5 12 2.5C6.47715 2.5 2 6.97715 2 12.5C2 18.0228 6.47715 22.5 12 22.5Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 8.5L16 12.5L10 16.5V8.5Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="dropdown-content-container-item-text">
<p>Video tutorials</p>
<p>Get up and running on new features and techniques.</p>
</div>
</div>
</div>
<div class="dropdown-content-container">
<div class="dropdown-content-container-item-card">
<img alt="dropdown-udpate-image" src="public/images/dropdown-card-image.png" />
<div class="dropdown-content-container-item-card-content">
<div class="dropdown-content-container-item-card-text">
<p>We've just released an update!</p>
<p>Check out the all new dashboard view. Pages now load faster. </p>
</div>
<div class="dropdown-content-container-item-card-buttons">
<button>Dismiss</button>
<button>Changelog</button>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="nav-links-list-item">Pricing</a>
</div>
</div>
<div id="nav-buttons" class="nav-buttons">
<button class="nav-buttons-secondary">Log in</button>
<button class="nav-buttons-primary">Sign up</button>
<button aria-label="drawer-button-open" onclick="openDrawer()" id="menu-button-open" class="menu-button-open">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 12H21M3 6H21M3 18H21" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button aria-label="drawer-button-close" onclick="openDrawer()" id="menu-button-close" class="menu-button-close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18 6L6 18M6 6L18 18" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
</nav>
<div id="nav-mobile" class="nav-mobile">
<div class="nav-mobile-content">
<div class="nav-mobile-menu-item">
<a href="#">Home</a>
</div>
<div class="nav-mobile-menu-item">
<a href="#">Products</a>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nav-mobile-menu-item">
<a href="#">Resources</a>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nav-mobile-menu-item">
<a href="#">Pricing</a>
</div>
</div>
<div class="nav-mobile-footer">
<div class="nav-mobile-footer-content">
<div class="nav-mobile-footer-content-section">
<a href="#">About us</a>
<a href="#">Press</a>
<a href="#">Careers</a>
<a href="#">Legal</a>
</div>
<div class="nav-mobile-footer-content-section">
<a href="#">Support</a>
<a href="#">Contact</a>
<a href="#">Sitemap</a>
<a href="#">Cookie settings</a>
</div>
</div>
<div class="nav-mobile-footer-buttons">
<button>Sign up</button>
<button>Log in</button>
</div>
</div>
</div>
<header class="hero-section" id="hero-section">
<div class="hero-container" id="hero-container">
<div id="hero-content" class="hero-content">
<div class="hero-heading" id="hero-heading">
<p>Grow your users.<span>Smarter.</span></p>
<p>Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. Trusted by over 4,000 startups.</p>
</div>
<div id="hero-heading-email-container" class="hero-heading-email-container">
<form id="hero-heading-email-container-input" class="hero-heading-email-container-input">
<input required form="hero-heading-email-container-input" type="email" placeholder="Enter your email" />
<p>We care about your data in our <span>privacy policy</span>.</p>
</form>
<input form="hero-heading-email-container-input" type="submit" value="Get started" />
</div>
</div>
<img alt="hero-graph-users-image" src="public/images/hero.png" />
</div>
</header>
<svg class="line-pattern-left" width="200" height="408" viewBox="0 0 200 408" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.3">
<line x1="105.24" y1="12.7244" x2="109.5" y2="1.01986" stroke="#9E77ED" stroke-width="2"/>
<line x1="131.864" y1="12.1777" x2="138.092" y2="1.39079" stroke="#9E77ED" stroke-width="2"/>
<line x1="158.656" y1="11.6453" x2="166.662" y2="2.10368" stroke="#9E77ED" stroke-width="2"/>
<line x1="185.65" y1="10.7437" x2="195.192" y2="2.73735" stroke="#9E77ED" stroke-width="2"/>
<line x1="-0.470943" y1="13.4084" x2="-4.73104" y2="1.7039" stroke="#9E77ED" stroke-width="2"/>
<line x1="25.9371" y1="13.6297" x2="23.7742" y2="1.36324" stroke="#9E77ED" stroke-width="2"/>
<line x1="52.3242" y1="13.4561" x2="52.3242" y2="1.00036" stroke="#9E77ED" stroke-width="2"/>
<line x1="78.7418" y1="13.2824" x2="80.9047" y2="1.01594" stroke="#9E77ED" stroke-width="2"/>
<line x1="77.2166" y1="34.5222" x2="81.4767" y2="22.8177" stroke="#9E77ED" stroke-width="2"/>
<line x1="103.837" y1="33.9746" x2="110.065" y2="23.1877" stroke="#9E77ED" stroke-width="2"/>
<line x1="130.628" y1="33.4431" x2="138.635" y2="23.9015" stroke="#9E77ED" stroke-width="2"/>
<line x1="157.627" y1="32.5416" x2="167.168" y2="24.5352" stroke="#9E77ED" stroke-width="2"/>
<line x1="184.859" y1="31.2736" x2="195.646" y2="25.0458" stroke="#9E77ED" stroke-width="2"/>
<line x1="24.2969" y1="35.2529" x2="24.2969" y2="22.7972" stroke="#9E77ED" stroke-width="2"/>
<line x1="50.7183" y1="35.0793" x2="52.8812" y2="22.8128" stroke="#9E77ED" stroke-width="2"/>
<line x1="49.1892" y1="56.3201" x2="53.4493" y2="44.6156" stroke="#9E77ED" stroke-width="2"/>
<line x1="75.8137" y1="55.7725" x2="82.0415" y2="44.9855" stroke="#9E77ED" stroke-width="2"/>
<line x1="102.605" y1="55.24" x2="110.611" y2="45.6984" stroke="#9E77ED" stroke-width="2"/>
<line x1="129.603" y1="54.3384" x2="139.145" y2="46.3321" stroke="#9E77ED" stroke-width="2"/>
<line x1="156.836" y1="53.0705" x2="167.623" y2="46.8427" stroke="#9E77ED" stroke-width="2"/>
<line x1="184.33" y1="52.2185" x2="196.034" y2="47.9584" stroke="#9E77ED" stroke-width="2"/>
<line x1="22.691" y1="56.8771" x2="24.8539" y2="44.6107" stroke="#9E77ED" stroke-width="2"/>
<line x1="21.1658" y1="78.117" x2="25.4259" y2="66.4124" stroke="#9E77ED" stroke-width="2"/>
<line x1="47.7863" y1="77.5703" x2="54.0142" y2="66.7834" stroke="#9E77ED" stroke-width="2"/>
<line x1="74.5777" y1="77.0379" x2="82.5841" y2="67.4963" stroke="#9E77ED" stroke-width="2"/>
<line x1="101.576" y1="76.1363" x2="111.118" y2="68.1299" stroke="#9E77ED" stroke-width="2"/>
<line x1="128.812" y1="74.8683" x2="139.599" y2="68.6405" stroke="#9E77ED" stroke-width="2"/>
<line x1="156.306" y1="74.0164" x2="168.011" y2="69.7563" stroke="#9E77ED" stroke-width="2"/>
<line x1="184.08" y1="72.8033" x2="196.347" y2="70.6404" stroke="#9E77ED" stroke-width="2"/>
<line x1="19.7629" y1="99.3672" x2="25.9907" y2="88.5802" stroke="#9E77ED" stroke-width="2"/>
<line x1="46.5543" y1="98.8357" x2="54.5606" y2="89.2941" stroke="#9E77ED" stroke-width="2"/>
<line x1="73.5525" y1="97.9332" x2="83.0941" y2="89.9268" stroke="#9E77ED" stroke-width="2"/>
<line x1="100.785" y1="96.6662" x2="111.572" y2="90.4384" stroke="#9E77ED" stroke-width="2"/>
<line x1="128.279" y1="95.8132" x2="139.984" y2="91.5531" stroke="#9E77ED" stroke-width="2"/>
<line x1="156.053" y1="94.6011" x2="168.319" y2="92.4382" stroke="#9E77ED" stroke-width="2"/>
<line x1="199.68" y1="95.418" x2="187.224" y2="95.418" stroke="#9E77ED" stroke-width="2"/>
<line x1="18.5269" y1="120.633" x2="26.5333" y2="111.091" stroke="#9E77ED" stroke-width="2"/>
<line x1="45.5252" y1="119.731" x2="55.0668" y2="111.725" stroke="#9E77ED" stroke-width="2"/>
<line x1="72.7617" y1="118.463" x2="83.5487" y2="112.235" stroke="#9E77ED" stroke-width="2"/>
<line x1="100.256" y1="117.611" x2="111.96" y2="113.351" stroke="#9E77ED" stroke-width="2"/>
<line x1="128.029" y1="116.398" x2="140.296" y2="114.235" stroke="#9E77ED" stroke-width="2"/>
<line x1="171.652" y1="117.216" x2="159.197" y2="117.216" stroke="#9E77ED" stroke-width="2"/>
<line x1="199.365" y1="118.368" x2="187.099" y2="116.205" stroke="#9E77ED" stroke-width="2"/>
<line x1="17.5017" y1="141.529" x2="27.0434" y2="133.523" stroke="#9E77ED" stroke-width="2"/>
<line x1="44.7344" y1="140.261" x2="55.5213" y2="134.033" stroke="#9E77ED" stroke-width="2"/>
<line x1="72.2283" y1="139.409" x2="83.9328" y2="135.149" stroke="#9E77ED" stroke-width="2"/>
<line x1="100.002" y1="138.196" x2="112.269" y2="136.033" stroke="#9E77ED" stroke-width="2"/>
<line x1="143.629" y1="139.013" x2="131.173" y2="139.013" stroke="#9E77ED" stroke-width="2"/>
<line x1="171.338" y1="140.165" x2="159.072" y2="138.003" stroke="#9E77ED" stroke-width="2"/>
<line x1="198.775" y1="141.288" x2="187.071" y2="137.028" stroke="#9E77ED" stroke-width="2"/>
<line x1="16.7109" y1="162.058" x2="27.4979" y2="155.83" stroke="#9E77ED" stroke-width="2"/>
<line x1="44.2049" y1="161.206" x2="55.9094" y2="156.946" stroke="#9E77ED" stroke-width="2"/>
<line x1="71.9787" y1="159.994" x2="84.2452" y2="157.831" stroke="#9E77ED" stroke-width="2"/>
<line x1="197.93" y1="163.79" x2="187.143" y2="157.562" stroke="#9E77ED" stroke-width="2"/>
<line x1="115.605" y1="160.811" x2="103.15" y2="160.811" stroke="#9E77ED" stroke-width="2"/>
<line x1="143.315" y1="161.963" x2="131.048" y2="159.8" stroke="#9E77ED" stroke-width="2"/>
<line x1="170.748" y1="163.085" x2="159.043" y2="158.825" stroke="#9E77ED" stroke-width="2"/>
<line x1="16.1775" y1="183.004" x2="27.882" y2="178.744" stroke="#9E77ED" stroke-width="2"/>
<line x1="43.9514" y1="181.791" x2="56.2178" y2="179.628" stroke="#9E77ED" stroke-width="2"/>
<line x1="169.902" y1="185.588" x2="159.115" y2="179.36" stroke="#9E77ED" stroke-width="2"/>
<line x1="196.853" y1="186.656" x2="187.312" y2="178.649" stroke="#9E77ED" stroke-width="2"/>
<line x1="87.5781" y1="182.607" x2="75.1224" y2="182.607" stroke="#9E77ED" stroke-width="2"/>
<line x1="115.287" y1="183.76" x2="103.021" y2="181.597" stroke="#9E77ED" stroke-width="2"/>
<line x1="142.724" y1="184.883" x2="131.02" y2="180.623" stroke="#9E77ED" stroke-width="2"/>
<line x1="-11.8459" y1="204.802" x2="-0.141401" y2="200.541" stroke="#9E77ED" stroke-width="2"/>
<line x1="15.9279" y1="203.588" x2="28.1944" y2="201.426" stroke="#9E77ED" stroke-width="2"/>
<line x1="141.879" y1="207.386" x2="131.092" y2="201.158" stroke="#9E77ED" stroke-width="2"/>
<line x1="168.826" y1="208.453" x2="159.284" y2="200.446" stroke="#9E77ED" stroke-width="2"/>
<line x1="195.578" y1="209.109" x2="187.571" y2="199.567" stroke="#9E77ED" stroke-width="2"/>
<line x1="59.5547" y1="204.405" x2="47.099" y2="204.405" stroke="#9E77ED" stroke-width="2"/>
<line x1="87.2639" y1="205.558" x2="74.9974" y2="203.395" stroke="#9E77ED" stroke-width="2"/>
<line x1="114.701" y1="206.681" x2="102.996" y2="202.421" stroke="#9E77ED" stroke-width="2"/>
<line x1="-12.0994" y1="225.385" x2="0.167036" y2="223.222" stroke="#9E77ED" stroke-width="2"/>
<line x1="113.852" y1="229.182" x2="103.065" y2="222.955" stroke="#9E77ED" stroke-width="2"/>
<line x1="140.803" y1="230.25" x2="131.261" y2="222.244" stroke="#9E77ED" stroke-width="2"/>
<line x1="167.55" y1="230.905" x2="159.544" y2="221.364" stroke="#9E77ED" stroke-width="2"/>
<line x1="194.146" y1="231.152" x2="187.918" y2="220.365" stroke="#9E77ED" stroke-width="2"/>
<line x1="31.5273" y1="226.203" x2="19.0716" y2="226.203" stroke="#9E77ED" stroke-width="2"/>
<line x1="59.2365" y1="227.355" x2="46.97" y2="225.192" stroke="#9E77ED" stroke-width="2"/>
<line x1="86.6736" y1="228.478" x2="74.9691" y2="224.218" stroke="#9E77ED" stroke-width="2"/>
<line x1="85.8281" y1="250.98" x2="75.0412" y2="244.752" stroke="#9E77ED" stroke-width="2"/>
<line x1="112.775" y1="252.048" x2="103.234" y2="244.042" stroke="#9E77ED" stroke-width="2"/>
<line x1="139.527" y1="252.703" x2="131.521" y2="243.162" stroke="#9E77ED" stroke-width="2"/>
<line x1="166.118" y1="252.949" x2="159.891" y2="242.162" stroke="#9E77ED" stroke-width="2"/>
<line x1="192.595" y1="253.181" x2="188.335" y2="241.476" stroke="#9E77ED" stroke-width="2"/>
<line x1="3.50391" y1="248" x2="-8.95179" y2="248" stroke="#9E77ED" stroke-width="2"/>
<line x1="31.2131" y1="249.153" x2="18.9466" y2="246.99" stroke="#9E77ED" stroke-width="2"/>
<line x1="58.6502" y1="250.276" x2="46.9456" y2="246.016" stroke="#9E77ED" stroke-width="2"/>
<line x1="57.8008" y1="272.778" x2="47.0138" y2="266.55" stroke="#9E77ED" stroke-width="2"/>
<line x1="84.7517" y1="273.845" x2="75.2101" y2="265.839" stroke="#9E77ED" stroke-width="2"/>
<line x1="111.503" y1="274.5" x2="103.497" y2="264.959" stroke="#9E77ED" stroke-width="2"/>
<line x1="138.095" y1="274.747" x2="131.867" y2="263.96" stroke="#9E77ED" stroke-width="2"/>
<line x1="164.568" y1="274.979" x2="160.308" y2="263.274" stroke="#9E77ED" stroke-width="2"/>
<line x1="190.976" y1="275.199" x2="188.813" y2="262.933" stroke="#9E77ED" stroke-width="2"/>
<line x1="3.18573" y1="270.951" x2="-9.08074" y2="268.788" stroke="#9E77ED" stroke-width="2"/>
<line x1="30.6228" y1="272.073" x2="18.9183" y2="267.812" stroke="#9E77ED" stroke-width="2"/>
<line x1="29.7773" y1="294.575" x2="18.9904" y2="288.347" stroke="#9E77ED" stroke-width="2"/>
<line x1="56.7244" y1="295.643" x2="47.1828" y2="287.637" stroke="#9E77ED" stroke-width="2"/>
<line x1="83.4761" y1="296.298" x2="75.4698" y2="286.756" stroke="#9E77ED" stroke-width="2"/>
<line x1="110.068" y1="296.545" x2="103.84" y2="285.758" stroke="#9E77ED" stroke-width="2"/>
<line x1="136.545" y1="296.776" x2="132.285" y2="285.071" stroke="#9E77ED" stroke-width="2"/>
<line x1="162.953" y1="296.997" x2="160.79" y2="284.73" stroke="#9E77ED" stroke-width="2"/>
<line x1="189.34" y1="296.823" x2="189.34" y2="284.368" stroke="#9E77ED" stroke-width="2"/>
<line x1="2.59939" y1="293.87" x2="-9.10514" y2="289.61" stroke="#9E77ED" stroke-width="2"/>
<line x1="1.75" y1="316.373" x2="-9.03695" y2="310.145" stroke="#9E77ED" stroke-width="2"/>
<line x1="28.701" y1="317.44" x2="19.1593" y2="309.434" stroke="#9E77ED" stroke-width="2"/>
<line x1="55.4527" y1="318.096" x2="47.4463" y2="308.554" stroke="#9E77ED" stroke-width="2"/>
<line x1="82.0441" y1="318.342" x2="75.8163" y2="307.555" stroke="#9E77ED" stroke-width="2"/>
<line x1="108.517" y1="318.573" x2="104.257" y2="306.869" stroke="#9E77ED" stroke-width="2"/>
<line x1="134.925" y1="318.794" x2="132.762" y2="306.527" stroke="#9E77ED" stroke-width="2"/>
<line x1="161.312" y1="318.62" x2="161.312" y2="306.164" stroke="#9E77ED" stroke-width="2"/>
<line x1="187.734" y1="318.446" x2="189.897" y2="306.18" stroke="#9E77ED" stroke-width="2"/>
<line x1="186.205" y1="339.686" x2="190.465" y2="327.982" stroke="#9E77ED" stroke-width="2"/>
<line x1="0.673619" y1="339.238" x2="-8.868" y2="331.231" stroke="#9E77ED" stroke-width="2"/>
<line x1="27.4254" y1="339.893" x2="19.419" y2="330.351" stroke="#9E77ED" stroke-width="2"/>
<line x1="54.0168" y1="340.14" x2="47.7889" y2="329.353" stroke="#9E77ED" stroke-width="2"/>
<line x1="80.4939" y1="340.37" x2="76.2338" y2="328.666" stroke="#9E77ED" stroke-width="2"/>
<line x1="106.902" y1="340.592" x2="104.739" y2="328.325" stroke="#9E77ED" stroke-width="2"/>
<line x1="133.289" y1="340.418" x2="133.289" y2="327.962" stroke="#9E77ED" stroke-width="2"/>
<line x1="159.707" y1="340.244" x2="161.87" y2="327.978" stroke="#9E77ED" stroke-width="2"/>
<line x1="158.181" y1="361.484" x2="162.441" y2="349.78" stroke="#9E77ED" stroke-width="2"/>
<line x1="184.802" y1="360.937" x2="191.03" y2="350.15" stroke="#9E77ED" stroke-width="2"/>
<line x1="-0.598076" y1="361.691" x2="-8.60444" y2="352.149" stroke="#9E77ED" stroke-width="2"/>
<line x1="25.9933" y1="361.937" x2="19.7655" y2="351.15" stroke="#9E77ED" stroke-width="2"/>
<line x1="52.4666" y1="362.168" x2="48.2065" y2="350.464" stroke="#9E77ED" stroke-width="2"/>
<line x1="78.8746" y1="362.389" x2="76.7117" y2="350.123" stroke="#9E77ED" stroke-width="2"/>
<line x1="105.262" y1="362.216" x2="105.262" y2="349.76" stroke="#9E77ED" stroke-width="2"/>
<line x1="131.683" y1="362.042" x2="133.846" y2="349.776" stroke="#9E77ED" stroke-width="2"/>
<line x1="130.154" y1="383.282" x2="134.414" y2="371.577" stroke="#9E77ED" stroke-width="2"/>
<line x1="156.779" y1="382.734" x2="163.006" y2="371.947" stroke="#9E77ED" stroke-width="2"/>
<line x1="183.57" y1="382.202" x2="191.576" y2="372.66" stroke="#9E77ED" stroke-width="2"/>
<line x1="24.4431" y1="383.966" x2="20.183" y2="372.262" stroke="#9E77ED" stroke-width="2"/>
<line x1="50.8511" y1="384.186" x2="48.6882" y2="371.92" stroke="#9E77ED" stroke-width="2"/>
<line x1="77.2383" y1="384.013" x2="77.2383" y2="371.557" stroke="#9E77ED" stroke-width="2"/>
<line x1="103.656" y1="383.839" x2="105.819" y2="371.573" stroke="#9E77ED" stroke-width="2"/>
<line x1="102.131" y1="405.079" x2="106.391" y2="393.374" stroke="#9E77ED" stroke-width="2"/>
<line x1="128.751" y1="404.532" x2="134.979" y2="393.745" stroke="#9E77ED" stroke-width="2"/>
<line x1="155.543" y1="404" x2="163.549" y2="394.458" stroke="#9E77ED" stroke-width="2"/>
<line x1="182.541" y1="403.098" x2="192.082" y2="395.092" stroke="#9E77ED" stroke-width="2"/>
<line x1="22.8238" y1="405.984" x2="20.6609" y2="393.718" stroke="#9E77ED" stroke-width="2"/>
<line x1="49.2109" y1="405.811" x2="49.2109" y2="393.355" stroke="#9E77ED" stroke-width="2"/>
<line x1="75.6324" y1="405.637" x2="77.7953" y2="393.37" stroke="#9E77ED" stroke-width="2"/>
</g>
</svg>
<svg class="line-pattern-right" width="298" height="408" viewBox="0 0 298 408" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.3">
<line x1="203.24" y1="12.7244" x2="207.5" y2="1.01986" stroke="#9E77ED" stroke-width="2"/>
<line x1="229.864" y1="12.1777" x2="236.092" y2="1.39079" stroke="#9E77ED" stroke-width="2"/>
<line x1="256.656" y1="11.6453" x2="264.662" y2="2.10368" stroke="#9E77ED" stroke-width="2"/>
<line x1="283.65" y1="10.7437" x2="293.192" y2="2.73735" stroke="#9E77ED" stroke-width="2"/>
<line x1="17.7088" y1="12.2758" x2="8.16716" y2="4.26944" stroke="#9E77ED" stroke-width="2"/>
<line x1="44.4605" y1="12.9309" x2="36.4542" y2="3.38926" stroke="#9E77ED" stroke-width="2"/>
<line x1="71.0519" y1="13.1777" x2="64.8241" y2="2.39079" stroke="#9E77ED" stroke-width="2"/>
<line x1="97.5291" y1="13.4084" x2="93.269" y2="1.7039" stroke="#9E77ED" stroke-width="2"/>
<line x1="123.937" y1="13.6297" x2="121.774" y2="1.36324" stroke="#9E77ED" stroke-width="2"/>
<line x1="150.324" y1="13.4561" x2="150.324" y2="1.00036" stroke="#9E77ED" stroke-width="2"/>
<line x1="176.742" y1="13.2824" x2="178.905" y2="1.01594" stroke="#9E77ED" stroke-width="2"/>
<line x1="175.217" y1="34.5222" x2="179.477" y2="22.8177" stroke="#9E77ED" stroke-width="2"/>
<line x1="201.837" y1="33.9746" x2="208.065" y2="23.1877" stroke="#9E77ED" stroke-width="2"/>
<line x1="228.628" y1="33.4431" x2="236.635" y2="23.9015" stroke="#9E77ED" stroke-width="2"/>
<line x1="255.627" y1="32.5416" x2="265.168" y2="24.5352" stroke="#9E77ED" stroke-width="2"/>
<line x1="282.859" y1="31.2736" x2="293.646" y2="25.0458" stroke="#9E77ED" stroke-width="2"/>
<line x1="16.4371" y1="34.7287" x2="8.43071" y2="25.1871" stroke="#9E77ED" stroke-width="2"/>
<line x1="43.0285" y1="34.9746" x2="36.8007" y2="24.1877" stroke="#9E77ED" stroke-width="2"/>
<line x1="69.5017" y1="35.2063" x2="65.2416" y2="23.5018" stroke="#9E77ED" stroke-width="2"/>
<line x1="95.9097" y1="35.4266" x2="93.7468" y2="23.1601" stroke="#9E77ED" stroke-width="2"/>
<line x1="122.297" y1="35.2529" x2="122.297" y2="22.7972" stroke="#9E77ED" stroke-width="2"/>
<line x1="148.718" y1="35.0793" x2="150.881" y2="22.8128" stroke="#9E77ED" stroke-width="2"/>
<line x1="147.189" y1="56.3201" x2="151.449" y2="44.6156" stroke="#9E77ED" stroke-width="2"/>
<line x1="173.814" y1="55.7725" x2="180.042" y2="44.9855" stroke="#9E77ED" stroke-width="2"/>
<line x1="200.605" y1="55.24" x2="208.611" y2="45.6984" stroke="#9E77ED" stroke-width="2"/>
<line x1="227.603" y1="54.3384" x2="237.145" y2="46.3321" stroke="#9E77ED" stroke-width="2"/>
<line x1="254.836" y1="53.0705" x2="265.623" y2="46.8427" stroke="#9E77ED" stroke-width="2"/>
<line x1="282.33" y1="52.2185" x2="294.034" y2="47.9584" stroke="#9E77ED" stroke-width="2"/>
<line x1="15.0012" y1="56.7725" x2="8.77331" y2="45.9855" stroke="#9E77ED" stroke-width="2"/>
<line x1="41.4783" y1="57.0041" x2="37.2182" y2="45.2996" stroke="#9E77ED" stroke-width="2"/>
<line x1="67.8863" y1="57.2244" x2="65.7234" y2="44.958" stroke="#9E77ED" stroke-width="2"/>
<line x1="94.2734" y1="57.0508" x2="94.2734" y2="44.5951" stroke="#9E77ED" stroke-width="2"/>
<line x1="120.691" y1="56.8771" x2="122.854" y2="44.6107" stroke="#9E77ED" stroke-width="2"/>
<line x1="119.166" y1="78.117" x2="123.426" y2="66.4124" stroke="#9E77ED" stroke-width="2"/>
<line x1="145.786" y1="77.5703" x2="152.014" y2="66.7834" stroke="#9E77ED" stroke-width="2"/>
<line x1="172.578" y1="77.0379" x2="180.584" y2="67.4963" stroke="#9E77ED" stroke-width="2"/>
<line x1="199.576" y1="76.1363" x2="209.118" y2="68.1299" stroke="#9E77ED" stroke-width="2"/>
<line x1="226.812" y1="74.8683" x2="237.599" y2="68.6405" stroke="#9E77ED" stroke-width="2"/>
<line x1="254.306" y1="74.0164" x2="266.011" y2="69.7563" stroke="#9E77ED" stroke-width="2"/>
<line x1="282.08" y1="72.8033" x2="294.347" y2="70.6404" stroke="#9E77ED" stroke-width="2"/>
<line x1="13.4509" y1="78.801" x2="9.19083" y2="67.0965" stroke="#9E77ED" stroke-width="2"/>
<line x1="39.8589" y1="79.0223" x2="37.696" y2="66.7558" stroke="#9E77ED" stroke-width="2"/>
<line x1="66.2461" y1="78.8486" x2="66.2461" y2="66.3929" stroke="#9E77ED" stroke-width="2"/>
<line x1="92.6675" y1="78.675" x2="94.8304" y2="66.4085" stroke="#9E77ED" stroke-width="2"/>
<line x1="91.1384" y1="99.9148" x2="95.3985" y2="88.2103" stroke="#9E77ED" stroke-width="2"/>
<line x1="117.763" y1="99.3672" x2="123.991" y2="88.5802" stroke="#9E77ED" stroke-width="2"/>
<line x1="144.554" y1="98.8357" x2="152.561" y2="89.2941" stroke="#9E77ED" stroke-width="2"/>
<line x1="171.553" y1="97.9332" x2="181.094" y2="89.9268" stroke="#9E77ED" stroke-width="2"/>
<line x1="198.785" y1="96.6662" x2="209.572" y2="90.4384" stroke="#9E77ED" stroke-width="2"/>
<line x1="226.279" y1="95.8132" x2="237.984" y2="91.5531" stroke="#9E77ED" stroke-width="2"/>
<line x1="254.053" y1="94.6011" x2="266.319" y2="92.4382" stroke="#9E77ED" stroke-width="2"/>
<line x1="11.8355" y1="100.819" x2="9.6726" y2="88.5527" stroke="#9E77ED" stroke-width="2"/>
<line x1="38.2227" y1="100.646" x2="38.2227" y2="88.1898" stroke="#9E77ED" stroke-width="2"/>
<line x1="64.6402" y1="100.472" x2="66.8031" y2="88.2054" stroke="#9E77ED" stroke-width="2"/>
<line x1="297.68" y1="95.418" x2="285.224" y2="95.418" stroke="#9E77ED" stroke-width="2"/>
<line x1="63.115" y1="121.712" x2="67.3751" y2="110.007" stroke="#9E77ED" stroke-width="2"/>
<line x1="89.7355" y1="121.165" x2="95.9634" y2="110.378" stroke="#9E77ED" stroke-width="2"/>
<line x1="116.527" y1="120.633" x2="124.533" y2="111.091" stroke="#9E77ED" stroke-width="2"/>
<line x1="143.525" y1="119.731" x2="153.067" y2="111.725" stroke="#9E77ED" stroke-width="2"/>
<line x1="170.762" y1="118.463" x2="181.549" y2="112.235" stroke="#9E77ED" stroke-width="2"/>
<line x1="198.256" y1="117.611" x2="209.96" y2="113.351" stroke="#9E77ED" stroke-width="2"/>
<line x1="226.029" y1="116.398" x2="238.296" y2="114.235" stroke="#9E77ED" stroke-width="2"/>
<line x1="10.1953" y1="122.443" x2="10.1953" y2="109.988" stroke="#9E77ED" stroke-width="2"/>
<line x1="36.6168" y1="122.27" x2="38.7797" y2="110.003" stroke="#9E77ED" stroke-width="2"/>
<line x1="269.652" y1="117.216" x2="257.197" y2="117.216" stroke="#9E77ED" stroke-width="2"/>
<line x1="297.365" y1="118.368" x2="285.099" y2="116.205" stroke="#9E77ED" stroke-width="2"/>
<line x1="35.0877" y1="143.51" x2="39.3478" y2="131.805" stroke="#9E77ED" stroke-width="2"/>
<line x1="61.7121" y1="142.962" x2="67.9399" y2="132.175" stroke="#9E77ED" stroke-width="2"/>
<line x1="88.5035" y1="142.43" x2="96.5099" y2="132.889" stroke="#9E77ED" stroke-width="2"/>
<line x1="115.502" y1="141.529" x2="125.043" y2="133.523" stroke="#9E77ED" stroke-width="2"/>
<line x1="142.734" y1="140.261" x2="153.521" y2="134.033" stroke="#9E77ED" stroke-width="2"/>
<line x1="170.228" y1="139.409" x2="181.933" y2="135.149" stroke="#9E77ED" stroke-width="2"/>
<line x1="198.002" y1="138.196" x2="210.269" y2="136.033" stroke="#9E77ED" stroke-width="2"/>
<line x1="8.58941" y1="144.068" x2="10.7523" y2="131.801" stroke="#9E77ED" stroke-width="2"/>
<line x1="241.629" y1="139.013" x2="229.173" y2="139.013" stroke="#9E77ED" stroke-width="2"/>
<line x1="269.338" y1="140.165" x2="257.072" y2="138.003" stroke="#9E77ED" stroke-width="2"/>
<line x1="296.775" y1="141.288" x2="285.071" y2="137.028" stroke="#9E77ED" stroke-width="2"/>
<line x1="7.06421" y1="165.307" x2="11.3243" y2="153.603" stroke="#9E77ED" stroke-width="2"/>
<line x1="33.6848" y1="164.76" x2="39.9126" y2="153.973" stroke="#9E77ED" stroke-width="2"/>
<line x1="60.4761" y1="164.227" x2="68.4825" y2="154.686" stroke="#9E77ED" stroke-width="2"/>
<line x1="87.4744" y1="163.326" x2="97.016" y2="155.319" stroke="#9E77ED" stroke-width="2"/>
<line x1="114.711" y1="162.058" x2="125.498" y2="155.83" stroke="#9E77ED" stroke-width="2"/>
<line x1="142.205" y1="161.206" x2="153.909" y2="156.946" stroke="#9E77ED" stroke-width="2"/>
<line x1="169.979" y1="159.994" x2="182.245" y2="157.831" stroke="#9E77ED" stroke-width="2"/>
<line x1="295.93" y1="163.79" x2="285.143" y2="157.562" stroke="#9E77ED" stroke-width="2"/>
<line x1="213.605" y1="160.811" x2="201.15" y2="160.811" stroke="#9E77ED" stroke-width="2"/>
<line x1="241.315" y1="161.963" x2="229.048" y2="159.8" stroke="#9E77ED" stroke-width="2"/>
<line x1="268.748" y1="163.085" x2="257.043" y2="158.825" stroke="#9E77ED" stroke-width="2"/>
<line x1="5.66132" y1="186.558" x2="11.8892" y2="175.771" stroke="#9E77ED" stroke-width="2"/>
<line x1="32.4527" y1="186.025" x2="40.4591" y2="176.484" stroke="#9E77ED" stroke-width="2"/>
<line x1="59.451" y1="185.124" x2="68.9926" y2="177.117" stroke="#9E77ED" stroke-width="2"/>
<line x1="86.6836" y1="183.856" x2="97.4705" y2="177.628" stroke="#9E77ED" stroke-width="2"/>
<line x1="114.178" y1="183.004" x2="125.882" y2="178.744" stroke="#9E77ED" stroke-width="2"/>
<line x1="141.951" y1="181.791" x2="154.218" y2="179.628" stroke="#9E77ED" stroke-width="2"/>
<line x1="267.902" y1="185.588" x2="257.115" y2="179.36" stroke="#9E77ED" stroke-width="2"/>
<line x1="294.853" y1="186.656" x2="285.312" y2="178.649" stroke="#9E77ED" stroke-width="2"/>
<line x1="185.578" y1="182.607" x2="173.122" y2="182.607" stroke="#9E77ED" stroke-width="2"/>
<line x1="213.287" y1="183.76" x2="201.021" y2="181.597" stroke="#9E77ED" stroke-width="2"/>
<line x1="240.724" y1="184.883" x2="229.02" y2="180.623" stroke="#9E77ED" stroke-width="2"/>
<line x1="4.42536" y1="207.823" x2="12.4317" y2="198.281" stroke="#9E77ED" stroke-width="2"/>
<line x1="31.4236" y1="206.92" x2="40.9652" y2="198.914" stroke="#9E77ED" stroke-width="2"/>
<line x1="58.6602" y1="205.654" x2="69.4471" y2="199.426" stroke="#9E77ED" stroke-width="2"/>
<line x1="86.1541" y1="204.802" x2="97.8586" y2="200.541" stroke="#9E77ED" stroke-width="2"/>
<line x1="113.928" y1="203.588" x2="126.194" y2="201.426" stroke="#9E77ED" stroke-width="2"/>
<line x1="239.879" y1="207.386" x2="229.092" y2="201.158" stroke="#9E77ED" stroke-width="2"/>
<line x1="266.826" y1="208.453" x2="257.284" y2="200.446" stroke="#9E77ED" stroke-width="2"/>
<line x1="293.578" y1="209.109" x2="285.571" y2="199.567" stroke="#9E77ED" stroke-width="2"/>
<line x1="157.555" y1="204.405" x2="145.099" y2="204.405" stroke="#9E77ED" stroke-width="2"/>
<line x1="185.264" y1="205.558" x2="172.997" y2="203.395" stroke="#9E77ED" stroke-width="2"/>
<line x1="212.701" y1="206.681" x2="200.996" y2="202.421" stroke="#9E77ED" stroke-width="2"/>
<line x1="3.40018" y1="228.718" x2="12.9418" y2="220.712" stroke="#9E77ED" stroke-width="2"/>
<line x1="30.6328" y1="227.45" x2="41.4198" y2="221.223" stroke="#9E77ED" stroke-width="2"/>
<line x1="58.1267" y1="226.598" x2="69.8313" y2="222.338" stroke="#9E77ED" stroke-width="2"/>
<line x1="85.9006" y1="225.385" x2="98.167" y2="223.222" stroke="#9E77ED" stroke-width="2"/>
<line x1="211.852" y1="229.182" x2="201.065" y2="222.955" stroke="#9E77ED" stroke-width="2"/>
<line x1="238.803" y1="230.25" x2="229.261" y2="222.244" stroke="#9E77ED" stroke-width="2"/>
<line x1="265.55" y1="230.905" x2="257.544" y2="221.364" stroke="#9E77ED" stroke-width="2"/>
<line x1="292.146" y1="231.152" x2="285.918" y2="220.365" stroke="#9E77ED" stroke-width="2"/>
<line x1="129.527" y1="226.203" x2="117.072" y2="226.203" stroke="#9E77ED" stroke-width="2"/>
<line x1="157.237" y1="227.355" x2="144.97" y2="225.192" stroke="#9E77ED" stroke-width="2"/>
<line x1="184.674" y1="228.478" x2="172.969" y2="224.218" stroke="#9E77ED" stroke-width="2"/>
<line x1="2.60938" y1="249.248" x2="13.3963" y2="243.02" stroke="#9E77ED" stroke-width="2"/>
<line x1="30.1033" y1="248.396" x2="41.8078" y2="244.136" stroke="#9E77ED" stroke-width="2"/>
<line x1="57.8771" y1="247.183" x2="70.1436" y2="245.02" stroke="#9E77ED" stroke-width="2"/>
<line x1="183.828" y1="250.98" x2="173.041" y2="244.752" stroke="#9E77ED" stroke-width="2"/>
<line x1="210.775" y1="252.048" x2="201.234" y2="244.042" stroke="#9E77ED" stroke-width="2"/>
<line x1="237.527" y1="252.703" x2="229.521" y2="243.162" stroke="#9E77ED" stroke-width="2"/>
<line x1="264.118" y1="252.949" x2="257.891" y2="242.162" stroke="#9E77ED" stroke-width="2"/>
<line x1="290.595" y1="253.181" x2="286.335" y2="241.476" stroke="#9E77ED" stroke-width="2"/>
<line x1="101.504" y1="248" x2="89.0482" y2="248" stroke="#9E77ED" stroke-width="2"/>
<line x1="129.213" y1="249.153" x2="116.947" y2="246.99" stroke="#9E77ED" stroke-width="2"/>
<line x1="156.65" y1="250.276" x2="144.946" y2="246.016" stroke="#9E77ED" stroke-width="2"/>
<line x1="2.07595" y1="270.193" x2="13.7805" y2="265.933" stroke="#9E77ED" stroke-width="2"/>
<line x1="29.8498" y1="268.981" x2="42.1163" y2="266.818" stroke="#9E77ED" stroke-width="2"/>
<line x1="155.801" y1="272.778" x2="145.014" y2="266.55" stroke="#9E77ED" stroke-width="2"/>
<line x1="182.752" y1="273.845" x2="173.21" y2="265.839" stroke="#9E77ED" stroke-width="2"/>
<line x1="209.503" y1="274.5" x2="201.497" y2="264.959" stroke="#9E77ED" stroke-width="2"/>
<line x1="236.095" y1="274.747" x2="229.867" y2="263.96" stroke="#9E77ED" stroke-width="2"/>
<line x1="262.568" y1="274.979" x2="258.308" y2="263.274" stroke="#9E77ED" stroke-width="2"/>
<line x1="288.976" y1="275.199" x2="286.813" y2="262.933" stroke="#9E77ED" stroke-width="2"/>
<line x1="73.4766" y1="269.798" x2="61.0209" y2="269.798" stroke="#9E77ED" stroke-width="2"/>
<line x1="101.186" y1="270.951" x2="88.9193" y2="268.788" stroke="#9E77ED" stroke-width="2"/>
<line x1="128.623" y1="272.073" x2="116.918" y2="267.812" stroke="#9E77ED" stroke-width="2"/>
<line x1="1.82635" y1="290.778" x2="14.0928" y2="288.615" stroke="#9E77ED" stroke-width="2"/>
<line x1="127.777" y1="294.575" x2="116.99" y2="288.347" stroke="#9E77ED" stroke-width="2"/>
<line x1="154.724" y1="295.643" x2="145.183" y2="287.637" stroke="#9E77ED" stroke-width="2"/>
<line x1="181.476" y1="296.298" x2="173.47" y2="286.756" stroke="#9E77ED" stroke-width="2"/>
<line x1="208.068" y1="296.545" x2="201.84" y2="285.758" stroke="#9E77ED" stroke-width="2"/>
<line x1="234.545" y1="296.776" x2="230.285" y2="285.071" stroke="#9E77ED" stroke-width="2"/>
<line x1="260.953" y1="296.997" x2="258.79" y2="284.73" stroke="#9E77ED" stroke-width="2"/>
<line x1="287.34" y1="296.823" x2="287.34" y2="284.368" stroke="#9E77ED" stroke-width="2"/>
<line x1="45.4531" y1="291.595" x2="32.9974" y2="291.595" stroke="#9E77ED" stroke-width="2"/>
<line x1="73.1623" y1="292.748" x2="60.8958" y2="290.585" stroke="#9E77ED" stroke-width="2"/>
<line x1="100.599" y1="293.87" x2="88.8949" y2="289.61" stroke="#9E77ED" stroke-width="2"/>
<line x1="99.75" y1="316.373" x2="88.9631" y2="310.145" stroke="#9E77ED" stroke-width="2"/>
<line x1="126.701" y1="317.44" x2="117.159" y2="309.434" stroke="#9E77ED" stroke-width="2"/>
<line x1="153.453" y1="318.096" x2="145.446" y2="308.554" stroke="#9E77ED" stroke-width="2"/>
<line x1="180.044" y1="318.342" x2="173.816" y2="307.555" stroke="#9E77ED" stroke-width="2"/>
<line x1="206.517" y1="318.573" x2="202.257" y2="306.869" stroke="#9E77ED" stroke-width="2"/>
<line x1="232.925" y1="318.794" x2="230.762" y2="306.527" stroke="#9E77ED" stroke-width="2"/>
<line x1="259.312" y1="318.62" x2="259.312" y2="306.164" stroke="#9E77ED" stroke-width="2"/>
<line x1="285.734" y1="318.446" x2="287.897" y2="306.18" stroke="#9E77ED" stroke-width="2"/>
<line x1="17.4258" y1="313.393" x2="4.97009" y2="313.393" stroke="#9E77ED" stroke-width="2"/>
<line x1="45.1349" y1="314.545" x2="32.8685" y2="312.382" stroke="#9E77ED" stroke-width="2"/>
<line x1="72.572" y1="315.668" x2="60.8675" y2="311.408" stroke="#9E77ED" stroke-width="2"/>
<line x1="284.205" y1="339.686" x2="288.465" y2="327.982" stroke="#9E77ED" stroke-width="2"/>
<line x1="71.7266" y1="338.17" x2="60.9396" y2="331.942" stroke="#9E77ED" stroke-width="2"/>
<line x1="98.6736" y1="339.238" x2="89.132" y2="331.231" stroke="#9E77ED" stroke-width="2"/>
<line x1="125.425" y1="339.893" x2="117.419" y2="330.351" stroke="#9E77ED" stroke-width="2"/>
<line x1="152.017" y1="340.14" x2="145.789" y2="329.353" stroke="#9E77ED" stroke-width="2"/>
<line x1="178.494" y1="340.37" x2="174.234" y2="328.666" stroke="#9E77ED" stroke-width="2"/>
<line x1="204.902" y1="340.592" x2="202.739" y2="328.325" stroke="#9E77ED" stroke-width="2"/>
<line x1="231.289" y1="340.418" x2="231.289" y2="327.962" stroke="#9E77ED" stroke-width="2"/>
<line x1="257.707" y1="340.244" x2="259.87" y2="327.978" stroke="#9E77ED" stroke-width="2"/>
<line x1="17.1115" y1="336.342" x2="4.84504" y2="334.179" stroke="#9E77ED" stroke-width="2"/>
<line x1="44.5486" y1="337.465" x2="32.8441" y2="333.205" stroke="#9E77ED" stroke-width="2"/>
<line x1="256.181" y1="361.484" x2="260.441" y2="349.78" stroke="#9E77ED" stroke-width="2"/>
<line x1="282.802" y1="360.937" x2="289.03" y2="350.15" stroke="#9E77ED" stroke-width="2"/>
<line x1="43.6992" y1="359.968" x2="32.9123" y2="353.74" stroke="#9E77ED" stroke-width="2"/>
<line x1="70.6502" y1="361.036" x2="61.1086" y2="353.029" stroke="#9E77ED" stroke-width="2"/>
<line x1="97.4019" y1="361.691" x2="89.3956" y2="352.149" stroke="#9E77ED" stroke-width="2"/>
<line x1="123.993" y1="361.937" x2="117.766" y2="351.15" stroke="#9E77ED" stroke-width="2"/>
<line x1="150.467" y1="362.168" x2="146.206" y2="350.464" stroke="#9E77ED" stroke-width="2"/>
<line x1="176.875" y1="362.389" x2="174.712" y2="350.123" stroke="#9E77ED" stroke-width="2"/>
<line x1="203.262" y1="362.216" x2="203.262" y2="349.76" stroke="#9E77ED" stroke-width="2"/>
<line x1="229.683" y1="362.042" x2="231.846" y2="349.776" stroke="#9E77ED" stroke-width="2"/>
<line x1="16.5213" y1="359.263" x2="4.81674" y2="355.003" stroke="#9E77ED" stroke-width="2"/>
<line x1="228.154" y1="383.282" x2="232.414" y2="371.577" stroke="#9E77ED" stroke-width="2"/>
<line x1="254.779" y1="382.734" x2="261.006" y2="371.947" stroke="#9E77ED" stroke-width="2"/>
<line x1="281.57" y1="382.202" x2="289.576" y2="372.66" stroke="#9E77ED" stroke-width="2"/>
<line x1="15.6758" y1="381.765" x2="4.88883" y2="375.538" stroke="#9E77ED" stroke-width="2"/>
<line x1="42.6228" y1="382.832" x2="33.0812" y2="374.826" stroke="#9E77ED" stroke-width="2"/>
<line x1="69.3746" y1="383.488" x2="61.3682" y2="373.946" stroke="#9E77ED" stroke-width="2"/>
<line x1="95.966" y1="383.734" x2="89.7382" y2="372.947" stroke="#9E77ED" stroke-width="2"/>
<line x1="122.443" y1="383.966" x2="118.183" y2="372.262" stroke="#9E77ED" stroke-width="2"/>
<line x1="148.851" y1="384.186" x2="146.688" y2="371.92" stroke="#9E77ED" stroke-width="2"/>
<line x1="175.238" y1="384.013" x2="175.238" y2="371.557" stroke="#9E77ED" stroke-width="2"/>
<line x1="201.656" y1="383.839" x2="203.819" y2="371.573" stroke="#9E77ED" stroke-width="2"/>
<line x1="200.131" y1="405.079" x2="204.391" y2="393.374" stroke="#9E77ED" stroke-width="2"/>
<line x1="226.751" y1="404.532" x2="232.979" y2="393.745" stroke="#9E77ED" stroke-width="2"/>
<line x1="253.543" y1="404" x2="261.549" y2="394.458" stroke="#9E77ED" stroke-width="2"/>
<line x1="280.541" y1="403.098" x2="290.082" y2="395.092" stroke="#9E77ED" stroke-width="2"/>
<line x1="14.5994" y1="404.63" x2="5.05778" y2="396.624" stroke="#9E77ED" stroke-width="2"/>
<line x1="41.3511" y1="405.285" x2="33.3448" y2="395.744" stroke="#9E77ED" stroke-width="2"/>
<line x1="67.9426" y1="405.532" x2="61.7147" y2="394.745" stroke="#9E77ED" stroke-width="2"/>
<line x1="94.4158" y1="405.763" x2="90.1557" y2="394.058" stroke="#9E77ED" stroke-width="2"/>
<line x1="120.824" y1="405.984" x2="118.661" y2="393.718" stroke="#9E77ED" stroke-width="2"/>
<line x1="147.211" y1="405.811" x2="147.211" y2="393.355" stroke="#9E77ED" stroke-width="2"/>
<line x1="173.632" y1="405.637" x2="175.795" y2="393.37" stroke="#9E77ED" stroke-width="2"/>
</g>
</svg>
</section>
<!-- Features section -->
<section id="features-section" class="features-section">
<div id="features-container" class="features-container">
<div id="feature-content" class="feature-content">
<div id="feature-item" class="feature-item">
<div id="feature-icon" class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div id="feature-text-div" class="feature-text-div">
<p class="feature-text-xl">Share team inboxes</p>
<p class="feature-text-md">Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.</p>
</div>
</div>
<div id="feature-item" class="feature-item">
<div id="feature-icon" class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div id="feature-text-div" class="feature-text-div">
<p class="feature-text-xl">Deliver instant answers</p>
<p class="feature-text-md">An all-in-one customer service platform that helps you balance everything your customers need to be happy.</p>
</div>
</div>
<div id="feature-item" class="feature-item">
<div id="feature-icon" class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18 20V10M12 20V4M6 20V14" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div id="feature-text-div" class="feature-text-div">
<p class="feature-text-xl">Manage your team with reports</p>
<p class="feature-text-md">Measure what matters with Untitled’s easy-to-use reports. You can filter, export, and drilldown on the data in a couple clicks.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Integrations section -->
<section id="integrations-section" class="integrations-section">
<div id="integrations-container-1" class="integrations-container-1">
<div id="integrations-heading-container" class="integrations-heading-container">
<div id="integrations-heading-badge" class="integrations-heading-badge">
<div id="integrations-badge" class="integrations-badge">Integrations</div>
<p>Get more value from your tools</p>
</div>
<p class="integrations-heading-badge-desc">Connect your tools, connect your teams. With over 100 apps already available in our directory, your team’s favourite tools are just a click away.</p>
</div>
</div>
<div id="integrations-container-2" class="integrations-container-2">
<div id="integrations-container-content-2" class="integrations-container-content-2">
<div id="integrations-item" class="integrations-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.432 58.4356L4.55327 49.8663C2.89826 47.8045 2 45.2692 2 42.6597V11.63C2 7.72128 5.12717 4.47794 9.16143 4.2025L41.0643 2.02437C43.382 1.86612 45.6856 2.48218 47.5895 3.76941L58.7985 11.3478C60.8049 12.7044 62 14.922 62 17.2885V52.5663C62 56.3915 58.9251 59.5586 54.9752 59.8017L19.5667 61.9813C16.4147 62.1754 13.368 60.8474 11.432 58.4356Z" fill="white"/>
<path d="M22.4963 27.1574V26.7512C22.4963 25.7214 23.3211 24.8673 24.384 24.7964L32.1267 24.2794L42.8342 40.047V26.2083L40.0781 25.8409V25.6479C40.0781 24.6061 40.9218 23.7464 41.9983 23.6912L49.0433 23.3303V24.3442C49.0433 24.8201 48.6894 25.2272 48.2043 25.3092L46.509 25.596V48.0074L44.3813 48.7391C42.6038 49.3504 40.6249 48.696 39.6073 47.1605L29.2122 31.4744V46.4459L32.4118 47.0583L32.3672 47.355C32.2276 48.2847 31.425 48.9877 30.4541 49.0309L22.4963 49.3851C22.3911 48.3855 23.1403 47.4911 24.1739 47.3825L25.2207 47.2726V27.3105L22.4963 27.1574Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.3499 5.93356L9.44706 8.1117C7.5361 8.24217 6.05481 9.77849 6.05481 11.63V42.6598C6.05481 44.3994 6.65365 46.0896 7.75699 47.4641L14.6357 56.0334C15.7479 57.4189 17.4981 58.1818 19.3088 58.0703L54.7174 55.8907C56.5322 55.779 57.945 54.3239 57.945 52.5663V17.2885C57.945 16.2012 57.3959 15.1823 56.474 14.559L45.265 6.98059C44.1227 6.20825 42.7405 5.83862 41.3499 5.93356ZM11.0291 12.114C10.5853 11.7855 10.7965 11.1011 11.3539 11.0611L41.5645 8.89422C42.5271 8.82518 43.4835 9.09024 44.262 9.64176L50.3235 13.9363C50.5536 14.0993 50.4457 14.4513 50.1608 14.4668L18.1679 16.2067C17.1997 16.2594 16.244 15.9749 15.4741 15.405L11.0291 12.114ZM16.6673 21.6614C16.6673 20.6221 17.5069 19.7635 18.5807 19.7051L52.4062 17.8629C53.4527 17.8059 54.3336 18.6107 54.3336 19.6236V50.1705C54.3336 51.208 53.4969 52.0656 52.4253 52.1266L18.8139 54.0391C17.6493 54.1053 16.6673 53.2104 16.6673 52.083V21.6614Z" fill="black"/>
</svg>
<div id="integrations-item-desc" class="integrations-item-desc">
<div id="integrations-item-desc-text-container" class="integrations-item-desc-text-container">
<p class="integrations-item-desc-heading">Notion integration</p>
<p class="integrations-item-desc-desc">Work faster and smarter by integrating directly with Notion, right in the app.</p>
</div>
<button class="integrations-button">
View integration
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right">
<path id="Icon" d="M4.66666 9.99996H16.3333M16.3333 9.99996L10.5 4.16663M16.3333 9.99996L10.5 15.8333" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</button>
</div>
</div>
<div id="integrations-item" class="integrations-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" fill="none">
<path d="M47.0004 23.9995C49.7616 23.9995 52 21.7611 52 18.9999C52 16.2388 49.7614 14.0004 47.0002 14.0004C44.2388 14.0004 42 16.2389 42 19.0004V23.9995H47.0004ZM33 23.9995C35.7614 23.9995 38 21.7609 38 18.9995V5.00037C38 2.23894 35.7614 0.000366211 33 0.000366211C30.2386 0.000366211 28 2.23894 28 5.00037V18.9995C28 21.7609 30.2386 23.9995 33 23.9995Z" fill="#2EB67D"/>
<path d="M4.99957 28.0004C2.23839 28.0004 1.90735e-06 30.2388 1.90735e-06 32.9999C1.90735e-06 35.7611 2.2386 37.9995 4.99979 37.9995C7.76121 37.9995 10 35.7609 10 32.9995V28.0004H4.99957ZM19 28.0004C16.2386 28.0004 14 30.2389 14 33.0004V46.9995C14 49.7609 16.2386 51.9995 19 51.9995C21.7614 51.9995 24 49.7609 24 46.9995V33.0004C24 30.2389 21.7614 28.0004 19 28.0004Z" fill="#E01E5A"/>
<path d="M28.0004 47.0004C28.0004 49.7616 30.2388 52 32.9999 52C35.7611 52 37.9995 49.7614 37.9995 47.0002C37.9995 44.2388 35.7609 42 32.9995 42L28.0004 42L28.0004 47.0004ZM28.0004 33C28.0004 35.7614 30.2389 38 33.0004 38L46.9995 38C49.7609 38 51.9995 35.7614 51.9995 33C51.9995 30.2386 49.7609 28 46.9995 28L33.0004 28C30.2389 28 28.0004 30.2386 28.0004 33Z" fill="#ECB22E"/>
<path d="M23.9995 4.99957C23.9995 2.23839 21.7611 2.85854e-06 18.9999 2.73785e-06C16.2388 2.61715e-06 14.0004 2.2386 14.0004 4.99979C14.0004 7.76121 16.2389 10 19.0004 10L23.9995 10L23.9995 4.99957ZM23.9995 19C23.9995 16.2386 21.7609 14 18.9995 14L5.00037 14C2.23894 14 0.00036655 16.2386 0.000366429 19C0.000366309 21.7614 2.23894 24 5.00037 24L18.9995 24C21.7609 24 23.9995 21.7614 23.9995 19Z" fill="#36C5F0"/>
</svg>
<div id="integrations-item-desc" class="integrations-item-desc">
<div id="integrations-item-desc-text-container" class="integrations-item-desc-text-container">
<p class="integrations-item-desc-heading">Slack integration</p>
<p class="integrations-item-desc-desc">Work faster and smarter by integrating directly with Slack, right in the app.</p>
</div>
<button class="integrations-button">
View integration
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right">
<path id="Icon" d="M4.66666 9.99996H16.3333M16.3333 9.99996L10.5 4.16663M16.3333 9.99996L10.5 15.8333" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</button>
</div>
</div>
<div id="integrations-item" class="integrations-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 40" fill="none">
<path d="M22.0041 12.9019L15.0823 0.686431C15.3121 0.452438 15.5765 0.298959 15.8409 0.195801C13.7997 0.867587 12.8632 3.15971 12.8632 3.15971L0.21815 25.4696C0.0402254 26.169 -0.00920239 26.8005 0.0130382 27.3566H13.8146L22.0041 12.9019Z" fill="#34A853"/>
<path d="M22.0039 12.9019L30.1934 27.3566H43.9949C44.0172 26.8005 43.9677 26.169 43.7898 25.4696L31.1448 3.15971C31.1448 3.15971 30.2057 0.867587 28.167 0.195801C28.429 0.298959 28.6959 0.452438 28.9257 0.686431L22.0039 12.9019Z" fill="#FBBC05"/>
<path d="M22.0039 12.9024L28.9257 0.686923C28.6959 0.45293 28.429 0.299451 28.167 0.196292C27.8656 0.0981663 27.5418 0.0327491 27.1909 0.0151367H26.8252H17.1827H16.8169C16.4685 0.030233 16.1423 0.0956502 15.8408 0.196292C15.5789 0.299451 15.312 0.45293 15.0822 0.686923L22.0039 12.9024Z" fill="#188038"/>
<path d="M13.8169 27.3567L6.97424 39.4337C6.97424 39.4337 6.74689 39.323 6.43799 39.0941C7.40916 39.8413 8.35315 39.9999 8.35315 39.9999H35.2272C36.7099 39.9999 37.0188 39.4337 37.0188 39.4337C37.0238 39.4312 37.0262 39.4287 37.0312 39.4262L30.1934 27.3567H13.8169Z" fill="#4285F4"/>
<path d="M13.8174 27.3567H0.0158691C0.0850621 28.9972 0.796762 29.9558 0.796762 29.9558L1.31571 30.8565C1.35278 30.9094 1.37502 30.9396 1.37502 30.9396L2.50435 32.9222L5.03977 37.3354C5.11391 37.514 5.2004 37.6775 5.29184 37.8335C5.32643 37.8864 5.35855 37.9442 5.39562 37.9946C5.40551 38.0097 5.41539 38.0248 5.42527 38.0399C5.73911 38.4827 6.09003 38.8249 6.44093 39.0941C6.74983 39.3256 6.97718 39.4337 6.97718 39.4337L13.8174 27.3567Z" fill="#1967D2"/>
<path d="M30.1934 27.3567H43.9949C43.9257 28.9972 43.214 29.9558 43.214 29.9558L42.695 30.8565C42.658 30.9094 42.6357 30.9396 42.6357 30.9396L41.5064 32.9222L38.971 37.3354C38.8968 37.514 38.8104 37.6775 38.7189 37.8335C38.6843 37.8864 38.6522 37.9442 38.6151 37.9946C38.6052 38.0097 38.5954 38.0248 38.5855 38.0399C38.2716 38.4827 37.9207 38.8249 37.5698 39.0941C37.2609 39.3256 37.0336 39.4337 37.0336 39.4337L30.1934 27.3567Z" fill="#EA4335"/>
</svg>
<div id="integrations-item-desc" class="integrations-item-desc">
<div id="integrations-item-desc-text-container" class="integrations-item-desc-text-container">
<p class="integrations-item-desc-heading">Google Drive integration</p>
<p class="integrations-item-desc-desc">Work faster and smarter by integrating directly with Google Drive, right in the app.</p>
</div>
<button class="integrations-button">
View integration
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right">
<path id="Icon" d="M4.66666 9.99996H16.3333M16.3333 9.99996L10.5 4.16663M16.3333 9.99996L10.5 15.8333" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</button>
</div>
</div>
</div>
<div id="integrations-container-content-2" class="integrations-container-content-2">
<div id="integrations-item" class="integrations-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
<circle cx="32" cy="32" r="28" fill="#3290E8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M44 16H20C17.8194 15.9966 16.0038 17.8234 16 20V44C16 46.2089 17.7914 48 20 48H44C46.1806 48.0034 47.9962 46.1766 48 44V20C48 17.7911 46.2095 16 44 16ZM36.2658 21.8667C36.2658 21.2782 36.7442 20.8 37.3333 20.8C37.9225 20.8 38.4 21.2782 38.4 21.8667V36.1182C38.4 36.7067 37.9216 37.1849 37.3333 37.1849C36.7686 37.1854 36.2681 36.6848 36.2667 36.1182L36.2658 21.8667ZM30.9324 21.3271C30.9324 20.7378 31.4109 20.2604 32 20.2604C32.5891 20.2604 33.0676 20.7378 33.0676 21.3271V36.7938C33.0676 37.3831 32.5891 37.8604 32 37.8604C31.4353 37.8609 30.9347 37.3604 30.9333 36.7938L30.9324 21.3271ZM25.6 21.8667C25.6 21.2782 26.0784 20.8 26.6667 20.8C27.2558 20.8 27.7333 21.2782 27.7333 21.8667V36.1182C27.7333 36.7067 27.2558 37.1849 26.6667 37.1849C26.102 37.1854 25.6014 36.6848 25.6 36.1182V21.8667ZM20.2667 24C20.2667 23.4107 20.7442 22.9333 21.3333 22.9333C21.9225 22.9333 22.4 23.4107 22.4 24V33.5938C22.4 34.1831 21.9216 34.6604 21.3333 34.6604C20.7518 34.6614 20.2676 34.1742 20.2667 33.5938V24ZM43.3612 40.2702C43.1973 40.4124 39.2452 43.7271 32 43.7271C24.7548 43.7271 20.8053 40.4116 20.6388 40.2693C20.1981 39.8917 20.1459 39.2066 20.5236 38.7662C20.8918 38.3376 21.5944 38.2827 22.0244 38.6489C22.0864 38.7013 25.6151 41.5938 31.9991 41.5938C38.4629 41.5938 41.9375 38.68 41.9712 38.6516C42.4006 38.2826 43.1058 38.3364 43.4746 38.7662C43.8549 39.2058 43.8034 39.8928 43.3612 40.2702ZM43.7333 33.5947C43.7333 34.1831 43.2549 34.6613 42.6667 34.6613C42.0851 34.6623 41.601 34.1751 41.6 33.5947V24C41.6 23.4107 42.0775 22.9333 42.6658 22.9333C43.2549 22.9333 43.7333 23.4107 43.7333 24V33.5947Z" fill="white"/>
</svg>
<div id="integrations-item-desc" class="integrations-item-desc">
<div id="integrations-item-desc-text-container" class="integrations-item-desc-text-container">
<p class="integrations-item-desc-heading">Intercom integration</p>
<p class="integrations-item-desc-desc">Work faster and smarter by integrating directly with Intercom, right in the app.</p>
</div>
<button class="integrations-button">
View integration
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right">
<path id="Icon" d="M4.66666 9.99996H16.3333M16.3333 9.99996L10.5 4.16663M16.3333 9.99996L10.5 15.8333" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</button>
</div>
</div>
<div id="integrations-item" class="integrations-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" fill="none">
<path d="M55.3295 26.4329L30.415 2.3358L28 0L9.24537 18.1394L0.67052 26.4329C-0.223507 27.2987 -0.223507 28.7013 0.67052 29.5671L17.8049 46.1394L28 56L46.7546 37.8606L47.045 37.5797L55.3295 29.5671C56.2235 28.7013 56.2235 27.2987 55.3295 26.4329ZM28 36.2788L19.4404 28L28 19.7212L36.5596 28L28 36.2788Z" fill="#2684FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0001 19.7212C22.396 14.3003 22.3686 5.52001 27.939 0.0665283L9.20728 18.1763L19.4023 28.037L28.0001 19.7212Z" fill="url(#paint0_linear_201_1418)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.5825 27.9778L28 36.2787C30.7049 38.8934 32.2247 42.4406 32.2247 46.1393C32.2247 49.8381 30.7049 53.3853 28 56L46.7776 37.8384L36.5825 27.9778Z" fill="url(#paint1_linear_201_1418)"/>
<defs>
<linearGradient id="paint0_linear_201_1418" x1="26.4716" y1="11.3464" x2="12.1932" y2="17.5806" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC"/>
<stop offset="1" stop-color="#2684FF"/>
</linearGradient>
<linearGradient id="paint1_linear_201_1418" x1="29.6355" y1="44.5575" x2="43.8883" y2="38.3675" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC"/>
<stop offset="1" stop-color="#2684FF"/>
</linearGradient>
</defs>
</svg>
<div id="integrations-item-desc" class="integrations-item-desc">
<div id="integrations-item-desc-text-container" class="integrations-item-desc-text-container">
<p class="integrations-item-desc-heading">Jira integration</p>
<p class="integrations-item-desc-desc">Work faster and smarter by integrating directly with Jira, right in the app.</p>
</div>
<button class="integrations-button">
View integration
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right">
<path id="Icon" d="M4.66666 9.99996H16.3333M16.3333 9.99996L10.5 4.16663M16.3333 9.99996L10.5 15.8333" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</button>
</div>
</div>
<div id="integrations-item" class="integrations-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
<g filter="url(#filter0_dd_201_1432)">
<circle cx="32" cy="32" r="28" fill="#0F287F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 16L12 22L22 28L12 34L22 40L32 34L42 40L52 34L42 28L52 22L42 16L32 22L22 16ZM32 22L42 28L32 34L22 28L32 22Z" fill="#DAF8FE"/>
<path d="M22 44L32 38L42 44L32 50L22 44Z" fill="#DAF8FE"/>
</g>
<defs>
<filter id="filter0_dd_201_1432" x="-3" y="-2" width="70" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_201_1432"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_201_1432" result="effect2_dropShadow_201_1432"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_201_1432" result="shape"/>
</filter>
</defs>
</svg>
<div id="integrations-item-desc" class="integrations-item-desc">
<div id="integrations-item-desc-text-container" class="integrations-item-desc-text-container">
<p class="integrations-item-desc-heading">Dropbox integration</p>
<p class="integrations-item-desc-desc">Work faster and smarter by integrating directly with Dropbox, right in the app.</p>
</div>
<button class="integrations-button">
View integration
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right">
<path id="Icon" d="M4.66666 9.99996H16.3333M16.3333 9.99996L10.5 4.16663M16.3333 9.99996L10.5 15.8333" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Divider -->
<hr class="solid">
<!-- Metrics section -->
<section id="metrics-section" class="metrics-section">
<div id="metrics-container" class="metrics-container">
<div id="metrics-content" class="metrics-content">
<div id="metrics-heading" class="metrics-heading">
<p>Unleash the full power of data</p>
<p>Everything you need to convert, engage, and retain more users.</p>
</div>
</div>
</div>
</div>
<div id="metrics-container" class="metrics-container">
<div id="metrics-items" class="metrics-items">
<div id="metrics-item-1" class="metrics-item">
<p>400+</p>
<p>Projects completed</p>
</div>
<div id="metrics-item-2" class="metrics-item">
<p>600%</p>
<p>Return on investment</p>
</div>
<div id="metrics-item-3" class="metrics-item">
<p>10k</p>
<p>Global downloads</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features 2 section -->
<section id="features-2-section" class="features-2-section">
<div id="features-2-container-1" class="features-2-container-1">
<div id="features-2-content" class="features-2-content">
<div id="features-2-heading-container" class="features-2-heading-container">
<div id="features-2-heading-badge" class="features-2-heading-badge">
<div id="features-2-badge" class="features-2-badge">Features</div>
<p>Cutting-edge features for advanced analytics</p>
</div>
<p class="features-2-heading-badge-desc">Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. Trusted by over 4,000 startups.</p>
</div>
</div>
</div>
<div id="features-2-container-2" class="features-2-container-2">
<div id="features-2-content-2" class="features-2-content-2">
<img alt="iphone-mockup-image" src="public/images/iphone-mockup.png" />
<img alt="screen-mockup-image" src="public/images/screen-mockup.png" />
</div>
<div id="features-2-content-3" class="features-2-content-3">
<div id="feature-item" class="feature-item">
<div id="feature-icon" class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div id="feature-text-div" class="feature-text-div">
<p class="feature-text-xl">Share team inboxes</p>
<p class="feature-text-md">Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.</p>
</div>
</div>
<div id="feature-item" class="feature-item">
<div id="feature-icon" class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>