{{ define "main" }}
<style>
	.site-header {display: none;}
	body {margin: 0; min-height: 100vh;}
</style>
<main class="index">
	<img src="/logo.svg" alt="Pixelfed logo">
	<header class="header">
		<div class="container">
		<section class="hero section">
			<div class="container">
					<h1>Photo sharing.<br>For everyone.</h1>
			</div>
		</section>
		<section class="entry section">
			<div class="container">
					<a href="/login" class="login button">Log in</a>
					<a href="/register" class="signup button">Sign up</a>
					<a href="/reset" class="pwreset button">Reset password</a>
			</div>
		</section>
		<section class="nodeinfo section">
			<div class="container">
				<h2>Website info</h2>
				<p>{domain} is home to<br>{usercount} users who have made<br>{statuscount} posts and are connected to<br>{peercount} other websites.</p>
				<p>(maybe mention limits for this particular instance?)</p>
				<p>The admin of this instance is:</p>
				<div class="admin account">
					<img src="/logo.svg">
					<div class="displayname">Daniel Supernault</div>
					<div class="username">pixelfed.social/<strong>dansup</strong></div>
				</div>
			</div>
		</section>
	</div>
	</header>
	<section class="about section">
		<div class="container">
				<h2>Create. Share. Discover.</h2>
				<p>{domain} is a website powered by Pixelfed, a <em>free and libre open-source</em> software platform for <em>hosting your very own</em> media-centric social media website. Create a profile on {appname} to start sharing your own photos and videos to anyone who follows you. With an account on {appname}, you can also browse a discovery feed of other profiles and posts, and follow other profiles to start seeing their posts in your own, <em>chronologically-sorted</em> timeline.</p>
		</div>
	</section>
	<section class="benefits section">
		<div class="container">
				<h2>A free and ethical photo sharing platform.</h2>
				<div class="features">
					<div class="feature">
						<h3>Ad-free.</h3>
						<p>No ads in timelines, or anywhere else.</p>
					</div>
					<div class="feature">
						<h3>Chronological.</h3>
						<p>Timelines are properly ordered, with most recent posts first.</p>
					</div>
					<div class="feature">
						<h3>Transparent.</h3>
						<p>There are no complex or opaque algorithms that decide what you can see.</p>
					</div>
					<div class="feature">
						<h3>Privacy-respecting.</h3>
						<p>No 3rd-party analytics or tracking are included by default.</p>
					</div>
					<div class="feature">
						<h3>Human-focused.</h3>
						<p>Feel free to be yourself. The focus is on your posts, not your engagement.</p>
					</div>
					<div class="feature">
						<h3>Featureful.</h3>
						<p>Multiple ways to express yourself.</p>
					</div>
				</div>
		</div>
	</section>
	<section class="federation section">
		<div class="container">
				<h2>Part of a larger network of millions.</h2>
				<div class="blurb" style="background: lemonchiffon; padding: 2em;">(This section is hidden if federation is disabled.)</div>
				<p>Unlike other networks, {domain} is just one website that is part of a larger network of websites that all speak the same protocol called ActivityPub. You can <em>follow anyone across the wider network</em>, regardless of whether they are on {appname} or on a completely different website. This works similarly to email, in much the same way you can message someone on Gmail even if you are using Outlook. This concept is known as federation.</p>
				<p>Furthermore, you can also follow profiles on websites running completely different software than Pixelfed! Imagine if you could use your Instagram account to follow and interact with Twitter users or YouTube channels. With your Pixelfed account on {domain}, you can like posts from Mastodon users, or comment on Peertube videos. Thanks to the power of federation and ActivityPub, you can experience levels of interoperability between websites that you simply cannot achieve on traditional social media websites.</p>
		</div>
	</section>
</main>
{{ end }}