<!-- AllTheBookmarks - In one place -->
<div class="px-4 pt-5 my-5 text-center border-bottom border-white">
	<h1 class="display-4 fw-bold">AllTheBookmarks - In one place</h1>
	<div class="col-lg-6 mx-auto">
		<p class="lead mb-4">Quickly add and manage an internet worth of bookmarks with AllTheBookmarks, my personal favorite app for keeping track of dead memes long after they outlive their hilarity.</p>
		<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
			<a href="#pricing" class="btn atb-green-bg btn-lg px-4 me-sm-3">
				Buy Now (Too Fast)
			</a>
			<a href="#features" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
				Learn More
			</a>
		</div>
	</div>
	<div class="overflow-hidden" style="max-height: 30vh;">
		<div class="container px-5">
			<img src="{ROOT_URL}images/manage.png" class="img-fluid border border-white rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
		</div>
	</div>
</div>

<div class="b-example-divider"></div>

<!-- All the stuff you need -->
<div class="container px-4 py-5" id="features">
	<h2 class="pb-2 border-bottom atb-green border-white">All the stuff you need, none of the stuff you don't!</h2>
	<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
		<div class="d-flex flex-column align-items-start gap-2">
			<h3 class="fw-bold">I just wanted something cross-browser for storing bookmarks.</h3>
			<p class="text-muted">KISS - Aside from making the interface nicer, this app is all I needed.</p>
		</div>
		<div class="row row-cols-1 row-cols-sm-2 g-4">
			<div class="d-flex flex-column gap-2">
				<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
					<i class="fa fa-fw fa-add"></i>
				</div>
				<h4 class="fw-semibold mb-0">Add</h4>
				<p class="text-muted">Whether its through the web-interface or supported browser extensions, you can add bookmarks from (almost) anywhere.</p>
			</div>
			<div class="d-flex flex-column gap-2">
				<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
					<i class="fa fa-fw fa-solid fa-list-check"></i>
				</div>
				<h4 class="fw-semibold mb-0">Manage</h4>
				<p class="text-muted">Create folders, tag links, keep notes and create custom dashboards.</p>
			</div>
			<div class="d-flex flex-column gap-2">
				<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
					<i class="fa fa-fw fa-share"></i>
				</div>
				<h4 class="fw-semibold mb-0">Share</h4>
				<p class="text-muted">All links are kept private by default but if you need to share with a friend or co-worker you can change this setting individually or for entire folders.</p>
			</div>
			<div class="d-flex flex-column gap-2">
				<div class="feature-icon-small d-inline-flex align-items-center justify-content-center atb-green-bg fs-4 rounded-3">
					<i class="fa-solid fa-arrow-right-arrow-left"></i>
				</div>
				<h4 class="fw-semibold mb-0">Import / Export</h4>
				<p class="text-muted">Sometimes you just want to dump everything out and see what you have, our import and export tools allow you to easily etch-a-sketch your bookmarks.</p>
			</div>
		</div>
	</div>
</div>

<div class="b-example-divider"></div>

<!-- It can be difficult -->
<div class="container col-xxl-8 px-4 py-5">
	<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
		<div class="col-10 col-sm-8 col-lg-6">
			<img src="{ROOT_URL}images/folders.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
		</div>
		<div class="col-lg-6">
			<h1 class="display-5 fw-bold lh-1 mb-3">It can be difficult to keep track of... all of the internet</h1>
			<p class="lead">With a million and one devices from all three companies, it can be a lot to manage. From work links, to Instagram stories, ticktocks for cooking, to Pinterest for Halloween; we consume a thousand different sources in a hundred different ways. Keep it all centralized with a new forth company!</p>
			<div class="d-grid gap-2 d-md-flex justify-content-md-start">
				<a href="#pricing" class="btn btn-primary atb-green-bg btn-lg px-4 me-md-2">
					Buy Now (Still too fast)
				</a>
				<a href="#darkmode" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
					Keep Learning?
				</a>
			</div>
		</div>
	</div>
</div>

<div class="b-example-divider"></div>

<!-- Don't be afraid of the dark -->
<div class="bg-dark text-secondary px-4 py-5 text-center" id="darkmode">
	<div class="py-5">
		<h1 class="display-5 fw-bold text-white">Don't be afraid of the dark.</h1>
		<div class="col-lg-6 mx-auto">
			<p class="fs-5 mb-4">Not everyone is a night owl or dark dweller, and those people are... fine. But for the rest of us, dark mode rules them all. Dark mode is available site-wide, free of charge! (Its also included in all products!)</p>
			<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
				<button type="button" class="btn btn-outline-light btn-lg px-4" id="dark-mode-toggle-button">Enable Now</button>
			</div>
		</div>
	</div>
</div>

<div class="b-example-divider"></div>

<!-- Never Browse without it -->
<div class="container px-4 py-5" id="extension">
	<h2 class="pb-2 border-bottom border-white atb-green">Never Browse without it</h2>
	<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
		<div class="col d-flex align-items-start">
			<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
				<i class="fa fa-brands fa-fw fa-chrome text-primary"></i>
			</div>
			<div>
				<h3 class="fs-2">Chrome Extension</h3>
				<p>Quickly add new bookmarks to your "2017 Taxes" folder with ease! Keep them private or share it with the other haberdashers from any page.</p>
				<a href="/extensions/chrome" class="btn btn-primary atb-green-bg">
					Download Now
				</a>
			</div>
		</div>
		<div class="col d-flex align-items-start">
			<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
				<i class="fa-brands fa-fw fa-firefox text-warning"></i>
			</div>
			<div>
				<h3 class="fs-2">Firefox Extension</h3>
				<p>Funny enough, Firefox is basically just chrome now.</p>
				<a href="/extensions/firefox" class="btn btn-primary atb-green-bg">
					Download Now
				</a>
			</div>
		</div>
		<div class="col d-flex align-items-start">
			<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
				<i class="fa-brands fa-fw fa-opera text-danger"></i>
			</div>
			<div>
				<h3 class="fs-2">Opera Extension</h3>
				<p>This is also Chrome.</p>
				<a href="/extensions/opera" class="btn btn-primary atb-green-bg">
					Download Now
				</a>
			</div>
		</div>
	</div>
	
	<p><a href="/extensions/brave"><i class="fa-brands fa-fw fa-brave text-danger"></i></a> and <a href="/extensions/edge"><i class="fa-brands fa-fw fa-edge text-info"></i></a> are Chrome too.</p>
</div>

<div class="b-example-divider"></div>

<!-- Pricing -->
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
	<h1 class="display-4 fw-normal">Pricing</h1>
	<p class="fs-5 text-muted">The pricing is very straight-forward: free, monthly, yearly.</p>
	<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
		<a href="#compare" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
			Compare
		</a>
	</div>
</div>

<div class="b-example-divider"></div>

<!-- Clean, Simple, Direct -->
<div class="container my-5">
	<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border border-white shadow-lg context-main-bg">
		<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
			<h1 class="display-4 fw-bold lh-1 atb-green">Clean, Simple, Direct</h1>
			<p class="lead">An intuitive app with a sleep, modern design is the goal. There is no need for hundreds of bells in whistles, no bluetooth, no AII to tell you what your best bookmark is, just a simple app to make life easier.</p>
			<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
				<a href="#pricing" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold atb-green-bg">
					Buy Now
				</a>
				<a href="/register" class="btn btn-outline-secondary btn-lg px-4 atb-green-outline">
					Sign-Up for Free
				</a>
			</div>
		</div>
		<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
			<img class="rounded-lg-3" src="{ROOT_URL}images/dashboard.png" alt="" width="720">
		</div>
	</div>
</div>

<div class="b-example-divider"></div>

<!-- Built to.... work -->
<div class="container px-4 py-5" id="featured-3">
	<h2 class="pb-2 border-bottom border-white">Built to.... work</h2>
	<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
		<div class="feature col">
			<div class="feature-icon d-inline-flex align-items-center justify-content-center atb-green-bg fs-2 mb-3">
				<i class="fa-solid fa-bolt"></i>
			</div>
			<h3 class="fs-2">Versatile</h3>
			<p>Built to be a responsive application, AllTheBookmarks can be easily accessed and used from any web-enabled device.</p>
		</div>
		<div class="feature col">
			<div class="feature-icon d-inline-flex align-items-center justify-content-center atb-green-bg fs-2 mb-3">
				<i class="fa-solid fa-star"></i>
			</div>
			<h3 class="fs-2">Simple</h3>
			<p>At the end of the day, you are managing a giant list of websites, lets not complicate that too much eh?</p>
		</div>
		<div class="feature col">
			<div class="feature-icon d-inline-flex align-items-center justify-content-center atb-green-bg fs-2 mb-3">
				<i class="fa-solid fa-wand-magic-sparkles"></i>
			</div>
			<h3 class="fs-2">Robust</h3>
			<p>This tool was built by a web-developer for a web-developer. Perfection not guaranteed, but it is built to last.</p>
		</div>
	</div>
</div>

<div class="b-example-divider"></div>

<!-- 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">&#36;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>
					<a href="/register" class="mt-auto w-100 btn btn-lg atb-green-outline">
						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">&#36;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/signup/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">&#36;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/signup/yearly" class="mt-auto w-100 btn btn-lg atb-green-bg">
						Get started
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="text-center py-3">
    <a href="#top" class="btn atb-green-outline">Back to Top</a>
</div>