countdown

src/lib/components/Countdown.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { EVENT } from '$lib/data/content';
+	import Icon from './Icon.svelte';
+
+	// Final submission deadline — read as UTC from the content model.
+	const DEADLINE = new Date(EVENT.deadlineISO).getTime();
+
+	const pad = (n: number) => String(n).padStart(2, '0');
+
+	type Parts = { days: string; hrs: string; min: string; sec: string };
+
+	let parts = $state<Parts | null>(null);
+	let done = $state(false);
+
+	function tick(): boolean {
+		const ms = DEADLINE - Date.now();
+		if (ms <= 0) {
+			done = true;
+			parts = { days: '00', hrs: '00', min: '00', sec: '00' };
+			return false;
+		}
+		const s = Math.floor(ms / 1000);
+		parts = {
+			days: pad(Math.floor(s / 86400)),
+			hrs: pad(Math.floor((s % 86400) / 3600)),
+			min: pad(Math.floor((s % 3600) / 60)),
+			sec: pad(s % 60)
+		};
+		return true;
+	}
+
+	// Only run on the client — the page is prerendered, so SSR renders the
+	// placeholder grid below and the real values pop in on hydration (no mismatch).
+	onMount(() => {
+		if (!tick()) return;
+		const id = setInterval(() => {
+			if (!tick()) clearInterval(id);
+		}, 1000);
+		return () => clearInterval(id);
+	});
+
+	const units = $derived([
+		{ k: 'days', v: parts?.days ?? '––' },
+		{ k: 'hrs', v: parts?.hrs ?? '––' },
+		{ k: 'min', v: parts?.min ?? '––' },
+		{ k: 'sec', v: parts?.sec ?? '––' }
+	]);
+</script>
+
+<div class="countdown" class:countdown--done={done}>
+	<div class="countdown__head">
+		<span class="eyebrow">{done ? 'Deadline passed' : 'Counting down to'}</span>
+		<span class="countdown__when">Jun 15 · 23:59 UTC</span>
+	</div>
+
+	{#if done}
+		<p class="countdown__closed">Submissions closed</p>
+	{:else}
+		<div class="countdown__grid" role="timer" aria-label="Time remaining until the submission deadline">
+			{#each units as u (u.k)}
+				<div class="countdown__cell" class:is-live={u.k === 'sec'}>
+					<b class="countdown__num">{u.v}</b>
+					<span class="countdown__lbl">{u.k}</span>
+				</div>
+			{/each}
+		</div>
+
+		<div class="countdown__foot">
+			<span class="countdown__note">Built something? Ship it before the clock runs out.</span>
+			<a class="btn btn--accent countdown__cta" href="/submit">
+				Submit your build <Icon name="arrow" size={18} stroke="#fff" />
+			</a>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.countdown {
+		width: 100%;
+		background: var(--kraft);
+		border: 2px solid var(--ink);
+		border-radius: 0;
+		box-shadow: 8px 8px 0 var(--ink);
+	}
+
+	.countdown__head {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 12px;
+		flex-wrap: wrap;
+		padding: 14px 20px;
+		border-bottom: 2px solid var(--ink);
+	}
+	.countdown__when {
+		font-family: var(--font-mono);
+		font-size: 12px;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--ink-2);
+		white-space: nowrap;
+	}
+
+	.countdown__grid {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+	}
+	.countdown__cell {
+		padding: 22px 8px 18px;
+		text-align: center;
+		border-right: 2px solid var(--ink);
+	}
+	.countdown__cell:last-child {
+		border-right: none;
+	}
+	.countdown__num {
+		display: block;
+		font-family: var(--font-display);
+		font-weight: 800;
+		font-stretch: 115%;
+		font-variant-numeric: tabular-nums;
+		font-size: clamp(46px, 8vw, 96px);
+		line-height: 0.92;
+		letter-spacing: -0.02em;
+		color: var(--ink);
+	}
+	.countdown__cell.is-live .countdown__num {
+		color: var(--clay);
+	}
+	.countdown__lbl {
+		display: block;
+		margin-top: 10px;
+		font-family: var(--font-mono);
+		font-size: 11px;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		color: var(--ink-soft);
+	}
+
+	/* action bar — guides users straight to submitting */
+	.countdown__foot {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 14px 24px;
+		flex-wrap: wrap;
+		padding: 16px 20px;
+		border-top: 2px solid var(--ink);
+		background: color-mix(in srgb, var(--amber) 12%, var(--kraft));
+	}
+	.countdown__note {
+		font-family: var(--font-mono);
+		font-size: 13px;
+		letter-spacing: 0.01em;
+		color: var(--ink-2);
+		max-width: 42ch;
+	}
+	.countdown__cta {
+		white-space: nowrap;
+	}
+
+	.countdown__closed {
+		margin: 0;
+		padding: 34px 20px;
+		text-align: center;
+		font-family: var(--font-display);
+		font-weight: 800;
+		font-stretch: 110%;
+		font-size: clamp(24px, 3.2vw, 34px);
+		color: var(--ink);
+	}
+
+	@media (max-width: 560px) {
+		.countdown__cta {
+			width: 100%;
+			justify-content: center;
+		}
+	}
+</style>

src/lib/components/Hero.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { EVENT } from '$lib/data/content';
-	import StampBadge from './StampBadge.svelte';
+	import Countdown from './Countdown.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' }
@@ -22,7 +21,11 @@
 
 		<h1 class="display" style="margin-top:18px">BUILD SMALL</h1>
 
-		<div class="hero__grid" style="margin-top:22px;align-items:flex-end">
+		<div class="hero__countdown">
+			<Countdown />
+		</div>
+
+		<div class="hero__grid" style="margin-top:34px;align-items:flex-end">
 			<div>
 				<p
 					class="lede"
@@ -35,22 +38,19 @@
 					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 class="hero__aside">
+				<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>

src/lib/data/content.ts

@@ -20,6 +20,8 @@ export const EVENT = {
 	name: 'Build Small',
 	tagline: 'Build something small, local, and yours.',
 	deadline: 'June 15, 2026',
+	// machine-readable deadline (UTC) — drives the live hero countdown
+	deadlineISO: '2026-06-15T23:59:00Z',
 	deadlineNote: 'final submission',
 	org: 'huggingface.co/BuildSmall',
 	paramCap: '32B',

src/lib/styles/global.css

@@ -319,7 +319,7 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
 .stamp--spin:hover svg.stamp__ring { transform: rotate(28deg); }
 
 /* ============ hero ============ */
-.hero { position: relative; overflow: clip; padding: 64px 0 84px; }
+.hero { position: relative; overflow: clip; padding: 48px 0 84px; }
 .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
 .hero h1 { font-size: clamp(58px, 11vw, 150px); }
 .hero__statline { display: flex; gap: 0; flex-wrap: wrap; border: 2px solid var(--ink);
@@ -334,9 +334,14 @@ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
   background: var(--kraft); padding: 28px; overflow: hidden;
   box-shadow: 8px 8px 0 var(--ink);
 }
+/* countdown is the hero centrepiece — a full-width band under the headline */
+.hero__countdown { width: 100%; margin-top: 30px; }
+.hero__aside { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
 @media (max-width: 900px){
-  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
+  .hero { padding-top: 32px; }
+  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
   .hero h1 { font-size: clamp(54px, 17vw, 96px); }
+  .hero__countdown { margin-top: 24px; }
 }
 
 /* ============ tracks ============ */