<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 GetStarted from "./GetStarted.svelte";
import Pricing from "./Pricing.svelte";
import SubscriptionPlans from "./SubscriptionPlans.svelte";

let upload_widget
</script>

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

<AddressReputation/>

<div class="page_content">
	<div class="highlight_yellow">
		This is a development server. All files and accounts may be lost when
		the final product launches.
	</div>

	<section>
		<p>
			Nova.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>
		<h2>Features</h2>
		<ul>
			<li>
				Cloud storage with <a href="/filesystem#toc_7">rclone</a> and
				FTPS support
			</li>
			<li>
				Customizable download pages (custom branding colours, header and
				background images)
			</li>
			<li>
				Fault tolerance for up to four storage server failures
			</li>
			<li>
				Caching servers highly optimized for long-distance data transfer
			</li>
		</ul>
		<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 - I'm busy, please don't bother me
			</li>
		</ul>
	</section>
</div>

<header>
	<h1>Subscription plans</h1>
</header>
<SubscriptionPlans/>

<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: 1px 1px 5px #000000;
	margin-top: 30px;
	margin-bottom: 30px;
}

.header_image_container {
	text-align: initial;
	margin: 50px auto;
	height: 100px;
	width: 500px;
	max-width: 100%;
	background-image: url("/res/img/header.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.bold {
	font-weight: bold;
	color: var(--highlight_color);
}
</style>
