From 77ecced45ae0341e235eb2e52edf7a9166fd731f Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 2 Oct 2026 00:01:48 +0100
Subject: [PATCH] web/home: add Sticker and SectionHeader

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../home/SectionHeader.stories.svelte         | 21 ++++++++++
 .../lib/components/home/SectionHeader.svelte  | 37 +++++++++++++++++
 .../components/home/Sticker.stories.svelte    | 25 ++++++++++++
 web/src/lib/components/home/Sticker.svelte    | 40 +++++++++++++++++++
 4 files changed, 123 insertions(+)
 create mode 100644 web/src/lib/components/home/SectionHeader.stories.svelte
 create mode 100644 web/src/lib/components/home/SectionHeader.svelte
 create mode 100644 web/src/lib/components/home/Sticker.stories.svelte
 create mode 100644 web/src/lib/components/home/Sticker.svelte

diff --git a/web/src/lib/components/home/SectionHeader.stories.svelte b/web/src/lib/components/home/SectionHeader.stories.svelte
new file mode 100644
index 000000000..b6b470202
--- /dev/null
+++ b/web/src/lib/components/home/SectionHeader.stories.svelte
@@ -0,0 +1,21 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SectionHeader from "$lib/components/home/SectionHeader.svelte";
+	import Sticker from "$lib/components/home/Sticker.svelte";
+
+	const { Story } = defineMeta({
+		title: "Home/SectionHeader",
+		component: SectionHeader,
+		tags: ["autodocs"]
+	});
+</script>
+
+<Story name="Default" asChild>
+	<SectionHeader title="Everything a forge should be." subtitle="A few things it never was.">
+		{#snippet stickers()}
+			<Sticker tone="deep" rotate={-6}>What's</Sticker>
+			<Sticker tone="soft" rotate={4} round class="z-10 -mx-1.5">in</Sticker>
+			<Sticker tone="accent" rotate={-3}>the box</Sticker>
+		{/snippet}
+	</SectionHeader>
+</Story>
diff --git a/web/src/lib/components/home/SectionHeader.svelte b/web/src/lib/components/home/SectionHeader.svelte
new file mode 100644
index 000000000..386fc0d69
--- /dev/null
+++ b/web/src/lib/components/home/SectionHeader.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	const sectionHeader = tv({
+		slots: {
+			root: "mx-auto mb-4xl flex max-w-wide flex-col items-center text-center md:mb-5xl",
+			stickers: "mb-lg flex items-center",
+			heading: "text-4xl font-bold text-balance text-foreground-default md:text-5xl"
+		}
+	});
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		title: string;
+		subtitle: string;
+		stickers: Snippet;
+		class?: string;
+		stickersClass?: string;
+	}
+
+	let { title, subtitle, stickers, class: className = "", stickersClass = "" }: Props = $props();
+
+	const slots = sectionHeader();
+</script>
+
+<header class={slots.root({ class: className })}>
+	<div class={slots.stickers({ class: stickersClass })} aria-hidden="true">
+		{@render stickers()}
+	</div>
+	<h2 class={slots.heading()}>
+		{title}<br />
+		<span class="text-foreground-subtle">{subtitle}</span>
+	</h2>
+</header>
diff --git a/web/src/lib/components/home/Sticker.stories.svelte b/web/src/lib/components/home/Sticker.stories.svelte
new file mode 100644
index 000000000..20e548dfd
--- /dev/null
+++ b/web/src/lib/components/home/Sticker.stories.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Sticker from "$lib/components/home/Sticker.svelte";
+
+	const { Story } = defineMeta({
+		title: "Home/Sticker",
+		component: Sticker,
+		tags: ["autodocs"]
+	});
+</script>
+
+<Story name="Tones" asChild>
+	<div class="flex items-center gap-md p-xl">
+		<Sticker tone="deep" rotate={-6}>deep</Sticker>
+		<Sticker tone="soft" rotate={4}>soft</Sticker>
+		<Sticker tone="accent" rotate={-3}>accent</Sticker>
+		<Sticker tone="paper" rotate={2}>paper</Sticker>
+	</div>
+</Story>
+
+<Story name="Round" asChild>
+	<div class="p-xl">
+		<Sticker tone="soft" round rotate={6}>in</Sticker>
+	</div>
+</Story>
diff --git a/web/src/lib/components/home/Sticker.svelte b/web/src/lib/components/home/Sticker.svelte
new file mode 100644
index 000000000..715ffd710
--- /dev/null
+++ b/web/src/lib/components/home/Sticker.svelte
@@ -0,0 +1,40 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const sticker = tv({
+		base: "inline-flex rotate-(--sticker-tilt) items-center justify-center border-4 border-background-canvas px-md py-1 text-2xl font-bold whitespace-nowrap transition-[rotate,scale] duration-500 ease-spring hover:scale-110 hover:rotate-0 motion-reduce:transition-none md:text-4xl",
+		variants: {
+			tone: {
+				deep: "bg-inverse-background text-inverse-foreground",
+				soft: "bg-background-muted text-foreground-default",
+				accent: "bg-background-info-emphasis text-foreground-on-emphasis",
+				paper: "bg-background-default text-foreground-default"
+			},
+			round: {
+				true: "aspect-square rounded-full px-sm",
+				false: "rounded-xl"
+			}
+		},
+		defaultVariants: { tone: "paper", round: false }
+	});
+
+	export type StickerVariants = VariantProps<typeof sticker>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		tone?: StickerVariants["tone"];
+		round?: boolean;
+		rotate?: number;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { tone, round = false, rotate = 0, class: className, children }: Props = $props();
+</script>
+
+<span class={sticker({ tone, round, class: className })} style:--sticker-tilt="{rotate}deg">
+	{@render children()}
+</span>
-- 
2.51.2