-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1491 lines (1424 loc) · 118 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>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4HN3B9YDY0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4HN3B9YDY0');
</script>
<script defer src="https://cloud.umami.is/script.js" data-website-id="02fc979c-1920-469b-807c-d7a0f1b6e8d7"></script>
<script defer data-domain="darkosicon.com" src="https://plausible.io/js/script.js"></script>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "n75t3b1ohm");
</script>
<script async src="https://tally.so/widgets/embed.js"></script>
<meta charset="UTF-8">
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DarkOS Icon Pack</title>
<meta name="description"content="A beautiful icon pack made exclusively for Mac and iPhone.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://darkosicon.com">
<meta property="og:type" content="website">
<meta property="og:title" content="DarkOS Icon Pack">
<meta property="og:description" content="A beautiful icon pack made exclusively for Mac and iPhone.">
<meta property="og:image" content="https://darkosicon.com/images/og.jpg">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="darkosicon.com">
<meta property="twitter:url" content="https://darkosicon.com">
<meta name="twitter:title" content="DarkOS Icon Pack">
<meta name="twitter:description" content="A beautiful icon pack made exclusively for Mac and iPhone.">
<meta name="twitter:image" content="https://darkosicon.com/images/og.jpg">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="mask-icon" href="images/favicon/favicon-32x32.png" color="#0b0b0f">
<meta name="msapplication-TileColor" content="#0b0b0f">
<meta name="theme-color" content="#0b0b0f">
<script src="js/alpine.min.js"></script>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/darkos.css">
</head>
<body hx-ext="multi-swap">
<div class="App relative flex min-h-screen flex-col bg-[#0b0b0f] text-white isolate"
style="scroll-behavior: smooth;">
<div class="relative container mx-auto w-full -z-10">
<img src="images/lights.svg" alt="DarkOS Icon Pack"
class="absolute left-0 top-0 transform-gpu w-full">
</div>
<main>
<header x-data="{ atTop: false }"
class="sticky top-0 left-0 right-0 transition duration-1000 ease-in-out z-10 pt-4"
:class="{ 'text-white': atTop, 'bg-none pt-4': !atTop, 'bg-zinc-900/5 pt-2 pb-2 backdrop-blur-sm': atTop }"
@scroll.window="atTop = (window.pageYOffset < 50) ? false: true">
<div class="container mx-auto flex items-center justify-between mx-auto px-8">
<div class="max-w-48 w-42">
<img src="images/logo-darkos.png" alt="DarkOS Icon Pack" class="w-36">
</div>
<div class="flex items-center gap-8">
<!-- <a href="test.html"
class="hidden sm:block py-2.5 px-6 text-white/50 hover:text-white duration-300 ">
Guide
</a> -->
<!-- <a href="#tally-open=woA4PP&tally-layout=modal&tally-emoji-text=%F0%9F%9B%B0%EF%B8%8F&tally-emoji-animation=wave"
class="hidden sm:flex group py-3 pl-6 pr-4 from-zinc-900 text-white to-zinc-900 flex items-center gap-2 text-xs sm:text-base hover:from-zinc-900 hover:text-zinc-100 hover:text-white rounded-full border border-t-white/10 border-x-white/10 border-b-white/10 hover:duration-300 hover:shadow-lg hover:shadow-white/10 duration-300">
<span>Join Waitlist</span>
<div class="relative right-0 group-hover:translate-x-1 w-5 duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"
stroke-linejoin="round" class="arrow-right">
<path class="opacity-0 group-hover:opacity-100 duration-200" d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
</div>
</a> -->
<a href="https://viggoz.gumroad.com/l/darkosicon" target="_blank"
class="hidden sm:flex group py-3 pl-6 pr-4 from-zinc-900 text-white to-zinc-900 flex items-center gap-2 text-xs sm:text-base hover:from-zinc-900 hover:text-zinc-100 hover:text-white rounded-full border border-t-white/10 border-x-white/10 border-b-white/10 hover:duration-300 hover:shadow-lg hover:shadow-white/10 duration-300">
<span>Buy now $19</span>
<div class="relative right-0 group-hover:translate-x-1 w-5 duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"
stroke-linejoin="round" class="arrow-right">
<path class="opacity-0 group-hover:opacity-100 duration-200" d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
</div>
</a>
<div class="relative">
<button id="dropdownButton" class="flex group py-3 pl-6 pr-4 from-zinc-900 text-white to-zinc-900 flex items-center gap-2 text-xs sm:text-base hover:from-zinc-900 hover:text-zinc-100 hover:text-white rounded-full border border-t-white/10 border-x-white/10 border-b-white/10 hover:duration-300 hover:shadow-lg hover:shadow-white/10 duration-300">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.9066 9.33333C10.96 8.89333 11 8.45333 11 7.99999C11 7.54666 10.96 7.10666 10.9066 6.66666H13.16C13.2666 7.09333 13.3333 7.53999 13.3333 7.99999C13.3333 8.45999 13.2666 8.90666 13.16 9.33333M9.72665 13.04C10.1266 12.3 10.4333 11.5 10.6466 10.6667H12.6133C11.9733 11.7667 10.9533 12.62 9.72665 13.04ZM9.55998 9.33333H6.43998C6.37331 8.89333 6.33331 8.45333 6.33331 7.99999C6.33331 7.54666 6.37331 7.09999 6.43998 6.66666H9.55998C9.61998 7.09999 9.66665 7.54666 9.66665 7.99999C9.66665 8.45333 9.61998 8.89333 9.55998 9.33333ZM7.99998 13.3067C7.44665 12.5067 6.99998 11.62 6.72665 10.6667H9.27331C8.99998 11.62 8.55331 12.5067 7.99998 13.3067ZM5.33331 5.33333H3.38665C4.01998 4.22666 5.04665 3.37333 6.26665 2.95999C5.86665 3.69999 5.56665 4.49999 5.33331 5.33333ZM3.38665 10.6667H5.33331C5.56665 11.5 5.86665 12.3 6.26665 13.04C5.04665 12.62 4.01998 11.7667 3.38665 10.6667ZM2.83998 9.33333C2.73331 8.90666 2.66665 8.45999 2.66665 7.99999C2.66665 7.53999 2.73331 7.09333 2.83998 6.66666H5.09331C5.03998 7.10666 4.99998 7.54666 4.99998 7.99999C4.99998 8.45333 5.03998 8.89333 5.09331 9.33333M7.99998 2.68666C8.55331 3.48666 8.99998 4.37999 9.27331 5.33333H6.72665C6.99998 4.37999 7.44665 3.48666 7.99998 2.68666ZM12.6133 5.33333H10.6466C10.4333 4.49999 10.1266 3.69999 9.72665 2.95999C10.9533 3.37999 11.9733 4.22666 12.6133 5.33333ZM7.99998 1.33333C4.31331 1.33333 1.33331 4.33333 1.33331 7.99999C1.33331 11.68 4.31998 14.6667 7.99998 14.6667C11.68 14.6667 14.6666 11.68 14.6666 7.99999C14.6666 4.31999 11.68 1.33333 7.99998 1.33333Z" fill="black"/>
<path d="M10.9066 9.33333C10.96 8.89333 11 8.45333 11 7.99999C11 7.54666 10.96 7.10666 10.9066 6.66666H13.16C13.2666 7.09333 13.3333 7.53999 13.3333 7.99999C13.3333 8.45999 13.2666 8.90666 13.16 9.33333M9.72665 13.04C10.1266 12.3 10.4333 11.5 10.6466 10.6667H12.6133C11.9733 11.7667 10.9533 12.62 9.72665 13.04ZM9.55998 9.33333H6.43998C6.37331 8.89333 6.33331 8.45333 6.33331 7.99999C6.33331 7.54666 6.37331 7.09999 6.43998 6.66666H9.55998C9.61998 7.09999 9.66665 7.54666 9.66665 7.99999C9.66665 8.45333 9.61998 8.89333 9.55998 9.33333ZM7.99998 13.3067C7.44665 12.5067 6.99998 11.62 6.72665 10.6667H9.27331C8.99998 11.62 8.55331 12.5067 7.99998 13.3067ZM5.33331 5.33333H3.38665C4.01998 4.22666 5.04665 3.37333 6.26665 2.95999C5.86665 3.69999 5.56665 4.49999 5.33331 5.33333ZM3.38665 10.6667H5.33331C5.56665 11.5 5.86665 12.3 6.26665 13.04C5.04665 12.62 4.01998 11.7667 3.38665 10.6667ZM2.83998 9.33333C2.73331 8.90666 2.66665 8.45999 2.66665 7.99999C2.66665 7.53999 2.73331 7.09333 2.83998 6.66666H5.09331C5.03998 7.10666 4.99998 7.54666 4.99998 7.99999C4.99998 8.45333 5.03998 8.89333 5.09331 9.33333M7.99998 2.68666C8.55331 3.48666 8.99998 4.37999 9.27331 5.33333H6.72665C6.99998 4.37999 7.44665 3.48666 7.99998 2.68666ZM12.6133 5.33333H10.6466C10.4333 4.49999 10.1266 3.69999 9.72665 2.95999C10.9533 3.37999 11.9733 4.22666 12.6133 5.33333ZM7.99998 1.33333C4.31331 1.33333 1.33331 4.33333 1.33331 7.99999C1.33331 11.68 4.31998 14.6667 7.99998 14.6667C11.68 14.6667 14.6666 11.68 14.6666 7.99999C14.6666 4.31999 11.68 1.33333 7.99998 1.33333Z" fill="url(#paint0_linear_710_36817)"/>
<defs>
<linearGradient id="paint0_linear_710_36817" x1="7.99998" y1="1.33333" x2="7.99998" y2="14.6667" gradientUnits="userSpaceOnUse">
<stop stop-color="#FAFAFA"/>
<stop offset="1" stop-color="#8C8C8C"/>
</linearGradient>
</defs>
</svg>
English
</button>
<div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-36 border border-zinc-800 bg-[#18181B] rounded-2xl shadow-lg py-2 px-2">
<a href="/" class="block px-4 py-2 text-white/50 hover:text-white hover:bg-white/10 rounded-t-md">English</a>
<a href="/zh" class="block px-4 py-2 text-white/50 hover:text-white hover:bg-white/10 rounded-b-md">简体中文</a>
</div>
</div>
</div>
</div>
</header>
<!-- HERO -->
<div class="relative container max-w-7xl mx-auto md:mt-8 mt-3 mb-8 px-4 md:px-8">
<img src="images/bg-top.png" alt="DarkOS Icon Pack"
class="absolute top-24 -z-10 mx-auto w-1/2 md:w-full">
<h1
class="text-5xl md:text-7xl font-bold max-w-2xl text-center mx-auto text-transparent bg-clip-text bg-gradient-to-br from-white via-white to-zinc-600 font-title py-4">
DarkOS Icon Pack</h1>
<p class="mx-auto text-zinc-400 text-center text-base">A beautiful icon pack made exclusively for Mac and iPhone.</p>
<div class="hidden sm:flex flex-col items-center justify-center gap-4 mt-8">
<ul class="flex gap-8 text-base text-white">
<li class="text-sm flex gap-1 items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M7.33335 1.66667V8C7.33335 8.36667 7.62668 8.66667 8.00001 8.66667C8.36668 8.66667 8.66668 8.36667 8.66668 8V1.66667C8.66668 1.29333 8.36668 1 8.00001 1C7.62668 1 7.33335 1.29333 7.33335 1.66667ZM13.9867 10.56L8.83335 7.69333C8.52001 7.52 8.44001 7.48 8.25335 7.44C8.07335 7.4 7.89335 7.4 7.71335 7.44C7.69335 7.44 7.69335 7.44 7.67335 7.44667C7.50668 7.48667 7.42668 7.52 7.13335 7.68L1.98001 10.54C1.65335 10.7133 1.54001 11.12 1.72001 11.44C1.89335 11.76 2.30001 11.8733 2.62001 11.6933L7.76668 8.82667C7.92668 8.73333 7.96668 8.71333 7.96668 8.71333C7.96001 8.71333 7.96001 8.71333 7.96001 8.71333C7.96001 8.70667 7.96001 8.70667 7.96001 8.70667C7.94668 8.7 7.98668 8.72 8.15335 8.81333L13.3 11.6733C13.62 11.8467 14.0267 11.7333 14.2 11.4133C14.3733 11.0867 14.26 10.68 13.94 10.5067L13.9867 10.56Z" fill="url(#paint0_linear_707_36708)"/>
<path d="M13.34 4.26667L7.67335 7.41333C7.34668 7.58667 7.23335 7.99333 7.41335 8.31333C7.58668 8.63333 7.99335 8.74667 8.31335 8.56667L13.98 5.41333C14.3 5.23333 14.4133 4.82667 14.2333 4.50667C14.0533 4.18 13.6467 4.06667 13.3267 4.24667L13.34 4.26667ZM8.32002 7.41333L2.65335 4.26C2.32668 4.08 1.92002 4.19333 1.74668 4.51333C1.56668 4.83333 1.68002 5.24 2.00002 5.41333L7.66668 8.56C7.98668 8.73333 8.39335 8.62 8.56668 8.3C8.74002 7.97333 8.62668 7.56667 8.30668 7.39333L8.32002 7.41333ZM7.32668 7.99333V14.3267C7.32668 14.6933 7.62002 14.9933 7.99335 14.9933C8.36002 14.9933 8.66002 14.6933 8.66002 14.3267V7.98667C8.66002 7.61333 8.36002 7.32 7.99335 7.32C7.62002 7.32 7.32668 7.61333 7.32668 7.98667V7.99333ZM14.66 10.6933V5.28C14.66 4.90667 14.6533 4.80667 14.5867 4.62C14.5267 4.44 14.4267 4.27333 14.3 4.13333C14.1667 3.98667 14.08 3.93333 13.76 3.75333L8.82668 1.00667C8.51335 0.833333 8.43335 0.793333 8.25335 0.753333C8.07335 0.713333 7.88668 0.713333 7.71335 0.746666C7.69335 0.746666 7.69335 0.746666 7.67335 0.753333C7.50668 0.793333 7.42668 0.826666 7.13335 0.986666L2.19335 3.72667C1.97335 3.84667 1.90668 3.88 1.81335 3.95333C1.75335 3.99333 1.70002 4.04 1.64668 4.09333C1.51335 4.22667 1.42002 4.39333 1.36002 4.57333C1.29335 4.75333 1.28668 4.85333 1.28668 5.22667V10.6333C1.28668 11 1.28668 11.1 1.35335 11.2867C1.40668 11.4667 1.50668 11.6267 1.63335 11.7667C1.76002 11.9067 1.84668 11.96 2.16668 12.14L7.10002 14.88C7.40002 15.0467 7.48668 15.0867 7.66668 15.1267C7.84002 15.16 8.02668 15.16 8.20002 15.12C8.38002 15.08 8.46668 15.04 8.76668 14.8667L13.6933 12.12C14.0133 11.94 14.0933 11.8867 14.2267 11.74C14.3533 11.6 14.4467 11.4333 14.5067 11.2533C14.5667 11.0667 14.5733 10.9667 14.5733 10.5933L14.66 10.6933ZM13.3267 10.6933C13.3267 10.8933 13.32 10.9333 13.3267 10.9267C13.3267 10.92 13.2933 10.94 13.12 11.04L8.18002 13.78C8.01335 13.8667 7.97335 13.8867 7.98002 13.8867C7.98002 13.88 7.98002 13.88 7.98002 13.8867C7.98668 13.8867 7.94668 13.8667 7.78002 13.7733L2.84002 11.0267C2.66002 10.9267 2.62668 10.9 2.63335 10.9067C2.62668 10.9 2.62668 10.9 2.62668 10.9C2.62668 10.9067 2.62668 10.86 2.62668 10.66V5.24667C2.62668 5.04 2.62668 5 2.62668 5.00667C2.62002 5.00667 2.62002 5.00667 2.62668 5.00667C2.61335 5.01333 2.61335 5.01333 2.60668 5.02C2.62668 5 2.67335 4.97333 2.82668 4.88667L7.76002 2.14C7.92002 2.04667 7.96002 2.02667 7.96002 2.02667C7.95335 2.02667 7.95335 2.02667 7.95335 2.02667C7.95335 2.02 7.94668 2.02 7.95335 2.02667C7.94002 2.02 7.98002 2.04 8.14668 2.13333L13.08 4.87333C13.2533 4.96667 13.2867 4.99333 13.28 4.98667C13.2733 4.98 13.2733 4.98 13.2733 4.98C13.2667 4.96667 13.2733 5.01333 13.2733 5.21333V10.62L13.3267 10.6933Z" fill="url(#paint1_linear_707_36708)"/>
<defs>
<linearGradient id="paint0_linear_707_36708" x1="7.95784" y1="1" x2="7.95784" y2="11.7789" gradientUnits="userSpaceOnUse">
<stop stop-color="#FAFAFA"/>
<stop offset="1" stop-color="#8C8C8C"/>
</linearGradient>
<linearGradient id="paint1_linear_707_36708" x1="7.97335" y1="0.722443" x2="7.97335" y2="15.1509" gradientUnits="userSpaceOnUse">
<stop stop-color="#FAFAFA"/>
<stop offset="1" stop-color="#8C8C8C"/>
</linearGradient>
</defs>
</svg>
600+ App icons
</li>
<li class="text-sm flex gap-1 items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M3.03333 10.2733C2.38666 9.84 1.99333 9.12 1.99333 8.32667C1.99333 7.11333 2.91333 6.11333 4.10666 6C4.40666 5.96667 4.65333 5.74 4.7 5.44C4.96 3.84 6.34666 2.64667 7.98666 2.64667C9.61999 2.64667 11.0067 3.83333 11.2733 5.43333C11.32 5.72667 11.5667 5.96 11.8667 5.98667C13.0533 6.09333 13.98 7.1 13.98 8.30667C13.98 9.09333 13.58 9.81333 12.94 10.2467C12.6333 10.4467 12.5467 10.86 12.7533 11.1667C12.9533 11.4667 13.3667 11.5533 13.6733 11.3467C14.68 10.6667 15.3 9.53333 15.3 8.29333C15.3 6.39333 13.8467 4.81333 11.9733 4.64L12.5667 5.19333C12.1933 2.95333 10.2533 1.28667 7.95999 1.28667C5.65999 1.28667 3.72 2.94667 3.35333 5.18667L3.94666 4.62667C2.06666 4.8 0.619995 6.37333 0.619995 8.27333C0.619995 9.50667 1.23333 10.64 2.24666 11.32C2.54666 11.52 2.96666 11.44 3.16666 11.1333C3.36666 10.8267 3.28666 10.4067 2.98 10.2067L3.03333 10.2733Z" fill="url(#paint0_linear_707_36712)"/>
<path d="M5.79999 11.1333L8.46665 8.46667C8.72665 8.2 8.72665 7.78 8.46665 7.52C8.19999 7.25333 7.77999 7.25333 7.51999 7.52L4.85332 10.1867C4.58665 10.4467 4.58665 10.8667 4.85332 11.1267C5.11332 11.3867 5.53332 11.3867 5.79332 11.1267L5.79999 11.1333ZM7.51999 8.46667L10.1867 11.1333C10.4467 11.3933 10.8667 11.3933 11.1267 11.1333C11.3867 10.8667 11.3867 10.4467 11.1267 10.1867L8.45999 7.52C8.19332 7.25333 7.77332 7.25333 7.51332 7.52C7.24665 7.78 7.24665 8.2 7.51332 8.46L7.51999 8.46667ZM7.31999 7.99333V13.9933C7.31999 14.36 7.61332 14.66 7.98665 14.66C8.35332 14.66 8.65332 14.36 8.65332 13.9933V7.99333C8.65332 7.62 8.35332 7.32667 7.98665 7.32667C7.61332 7.32667 7.31999 7.62 7.31999 7.99333Z" fill="url(#paint1_linear_707_36712)"/>
<defs>
<linearGradient id="paint0_linear_707_36712" x1="7.96" y1="1.28667" x2="7.96" y2="11.4596" gradientUnits="userSpaceOnUse">
<stop stop-color="#FAFAFA"/>
<stop offset="1" stop-color="#8C8C8C"/>
</linearGradient>
<linearGradient id="paint1_linear_707_36712" x1="7.98749" y1="7.32" x2="7.98749" y2="14.66" gradientUnits="userSpaceOnUse">
<stop stop-color="#FAFAFA"/>
<stop offset="1" stop-color="#8C8C8C"/>
</linearGradient>
</defs>
</svg>
Easy installation
</li>
<li class="text-sm flex gap-1 items-center">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M2.56665 10.4867C2.09331 10.88 1.73998 11.5067 1.45998 12.3067C1.30665 12.7267 1.19331 13.18 1.09998 13.6267C1.03998 13.8933 1.00665 14.1067 0.986646 14.2333C0.926646 14.6667 1.29998 15.04 1.73331 14.98C1.85998 14.96 2.06665 14.9267 2.33998 14.8667C2.78665 14.7733 3.23331 14.6533 3.65998 14.5067C4.45998 14.2267 5.07998 13.8733 5.47998 13.4C6.17331 12.5667 6.14665 11.3133 5.37331 10.5533C4.98665 10.18 4.48665 9.97334 3.96665 9.96C3.43998 9.94 2.93331 10.12 2.53331 10.4533L2.56665 10.4867ZM3.41998 11.5067C3.56665 11.38 3.75331 11.3133 3.94665 11.32C4.13998 11.32 4.31998 11.4 4.45998 11.5333C4.71331 11.7867 4.72665 12.2533 4.46665 12.56C4.25331 12.8067 3.81331 13.0533 3.21998 13.26C2.85331 13.38 2.45998 13.4867 2.05998 13.5667C1.81998 13.6133 1.63998 13.64 1.53998 13.6533L2.28665 14.4C2.29331 14.3 2.32665 14.1133 2.37331 13.88C2.45331 13.48 2.55331 13.0867 2.67998 12.72C2.87998 12.1267 3.12665 11.6867 3.37331 11.48L3.41998 11.5067Z" fill="url(#paint0_linear_707_36716)"/>
<path d="M8.46662 9.52667L6.46662 7.52667C6.19995 7.26 5.77995 7.26 5.51995 7.52667C5.25328 7.78667 5.25328 8.20667 5.51995 8.46667L7.51995 10.4667C7.77995 10.7267 8.19995 10.7267 8.45995 10.4667C8.71995 10.2 8.71995 9.78 8.45995 9.52L8.46662 9.52667ZM8.22662 10.62C9.19328 10.2467 10.1266 9.78 11.0066 9.22667C11.3133 9.02667 11.4066 8.61334 11.2133 8.30667C11.0133 7.99334 10.6 7.9 10.2933 8.09334C9.48662 8.6 8.63328 9.02667 7.73995 9.36667C7.39328 9.49334 7.21995 9.88 7.35328 10.2267C7.47995 10.5667 7.86662 10.74 8.21328 10.6067L8.22662 10.62ZM7.31995 9.99334V13.3267C7.31995 13.74 7.69328 14.0533 8.09995 13.98C8.19995 13.96 8.37328 13.92 8.59328 13.86C8.95328 13.76 9.31995 13.64 9.66662 13.4867C10.34 13.1933 10.8666 12.8267 11.1866 12.3467C11.4933 11.8733 11.62 11.28 11.6133 10.58C11.6066 10.1067 11.54 9.61334 11.4333 9.12C11.3666 8.81334 11.3 8.57334 11.2533 8.42667C11.14 8.07334 10.76 7.88 10.4133 7.99334C10.06 8.1 9.86662 8.48 9.97995 8.82667C10.0133 8.92667 10.0666 9.12667 10.12 9.38667C10.2066 9.79334 10.26 10.2067 10.26 10.5733C10.26 11.02 10.1866 11.3733 10.0466 11.58C9.89328 11.8 9.55995 12.0267 9.09995 12.2267C8.81995 12.3467 8.51328 12.4467 8.20662 12.5267C8.01995 12.5733 7.87995 12.6 7.80662 12.6133L8.58662 13.2667V9.93334C8.58662 9.56 8.28662 9.26667 7.91995 9.26667C7.54662 9.26667 7.25329 9.56 7.25329 9.93334L7.31995 9.99334ZM6.60662 8.22667C6.93995 7.34667 7.36662 6.5 7.87328 5.70667C8.59328 4.55334 9.58662 3.60667 10.7733 2.96C11.9533 2.30667 13.2866 1.96667 14.6333 1.97334L13.9666 1.30667C13.9666 3.9 12.94 6.28667 10.26 8.08C9.95328 8.28 9.86662 8.69334 10.0733 9C10.2733 9.3 10.6866 9.38667 10.9933 9.18C14.08 7.10667 15.2866 4.29334 15.2866 1.28667C15.2866 0.920003 14.9866 0.620003 14.62 0.620003C13.04 0.606669 11.48 1 10.1 1.76C8.71328 2.52 7.54662 3.62 6.71328 4.96C6.15995 5.82 5.69329 6.74 5.31995 7.70667C5.18662 8.04667 5.35329 8.43334 5.69995 8.56667C6.03995 8.69334 6.42662 8.52667 6.55995 8.18L6.60662 8.22667ZM5.97995 7.32H2.64662L3.29995 8.1C3.30662 8.02667 3.33995 7.88667 3.38662 7.7C3.46662 7.39334 3.56662 7.08667 3.68662 6.80667C3.87995 6.34 4.11329 6.00667 4.33329 5.86C4.53995 5.72 4.88662 5.64667 5.33995 5.64667C5.70662 5.64667 6.11329 5.7 6.52662 5.78667C6.77995 5.84 6.97995 5.89334 7.08662 5.92667C7.43329 6.03334 7.80662 5.84 7.91995 5.49334C8.02662 5.14 7.83328 4.76667 7.48662 4.65334C7.33995 4.60667 7.09995 4.54 6.79328 4.47334C6.29995 4.36667 5.80662 4.3 5.33329 4.29334C4.63329 4.28667 4.03995 4.40667 3.56662 4.72C3.07995 5.04 2.71995 5.56667 2.42662 6.24C2.27329 6.58 2.15329 6.94667 2.05329 7.31334C1.99329 7.52667 1.95329 7.7 1.93329 7.80667C1.85329 8.21334 2.17329 8.58667 2.58662 8.58667H5.91995C6.28662 8.58667 6.58662 8.28667 6.58662 7.92C6.58662 7.54667 6.28662 7.25334 5.91995 7.25334L5.97995 7.32Z" fill="url(#paint1_linear_707_36716)"/>
<defs>
<linearGradient id="paint0_linear_707_36716" x1="3.47903" y1="9.9585" x2="3.47903" y2="14.9864" gradientUnits="userSpaceOnUse">
<stop stop-color="#FAFAFA"/>
<stop offset="1" stop-color="#8C8C8C"/>
</linearGradient>
<linearGradient id="paint1_linear_707_36716" x1="8.60379" y1="0.619675" x2="8.60379" y2="13.9907" gradientUnits="userSpaceOnUse">
<stop stop-color="#FAFAFA"/>
<stop offset="1" stop-color="#8C8C8C"/>
</linearGradient>
</defs>
</svg>
Lifetime updates
</li>
</ul>
</div>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mt-8">
<!-- <a href="https://www.producthunt.com/posts/darkos-icon-pack?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-darkos-icon-pack" target="_blank" style="position: relative; display: inline-block; border-radius: 29px; overflow: hidden;">
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=459443&theme=light"
alt="DarkOS Icon Pack - Truly Dark Mode on your Mac and iPhone | Product Hunt"
style="width: 250px; height: 54px; border-radius: 27px; display: block;"
width="250" height="54" />
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #FF6154; border-radius: 27px;"></div>
</a> -->
<!-- <a href="#tally-open=woA4PP&tally-layout=modal&tally-emoji-text=%F0%9F%9B%B0%EF%B8%8F&tally-emoji-animation=wave"
class="group py-4 pl-6 pr-4 bg-gradient-to-b from-zinc-4001 to-zinc-100 flex items-center gap-2 hover:from-zinc-100 duration-300 hover:to-white text-zinc-900 hover:text-black font-bold rounded-full border-t-white/75 border-x-white/50 border-b-none hover:border-white text-base hover:shadow-lg hover:shadow-white/10">
<span>Join Waitlist</span>
<div class="relative right-0 group-hover:translate-x-1 w-5 duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="arrow-right">
<path class="opacity-0 group-hover:opacity-100 duration-200" d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
</div>
</a> -->
<a href="https://viggoz.gumroad.com/l/darkosicon" target="_blank"
class="group py-4 pl-6 pr-4 bg-gradient-to-b from-zinc-4001 to-zinc-100 flex items-center gap-2 hover:from-zinc-100 duration-300 hover:to-white text-zinc-900 duration-300 hover:text-black font-bold rounded-full border-t-white/75 border-x-white/50 border-b-none duration-300 hover:border-white duration-300 text-base hover:shadow-lg hover:shadow-white/10">
<span>Buy now $19</span>
<div class="relative right-0 group-hover:translate-x-1 w-5 duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"
stroke-linejoin="round" class="arrow-right">
<path class="opacity-0 group-hover:opacity-100 duration-200" d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
</div>
</a>
<a href="https://viggoz.gumroad.com/l/darkosicon" target="_blank"
class="group py-4 pl-6 pr-4 bg-gradient-to-b from-zinc-900 to-zinc-900 flex items-center gap-2 text-base font-bold hover:from-zinc-900 hover:text-zinc-100 hover:text-white rounded-full border border-t-white/10 border-x-white/10 border-b-white/10 hover:duration-300 hover:shadow-lg hover:shadow-white/10 duration-300">
<span>Free Demo</span>
<div class="relative right-0 group-hover:translate-x-1 w-5 duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"
stroke-linejoin="round" class="arrow-right">
<path class="opacity-0 group-hover:opacity-100 duration-200" d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
</div>
</a>
</div>
<div class="relative w-full mt-8 sm:mt-16 mb-2">
<div class="grid grid-cols-12 w-full mx-auto gap-4">
<div class="col-span-12 md:col-span-8 rounded-2xl bg-gradient-to-br duration-300 ease-in">
<div class="carousel" id="carousel">
<div class="carousel-images">
<img src="images/screenshot_mac_01.jpg" alt="DarkOS Icon Pack">
<img src="images/screenshot_mac_02.jpg" alt="Screenshot 1">
<img src="images/screenshot_mac_03.jpg" alt="Screenshot 2">
<img src="images/screenshot_mac_04.jpg" alt="Screenshot 3">
<img src="images/screenshot_mac_05.jpg" alt="Screenshot 4">
</div>
<div class="carousel-buttons">
<div class="carousel-button active" onclick="showImage(0)"></div>
<div class="carousel-button" onclick="showImage(1)"></div>
<div class="carousel-button" onclick="showImage(2)"></div>
<div class="carousel-button" onclick="showImage(3)"></div>
<div class="carousel-button" onclick="showImage(4)"></div>
</div>
<button class="carousel-nav left" onclick="prevImage()">❮</button>
<button class="carousel-nav right" onclick="nextImage()">❯</button>
</div>
</div>
<div class="col-span-12 md:col-span-4 rounded-2xl bg-gradient-to-br from-white/5 via-white/10 to-white/10 hover:bg-white/5 duration-300 ease-in">
<div class="flex flex-col w-full h-full bg-[#18181B] rounded-2xl overflow-hidden">
<img src="images/screenshot_iPhone.jpg" alt="DarkOS Icon Pack"
class="w-full rounded-2xl transform transition-transform duration-300 ease-in-out hover:scale-105">
</div>
</div>
</div>
</div>
<script>
let currentIndex = 0;
const carouselImages = document.querySelector('.carousel-images');
const buttons = document.querySelectorAll('.carousel-button');
const totalImages = carouselImages.children.length;
let autoPlayInterval;
function showImage(index) {
carouselImages.style.transform = `translateX(-${index * 100}%)`;
buttons.forEach((button, i) => {
button.classList.toggle('active', i === index);
});
currentIndex = index;
}
function autoPlay() {
currentIndex = (currentIndex + 1) % totalImages;
showImage(currentIndex);
}
function startAutoPlay() {
autoPlayInterval = setInterval(autoPlay, 2000);
}
function stopAutoPlay() {
clearInterval(autoPlayInterval);
}
function prevImage() {
currentIndex = (currentIndex - 1 + totalImages) % totalImages;
showImage(currentIndex);
}
function nextImage() {
currentIndex = (currentIndex + 1) % totalImages;
showImage(currentIndex);
}
carouselImages.addEventListener('mouseover', stopAutoPlay);
carouselImages.addEventListener('mouseout', startAutoPlay);
// Initialize
showImage(currentIndex);
startAutoPlay();
buttons.forEach((button, index) => {
button.addEventListener('click', () => {
showImage(index);
});
});
</script>
</div>
<!-- END HERO -->
<!-- Screenshot -->
<div class="group relative mx-auto w-full mt-2 sm:mt-16">
<div class="max-w-4xl text-center mx-auto px-4">
<h2
class="text-3xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-white via-white to-zinc-600 font-title py-4">
Truly Dark Mode on your Mac and iPhone.
</h2>
<p class="hidden text-zinc-500 text-center text-base md:text-lg">No technical skills needed. No Code needed.</p>
</div>
<div class="flex mx-auto">
<div class="relative hidden sm:flex items-center mx-0 w-full">
<img src="images/icon_preview_b.png" alt="DarkOS Icon Pack" class="w-full ">
</div>
<div class="relative sm:hidden items-center mx-0 w-full">
<img src="images/icon_preview_s.png" alt="DarkOS Icon Pack" class="w-full ">
</div>
</div>
</div>
<!-- END Screenshot -->
<!-- List -->
<div class="mx-auto max-w-7xl px-4 md:px-8 grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-8 mt-8 mb-2 sm:mt-16">
<div class="max-w-4xl text-center mx-auto px-4">
<h2
class="text-3xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-white via-white to-zinc-600 font-title py-4">
What's included?
</h2>
<p class="hidden text-zinc-500 text-center text-base md:text-lg">No technical skills needed. No Code needed.No management time needed.</p>
</div>
<div class="absolute transform-gpu -z-10">
<img src="images/bg-top.png" alt="illustration bg" class="mx-auto w-full">
</div>
<!-- Inc 1 -->
<div class="open:border-white/20 bg-[#18181B] border-white/10 rounded-xl px-4 py-4 md:px-8 md:py-8">
<div class="">
<h2 class="text-xl font-bold text-zinc-300">Icon Pack For Mac 🖥️</h2>
<!-- <p class="mt-4 max-w-2xl text-base text-zinc-500">12 Categories, More than 300+ Beautiful Icons For Mac and iPhone</p> -->
</div>
<div>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">System (66)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">System Settings (11)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">System Folders (17)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Extensions (25)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Social Networking (9)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Entertainment (11)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Business (27)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Productivity (62)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Developer Tools (34)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Graphics & Design (50)</li>
</ul>
</div>
<!-- Icon List For Mac (493) -->
<div class="col-span-2 grid gap-4 mt-4">
<details class="open:border-white/10 bg-[#18181B] border border-white/10 rounded-xl px-4 py-4 md:px-8 text-base">
<summary class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full">Icon List For Mac (330+)</summary>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">System (66)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Finder</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Launchpad</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Messages</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">FaceTime</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Apple</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Calculator</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Safari</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TV</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">App Store</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Podcasts</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Activity</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Monitor</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Mail</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Contacts</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Calendar</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Clock</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Reminders</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Notes</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Maps</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Find My</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Photos</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Music</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Voice</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Memos</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Stocks</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Books</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Photo Booth</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Preview</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Dictionary</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">home</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Siri</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">System Preferences</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Shortcuts</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Terminal</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Screenshot</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">QuickTime Player</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">AirPort Utility</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Bluetooth File Exchange</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Font Book</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Time Machine</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Mission Control</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Stickies</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Keynote</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Numbers</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Pages</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Weather</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">News</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Freeform</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TextEdit</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Keychain Access</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Archive Utility</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Audio MIDI Setup</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Automator</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Chess</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">ColorSync Utility</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Console</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Dock</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Grapher</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Digital Color Meter</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Disk Utility</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Image Capture</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Installer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Migration Assistant</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Print Center</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Screen Sharing</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Script Editor</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">System Information</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">VoiceOver Utility</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">System Settings (11)</h1>
<ul class="flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Accessibility</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Bluetooth</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Control</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Center Focus</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">General</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Network</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Notifications</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Screen Time</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Sound</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Wallpaper</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Wi-Fi</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">System Folders (17)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Applications</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Desktop
</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Developer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Documents</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Downloads
</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Executable</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Folder
</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Home
</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Library</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Movies</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Music</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Pictures</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Public</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Servers</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
System</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Users</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">
Utilities</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Extensions (25)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">7z</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">apk</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">appx</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">avi</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">br</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">bundle</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">cab</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">dmg</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">exe</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">gif</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">gz</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">html</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">iso</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">jpg</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">mkv</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">mov</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">mp3</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">mp4</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">pdf</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">png</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">rar</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">raw</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">savedSearch</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">tar</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">zip</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Social Networking (9)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WeChat</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">QQ</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TencentMeeting</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WeCom</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Telegram</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">DingTalk</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Feishu</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Slack</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Discord</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Entertainment (11)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Spotify</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">IINA</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SoundCloud</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Steam</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">NeteaseMusic</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">小宇宙</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">QQ音乐</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">爱奇艺</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Mango TV</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TencentVideo</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">KugouMusic</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Business (27)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Spark</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">MWeb Pro</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Typora</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Things</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Dropbox</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Xmind</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">MindNode</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">OmniGraffle</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Evernote</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TeamViewer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Word</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Excel</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Powerpoint</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft OneNote</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Outlook</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Teams</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft 365</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Acrobat</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WPS Office</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">OneDrive</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Google Drive</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TickTick</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">zoom.us</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Trello</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Duolingo English Test</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">BOSS直聘</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SunloginClient</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Productivity (62)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Arc</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Google Chrome</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">FireFox</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Edge</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Notion</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">flomo</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Obsidian</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Craft</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Cubox</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">iA Writer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Bear</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">ClashX</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Leensa</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">XiYou</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">trojan-qt5</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Magnet</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Bob</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">One Switch</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">CleanMyMac X</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Setapp</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">MenubarX</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">PopClip</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">1Password</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">IconChamp</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Downie 4</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Paste</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">9GAG</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Asana</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Noizio</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Reader5</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Mounty</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Dozer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">NTFS Tool</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">网易有道翻译</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">网易有道词典</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">ChatGPT</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Raycast</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">LocalSend</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Gifski</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Bandizip</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Bartender 4</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">迅雷影音</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Android File Transfer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">微信读书</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Folx GO+</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Folx</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Creativit</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Thunder</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Sensei</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">BaiduNetdisk</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">aDrive</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Bittorrent</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Dynamo</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Xnapper</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">CleanShot X</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">NextChat</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Remote Desktop Beta</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Remote Desktop</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Z-Library</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">ScreenFlow</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Developer Tools (34)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Visual Studio Code</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">GitHub Desktop</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Xcode</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Swift Playgrounds</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Android Studio</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">iTerm</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Gitfox</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Sublime Text</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">CodeRunner</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Fleet</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">DB Browser for SQLite</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Jira</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Sourcetree</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Paw</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Kaleidoscope</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Transporter</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Dash</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SnippetsLab</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">HandShaker</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Wechat Devtools</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Python Launcher</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SiteSucker</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SiteSucker Pro</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">AppCode</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">IntelliJ IDEA</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">CLion</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">PhpStorm</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">PyCharm</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">DataGrip</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">DataSpell</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Rider</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">RubyMine</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">GoLand</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WebStorm</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Graphics & Design (50)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Figma</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Framer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Sketch</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Final Cut Pro</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">CapCut</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Blender</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Eagle</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Cinema 4D</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Spline</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Affinity Designer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Affinity Publisher</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Affinity Photo</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Canva</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">IconJar</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Super Vectorizer Pro</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">ProtoPie</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">comflowy</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Creative Cloud</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">MasterGo</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe After Effects</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Photoshop</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Illustrator</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Lightroom</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe XD</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Media Encoder</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Acrobat Pro</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Aero</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Animate</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Audition</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Bridge</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Character Animator</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Digital Editions</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Dimension</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Dreamweaver</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Adobe Fresco</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Fuse</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe InCopy</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe InDesign</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Lightroom Classic</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Portfolio</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Prelude</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Premiere Pro</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Premiere Rush</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Spark</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Stock</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Substance 3D Designer</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Substance 3D Painter</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Substance 3D Sampler</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe Substance 3D Stager</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Adobe After Effects Render Engine</li>
</ul>
</details>
</div>
<!-- END icons -->
</div>
<!-- Inc END 1 -->
<!-- Inc 2 -->
<div class="open:border-white/20 bg-[#18181B] border-white/10 rounded-xl px-4 py-4 md:px-8 md:py-8">
<div class="">
<h2 class="text-xl font-bold text-zinc-300">Icon Pack For iPhone 📱</h2>
</div>
<div>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">System (33)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Social Networking (30)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Entertainment (35)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Business (33)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Lifestyle (64)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Graphics&Design (14)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Productivity (44)</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-[#212125]">Finance (14)</li>
</ul>
</div>
<!-- Icon List For iPhone (260+) -->
<div class="col-span-2 grid gap-4 mt-4">
<details class="open:border-white/10 bg-[#18181B] border border-white/10 rounded-xl px-4 py-4 md:px-8 text-base">
<summary class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full">Icon List For iPhone (260+)</summary>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">System (33)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Wallet</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Health</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Game Center</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Translate</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Phone</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Messages</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">FaceTime</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Apple</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Calculator</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Safari</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TV</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">App Store</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Podcasts</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Mail</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Contacts</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Calendar</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Clock</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Reminders</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Notes</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Maps</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Find My</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Photos</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Music</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Voice Memos</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Stocks</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Books</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">home</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Settings</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Shortcuts</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Weather</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">News</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Freeform </li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Social Networking (30)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Snapchat</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Instagram</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Facebook</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">x</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Threads</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Line</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WhatsApp</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Messenger</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Tinder</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Reddit</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Telegram</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Twitter</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Slack</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Discord</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Skype</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SOUL</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">知乎</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">即刻</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">小红书</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">微博</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">百度贴吧</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">豆瓣</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">脉脉</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Linkedin</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WeChat</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">QQ</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TencentMeeting</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WeCom</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">DingTalk</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Feishu</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Entertainment (35)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Spotify</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SoundCloud</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TikTok</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Twitch</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Netflix</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Disney+</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Hulu</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">YouTube TV</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Xbox</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Shazam</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">YouTube Music</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Amazon Prime Video</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">哔哩哔哩</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">快手</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">YY</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">优酷</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">酷我音乐</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">唱吧</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">番茄畅听</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">番茄小说</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">韩剧TV</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">西瓜视频</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">掌上Wegame</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">全民K歌</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TapTap</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">喜马拉雅</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">大麦</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">NeteaseMusic</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Mango TV</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TencentVideo</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">KugouMusic</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">小宇宙</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">QQ 音乐</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">爱奇艺</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">IQIYI</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Business (33)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Spark</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">MWeb Pro</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Things</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Dropbox</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Xmind</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">MindNode</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">OmniGraffle</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Evernote</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">WPS Office</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">OneDrive</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Gmail</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">The New York Times</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">NewsBreak</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Substack</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">CNN</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Google Drive</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Outlook</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">TickTick</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">zoom.us</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Trello</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Todoist</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">BOSS直聘</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Word</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Microsoft Excel</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">知识星球</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">爱范儿</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">机核</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">36氪</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">猎聘</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">拉勾招聘</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">酷安</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">少数派</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">百度文库</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Lifestyle (64)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Temu</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">SHEIN</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Walmart</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Amazon</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Costco</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">eBay</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Nike</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">McDonald</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Google</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">YouTube</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Lemon8</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Zillow</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Tesla</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Google Map</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Uber</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Lyft</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Grab</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Indeed</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">adidas</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">MLB</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Airbno</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">DoorDash</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Pinterest</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Booking</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">AllTrails</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Starva</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">京东</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">淘宝</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">闲鱼</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">当当</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">天猫</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">拼多多</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">米家</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">美团</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">小米有品</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">得物</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">美团外卖</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">大众点评</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">网易严选</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">携程旅行</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">航旅纵横</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">去哪儿</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">交管12123</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">智行火车票</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">马蜂窝</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">高德地图</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">滴滴出行</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">百度地图</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">铁路12306</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">自如</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">贝壳找房</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">安居客</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">懂车帝</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">顺丰速运</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">转转</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">多抓鱼</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">今日头条</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">饿了么</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">58同城</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">链家</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Keep</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">DJI</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">中国联通</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">中国移动</li>
</ul>
<h1 class="text-sm md:text-base font-medium text-zinc-400 cursor-pointer w-full mt-4 md:mt-8">Graphics&Design (14)</h1>
<ul class=" flex flex-wrap gap-2 mt-4 text-sm">
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">泼辣修图</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">美图秀秀</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">醒图</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">VSCO</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">轻颜相机</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Darkroom</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">图虫</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Figma</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Sketch</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">CapCut</li>
<li class="text-zinc-500 px-4 p-1.5 rounded border border-white/5 bg-zinc-900">Canva</li>