Add OpenCS2 banner header below abstract + social preview images

- static/header.{webp,avif}: tracked via Git LFS for HF Space (avif 140KB,
webp 184KB; from 2MB PNG)
- Home page: keep eyebrow + h1 + author + buttons + abstract intact;
banner image rendered just after the abstract via <picture>
- Layout: og:image + twitter:image absolute URLs with width/height/alt
- .gitattributes: add *.webp and *.avif to LFS rules

.gitattributes

@@ -34,3 +34,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.avif filter=lfs diff=lfs merge=lfs -text

src/routes/+layout.svelte

@@ -10,6 +10,9 @@
 	let { children } = $props();
 
 	const canonicalUrl = $derived(page.url.href);
+	const ogImageUrl = $derived(`${page.url.origin}/header.webp`);
+	const ogImageAlt =
+		'OpenCS2 Dataset — an open multiplayer Counter-Strike 2 dataset with 10 tick-aligned player POVs, inputs, world state, and audio, built from professional HLTV demos.';
 </script>
 
 <svelte:head>
@@ -45,9 +48,16 @@
 	<meta property="og:description" content={site.description} />
 	<meta property="og:url" content={canonicalUrl} />
 	<meta property="og:locale" content="en_US" />
+	<meta property="og:image" content={ogImageUrl} />
+	<meta property="og:image:type" content="image/webp" />
+	<meta property="og:image:width" content="1773" />
+	<meta property="og:image:height" content="887" />
+	<meta property="og:image:alt" content={ogImageAlt} />
 	<meta name="twitter:card" content="summary_large_image" />
 	<meta name="twitter:title" content={site.name} />
 	<meta name="twitter:description" content={site.description} />
+	<meta name="twitter:image" content={ogImageUrl} />
+	<meta name="twitter:image:alt" content={ogImageAlt} />
 	<meta name="twitter:site" content="@JulienBlanchon" />
 	<meta name="twitter:creator" content="@JulienBlanchon" />
 </svelte:head>

src/routes/+page.svelte

@@ -98,65 +98,80 @@
 
 <main class="mx-auto w-full max-w-[1600px] px-4 pb-16">
 	<!-- Paper-style hero -->
-	<section class="mx-auto max-w-3xl pt-16 pb-10 text-center md:pt-24">
-		<div class="mb-3 text-xs font-semibold tracking-[0.2em] text-primary/70 uppercase">
-			HLTV · CS2 · Rendered POV Dataset
-		</div>
-		<h1 class="font-heading text-4xl font-semibold tracking-tight text-balance md:text-5xl">
-			OpenCS2 Dataset
-		</h1>
-		<div class="mt-5 flex items-center justify-center gap-3 text-sm text-muted-foreground">
-			<span class="font-medium text-foreground">{site.author}</span>
-			<a
-				href={site.websiteUrl}
-				target="_blank"
-				rel="noreferrer noopener"
-				aria-label="Personal website"
-				class="inline-flex items-center transition hover:text-foreground"
-			>
-				<GlobeIcon size={16} weight="duotone" />
-			</a>
-			<a
-				href={site.xUrl}
-				target="_blank"
-				rel="noreferrer noopener"
-				aria-label="X / Twitter"
-				class="inline-flex items-center transition hover:text-foreground"
-			>
-				<XLogoIcon size={14} weight="fill" />
-			</a>
-		</div>
+	<section class="mx-auto max-w-5xl pt-16 pb-10 text-center md:pt-24">
+		<div class="mx-auto max-w-3xl">
+			<div class="mb-3 text-xs font-semibold tracking-[0.2em] text-primary/70 uppercase">
+				HLTV · CS2 · Rendered POV Dataset
+			</div>
+			<h1 class="font-heading text-4xl font-semibold tracking-tight text-balance md:text-5xl">
+				OpenCS2 Dataset
+			</h1>
+			<div class="mt-5 flex items-center justify-center gap-3 text-sm text-muted-foreground">
+				<span class="font-medium text-foreground">{site.author}</span>
+				<a
+					href={site.websiteUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+					aria-label="Personal website"
+					class="inline-flex items-center transition hover:text-foreground"
+				>
+					<GlobeIcon size={16} weight="duotone" />
+				</a>
+				<a
+					href={site.xUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+					aria-label="X / Twitter"
+					class="inline-flex items-center transition hover:text-foreground"
+				>
+					<XLogoIcon size={14} weight="fill" />
+				</a>
+			</div>
 
-		<div class="mt-7 flex flex-wrap justify-center gap-2">
-			<Button href={site.datasetUrl} target="_blank" rel="noreferrer noopener" size="sm">
-				<HfLogo class="size-4" /> Dataset
-			</Button>
-			<Button
-				href={site.githubUrl}
-				target="_blank"
-				rel="noreferrer noopener"
-				variant="outline"
-				size="sm"
-			>
-				<GithubLogoIcon size={14} weight="fill" /> Code
-			</Button>
-			<Button
-				href={site.spaceUrl}
-				target="_blank"
-				rel="noreferrer noopener"
-				variant="outline"
-				size="sm"
-			>
-				<RocketLaunchIcon size={14} weight="duotone" /> Space
-			</Button>
+			<div class="mt-7 flex flex-wrap justify-center gap-2">
+				<Button href={site.datasetUrl} target="_blank" rel="noreferrer noopener" size="sm">
+					<HfLogo class="size-4" /> Dataset
+				</Button>
+				<Button
+					href={site.githubUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+					variant="outline"
+					size="sm"
+				>
+					<GithubLogoIcon size={14} weight="fill" /> Code
+				</Button>
+				<Button
+					href={site.spaceUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+					variant="outline"
+					size="sm"
+				>
+					<RocketLaunchIcon size={14} weight="duotone" /> Space
+				</Button>
+			</div>
+
+			<p class="mt-8 text-sm/relaxed text-pretty text-muted-foreground md:text-base">
+				A rendered dataset of professional Counter Strike 2 matches: every round captured from all
+				ten player POVs, frame-aligned, with spatialized audio, mouse/keyboard inputs, and per-tick
+				world state. Built from HLTV demos, served as parquet shards, and browsable here without
+				downloading the archive.
+			</p>
 		</div>
 
-		<p class="mt-8 text-sm/relaxed text-pretty text-muted-foreground md:text-base">
-			A rendered dataset of professional Counter Strike 2 matches: every round captured from all ten
-			player POVs, frame-aligned, with spatialized audio, mouse/keyboard inputs, and per-tick world
-			state. Built from HLTV demos, served as parquet shards, and browsable here without downloading
-			the archive.
-		</p>
+		<picture>
+			<source srcset="/header.avif" type="image/avif" />
+			<source srcset="/header.webp" type="image/webp" />
+			<img
+				src="/header.webp"
+				alt="OpenCS2 Dataset — 10 tick-aligned player POVs, inputs, world state, and audio, built from professional HLTV demos."
+				width="1773"
+				height="887"
+				class="mx-auto mt-10 h-auto w-full rounded-md border"
+				decoding="async"
+			/>
+		</picture>
 	</section>
 
 	<!-- Motivation -->