Pricing
Component #1
Flexible and transparent pricing
Whatever your status, our offers evolve according to your needs.
Professional
All the basics for starting a new business
- 1 user
- Front plan features
- 1 app
No card required
Team
Everything you need for a growing business
- 3 users
- Front plan features
- 3 apps
- Product support
No card required
Enterprise
Advanced features for scaling your business
- Unlimited users
- Front plan features
- Unlimited apps
- Product support
No card required
<!-- Pricing -->
<div class="overflow-hidden">
<div class="container">
<!-- Heading -->
<div class="w-md-75 text-center mx-md-auto mb-9">
<h2 class="h1">Flexible and transparent pricing</h2>
<p>Whatever your status, our offers evolve according to your needs.</p>
</div>
<!-- End Heading -->
<!-- Form Switch -->
<div class="d-flex justify-content-center mb-5">
<div class="form-check form-switch form-switch-between">
<label class="form-check-label">Monthly</label>
<input class="js-toggle-switch form-check-input" type="checkbox"
data-hs-toggle-switch-options='{
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
}'>
<label class="form-check-label form-switch-promotion">
Annually
<span class="form-switch-promotion-container">
<span class="form-switch-promotion-body">
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
</svg>
<span class="form-switch-promotion-text">
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
</span>
</span>
</span>
</label>
</div>
</div>
<!-- End Form Switch -->
<div class="row mb-7">
<div class="col-md mb-3 mb-md-0">
<!-- Card -->
<div class="card h-100 shadow-none zi-1">
<div class="card-header text-center">
<div class="mb-2">
<span class="fs-5 align-top text-dark fw-semibold">$</span>
<span class="fs-1 text-dark fw-semibold">19</span>
<span>/mo</span>
</div>
<h3 class="card-title">Professional</h3>
<p class="card-text">All the basics for starting a new business</p>
</div>
<div class="card-body d-flex justify-content-center py-0">
<!-- List Checked -->
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">1 user</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">1 app</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer text-center">
<div class="d-grid mb-2">
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
</div>
<p class="card-text text-muted small">No card required</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md mb-3 mb-md-0">
<div class="position-relative">
<!-- Card -->
<div class="card h-100 zi-1">
<div class="card-header text-center">
<div class="mb-2">
<span class="fs-5 align-top text-dark fw-semibold">$</span>
<span id="pricingCount2" class="fs-1 text-dark fw-semibold"
data-hs-toggle-switch-item-options='{
"min": 49,
"max": 39
}'>39</span>
<span>/mo</span>
</div>
<h3 class="card-title">Team</h3>
<p class="card-text">Everything you need for a growing business</p>
</div>
<div class="card-body d-flex justify-content-center py-0">
<!-- List Checked -->
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">3 users</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">3 apps</li>
<li class="list-checked-item">Product support</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer text-center">
<div class="d-grid mb-2">
<button type="button" class="btn btn-primary">Try free for 30 days</button>
</div>
<p class="card-text text-muted small">No card required</p>
</div>
</div>
<!-- End Card -->
<!-- SVG Elements -->
<figure class="position-absolute bottom-0 start-0 mb-n7 ms-n7" style="width: 9rem;">
<img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
</figure>
<figure class="position-absolute top-0 end-0 mt-n7 me-n7" style="width: 7rem;">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 260 260" xml:space="preserve">
<circle fill="#ffc107" cx="130" cy="130" r="130"/>
</svg>
</figure>
<!-- End SVG Elements -->
</div>
</div>
<!-- End Col -->
<div class="col-md mb-3 mb-md-0">
<!-- Card -->
<div class="card h-100 shadow-none zi-1">
<div class="card-header text-center">
<div class="mb-2">
<span class="fs-5 align-top text-dark fw-semibold">$</span>
<span id="pricingCount3" class="fs-1 text-dark fw-semibold"
data-hs-toggle-switch-item-options='{
"min": 69,
"max": 59
}'>59</span>
<span>/mo</span>
</div>
<h3 class="card-title">Enterprise</h3>
<p class="card-text">Advanced features for scaling your business</p>
</div>
<div class="card-body d-flex justify-content-center py-0">
<!-- List Checked -->
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">Unlimited users</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">Unlimited apps</li>
<li class="list-checked-item">Product support</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer text-center">
<div class="d-grid mb-2">
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
</div>
<p class="card-text text-muted small">No card required</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Pricing -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF TOGGLE SWITCH
// =======================================================
new HSToggleSwitch('.js-toggle-switch')
})()
</script>
Component #2
Pick the best plan based on your ad spend
- All features
- Email support
- Google ads
- SSO via Google
- API access
- Facebook ads
Customized
Design a custom package for your business.
Available for businesses with large payments volume or unique business models.
<!-- Pricing -->
<div class="bg-light overflow-hidden">
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="text-cap">Pricing</span>
<h2 class="h1">Pick the best plan based on your ad spend</h2>
</div>
<!-- End Heading -->
<div class="position-relative">
<div class="row gx-0 align-items-md-center">
<div class="col-md-6 mb-3 mb-md-0">
<!-- Card -->
<div class="card card-lg zi-2" data-aos="fade-up">
<div class="card-body">
<form>
<!-- Radio Button Group -->
<div class="text-center mb-5">
<div class="btn-group btn-group-segment btn-group-pills" role="group" aria-label="Pricing radio button group">
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 500
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 50000
}],
"startUpdateOnChange": true
}'>
<label class="js-toggle-switch btn btn-sm" for="btnradio1">
Monthly
</label>
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio2" autocomplete="off"
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 475
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 25000
}],
"startUpdateOnChange": true
}'>
<label class="js-toggle-switch btn btn-sm" for="btnradio2">
<span class="form-switch-promotion">
Annually
<!-- Form Switch Promotion -->
<span class="form-switch-promotion-container">
<span class="form-switch-promotion-body">
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
</svg>
<span class="form-switch-promotion-text">
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
</span>
</span>
</span>
<!-- End Form Switch Promotion -->
</span>
</label>
</div>
</div>
<!-- End Radio Button Group -->
<!-- Range Slider -->
<div class="display-4 text-dark text-center">
$<span id="rangeSliderResult"></span>/mo
</div>
<div class="d-flex justify-content-center mb-5">
Maximum ad spend:
<span class="text-primary ms-1">$<span id="rangeSliderSecondaryResult">50000</span>/mo</span>
</div>
<!-- End Range Slider -->
</form>
<div class="text-center mb-5">
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 250,
"max": 720
},
"connect": [true, false],
"start": 500,
"result_min_target_el": "#rangeSliderResult"
}'>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">All features</li>
<li class="list-checked-item">Email support</li>
<li class="list-checked-item">Google ads</li>
</ul>
<!-- End List Checked -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">SSO via Google</li>
<li class="list-checked-item">API access</li>
<li class="list-checked-item">Facebook ads</li>
</ul>
<!-- End List Checked -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<a class="card-footer card-link bg-light text-center" href="#">Start free 14-day trial <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-6">
<!-- Card -->
<div class="card card-lg bg-dark text-center ms-md-n2" data-aos="fade-up" data-aos-delay="200">
<div class="card-body">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/com/com012.svg")
</span>
<h2 class="card-title text-white">Customized</h2>
<p class="card-text text-white">Design a custom package for your business.</p>
<p class="card-text text-white-70">Available for businesses with large payments volume or unique business models.</p>
</div>
<a class="card-footer card-link text-white" href="#">Contact sales <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- SVG Shape -->
<div class="position-absolute bottom-0 start-0 d-none d-lg-block" style="width: 10rem; margin-left: -10rem;">
<img class="img-fluid" src="../assets/svg/illustrations/oc-peeking.svg" alt="SVG">
</div>
<!-- End SVG Shape -->
</div>
</div>
</div>
<!-- End Pricing -->
<link rel="stylesheet" href="../node_modules/nouislider/dist/nouislider.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
<script src="../node_modules/nouislider/dist/nouislider.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.nouislider.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWITCH TEXT
// =======================================================
new HSSwitchText('.js-switch-text', {
afterChange() {
document.querySelector('.js-nouislider').noUiSlider.set([this.target[0].text])
}
})
// INITIALIZATION OF NOUISLIDER
// =======================================================
HSCore.components.HSNoUISlider.init(document.querySelector('.js-nouislider'))
const slider = HSCore.components.HSNoUISlider.getItem(0)
slider.on('change', function (val) {
const input = document.querySelector('.js-switch-text:checked'),
defData = JSON.parse(input.getAttribute('data-hs-switch-text-options'))
defData.target[0].text = val[0]
input.setAttribute('data-hs-switch-text-options', JSON.stringify(defData))
})
})()
</script>
Component #3
Always know what you'll pay.
Once you're setup, instantly withdraw payments or deposit into your bank account within 2-3 business days.
per successful transaction
Account creation
Professional account
Included for 3 months,
then $2.5/monthly included VAT
-
135+ currencies
Process charges and display prices in your customer's.
-
Global support
Businesses in 25+ countries can accept payments.
-
Secure payment info collection
Use our libraries to collect payment information without sensitive data.
-
Over 10 million customers
We’re on average 8x cheaper than leading world high street banks.
Grow your business with Front Pay
From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. See our customers
<!-- Pricing -->
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
<h2>Always know what you'll pay.</h2>
<p>Once you're setup, instantly withdraw payments or deposit into your bank account within 2-3 business days.</p>
</div>
<!-- End Heading -->
<div class="row gx-0 align-items-lg-center mb-7 mb-md-10">
<div class="col-lg-7">
<!-- Card -->
<div class="card card-lg text-center zi-2" data-aos="fade-up">
<div class="card-header pb-0">
<div class="mb-1">
<span class="display-4 text-primary">1.5%</span>
<span class="badge bg-dark rounded-pill align-top ms-1">+0.5 USD</span>
</div>
<p>per successful transaction</p>
</div>
<div class="card-body">
<div class="row justify-content-sm-center align-items-sm-center mb-5">
<div class="col-sm-5">
<div class="mb-2">
<img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/account-creation.svg" alt="SVG">
</div>
<h4>Account creation</h4>
</div>
<!-- End Col -->
<div class="col-sm-1 my-3 my-sm-0">
<span class="fs-3 text-primary">+</span>
</div>
<!-- End Col -->
<div class="col-sm-5">
<div class="mb-2">
<img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/pro-account.svg" alt="SVG">
</div>
<h4>Professional account</h4>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="mb-7">
<p class="card-text small">Included for 3 months,<br>then $2.5/monthly included VAT</p>
</div>
<button type="button" class="btn btn-primary btn-transition px-6">Get started</button>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-lg-5">
<!-- Card -->
<div class="card card-lg bg-dark ms-md-n2" data-aos="fade-up" data-aos-delay="200">
<div class="card-body">
<!-- List Checked -->
<ul class="list-pointer list-pointer-soft-bg-light list-pointer-lg">
<li class="list-pointer-item">
<h4 class="text-white mb-1">135+ currencies</h4>
<p class="text-white-70 mb-0">Process charges and display prices in your customer's.</p>
</li>
<li class="list-pointer-item">
<h4 class="text-white mb-1">Global support</h4>
<p class="text-white-70 mb-0">Businesses in 25+ countries can accept payments.</p>
</li>
<li class="list-pointer-item">
<h4 class="text-white mb-1">Secure payment info collection</h4>
<p class="text-white-70 mb-0">Use our libraries to collect payment information without sensitive data.</p>
</li>
<li class="list-pointer-item">
<h4 class="text-white mb-1">Over 10 million customers</h4>
<p class="text-white-70 mb-0">We’re on average 8x cheaper than leading world high street banks.</p>
</li>
</ul>
<!-- End List Checked -->
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- CTA -->
<div class="w-lg-75 mx-lg-auto">
<div class="d-block d-sm-flex align-items-sm-center">
<div class="flex-shrink-0 mb-3 mb-sm-0">
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/illustrations/growing-business.svg" alt="SVG">
</div>
<div class="flex-grow-1 ms-4">
<h4>Grow your business with Front Pay</h4>
<p class="mb-0">From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. <a class="link" href="#">See our customers <i class="bi-chevron-right small"></i></a></p>
</div>
</div>
</div>
<!-- End CTA -->
</div>
<!-- End Pricing -->
Component #4
Choose a plan that's right for you.
Everything you need. From front to back.
Professional $0/mon | Team Hot $60/mon | Enterprise Custom | |
---|---|---|---|
Cross-platform UI toolkit | |||
14-days free trial | |||
No user limit | |||
Long-term support | |||
Email support | Add-on available | ||
Developer tools | |||
Removal of Front branding | |||
Active maintenance & support | |||
Data storage for 365 days | Add-on available | ||
<!-- Pricing -->
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Choose a plan that's right for you.</h2>
<p>Everything you need. From front to back.</p>
</div>
<!-- End Heading -->
<!-- Table -->
<div class="table-responsive-lg w-lg-75 mx-lg-auto">
<table class="table table-lg table-striped table-borderless table-nowrap table-vertical-border-striped">
<thead class="table-text-center">
<tr>
<th scope="col" style="width: 40%;"></th>
<th scope="col" style="width: 20%;">
<span class="d-block">Professional</span>
<span class="d-block text-muted small">$0/mon</span>
</th>
<th scope="col" style="width: 20%;">
<span class="d-block">Team <span class="badge bg-warning text-dark rounded-pill ms-1">Hot</span></span>
<span class="d-block text-muted small">$60/mon</span>
</th>
<th scope="col" style="width: 20%;">
<span class="d-block">Enterprise</span>
<span class="d-block text-muted small">Custom</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-dark">Cross-platform UI toolkit</th>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td></td>
</tr>
<tr>
<th scope="row" class="text-dark">14-days free trial</th>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">No user limit</th>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Long-term support</th>
<td></td>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Email support</th>
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Developer tools</th>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td></td>
</tr>
<tr>
<th scope="row" class="text-dark">Removal of Front branding</th>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Active maintenance & support</th>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Data storage for 365 days</th>
<td></td>
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark"></th>
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
<td><button type="button" class="btn btn-primary btn-sm btn-transition">Contact us</button></td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Pricing -->
Component #5
Scalable plans
All kinds of plans that scale with your user growth
Starter
Free
- Community support
- 400+ pages
Individual
$59
- Community support
- 400+ pages
- 100+ header variations
Enterprise
$599
- Community support
- 400+ pages
- 100+ header variations
- 20+ home page options
<!-- Pricing -->
<div class="container">
<!-- Heading -->
<div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
<h2 class="h1">Scalable plans</h2>
<p>All kinds of plans that scale with your user growth</p>
</div>
<!-- End Heading -->
<div class="w-lg-75 mx-lg-auto">
<div class="row align-items-sm-end gx-3 mb-5 mb-md-7">
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
<!-- Card -->
<div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="100">
<div class="card-header text-center pb-0">
<span class="svg-icon svg-icon-sm text-primary mb-3">
@@include("../assets/svg/illustrations/circle-small.svg")
</span>
<h4 class="card-title">Starter</h4>
<h3 class="card-title">Free</h3>
</div>
<div class="card-body">
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">Community support</li>
<li class="list-checked-item">400+ pages</li>
</ul>
</div>
<div class="card-footer pt-0">
<div class="d-grid">
<button type="button" class="btn btn-primary btn-sm btn-transition">Create account</button>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
<!-- Card -->
<div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="50">
<div class="card-header text-center pb-0">
<span class="svg-icon text-primary mb-3">
@@include("../assets/svg/illustrations/circle.svg")
</span>
<h4 class="card-title">Individual</h4>
<h3 class="card-title">$59</h3>
</div>
<div class="card-body">
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">Community support</li>
<li class="list-checked-item">400+ pages</li>
<li class="list-checked-item">100+ header variations</li>
</ul>
</div>
<div class="card-footer pt-0">
<div class="d-grid">
<button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<!-- Card -->
<div class="card card-bordered shadow-none" data-aos="fade-up">
<div class="card-header text-center pb-0">
<span class="svg-icon text-primary mb-3">
@@include("../assets/svg/illustrations/circle-triple.svg")
</span>
<h4 class="card-title">Enterprise</h4>
<h3 class="card-title">$599</h3>
</div>
<div class="card-body">
<ul class="list-checked list-checked-primary">
<li class="list-checked-item">Community support</li>
<li class="list-checked-item">400+ pages</li>
<li class="list-checked-item">100+ header variations</li>
<li class="list-checked-item">20+ home page options</li>
</ul>
</div>
<div class="card-footer pt-0">
<div class="d-grid">
<button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Card Info -->
<div class="text-center" data-aos="fade-up">
<div class="card card-info-link card-sm">
<div class="card-body">
Need custom plan? <a class="card-link ms-2" href="#">Contact us <span class="bi-chevron-right small ms-1"></span></a>
</div>
</div>
</div>
<!-- End Card Info -->
</div>
</div>
<!-- End Pricing -->
Component #6
Pricing
No additional costs. Pay for what you use.
Hundreds of components
Achieve maximum productivity with minimum effort with Front and create robust limitless products.
Images included
We made custom license for all our premium images in the Front.
Cancel anytime
If its not for you, just cancel, no hidden costs or fees.
Money back
100% guaranteed money back. No questions asked.
<!-- Pricing -->
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2 class="h1">Pricing</h2>
<p>No additional costs. Pay for what you use.</p>
</div>
<!-- End Heading -->
<div class="row align-items-lg-center">
<div class="col-sm-6 col-lg-5 mb-9 mb-sm-0">
<!-- Pricing -->
<div class="card zi-2" data-aos="fade-up">
<div class="card-body">
<!-- Radio Button Group -->
<div class="text-center mb-5">
<div class="btn-group btn-group-segment" role="group" aria-label="Pricing radio button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-sm" for="btnradio1">Monthly</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-sm disabled" for="btnradio2">
<span class="form-switch-promotion">Annually
<!-- Form Switch Promotion -->
<span class="form-switch-promotion-container">
<span class="form-switch-promotion-body">
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
</svg>
<span class="form-switch-promotion-text">
<span class="badge bg-primary rounded-pill ms-1">Coming soon</span>
</span>
</span>
</span>
<!-- End Form Switch Promotion -->
</span>
</label>
</div>
</div>
<!-- End Radio Button Group -->
<!-- Media -->
<div class="d-flex align-items-end">
<div class="flex-shrink-0">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-money-profits.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<span class="text-dark">
<span class="fs-5 align-top text-dark fw-semibold">$</span>
<span class="display-3 text-dark fw-semibold">19</span>
<span>/mo</span>
</span>
</div>
</div>
<!-- End Media -->
<hr class="my-4">
<div class="mb-5">
<p>Start your Front business now. 100% guaranteed money back. No questions asked.</p>
</div>
<div class="d-grid">
<a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">Get started</a>
</div>
</div>
</div>
<!-- End Pricing -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-7">
<div class="ps-sm-6">
<div class="row">
<div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="100">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs027.svg")
</span>
<h4>Hundreds of components</h4>
<p>Achieve maximum productivity with minimum effort with Front and create robust limitless products.</p>
</div>
<!-- End Col -->
<div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="150">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/gen/gen006.svg")
</span>
<h4>Images included</h4>
<p>We made custom license for all our premium images in the Front.</p>
</div>
<!-- End Col -->
<div class="col-sm-12 col-lg-6 mb-3 mb-sm-0" data-aos="fade-up" data-aos-delay="200">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/arr/arr015.svg")
</span>
<h4>Cancel anytime</h4>
<p>If its not for you, just cancel, no hidden costs or fees.</p>
</div>
<!-- End Col -->
<div class="col-sm-12 col-lg-6" data-aos="fade-up" data-aos-delay="250">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/fin/fin010.svg")
</span>
<h4>Money back</h4>
<p>100% guaranteed money back. No questions asked.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Pricing -->
Component #7
Simple pricing model
<!-- Pricing -->
<div class="container content-space-2">
<!-- Heading -->
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
<span class="text-cap">Pricing</span>
<h2>Simple pricing model</h2>
</div>
<!-- End Heading -->
<div class="d-grid gap-2 w-lg-75 mx-lg-auto">
<!-- Card -->
<div class="card card-sm" data-aos="fade-up">
<div class="card-body">
<div class="row align-items-sm-center">
<div class="col">
<h4 class="card-title">UI Starter Kit</h4>
</div>
<!-- End Col -->
<div class="col">
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
</div>
<!-- End Col -->
<div class="col">
<p class="card-text mb-0">Figma</p>
<p class="card-text">Adobe XD</p>
</div>
<!-- End Col -->
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
<div class="d-grid">
<a class="btn btn-outline-primary" href="#">Free download</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-sm" data-aos="fade-up" data-aos-delay="150">
<div class="card-body">
<div class="row align-items-sm-center">
<div class="col">
<h4 class="card-title">Design Starter Kit</h4>
</div>
<!-- End Col -->
<div class="col">
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
</div>
<!-- End Col -->
<div class="col">
<p class="card-text mb-0">Figma</p>
<p class="card-text">Adobe XD</p>
</div>
<!-- End Col -->
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
<div class="d-grid">
<a class="btn btn-outline-primary" href="#">Purchase for $49</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Pricing -->