forked from Tailus-UI/ada-html
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
639 lines (588 loc) · 61.9 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>STPL: Sudhana Telecommunications Private Limited</title>
<meta name="description" content="Sudhana Telecommunications Private Limited - Reliable and High-Speed Internet Solutions" />
<link rel="icon" type="image/svg+xml" href="/stpl.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/stpl.svg" media="(prefers-color-scheme: dark)" />
<meta property="og:url" content="" />
<meta property="og:type" content="" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta name="twitter:card" content="" />
<meta property="twitter:domain" content="" />
<meta property="twitter:url" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
</head>
<body class="bg-white dark:bg-gray-900 dark:before:fixed dark:before:-z-50 dark:before:inset-0 dark:before:bg-gray-950/50">
<header>
<nav class="fixed overflow-hidden z-20 w-full bg-white/80 dark:bg-gray-950/0 dark:shadow-md rounded-b-lg dark:shadow-gray-950/10 border-b border-[--ui-light-border-color] border-x dark:border-[--ui-dark-border-color] backdrop-blur-2xl">
<div class="px-6 m-auto max-w-6xl 2xl:px-0">
<div class="flex flex-wrap items-center justify-between py-2 sm:py-4">
<div class="w-full items-center flex justify-between lg:w-auto">
<a href="/" aria-label="tailus logo">
<img src="/stpl.svg" alt="STPL Logo" class="h-16 w-auto" />
</a>
<div class="flex lg:hidden">
<button aria-label="humburger" id="menu-button" class="relative border bordeer-gray-950/30 dark:border-white/20 size-9 rounded-full transition duration-300 active:scale-95">
<div aria-hidden="true" id="line1" class="m-auto h-[1.5px] w-4 rounded bg-gray-900 transition duration-300 dark:bg-gray-300"></div>
<div aria-hidden="true" id="line2" class="m-auto mt-1.5 h-[1.5px] w-4 rounded bg-gray-900 transition duration-300 dark:bg-gray-300"></div>
</button>
</div>
</div>
<div id="mobile-menu" class="hidden w-full lg:w-fit flex-wrap justify-end items-center space-y-8 lg:space-y-0 lg:flex lg:h-fit md:flex-nowrap">
<div class="mt-6 text-gray-600 dark:text-gray-300 md:-ml-4 lg:pr-4 lg:mt-0">
<ul class="space-y-6 tracking-wide text-base lg:text-sm lg:flex lg:space-y-0">
<li>
<a href="./index.html" class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Home</span>
</a>
</li>
<li>
<a href="./src/views/about.html" class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>About</span>
</a>
</li>
<li>
<a href="./src/views/services.html" class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Services</span>
</a>
</li>
<li>
<a href="./src/views/partners.html" class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Partners</span>
</a>
</li>
<li>
<a href="./src/views/contact.html" class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Contact</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<main class="overflow-hidden">
<section class="relative">
<div class="relative pt-24 lg:pt-28">
<div class="mx-auto px-6 max-w-7xl md:px-12">
<div class="text-center sm:mx-auto sm:w-10/12 lg:mr-auto lg:mt-0 lg:w-4/5">
<a href="/" class="border w-fit mx-auto flex justify-between items-center transition duration-200 rounded-[--annonce-border-radius] border-[--ui-light-border-color] hover:border-[--ui-light-border-hover-color] dark:border-[--ui-dark-border-color] dark:hover:border-[--ui-dark-border-hover-color] p-1 group gap-2">
<span class="block text-sm px-2 py-0.5 rounded-[calc(var(--annonce-border-radius)-0.375rem)] text-white bg-primary-600">New</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300 flex gap-6">
Connecting You To A Faster Future
<div class="flex items-center -space-x-3 group-hover:-translate-x-1 transition-transform duration-300">
<span class="w-2.5 translate-y-[-0.3px] -translate-x-px opacity-0 h-[1.5px] rounded bg-gray-950 dark:bg-white origin-left scale-x-0 transition duration-300 group-hover:opacity-100 group-hover:scale-x-100"></span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="size-4 text-gray-950 dark:text-white -translate-x-2 transition duration-300 group-hover:translate-x-px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</span>
</a>
<p class="mt-6 text-lg text-gray-950 dark:text-white text-center">
STPL offers advanced SIP trunking, managed IT services, and dedicated Internet leased lines to ensure seamless connectivity and boost business efficiency.
</p>
<p class="text-wrap mx-auto mt-8 max-w-2xl text-lg text-gray-700 dark:text-gray-300 hidden sm:block">
Reliable, High-Speed, and Dual Redundancy Internet Leased Lines for Seamless Connectivity
</p>
<p class="text-wrap mx-auto mt-6 max-w-2xl text-gray-700 dark:text-gray-300 sm:hidden">
Boost Your Business Efficiency with Our Dedicated Internet Leased Lines
</p>
<div class="mt-8 flex flex-col items-center justify-center gap-4">
<div class="p-1 rounded-[calc(var(--btn-border-radius)+4px)] bg-gray-950/5 border dark:border-white/10 dark:bg-white/5">
<a
href="mailto:[email protected]"
class="*:select-none dark:shadow-primary-500/10 *:disabled:opacity-20 disabled:*:text-gray-300 disabled:dark:*:text-gray-700 dark:*:disabled:!text-white group relative z-[1] flex h-11 items-center justify-center gap-1.5 rounded-[--btn-border-radius] border border-primary-600 bg-primary-500 px-4 text-base text-white shadow-md shadow-primary-200 before:absolute before:inset-0 before:rounded-[calc(var(--btn-border-radius)-1px)] before:border before:border-primary-500 before:bg-gradient-to-b before:from-primary-600 hover:bg-primary-600 active:bg-primary-700 disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-950/40 disabled:before:border-transparent disabled:before:bg-gray-100 disabled:before:from-transparent dark:border-0 dark:bg-primary-600 dark:before:border-0 dark:before:border-t dark:before:border-primary-400 dark:before:shadow-inner dark:before:shadow-white/10 dark:hover:bg-primary-700 dark:active:bg-primary-800 dark:active:before:from-primary-700 dark:disabled:border dark:disabled:border-gray-800/50 disabled:dark:bg-gray-900 dark:disabled:before:bg-gray-900 dark:disabled:before:from-gray-900 dark:disabled:before:shadow-none [&>*:not(.sr-only)]:relative"
>
<svg class="size-5 relative" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-20 dark:opacity-50" d="M7.40705 15L5.10627 16.7375C5.0234 16.8039 4.92499 16.848 4.82033 16.8658C4.71567 16.8836 4.6082 16.8744 4.50806 16.8392C4.40793 16.8039 4.31842 16.7437 4.24798 16.6643C4.17755 16.5849 4.12851 16.4888 4.10549 16.3852L3.13986 12.0391C3.11906 11.9458 3.11993 11.8489 3.14241 11.756C3.16489 11.6631 3.20839 11.5766 3.26955 11.5031L5.63752 8.66484C5.5469 10.4883 5.99221 12.6117 7.40705 15ZM16.7305 11.5031L14.3625 8.66484C14.4571 10.4883 14.0078 12.6117 12.593 15L14.8938 16.7375C14.9766 16.8039 15.075 16.848 15.1797 16.8658C15.2844 16.8836 15.3918 16.8744 15.492 16.8392C15.5921 16.8039 15.6816 16.7437 15.7521 16.6643C15.8225 16.5849 15.8715 16.4888 15.8946 16.3852L16.8602 12.0391C16.881 11.9458 16.8801 11.8489 16.8576 11.756C16.8351 11.6631 16.7917 11.5766 16.7305 11.5031Z" fill="currentColor"></path>
<path
d="M11.875 17.5C11.875 17.6658 11.8092 17.8247 11.6919 17.9419C11.5747 18.0591 11.4158 18.125 11.25 18.125H8.75C8.58424 18.125 8.42527 18.0591 8.30806 17.9419C8.19085 17.8247 8.125 17.6658 8.125 17.5C8.125 17.3342 8.19085 17.1753 8.30806 17.0581C8.42527 16.9408 8.58424 16.875 8.75 16.875H11.25C11.4158 16.875 11.5747 16.9408 11.6919 17.0581C11.8092 17.1753 11.875 17.3342 11.875 17.5ZM10 8.75C10.1854 8.75 10.3667 8.69501 10.5208 8.592C10.675 8.48899 10.7952 8.34257 10.8661 8.17126C10.9371 7.99996 10.9557 7.81146 10.9195 7.6296C10.8833 7.44774 10.794 7.2807 10.6629 7.14959C10.5318 7.01847 10.3648 6.92919 10.1829 6.89301C10.001 6.85684 9.81254 6.8754 9.64123 6.94636C9.46993 7.01732 9.32351 7.13748 9.2205 7.29165C9.11748 7.44582 9.0625 7.62708 9.0625 7.8125C9.0625 8.06114 9.16127 8.2996 9.33709 8.47541C9.5129 8.65123 9.75136 8.75 10 8.75ZM17.4703 12.1742L16.5047 16.5203C16.4589 16.7267 16.3615 16.9181 16.2216 17.0766C16.0817 17.2351 15.9039 17.3555 15.7048 17.4266C15.5057 17.4977 15.2918 17.5172 15.0832 17.4831C14.8745 17.4491 14.6779 17.3627 14.5117 17.232L12.3836 15.625H7.61797L5.48828 17.232C5.3221 17.3627 5.12549 17.4491 4.91684 17.4831C4.70819 17.5172 4.49431 17.4977 4.29522 17.4266C4.09613 17.3555 3.91832 17.2351 3.77842 17.0766C3.63853 16.9181 3.54112 16.7267 3.49531 16.5203L2.52969 12.1742C2.48873 11.9877 2.4908 11.7943 2.53574 11.6087C2.58068 11.4231 2.66731 11.2502 2.78906 11.1031L5.02031 8.42656C5.0952 7.44292 5.32102 6.47666 5.68984 5.56172C6.69766 3.03515 8.50234 1.45 9.23437 0.885935C9.45348 0.716157 9.72281 0.624023 10 0.624023C10.2772 0.624023 10.5465 0.716157 10.7656 0.885935C11.4953 1.45 13.3023 3.03515 14.3102 5.56172C14.679 6.47666 14.9048 7.44292 14.9797 8.42656L17.2109 11.1031C17.3327 11.2502 17.4193 11.4231 17.4643 11.6087C17.5092 11.7943 17.5113 11.9877 17.4703 12.1742ZM7.76797 14.375H12.232C13.882 11.4422 14.1906 8.63437 13.1492 6.025C12.2305 3.72187 10.507 2.26562 10 1.875C9.49141 2.26562 7.76797 3.72187 6.84922 6.025C5.80937 8.63437 6.11797 11.4422 7.76797 14.375ZM6.59609 14.832C5.75495 13.3034 5.24453 11.801 5.06484 10.325L3.75 11.9031L4.71562 16.25L4.72969 16.2398L6.59609 14.832ZM16.25 11.9031L14.9352 10.325C14.757 11.7979 14.2477 13.3003 13.407 14.832L15.2703 16.2383L15.2844 16.2484L16.25 11.9031Z"
fill="currentColor"
></path>
</svg>
<span class="text-nowrap">Request A Quote</span></a
>
</div>
<button class="hidden *:select-none *:disabled:opacity-20 dark:*:disabled:!text-white dark:hover:bg-gray-500/15 group h-9 items-center justify-center gap-1.5 rounded-[--btn-border-radius] bg-gray-100 px-3 text-base text-gray-800 hover:bg-gray-200/75 active:bg-gray-100 disabled:border disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-950 dark:bg-gray-500/10 dark:text-gray-300 dark:active:bg-gray-500/10 dark:disabled:border-gray-800/50 disabled:dark:bg-gray-900 [&>*:not(.sr-only)]:relative">
<span class="text-sm">Learn more</span>
<svg class="-mr-1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m19 12l12 12l-12 12"/></svg>
</button>
</div>
</div>
<div class="-mx-6 relative mt-8 sm:mt-12 max-w-xl sm:mx-auto">
<div class="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 dark:opacity-10 [background-image:linear-gradient(to_bottom,transparent_98%,theme(colors.gray.200/75%)_98%),linear-gradient(to_right,transparent_94%,_theme(colors.gray.200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)]"></div>
<div class="absolute top-12 inset-x-0 w-2/3 h-1/3 -z-[1] rounded-full bg-primary-300 dark:bg-white/10 mx-auto blur-3xl"></div>
<div class="swiper proofSlides pb-6">
<div class="swiper-wrapper">
<div class="px-6 pt-2 pb-12 swiper-slide">
<div class="bg-white shadow-xl shadow-gray-950/5 p-[--card-padding] rounded-[--card-border-radius] border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg] relative border-[length:var(--border-width)] [--anchor:100] [--border-radius:calc(var(--radius)*1px)] [--border-width:calc(var(--border)*1px)] [--border:1] [--glow:60] [--hue:179] [--lightness:55%] dark:[--lightness:14%] [--opacity:1] [--radius:24] [--saturation:78%] dark:[--saturation:97%] [--speed:2]">
<div>
<svg class="h-12 w-fit mx-auto dark:hidden" xmlns="http://www.w3.org/2000/svg" width="512" height="209" viewBox="0 0 512 209" fill="none">
<g clip-path="url(#clip0_235_8)">
<path d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z" fill="#05BDBA"/>
<path d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z" fill="#05BDBA"/>
<path d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z" fill="#05BDBA"/>
<path d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z" fill="#05BDBA"/>
<path d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z" fill="#05BDBA"/>
<path d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z" fill="#05BDBA"/>
<path d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z" fill="#014847"/>
<path d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z" fill="#014847"/>
<path d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z" fill="#014847"/>
<path d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z" fill="#014847"/>
<path d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z" fill="#014847"/>
<path d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z" fill="#014847"/>
<path d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z" fill="#014847"/>
</g>
<defs>
<clipPath id="clip0_235_8">
<rect width="512" height="208.126" fill="white"/>
</clipPath>
</defs>
</svg>
<img src="./airtel.jpg" alt="Proof 1" class="h-24 w-auto mx-auto" />
<p class="mt-6 text-lg text-gray-950 dark:text-white text-center">Lightning Quick Speed</p>
</div>
<span class="glow absolute inset-[calc(var(--border-width)*-1)] rounded-[--card-border-radius] border-[length:var(--border-width)] border-transparent ![mask-clip:padding-box,_border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]">
<span class="absolute inline-block aspect-square h-20 bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] dark:bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0.75),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] opacity-[var(--opacity)] [animation:loop_5s_infinite_linear] [offset-anchor:calc(var(--anchor)*1%)_50%] [offset-path:rect(0_100%_100%_0_round_calc(var(--glow)*1px))]"></span>
</span>
</div>
</div>
<div class="px-6 pt-2 pb-12 swiper-slide">
<div class="bg-white shadow-xl shadow-gray-950/5 p-[--card-padding] rounded-[--card-border-radius] border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg] relative border-[length:var(--border-width)] [--anchor:100] [--border-radius:calc(var(--radius)*1px)] [--border-width:calc(var(--border)*1px)] [--border:1] [--glow:60] [--hue:295] [--lightness:63%] [--opacity:1] [--radius:24] [--saturation:100%] [--speed:2]">
<div>
<img src="./tata.jpg" alt="Proof 2" class="h-24 w-auto mx-auto" />
<p class="mt-6 text-lg text-gray-950 dark:text-white text-center">100% Secure</p>
</div>
<span class="glow absolute inset-[calc(var(--border-width)*-1)] rounded-[--card-border-radius] border-[length:var(--border-width)] border-transparent ![mask-clip:padding-box,_border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]">
<span class="absolute inline-block aspect-square h-20 bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] dark:bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0.75),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] opacity-[var(--opacity)] [animation:loop_5s_infinite_linear] [offset-anchor:calc(var(--anchor)*1%)_50%] [offset-path:rect(0_100%_100%_0_round_calc(var(--glow)*1px))]"></span>
</span>
</div>
</div>
<div class="px-6 pt-2 pb-12 swiper-slide">
<div class="bg-white shadow-xl shadow-gray-950/5 p-[--card-padding] rounded-[--card-border-radius] border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg] relative border-[length:var(--border-width)] [--anchor:100] [--border-radius:calc(var(--radius)*1px)] [--border-width:calc(var(--border)*1px)] [--border:1] [--glow:60] [--hue:295] [--lightness:63%] [--opacity:1] [--radius:24] [--saturation:100%] [--speed:2]">
<div>
<img src="./bsnl.jpg" alt="Proof 2" class="h-24 w-auto mx-auto" />
<p class="mt-6 text-lg text-gray-950 dark:text-white text-center">24/7 Support</p>
</div>
<span class="glow absolute inset-[calc(var(--border-width)*-1)] rounded-[--card-border-radius] border-[length:var(--border-width)] border-transparent ![mask-clip:padding-box,_border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]">
<span class="absolute inline-block aspect-square h-20 bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] dark:bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0.75),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] opacity-[var(--opacity)] [animation:loop_5s_infinite_linear] [offset-anchor:calc(var(--anchor)*1%)_50%] [offset-path:rect(0_100%_100%_0_round_calc(var(--glow)*1px))]"></span>
</span>
</div>
</div>
<div class="px-6 pt-2 pb-12 swiper-slide">
<div class="bg-white shadow-xl shadow-accent-950/5 p-[--card-padding] rounded-[--card-border-radius] border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg] relative border-[length:var(--border-width)] [--anchor:100] [--border-radius:calc(var(--radius)*1px)] [--border-width:calc(var(--border)*1px)] [--border:1] [--glow:60] [--hue:240] [--lightness:67%] [--opacity:1] [--radius:24] [--saturation:84%] [--speed:2]">
<div>
<div class="h-12 w-fit mx-auto">
<img src="./jio.png" alt="Proof 3" class="h-12 w-auto mx-auto" />
</div>
<p class="mt-6 text-lg text-gray-950 dark:text-white text-center">30% Increase in revenue</p>
</div>
<span class="glow absolute inset-[calc(var(--border-width)*-1)] rounded-[--card-border-radius] border-[length:var(--border-width)] border-transparent ![mask-clip:padding-box,_border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]">
<span class="absolute inline-block aspect-square h-20 bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] dark:bg-[radial-gradient(circle_at_right,hsl(0_0%_100%/0.75),transparent_50%),radial-gradient(circle_at_right,hsl(var(--hue)_var(--saturation)_var(--lightness,50%)/1)_50%,transparent)] opacity-[var(--opacity)] [animation:loop_5s_infinite_linear] [offset-anchor:calc(var(--anchor)*1%)_50%] [offset-path:rect(0_100%_100%_0_round_calc(var(--glow)*1px))]"></span>
</span>
</div>
</div>
</div>
<div class="swiper-pagination -mb-3 *:!rounded-lg *:!w-14 *:!h-0.5"></div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="pt-36">
<div class="mx-auto px-6 max-w-6xl text-gray-500">
<div class="text-center">
<h2 class="text-3xl text-gray-950 dark:text-white font-semibold">Our Infra Partners</h2>
<p class="mt-6 text-gray-700 dark:text-gray-300">With Our Portfolio You Can Expect Nothing But The Best From STPL</p>
</div>
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./a.png" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./b.png" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./c.png" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./d.jpg" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./e.jpg" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./f.png" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./g.jpg" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./h.jpg" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
<div class="relative group overflow-hidden p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div aria-hidden="true" class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-warning-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-0 dark:group-hover:opacity-5"></div>
<div class="relative">
<div class="relative w-full h-full rounded-[calc(var(--card-border-radius)/2)] overflow-hidden">
<img src="./i.png" alt="Custom Image" class="w-full h-full object-cover" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="py-36">
<div class="mx-auto px-6 max-w-6xl text-gray-500">
<div class="text-center">
<h2 class="text-3xl text-gray-950 dark:text-white font-semibold">Loved by the Community</h2>
<p class="mt-6 text-gray-700 dark:text-gray-300">Harum quae dolore orrupti aut temporibus ariatur.</p>
</div>
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="space-y-3">
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/1.jpg" loading="lazy" width="120" height="120">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Jonathan Yombo</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">Software Ingeneer</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.
</p>
</blockquote>
</div>
</div>
</div>
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/6.jpg" loading="lazy" width="120" height="120">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Yves Kalume</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">GDE - Android</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.
</p>
</blockquote>
</div>
</div>
</div>
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/7.jpg" loading="lazy" width="120" height="120">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Yucel Faruksahan</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">Tailkits Creator</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
Great work on tailfolio template. This is one of the best personal website that I have seen so far :)
</p>
</blockquote>
</div>
</div>
</div>
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/8.jpg" loading="lazy" width="120" height="120">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Anonymous author</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">Doing something</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.
</p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="space-y-3">
<!-- Start of Testimonial 3 -->
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/4.jpg" loading="lazy" width="120" height="120">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Shekinah Tshiokufila</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">Senior Software Ingeneer</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.
</p>
</blockquote>
</div>
</div>
</div>
<!-- Start of Testimonial 4 -->
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/2.jpg" loading="lazy" width="120" height="120">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Oketa Fred</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">Fullstack Developer</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.
</p>
</blockquote>
</div>
</div>
</div>
<!-- Start of Testimonial 5 -->
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/5.jpg">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Zeki</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">Founder of ChatExtend</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.
</p>
</blockquote>
</div>
</div>
</div>
<div class="p-[--card-padding] rounded-[--card-border-radius] border bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] group">
<div class="flex gap-3">
<span class="relative block rounded-[--avatar-border-radius] text-lg size-10">
<img class="h-full w-full rounded-[--avatar-border-radius] object-cover" alt="John Doe" src="https://randomuser.me/api/portraits/men/9.jpg" loading="lazy" width="120" height="120">
</span>
<div class="w-[calc(100%-3.25rem)]">
<h3 class="font-medium text-gray-950 dark:text-white">Joseph Kitheka</h3>
<span class="block text-sm tracking-wide text-gray-600 dark:text-gray-400">Fullstack Developer</span>
<blockquote class="mt-3">
<p class="text-gray-700 dark:text-gray-300">
Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="pb-36">
<div class="mx-auto px-6 max-w-6xl text-gray-500">
<div class="text-center">
<h2 class="text-3xl text-gray-950 dark:text-white font-semibold">Built By Us <br> For You</h2>
<p class="mt-6 text-gray-700 dark:text-gray-300">For Every Project STPL Undertakes, We Ensure a 100% Satisfaction Rate! </p>
</div>
<div class="mt-12 max-w-lg mx-auto flex justify-center flex-wrap gap-3">
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/1.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/2.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/3.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/4.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/5.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/6.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/7.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/1.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/8.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/9.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
<a href="" target="_blank" title="Méschac Irung" class="size-16 rounded-full border border-gray-950/5 dark:border-white/5">
<img alt="John Doe" src="https://randomuser.me/api/portraits/men/10.jpg" class="rounded-full" loading="lazy" width="120" height="120">
</a>
</div>
</div>
</div>
</section>
</main>
<footer class="rounded-xl border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color]">
<div class="max-w-6xl mx-auto space-y-16 px-6 py-16 text-gray-600 2xl:px-0">
<div class="flex flex-wrap items-center justify-between gap-4 border-b pb-8 border-[--ui-light-border-color] dark:border-[--ui-dark-border-color]">
<a href="/" aria-label="tailus logo">
<img src="/stpl.svg" alt="tailus logo" class="h-8 w-auto"/>
</a>
<div class="flex gap-3">
<a href="https://github.com/aarnav1729" target="blank" aria-label="github" class="size-8 flex *:m-auto rounded-[--btn-border-radius] text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="https://twitter.com/" target="blank" aria-label="twitter" class="size-8 flex *:m-auto rounded-[--btn-border-radius] text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z"/>
</svg>
</svg>
</a>
<a href="https://youtube.com/" target="blank" aria-label="medium" class="size-8 flex *:m-auto rounded-[--btn-border-radius] text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73"/></svg>
</a>
</div>
</div>
<div class="grid grid-cols-2 gap-6 sm:grid-cols-4">
<div>
<span class="font-medium text-gray-950 dark:text-white">Navigate</span>
<ul class="mt-4 list-inside space-y-4">
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">About</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Services</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Telecom Partners</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Infra Partners</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Contact</a>
</li>
</ul>
</div>
<div>
<span class="text-sm font-medium text-gray-950 dark:text-white">Services</span>
<ul class="mt-4 list-inside space-y-4">
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Internet Leased Lines (ILL)</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Telephones (Landline)/ PRI</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">VoIP Services</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Cloud Collaboration</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">In Building Solutions</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">DTH Service for Corporate Offices</a>
</li>
</ul>
</div>
</div>
<div class="flex items-center justify-between rounded-md bg-gray-100 px-6 py-3 dark:bg-gray-900">
<span class="text-gray-600 dark:text-gray-400">© All Rights Reserved. STPL 2024</span>
<a href="mailto:[email protected]" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Email Us!</a>
</div>
</div>
</footer>
<script type="module" src="./main.js"></script>
<script type="module">
import Swiper from 'swiper/bundle';
import { Pagination } from 'swiper/modules';
import 'swiper/css/bundle';
import 'swiper/css/pagination';
import 'swiper/css/effect-cards';
const swiper = new Swiper('.proofSlides', {
effect: "cube",
cubeEffect : {
slideShadows: false,
shadow: false,
shadowOffset: 20,
shadowScale: 0.94,
},
loop: true,
autoplay : {
delay: 3000,
duration : 500
},
grabCursor: true,
modules: [Pagination],
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
}
});
</script>
<script>
document.getElementById('menu-button').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
</script>
</body>
</html>