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 Pricing from "./Pricing.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>
			FNX.storage is a platform for cost-effective cloud storage and
			content delivery. We will store and serve your files at an extremely
			competitive rate.
		</p>
		<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>
		<h2>What FNX 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>
		<Pricing/>
	</section>
</div>

<header>
	<h1>Features</h1>
</header>
<div class="page_content">
	<section>
		<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/>

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

<svelte:head>
	<style>
		body {
			background-image: url("/res/img/northernlights.webp");
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: center;
			background-size: cover;
		}
	</style>
</svelte:head>
<style>
header {
	padding-top: 20px;
	padding-bottom: 20px;
}
.logo_header {
	text-align: initial;
	padding-top: 0;
	padding-bottom: 0;
}
header > h1 {
	color: #ffffff;
	text-shadow: 0 0 6px #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: row;
	text-align: center;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid var(--card_color);
}
.prices > div > div {
	flex: 1 1 auto;
	padding: 4px;
	font-size: 1.3em;
}
.prices > div > div:nth-child(2) {
	background: var(--card_color);
}
@media(max-width: 1000px) {
	.prices > div {
		flex-direction: column;
	}
}
</style>