fnx_web/svelte/src/home_page/HomePage.svelte

<script>
import FeatureTable from "./FeatureTable.svelte";
import ForCreators from "./ForCreators.svelte";
import OtherPlans from "./OtherPlans.svelte";
import UploadWidget from "./UploadWidget.svelte";

</script>
<header>
	<div class="header_image_container"></div>
</header>

<UploadWidget></UploadWidget>

<header>
	<h1>What is pixeldrain?</h1>
</header>

<section>
	<p>
		Pixeldrain is a file sharing website built for speed and ease of
		use. You can upload files you want to share online to our
		servers and we will hold on to them for at least a month. During
		this time anyone with the link will be able to download your
		files. Pixeldrain is built to be as fast as possible, so you
		don't have to do any unnecessary waiting when downloading files.
	</p>
	<p>
		Files can be uploaded by clicking the big green upload
		button, or by dragging them onto this page from your file
		manager.
	</p>
	<p>
		If you uploaded multiple files at once you can also create a
		list, which is a collection of files with one single link. Like
		a photo album, a music record or a video compilation. Click the
		'Create list with uploaded files' button after your uploads are
		complete. The files will be saved in the order you uploaded
		them.
	</p>
</section>
<header>
	<h1 id="pro">Getting more out of pixeldrain</h1>
</header>
<section>
	<p>
		By purchasing a subscription you support pixeldrain on its mission to
		make content sharing easier, safer and faster for everyone. The standard
		subscription plans use Patreon for payment processing. Check out our <a
		href="#prepaid">prepaid plans</a> if you are interested in more
		professional services.
	</p>
	<br/>
	<FeatureTable></FeatureTable>
	<br/>
	<div style="text-align: center;">
		Do you need even more time and space? Check out our other plans
	</div>
	<br/>
	<OtherPlans></OtherPlans>
	<br/>
</section>

<ForCreators/>
<br/>
<br/>

<style>
.header_image_container {
	margin: auto;
	height: 300px;
	width: 750px;
	max-width: 100%;
	background-image: url("/res/img/header_orbitron_wide.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
@media (max-width: 700px) {
	.header_image_container {
		height: 250px;
		background-image: url("/res/img/header_orbitron.webp");
	}
}
</style>