theme/layouts/partials/footer.html

<footer
	class="mx-auto mt-12 max-w-screen-xl border-t-2 border-gray-200 py-8 px-4 text-left text-sm text-gray-800 md:flex md:px-0"
>
	<div class="flex w-full flex-col md:w-2/5">
		<img
			src="{{ .Site.BaseURL }}images/vikunja-logo.svg"
			alt="{{ .Site.Title }}"
			class="h-8"
			width="109"
			height="32"
		/>
		<p class="py-4 text-gray-600">
			&copy; {{ now.Year }}<br />
			Made with ♥️ and <a href="https://gohugo.io">Hugo</a>.
		</p>
		<a
			href="https://twitter.com/vikunjaio"
			target="_blank"
			rel="noopener"
			class="flex pb-2 align-middle hover:underline"
		>
			<svg
				class="h-4 w-4"
				xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink"
				viewBox="0 0 112.197 112.197"
				style="enable-background:new 0 0 112.197 112.197;"
				xml:space="preserve"
			>
				<g>
					<circle style="fill:#55ACEE;" cx="56.099" cy="56.098" r="56.098" />
					<g>
						<path
							style="fill:#F1F2F2;"
							d="M90.461,40.316c-2.404,1.066-4.99,1.787-7.702,2.109c2.769-1.659,4.894-4.284,5.897-7.417			c-2.591,1.537-5.462,2.652-8.515,3.253c-2.446-2.605-5.931-4.233-9.79-4.233c-7.404,0-13.409,6.005-13.409,13.409 c0,1.051,0.119,2.074,0.349,3.056c-11.144-0.559-21.025-5.897-27.639-14.012c-1.154,1.98-1.816,4.285-1.816,6.742 c0,4.651,2.369,8.757,5.965,11.161c-2.197-0.069-4.266-0.672-6.073-1.679c-0.001,0.057-0.001,0.114-0.001,0.17 c0,6.497,4.624,11.916,10.757,13.147c-1.124,0.308-2.311,0.471-3.532,0.471c-0.866,0-1.705-0.083-2.523-0.239 c1.706,5.326,6.657,9.203,12.526,9.312c-4.59,3.597-10.371,5.74-16.655,5.74c-1.08,0-2.15-0.063-3.197-0.188 c5.931,3.806,12.981,6.025,20.553,6.025c24.664,0,38.152-20.432,38.152-38.153c0-0.581-0.013-1.16-0.039-1.734 C86.391,45.366,88.664,43.005,90.461,40.316L90.461,40.316z"
						/>
					</g>
				</g>
			</svg>
			<span class="ml-1"> Follow Vikunja on Twitter </span>
		</a>
		<a href="https://matrix.to/#/#vikunja:matrix.org">
			<img
				src="https://img.shields.io/badge/chat-on%20matrix.org-brightgreen"
				alt="Chat on matrix.org"
			/>
		</a>

		<p class="mt-6 font-title text-base font-bold">Subscribe to our newsletter</p>
		<p class="mt-2">
			We'll email you about releases and news about Vikunja. Low traffic. Unsubscribe any
			time.
		</p>
		<form
			method="post"
			action="https://newsletter.kolaente.de/subscription/form"
			class="listmonk-form"
		>
			<input
				type="text"
				name="email"
				placeholder="E-mail"
				class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary-lighter focus:ring-opacity-50"
				required
			/>

			<input id="f0bc9" type="hidden" name="l" value="f0bc9ec2-56a4-48c8-baad-7a31b137484e" />

			<input
				type="submit"
				value="Subscribe"
				class="mt-4 cursor-pointer rounded-md bg-primary px-4 py-2 text-base font-medium text-white hover:bg-primary-darker"
			/>
		</form>
	</div>
	<div class="mt-4 flex w-full flex-col md:mt-0 md:w-1/5">
		<h3 class="mb-4 font-title text-base font-bold md:mb-6">Legal</h3>
		<a href="/privacy" class="pb-2 hover:underline">Privacy Policy</a>
		<a href="/imprint" class="pb-2 hover:underline">Imprint</a>
	</div>
	<div class="mt-4 flex w-full flex-col md:mt-0 md:w-1/5">
		<h3 class="mb-4 font-title text-base font-bold md:mb-6">Support Us</h3>
		<a
			href="https://www.buymeacoffee.com/kolaente"
			class="flex pb-2 align-middle hover:underline"
			target="_blank"
		>
			<img
				src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
				alt="Buy me a coffee"
				class="mr-1 w-3"
			/>
			<span> Buy Me a Coffee </span>
		</a>
		<a
			href="https://github.com/sponsors/kolaente/button"
			class="flex pb-2 align-middle hover:underline"
			target="_blank"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="mr-1 h-4 w-4"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
				/>
			</svg>
			<span> Sponsor on Github </span>
		</a>
		<a href="https://opencollective.com/vikunja" class="pb-2 hover:underline" target="_blank">
			Sponsor on Opencollective
		</a>
		<a
			href="https://vikunja.cloud/stickers?utm_source=io&utm_medium=io&utm_campaign=footer"
			class="pb-2 hover:underline"
		>
			Buy Stickers
		</a>
	</div>
	<div class="mt-4 flex w-full flex-col md:mt-0 md:w-1/5">
		<h3 class="mb-4 font-title text-base font-bold md:mb-6">Product</h3>
		<a href="https://vikunja.cloud/features" class="pb-2 hover:underline">Features</a>
		<a href="https://vikunja.cloud/managed-service" class="pb-2 hover:underline"
			>Managed Service</a
		>
		<a
			href="https://vikunja.cloud/?utm_source=io&utm_medium=io&utm_campaign=footer"
			class="pb-2 hover:underline"
		>
			Get it Hosted
		</a>
		<a href="https://vikunja.cloud/stickers" class="pb-2 hover:underline">Stickers</a>
	</div>
	<div class="mt-4 flex w-full flex-col md:mt-0 md:w-1/5">
		<h3 class="mb-4 font-title text-base font-bold md:mb-6">About</h3>
		<a href="/" class="pb-2 hover:underline">Home</a>
		<a href="/docs" class="pb-2 hover:underline">Docs</a>
		<a href="/contact/" class="pb-2 hover:underline">Contact</a>
		<a href="/survey" class="pb-2 hover:underline">Feedback Survey</a>
		<a href="https://community.vikunja.io" class="pb-2 hover:underline">Community Forum</a>
	</div>
</footer>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const $navbarBurgers = Array.prototype.slice.call(
			document.querySelectorAll('.navbar-burger'),
			0
		);
		if ($navbarBurgers.length > 0) {
			$navbarBurgers.forEach(function ($el) {
				const target = $el.dataset.target;
				const $target = document.getElementById(target);
				$el.addEventListener('click', function () {
					$target.classList.toggle('hidden');
				});
				$target.addEventListener('click', (el) => {
					$target.classList.toggle('hidden');
				});
			});
		}
	});
</script>

{{ partial "plausible-tracking.html" . }}