Add bookmark exports and sharing + various fixes
This commit is contained in:
Joey Kimsey
@ -1,62 +1,128 @@
|
||||
<section id="features" class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h3>Organize Your Bookmarks</h3>
|
||||
<p>Keep all your bookmarks organized with custom categories and tags.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h3>Import and Export</h3>
|
||||
<p>Seamlessly import and export your bookmarks (paid plans).</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h3>Accessible Anywhere</h3>
|
||||
<p>Your bookmarks are securely stored and accessible from any device.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="pricing" class="text-center bg-light-gray" style="padding-top: 30px;">
|
||||
<div class="container">
|
||||
<h2>Pricing</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Free</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Basic bookmark storage</p>
|
||||
<p>No import/export</p>
|
||||
<p>Completely free</p>
|
||||
<a href="{ROOT_URL}member/getmonthly/{ID}" class="btn btn-success">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary">
|
||||
<h3>{name} Monthly</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Import/export bookmarks</p>
|
||||
<p>Advanced curation tools</p>
|
||||
<p>{prettyPriceMonthly}/month</p>
|
||||
<a href="{ROOT_URL}member/getmonthly/{ID}" class="btn btn-primary">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary">
|
||||
<h3>{name} Yearly</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Save with annual billing</p>
|
||||
<p>All features included</p>
|
||||
<p>{prettyPriceYearly}/year</p>
|
||||
<a href="{ROOT_URL}member/getyearly/{ID}" class="btn btn-primary">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 34%;"></th>
|
||||
<th style="width: 22%;">Free</th>
|
||||
<th style="width: 22%;">Pro</th>
|
||||
<th style="width: 22%;">Enterprise</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"></i></td>
|
||||
<td><i class="fa fa-fw fa-check"></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"></i></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<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"></i></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Import/Export Features</th>
|
||||
<td></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Customizable Dashboards / Pages</th>
|
||||
<td></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Request/Influence Development</th>
|
||||
<td></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Early Access</th>
|
||||
<td></td>
|
||||
<td><i class="fa fa-fw fa-check"></i></td>
|
||||
<td><i class="fa-solid fa-check"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Cheaper</th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><i class="fa-solid fa-check"></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>
|
||||
</ul>
|
||||
<a href="/register" class="mt-auto w-100 btn btn-lg btn-outline-primary">
|
||||
Sign-Up for Free
|
||||
</a>
|
||||
</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">$4.99<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 btn-primary">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card mb-4 rounded-3 shadow-sm border-primary h-100 context-main-bg">
|
||||
<div class="card-header py-3 text-bg-primary border-primary">
|
||||
<h4 class="my-0 fw-normal">Yearly</h4>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h1 class="card-title pricing-card-title">$19.99<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 btn-primary">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -20,7 +20,7 @@
|
||||
<div class="card-body">
|
||||
<p>{prettyPriceMonthly}/month</p>
|
||||
<p>All pro features unlocked</p>
|
||||
<a href="{ROOT_URL}member/getmonthly/{ID}" class="btn btn-success btn-block">Get Started</a>
|
||||
<a href="{ROOT_URL}member/checkout/monthly" class="btn btn-success btn-block">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,7 +30,7 @@
|
||||
<div class="card-body">
|
||||
<p>{prettyPriceYearly}/year</p>
|
||||
<p>Save {prettySavings} annually!</p>
|
||||
<a href="{ROOT_URL}member/getyearly/{ID}" class="btn btn-info btn-block">Sign Up</a>
|
||||
<a href="{ROOT_URL}member/checkout/yearly" class="btn btn-info btn-block">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,27 +1,24 @@
|
||||
<div class="container">
|
||||
<div class="col-8 mx-auto p-4 rounded shadow-sm mb-5 context-main-bg mt-4 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2 text-center">
|
||||
<h2>Upgrade to a Yearly Plan</h2>
|
||||
<h2 class="text-primary mb-4">Upgrade to a Yearly Plan</h2>
|
||||
<p class="lead">
|
||||
Save more and enjoy uninterrupted access to all features with our yearly plan!
|
||||
Save more and enjoy uninterrupted access to all features with our yearly plan!
|
||||
</p>
|
||||
<p>
|
||||
Upgrading now means you'll save <strong>X%</strong> compared to the monthly plan.
|
||||
Stay committed and make the most of our service.
|
||||
Upgrading now means you'll save <strong> nearly $40 a year</strong> compared to the monthly plan.
|
||||
Stay committed and make the most of our service.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<button class="btn btn-lg btn-success btn-block">
|
||||
Upgrade to Yearly
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<button class="btn btn-lg btn-primary btn-block">
|
||||
Stay on Monthly
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<a href="/member/checkout/yearly" class="btn btn-lg btn-success btn-block">
|
||||
Upgrade to Yearly
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<a href="/member/upgrade" class="btn btn-lg btn-primary btn-block">
|
||||
Stay on Monthly
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user