Files
site/res/templates/frontend-pricingpage.html
2025-12-27 02:50:16 +08:00

561 lines
26 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 active 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 -->
<!-- ------------------------------------- -->
<div class="main-wrapper overflow-hidden">
<!-- ------------------------------------- -->
<!-- banner Start -->
<!-- ------------------------------------- -->
<section class="bg-primary-subtle py-14">
<div class="container-fluid">
<div class="text-center">
<p class="text-primary fs-4 fw-bolder">Pricing Page</p>
<h1 class="fw-bolder fs-12">Choose Your Plan</h1>
</div>
</div>
</section>
<!-- ------------------------------------- -->
<!-- banner End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- List 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 &amp;
<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 &amp; 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>
<!-- ------------------------------------- -->
<!-- List End -->
<!-- ------------------------------------- -->
<!-- ------------------------------------- -->
<!-- Develop Start -->
<!-- ------------------------------------- -->
<section class="mb-5 mb-md-14 mb-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>