fnx_web/svelte/src/home_page/HomePage.svelte

<script>
import Menu from "filesystem/Menu.svelte";
import Footer from "layout/Footer.svelte";
import { drop_target } from "lib/DropTarget";
import AddressReputation from "./AddressReputation.svelte";
import FeatureTable from "./FeatureTable.svelte";
import GetStarted from "./GetStarted.svelte";
import UploadWidget from "./UploadWidget.svelte";

let upload_widget
</script>

<header class="logo_header">
	<div class="menu_button_container">
		<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="border-radius: 0 0 0 8px; margin: 0"/>
	</div>
	<div class="header_image_container"></div>
</header>

<AddressReputation/>

<div class="page_content">
	<section>
		<p>
			Pixeldrain offers services for efficiently moving and storing
			digital files on the internet.
		</p>
		<h2>What pixeldrain is good at</h2>
		<ul>
			<li>
				Serving large files to millions of people worldwide
			</li>
			<li>
				Storing files for less money than all the competition
			</li>
		</ul>
		<h2>Things we take very seriously</h2>
		<ul>
			<li>
				<b>Performance</b> - Slow software is a waste of time. We
				don't want to make you wait, so pixeldrain is completely
				tuned for maximum performance
			</li>
			<li>
				<b>Privacy</b> - There is too much tracking on the web
				nowadays. Pixeldrain goes in the other direction, this site
				does not contain any advertisements or third party tracking
				scripts
			</li>
			<li>
				Bullet lists
			</li>
		</ul>
	</section>
</div>

<header>
	<h1>Pricing</h1>
	<span>(Prepaid plan. For monthly subscriptions, look further below)</span>
</header>
<div class="page_content">
	<section>
		<div class="prices">
			<div>
				<div>Storage pricing</div>
				<div>€ 4 / TB / month</div>
			</div>
			<div>
				<div>Egress pricing</div>
				<div>€ 1 / TB</div>
			</div>
			<div>
				<div>Minimum fee *</div>
				<div>€1 / month</div>
			</div>
		</div>
		<p style="text-align: center;">
			* The minimum fee is only charged when usage is less than €1
		</p>

		<h2>What you get</h2>
		<ul>
			<li>
				<span class="bold">Unlimited</span> storage space
			</li>
			<li>
				Cloud storage with <a href="/filesystem#toc_7">rclone</a> and <a
				href="/filesystem#toc_10">FTPS</a> support
			</li>
			<li>
				<span class="bold">Customizable</span> download pages (custom
				branding colours, header and background images)
			</li>
			<li>
				<span class="bold">Fault tolerance</span> for up to four storage
				server failures
			</li>
			<li>
				<span class="bold">1.8 Terabits per second</span> of total bandwidth
				capacity
			</li>
			<li>
				Twenty-three high-performance caching servers optimized for data
				transfer over long distances
			</li>
			<li>
				File caching in
				<span class="bold">Portland</span>,
				<span class="bold">Querétaro</span>,
				<span class="bold">New York</span>,
				<span class="bold">São Paulo</span>,
				<span class="bold">Frankfurt</span> and
				<span class="bold">Singapore</span>
			</li>
		</ul>
		<img class="image" src="/res/img/map.webp" alt="A globe showing datacenter locations"/>
		<h3>What you don't get</h3>
		<ul>
			<li>
				Data backups - Please keep a local copy of everything you store
				in case of emergency
			</li>
			<li>
				Commercial support - If you have a question, please check the <a
				href="/about">Q&A page</a> first. If that doesn't answer it, try
				the <a href="https://discord.gg/UDjaBGwr4p"
				target="_blank">support channel</a> on Discord.
			</li>
		</ul>
	</section>
</div>

<header>
	<h1>Get started</h1>
</header>
<GetStarted/>

<header id="pro">
	<h1>Subscription plans</h1>
</header>
<div class="page_content">
	<FeatureTable/>
</div>

<Footer nobg/>

<style>
:global(.page_body) {
	background-image: url("/res/img/inflating_star.webp");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}
.page_content {
	margin-top: 16px;
	margin-bottom: 16px;
}
@media (max-width: 1100px) {
	.page_content {
		margin-top: 0;
	}
}

header {
	padding-top: 20px;
	padding-bottom: 20px;
}
.logo_header {
	text-align: initial;
	padding-top: 0;
	padding-bottom: 0;
}
header > h1,
header > span {
	color: #ffffff;
	text-shadow: 0 0 4px #000000;
	margin-top: 30px;
	margin-bottom: 30px;
}

.header_image_container {
	text-align: initial;
	margin: auto;
	margin-bottom: 1.5em; /*Offset for menu button*/
	height: 150px;
	width: 500px;
	max-width: 100%;
	background-image: url("/res/img/header_orbitron.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.menu_button_container {
	display: flex;
	justify-content: end;
}
.image {
	max-width: 100%;
	border-radius: 12px;
}
.bold {
	font-weight: bold;
	color: var(--highlight_color);
	text-shadow: 1px 1px 3px var(--shadow_color);
}

.prices {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.prices > div {
	flex: 1 0 200px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	text-align: center;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid var(--card_color);
}
.prices > div > div {
	padding: 4px;
}
.prices > div > div:nth-child(2) {
	background: var(--card_color);
	font-size: 1.3em;
}
</style>