Files
site/res/templates/frontend-landingpage.html
2025-12-27 21:59:58 +08:00

1619 lines
86 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{template "components/header.html" .}}
{{template "components/preloader.html" .}}
<!-- ------------------------------------- -->
<!-- Top Bar Start -->
<!-- ------------------------------------- -->
<div class="topbar-image bg-primary py-1 rounded-0 mb-0 alert alert-dismissible fade show" role="alert">
<div class="d-flex justify-content-center gap-sm-3 gap-2 align-items-center text-center flex-md-nowrap flex-wrap">
<span class="badge bg-white bg-opacity-10 fs-2 fw-bolder px-2">New</span>
<p class="mb-0 text-white fw-bold">Frontend Pages Included!</p>
</div>
<button type="button" class="btn-close btn-close-white p-2 fs-2" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- ------------------------------------- -->
<!-- Top Bar End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Header Start -->
<!-- ------------------------------------- -->
<header class="header-fp p-0 w-100">
<nav class="navbar navbar-expand-lg bg-primary-subtle py-2 py-lg-10">
<div class="custom-container d-flex align-items-center justify-content-between">
<a href="../main/frontend-landingpage.html" class="text-nowrap logo-img">
<img src="../assets/images/logos/dark-logo.svg" class="dark-logo" alt="Logo-Dark" />
<img src="../assets/images/logos/light-logo.svg" class="light-logo" alt="Logo-light" />
</a>
<button class="navbar-toggler border-0 p-0 shadow-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<i class="ti ti-menu-2 fs-8"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 gap-xl-7 gap-8 mb-lg-0">
<li class="nav-item">
<a class="nav-link fs-4 fw-bold text-dark link-primary" href="../main/frontend-aboutpage.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link fs-4 fw-bold text-dark link-primary" href="../main/frontend-blogpage.html">Blog</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link fs-4 fw-bold text-dark link-primary d-flex gap-2" href="../main/frontend-portfoliopage.html">Portfolio
<span class="badge text-primary bg-primary-subtle fs-2 fw-bolder hstack">New</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-4 fw-bold text-dark link-primary" href="../main/index.html">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link fs-4 fw-bold text-dark link-primary" href="../main/frontend-pricingpage.html">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link fs-4 fw-bold text-dark link-primary" href="../main/frontend-contactpage.html">Contact</a>
</li>
</ul>
<div>
<a href="../main/authentication-login.html" class="btn btn-primary py-8 px-9">Log In</a>
</div>
</div>
</div>
</nav>
</header>
<!-- ------------------------------------- -->
<!-- Header End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Responsive Sidebar Start -->
<!-- ------------------------------------- -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<a href="../main/frontend-landingpage.html">
<img src="../assets/images/logos/dark-logo.svg" alt="Logo-light" />
</a>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<a href="../main/frontend-aboutpage.html" class="px-0 fs-4 d-block text-dark link-primary w-100 py-2">
About Us
</a>
</li>
<li class="mb-1">
<a href="../main/frontend-blogpage.html" class="px-0 fs-4 d-block w-100 py-2 text-dark link-primary">
Blog
</a>
</li>
<li class="mb-1">
<a href="../main/frontend-portfoliopage.html" class="px-0 fs-4 d-flex align-items-center justify-content-start gap-2 w-100 py-2 text-dark link-primary">
Portfolio
<span class="badge text-primary bg-primary-subtle fs-2 fw-bolder hstack">New</span>
</a>
</li>
<li class="mb-1">
<a href="../main/index.html" class="px-0 fs-4 d-block w-100 py-2 text-dark link-primary">
Dashboard
</a>
</li>
<li class="mb-1">
<a href="../main/frontend-pricingpage.html" class="px-0 fs-4 d-block w-100 py-2 text-dark link-primary">
Pricing
</a>
</li>
<li class="mb-1">
<a href="../main/frontend-contactpage.html" class="px-0 fs-4 d-block w-100 py-2 text-dark link-primary">
Contact
</a>
</li>
<li class="mt-3">
<a href="../main/authentication-login.html" class="btn btn-primary w-100">Log In</a>
</li>
</ul>
</div>
</div>
<!-- ------------------------------------- -->
<!-- Responsive Sidebar End -->
<!-- ------------------------------------- -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body pt-0">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/W_ADbeKyP4c?si=-63qC3_L1fI5wEsO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="main-wrapper overflow-hidden">
<!-- ------------------------------------- -->
<!-- banner Start -->
<!-- ------------------------------------- -->
<Section class="bg-primary-subtle pt-7 py-lg-0 py-7">
<div class="custom-container">
<div class="row justify-content-center pt-lg-5 mb-4">
<div class="col-lg-8">
<h1 class="text-link-color fw-bolder text-center fs-13 mb-0 pt-lg-2">
Most powerful & <span class="text-primary">developer friendly</span> dashboard
</h1>
</div>
</div>
<div class="row align-items-end mb-3">
<div class="col-lg-3 d-none d-lg-block">
<img src="../assets/images/frontend-pages/banner-top-left.svg" class="ms-n2 w-100" alt="banner-top-left">
</div>
<div class="col-lg-6">
<div class="d-flex justify-content-center align-items-center gap-9">
<ul class="hstack mb-0">
<li class="ms-n8">
<a href="javascript:void(0)" class="me-1">
<img src="../assets/images/profile/user-5.jpg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="modernize-img">
</a>
</li>
<li class="ms-n8">
<a href="javascript:void(0)" class="me-1">
<img src="../assets/images/profile/user-2.jpg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="modernize-img">
</a>
</li>
<li class="ms-n8">
<a href="javascript:void(0)" class="me-1">
<img src="../assets/images/profile/user-6.jpg" class="rounded-circle border border-2 border-white" width="40" height="40" alt="modernize-img">
</a>
</li>
</ul>
<p class="text-muted fs-5 mb-0 fw-bold">52,589+ developers & agencies using our templates
</p>
</div>
<div class="d-flex justify-content-center align-items-center gap-4 my-4 position-relative z-1">
<a href="../main/authentication-login.html" class="btn btn-primary">Log In</a>
<a data-bs-toggle="modal" data-bs-target="#exampleModal" href="javascript:void(0)" class="text-dark fs-4 d-flex align-items-center gap-3 fw-bold">
<span class="fs-7 text-primary border border-2 rounded-circle p-6 d-flex align-items-center justify-content-center border-primary">
<iconify-icon icon="bi:play-fill"></iconify-icon>
</span>
See how it works
</a>
</div>
<div class="d-flex justify-content-center align-items-center gap-9 position-relative z-1 pb-lg-13">
<a class="d-flex align-items-center justify-content-center bg-white rounded-3 round-54 shadow" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Bootstrap">
<img src="../assets/images/frontend-pages/icon-bootstrap.svg" width="28" height="28" alt="icon" />
</a>
<a class="d-flex align-items-center justify-content-center bg-white rounded-3 round-54 shadow" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Sass">
<img src="../assets/images/frontend-pages/icon-sass.svg" width="28" height="28" alt="icon" />
</a>
<a class="d-flex align-items-center justify-content-center bg-white rounded-3 round-54 shadow" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Gulp">
<img src="../assets/images/frontend-pages/icon-gulp.svg" width="28" height="28" alt="icon" />
</a>
<a class="d-flex align-items-center justify-content-center bg-white rounded-3 round-54 shadow" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Figma">
<img src="../assets/images/frontend-pages/icon-figma.svg" width="24" height="24" alt="icon" />
</a>
<a class="d-flex align-items-center justify-content-center bg-white rounded-3 round-54 shadow" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Apexchart">
<img src="../assets/images/frontend-pages/icon-apexchart.svg" width="24" height="24" alt="icon" />
</a>
</div>
</div>
<div class="col-lg-3 d-none d-lg-block">
<img src="../assets/images/frontend-pages/banner-top-right.svg" class="me-n2 w-100" alt="banner-top-right">
</div>
</div>
<div class="row d-none d-lg-block">
<div class="col-12">
<img src="../assets/images/frontend-pages/bottom-part.svg" alt="screenshots" class="w-100">
</div>
</div>
</div>
</Section>
<!-- ------------------------------------- -->
<!-- banner End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Card Start -->
<!-- ------------------------------------- -->
<section class="pt-5 pt-md-14 pt-lg-12 pb-3 pb-md-7 pb-lg-14">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-6">
<p class="fs-4 fw-normal text-center mb-7 mb-md-5">
Introducing Modernize's Light & Dark
Skins, <span class="fw-bolder">Exceptional Dashboards</span>, and Dynamic Pages - Stay
Updated on
What's New!
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="card shadow-none bg-warning-subtle rounded-24">
<div class="card-body text-center py-14">
<img src="../assets/images/frontend-pages/icon-briefcase.svg" alt="icon">
<h5 class="my-3 fw-bolder fs-5">Light & Dark Color Schemes</h5>
<p class="mb-0 fs-4">Choose your preferred visual style effortlessly.</p>
</div>
</div>
<div class="card shadow-none bg-secondary-subtle rounded-24">
<div class="card-body text-center pt-5 mt-2 mb-8">
<h5 class="mb-3 fw-bolder fs-5">12+ Ready to Use Application Designs</h5>
<p class="mb-0 fs-4"> Instantly deployable designs for your applications.</p>
</div>
<div class="d-flex justify-content-center">
<img src="../assets/images/frontend-pages/playframe.png" alt="icon">
</div>
</div>
</div>
<div class="col-lg-4 order-last order-lg-0">
<div class="card shadow-none bg-primary-subtle rounded-24">
<div class="card-body text-center py-14 px-3">
<img src="../assets/images/logos/favicon.png" alt="icon">
<h2 class="fs-10 fw-bolder mt-5 mb-3">New Demos</h2>
<p class="mb-14 fs-4">Brand new demos to help you build the perfect dashboard: <span class="fw-semibold">Dark</span> and <span class="fw-semibold">Right-to-Left.</span>
</p>
<img src="../assets/images/frontend-pages/screen.png" alt="icon" class="img-fluid pb-2">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card shadow-none bg-secondary-subtle rounded-24">
<div class="card-body text-center py-14">
<img src="../assets/images/frontend-pages/icon-speech-bubble.svg" alt="icon">
<h5 class="my-3 fw-bolder fs-5">Code Improvements</h5>
<p class="mb-0 fs-4"> Benefit from continuous improvements and optimizations.</p>
</div>
</div>
<div class="card shadow-none bg-danger-subtle rounded-24">
<div class="card-body text-center pt-14 pb-5 mb-8">
<img src="../assets/images/frontend-pages/icon-favorites.svg" alt="icon">
<h5 class="my-3 fw-bolder fs-5">50+ UI Components</h5>
<p class="mb-0 fs-4"> A rich collection for seamless user experiences.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Card end -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Tabs Start -->
<!-- ------------------------------------- -->
<section class="shadow-sm">
<div class="border-top">
<ul class="nav team-tab nav-tabs flex-nowrap overflow-x-auto container-fluid" id="myTab" role="tablist">
<li class="nav-item " role="presentation">
<button class="nav-link py-7 fs-5 fw-semibold w-100 active border-end justify-content-center d-flex align-items-center rounded-0" id="team-tab" data-bs-toggle="tab" data-bs-target="#team-tab-pane" type="button" role="tab" aria-controls="team-tab-pane" aria-selected="true">
<i class="ti ti-user-circle fs-7 me-2"></i>
Team Scheduling
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link py-7 fs-5 fw-semibold w-100 border-end d-flex justify-content-center align-items-center rounded-0" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments-tab-pane" type="button" role="tab" aria-controls="payments-tab-pane" aria-selected="false">
<i class="ti ti-wallet fs-7 me-2"></i>
Payments
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link py-7 fs-5 fw-semibold w-100 border-end d-flex justify-content-center align-items-center rounded-0" id="embedding-tab" data-bs-toggle="tab" data-bs-target="#embedding-tab-pane" type="button" role="tab" aria-controls="embedding-tab-pane" aria-selected="false">
<i class="ti ti-layout-sidebar fs-7 me-2"></i>
Embedding
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link py-7 fs-5 fw-semibold w-100 d-flex justify-content-center align-items-center rounded-0" id="workflows-tab" data-bs-toggle="tab" data-bs-target="#workflows-tab-pane" type="button" role="tab" aria-controls="workflows-tab-pane" aria-selected="false">
<i class="ti ti-arrow-fork fs-7 me-2"></i>
Workflows
</button>
</li>
</ul>
</div>
<div class="container-fluid py-lg-14 py-md-7 py-3">
<div class="">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="team-tab-pane" role="tabpanel" aria-labelledby="team-tab" tabindex="0">
<div class="row gap-lg-0 gap-7">
<div class="col-lg-6">
<div class="bg-primary-subtle rounded-3 px-10 pt-5 pb-4">
<img src="../assets/images/frontend-pages/tabsimage.png" alt="icon" class="w-100">
</div>
</div>
<div class="col-lg-6">
<div class="d-flex flex-column h-100 justify-content-center align-items-start ps-lg-7 ms-lg-8">
<h2 class="fs-10 fw-bolder">Defend your focus</h2>
<div class="accordion tabs-accordion my-4 w-100" id="accordionExample1">
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Combine teammate schedules
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample1">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Factor in outside colleagues
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Round robin pooling
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
</div>
<button class="btn btn-primary px-9 py-6">Learn More</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="payments-tab-pane" role="tabpanel" aria-labelledby="payments-tab" tabindex="0">
<div class="row gap-lg-0 gap-7">
<div class="col-lg-6">
<div class="bg-primary-subtle rounded-3 p-13">
<img src="../assets/images/frontend-pages/tabsimage.png" alt="icon" class="w-100">
</div>
</div>
<div class="col-lg-6">
<div class="d-flex flex-column h-100 justify-content-center align-items-start ps-lg-7">
<h2 class="fs-10 fw-bolder">Defend your focus</h2>
<div class="accordion tabs-accordion my-4 w-100" id="accordionExample2">
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Combine teammate schedules
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample2">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Factor in outside colleagues
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Round robin pooling
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
</div>
<button class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="embedding-tab-pane" role="tabpanel" aria-labelledby="embedding-tab" tabindex="0">
<div class="row gap-lg-0 gap-7">
<div class="col-lg-6">
<div class="bg-primary-subtle rounded-3 p-13">
<img src="../assets/images/frontend-pages/tabsimage.png" alt="icon" class="w-100">
</div>
</div>
<div class="col-lg-6">
<div class="d-flex flex-column h-100 justify-content-center align-items-start ps-lg-7">
<h2 class="fs-10 fw-bolder">Defend your focus</h2>
<div class="accordion tabs-accordion my-4 w-100" id="accordionExample3">
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Combine teammate schedules
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample3">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Factor in outside colleagues
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample3">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Round robin pooling
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample3">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
</div>
<button class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="workflows-tab-pane" role="tabpanel" aria-labelledby="workflows-tab" tabindex="0">
<div class="row gap-lg-0 gap-7">
<div class="col-lg-6">
<div class="bg-primary-subtle rounded-3 p-13">
<img src="../assets/images/frontend-pages/tabsimage.png" alt="icon" class="w-100">
</div>
</div>
<div class="col-lg-6">
<div class="d-flex flex-column h-100 justify-content-center align-items-start ps-lg-7">
<h2 class="fs-10 fw-bolder">Defend your focus</h2>
<div class="accordion tabs-accordion my-4 w-100" id="accordionExample4">
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Combine teammate schedules
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample4">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header ">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Factor in outside colleagues
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample4">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
<div class="accordion-item border-0 border-bottom">
<h2 class="accordion-header">
<button class="accordion-button shadow-none collapsed px-0 fs-5 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Round robin pooling
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample4">
<div class="accordion-body px-0 fs-4">
Factor in availability for required attendees, and skip checking
for
conflicts for optional attendees.
</div>
</div>
</div>
</div>
<button class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Tabs end -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Leadership Start -->
<!-- ------------------------------------- -->
<section class="py-5 py-md-14 py-lg-12">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<h2 class="fs-10 fw-bolder">Our leadership</h2>
<p class="fs-4 mb-0">
Our robust analytics offer rich insights into the
information buyers want, informing where teams
</p>
</div>
</div>
<div class="owl-carousel leadership-carousel owl-theme mt-5">
<div class="item">
<div class="">
<img src="../assets/images/frontend-pages/alex.jpg" alt="leader" class="rounded-3">
<div class="position-relative leadership-card z-1 bg-white mt-n10 rounded py-3 px-8 mx-9 text-center shadow-sm">
<h4 class="fs-5 fw-semibold mb-2">Alex Martinez</h4>
<p class="fs-3 mb-0">CEO & Co-Founder</p>
</div>
</div>
</div>
<div class="item">
<div class="">
<img src="../assets/images/frontend-pages/jordan.jpg" alt="leader" class="rounded-3">
<div class="position-relative leadership-card z-1 bg-white mt-n10 rounded py-3 px-8 mx-9 text-center shadow-sm">
<h4 class="fs-5 fw-semibold mb-2">Jordan Nguyen</h4>
<p class="fs-3 mb-0">CTO & Co-Founder</p>
</div>
</div>
</div>
<div class="item">
<div class="">
<img src="../assets/images/frontend-pages/taylor.jpg" alt="leader" class="rounded-3">
<div class="position-relative leadership-card z-1 bg-white mt-n10 rounded py-3 px-8 mx-9 text-center shadow-sm">
<h4 class="fs-5 fw-semibold mb-2">Taylor Roberts</h4>
<p class="fs-3 mb-0">Product Manager</p>
</div>
</div>
</div>
<div class="item">
<div class="">
<img src="../assets/images/frontend-pages/morgan.jpg" alt="leader" class="rounded-3">
<div class="position-relative leadership-card z-1 bg-white mt-n10 rounded py-3 px-8 mx-9 text-center shadow-sm">
<h4 class="fs-5 fw-semibold mb-2">Morgan Patel</h4>
<p class="fs-3 mb-0">Lead Developer</p>
</div>
</div>
</div>
<div class="item">
<div class="">
<img src="../assets/images/frontend-pages/kiana.jpg" alt="leader" class="rounded-3">
<div class="position-relative leadership-card z-1 bg-white mt-n10 rounded py-3 px-8 mx-9 text-center shadow-sm">
<h4 class="fs-5 fw-semibold mb-2">Morgan Patel</h4>
<p class="fs-3 mb-0">Lead Developer</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Leadership end -->
<!-- ------------------------------------- -->
<section class="bg-primary py-9">
<div class="container-fluid">
<div class="d-flex gap-3 justify-content-center align-items-center flex-md-nowrap flex-wrap">
<ul class="hstack mb-0">
<li class="ms-n8">
<a href="javascript:void(0)" class="me-1">
<img src="../assets/images/profile/user-5.jpg" class="rounded-circle border border-2 border-white" width="44" height="44" alt="modernize-img">
</a>
</li>
<li class="ms-n8">
<a href="javascript:void(0)" class="me-1">
<img src="../assets/images/profile/user-2.jpg" class="rounded-circle border border-2 border-white" width="44" height="44" alt="modernize-img">
</a>
</li>
</ul>
<p class="text-white fs-4 mb-0 text-md-start text-center">Save valuable time and effort spent
searching for a solution.</p>
<a href="javascript:void(0)" class="text-white fs-4 fw-semibold text-underline">Contact us now</a>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Discover Start -->
<!-- ------------------------------------- -->
<section class="py-5 py-md-14 py-lg-12">
<div class="custom-container">
<div class="rounded-24 bg-primary-subtle py-5 py-md-14 my-md-2">
<div class="px-md-12 px-4">
<h2 class="fs-10 fw-bolder mb-5 pb-lg-2">Discover Powerful Dozens of
<br />
Purpose-Fit Templates
</h2>
</div>
<div class="mb-14 pb-lg-3">
<div class="owl-carousel template-carousel owl-theme">
<div class="item rounded overflow-hidden">
<a target="_blank" href="../main/index.html">
<img src="../assets/images/demos/demo-main.jpg" alt="template">
</a>
</div>
<div class="item rounded overflow-hidden">
<a target="_blank" href="../dark/index.html">
<img src="../assets/images/demos/demo-dark.jpg" alt="template">
</a>
</div>
<div class="item rounded overflow-hidden">
<a target="_blank" href="../horizontal/index.html">
<img src="../assets/images/demos/demo-horizontal.jpg" alt="template">
</a>
</div>
<div class="item rounded overflow-hidden">
<a target="_blank" href="../minisidebar/index.html">
<img src="../assets/images/demos/demo-minisidebar.jpg" alt="template">
</a>
</div>
<div class="item rounded overflow-hidden">
<a target="_blank" href="../rtl/index.html">
<img src="../assets/images/demos/demo-rtl.jpg" alt="template">
</a>
</div>
</div>
</div>
<div class="d-flex flex-lg-row flex-column gap-xl-13 gap-9 px-sm-12">
<div>
<h3 class="fs-5 fw-bolder text-center mb-3">High Customizability</h3>
<p class="text-center fs-3 mb-0">
Tailor the dashboard to your exact needs. Customize layouts,
color schemes, and widgets effortlessly for a personalized user experience.
</p>
</div>
<div>
<h3 class="fs-5 fw-bolder text-center mb-3"> Powerful Data Analytics</h3>
<p class="text-center fs-3 mb-0">
Unlock the true potential of your data with our advanced
analytics tools. Gain valuable insights and make data-driven decisions with ease.</p>
</div>
<div>
<h3 class="fs-5 fw-bolder text-center mb-3"> Interactive Graphs & Charts</h3>
<p class="text-center fs-3 mb-0">
Visualize complex data sets beautifully with our interactive
graphs and charts. Quickly grasp trends and patterns for smarter analysis.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Discover End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Testimonial Start -->
<!-- ------------------------------------- -->
<section class="pb-5 pb-md-14 pb-lg-12">
<div class="container-fluid">
<div class="row align-items-center justify-content-between">
<div class="col-lg-5">
<div class="">
<h2 class="fs-10 fw-bolder mb-3">
What our clients
<br /> think
<img src="../assets/images/logos/favicon.png" alt="icon"> about us?
</h2>
<p class="fs-4">
Our users' feedback is a testament to our commitment to quality and user satisfaction.
Read what they have to say about their journey with us.
</p>
</div>
</div>
<div class="col-lg-6">
<div class="border p-7 p-md-5 rounded-3">
<h3 class="fs-7 fw-semibold text-dark">Features avaibility</h3>
<div class="owl-carousel testimonial-carousel owl-theme">
<div class="item">
<div>
<div class="d-flex align-items-center gap-3 my-4">
<div>
<img src="../assets/images/frontend-pages/user_1.png" width="56" height="56" alt="user">
</div>
<p class="fs-4 fw-semibold mb-0 text-dark">Sophia Johnson</p>
</div>
<p class="fs-5 border-bottom pb-4 mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="item">
<div>
<div class="d-flex align-items-center gap-3 my-4">
<div>
<img src="../assets/images/frontend-pages/user-2.png" width="56" height="56" alt="user">
</div>
<p class="fs-4 fw-semibold mb-0 text-dark">Jenny Wilson</p>
</div>
<p class="fs-5 border-bottom pb-4 mb-4">
This template is great, UI-rich and up-to-date. Although it is pretty much
complete, I suggest to improve a bit of documentation. Thanks & Highly
recommended!
</p>
</div>
</div>
<div class="item">
<div>
<div class="d-flex align-items-center gap-3 my-4">
<div>
<img src="../assets/images/frontend-pages/user-3.png" width="56" height="56" alt="user">
</div>
<p class="fs-4 fw-semibold mb-0 text-dark">Liam Carter</p>
</div>
<p class="fs-5 border-bottom pb-4 mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="item">
<div>
<div class="d-flex align-items-center gap-3 my-4">
<div>
<img src="../assets/images/frontend-pages/user_1.png" width="56" height="56" alt="user">
</div>
<p class="fs-4 fw-semibold mb-0 text-dark">Sophia Johnson</p>
</div>
<p class="fs-5 border-bottom pb-4 mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Testimonial End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Features Start -->
<!-- ------------------------------------- -->
<section>
<div class="custom-container">
<div class="py-5 py-md-14 py-lg-12 bg-primary-subtle rounded-3 overflow-hidden">
<div class="row justify-content-center">
<div class="col-lg-6">
<h2 class="fs-10 fw-bolder text-center mb-10 pb-lg-4 px-2 px-md-0">
Enjoy unparalleled features & exceptional flexibility.
</h2>
</div>
</div>
<div class="w-100 text-nowrap">
<div class="slide-animation1 d-flex gap-7 text-nowrap">
<!-- Feature Item 1 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-wand text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">6 Theme Colors</p>
</div>
<!-- Feature Item 2 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-table text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Dark & Light Sidebar</p>
</div>
<!-- Feature Item 3 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-stack-2 text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">425+ Page Templates</p>
</div>
<!-- Feature Item 4 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-puzzle text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">150+ UI Components</p>
</div>
<!-- Feature Item 5 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-switch-2 text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">6 Theme Colors</p>
</div>
<!-- Feature Item 1 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-wand text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">6 Theme Colors</p>
</div>
<!-- Feature Item 2 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-table text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Dark & Light Sidebar</p>
</div>
<!-- Feature Item 3 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-stack-2 text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">425+ Page Templates</p>
</div>
<!-- Feature Item 4 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-puzzle text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">150+ UI Components</p>
</div>
<!-- Feature Item 5 -->
<div class="feature-item bg-white rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-switch-2 text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">6 Theme Colors</p>
</div>
</div>
</div>
<div class="w-100 text-nowrap">
<div class="slide-animation2 d-flex gap-7 text-nowrap my-4">
<!-- Feature Item 6 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-tag text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Bootstrap 5x</p>
</div>
<!-- Feature Item 7 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-diamonds text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">200+ Font Icons</p>
</div>
<!-- Feature Item 8 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-device-mobile text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Fully Responsive</p>
</div>
<!-- Feature Item 9 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-source-code text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">SassBase CSS</p>
</div>
<!-- Feature Item 6 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-tag text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Bootstrap 5x</p>
</div>
<!-- Feature Item 7 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-diamonds text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">200+ Font Icons</p>
</div>
<!-- Feature Item 8 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-device-mobile text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Fully Responsive</p>
</div>
<!-- Feature Item 9 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-source-code text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">SassBase CSS</p>
</div>
<!-- Feature Item 6 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-tag text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Bootstrap 5x</p>
</div>
<!-- Feature Item 7 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-diamonds text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">200+ Font Icons</p>
</div>
<!-- Feature Item 8 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-device-mobile text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Fully Responsive</p>
</div>
<!-- Feature Item 9 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-source-code text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">SassBase CSS</p>
</div>
</div>
</div>
<div class="w-100 text-nowrap">
<div class="slide-animation1 d-flex gap-7 text-nowrap">
<!-- Feature Item 10 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-toggle-left text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Easy to Customize</p>
</div>
<!-- Feature Item 11 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-chart-pie-3 text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Lots of Chart Options</p>
</div>
<!-- Feature Item 12 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-table text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Lots of Table Examples</p>
</div>
<!-- Feature Item 13 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-repeat text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Regular Updates</p>
</div>
<!-- Feature Item 14 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-messages text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Dedicated Support</p>
</div>
<!-- Feature Item 10 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-toggle-left text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Easy to Customize</p>
</div>
<!-- Feature Item 11 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-chart-pie-3 text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Lots of Chart Options</p>
</div>
<!-- Feature Item 12 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-table text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Lots of Table Examples</p>
</div>
<!-- Feature Item 13 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-repeat text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Regular Updates</p>
</div>
<!-- Feature Item 14 -->
<div class="feature-item bg-white p-4 rounded-3 gap-8 d-flex align-items-center justify-content-center">
<i class="ti ti-messages text-primary fs-8" aria-hidden="true"></i>
<p class="fs-3 fw-semibold mb-0 gap-3">Dedicated Support</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Features End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Plans Start -->
<!-- ------------------------------------- -->
<section class="py-5 py-md-14 py-lg-12">
<div class="container-fluid">
<div class="">
<h2 class="fw-bolder fs-10 text-center">111,476+ Trusted developers &
<br /> many tech giants
as well
</h2>
<div class="row my-sm-5 my-4">
<div class="col-xl-3 col-sm-6 mb-4">
<div class="card p-7 mb-0 rounded-3 border">
<h3 class="fs-6 fw-bolder mb-0">Single Use</h3>
<p class="fs-2 mt-3 pb-sm-7 pb-3 mb-0 fw-bold border-bottom">
Use for single end product which end
users cant be charged for.
</p>
<h3 class="fs-3 fw-normal mt-sm-7 mt-3 text-muted">
<span class="fs-10 fw-bolder text-dark">$49</span>/
one time pay
</h3>
<div class="my-sm-7 my-3 d-flex flex-column gap-3">
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Full source code</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Documentation</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-x.svg" alt="">
<p class="fs-3 fw-bold mb-0 text-muted">Use in SaaS app</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One</span>
Project
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Technical
Support
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Free
Updates
</p>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-primary">Purchase Now</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-4">
<div class="card p-7 mb-0 rounded-3 border">
<h3 class="fs-6 fw-bolder mb-0">Multiple Use</h3>
<p class="fs-2 mt-3 mb-0 pb-sm-7 pb-3 fw-bold border-bottom">
Use for unlimited end products end users
cant be charged for.
</p>
<h3 class="fs-3 fw-normal mt-sm-7 mt-3 text-muted">
<span class="fs-10 fw-bolder text-dark">$89</span>/
one time pay
</h3>
<div class="my-sm-7 my-3 d-flex flex-column gap-3">
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Full source code</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Documentation</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-x.svg" alt="">
<p class="fs-3 fw-bold mb-0 text-muted">Use in SaaS app</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One</span>
Project
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Technical
Support
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Free
Updates
</p>
</div>
</div>
<button class="btn btn-primary">Purchase Now</button>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-4">
<div class="card p-7 mb-0 rounded-3 border">
<h3 class="fs-6 fw-bolder mb-0">
Extended Use <span class="text-primary fs-2 fw-bolder bg-primary-subtle py-1 px-2 rounded ms-2">Popular</span>
</h3>
<p class="fs-2 mt-3 mb-0 pb-sm-7 pb-3 fw-bold border-bottom">
Use for single end product which end
users can be charged for.
</p>
<h3 class="fs-3 fw-normal mt-sm-7 mt-3 text-muted">
<span class="fs-10 fw-bolder text-dark">$299</span>/
one time pay
</h3>
<div class="my-sm-7 my-3 d-flex flex-column gap-3">
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Full source code</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Documentation</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold mb-0 text-dark">Use in SaaS app</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One</span>
Project
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Technical
Support
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Free
Updates
</p>
</div>
</div>
<button class="btn btn-primary">Purchase Now</button>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card p-7 mb-0 rounded-3 border">
<h3 class="fs-6 fw-bolder mb-0">
Unlimited Use
</h3>
<p class="fs-2 mt-3 pb-sm-7 pb-3 mb-0 fw-bold border-bottom">
Use in unlimited end products end users
can be charged for.
</p>
<h3 class="fs-3 fw-normal mt-sm-7 mt-3 text-muted">
<span class="fs-10 fw-bolder text-dark">$499</span>/
one time pay
</h3>
<div class="my-sm-7 my-3 d-flex flex-column gap-3">
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Full source code</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">Documentation</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold mb-0 text-dark">Use in SaaS app</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One</span>
Project
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Technical
Support
</p>
</div>
<div class="d-flex gap-2">
<img src="../assets/images/frontend-pages/icon-circle-check.svg" alt="">
<p class="fs-3 fw-bold text-dark mb-0">
<span class="fw-bolder">One Year</span>
Free
Updates
</p>
</div>
</div>
<button class="btn btn-primary">Purchase Now</button>
</div>
</div>
</div>
<div class="">
<p class="fs-4 fw-bold text-center mb-7">Secured payment with PayPal & Razorpay</p>
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="d-flex align-items-center justify-content-between gap-4 flex-wrap">
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Visa">
<img src=" ../assets/images/frontend-pages/visa.png" alt="visa">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Mastercard">
<img src="../assets/images/frontend-pages/mastercard.png" alt="mastercard">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Americanexpress">
<img src="../assets/images/frontend-pages/americanexpress.png" alt="americanexpress">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Paypal">
<img src="../assets/images/frontend-pages/paypal.png" alt="paypal">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Maestro">
<img src="../assets/images/frontend-pages/maestro.png" alt="maestro">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="JCB">
<img src="../assets/images/frontend-pages/jcb.png" alt="jcb">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Dinersclub">
<img src="../assets/images/frontend-pages/dinersclub.png" alt="dinersclub">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Discover">
<img src="../assets/images/frontend-pages/discover.png" alt="discover">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Plans End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Faq Start -->
<!-- ------------------------------------- -->
<section>
<div class="container-fluid">
<h2 class="fs-10 fw-bolder text-center">Frequently Asked Questions</h2>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="my-13">
<div class="accordion faq-accordion" id="accordionExample1">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What is included with my purchase?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample1">
<div class="accordion-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod
tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis
nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu
fugiat
nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa
qui
officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Are there any recurring fees?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat
nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui
officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Can I use the template on multiple projects?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute
irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia
deserunt
mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Can I customize the admin dashboard template to match my brand?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute
irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia
deserunt
mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Are there any restrictions on using the template?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute
irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia
deserunt
mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
How can I get support after purchase?
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#accordionExample1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui
officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center">
<p class="text-center fs-3 fw-bold dashed-border py-1 px-2 rounded mb-0">
Still have a question? <a target="_blank" href="https://discord.com/invite/XujgB8ww4n" class="text-underline text-body">Ask on
discord</a> or
<a target="_blank" href="https://adminmart.com/support/" class="text-underline text-body">submit a ticket</a>.
</p>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Faq End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Develop Start -->
<!-- ------------------------------------- -->
<section class="my-5 my-md-14 my-lg-12">
<div class="custom-container">
<div class="bg-primary-subtle rounded-3 position-relative overflow-hidden">
<div class="row">
<div class="col-lg-6">
<div class="py-lg-12 ps-lg-12 py-5 px-lg-0 px-9">
<h2 class="fs-10 fw-bolder text-lg-start text-center">
Develop with feature-rich Bootstrap Dashboard
</h2>
<div class="d-flex justify-content-lg-start justify-content-center gap-3 my-4 flex-sm-nowrap flex-wrap">
<a href="../main/authentication-login.html" class="btn btn-primary py-6 px-9">Member Login</a>
<a href="../main/authentication-register.html" class="btn btn-outline-primary py-6 px-9">Register as Member</a>
</div>
<p class="fs-3 text-lg-start text-center mb-0">
<span class="fw-bolder">One-time purchase</span> - no recurring fees.
</p>
</div>
</div>
<div class="col-lg-6 d-lg-block d-none">
<img src="../assets/images/frontend-pages/design-collection.png" alt="banner" class="position-absolute develop-feature-rich">
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- Develop End -->
<!-- ------------------------------------- -->
</div>
<!-- ------------------------------------- -->
<!-- Footer Start -->
<!-- ------------------------------------- -->
<footer>
<div class="container-fluid">
<div class="border-bottom">
<div class="row mb-sm-12 mb-4">
<div class="col-md-3 col-6">
<h3 class="fs-4 fw-semibold mb-7">Applications</h3>
<ul class="d-flex flex-column gap-9">
<li>
<a href="../main/app-kanban.html" class="fs-4 text-body link-primary">Kanban</a>
</li>
<li>
<a href="../main/app-invoice.html" class="fs-4 text-body link-primary">Invoice
List</a>
</li>
<li>
<a href="../main/eco-shop.html" class="fs-4 text-body link-primary">eCommerce</a>
</li>
<li>
<a href="../main/app-chat.html" class="fs-4 text-body link-primary">Chat</a>
</li>
<li>
<a href="../main/app-calendar.html" class="fs-4 text-body link-primary">Calendar</a>
</li>
<li>
<a href="../main/blog-posts.html" class="fs-4 text-body link-primary">Blog</a>
</li>
</ul>
</div>
<div class="col-md-3 col-6">
<h3 class="fs-4 fw-semibold mb-7">Forms</h3>
<ul class="d-flex flex-column gap-9">
<li>
<a href="../main/form-basic.html" class="fs-4 text-body link-primary">Form
Basic</a>
</li>
<li>
<a href="../main/form-horizontal.html" class="fs-4 text-body link-primary">Form
Horizontal</a>
</li>
<li>
<a href="../main/form-wizard.html" class="fs-4 text-body link-primary">Form
Wizard</a>
</li>
<li>
<a href="../main/form-bootstrap-validation.html" class="fs-4 text-body link-primary">Form Validation
</a>
</li>
<li>
<a href="../main/form-editor-quill.html" class="fs-4 text-body link-primary">Quill Editor</a>
</li>
</ul>
</div>
<div class="col-md-3 col-6">
<h3 class="fs-4 fw-semibold mb-7">Tables</h3>
<ul class="d-flex flex-column gap-9">
<li>
<a href="../main/table-basic.html" class="fs-4 text-body link-primary">Basic
Table</a>
</li>
<li>
<a href="../main/table-dark-basic.html" class="fs-4 text-body link-primary">Table
Dark Basic</a>
</li>
<li>
<a href="../main/table-sizing.html" class="fs-4 text-body link-primary">Table
Sizing</a>
</li>
<li>
<a href="../main/table-layout-coloured.html" class="fs-4 text-body link-primary">Coloured Table</a>
</li>
<li>
<a href="../main/table-datatable-basic.html" class="fs-4 text-body link-primary">Basic Initialisation</a>
</li>
<li>
<a href="../main/table-datatable-api.html" class="fs-4 text-body link-primary">API</a>
</li>
</ul>
</div>
<div class="col-md-3 col-6">
<h3 class="fs-4 fw-semibold mb-7">Follow us</h3>
<div class="d-flex gap-9">
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Facebook">
<img src="../assets/images/frontend-pages/icon-facebook.svg" alt="facebook">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Twitter">
<img src="../assets/images/frontend-pages/icon-twitter.svg" alt="twitter">
</a>
<a href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-title="Instagram">
<img src="../assets/images/frontend-pages/icon-instagram.svg" alt="instagram">
</a>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between py-7 flex-md-nowrap flex-wrap gap-sm-0 gap-3">
<div class="d-flex gap-3 align-items-center">
<img src="../assets/images/logos/favicon.png" alt="icon">
<p class="fs-4 mb-0">All rights reserved by Modernize. </p>
</div>
<div>
<p class="mb-0">Produced by <a target="_blank" href="https://adminmart.com/" class="text-primary link-primary">AdminMart</a>.</p>
</div>
</div>
</div>
</footer>
<!-- ------------------------------------- -->
<!-- Footer End -->
<!-- ------------------------------------- -->
<!-- Scroll Top -->
<a href="javascript:void(0)" class="top-btn btn btn-primary d-flex align-items-center justify-content-center round-54 p-0 rounded-circle">
<i class="ti ti-arrow-up fs-7"></i>
</a>
<script src="../assets/js/vendor.min.js"></script>
<!-- Import Js Files -->
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.min.js"></script>
<script src="../assets/js/theme/app.init.js"></script>
<script src="../assets/js/theme/theme.js"></script>
<script src="../assets/js/theme/app.min.js"></script>
<script src="../assets/js/frontend-landingpage/homepage.js"></script>