import { createFileRoute } from "@tanstack/react-router";
import { Link } from "~/components/link";

function Index() {
	return (
		<main className="p-48 flex flex-row items-start justify-center space-x-24">
			<div className="flex flex-col items-start">
				<h1 className="text-2xl">
					<span className="font-bold">MARKONE</span>
					<br />
				</h1>
				<p className="pb-4 text-2xl uppercase">BOOKMARK MANAGER</p>
				<div className="flex flex-col text-lg">
					<Link>LOGIN</Link>
					<Link>SIGN UP</Link>
					<Link href="/demo-user/bookmarks">DEMO</Link>
				</div>
			</div>
			<div>
				<p>
					<strong>WHAT IS MARKONE?</strong>
					<br />
					MARKONE is a local-first, self-hostable bookmark manager.
				</p>
				<ul className="px-2 pt-2">
					<li>
						* Curate interesting websites you find online, and let MARKONE
						archive them.
					</li>
					<li>* Reference your saved bookmarks anytime, even when offline.</li>
					<li>* Share your collections to others with a permalink.</li>
				</ul>
				<br />
				<p>
					<strong>WHERE IS MARKONE?</strong>
					<br />
					MARKONE is available as a web app and a browser extension for now.
				</p>
				<br />
				<p>
					<strong>TECHNICAL STUFF</strong>
					<br />
					Source code, as well as hosting guide for MARKONE is{" "}
					<Link href="https://github.com/">available here</Link>.
					<br />
				</p>
			</div>
		</main>
	);
}

export const Route = createFileRoute("/")({
	component: Index,
});