Blocks - Pricing
Copy any custom block snippet below and paste it on your page to build your website easily.
Our Pricing
We offer great prices, premium and quality products for your business.
Enjoy a free 30-day trial and experience the full service. No credit card required!
See All PricesMonthly
Yearly (Save 30%)
$19mo
$160yr
Premium Plan
- 5 Projects
- 100K API Access
- 200MB Storage
- Weekly Reports
- 7/24 Support
$29mo
$244yr
Corporate Plan
- 20 Projects
- 300K API Access
- 500MB Storage
- Weekly Reports
- 7/24 Support
<template>
<section id="snippet-1" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gy-6">
<div class="col-lg-4">
<h2 class="display-4 mt-lg-18 mb-3">Our Pricing</h2>
<p class="lead fs-lg">
We offer <span class="underline">great prices</span>, premium and
quality products for your business.
</p>
<p>
Enjoy a <a href="#" class="hover">free 30-day trial</a> and
experience the full service. No credit card required!
</p>
<nuxt-link to="/pricing" class="btn btn-primary rounded-pill mt-2"
>See All Prices</nuxt-link
>
</div>
<!--/column -->
<div class="col-lg-7 offset-lg-1 pricing-wrapper">
<div
class="pricing-switcher-wrapper switcher justify-content-start justify-content-lg-end"
>
<p class="mb-0 pe-3">Monthly</p>
<div
class="pricing-switchers"
@click="() => (isYearly = !isYearly)"
>
<div
:class="`pricing-switcher ${
isYearly ? '' : 'pricing-switcher-active'
} `"
></div>
<div
:class="`pricing-switcher ${
!isYearly ? '' : 'pricing-switcher-active'
} `"
></div>
<div class="switcher-button bg-primary"></div>
</div>
<p class="mb-0 ps-3">
Yearly <span class="text-red">(Save 30%)</span>
</p>
</div>
<div class="row gy-6 position-relative mt-5">
<div
class="shape bg-dot primary rellax w-16 h-18"
data-rellax-speed="1"
style="bottom: -0.5rem; right: -1.6rem"
></div>
<div
class="shape rounded-circle bg-line red rellax w-18 h-18"
data-rellax-speed="1"
style="top: -1rem; left: -2rem"
></div>
<!--/column -->
<div
v-for="(elm, i) in pricing.slice(1, 3)"
:key="i"
:class="`col-md-6 ${elm.populer ? 'popular' : ''} `"
>
<div class="pricing card">
<div class="card-body pb-12">
<div class="prices text-dark">
<div
:class="`price ${
isYearly ? 'price-hidden' : 'price-show'
} justify-content-start`"
>
<span class="price-currency">$</span
><span class="price-value">{{ elm.monthlyPrice }}</span>
<span class="price-duration">mo</span>
</div>
<div
:class="`price ${
!isYearly ? 'price-hidden' : 'price-show'
} justify-content-start`"
>
<span class="price-currency">$</span
><span class="price-value">{{
((elm.monthlyPrice * 12 * 70) / 100).toFixed(0)
}}</span>
<span class="price-duration">yr</span>
</div>
</div>
<!--/.prices -->
<h4 class="card-title mt-2">{{ elm.category }}</h4>
<ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.projects }}</strong> Projects
</span>
</li>
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.apiAccess }}</strong> API Access
</span>
</li>
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.storage }}</strong> Storage
</span>
</li>
<li>
<i
:class="`uil ${
elm.weeklyReport ? 'uil-check' : 'uil-times'
} `"
></i
><span> Weekly <strong>Reports</strong></span>
</li>
<li>
<i
:class="`uil ${
elm.fulltimeSupport
? 'uil-check'
: 'uil-times bullet-soft-red'
} `"
></i
><span> 7/24 <strong>Support</strong></span>
</li>
</ul>
<a href="#" class="btn btn-primary rounded-pill"
>Choose Plan</a
>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { pricing } from "~/data/pricing";
const isYearly = ref(false);
</script>
<style lang="scss" scoped></style>Our Pricing
We offer great prices, premium products and quality service for your business.
Monthly
Yearly
Premium Plan
$19mo
$160yr
- 5 Projects
- 100K API Access
- 200MB Storage
- Weekly Reports
- 7/24 Support
Corporate Plan
$29mo
$244yr
- 20 Projects
- 300K API Access
- 500MB Storage
- Weekly Reports
- 7/24 Support
<template>
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
<h2 class="fs-15 text-uppercase text-muted mb-3">Our Pricing</h2>
<h3 class="display-4 mb-15 mb-md-6 px-lg-10">
We offer great prices, premium products and quality service for your
business.
</h3>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="pricing-wrapper position-relative">
<div
class="shape bg-dot primary rellax w-16 h-18"
data-rellax-speed="1"
style="top: 2rem; right: -2.4rem"
></div>
<div
class="shape rounded-circle bg-line red rellax w-18 h-18 d-none d-lg-block"
data-rellax-speed="1"
style="bottom: 0.5rem; left: -2.5rem"
></div>
<div class="pricing-switcher-wrapper switcher">
<p class="mb-0 pe-3">Monthly</p>
<div class="pricing-switchers" @click="() => (isYearly = !isYearly)">
<div
:class="`pricing-switcher ${
isYearly ? '' : 'pricing-switcher-active'
} `"
></div>
<div
:class="`pricing-switcher ${
!isYearly ? '' : 'pricing-switcher-active'
} `"
></div>
<div class="switcher-button bg-primary"></div>
</div>
<p class="mb-0 ps-3">Yearly</p>
</div>
<div class="row gy-6 mt-3 mt-md-5">
<div
v-for="(elm, i) in pricing.slice(0, 3)"
:key="i"
:class="`col-md-6 col-lg-4 ${i == 1 ? 'popular' : ''} ${
i == 2 ? 'offset-md-3 col-lg-4 offset-lg-0' : ''
} `"
>
<div class="pricing card text-center">
<div class="card-body">
<nuxt-img
:src="elm.iconOne"
class="icon-svg icon-svg-md text-primary mb-3"
alt=""
/>
<h4 class="card-title">{{ elm.category }} Plan</h4>
<div class="prices text-dark">
<div
:class="`price ${
isYearly ? 'price-hidden' : 'price-show'
} justify-content-start`"
>
<span class="price-currency">$</span
><span class="price-value">{{ elm.monthlyPrice }}</span>
<span class="price-duration">mo</span>
</div>
<div
:class="`price ${
!isYearly ? 'price-hidden' : 'price-show'
} justify-content-start`"
>
<span class="price-currency">$</span
><span class="price-value">{{
((elm.monthlyPrice * 12 * 70) / 100).toFixed(0)
}}</span>
<span class="price-duration">yr</span>
</div>
</div>
<!--/.prices -->
<ul
class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8 text-start"
>
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.projects }}</strong> Projects
</span>
</li>
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.apiAccess }}</strong> API Access
</span>
</li>
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.storage }}</strong> Storage
</span>
</li>
<li>
<i
:class="`uil ${
elm.weeklyReport ? 'uil-check' : 'uil-times'
} `"
></i
><span> Weekly <strong>Reports</strong></span>
</li>
<li>
<i
:class="`uil ${
elm.fulltimeSupport
? 'uil-check'
: 'uil-times bullet-soft-red'
} `"
></i
><span> 7/24 <strong>Support</strong></span>
</li>
</ul>
<a href="#" class="btn btn-primary rounded-pill">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.pricing-wrapper -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { pricing } from "~/data/pricing";
const isYearly = ref(false);
</script>
<style lang="scss" scoped></style>Our Pricing
Monthly
Yearly (Save 30%)
Premium Plan
$19mo
$160yr
- 5 Projects
- 100K API Access
- 200MB Storage
- Weekly Reports
- 7/24 Support
Corporate Plan
$29mo
$244yr
- 20 Projects
- 300K API Access
- 500MB Storage
- Weekly Reports
- 7/24 Support
Community Plan
$49mo
$412yr
- 90 Projects
- 900K API Access
- 900MB Storage
- Weekly Reports
- 7/24 Support
<template>
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<h2 class="display-5 mb-7 text-center">Our Pricing</h2>
<div class="pricing-wrapper">
<div class="pricing-switcher-wrapper switcher">
<p class="mb-0 pe-3">Monthly</p>
<div class="pricing-switchers" @click="() => (isYearly = !isYearly)">
<div
:class="`pricing-switcher ${
isYearly ? '' : 'pricing-switcher-active'
} `"
></div>
<div
:class="`pricing-switcher ${
!isYearly ? '' : 'pricing-switcher-active'
} `"
></div>
<div class="switcher-button bg-primary"></div>
</div>
<p class="mb-0 ps-3">
Yearly <span class="text-red">(Save 30%)</span>
</p>
</div>
<div class="row gx-0 gy-6 mt-2">
<div v-for="(elm, i) in pricing" :key="i" class="col-md-6 col-lg-3">
<div
:class="`pricing card ${
elm.category == 'Corporate' ? 'bg-soft-primary' : 'shadow-none'
}`"
>
<div class="card-body">
<div
:class="`icon btn btn-circle btn-lg ${
elm.category == 'Corporate'
? 'btn-primary'
: 'btn-soft-primary'
} pe-none`"
>
<i :class="elm.iconClass"></i>
</div>
<h4 class="card-title">{{ elm.category }} Plan</h4>
<div class="prices text-dark">
<div
:class="`price ${
isYearly ? 'price-hidden' : 'price-show'
} justify-content-start`"
>
<span class="price-currency">$</span
><span class="price-value">{{ elm.monthlyPrice }}</span>
<span class="price-duration">mo</span>
</div>
<div
:class="`price ${
!isYearly ? 'price-hidden' : 'price-show'
} justify-content-start`"
>
<span class="price-currency">$</span
><span class="price-value">{{
((elm.monthlyPrice * 12 * 70) / 100).toFixed(0)
}}</span>
<span class="price-duration">yr</span>
</div>
</div>
<!--/.prices -->
<ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.projects }}</strong> Projects
</span>
</li>
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.apiAccess }}</strong> API Access
</span>
</li>
<li>
<i class="uil uil-check"></i
><span
><strong>{{ elm.storage }}</strong> Storage
</span>
</li>
<li>
<i
:class="`uil ${
elm.weeklyReport ? 'uil-check' : 'uil-times'
} `"
></i
><span> Weekly <strong>Reports</strong></span>
</li>
<li>
<i
:class="`uil ${
elm.fulltimeSupport
? 'uil-check'
: 'uil-times bullet-soft-red'
} `"
></i
><span> 7/24 <strong>Support</strong></span>
</li>
</ul>
<a href="#" class="btn btn-soft-primary rounded-pill"
>Choose Plan</a
>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<!--/column -->
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.pricing-wrapper -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { pricing } from "~/data/pricing";
const isYearly = ref(false);
</script>
<style lang="scss" scoped></style>Our Pricing
We offer great prices, premium and quality products for your business.
Enjoy a free 30-day trial and experience the full service. No credit card required!
Basic Plan $9 / Monthly | Premium Plan $19 / Monthly | Corporate Plan $29 / Monthly | Community Plan $49 / Monthly | |
|---|---|---|---|---|
| Project | 1 | 5 | 20 | 90 |
| API Access | 100K | 100K | 300K | 900K |
| Storage | 100MB | 200MB | 500MB | 900MB |
| Weekly Reports | - | |||
| 24/7 Support | - | - | ||
| Choose Plan | Choose Plan | Choose Plan | Choose Plan |
<template>
<section id="snippet-4" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-11 pb-md-12">
<h2 class="display-4 mb-3">Our Pricing</h2>
<p class="lead fs-lg">
We offer <span class="underline">great prices</span>, premium and
quality products for your business.
</p>
<div class="row">
<div class="col-lg-4">
<p>
Enjoy a <a href="#" class="hover">free 30-day trial</a> and
experience the full service. No credit card required!
</p>
</div>
<!--/column -->
</div>
<!--/.row -->
<nuxt-link to="/pricing" class="btn btn-primary rounded-pill mt-2">See All Prices</nuxt-link>
<div class="table-responsive mt-10 mt-lg-0">
<table class="table table-borderless table-striped text-center">
<thead>
<tr>
<th class="w-25"></th>
<th v-for="(elm, i) in pricing" :key="i">
<div class="h4 mb-1">{{ elm.category }} Plan</div>
<div class="fs-15 fw-normal text-secondary">
${{ elm.monthlyPrice }} / Monthly
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="option text-start">Project</td>
<td v-for="(elm, i) in pricing" :key="i">{{ elm.projects }}</td>
</tr>
<tr>
<td class="option text-start">API Access</td>
<td v-for="(elm, i) in pricing" :key="i">{{ elm.apiAccess }}</td>
</tr>
<tr>
<td class="option text-start">Storage</td>
<td v-for="(elm, i) in pricing" :key="i">{{ elm.storage }}</td>
</tr>
<tr>
<td class="option text-start">Weekly Reports</td>
<td v-for="(elm, i) in pricing" :key="i">
<i
class="uil uil-check bg-pale-primary text-primary rounded-circle p-1"
v-if="elm.weeklyReport"
></i>
<span v-else>-</span>
</td>
</tr>
<tr>
<td class="option text-start">24/7 Support</td>
<td v-for="(elm, i) in pricing" :key="i">
<i
class="uil uil-check bg-pale-primary text-primary rounded-circle p-1"
v-if="elm.fulltimeSupport"
></i>
<span v-else>-</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="w-25"></th>
<th>
<a href="#" class="btn btn-soft-primary rounded-pill mt-1"
>Choose Plan</a
>
</th>
<th>
<a href="#" class="btn btn-soft-primary rounded-pill mt-1"
>Choose Plan</a
>
</th>
<th>
<a href="#" class="btn btn-soft-primary rounded-pill mt-1"
>Choose Plan</a
>
</th>
<th>
<a href="#" class="btn btn-soft-primary rounded-pill mt-1"
>Choose Plan</a
>
</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.container -->
<!--/.container -->
</section>
</template>
<script setup>
import { pricing } from "~/data/pricing";
</script>
<style lang="scss" scoped></style>Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs