<script lang="ts">
	import PageIntro from '$lib/components/shared/PageIntro.svelte';
</script>

<div class="page">
	<div class="app-surface">
		<PageIntro
			eyebrow="Atelier"
			title="A parallel frontend for the next Platform"
			description="This route tree is the new interface track. It can evolve against the same backend APIs while the current app remains live and unchanged."
			meta="Safe parallel build"
		/>

		<div class="links">
			<a href="/atelier/inventory">Open inventory</a>
			<a href="/atelier/fitness">Open fitness</a>
			<a href="/atelier/reader">Open reader</a>
		</div>
	</div>
</div>

<style>
	.links {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.links a {
		padding: 12px 16px;
		border-radius: 999px;
		background: rgba(255,255,255,0.68);
		border: 1px solid rgba(35,26,17,0.08);
	}
</style>
