---
import BasicLayout from "@/layouts/BasicLayout.astro";
import { getRelativeLocaleUrl } from "astro:i18n";

const startLink = getRelativeLocaleUrl("en", "start");
---

<BasicLayout>
	<header
		class="min-h-[60vh] flex justify-center items-center flex-col gap-2 bg-amber-50 dark:bg-amber-950"
	>
		<h1
			class="text-5xl font-bold bg-gradient-to-r from-amber-700 to-amber-900 dark:from-amber-400 dark:to-amber-600 bg-clip-text text-transparent"
		>
			Move to Linux
		</h1>
		<p>This website aims to help you learn and setup Linux.</p>
		<div class="text-center">
			<a href="#what">What</a>
			&bull;
			<a href="#why">Why</a>
			&bull;
			<a href={startLink} class="font-bold">Just start!</a><br />
			<a href="/en/apps">Apps & Compatibility</a>
		</div>
	</header>
	<main>
		<section id="what" class="border-t-2 border-amber-900">
			<h2 class="text-blue-900 dark:text-blue-200">What is Linux?</h2>
			<p>
				Linux is a <i>family</i> of operating systems with the same core.
				The said "core" is also called the kernel.
			</p>
		</section>
		<section id="why">
			<h2 class="mb-2 text-violet-900 dark:text-violet-200">
				Why move to Linux?
			</h2>
			<div class="grid grid-cols-2 gap-4 lg:max-w-[50vw]">
				<div class="card">
					<h3>Free</h3>
					<p>
						Both free of charge, and free as in freedom. Most Linux
						distributions are free.
					</p>
				</div>
				<div class="card">
					<h3>Efficient</h3>
					<p>Revive your old machine, make existing ones do more.</p>
				</div>
				<div class="card">
					<h3>Be in control</h3>
					<p>
						Control what is on your machine, customize it to your
						liking. The Linux desktop world comes in many flavors.
					</p>
				</div>
				<div class="card">
					<h3>Improved Privacy</h3>
					<p>
						Pick and choose how much you want to share to improve
						the software that you use.
					</p>
				</div>
			</div>
		</section>
		<section id="start">
			<h2 class="text-green-900 dark:text-green-200">Convinced?</h2>
			<p>Click the button below to start on your Linux journey.</p>
			<a href={startLink} class="button mt-4">Start!</a>
		</section>
	</main>
	<footer class="text-center py-4 bg-slate-800 text-white">
		<div>
			<a href={getRelativeLocaleUrl("en", "contents")}
				>Table of Contents</a
			>
			&bull;
			<a href={getRelativeLocaleUrl("en", "privacy")}>Privacy Policy</a>
			&bull;
			<a
				href="https://gitskette.dailitation.xyz/linesofcodes/movetolinux"
				target="_blank"
				rel="noopener noreferrer"
			>
				Source code
			</a>
		</div>
		<p>
			Made with &hearts; from <a
				href="https://github.com/lines-of-codes/"
				target="_blank"
				rel="noreferrer noopener">lines-of-codes</a
			>
		</p>
		<p class="text-gray-400">
			Site licensed under MIT license, Most text content licensed under
			CC-BY-SA 4.0
		</p>
	</footer>
</BasicLayout>

<style>
	@reference "@/styles/global.css";

	h2 {
		@apply text-4xl font-bold;
	}

	h3 {
		@apply text-3xl font-semibold;
	}

	section {
		@apply flex justify-center items-center flex-col p-12;
	}
</style>
