<footer class="h-autofont-machina relative w-full bg-black">
	<section class="p-4 px-16 py-16">
		<div class="flex">
			<div class="footer-text w-3/4 pr-16">
				<h3 class="mb-5 text-4xl text-primary">
					Changing the way you build. And what happens after you build it.
				</h3>
				<p class="mb-5">
					tea.cli is a delightful package manager that gets out of your way and sets you up for a
					joyful development process. You can install it today. Our web3 protocol will create an OSS
					ecosystem that is safer for all users, and fair for all maintainers. Read our white paper
					here.
				</p>
				<div class="w-3/4">
					<img src="/static/images/footer-grid-element.svg" alt="grid" />
				</div>
			</div>

			<div class="card social-box h-full w-1/4 border-2 border-gray">
				<ul class="list-group list-group-flush">
					<div class="border-b border-gray p-3">
						<a
							class="list-group-item"
							role="button"
							href="https://twitter.com/teaxyz"
							target="_blank"
							rel="noreferrer"><i class="icon-twitter social-icon mr-3" />Twitter</a
						>
					</div>
					<div class="border-b border-gray p-3">
						<a
							class="list-group-item"
							role="button"
							href="https://discord.gg/KCZsXfJphn"
							target="_blank"
							rel="noreferrer"><i class="icon-discord social-icon mr-3" />Discord</a
						>
					</div>
					<div class="border-b border-gray p-3">
						<a
							class="list-group-item"
							role="button"
							href="https://github.com/teaxyz"
							target="_blank"
							rel="noreferrer"><i class="icon-github social-icon mr-3" />GitHub</a
						>
					</div>
					<div class="border-b border-gray p-3">
						<a
							class="list-group-item"
							role="button"
							href="https://reddit.com/r/teaxyz"
							target="_blank"
							rel="noreferrer"><i class="icon-reddit social-icon mr-3" />Reddit</a
						>
					</div>
					<div class="p-3">
						<a
							class="list-group-item"
							role="button"
							href="https://t.me/tea_xyz"
							target="_blank"
							rel="noreferrer"><i class="icon-telegram social-icon mr-3" />Telegram</a
						>
					</div>
				</ul>
			</div>
		</div>
	</section>

	<section class="h-16 border border-r-0 border-gray p-4 px-16">
		<div class="flex">
			<div class="w-1/2 pt-2">
				<p class="text-xs">
					©2022 tea inc. You can also share our <a
						href="https://linktr.ee/teaxyz"
						target="_blank"
						rel="noreferrer">Linktree</a
					>.
				</p>
			</div>
			<div class="flex w-1/2 pt-2">
				<ul class="nav ml-auto flex text-xs">
					<li class="nav-item mr-3 ">
						<a
							class="nav-link footer-link small"
							href="https://tea.xyz/privacy-policy/"
							target="_blank"
							rel="noreferrer">Privacy Policy</a
						>
					</li>
					<li class="nav-item">
						<a
							class="nav-link footer-link small"
							href="https://tea.xyz/terms-of-use/"
							target="_blank"
							rel="noreferrer">Terms of Use</a
						>
					</li>
				</ul>
			</div>
		</div>
	</section>
</footer>

<style>
	h3 {
		font-family: 'pp-neue-machina', sans-serif;
		color: #00ffd0;
	}

	p,
	.nav-item {
		font-family: 'sono', sans-serif;
		color: #ffffff;
	}

	.list-group-item {
		font-family: 'pp-neue-machina', sans-serif;
		text-transform: uppercase;
		transition: 0.1s ease-in;
	}

	.list-group-item:hover {
		padding-left: 1vw;
	}
</style>
