-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpricing.html
1047 lines (995 loc) · 66.8 KB
/
pricing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
<!-- SEO meta tags -->
<title>Around | Pricing</title>
<meta name="description" content="Around - Multipurpose Bootstrap HTML Template">
<meta name="keywords" content="bootstrap, business, corporate, coworking space, services, creative agency, dashboard, e-commerce, mobile app showcase, saas, multipurpose, product landing, shop, software, ui kit, web studio, landing, light and dark mode, html5, css3, javascript, gallery, slider, touch, creative">
<meta name="author" content="Createx Studio">
<!-- Webmanifest + Favicon / App icons -->
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="assets/app-icons/icon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="assets/app-icons/icon-180x180.png">
<!-- Theme switcher (color modes) -->
<script src="assets/js/theme-switcher.js"></script>
<!-- Import Google font (Inter) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" id="google-font">
<!-- Vendor styles -->
<link rel="stylesheet" media="screen" href="assets/vendor/aos/dist/aos.css">
<!-- Font icons -->
<link rel="stylesheet" href="assets/icons/around-icons.min.css">
<!-- Theme styles + Bootstrap -->
<link rel="stylesheet" media="screen" href="assets/css/theme.min.css">
<!-- Page loading styles -->
<style>
.page-loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all .4s .2s ease-in-out;
transition: all .4s .2s ease-in-out;
background-color: #fff;
opacity: 0;
visibility: hidden;
z-index: 9999;
}
[data-bs-theme="dark"] .page-loading {
background-color: #121519;
}
.page-loading.active {
opacity: 1;
visibility: visible;
}
.page-loading-inner {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
opacity: 0;
}
.page-loading.active > .page-loading-inner {
opacity: 1;
}
.page-loading-inner > span {
display: block;
font-family: "Inter", sans-serif;
font-size: 1rem;
font-weight: normal;
color: #6f788b;
}
[data-bs-theme="dark"] .page-loading-inner > span {
color: #fff;
opacity: .6;
}
.page-spinner {
display: inline-block;
width: 2.75rem;
height: 2.75rem;
margin-bottom: .75rem;
vertical-align: text-bottom;
background-color: #d7dde2;
border-radius: 50%;
opacity: 0;
-webkit-animation: spinner .75s linear infinite;
animation: spinner .75s linear infinite;
}
[data-bs-theme="dark"] .page-spinner {
background-color: rgba(255,255,255,.25);
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes spinner {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
</style>
<!-- Page loading scripts -->
<script>
(function () {
window.onload = function () {
const preloader = document.querySelector('.page-loading')
preloader.classList.remove('active')
setTimeout(function () {
preloader.remove()
}, 1500)
}
})()
</script>
</head>
<!-- Body -->
<body>
<!-- Page loading spinner -->
<div class="page-loading active">
<div class="page-loading-inner">
<div class="page-spinner"></div>
<span>Loading...</span>
</div>
</div>
<!-- Page wrapper -->
<main class="page-wrapper">
<!-- Navbar. Remove 'fixed-top' class to make the navigation bar scrollable with the page -->
<header class="navbar navbar-expand-lg fixed-top bg-light">
<div class="container">
<!-- Navbar brand (Logo) -->
<a class="navbar-brand pe-sm-3" href="index.html">
<span class="text-primary flex-shrink-0 me-2">
<svg width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z"></path>
</svg>
</span>
Around
</a>
<!-- Theme switcher -->
<div class="form-check form-switch mode-switch order-lg-2 me-3 me-lg-4 ms-auto" data-bs-toggle="mode">
<input class="form-check-input" type="checkbox" id="theme-mode">
<label class="form-check-label" for="theme-mode">
<i class="ai-sun fs-lg"></i>
</label>
<label class="form-check-label" for="theme-mode">
<i class="ai-moon fs-lg"></i>
</label>
</div>
<a class="btn btn-primary btn-sm fs-sm order-lg-3 d-none d-sm-inline-flex" href="https://themes.getbootstrap.com/product/around-multipurpose-template-ui-kit/" target="_blank" rel="noopener">
<i class="ai-cart fs-xl me-2 ms-n1"></i>
Buy now
</a>
<!-- Mobile menu toggler (Hamburger) -->
<button class="navbar-toggler ms-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar collapse (Main navigation) -->
<nav class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav navbar-nav-scroll me-auto" style="--ar-scroll-height: 520px;">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Landings</a>
<div class="dropdown-menu overflow-hidden p-0">
<div class="d-lg-flex">
<div class="mega-dropdown-column pt-1 pt-lg-3 pb-lg-4">
<ul class="list-unstyled mb-0">
<li>
<a class="dropdown-item" href="index.html">Template Intro Page</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 rounded-3 rounded-start-0" style="background-image: url(assets/img/megamenu/landings.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-mobile-app-showcase.html">Mobile App Showcase</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/mobile-app.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-product.html">Product Landing</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/product-landing.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-saas-v1.html">SaaS v.1</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-1.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-saas-v2.html">SaaS v.2</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-2.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-saas-v3.html">SaaS v.3</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-3.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-saas-v4.html">
SaaS v.4
<span class="text-danger fs-xs ms-2">New</span>
</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/saas-4.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-shop-v1.html">Shop Homepage v.1</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/shop-homepage-1.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-shop-v2.html">
Shop Homepage v.2
<span class="text-danger fs-xs ms-2">New</span>
</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/shop-homepage-2.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-marketing-agency.html">Marketing Agency</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/marketing-agency.jpg);"></span>
</li>
</ul>
</div>
<div class="mega-dropdown-column pb-2 pt-lg-3 pb-lg-4">
<ul class="list-unstyled mb-0">
<li>
<a class="dropdown-item" href="landing-creative-agency.html">Creative Agency</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/creative-agency.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-conference.html">Conference (Event)</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/conference.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-web-studio.html">Web Studio</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/web-studio.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-corporate.html">Corporate</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/corporate.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-insurance.html">
Insurance Company
<span class="text-danger fs-xs ms-2">New</span>
</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/insurance.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-business-consulting.html">Business Consulting</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/business-consulting.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-coworking-space.html">Coworking Space</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/coworking.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-yoga-studio.html">Yoga Studio</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/yoga-studio.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-influencer.html">Influencer</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/influencer.jpg);"></span>
</li>
<li>
<a class="dropdown-item" href="landing-blog.html">Blog Homepage</a>
<span class="mega-dropdown-column position-absolute top-0 end-0 h-100 bg-size-cover bg-repeat-0 z-2 opacity-0" style="background-image: url(assets/img/megamenu/blog-homepage.jpg);"></span>
</li>
</ul>
</div>
<div class="mega-dropdown-column position-relative border-start z-3"></div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="portfolio-list-v1.html">List View v.1</a></li>
<li><a class="dropdown-item" href="portfolio-list-v2.html">List View v.2</a></li>
<li><a class="dropdown-item" href="portfolio-grid-v1.html">Grid View v.1</a></li>
<li><a class="dropdown-item" href="portfolio-grid-v2.html">Grid View v.2</a></li>
<li><a class="dropdown-item" href="portfolio-slider.html">Slider View</a></li>
<li><a class="dropdown-item" href="portfolio-single-v1.html">Single Project v.1</a></li>
<li><a class="dropdown-item" href="portfolio-single-v2.html">Single Project v.2</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="shop-catalog.html">Catalog (Listing)</a></li>
<li><a class="dropdown-item" href="shop-single.html">Product Page</a></li>
<li><a class="dropdown-item" href="shop-checkout.html">Checkout</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog-grid-sidebar.html">Grid View with Sidebar</a></li>
<li><a class="dropdown-item" href="blog-grid.html">Grid View no Sidebar</a></li>
<li><a class="dropdown-item" href="blog-list-sidebar.html">List View with Sidebar</a></li>
<li><a class="dropdown-item" href="blog-list.html">List View no Sidebar</a></li>
<li><a class="dropdown-item" href="blog-single-v1.html">Single post v.1</a></li>
<li><a class="dropdown-item" href="blog-single-v2.html">Single post v.2</a></li>
<li><a class="dropdown-item" href="blog-single-v3.html">Single post v.3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="about-agency.html">About - Agency</a></li>
<li><a class="dropdown-item" href="about-product.html">About - Product</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="services-v1.html">Services v.1</a></li>
<li><a class="dropdown-item" href="services-v2.html">Services v.2</a></li>
<li><a class="dropdown-item" href="services-v3.html">Services v.3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Contacts</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="contacts-v1.html">Contacts v.1</a></li>
<li><a class="dropdown-item" href="contacts-v2.html">Contacts v.2</a></li>
<li><a class="dropdown-item" href="contacts-v3.html">Contacts v.3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Specialty Pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="coming-soon-v1.html">Coming Soon v.1</a></li>
<li><a class="dropdown-item" href="coming-soon-v2.html">Coming Soon v.2</a></li>
<li><a class="dropdown-item" href="404-v1.html">404 Error v.1</a></li>
<li><a class="dropdown-item" href="404-v2.html">404 Error v.2</a></li>
<li><a class="dropdown-item" href="404-v3.html">404 Error v.3</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Account</a>
<ul class="dropdown-menu">
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Auth pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="account-signin.html">Sign In</a></li>
<li><a class="dropdown-item" href="account-signup.html">Sign Up</a></li>
<li><a class="dropdown-item" href="account-signinup.html">Sign In / Up</a></li>
<li><a class="dropdown-item" href="account-password-recovery.html">Password Recovery</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="account-overview.html">Overview</a></li>
<li><a class="dropdown-item" href="account-settings.html">Settings</a></li>
<li><a class="dropdown-item" href="account-billing.html">Billing</a></li>
<li><a class="dropdown-item" href="account-orders.html">Orders</a></li>
<li><a class="dropdown-item" href="account-earnings.html">Earnings</a></li>
<li><a class="dropdown-item" href="account-chat.html">Chat (Messages)</a></li>
<li><a class="dropdown-item" href="account-favorites.html">Favorites (Wishlist)</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="components/typography.html">UI Kit</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docs/getting-started.html">Docs</a>
</li>
</ul>
<div class="d-sm-none p-3 mt-n3">
<a class="btn btn-primary w-100 mb-1" href="https://themes.getbootstrap.com/product/around-multipurpose-template-ui-kit/" target="_blank" rel="noopener">
<i class="ai-cart fs-xl me-2 ms-n1"></i>
Buy now
</a>
</div>
</nav>
</div>
</header>
<!-- Pricing plans -->
<section class="container py-5 mt-5 mb-lg-3 mb-xl-4 mb-xxl-5">
<!-- Page title -->
<div class="text-center pb-3 pt-lg-2 pt-xl-4 my-1 my-sm-3 my-lg-4">
<h1 class="display-2">Pricing plans</h1>
<p class="fs-lg mb-0">Select a service plan that best suits your business needs</p>
</div>
<!-- Plans -->
<div class="row row-cols-3 flex-nowrap pb-4 overflow-auto">
<!-- Plan -->
<div class="col" style="min-width: 19rem;">
<div class="card h-100 py-lg-4">
<div class="card-body w-100 mx-auto text-center" style="max-width: 23rem;">
<h3>Light</h3>
<div class="display-2 text-primary">$8</div>
<div class="mb-4">per month</div>
<p class="mb-4 pb-4">Phasellus in hendrerit interdum lorem proin pretium dictum urna</p>
<button class="btn btn-primary w-100" type="button">Get this plan now</button>
</div>
</div>
</div>
<!-- Plan -->
<div class="col" style="min-width: 19rem;">
<div class="card border-primary bg-primary h-100 py-lg-4">
<div class="card-body w-100 mx-auto text-center" style="max-width: 23rem;">
<h3 class="text-light">Premium</h3>
<div class="display-2 text-light">$72</div>
<div class="text-light opacity-70 mb-4">per month</div>
<p class="text-light opacity-70 mb-4 pb-4">Morbi et massa fames ac scelerisque sit commodo dignissim aucibus</p>
<button class="btn btn-light w-100" type="button">Get this plan now</button>
</div>
</div>
</div>
<!-- Plan -->
<div class="col" style="min-width: 19rem;">
<div class="card h-100 py-lg-4">
<div class="card-body w-100 mx-auto text-center" style="max-width: 23rem;">
<h3>Medium</h3>
<div class="display-2 text-primary">$36</div>
<div class="mb-4">per month</div>
<p class="mb-4 pb-4">Enim aenean phasellus in hendrerit interdum lorem proin pretium</p>
<button class="btn btn-primary w-100" type="button">Get this plan now</button>
</div>
</div>
</div>
</div>
<!-- Comparison table -->
<div class="text-center pt-md-1 pt-lg-2">
<button class="btn btn-more btn-link fs-4" type="button" data-show-label="Compare plans" data-hide-label="Compare plans" data-bs-toggle="collapse" data-bs-target="#comparePlans" aria-label="Compare plans"></button>
</div>
<div class="collapse show" id="comparePlans">
<div class="table-responsive pt-sm-2 pt-lg-3">
<table class="table text-center text-nowrap">
<thead>
<tr>
<th scope="col" class="border-0 py-3"> </th>
<th scope="col" class="border-0 py-3"><span class="h5 mb-0">Light</span></th>
<th scope="col" class="border-0 py-3"><span class="h5 mb-0">Premium</span></th>
<th scope="col" class="border-0 py-3"><span class="h5 mb-0">Medium</span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="text-body fw-medium">Billed monthly</span>
</th>
<td class="border-0 bg-secondary py-3"><span class="text-dark">$18</span></td>
<td class="border-0 bg-secondary py-3"><span class="text-dark">$72</span></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><span class="text-dark">$36</span></td>
</tr>
<tr>
<th scope="row" class="border-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Members
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 py-3"><span class="text-dark">Just you</span></td>
<td class="border-0 py-3"><span class="text-dark">Unlimited</span></td>
<td class="border-0 py-3"><span class="text-dark">3 members</span></td>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Guest access
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 bg-secondary py-3"><span class="text-dark">Just you</span></td>
<td class="border-0 bg-secondary py-3"><span class="text-dark">Unlimited</span></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><span class="text-dark">3 members</span></td>
</tr>
<tr>
<th scope="row" class="border-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
File uploads
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 py-3"><span class="text-dark">2 GB</span></td>
<td class="border-0 py-3"><span class="text-dark">30 GB</span></td>
<td class="border-0 py-3"><span class="text-dark">10 GB</span></td>
</tr>
<tr>
<th scope="col" class="border-0 text-start pt-4 pb-3 ps-4">
<div class="h5 pt-1 mb-0">Collaboration</div>
</th>
<th scope="col" class="border-0 py-3"> </th>
<th scope="col" class="border-0 py-3"> </th>
<th scope="col" class="border-0 py-3"> </th>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="text-body fw-medium">Real-time collaboration</span>
</th>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Link sharing
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Collaborative workspace
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Filter views
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 py-3"><span class="text-dark">3</span></td>
<td class="border-0 py-3"><span class="text-dark">Unlimited</span></td>
<td class="border-0 py-3"><span class="text-dark">12</span></td>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Teams
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="col" class="border-0 text-start pt-4 pb-3 ps-4">
<div class="h5 pt-3 mb-0">Features</div>
</th>
<th scope="col" class="border-0 py-3"> </th>
<th scope="col" class="border-0 py-3"> </th>
<th scope="col" class="border-0 py-3"> </th>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="text-body fw-medium">Web, desktop, & mobile apps</span>
</th>
<td class="border-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Reminders
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="text-body fw-medium">Priorities</span>
</th>
<td class="border-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Comments
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="text-body fw-medium">Integrations</span>
</th>
<td class="border-0 bg-secondary py-3"><span class="text-dark">5</span></td>
<td class="border-0 bg-secondary py-3"><span class="text-dark">Unlimited</span></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><span class="text-dark">15</span></td>
</tr>
<tr>
<th scope="col" class="border-0 text-start pt-4 pb-3 ps-4">
<div class="h5 pt-3 mb-0">Admin & security</div>
</th>
<th scope="col" class="border-0 py-3"> </th>
<th scope="col" class="border-0 py-3"> </th>
<th scope="col" class="border-0 py-3"> </th>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Admin & member roles
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 text-start py-3 ps-4"><span class="text-body fw-medium">Team billing</span></th>
<td class="border-0 py-3"><i class="ai-cross fs-xl text-danger"></i></td>
<td class="border-0 py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 py-3"><i class="ai-cross fs-xl text-danger"></i></td>
</tr>
<tr>
<th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
<span class="d-flex align-items-center text-body fw-medium">
Priority support
<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
</span>
</th>
<td class="border-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
<td class="border-0 bg-secondary py-3"><i class="ai-check fs-xl text-success"></i></td>
<td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><i class="ai-cross fs-xl text-danger"></i></td>
</tr>
<tr>
<td class="border-0 pt-4"> </td>
<td class="border-0 pt-4">
<button class="btn btn-outline-primary mt-3" type="button">Get started $18</button>
</td>
<td class="border-0 pt-4">
<button class="btn btn-outline-primary mt-3" type="button">Get started $72</button>
</td>
<td class="border-0 pt-4">
<button class="btn btn-outline-primary mt-3" type="button">Get started $36</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Testimonials (tabs) -->
<section class="container mt-n3 mt-sm-0 py-md-3 py-lg-4">
<h2 class="text-center pb-3 mb-lg-4">More than 2,000 clients using Around to analyze data</h2>
<!-- Nav tabs -->
<div class="overflow-auto pb-3 pb-xl-4 mb-3 mb-lg-4">
<ul class="nav nav-tabs justify-content-between flex-nowrap text-nowrap p-0 m-0" role="tablist" style="min-width: 1000px;">
<li class="nav-item mb-0">
<a class="nav-link active" href="#foster" data-bs-toggle="tab" role="tab">
<div class="swap-image">
<img class="swap-to" src="assets/img/landing/saas-1/brands/foster-color.svg" width="140" alt="Foster">
<div class="swap-from">
<img class="d-dark-mode-none" src="assets/img/landing/saas-1/brands/foster-gray.svg" width="140" alt="Foster">
<img class="d-none d-dark-mode-block" src="assets/img/landing/saas-1/brands/foster-light.svg" width="140" alt="Foster">
</div>
</div>
</a>
</li>
<li class="nav-item mb-0">
<a class="nav-link" href="#klinos" data-bs-toggle="tab" role="tab">
<div class="swap-image">
<img class="swap-to" src="assets/img/landing/saas-1/brands/klinos-color.svg" width="131" alt="Klinos">
<div class="swap-from">
<img class="d-dark-mode-none" src="assets/img/landing/saas-1/brands/klinos-gray.svg" width="131" alt="Klinos">
<img class="d-none d-dark-mode-block" src="assets/img/landing/saas-1/brands/klinos-light.svg" width="131" alt="Klinos">
</div>
</div>
</a>
</li>
<li class="nav-item mb-0">
<a class="nav-link" href="#champion" data-bs-toggle="tab" role="tab">
<div class="swap-image">
<img class="swap-to" src="assets/img/landing/saas-1/brands/champion-color.svg" width="162" alt="Champion">
<div class="swap-from">
<img class="d-dark-mode-none" src="assets/img/landing/saas-1/brands/champion-gray.svg" width="162" alt="Champion">
<img class="d-none d-dark-mode-block" src="assets/img/landing/saas-1/brands/champion-light.svg" width="162" alt="Champion">
</div>
</div>
</a>
</li>
<li class="nav-item mb-0">
<a class="nav-link" href="#airbnb" data-bs-toggle="tab" role="tab">
<div class="swap-image">
<img class="swap-to" src="assets/img/landing/saas-1/brands/airbnb-color.svg" width="132" alt="Airbnb">
<div class="swap-from">
<img class="d-dark-mode-none" src="assets/img/landing/saas-1/brands/airbnb-gray.svg" width="132" alt="Airbnb">
<img class="d-none d-dark-mode-block" src="assets/img/landing/saas-1/brands/airbnb-light.svg" width="132" alt="Airbnb">
</div>
</div>
</a>
</li>
<li class="nav-item mb-0">
<a class="nav-link" href="#starcraft" data-bs-toggle="tab" role="tab">
<div class="swap-image">
<img class="swap-to" src="assets/img/landing/saas-1/brands/starcraft-color.svg" width="158" alt="StarCraft">
<div class="swap-from">
<img class="d-dark-mode-none" src="assets/img/landing/saas-1/brands/starcraft-gray.svg" width="158" alt="StarCraft">
<img class="d-none d-dark-mode-block" src="assets/img/landing/saas-1/brands/starcraft-light.svg" width="158" alt="StarCraft">
</div>
</div>
</a>
</li>
<li class="nav-item mb-0">
<a class="nav-link" href="#alpine" data-bs-toggle="tab" role="tab">
<div class="swap-image">
<img class="swap-to" src="assets/img/landing/saas-1/brands/alpine-color.svg" width="146" alt="Alpine">
<div class="swap-from">
<img class="d-dark-mode-none" src="assets/img/landing/saas-1/brands/alpine-gray.svg" width="146" alt="Alpine">
<img class="d-none d-dark-mode-block" src="assets/img/landing/saas-1/brands/alpine-light.svg" width="146" alt="Alpine">
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- Tabs content -->
<div class="card border-0 bg-secondary">
<div class="tab-content card-body px-lg-0 py-lg-5">
<!-- Testimonial (active tab) -->
<div class="tab-pane fade show active" id="foster" role="tabpanel">
<div class="row py-2 py-sm-1 py-md-3 py-lg-4 py-xl-5">
<div class="col-md-4 col-lg-3 offset-lg-1 mb-3 mb-md-0">
<img class="d-block rounded-circle mb-3" src="assets/img/avatar/13.jpg" width="86" alt="Lilianna Bocouse">
<h4 class="mb-0">Lilianna Bocouse</h4>
<p class="fs-lg text-body-secondary mb-0">Head of Marketing</p>
</div>
<div class="col-md-8 col-lg-7">
<p class="text-dark lead mb-0">“Around provides us with the detailed and accurate data we need to make strategic decisions. All tools are constantly being improved and contain a lot of useful and interesting information. Thanks to Around, we can constantly analyze our big data quickly and efficiently.”</p>
</div>
</div>
</div>
<!-- Testimonial (tab) -->
<div class="tab-pane fade" id="klinos" role="tabpanel">
<div class="row py-2 py-sm-1 py-md-3 py-lg-4 py-xl-5">
<div class="col-md-4 col-lg-3 offset-lg-1 mb-3 mb-md-0">
<img class="d-block rounded-circle mb-3" src="assets/img/avatar/14.jpg" width="86" alt="Darell Steward">
<h4 class="mb-0">Darell Steward</h4>
<p class="fs-lg text-body-secondary mb-0">Project Manager</p>
</div>
<div class="col-md-8 col-lg-7">
<p class="text-dark lead mb-0">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac pretium dui. Aliquam rutrum justo lorem, in efficitur odio efficitur vel. Integer mattis, neque malesuada sagittis porttitor, enim tortor ullamcorper diam, id eleifend sem mauris at turpis. Curabitur sed nisi nec ligula dictum maximus eu ut ante.”</p>
</div>
</div>
</div>
<!-- Testimonial (tab) -->
<div class="tab-pane fade" id="champion" role="tabpanel">
<div class="row py-2 py-sm-1 py-md-3 py-lg-4 py-xl-5">
<div class="col-md-4 col-lg-3 offset-lg-1 mb-3 mb-md-0">
<img class="d-block rounded-circle mb-3" src="assets/img/avatar/15.jpg" width="86" alt="Annette Black">
<h4 class="mb-0">Annette Black</h4>
<p class="fs-lg text-body-secondary mb-0">Lead Designer</p>
</div>
<div class="col-md-8 col-lg-7">
<p class="text-dark lead mb-0">“Quisque rutrum sit amet magna sit amet tristique. Vivamus rhoncus ac purus vitae convallis. Aliquam erat volutpat. Proin egestas, mauris ut semper semper, ipsum felis mattis ligula, et porttitor ante arcu nec ante. Aliquam congue est eu turpis sollicitudin, et ullamcorper tortor aliquam.”</p>
</div>
</div>
</div>
<!-- Testimonial (tab) -->
<div class="tab-pane fade" id="airbnb" role="tabpanel">
<div class="row py-2 py-sm-1 py-md-3 py-lg-4 py-xl-5">
<div class="col-md-4 col-lg-3 offset-lg-1 mb-3 mb-md-0">
<img class="d-block rounded-circle mb-3" src="assets/img/avatar/16.jpg" width="86" alt="Ralph Edwards">
<h4 class="mb-0">Ralph Edwards</h4>
<p class="fs-lg text-body-secondary mb-0">CEO, Co-Founder</p>
</div>
<div class="col-md-8 col-lg-7">
<p class="text-dark lead mb-0">“Vestibulum faucibus lectus eget augue pharetra, quis semper lectus gravida. Vestibulum pretium in elit sed iaculis. Curabitur elementum turpis at ipsum molestie, id maximus odio tincidunt. Praesent id lacinia orci. Phasellus at varius arcu. Ut nec lobortis velit. Mauris vel risus quis lacus placerat fringilla.”</p>
</div>
</div>
</div>
<!-- Testimonial (tab) -->
<div class="tab-pane fade" id="starcraft" role="tabpanel">
<div class="row py-2 py-sm-1 py-md-3 py-lg-4 py-xl-5">
<div class="col-md-4 col-lg-3 offset-lg-1 mb-3 mb-md-0">
<img class="d-block rounded-circle mb-3" src="assets/img/avatar/17.jpg" width="86" alt="Jane Cooper">
<h4 class="mb-0">Jane Cooper</h4>
<p class="fs-lg text-body-secondary mb-0">Strategic Advisor</p>
</div>
<div class="col-md-8 col-lg-7">
<p class="text-dark lead mb-0">“Morbi at fermentum enim, pulvinar malesuada quam. Morbi sit amet tellus luctus, vulputate arcu nec, consectetur diam. Proin est lacus, interdum ac aliquam sit amet, aliquam eget leo. Donec condimentum erat quam, tincidunt tempus augue consectetur a. Donec quis purus dictum, iaculis mi fringilla.”</p>
</div>
</div>
</div>
<!-- Testimonial (tab) -->
<div class="tab-pane fade" id="alpine" role="tabpanel">
<div class="row py-2 py-sm-1 py-md-3 py-lg-4 py-xl-5">
<div class="col-md-4 col-lg-3 offset-lg-1 mb-3 mb-md-0">
<img class="d-block rounded-circle mb-3" src="assets/img/avatar/18.jpg" width="86" alt="Albert Flores">
<h4 class="mb-0">Albert Flores</h4>
<p class="fs-lg text-body-secondary mb-0">Business Analyst</p>
</div>
<div class="col-md-8 col-lg-7">
<p class="text-dark lead mb-0">“Phasellus at varius arcu. Ut nec lobortis velit. Mauris vel risus quis lacus placerat fringilla. Aliquam congue risus tortor, sed posuere leo faucibus sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dui ante, rutrum eget vehicula sed.”</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tools -->
<section class="container overflow-hidden py-5 mt-2 mt-sm-3 my-2 my-lg-4 my-xl-5">
<div class="row align-items-center pb-1 pb-sm-3 pb-md-4">
<div class="col-md-5 text-center text-md-start pe-md-5 pe-lg-0 pe-xxl-4 ps-xl-5 mb-5 mb-md-0">
<h2 class="h1 pb-3 pb-xl-2 mb-lg-4 mb-xl-5">Join Around with your favorite tools that you use daily and keep things on track</h2>
<a class="btn btn-primary" href="#">See all integrations</a>
</div>
<div class="col-md-7 col-lg-6 offset-lg-1">
<div class="position-relative mx-auto" style="max-width: 510px;">
<img class="d-block d-dark-mode-none" src="assets/img/landing/saas-2/tools/circle-gray-1.png" style="animation: rotate-cw 100s linear infinite;" alt="Circle">
<img class="d-none d-dark-mode-block" src="assets/img/landing/saas-2/tools/circle-light-1.png" style="animation: rotate-cw 100s linear infinite;" alt="Circle">
<img class="d-block d-dark-mode-none position-absolute top-0 start-0" src="assets/img/landing/saas-2/tools/circle-gray-2.png" style="animation: rotate-ccw 50s linear infinite;" alt="Circle">
<img class="d-none d-dark-mode-block position-absolute top-0 start-0" src="assets/img/landing/saas-2/tools/circle-light-2.png" style="animation: rotate-ccw 50s linear infinite;" alt="Circle">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-1.png" data-aos="fade" data-aos-duration="600" data-aos-offset="250" data-aos-delay="1200" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-2.png" data-aos="fade" data-aos-duration="600" data-aos-offset="250" data-aos-delay="450" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-3.png" data-aos="fade" data-aos-duration="600" data-aos-offset="250" data-aos-delay="600" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-4.png" data-aos="fade" data-aos-duration="600" data-aos-offset="250" data-aos-delay="750" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-5.png" data-aos="fade" data-aos-duration="600" data-aos-offset="250" data-aos-delay="900" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-6.png" data-aos="fade" data-aos-duration="600" data-aos-offset="250" data-aos-delay="1050" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-7.png" data-aos="zoom-in" data-aos-duration="600" data-aos-offset="250" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-8.png" data-aos="zoom-in" data-aos-duration="600" data-aos-offset="250" data-aos-delay="150" alt="Icon">
<img class="position-absolute top-0 start-0 z-2" src="assets/img/landing/saas-2/tools/icon-9.png" data-aos="zoom-in" data-aos-duration="600" data-aos-offset="250" data-aos-delay="300" alt="Icon">
</div>
</div>
</div>
</section>
<!-- FAQ (Accordion) -->
<section class="bg-secondary py-5">
<div class="container py-lg-3 py-xl-5">
<div class="row pt-1 pb-2 py-sm-4">
<div class="col-md-4 text-center text-md-start">
<h2 class="h1">Any questions? Check out the FAQ</h2>
<p class="pb-3 pb-sm-4">Et felis vitae ac venenatis lacus cras etiam risus scelerisque auctor adipiscing in a porta</p>
<div class="d-none d-md-flex justify-content-center">
<svg class="text-warning ms-n4" width="200" height="211" viewBox="0 0 200 211" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M198.804 194.488C189.279 189.596 179.529 185.52 169.407 182.07L169.384 182.049C169.227 181.994 169.07 181.939 168.912 181.884C166.669 181.139 165.906 184.546 167.669 185.615C174.053 189.473 182.761 191.837 189.146 195.695C156.603 195.912 119.781 196.591 91.266 179.049C62.5221 161.368 48.1094 130.695 56.934 98.891C84.5539 98.7247 112.556 84.0176 129.508 62.667C136.396 53.9724 146.193 35.1448 129.773 30.2717C114.292 25.6624 93.7109 41.8875 83.1971 51.3147C70.1109 63.039 59.63 78.433 54.2039 95.0087C52.1221 94.9842 50.0776 94.8683 48.0703 94.6608C30.1803 92.8027 11.2197 83.6338 5.44902 65.1074C-1.88449 41.5699 14.4994 19.0183 27.9202 1.56641C28.6411 0.625793 27.2862 -0.561638 26.5419 0.358501C13.4588 16.4098 -0.221091 34.5242 0.896608 56.5659C1.8218 74.6941 14.221 87.9401 30.4121 94.2058C37.7076 97.0203 45.3454 98.5003 53.0334 98.8449C47.8679 117.532 49.2961 137.487 60.7729 155.283C87.7615 197.081 139.616 201.147 184.786 201.155L174.332 206.827C172.119 208.033 174.345 211.287 176.537 210.105C182.06 207.125 187.582 204.122 193.084 201.144C193.346 201.147 195.161 199.887 195.423 199.868C197.08 198.548 193.084 201.144 195.528 199.81C196.688 199.192 197.846 198.552 199.006 197.935C200.397 197.167 200.007 195.087 198.804 194.488ZM60.8213 88.0427C67.6894 72.648 78.8538 59.1566 92.1207 49.0388C98.8475 43.9065 106.334 39.2953 114.188 36.1439C117.295 34.8947 120.798 33.6609 124.168 33.635C134.365 33.5511 136.354 42.9911 132.638 51.031C120.47 77.4222 86.8639 93.9837 58.0983 94.9666C58.8971 92.6666 59.783 90.3603 60.8213 88.0427Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="col-md-8 col-lg-7 offset-lg-1">
<div class="accordion" id="faq">
<div class="accordion-item bg-light">
<h3 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#questionOne" aria-expanded="true" aria-controls="questionOne">Is there a free trial?</button>
</h3>
<div class="accordion-collapse collapse show" id="questionOne" aria-labelledby="headingOne" data-bs-parent="#faq">
<div class="accordion-body fs-sm">Adipiscing sagittis neque egestas id platea accumsan. Morbi inpa platea urna curabitur habitant pulvinar lacinia neque. Netus gravida amet, aliquam quam turpis aliquet cras. Find aute irure dolor in reprehenderit voluptate velit esse cillum dolore eu nulla pariatur. Sit amet, adipiscing elit.</div>
</div>
</div>
<div class="accordion-item bg-light">
<h3 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#questionTwo" aria-expanded="false" aria-controls="questionTwo">How do refunds work?</button>
</h3>
<div class="accordion-collapse collapse" id="questionTwo" aria-labelledby="headingTwo" data-bs-parent="#faq">
<div class="accordion-body fs-sm">Quisque rutrum sit amet magna sit amet tristique. Vivamus rhoncus ac purus vitae convallis. Aliquam erat volutpat. Proin egestas, mauris ut semper semper, ipsum felis mattis ligula, et porttitor ante arcu nec ante. Aliquam congue est eu turpis sollicitudin, et ullamcorper tortor aliquam.</div>
</div>
</div>
<div class="accordion-item bg-light">
<h3 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#questionThree" aria-expanded="false" aria-controls="questionThree">Do you offer student discounts?</button>
</h3>
<div class="accordion-collapse collapse" id="questionThree" aria-labelledby="headingThree" data-bs-parent="#faq">
<div class="accordion-body fs-sm">Proin ac quam eget velit luctus tincidunt vel in nunc. Maecenas cursus erat lacus, id interdum elit accumsan in. Mauris placerat dapibus sem, condimentum interdum nulla varius ac. Mauris quam mauris, rhoncus et tortor vel, tempus dignissim libero. Curabitur sed odio in odio elementum cursus.</div>
</div>
</div>
<div class="accordion-item bg-light">
<h3 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#questionFour" aria-expanded="false" aria-controls="questionFour">What happens if I run out of credit?</button>
</h3>
<div class="accordion-collapse collapse" id="questionFour" aria-labelledby="headingFour" data-bs-parent="#faq">
<div class="accordion-body fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac pretium dui. Aliquam rutrum justo lorem, in efficitur odio efficitur vel. Integer mattis, neque malesuada sagittis porttitor, enim tortor ullamcorper diam, id eleifend sem mauris at turpis. Curabitur sed nisi nec ligula dictum.</div>
</div>
</div>
<div class="accordion-item bg-light">
<h3 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#questionFive" aria-expanded="false" aria-controls="questionFive">Do you have monthly and yearly billing options?</button>
</h3>
<div class="accordion-collapse collapse" id="questionFive" aria-labelledby="headingFive" data-bs-parent="#faq">
<div class="accordion-body fs-sm">Vestibulum faucibus lectus eget augue pharetra, quis semper lectus gravida. Vestibulum pretium in elit sed iaculis. Curabitur elementum turpis at ipsum molestie, id maximus odio tincidunt. Praesent id lacinia orci. Phasellus at varius arcu. Ut nec lobortis velit.</div>
</div>
</div>
<div class="accordion-item bg-light">
<h3 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#questionSix" aria-expanded="false" aria-controls="questionSix">What happens when I change plans?</button>
</h3>
<div class="accordion-collapse collapse" id="questionSix" aria-labelledby="headingSix" data-bs-parent="#faq">
<div class="accordion-body fs-sm">Nunc non placerat mi, sit amet hendrerit lacus. Quisque cursus lorem vitae placerat ultrices. Morbi ut orci sit amet quam vulputate lobortis. Donec vulputate mi nec nisi tincidunt commodo. Nullam efficitur tincidunt tellus accumsan pellentesque. Suspendisse elementum blandit orci.</div>
</div>
</div>
<div class="accordion-item bg-light">
<h3 class="accordion-header" id="headingSeven">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#questionSeven" aria-expanded="false" aria-controls="questionSeven">How do I cancel my paid plan?</button>
</h3>
<div class="accordion-collapse collapse" id="questionSeven" aria-labelledby="headingSeven" data-bs-parent="#faq">
<div class="accordion-body fs-sm">Morbi a consequat diam. Fusce sit amet faucibus erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque id est dictum, suscipit neque id, ornare nibh. Cras lacinia, est non ultrices porttitor, arcu orci rhoncus leo, egestas condimentum lorem.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer bg-dark py-5" data-bs-theme="dark">
<div class="container pt-md-2 pt-lg-3 pt-xl-4">
<div class="row pb-5 pt-sm-2 mb-lg-2">
<div class="col-md-4 col-lg-3 pb-2 pb-md-0 mb-4 mb-md-0">
<a class="navbar-brand py-0 mb-3 mb-md-4" href="index.html">
<span class="text-primary flex-shrink-0 me-2">
<svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z"></path>
</svg>
</span>
<span class="text-white opacity-90">Around</span>
</a>
<p class="text-body fs-sm pb-2 pb-md-3 mb-3">Tellus non diam morbi quam vel venenatis proin sed. Dolor elementum nunc dictum interdum amet arcu aenean eu integer</p>
<div class="d-flex gap-3">
<a class="btn btn-icon btn-sm btn-secondary btn-facebook rounded-circle" href="#" aria-label="Facebook">
<i class="ai-facebook"></i>
</a>
<a class="btn btn-icon btn-sm btn-secondary btn-instagram rounded-circle" href="#" aria-label="Instagram">
<i class="ai-instagram"></i>
</a>
<a class="btn btn-icon btn-sm btn-secondary btn-linkedin rounded-circle" href="#" aria-label="LinkedIn">
<i class="ai-linkedin"></i>
</a>
</div>
</div>
<div class="col-md-8 col-lg-7 col-xl-6 offset-lg-2 offset-xl-3">
<div class="row row-cols-1 row-cols-sm-3">
<div class="col mb-4 mb-md-0">
<h4 class="h6 fw-bold pb-lg-1">Company</h4>
<ul class="nav flex-column">
<li><a class="nav-link fw-normal py-1 px-0" href="#">Features</a></li>
<li><a class="nav-link fw-normal py-1 px-0" href="#">Reviews</a></li>
<li><a class="nav-link fw-normal py-1 px-0" href="#">How it works</a></li>
<li><a class="nav-link fw-normal py-1 px-0" href="#">Pricing</a></li>
</ul>
</div>