src/lib/components/Hero.svelte

<script lang="ts">
	import { EVENT } from '$lib/data/content';
	import StampBadge from './StampBadge.svelte';
	import TopoBackdrop from './TopoBackdrop.svelte';
	import Icon from './Icon.svelte';

	const stats = [
		{ b: EVENT.deadline, s: 'final deadline' },
		{ b: `≤ ${EVENT.paramCap}`, s: 'params, max' },
		{ b: `${EVENT.pool}+`, s: 'prize pool' },
		{ b: String(EVENT.waysToWin), s: 'ways to win' }
	];
</script>

<header class="hero" id="top">
	<TopoBackdrop opacity={0.12} />
	<div class="wrap" style="position:relative">
		<div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
			<span class="eyebrow">Hugging Face × Gradio</span>
			<span class="coord">N 45.21 · W 122.6</span>
		</div>

		<h1 class="display" style="margin-top:18px">BUILD SMALL</h1>

		<div class="hero__grid" style="margin-top:22px;align-items:flex-end">
			<div>
				<p
					class="lede"
					style="font-size:clamp(19px,2.3vw,26px);max-width:26ch;font-family:var(--font-display);font-weight:500;line-height:1.2"
				>
					{EVENT.tagline}
				</p>
				<p style="color:var(--ink-2);margin-top:14px;max-width:46ch">
					Registration’s closed and the jam is underway — this is your field guide. Everything you
					need to enter cleanly: the rules, the {EVENT.waysToWin} ways to win, and the right kit for what
					you’re building.
				</p>
				<div style="margin-top:26px;display:flex;flex-direction:column;gap:20px;align-items:flex-start">
					<div style="display:flex;gap:12px;flex-wrap:wrap">
						<a class="btn btn--accent" href="#prizes">
							See the prizes <Icon name="arrow" size={18} stroke="#fff" />
						</a>
						<a class="btn btn--ghost" href="#recommender">Resources</a>
					</div>
					<div class="hero__statline">
						{#each stats as st (st.s)}
							<div class="hero__stat"><b>{st.b}</b><span>{st.s}</span></div>
						{/each}
					</div>
				</div>
			</div>
			<div style="display:flex;justify-content:flex-end">
				<div class="floaty"><StampBadge glyph="compass" accent="var(--forest)" size={150} /></div>
			</div>
		</div>
	</div>
</header>