130 lines
4.6 KiB
HTML
130 lines
4.6 KiB
HTML
<!-- Compare plans -->
|
|
<div class="table-responsive pricing-container container pb-4" id="compare">
|
|
<h1 class="display-6 text-center my-4">Compare plans</h1>
|
|
<table class="table text-center context-main border-white">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 34%;"></th>
|
|
<th style="width: 22%;">Free</th>
|
|
<th style="width: 22%;">Monthly</th>
|
|
<th style="width: 22%;">Yearly</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row" class="text-start">Add and Manage Bookmarks</th>
|
|
<td><i class="fa fa-fw fa-check"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Extensions for all major browsers</th>
|
|
<td><i class="fa fa-fw fa-check"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Access from any device</th>
|
|
<td><i class="fa fa-fw fa-check"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Share bookmarks and folders</th>
|
|
<td><i class="fa fa-fw fa-check"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Import/Export Features</th>
|
|
<td></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Customizable Dashboards / Pages</th>
|
|
<td></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Request/Influence Development</th>
|
|
<td></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Early Access</th>
|
|
<td></td>
|
|
<td><i class="fa fa-fw fa-check atb-green"></i></td>
|
|
<td><i class="fa-solid fa-check atb-green"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="text-start">Cheaper</th>
|
|
<td></td>
|
|
<td></td>
|
|
<td><i class="fa-solid fa-check atb-green"></i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="b-example-divider"></div>
|
|
|
|
<!-- Plan Choices -->
|
|
<div class="d-flex justify-content-center" id="pricing">
|
|
<div class="pricing-container container row row-cols-1 row-cols-md-3 my-5 text-center">
|
|
<div class="col">
|
|
<div class="card mb-4 rounded-3 shadow-sm h-100 context-main-bg">
|
|
<div class="card-header py-3">
|
|
<h4 class="my-0 fw-normal">Free</h4>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
|
|
<ul class="list-unstyled mt-3 mb-4">
|
|
<li>Add / Manage your bookmarks</li>
|
|
<li>Extensions for all major browsers</li>
|
|
<li>Access from any device</li>
|
|
<li>Share access with anyone</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card mb-4 rounded-3 shadow-sm h-100 context-main-bg">
|
|
<div class="card-header py-3">
|
|
<h4 class="my-0 fw-normal">Monthly</h4>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h1 class="card-title pricing-card-title">{prettyPriceMonthly}<small class="text-muted fw-light">/month</small></h1>
|
|
<ul class="list-unstyled mt-3 mb-4">
|
|
<li>Import/Export Features</li>
|
|
<li>Integration with TempusTools App (WIP)</li>
|
|
<li>Customizable Dashboards / Pages</li>
|
|
<li>Direct control of Feature Development</li>
|
|
<li>Early Access to new features</li>
|
|
</ul>
|
|
<a href="/member/checkout/monthly" class="mt-auto w-100 btn btn-lg atb-green-bg">
|
|
Get started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card mb-4 rounded-3 shadow-sm atb-green-outline-only h-100 context-main-bg">
|
|
<div class="card-header py-3 atb-green-bg">
|
|
<h4 class="my-0 fw-normal">Yearly</h4>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h1 class="card-title pricing-card-title">{prettyPriceYearly}<small class="text-muted fw-light">/year</small></h1>
|
|
<ul class="list-unstyled mt-3 mb-4">
|
|
<li>Its cheaper if you like the product</li>
|
|
</ul>
|
|
<a href="/member/checkout/yearly" class="mt-auto w-100 btn btn-lg atb-green-bg">
|
|
Get started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |