-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
2515 lines (2422 loc) · 206 KB
/
Copy pathindex.html
File metadata and controls
2515 lines (2422 loc) · 206 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Runzbuzz</title>
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css"/>
<link rel="stylesheet" href="assets/css/animate.css"/>
<link rel="stylesheet" href="./src/css/tailwind.css"/>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7P8PF3JYHJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7P8PF3JYHJ');
</script>
<!-- ==== WOW JS ==== -->
<script src="assets/js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body>
<!-- ====== Navbar Section Start -->
<div class="absolute top-0 left-0 z-40 flex items-center w-full bg-transparent ud-header">
<div class="container px-4 mx-auto">
<div class="relative flex items-center justify-between -mx-4">
<div class="max-w-full px-4 w-60">
<a href="index.html" class="block w-full py-5 navbar-logo">
<img src="assets/images/logo/logo-white.png" alt="logo" class="w-full header-logo"/>
</a>
</div>
<div class="flex items-center justify-between w-full px-4">
<div>
<button id="navbarToggler"
class="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden">
<span class="relative my-[6px] block h-[2px] w-[30px] bg-white"></span>
<span class="relative my-[6px] block h-[2px] w-[30px] bg-white"></span>
<span class="relative my-[6px] block h-[2px] w-[30px] bg-white"></span>
</button>
<nav
id="navbarCollapse"
class="absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6">
<ul class="blcok lg:flex 2xl:ml-20">
<li class="relative group">
<a
href="#home"
class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70">
Home
</a>
</li>
<li class="relative group">
<a
href="#services"
class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10">
Services
</a>
</li>
<li class="relative group">
<a
href="#features"
class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10">
Features
</a>
</li>
<li class="relative group">
<a
href="#how"
class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10">
How it works
</a>
</li>
<li class="relative group">
<a
href="#plans"
class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10">
Plans
</a>
</li>
<li class="relative group">
<a
href="#team"
class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10">
Team
</a>
</li>
<li class="relative group">
<a
href="#contact"
class="flex py-2 mx-8 text-base font-medium ud-menu-scroll text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div class="flex items-center justify-end pr-16 lg:pr-0">
<label for="themeSwitcher" class="inline-flex items-center cursor-pointer"
aria-label="themeSwitcher" name="themeSwitcher">
<input type="checkbox" name="themeSwitcher" id="themeSwitcher" class="sr-only"/>
<span class="block text-white dark:hidden">
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.3125 1.50001C12.675 1.31251 12.0375 1.16251 11.3625 1.05001C10.875 0.975006 10.35 1.23751 10.1625 1.68751C9.93751 2.13751 10.05 2.70001 10.425 3.00001C13.0875 5.47501 14.0625 9.11251 12.975 12.525C11.775 16.3125 8.25001 18.975 4.16251 19.0875C3.63751 19.0875 3.22501 19.425 3.07501 19.9125C2.92501 20.4 3.15001 20.925 3.56251 21.1875C4.50001 21.75 5.43751 22.2 6.37501 22.5C7.46251 22.8375 8.58751 22.9875 9.71251 22.9875C11.625 22.9875 13.5 22.5 15.1875 21.5625C17.85 20.1 19.725 17.7375 20.55 14.8875C22.1625 9.26251 18.975 3.37501 13.3125 1.50001ZM18.9375 14.4C18.2625 16.8375 16.6125 18.825 14.4 20.0625C12.075 21.3375 9.41251 21.6 6.90001 20.85C6.63751 20.775 6.33751 20.6625 6.07501 20.55C10.05 19.7625 13.35 16.9125 14.5875 13.0125C15.675 9.56251 15 5.92501 12.7875 3.07501C17.5875 4.68751 20.2875 9.67501 18.9375 14.4Z"/>
</svg>
</span>
<span class="hidden text-white dark:block">
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2172_3070)">
<path
d="M12 6.89999C9.18752 6.89999 6.90002 9.18749 6.90002 12C6.90002 14.8125 9.18752 17.1 12 17.1C14.8125 17.1 17.1 14.8125 17.1 12C17.1 9.18749 14.8125 6.89999 12 6.89999ZM12 15.4125C10.125 15.4125 8.58752 13.875 8.58752 12C8.58752 10.125 10.125 8.58749 12 8.58749C13.875 8.58749 15.4125 10.125 15.4125 12C15.4125 13.875 13.875 15.4125 12 15.4125Z"/>
<path
d="M12 4.2375C12.45 4.2375 12.8625 3.8625 12.8625 3.375V1.5C12.8625 1.05 12.4875 0.637497 12 0.637497C11.55 0.637497 11.1375 1.0125 11.1375 1.5V3.4125C11.175 3.8625 11.55 4.2375 12 4.2375Z"/>
<path
d="M12 19.7625C11.55 19.7625 11.1375 20.1375 11.1375 20.625V22.5C11.1375 22.95 11.5125 23.3625 12 23.3625C12.45 23.3625 12.8625 22.9875 12.8625 22.5V20.5875C12.8625 20.1375 12.45 19.7625 12 19.7625Z"/>
<path
d="M18.1125 6.74999C18.3375 6.74999 18.5625 6.67499 18.7125 6.48749L19.9125 5.28749C20.25 4.94999 20.25 4.42499 19.9125 4.08749C19.575 3.74999 19.05 3.74999 18.7125 4.08749L17.5125 5.28749C17.175 5.62499 17.175 6.14999 17.5125 6.48749C17.6625 6.67499 17.8875 6.74999 18.1125 6.74999Z"/>
<path
d="M5.32501 17.5125L4.12501 18.675C3.78751 19.0125 3.78751 19.5375 4.12501 19.875C4.27501 20.025 4.50001 20.1375 4.72501 20.1375C4.95001 20.1375 5.17501 20.0625 5.32501 19.875L6.52501 18.675C6.86251 18.3375 6.86251 17.8125 6.52501 17.475C6.18751 17.175 5.62501 17.175 5.32501 17.5125Z"/>
<path
d="M22.5 11.175H20.5875C20.1375 11.175 19.725 11.55 19.725 12.0375C19.725 12.4875 20.1 12.9 20.5875 12.9H22.5C22.95 12.9 23.3625 12.525 23.3625 12.0375C23.3625 11.55 22.95 11.175 22.5 11.175Z"/>
<path
d="M4.23751 12C4.23751 11.55 3.86251 11.1375 3.37501 11.1375H1.50001C1.05001 11.1375 0.637512 11.5125 0.637512 12C0.637512 12.45 1.01251 12.8625 1.50001 12.8625H3.41251C3.86251 12.8625 4.23751 12.45 4.23751 12Z"/>
<path
d="M18.675 17.5125C18.3375 17.175 17.8125 17.175 17.475 17.5125C17.1375 17.85 17.1375 18.375 17.475 18.7125L18.675 19.9125C18.825 20.0625 19.05 20.175 19.275 20.175C19.5 20.175 19.725 20.1 19.875 19.9125C20.2125 19.575 20.2125 19.05 19.875 18.7125L18.675 17.5125Z"/>
<path
d="M5.32501 4.125C4.98751 3.7875 4.46251 3.7875 4.12501 4.125C3.78751 4.4625 3.78751 4.9875 4.12501 5.325L5.32501 6.525C5.47501 6.675 5.70001 6.7875 5.92501 6.7875C6.15001 6.7875 6.37501 6.7125 6.52501 6.525C6.86251 6.1875 6.86251 5.6625 6.52501 5.325L5.32501 4.125Z"/>
</g>
<defs>
<clipPath id="clip0_2172_3070">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
</label>
<!--
<div class="hidden sm:flex">
<a
href="signin.html"
class="loginBtn px-[22px] py-2 text-base font-medium text-white hover:opacity-70"
>
Sign In
</a>
<a
href="signup.html"
class="px-6 py-2 text-base font-medium text-white duration-300 ease-in-out rounded-md bg-white/20 signUpBtn hover:bg-white/100 hover:text-dark"
>
Sign Up
</a>
</div>
-->
</div>
</div>
</div>
</div>
</div>
<!-- ====== Navbar Section End -->
<!-- ====== Hero Section Start -->
<div
id="home"
class="relative overflow-hidden bg-primary pt-[120px] md:pt-[130px] lg:pt-[160px]"
style="background-image: url('assets/images/hero/white-launch.png'); background-repeat: no-repeat; background-position: center; background-size: cover">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full px-4">
<div class="hero-content wow fadeInUp mx-auto max-w-[780px] text-center" data-wow-delay=".2s">
<h1 class="mb-6 text-3xl font-bold leading-snug text-white sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]">
Build What You Imagine, Grow It As You Go</h1>
<p class="mx-auto mb-9 max-w-[600px] text-base font-medium text-white sm:text-lg sm:leading-[1.44]">
From idea to launch, we help turn your vision into reality, delivering fast, flexible, and
scalable solutions that evolve with you.
</p>
<ul class="flex flex-wrap items-center justify-center gap-5 mb-10">
<li>
<a
href="#contact"
class="inline-flex items-center justify-center rounded-md bg-white px-7 py-[14px] text-center text-base font-medium text-dark shadow-1 transition duration-300 ease-in-out hover:bg-gray-2 hover:text-body-color">
Let’s Talk
</a>
</li>
<li>
<a
href="#how"
class="flex items-center gap-4 rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark">
Learn More
</a>
</li>
</ul>
<div>
<p class="text-base font-medium text-center text-white">We understand that ideas evolve, and
that’s why we never charge extra when they do.</p>
</div>
</div>
</div>
<div class="w-full px-4">
<div class="wow fadeInUp relative z-10 mx-auto max-w-[845px]" data-wow-delay=".35s">
<div class="mt-8">
<!-- <img style="opacity: 0.75" src="assets/images/hero/white-launch.png" alt="hero" height="10px" class="max-w-full mx-auto rounded-t-xl rounded-tr-xl" />-->
<!-- <img src="assets/images/hero/hero-image.jpg" alt="hero" class="max-w-full mx-auto rounded-t-xl rounded-tr-xl" />-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====== Hero Section End -->
<!-- ====== Features Section Start -->
<section class="pb-8 pt-20 dark:bg-dark lg:pb-[70px] lg:pt-[120px]" id="features">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4">
<div class="mx-auto mb-12 max-w-[485px] text-center lg:mb-[70px]">
<span class="block mb-2 text-lg font-semibold text-primary">Features</span>
<h2 class="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]">
Main Features of Our Services</h2>
<p class="text-base text-body-color dark:text-dark-6"></p>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4 md:w-1/2 lg:w-1/4">
<div class="mb-12 wow fadeInUp group" data-wow-delay=".1s">
<div class="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary">
<span class="absolute left-0 top-0 -z-1 mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary/20 duration-300 group-hover:rotate-45"></span>
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M30.5801 8.30514H27.9926C28.6113 7.85514 29.1176 7.34889 29.3426 6.73014C29.6801 5.88639 29.6801 4.48014 27.9363 2.84889C26.0801 1.04889 24.3926 1.04889 23.3238 1.33014C20.9051 1.94889 19.2738 4.76139 18.3738 6.78639C17.4738 4.76139 15.8426 2.00514 13.4238 1.33014C12.3551 1.04889 10.6676 1.10514 8.81133 2.84889C7.06758 4.53639 7.12383 5.88639 7.40508 6.73014C7.63008 7.34889 8.13633 7.85514 8.75508 8.30514H5.71758C4.08633 8.30514 2.73633 9.65514 2.73633 11.2864V14.9989C2.73633 16.5739 4.03008 17.8676 5.60508 17.9239V31.6489C5.60508 33.5614 7.18008 35.1926 9.14883 35.1926H27.5426C29.4551 35.1926 31.0863 33.6176 31.0863 31.6489V17.8676C32.4926 17.6426 33.5613 16.4051 33.5613 14.9426V11.2301C33.5613 9.59889 32.2113 8.30514 30.5801 8.30514ZM23.9426 3.69264C23.9988 3.69264 24.1676 3.63639 24.3363 3.63639C24.7301 3.63639 25.3488 3.80514 26.1926 4.59264C26.8676 5.21139 27.0363 5.66139 26.9801 5.77389C26.6988 6.56139 23.8863 7.40514 20.6801 7.74264C21.4676 5.99889 22.6488 4.03014 23.9426 3.69264ZM10.4988 4.64889C11.3426 3.86139 11.9613 3.69264 12.3551 3.69264C12.5238 3.69264 12.6363 3.74889 12.7488 3.74889C14.0426 4.08639 15.2801 5.99889 16.0676 7.79889C12.8613 7.46139 10.0488 6.61764 9.76758 5.83014C9.71133 5.66139 9.88008 5.26764 10.4988 4.64889ZM5.26758 14.9426V11.2301C5.26758 11.0051 5.43633 10.7801 5.71758 10.7801H30.5801C30.8051 10.7801 31.0301 10.9489 31.0301 11.2301V14.9426C31.0301 15.1676 30.8613 15.3926 30.5801 15.3926H5.71758C5.49258 15.3926 5.26758 15.2239 5.26758 14.9426ZM27.5426 32.6614H9.14883C8.58633 32.6614 8.13633 32.2114 8.13633 31.6489V17.9239H28.4988V31.6489C28.5551 32.2114 28.1051 32.6614 27.5426 32.6614Z"
fill="white"/>
</svg>
</div>
<h4 class="mb-3 text-xl font-bold text-dark dark:text-white">Flexible by Design</h4>
<p class="mb-8 text-body-color dark:text-dark-6 lg:mb-9">We adapt as you grow. Our plans are
designed for evolving ideas, with no penalties for changing direction.</p>
<a href="#how"
class="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary">Learn
More</a>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/4">
<div class="mb-12 wow fadeInUp group" data-wow-delay=".15s">
<div class="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary">
<span class="absolute left-0 top-0 -z-1 mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary/20 duration-300 group-hover:rotate-45"></span>
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M30.5998 1.01245H5.39981C2.98105 1.01245 0.956055 2.9812 0.956055 5.4562V30.6562C0.956055 33.075 2.9248 35.0437 5.39981 35.0437H30.5998C33.0186 35.0437 34.9873 33.075 34.9873 30.6562V5.39995C34.9873 2.9812 33.0186 1.01245 30.5998 1.01245ZM5.39981 3.48745H30.5998C31.6123 3.48745 32.4561 4.3312 32.4561 5.39995V11.1937H3.4873V5.39995C3.4873 4.38745 4.38731 3.48745 5.39981 3.48745ZM3.4873 30.6V13.725H23.0623V32.5125H5.39981C4.38731 32.5125 3.4873 31.6125 3.4873 30.6ZM30.5998 32.5125H25.5373V13.725H32.4561V30.6C32.5123 31.6125 31.6123 32.5125 30.5998 32.5125Z"
fill="white"/>
</svg>
</div>
<h4 class="mb-3 text-xl font-bold text-dark dark:text-white">Tailored Research</h4>
<p class="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
When your challenge needs more than off-the-shelf solutions, we offer tailored research and
experimentation, focused entirely on your use case and goals.
<!-- It's optional, flexible, and built-->
<!-- to bring real-world value.-->
</p>
<a href="#how"
class="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary">Learn
More</a>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/4">
<div class="mb-12 wow fadeInUp group" data-wow-delay=".2s">
<div class="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary">
<span class="absolute left-0 top-0 -z-1 mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary/20 duration-300 group-hover:rotate-45"></span>
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M33.5613 21.4677L31.3675 20.1177C30.805 19.7239 30.0175 19.9489 29.6238 20.5114C29.23 21.1302 29.455 21.8614 30.0175 22.2552L31.48 23.2114L18.1488 31.5927L4.76127 23.2114L6.22377 22.2552C6.84252 21.8614 7.01127 21.0739 6.61752 20.5114C6.22377 19.8927 5.43627 19.7239 4.87377 20.1177L2.68002 21.4677C2.11752 21.8614 1.72377 22.4802 1.72377 23.1552C1.72377 23.8302 2.06127 24.5052 2.68002 24.8427L17.08 33.8989C17.4175 34.1239 17.755 34.1802 18.1488 34.1802C18.5425 34.1802 18.88 34.0677 19.2175 33.8989L33.5613 24.8989C34.1238 24.5052 34.5175 23.8864 34.5175 23.2114C34.5175 22.5364 34.18 21.8614 33.5613 21.4677Z"
fill="white"/>
<path
d="M20.1175 20.4552L18.1488 21.6364L16.18 20.3989C15.5613 20.0052 14.83 20.2302 14.4363 20.7927C14.0425 21.4114 14.2675 22.1427 14.83 22.5364L17.4738 24.1677C17.6988 24.2802 17.9238 24.3364 18.1488 24.3364C18.3738 24.3364 18.5988 24.2802 18.8238 24.1677L21.4675 22.5364C22.0863 22.1427 22.255 21.3552 21.8613 20.7927C21.4675 20.2302 20.68 20.0614 20.1175 20.4552Z"
fill="white"/>
<path
d="M7.74252 18.0927L11.455 20.4552C11.68 20.5677 11.905 20.6239 12.13 20.6239C12.5238 20.6239 12.9738 20.3989 13.1988 20.0052C13.5925 19.3864 13.3675 18.6552 12.805 18.2614L9.09252 15.8989C8.47377 15.5052 7.74252 15.7302 7.34877 16.2927C6.95502 16.9677 7.12377 17.7552 7.74252 18.0927Z"
fill="white"/>
<path
d="M5.04252 16.1802C5.43627 16.1802 5.88627 15.9552 6.11127 15.5614C6.50502 14.9427 6.28002 14.2114 5.71752 13.8177L4.81752 13.2552L5.71752 12.6927C6.33627 12.2989 6.50502 11.5114 6.11127 10.9489C5.71752 10.3302 4.93002 10.1614 4.36752 10.5552L1.72377 12.1864C1.33002 12.4114 1.10502 12.8052 1.10502 13.2552C1.10502 13.7052 1.33002 14.0989 1.72377 14.3239L4.36752 15.9552C4.53627 16.1239 4.76127 16.1802 5.04252 16.1802Z"
fill="white"/>
<path
d="M8.41752 10.7239C8.64252 10.7239 8.86752 10.6677 9.09252 10.5552L12.805 8.1927C13.4238 7.79895 13.5925 7.01145 13.1988 6.44895C12.805 5.8302 12.0175 5.66145 11.455 6.0552L7.74252 8.4177C7.12377 8.81145 6.95502 9.59895 7.34877 10.1614C7.57377 10.4989 7.96752 10.7239 8.41752 10.7239Z"
fill="white"/>
<path
d="M16.18 6.05522L18.1488 4.81772L20.1175 6.05522C20.3425 6.16772 20.5675 6.22397 20.7925 6.22397C21.1863 6.22397 21.6363 5.99897 21.8613 5.60522C22.255 4.98647 22.03 4.25522 21.4675 3.86147L18.8238 2.23022C18.43 1.94897 17.8675 1.94897 17.4738 2.23022L14.83 3.86147C14.2113 4.25522 14.0425 5.04272 14.4363 5.60522C14.83 6.16772 15.6175 6.44897 16.18 6.05522Z"
fill="white"/>
<path
d="M23.4925 8.19267L27.205 10.5552C27.43 10.6677 27.655 10.7239 27.88 10.7239C28.2738 10.7239 28.7238 10.4989 28.9488 10.1052C29.3425 9.48642 29.1175 8.75517 28.555 8.36142L24.8425 5.99892C24.28 5.60517 23.4925 5.83017 23.0988 6.39267C22.705 7.01142 22.8738 7.79892 23.4925 8.19267Z"
fill="white"/>
<path
d="M34.5738 12.1864L31.93 10.5552C31.3675 10.1614 30.58 10.3864 30.1863 10.9489C29.7925 11.5677 30.0175 12.2989 30.58 12.6927L31.48 13.2552L30.58 13.8177C29.9613 14.2114 29.7925 14.9989 30.1863 15.5614C30.4113 15.9552 30.8613 16.1802 31.255 16.1802C31.48 16.1802 31.705 16.1239 31.93 16.0114L34.5738 14.3802C34.9675 14.1552 35.1925 13.7614 35.1925 13.3114C35.1925 12.8614 34.9675 12.4114 34.5738 12.1864Z"
fill="white"/>
<path
d="M24.1675 20.624C24.3925 20.624 24.6175 20.5677 24.8425 20.4552L28.555 18.0927C29.1738 17.699 29.3425 16.9115 28.9488 16.349C28.555 15.7302 27.7675 15.5615 27.205 15.9552L23.4925 18.3177C22.8738 18.7115 22.705 19.499 23.0988 20.0615C23.3238 20.4552 23.7175 20.624 24.1675 20.624Z"
fill="white"/>
</svg>
</div>
<h4 class="mb-3 text-xl font-bold text-dark dark:text-white">Continous Delivery</h4>
<p class="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
We work in short, focused cycles, so you see progress early and often. With frequent updates and
real feedback loops, we make sure what we build stays aligned with your evolving goals.
</p>
<a href="#how"
class="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary">Learn
More</a>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/4">
<div class="mb-12 wow fadeInUp group" data-wow-delay=".25s">
<div class="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary">
<span class="absolute left-0 top-0 -z-1 mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary/20 duration-300 group-hover:rotate-45"></span>
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.355 2.0614H5.21129C3.29879 2.0614 1.72379 3.6364 1.72379 5.5489V12.6927C1.72379 14.6052 3.29879 16.1802 5.21129 16.1802H12.355C14.2675 16.1802 15.8425 14.6052 15.8425 12.6927V5.60515C15.8988 3.6364 14.3238 2.0614 12.355 2.0614ZM13.3675 12.7489C13.3675 13.3114 12.9175 13.7614 12.355 13.7614H5.21129C4.64879 13.7614 4.19879 13.3114 4.19879 12.7489V5.60515C4.19879 5.04265 4.64879 4.59265 5.21129 4.59265H12.355C12.9175 4.59265 13.3675 5.04265 13.3675 5.60515V12.7489Z"
fill="white"/>
<path
d="M31.0863 2.0614H23.9425C22.03 2.0614 20.455 3.6364 20.455 5.5489V12.6927C20.455 14.6052 22.03 16.1802 23.9425 16.1802H31.0863C32.9988 16.1802 34.5738 14.6052 34.5738 12.6927V5.60515C34.5738 3.6364 32.9988 2.0614 31.0863 2.0614ZM32.0988 12.7489C32.0988 13.3114 31.6488 13.7614 31.0863 13.7614H23.9425C23.38 13.7614 22.93 13.3114 22.93 12.7489V5.60515C22.93 5.04265 23.38 4.59265 23.9425 4.59265H31.0863C31.6488 4.59265 32.0988 5.04265 32.0988 5.60515V12.7489Z"
fill="white"/>
<path
d="M12.355 20.0051H5.21129C3.29879 20.0051 1.72379 21.5801 1.72379 23.4926V30.6364C1.72379 32.5489 3.29879 34.1239 5.21129 34.1239H12.355C14.2675 34.1239 15.8425 32.5489 15.8425 30.6364V23.5489C15.8988 21.5801 14.3238 20.0051 12.355 20.0051ZM13.3675 30.6926C13.3675 31.2551 12.9175 31.7051 12.355 31.7051H5.21129C4.64879 31.7051 4.19879 31.2551 4.19879 30.6926V23.5489C4.19879 22.9864 4.64879 22.5364 5.21129 22.5364H12.355C12.9175 22.5364 13.3675 22.9864 13.3675 23.5489V30.6926Z"
fill="white"/>
<path
d="M31.0863 20.0051H23.9425C22.03 20.0051 20.455 21.5801 20.455 23.4926V30.6364C20.455 32.5489 22.03 34.1239 23.9425 34.1239H31.0863C32.9988 34.1239 34.5738 32.5489 34.5738 30.6364V23.5489C34.5738 21.5801 32.9988 20.0051 31.0863 20.0051ZM32.0988 30.6926C32.0988 31.2551 31.6488 31.7051 31.0863 31.7051H23.9425C23.38 31.7051 22.93 31.2551 22.93 30.6926V23.5489C22.93 22.9864 23.38 22.5364 23.9425 22.5364H31.0863C31.6488 22.5364 32.0988 22.9864 32.0988 23.5489V30.6926Z"
fill="white"/>
</svg>
</div>
<h4 class="mb-3 text-xl font-bold text-dark dark:text-white">Full Ownership</h4>
<p class="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
Everything we build, from models to code, belongs to you. We deliver documented solutions that
you can modify, extend, or scale independently, anytime. </p>
<a href="#how"
class="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary">Learn
More</a>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Features Section End -->
<!-- ====== About Section Start -->
<section id="how" class="bg-gray-1 pb-8 pt-20 dark:bg-dark-2 lg:pb-[70px] lg:pt-[120px]">
<div class="container px-4 mx-auto">
<div class="wow fadeInUp" data-wow-delay=".2s">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full px-4 lg:w-1/2">
<div class="mb-12 max-w-[540px] lg:mb-0">
<h2 class="mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]">
How It Works</h2>
<p class="mb-10 text-base leading-relaxed text-body-color dark:text-dark-6">
Runzbuzz gives you a simple, flat-rate subscription for continuous AI and software
development. No scopes, no change fees, and no surprises, just clear, steady progress every
week.
<br>
<ol class="mb-8 text-body-color dark:text-dark-6"
style="list-style-type: decimal; margin-left: 30px">
<li style="margin-top: 10px"><b>Share Your Idea</b><br>
Send a brief description of what you want to build: a feature, an experiment, a product,
or even a rough concept.
No complex documents or long onboarding. Just tell us what you have in mind.
</li>
<li style="margin-top: 10px"><b>Activate Your Subscription</b><br>
We create your project workspace and send you a subscription link. Once payment is
completed, your board goes live within 24 hours, ready for real progress to begin.
</li>
<li style="margin-top: 10px"><b>See Your Ideas Come to Life</b><br>
Access your task board to follow updates, adjust priorities, request changes, or add new
ideas anytime. Enjoy smooth, continuous iteration without extra fees or friction.
</li>
</ol>
</p>
<a
href="#contact"
class="inline-flex items-center justify-center py-3 text-base font-medium text-center text-white border rounded-md border-primary bg-primary px-7 hover:border-blue-dark hover:bg-white hover:text-dark">
Know More
</a>
</div>
</div>
<div class="w-full px-4 lg:w-1/2">
<div class="flex flex-wrap -mx-2 sm:-mx-4 lg:-mx-2 xl:-mx-4">
<div class="w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4">
<div class="mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]">
<img src="./assets/images/about/about-image-01.jpg" alt="about image"
class="object-cover object-center w-full h-full"/>
</div>
</div>
<div class="w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4">
<div class="mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]">
<img src="./assets/images/about/about-image-02.jpg" alt="about image"
class="object-cover object-center w-full h-full"/>
</div>
<div class="relative z-10 mb-4 flex items-center justify-center overflow-hidden bg-primary px-6 py-12 sm:mb-8 sm:h-[160px] sm:p-5 lg:mb-4 xl:mb-8">
<div>
<span class="block text-5xl font-extrabold text-white">13</span>
<span class="block text-base font-semibold text-white">We have</span>
<span class="block text-base font-medium text-white text-opacity-70">Years of experience</span>
</div>
<div>
<span class="absolute top-0 left-0 -z-10">
<svg width="106" height="144" viewBox="0 0 106 144" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.1" x="-67" y="47.127" width="113.378" height="131.304"
transform="rotate(-42.8643 -67 47.127)" fill="url(#paint0_linear_1416_214)"/>
<defs>
<linearGradient id="paint0_linear_1416_214" x1="-10.3111" y1="47.127" x2="-10.3111"
y2="178.431" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</span>
<span class="absolute top-0 right-0 -z-10">
<svg width="130" height="97" viewBox="0 0 130 97" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.1" x="0.86792" y="-6.67725" width="155.563" height="140.614"
transform="rotate(-42.8643 0.86792 -6.67725)" fill="url(#paint0_linear_1416_215)"/>
<defs>
<linearGradient id="paint0_linear_1416_215" x1="78.6495" y1="-6.67725" x2="78.6495"
y2="133.937" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</span>
<span class="absolute bottom-0 right-0 -z-10">
<svg width="175" height="104" viewBox="0 0 175 104" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.1" x="175.011" y="108.611" width="101.246" height="148.179"
transform="rotate(137.136 175.011 108.611)" fill="url(#paint0_linear_1416_216)"/>
<defs>
<linearGradient id="paint0_linear_1416_216" x1="225.634" y1="108.611" x2="225.634"
y2="256.79" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== About Section End -->
<!-- ====== CTA Section Start -->
<!--<section class="relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]">-->
<!-- <div class="container px-4 mx-auto">-->
<!-- <div class="relative overflow-hidden">-->
<!-- <div class="flex flex-wrap items-stretch -mx-4">-->
<!-- <div class="w-full px-4">-->
<!-- <div class="mx-auto max-w-[570px] text-center">-->
<!-- <h2 class="mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]">-->
<!-- <span>What Are You Looking For?</span>-->
<!-- <!–-->
<!-- <span class="text-3xl font-normal md:text-[40px]">Get Started Now</span>-->
<!-- –>-->
<!-- </h2>-->
<!-- <p class="mx-auto mb-6 max-w-[515px] text-base leading-[1.5] text-white">-->
<!-- Whether you’re still shaping your idea, exploring research directions, or ready to launch a-->
<!-- product, we’re here to help. Runzbuzz adapts to every change you make with no friction or-->
<!-- extra charges, just smooth, continuous iteration that brings clarity and momentum to your-->
<!-- project.-->
<!-- </p>-->
<!-- <a-->
<!-- href="#contact"-->
<!-- class="inline-block rounded-md items-center gap-4 rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark">-->
<!-- Contact us-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <span class="absolute top-0 left-0">-->
<!-- <svg width="495" height="470" viewBox="0 0 495 470" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="55" cy="442" r="138" stroke="white" stroke-opacity="0.04" stroke-width="50"/>-->
<!-- <circle cx="446" r="39" stroke="white" stroke-opacity="0.04" stroke-width="20"/>-->
<!-- <path d="M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z" stroke="white"-->
<!-- stroke-opacity="0.08" stroke-width="12"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- <span class="absolute bottom-0 right-0">-->
<!-- <svg width="493" height="470" viewBox="0 0 493 470" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="462" cy="5" r="138" stroke="white" stroke-opacity="0.04" stroke-width="50"/>-->
<!-- <circle cx="49" cy="470" r="39" stroke="white" stroke-opacity="0.04" stroke-width="20"/>-->
<!-- <path d="M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z" stroke="white"-->
<!-- stroke-opacity="0.06" stroke-width="13"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- </div>-->
<!--</section>-->
<!-- ====== CTA Section End -->
<!-- ====== Services Section Start -->
<!--<section id="services" class="relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]">-->
<!-- <div class="container px-4 mx-auto">-->
<!-- <div class="relative overflow-hidden">-->
<!-- <div class="flex flex-wrap items-stretch -mx-4">-->
<!-- <div class="w-full px-4">-->
<!-- <div class="mx-auto max-w-[650px] text-center">-->
<!-- <h2 class="mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]">-->
<!-- <span>Our Services</span>-->
<!-- </h2>-->
<!-- <p class="mx-auto mb-10 max-w-[600px] text-base leading-[1.5] text-white">-->
<!-- Three core services designed to give you clarity, flexibility, and the freedom to build at your own pace.-->
<!-- Whether you're exploring ideas, developing software, or validating concepts, Runzbuzz adapts as you evolve.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Service Cards –>-->
<!-- <div class="flex flex-wrap -mx-4 mt-10">-->
<!-- <!– Card 1 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 backdrop-blur-sm p-8 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-3">AI Research & Consultation</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Explore new ideas, assess feasibility, and make informed decisions through applied research and strategic AI guidance.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Card 2 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 backdrop-blur-sm p-8 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-3">AI & Software Development</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Build intelligent, scalable applications and systems—from mobile and web apps to automation and AI-powered features.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Card 3 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 backdrop-blur-sm p-8 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-3">MVPs & Proof of Concepts</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Start fast and validate quickly with functional prototypes and MVPs that help you test ideas and gather real feedback.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="text-center mt-6">-->
<!-- <a-->
<!-- href="#contact"-->
<!-- class="inline-block rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark"-->
<!-- >-->
<!-- Contact us-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Decorative SVGs (unchanged) –>-->
<!-- <div>-->
<!-- <span class="absolute top-0 left-0">-->
<!-- <svg width="495" height="470" viewBox="0 0 495 470" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="55" cy="442" r="138" stroke="white" stroke-opacity="0.04" stroke-width="50"/>-->
<!-- <circle cx="446" r="39" stroke="white" stroke-opacity="0.04" stroke-width="20"/>-->
<!-- <path d="M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z"-->
<!-- stroke="white" stroke-opacity="0.08" stroke-width="12"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- <span class="absolute bottom-0 right-0">-->
<!-- <svg width="493" height="470" viewBox="0 0 493 470" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <circle cx="462" cy="5" r="138" stroke="white" stroke-opacity="0.04" stroke-width="50"/>-->
<!-- <circle cx="49" cy="470" r="39" stroke="white" stroke-opacity="0.04" stroke-width="20"/>-->
<!-- <path d="M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z"-->
<!-- stroke="white" stroke-opacity="0.06" stroke-width="13"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- </div>-->
<!--</section>-->
<section id="services" class="relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]">
<div class="container px-4 mx-auto">
<div class="relative overflow-hidden">
<div class="flex flex-wrap items-stretch -mx-4">
<div class="w-full px-4">
<div class="mx-auto max-w-[650px] text-center">
<h2 class="mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]">
<span>Our Services</span>
</h2>
<p class="mx-auto mb-10 max-w-[600px] text-base leading-[1.5] text-white">
Three core services designed to give you clarity, flexibility, and the freedom to build at
your own pace.
Whether you're exploring ideas, developing software, or validating concepts, Runzbuzz adapts
as you evolve.
</p>
</div>
</div>
</div>
<!--<!– Service Cards –>-->
<!--<div class="flex flex-wrap -mx-4 mt-10">-->
<!-- <!– Card 1 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-8 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-3">AI Research & Consultation</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Explore new ideas, assess feasibility, and make informed decisions through applied research and strategic AI guidance.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Card 2 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-8 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-3">AI & Software Development</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Build intelligent, scalable applications and systems—from mobile and web apps to automation and AI-powered features.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Card 3 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-8 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-3">MVPs & Proof of Concepts</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Start fast and validate quickly with functional prototypes and MVPs that help you test ideas and gather real feedback.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!-- Service Cards -->
<!--<div class="flex flex-wrap -mx-4 mt-10">-->
<!-- <!– Card 1 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-8 md:p-10 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-4">AI Research & Consultation</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Explore new ideas, assess feasibility, and make informed decisions through applied research and strategic AI guidance.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Card 2 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-8 md:p-10 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-4">AI & Software Development</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Build intelligent, scalable applications and systems—from mobile and web apps to automation and AI-powered features.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <!– Card 3 –>-->
<!-- <div class="w-full md:w-1/3 px-4 mb-8">-->
<!-- <div class="h-full rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-8 md:p-10 text-white hover:bg-white/20 transition">-->
<!-- <h3 class="text-xl font-semibold mb-4">MVPs & Proof of Concepts</h3>-->
<!-- <p class="text-white/90 leading-relaxed">-->
<!-- Start fast and validate quickly with functional prototypes and MVPs that help you test ideas and gather real feedback.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!-- Service Cards -->
<div class="flex flex-wrap -mx-4 mt-10 ">
<!-- Card 1 -->
<div class="w-full md:w-1/3 px-4 mb-8">
<div class="h-full rounded-xl border border-white/20 backdrop-blur-sm p-4 md:p-6 text-white hover:bg-white/20 transition">
<div class="p-6 md:p-8"> <!-- Inner content padding -->
<h3 class="text-xl font-semibold mb-4">AI Research & Consultation</h3>
<p class="text-white/90 leading-relaxed">
Explore new ideas, assess feasibility, and make informed decisions through applied
research and strategic AI guidance.
</p>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="w-full md:w-1/3 px-4 mb-8">
<div class="h-full rounded-xl border border-white/20 backdrop-blur-sm p-4 md:p-6 text-white hover:bg-white/20 transition">
<div class="p-6 md:p-8"> <!-- Inner content padding -->
<h3 class="text-xl font-semibold mb-4">AI & Software Development</h3>
<p class="text-white/90 leading-relaxed">
Develop modern applications and intelligent systems tailored to your needs, including
mobile apps, web platforms, automation workflows, and AI-powered features.
</p>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="w-full md:w-1/3 px-4 mb-8">
<div class="h-full rounded-xl border border-white/20 backdrop-blur-sm p-4 md:p-6 text-white hover:bg-white/20 transition">
<!-- <div class="h-full rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm p-4 md:p-6 text-white hover:bg-white/20 transition">-->
<div class="p-6 md:p-8"> <!-- Inner content padding -->
<h3 class="text-xl font-semibold mb-4">MVPs & Proof of Concepts</h3>
<p class="text-white/90 leading-relaxed">
Move quickly with functional prototypes and proofs of concept designed for fast learning
and real-world validation.
</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-6">
<a href="#contact"
class="inline-block rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark">
<!-- Contact us-->
Get Started
</a>
</div>
</div>
</div>
<!-- Decorative SVGs (unchanged) -->
<div>
<span class="absolute top-0 left-0">
<svg width="495" height="470" viewBox="0 0 495 470" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="55" cy="442" r="138" stroke="white" stroke-opacity="0.04" stroke-width="50"/>
<circle cx="446" r="39" stroke="white" stroke-opacity="0.04" stroke-width="20"/>
<path d="M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z"
stroke="white" stroke-opacity="0.08" stroke-width="12"/>
</svg>
</span>
<span class="absolute bottom-0 right-0">
<svg width="493" height="470" viewBox="0 0 493 470" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="462" cy="5" r="138" stroke="white" stroke-opacity="0.04" stroke-width="50"/>
<circle cx="49" cy="470" r="39" stroke="white" stroke-opacity="0.04" stroke-width="20"/>
<path d="M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z"
stroke="white" stroke-opacity="0.06" stroke-width="13"/>
</svg>
</span>
</div>
</section>
<!-- ====== Services Section End -->
<!-- ====== Plans Section Start -->
<section id="plans" class="relative z-20 overflow-hidden bg-white pb-12 pt-20 dark:bg-dark lg:pb-[90px] lg:pt-[120px]">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4">
<div class="mx-auto mb-[60px] max-w-[510px] text-center">
<span class="block mb-2 text-lg font-semibold text-primary">Plans</span>
<h2 class="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]">
<!-- Made to fit-->
Built for Momentum
</h2>
<p class="text-base text-body-color dark:text-dark-6">
<!-- Whether you're building fast or planning long-term, our flexible plans are designed to grow with-->
<!-- you — no hidden fees, no rigid contracts.-->
Whether you’re moving fast or planning for long-term growth, our plans give you clarity,
flexibility, and room to evolve, with no hidden fees and no rigid contracts.
</p>
</div>
</div>
</div>
<div class="flex flex-wrap justify-center -mx-4">
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="relative z-10 px-8 py-10 mb-10 overflow-hidden bg-white rounded-xl shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14">
<p class="absolute right-[-50px] top-[60px] inline-block -rotate-90 rounded-bl-md rounded-tl-md bg-primary px-5 py-2 text-base font-medium text-white">
Flat Rate
<br/>
<br/>
</p>
<span class="block mb-2 text-xl font-medium text-dark dark:text-white">Startup Plan</span>
<p class="mb-6 text-lg font-normal text-body-color dark:text-dark-6">
Move fast. Evolve freely. One
flat weekly rate.
</p>
<div class="mb-6">
<h5 class="mb-2 text-lg font-medium text-dark dark:text-white">Best For</h5>
<ul class="ml-4 list-disc text-base text-body-color dark:text-dark-6">
<li>MVPs and Proof-of-Concepts</li>
<li>Early-stage AI experiments</li>
<li>Fast-iterating agile teams</li>
<!-- <li>Agile teams iterating fast</li>-->
</ul>
</div>
<div class="mb-[50px]">
<h5 class="mb-2 text-lg font-medium text-dark dark:text-white">Features</h5>
<div class="flex flex-col gap-[12px]">
<p class="text-base text-body-color dark:text-dark-6">Flat weekly rate</p>
<p class="text-base text-body-color dark:text-dark-6">Flexible scope</p>
<p class="text-base text-body-color dark:text-dark-6">Weekly delivery cycles</p>
<p class="text-base text-body-color dark:text-dark-6">Full ownership of deliverables</p>
</div>
</div>
<a href="#contact"
class="inline-block py-3 text-base font-medium text-center text-white transition rounded-md bg-primary px-7 hover:bg-white hover:text-dark">Let’s
Talk</a>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="relative z-10 px-8 py-10 mb-10 overflow-hidden bg-white rounded-xl shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14">
<span class="block mb-2 text-xl font-medium text-dark dark:text-white">Enterprise Plan</span>
<p class="mb-6 text-lg font-normal text-body-color dark:text-dark-6">Designed for complexity. Built
for long-term impact.</p>
<div class="mb-6">
<h5 class="mb-2 text-lg font-medium text-dark dark:text-white">Best For</h5>
<ul class="ml-4 list-disc text-base text-body-color dark:text-dark-6">
<!-- <li>Enterprises building AI or software applications</li>-->
<!-- <li>Enterprises integrating AI</li>-->
<!-- <li>Research teams with specialized AI needs</li>-->
<!-- <li>Businesses seeking strategic collaboration</li>-->
<li>AI-driven enterprise projects</li>
<li>Advanced AI research workloads</li>
<li>Strategic long-term partnerships</li>
</ul>
</div>
<div class="mb-[50px]">
<h5 class="mb-2 text-lg font-medium text-dark dark:text-white">Features</h5>
<div class="flex flex-col gap-[12px]">
<p class="text-base text-body-color dark:text-dark-6">Flexible rate</p>
<p class="text-base text-body-color dark:text-dark-6">Strategic consulting & delivery</p>
<p class="text-base text-body-color dark:text-dark-6">Custom delivery cycles</p>
<p class="text-base text-body-color dark:text-dark-6">Applied AI research</p>
<!-- <p class="text-base text-body-color dark:text-dark-6">Full transfer of deliverables & IP</p>-->
</div>
</div>
<a href="#contact"
class="inline-block py-3 text-base font-medium text-center text-white transition rounded-md bg-primary px-7 hover:bg-white hover:text-dark">Let’s
Talk</a>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Plans Section End -->
<!-- ====== Testimonial Section Start -->
<section id="testimonials" class="overflow-hidden bg-gray-1 py-20 dark:bg-dark-2 md:py-[120px]">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap justify-center -mx-4">
<div class="w-full px-4">
<div class="mx-auto mb-[60px] max-w-[485px] text-center">
<span class="block mb-2 text-lg font-semibold text-primary">Testimonials</span>
<h2 class="mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]">
What our Clients Say</h2>
<!--
<p class="text-base text-body-color dark:text-dark-6">There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some form.</p>
-->
</div>
</div>
</div>
<div class="-m-5">
<div class="p-5 swiper testimonial-carousel common-carousel">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]">
<div class="mb-[18px] flex items-center gap-[2px]">
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
</div>
<!-- <p class="mb-6 text-base text-body-color dark:text-dark-6">“I would like to show my gratitude for the technical support received by Runzbuzz’’</p>-->
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“I would like to show my gratitude for the technical support received by Runzbuzz,
especially for the work and dedication of Ahmad Alobaid. This support has translated
into a great
interest in leaving me satisfied as a client by resolving all issues with great
professionalism.’’
</p>
<a href="#" class="flex items-center gap-4">
<!-- <div class="h-[50px] w-[50px] overflow-hidden rounded-full">-->
<!-- <img src="./assets/images/testimonials/author-01.jpg" alt="author" class="h-[50px] w-[50px] overflow-hidden rounded-full" />-->
<!-- </div>-->
<div>
<h3 class="text-sm font-semibold text-dark dark:text-white">Leo Santos</h3>
<p class="text-xs text-body-secondary">@ UEM</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]">
<div class="mb-[18px] flex items-center gap-[2px]">
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
</div>
<!-- <p class="mb-6 text-base text-body-color dark:text-dark-6">“Ahmad has always shown a strong scientific approach the group as w.’’</p>-->
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Ahmad has always shown a strong scientific approach for dealing with complex problems
and has contributed relevant solutions to the state of the art, as shown by several
publications on his core achievements. He has also had a strong capacity to work
together with other members in the group as well as with foreign researchers.’’
</p>
<a href="#" class="flex items-center gap-4">
<!-- <div class="h-[50px] w-[50px] overflow-hidden rounded-full">-->
<!-- <img src="./assets/images/testimonials/author-02.jpg" alt="author" class="h-[50px] w-[50px] overflow-hidden rounded-full" />-->
<!-- </div>-->
<div>
<h3 class="text-sm font-semibold text-dark dark:text-white">Oscar C.</h3>
<p class="text-xs text-body-secondary">@ UPM</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]">
<div class="mb-[18px] flex items-center gap-[2px]">
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
</div>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Ahmed is one of the most powerful persons that I knew , he is smart, hard worker
(workaholic) , and great programmer. He is open-mind, with nice personality. Have great
ability to
solve and fix complicated codes. He is always going forward.’’
</p>
<a href="#" class="flex items-center gap-4">
<!-- <div class="h-[50px] w-[50px] overflow-hidden rounded-full">-->
<!-- <img src="./assets/images/testimonials/author-03.jpg" alt="author" class="h-[50px] w-[50px] overflow-hidden rounded-full" />-->
<!-- </div>-->
<div>
<h3 class="text-sm font-semibold text-dark dark:text-white">Mohamed H.</h3>
<p class="text-xs text-body-secondary">Founder @ El Condor G.L.T</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]">
<div class="mb-[18px] flex items-center gap-[2px]">
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
<img src="./assets/images/testimonials/icon-star.svg" alt="star icon"/>
</div>
<!-- <p class="mb-6 text-base text-body-color dark:text-dark-6">“Ahmad has demonstrated successful results not only from the academic perspective,’’</p>-->
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Ahmad has demonstrated successful results not only from the academic perspective, but
also from that of transferring research results to the industry winning grants for
continuing
his research in the context of an innovation program together with a leading IT company