diff --git a/biome.json b/biome.json
index dfc0498..0c8f6d5 100644
--- a/biome.json
+++ b/biome.json
@@ -33,6 +33,13 @@
 		}
 	},
 	"files": {
-		"includes": ["commerce/**", "shopify/**", "vtex/**", "resend/**", "vitest.config.ts"]
+		"includes": [
+			"commerce/**",
+			"shopify/**",
+			"vtex/**",
+			"resend/**",
+			"website/**",
+			"vitest.config.ts"
+		]
 	}
 }
diff --git a/package-lock.json b/package-lock.json
index 21892d5..1775aee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@decocms/apps",
-  "version": "0.27.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@decocms/apps",
-      "version": "0.27.0",
+      "version": "1.2.0",
       "license": "MIT",
       "devDependencies": {
         "@biomejs/biome": "^2.4.7",
diff --git a/package.json b/package.json
index 80c97e3..b10d843 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,18 @@
     "./resend/mod": "./resend/mod.ts",
     "./resend/client": "./resend/client.ts",
     "./resend/types": "./resend/types.ts",
-    "./resend/actions/send": "./resend/actions/send.ts"
+    "./resend/actions/send": "./resend/actions/send.ts",
+    "./website": "./website/index.ts",
+    "./website/mod": "./website/mod.ts",
+    "./website/client": "./website/client.ts",
+    "./website/types": "./website/types.ts",
+    "./website/components/*": "./website/components/*.tsx",
+    "./website/loaders/*": "./website/loaders/*.ts",
+    "./website/loaders/fonts/*": "./website/loaders/fonts/*.ts",
+    "./website/matchers/*": "./website/matchers/*.ts",
+    "./website/flags/*": "./website/flags/*.ts",
+    "./website/flags/multivariate/*": "./website/flags/multivariate/*.ts",
+    "./website/utils/*": "./website/utils/*.ts"
   },
   "scripts": {
     "generate:manifests": "tsx scripts/generate-manifests.ts",
@@ -80,6 +91,7 @@
     "shopify/",
     "vtex/",
     "resend/",
+    "website/",
     "!**/__tests__/",
     "!scripts/"
   ],
diff --git a/scripts/generate-manifests.ts b/scripts/generate-manifests.ts
index 8887a87..156079b 100644
--- a/scripts/generate-manifests.ts
+++ b/scripts/generate-manifests.ts
@@ -21,6 +21,7 @@ const APPS: AppConfig[] = [
 	{ name: "vtex", dir: "vtex" },
 	{ name: "shopify", dir: "shopify" },
 	{ name: "resend", dir: "resend" },
+	{ name: "website", dir: "website" },
 ];
 
 const CATEGORIES = ["loaders", "actions", "sections"] as const;
diff --git a/vtex/client.ts b/vtex/client.ts
index 0f2722a..b51b08f 100644
--- a/vtex/client.ts
+++ b/vtex/client.ts
@@ -242,7 +242,7 @@ export async function vtexCachedFetch<T>(
 export async function vtexFetchWithCookies<T>(path: string, init?: RequestInit): Promise<T> {
 	// Auto-inject request cookies from RequestContext
 	const existingHeaders = init?.headers as Record<string, string> | undefined;
-	if (!existingHeaders?.["cookie"]) {
+	if (!existingHeaders?.cookie) {
 		const ctx = RequestContext.current;
 		const cookies = ctx?.request.headers.get("cookie");
 		if (cookies) {
diff --git a/vtex/commerceLoaders.ts b/vtex/commerceLoaders.ts
index 784242e..a684199 100644
--- a/vtex/commerceLoaders.ts
+++ b/vtex/commerceLoaders.ts
@@ -92,7 +92,7 @@ export function createVtexCommerceLoaders(
 		static: options?.cacheProfiles?.static ?? "static",
 	};
 
-	const cachedProductList = createCachedLoader(
+	const _cachedProductList = createCachedLoader(
 		"vtex/productList",
 		vtexProductList,
 		profiles.listing,
diff --git a/vtex/manifest.gen.ts b/vtex/manifest.gen.ts
index ad42fbf..10bb23d 100644
--- a/vtex/manifest.gen.ts
+++ b/vtex/manifest.gen.ts
@@ -13,6 +13,7 @@ import * as actions_session from "./actions/session";
 import * as actions_trigger from "./actions/trigger";
 import * as actions_wishlist from "./actions/wishlist";
 import * as loaders_address from "./loaders/address";
+import * as loaders_autocomplete from "./loaders/autocomplete";
 import * as loaders_brands from "./loaders/brands";
 import * as loaders_cart from "./loaders/cart";
 import * as loaders_catalog from "./loaders/catalog";
@@ -36,6 +37,7 @@ const manifest = {
 	name: "vtex",
 	loaders: {
 		"vtex/loaders/address": loaders_address,
+		"vtex/loaders/autocomplete": loaders_autocomplete,
 		"vtex/loaders/brands": loaders_brands,
 		"vtex/loaders/cart": loaders_cart,
 		"vtex/loaders/catalog": loaders_catalog,
diff --git a/website/__tests__/flags.test.ts b/website/__tests__/flags.test.ts
new file mode 100644
index 0000000..22d74ee
--- /dev/null
+++ b/website/__tests__/flags.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+import Audience from "../flags/audience";
+import Everyone from "../flags/everyone";
+import Flag from "../flags/flag";
+import type { Matcher } from "../types";
+import multivariate from "../utils/multivariate";
+
+// ---------------------------------------------------------------------------
+// flag.ts
+// ---------------------------------------------------------------------------
+
+describe("Flag", () => {
+	it("returns a FlagObj with the same values", () => {
+		const matcher: Matcher = () => true;
+		const result = Flag({
+			matcher,
+			true: "variant-a",
+			false: "variant-b",
+			name: "test-flag",
+		});
+
+		expect(result.matcher).toBe(matcher);
+		expect(result.true).toBe("variant-a");
+		expect(result.false).toBe("variant-b");
+		expect(result.name).toBe("test-flag");
+	});
+
+	it("preserves complex true/false values", () => {
+		const routes = [{ pathTemplate: "/*", handler: { value: {} } }];
+		const result = Flag<typeof routes>({
+			matcher: () => false,
+			true: routes,
+			false: [],
+			name: "routes-flag",
+		});
+
+		expect(result.true).toBe(routes);
+		expect(result.false).toEqual([]);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// audience.ts
+// ---------------------------------------------------------------------------
+
+describe("Audience", () => {
+	it("returns FlagObj with routes as true branch and empty as false", () => {
+		const matcher: Matcher = () => true;
+		const routes = [{ pathTemplate: "/products/*", handler: { value: {} } }];
+
+		const result = Audience({ matcher, name: "vip-users", routes });
+
+		expect(result.name).toBe("vip-users");
+		expect(result.true).toEqual(routes);
+		expect(result.false).toEqual([]);
+	});
+
+	it("defaults routes to empty array when not provided", () => {
+		const result = Audience({ matcher: () => false, name: "empty" });
+
+		expect(result.true).toEqual([]);
+		expect(result.false).toEqual([]);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// everyone.ts
+// ---------------------------------------------------------------------------
+
+describe("Everyone", () => {
+	it("creates a flag named Everyone that always matches", () => {
+		const routes = [{ pathTemplate: "/*", handler: { value: {} } }];
+		const result = Everyone({ routes });
+
+		expect(result.name).toBe("Everyone");
+		expect(result.true).toEqual(routes);
+		expect(result.false).toEqual([]);
+		// The matcher should be MatchAlways which returns true
+		expect(result.matcher({} as any)).toBe(true);
+	});
+
+	it("works with no routes", () => {
+		const result = Everyone({});
+
+		expect(result.name).toBe("Everyone");
+		expect(result.true).toEqual([]);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// multivariate
+// ---------------------------------------------------------------------------
+
+describe("multivariate", () => {
+	it("returns the variants as-is", () => {
+		const variants = [
+			{ value: "A", weight: 0.5 },
+			{ value: "B", weight: 0.5 },
+		];
+
+		const result = multivariate({ variants });
+
+		expect(result.variants).toBe(variants);
+		expect(result.variants).toHaveLength(2);
+	});
+
+	it("supports variants with matchers", () => {
+		const matcher: Matcher = () => true;
+		const variants = [{ value: "control", matcher }, { value: "default" }];
+
+		const result = multivariate({ variants });
+
+		expect(result.variants[0].matcher).toBe(matcher);
+		expect(result.variants[1].matcher).toBeUndefined();
+	});
+});
diff --git a/website/__tests__/loaders.test.ts b/website/__tests__/loaders.test.ts
new file mode 100644
index 0000000..cdd567e
--- /dev/null
+++ b/website/__tests__/loaders.test.ts
@@ -0,0 +1,202 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import EnvironmentLoader from "../loaders/environment";
+import googleFonts from "../loaders/fonts/googleFonts";
+import localFonts from "../loaders/fonts/local";
+import SecretLoader from "../loaders/secret";
+
+// ---------------------------------------------------------------------------
+// loaders/fonts/local.ts
+// ---------------------------------------------------------------------------
+
+describe("localFonts", () => {
+	it("returns empty family and stylesheet for no fonts", () => {
+		const result = localFonts({ fonts: [] });
+		expect(result.family).toBe("");
+		expect(result.styleSheet).toBe("");
+	});
+
+	it("generates @font-face for a single font", () => {
+		const result = localFonts({
+			fonts: [
+				{
+					family: "CustomFont",
+					variations: [{ weight: "400", italic: false, src: "https://cdn.example.com/font.woff2" }],
+				},
+			],
+		});
+
+		expect(result.family).toBe("CustomFont");
+		expect(result.styleSheet).toContain("@font-face");
+		expect(result.styleSheet).toContain("font-family: 'CustomFont'");
+		expect(result.styleSheet).toContain("font-weight: 400");
+		expect(result.styleSheet).toContain("font-style: normal");
+		expect(result.styleSheet).toContain("format('woff2')");
+	});
+
+	it("generates italic font-face", () => {
+		const result = localFonts({
+			fonts: [
+				{
+					family: "CustomFont",
+					variations: [
+						{ weight: "700", italic: true, src: "https://cdn.example.com/font-bold-italic.woff2" },
+					],
+				},
+			],
+		});
+
+		expect(result.styleSheet).toContain("font-style: italic");
+		expect(result.styleSheet).toContain("font-weight: 700");
+	});
+
+	it("merges duplicate font families", () => {
+		const result = localFonts({
+			fonts: [
+				{
+					family: "Inter",
+					variations: [{ weight: "400", src: "https://cdn.example.com/inter-400.woff2" }],
+				},
+				{
+					family: "Inter",
+					variations: [{ weight: "700", src: "https://cdn.example.com/inter-700.woff2" }],
+				},
+			],
+		});
+
+		expect(result.family).toBe("Inter");
+		expect(result.styleSheet).toContain("font-weight: 400");
+		expect(result.styleSheet).toContain("font-weight: 700");
+	});
+
+	it("detects font format from extension", () => {
+		const ttfResult = localFonts({
+			fonts: [{ family: "F", variations: [{ weight: "400", src: "https://x.com/f.ttf" }] }],
+		});
+		expect(ttfResult.styleSheet).toContain("format('truetype')");
+
+		const woffResult = localFonts({
+			fonts: [{ family: "F", variations: [{ weight: "400", src: "https://x.com/f.woff" }] }],
+		});
+		expect(woffResult.styleSheet).toContain("format('woff')");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// loaders/fonts/googleFonts.ts
+// ---------------------------------------------------------------------------
+
+describe("googleFonts", () => {
+	let fetchSpy: ReturnType<typeof vi.fn>;
+
+	beforeEach(() => {
+		fetchSpy = vi.fn();
+		vi.stubGlobal("fetch", fetchSpy);
+	});
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("returns empty font for no fonts", async () => {
+		const result = await googleFonts({ fonts: [] });
+		expect(result.family).toBe("");
+		expect(result.styleSheet).toBe("");
+		expect(fetchSpy).not.toHaveBeenCalled();
+	});
+
+	it("fetches Google Fonts CSS with two User-Agents", async () => {
+		fetchSpy.mockResolvedValue({ text: () => Promise.resolve("/* css */") });
+
+		const result = await googleFonts({
+			fonts: [{ family: "Inter", variations: [{ weight: "400" }] }],
+		});
+
+		expect(fetchSpy).toHaveBeenCalledTimes(2);
+		expect(result.family).toBe("Inter");
+		expect(result.styleSheet).toContain("/* css */");
+	});
+
+	it("handles fetch errors gracefully", async () => {
+		fetchSpy.mockRejectedValue(new Error("Network error"));
+
+		const result = await googleFonts({
+			fonts: [{ family: "Roboto", variations: [{ weight: "400" }] }],
+		});
+
+		expect(result.family).toBe("Roboto");
+		expect(result.styleSheet).toBe("\n");
+	});
+
+	it("merges duplicate font families", async () => {
+		fetchSpy.mockResolvedValue({ text: () => Promise.resolve("") });
+
+		await googleFonts({
+			fonts: [
+				{ family: "Inter", variations: [{ weight: "400" }] },
+				{ family: "Inter", variations: [{ weight: "700" }] },
+			],
+		});
+
+		// Should only have one "family" param for "Inter" with merged variations
+		const calledUrl = fetchSpy.mock.calls[0][0] as URL;
+		const families = calledUrl.searchParams.getAll("family");
+		expect(families).toHaveLength(1);
+		expect(families[0]).toContain("Inter");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// loaders/secret.ts
+// ---------------------------------------------------------------------------
+
+describe("SecretLoader", () => {
+	it("reads from process.env when name is set", () => {
+		process.env.MY_SECRET = "super-secret";
+		const result = SecretLoader({ encrypted: "xxx", name: "MY_SECRET" });
+		expect(result.get()).toBe("super-secret");
+		delete process.env.MY_SECRET;
+	});
+
+	it("returns null when encrypted is empty", () => {
+		const result = SecretLoader({ encrypted: "" });
+		expect(result.get()).toBeNull();
+	});
+
+	it("returns encrypted value as fallback in dev", () => {
+		const original = process.env.NODE_ENV;
+		process.env.NODE_ENV = "test";
+		const result = SecretLoader({ encrypted: "encrypted-value", name: "NONEXISTENT" });
+		expect(result.get()).toBe("encrypted-value");
+		process.env.NODE_ENV = original;
+	});
+
+	it("reads empty-string env var correctly", () => {
+		process.env.EMPTY_SECRET = "";
+		const result = SecretLoader({ encrypted: "fallback", name: "EMPTY_SECRET" });
+		expect(result.get()).toBe("");
+		delete process.env.EMPTY_SECRET;
+	});
+});
+
+// ---------------------------------------------------------------------------
+// loaders/environment.ts
+// ---------------------------------------------------------------------------
+
+describe("EnvironmentLoader", () => {
+	it("reads from process.env when name is set", () => {
+		process.env.MY_ENV_VAR = "hello";
+		const result = EnvironmentLoader({ value: "fallback", name: "MY_ENV_VAR" });
+		expect(result.get()).toBe("hello");
+		delete process.env.MY_ENV_VAR;
+	});
+
+	it("returns value when env var is not set", () => {
+		const result = EnvironmentLoader({ value: "fallback", name: "NONEXISTENT_VAR" });
+		expect(result.get()).toBe("fallback");
+	});
+
+	it("returns null when value is empty", () => {
+		const result = EnvironmentLoader({ value: "" });
+		expect(result.get()).toBeNull();
+	});
+});
diff --git a/website/__tests__/matchers.test.ts b/website/__tests__/matchers.test.ts
new file mode 100644
index 0000000..54315ec
--- /dev/null
+++ b/website/__tests__/matchers.test.ts
@@ -0,0 +1,495 @@
+import { describe, expect, it } from "vitest";
+import MatchAlways from "../matchers/always";
+import MatchCookie from "../matchers/cookie";
+import MatchCron from "../matchers/cron";
+import MatchDate from "../matchers/date";
+import MatchDevice from "../matchers/device";
+import MatchEnvironment from "../matchers/environment";
+import MatchHost from "../matchers/host";
+import MatchLocation from "../matchers/location";
+import MatchMulti from "../matchers/multi";
+import NegateMatcher from "../matchers/negate";
+import MatchNever from "../matchers/never";
+import MatchPathname from "../matchers/pathname";
+import MatchQueryString from "../matchers/queryString";
+import MatchRandom from "../matchers/random";
+import MatchSite from "../matchers/site";
+import MatchUserAgent from "../matchers/userAgent";
+import type { MatchContext } from "../types";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const makeCtx = (
+	overrides: Partial<MatchContext> & { url?: string; headers?: Record<string, string> } = {},
+): MatchContext => {
+	const { url = "https://example.com/", headers = {}, ...rest } = overrides;
+	return {
+		request: new Request(url, { headers }),
+		device: "desktop",
+		siteId: 1,
+		...rest,
+	};
+};
+
+// ---------------------------------------------------------------------------
+// always / never
+// ---------------------------------------------------------------------------
+
+describe("MatchAlways", () => {
+	it("always returns true", () => {
+		expect(MatchAlways()).toBe(true);
+	});
+});
+
+describe("MatchNever", () => {
+	it("always returns false", () => {
+		expect(MatchNever()).toBe(false);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// cookie
+// ---------------------------------------------------------------------------
+
+describe("MatchCookie", () => {
+	it("matches when cookie value equals", () => {
+		const ctx = makeCtx({ headers: { cookie: "theme=dark; lang=en" } });
+		expect(MatchCookie({ name: "theme", value: "dark" }, ctx)).toBe(true);
+	});
+
+	it("does not match when cookie value differs", () => {
+		const ctx = makeCtx({ headers: { cookie: "theme=light" } });
+		expect(MatchCookie({ name: "theme", value: "dark" }, ctx)).toBe(false);
+	});
+
+	it("does not match when cookie is missing", () => {
+		const ctx = makeCtx({});
+		expect(MatchCookie({ name: "theme", value: "dark" }, ctx)).toBe(false);
+	});
+
+	it("handles cookie values with = sign", () => {
+		const ctx = makeCtx({ headers: { cookie: "token=abc=123" } });
+		expect(MatchCookie({ name: "token", value: "abc=123" }, ctx)).toBe(true);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// cron
+// ---------------------------------------------------------------------------
+
+describe("MatchCron", () => {
+	it("returns false for empty cron", () => {
+		expect(MatchCron({ cron: "" })).toBe(false);
+	});
+
+	it("matches wildcard cron (every minute)", () => {
+		expect(MatchCron({ cron: "* * * * *" })).toBe(true);
+	});
+
+	it("does not match impossible cron (Feb 30)", () => {
+		// minute 99 doesn't exist
+		expect(MatchCron({ cron: "99 99 30 2 *" })).toBe(false);
+	});
+
+	it("treats weekday 7 as Sunday (alias for 0)", () => {
+		const now = new Date();
+		const isSunday = now.getDay() === 0;
+		// Weekday 7 is a common cron alias for Sunday
+		const result = MatchCron({ cron: `* * * * 7` });
+		expect(result).toBe(isSunday);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// date
+// ---------------------------------------------------------------------------
+
+describe("MatchDate", () => {
+	it("matches when now is within range", () => {
+		const past = new Date(Date.now() - 86400000).toISOString();
+		const future = new Date(Date.now() + 86400000).toISOString();
+		expect(MatchDate({ start: past, end: future })).toBe(true);
+	});
+
+	it("does not match when now is before start", () => {
+		const future = new Date(Date.now() + 86400000).toISOString();
+		expect(MatchDate({ start: future })).toBe(false);
+	});
+
+	it("does not match when now is after end", () => {
+		const past = new Date(Date.now() - 86400000).toISOString();
+		expect(MatchDate({ end: past })).toBe(false);
+	});
+
+	it("matches when no bounds specified", () => {
+		expect(MatchDate({})).toBe(true);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// device
+// ---------------------------------------------------------------------------
+
+describe("MatchDevice", () => {
+	it("matches desktop", () => {
+		expect(MatchDevice({ desktop: true }, makeCtx({ device: "desktop" }))).toBe(true);
+	});
+
+	it("matches mobile", () => {
+		expect(MatchDevice({ mobile: true }, makeCtx({ device: "mobile" }))).toBe(true);
+	});
+
+	it("does not match wrong device", () => {
+		expect(MatchDevice({ mobile: true }, makeCtx({ device: "desktop" }))).toBe(false);
+	});
+
+	it("matches multiple devices", () => {
+		expect(MatchDevice({ mobile: true, tablet: true }, makeCtx({ device: "tablet" }))).toBe(true);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// environment
+// ---------------------------------------------------------------------------
+
+describe("MatchEnvironment", () => {
+	it("matches production when NODE_ENV is production", () => {
+		const original = process.env.NODE_ENV;
+		process.env.NODE_ENV = "production";
+		expect(MatchEnvironment({ environment: "production" })).toBe(true);
+		expect(MatchEnvironment({ environment: "development" })).toBe(false);
+		process.env.NODE_ENV = original;
+	});
+
+	it("matches development when NODE_ENV is not production", () => {
+		const original = process.env.NODE_ENV;
+		process.env.NODE_ENV = "test";
+		expect(MatchEnvironment({ environment: "development" })).toBe(true);
+		expect(MatchEnvironment({ environment: "production" })).toBe(false);
+		process.env.NODE_ENV = original;
+	});
+});
+
+// ---------------------------------------------------------------------------
+// host
+// ---------------------------------------------------------------------------
+
+describe("MatchHost", () => {
+	it("matches host by includes", () => {
+		const ctx = makeCtx({ headers: { host: "www.example.com" } });
+		expect(MatchHost({ includes: "example" }, ctx)).toBe(true);
+	});
+
+	it("does not match when host does not include", () => {
+		const ctx = makeCtx({ headers: { host: "www.other.com" } });
+		expect(MatchHost({ includes: "example" }, ctx)).toBe(false);
+	});
+
+	it("matches host by regex", () => {
+		const ctx = makeCtx({ headers: { host: "store.example.com" } });
+		expect(MatchHost({ match: "^store\\." }, ctx)).toBe(true);
+	});
+
+	it("does not match when regex fails", () => {
+		const ctx = makeCtx({ headers: { host: "www.example.com" } });
+		expect(MatchHost({ match: "^store\\." }, ctx)).toBe(false);
+	});
+
+	it("matches when both includes and match pass", () => {
+		const ctx = makeCtx({ headers: { host: "store.example.com" } });
+		expect(MatchHost({ includes: "example", match: "^store" }, ctx)).toBe(true);
+	});
+
+	it("returns true when no conditions specified", () => {
+		const ctx = makeCtx({ headers: { host: "anything.com" } });
+		expect(MatchHost({}, ctx)).toBe(true);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// location
+// ---------------------------------------------------------------------------
+
+describe("MatchLocation", () => {
+	it("matches by country", () => {
+		const ctx = makeCtx({ headers: { "cf-ipcountry": "BR" } });
+		expect(MatchLocation({ includeLocations: [{ country: "BR" }] }, ctx)).toBe(true);
+	});
+
+	it("does not match wrong country", () => {
+		const ctx = makeCtx({ headers: { "cf-ipcountry": "US" } });
+		expect(MatchLocation({ includeLocations: [{ country: "BR" }] }, ctx)).toBe(false);
+	});
+
+	it("excludes matching location", () => {
+		const ctx = makeCtx({ headers: { "cf-ipcountry": "BR" } });
+		expect(MatchLocation({ excludeLocations: [{ country: "BR" }] }, ctx)).toBe(false);
+	});
+
+	it("matches by city", () => {
+		const ctx = makeCtx({ headers: { "cf-ipcity": "Sao Paulo", "cf-ipcountry": "BR" } });
+		expect(MatchLocation({ includeLocations: [{ city: "Sao Paulo" }] }, ctx)).toBe(true);
+	});
+
+	it("returns true when includeLocations is empty", () => {
+		const ctx = makeCtx({});
+		expect(MatchLocation({ includeLocations: [] }, ctx)).toBe(true);
+	});
+
+	it("returns true when no locations specified", () => {
+		const ctx = makeCtx({});
+		expect(MatchLocation({}, ctx)).toBe(true);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// multi
+// ---------------------------------------------------------------------------
+
+describe("MatchMulti", () => {
+	const trueM: MatchContext["request"] extends any ? () => boolean : never = () => true;
+	const falseM = () => false;
+
+	it("OR: true if any matcher matches", () => {
+		const matcher = MatchMulti({ op: "or", matchers: [falseM, trueM] });
+		expect(matcher(makeCtx())).toBe(true);
+	});
+
+	it("OR: false if no matcher matches", () => {
+		const matcher = MatchMulti({ op: "or", matchers: [falseM, falseM] });
+		expect(matcher(makeCtx())).toBe(false);
+	});
+
+	it("AND: true if all matchers match", () => {
+		const matcher = MatchMulti({ op: "and", matchers: [trueM, trueM] });
+		expect(matcher(makeCtx())).toBe(true);
+	});
+
+	it("AND: false if any matcher fails", () => {
+		const matcher = MatchMulti({ op: "and", matchers: [trueM, falseM] });
+		expect(matcher(makeCtx())).toBe(false);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// negate
+// ---------------------------------------------------------------------------
+
+describe("NegateMatcher", () => {
+	it("negates a true matcher", () => {
+		const matcher = NegateMatcher({ matcher: () => true });
+		expect(matcher(makeCtx())).toBe(false);
+	});
+
+	it("negates a false matcher", () => {
+		const matcher = NegateMatcher({ matcher: () => false });
+		expect(matcher(makeCtx())).toBe(true);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// pathname
+// ---------------------------------------------------------------------------
+
+describe("MatchPathname", () => {
+	it("matches exact pathname (Equals)", () => {
+		const ctx = makeCtx({ url: "https://example.com/about" });
+		expect(MatchPathname({ case: { type: "Equals", pathname: "/about" } }, ctx)).toBe(true);
+	});
+
+	it("does not match different pathname (Equals)", () => {
+		const ctx = makeCtx({ url: "https://example.com/contact" });
+		expect(MatchPathname({ case: { type: "Equals", pathname: "/about" } }, ctx)).toBe(false);
+	});
+
+	it("matches substring (Includes)", () => {
+		const ctx = makeCtx({ url: "https://example.com/products/shoes" });
+		expect(MatchPathname({ case: { type: "Includes", pathname: "/products" } }, ctx)).toBe(true);
+	});
+
+	it("matches template pattern (Template)", () => {
+		const ctx = makeCtx({ url: "https://example.com/product/my-shoe/p" });
+		expect(MatchPathname({ case: { type: "Template", pathname: "/product/:slug/p" } }, ctx)).toBe(
+			true,
+		);
+	});
+
+	it("does not match template for wrong structure", () => {
+		const ctx = makeCtx({ url: "https://example.com/product/my-shoe/extra/p" });
+		expect(MatchPathname({ case: { type: "Template", pathname: "/product/:slug/p" } }, ctx)).toBe(
+			false,
+		);
+	});
+
+	it("negates the match when negate is true", () => {
+		const ctx = makeCtx({ url: "https://example.com/about" });
+		expect(MatchPathname({ case: { type: "Equals", pathname: "/about", negate: true } }, ctx)).toBe(
+			false,
+		);
+	});
+
+	it("returns false when pathname is empty", () => {
+		const ctx = makeCtx({ url: "https://example.com/about" });
+		expect(MatchPathname({ case: { type: "Equals" } }, ctx)).toBe(false);
+	});
+
+	it("escapes regex metacharacters in template (dots)", () => {
+		const ctx = makeCtx({ url: "https://example.com/api.v2/users" });
+		expect(MatchPathname({ case: { type: "Template", pathname: "/api.v2/:resource" } }, ctx)).toBe(
+			true,
+		);
+		// Dot should NOT match arbitrary character
+		const ctx2 = makeCtx({ url: "https://example.com/apiXv2/users" });
+		expect(MatchPathname({ case: { type: "Template", pathname: "/api.v2/:resource" } }, ctx2)).toBe(
+			false,
+		);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// queryString
+// ---------------------------------------------------------------------------
+
+describe("MatchQueryString", () => {
+	it("matches Equals condition", () => {
+		const ctx = makeCtx({ url: "https://example.com/?color=red" });
+		expect(
+			MatchQueryString(
+				{ conditions: [{ param: "color", case: { type: "Equals", value: "red" } }] },
+				ctx,
+			),
+		).toBe(true);
+	});
+
+	it("does not match Equals with different value", () => {
+		const ctx = makeCtx({ url: "https://example.com/?color=blue" });
+		expect(
+			MatchQueryString(
+				{ conditions: [{ param: "color", case: { type: "Equals", value: "red" } }] },
+				ctx,
+			),
+		).toBe(false);
+	});
+
+	it("matches Exists condition", () => {
+		const ctx = makeCtx({ url: "https://example.com/?color=red" });
+		expect(
+			MatchQueryString({ conditions: [{ param: "color", case: { type: "Exists" } }] }, ctx),
+		).toBe(true);
+	});
+
+	it("fails Exists when param is missing", () => {
+		const ctx = makeCtx({ url: "https://example.com/" });
+		expect(
+			MatchQueryString({ conditions: [{ param: "color", case: { type: "Exists" } }] }, ctx),
+		).toBe(false);
+	});
+
+	it("matches Includes condition", () => {
+		const ctx = makeCtx({ url: "https://example.com/?name=typescript" });
+		expect(
+			MatchQueryString(
+				{ conditions: [{ param: "name", case: { type: "Includes", value: "script" } }] },
+				ctx,
+			),
+		).toBe(true);
+	});
+
+	it("all conditions must match (AND)", () => {
+		const ctx = makeCtx({ url: "https://example.com/?a=1&b=2" });
+		expect(
+			MatchQueryString(
+				{
+					conditions: [
+						{ param: "a", case: { type: "Equals", value: "1" } },
+						{ param: "b", case: { type: "Equals", value: "2" } },
+					],
+				},
+				ctx,
+			),
+		).toBe(true);
+
+		expect(
+			MatchQueryString(
+				{
+					conditions: [
+						{ param: "a", case: { type: "Equals", value: "1" } },
+						{ param: "b", case: { type: "Equals", value: "3" } },
+					],
+				},
+				ctx,
+			),
+		).toBe(false);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// random
+// ---------------------------------------------------------------------------
+
+describe("MatchRandom", () => {
+	it("always matches with traffic = 1", () => {
+		// traffic = 1 means 100% probability
+		let allTrue = true;
+		for (let i = 0; i < 100; i++) {
+			if (!MatchRandom({ traffic: 1 })) {
+				allTrue = false;
+				break;
+			}
+		}
+		expect(allTrue).toBe(true);
+	});
+
+	it("never matches with traffic = 0", () => {
+		let anyTrue = false;
+		for (let i = 0; i < 100; i++) {
+			if (MatchRandom({ traffic: 0 })) {
+				anyTrue = true;
+				break;
+			}
+		}
+		expect(anyTrue).toBe(false);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// site
+// ---------------------------------------------------------------------------
+
+describe("MatchSite", () => {
+	it("matches when siteId equals", () => {
+		expect(MatchSite({ siteId: 42 }, makeCtx({ siteId: 42 }))).toBe(true);
+	});
+
+	it("does not match when siteId differs", () => {
+		expect(MatchSite({ siteId: 42 }, makeCtx({ siteId: 99 }))).toBe(false);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// userAgent
+// ---------------------------------------------------------------------------
+
+describe("MatchUserAgent", () => {
+	it("matches by includes", () => {
+		const ctx = makeCtx({ headers: { "user-agent": "Mozilla/5.0 Chrome/120" } });
+		expect(MatchUserAgent({ includes: "Chrome" }, ctx)).toBe(true);
+	});
+
+	it("does not match when UA does not include", () => {
+		const ctx = makeCtx({ headers: { "user-agent": "Mozilla/5.0 Firefox/120" } });
+		expect(MatchUserAgent({ includes: "Chrome" }, ctx)).toBe(false);
+	});
+
+	it("matches by regex", () => {
+		const ctx = makeCtx({ headers: { "user-agent": "Googlebot/2.1" } });
+		expect(MatchUserAgent({ match: "Googlebot" }, ctx)).toBe(true);
+	});
+
+	it("returns true when no conditions specified", () => {
+		const ctx = makeCtx({ headers: { "user-agent": "anything" } });
+		expect(MatchUserAgent({}, ctx)).toBe(true);
+	});
+});
diff --git a/website/__tests__/mod.test.ts b/website/__tests__/mod.test.ts
new file mode 100644
index 0000000..7d932c3
--- /dev/null
+++ b/website/__tests__/mod.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { getWebsiteConfig } from "../client";
+import { configure } from "../mod";
+
+describe("configure", () => {
+	const mockResolveSecret = async () => null;
+
+	it("returns an AppDefinition with name website", async () => {
+		const result = await configure({}, mockResolveSecret);
+
+		expect(result).not.toBeNull();
+		expect(result.name).toBe("website");
+		expect(result.manifest).toBeDefined();
+		expect(result.state.config).toBeDefined();
+	});
+
+	it("passes SEO config from block data", async () => {
+		const seo = { title: "My Site", description: "A great site" };
+		const result = await configure({ seo }, mockResolveSecret);
+
+		expect(result.state.config.seo).toEqual(seo);
+	});
+
+	it("configures the global singleton", async () => {
+		const seo = { title: "Singleton Test" };
+		await configure({ seo }, mockResolveSecret);
+
+		const config = getWebsiteConfig();
+		expect(config.seo).toEqual(seo);
+	});
+
+	it("works with null/undefined block", async () => {
+		const result = await configure(null, mockResolveSecret);
+
+		expect(result.name).toBe("website");
+		expect(result.state.config.seo).toBeUndefined();
+	});
+
+	it("manifest has loaders and sections", async () => {
+		const result = await configure({}, mockResolveSecret);
+
+		expect(Object.keys(result.manifest.loaders).length).toBeGreaterThan(0);
+		expect(Object.keys(result.manifest.sections ?? {}).length).toBeGreaterThan(0);
+	});
+});
diff --git a/website/__tests__/utils.test.ts b/website/__tests__/utils.test.ts
new file mode 100644
index 0000000..259f505
--- /dev/null
+++ b/website/__tests__/utils.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { stripHTML } from "../utils/html";
+import { haversine, toRadians } from "../utils/location";
+
+// ---------------------------------------------------------------------------
+// html.ts
+// ---------------------------------------------------------------------------
+
+describe("stripHTML", () => {
+	it("strips HTML tags from string", () => {
+		expect(stripHTML("<p>Hello <strong>World</strong></p>")).toBe("Hello World");
+	});
+
+	it("returns plain text unchanged", () => {
+		expect(stripHTML("no tags here")).toBe("no tags here");
+	});
+
+	it("handles empty string", () => {
+		expect(stripHTML("")).toBe("");
+	});
+
+	it("strips self-closing tags", () => {
+		expect(stripHTML("Hello<br/>World")).toBe("HelloWorld");
+	});
+
+	it("strips nested tags", () => {
+		expect(stripHTML("<div><p><span>text</span></p></div>")).toBe("text");
+	});
+});
+
+// ---------------------------------------------------------------------------
+// location.ts
+// ---------------------------------------------------------------------------
+
+describe("toRadians", () => {
+	it("converts 0 degrees to 0 radians", () => {
+		expect(toRadians(0)).toBe(0);
+	});
+
+	it("converts 180 degrees to PI radians", () => {
+		expect(toRadians(180)).toBeCloseTo(Math.PI);
+	});
+
+	it("converts 90 degrees to PI/2 radians", () => {
+		expect(toRadians(90)).toBeCloseTo(Math.PI / 2);
+	});
+});
+
+describe("haversine", () => {
+	it("returns 0 for same coordinates", () => {
+		expect(haversine("-23.5505,-46.6333", "-23.5505,-46.6333")).toBeCloseTo(0, 0);
+	});
+
+	it("calculates distance between São Paulo and Rio (~360km)", () => {
+		const sp = "-23.5505,-46.6333";
+		const rj = "-22.9068,-43.1729";
+		const distance = haversine(sp, rj);
+		// ~360km
+		expect(distance).toBeGreaterThan(350000);
+		expect(distance).toBeLessThan(380000);
+	});
+
+	it("calculates distance between New York and London (~5570km)", () => {
+		const ny = "40.7128,-74.0060";
+		const london = "51.5074,-0.1278";
+		const distance = haversine(ny, london);
+		// ~5570km
+		expect(distance).toBeGreaterThan(5500000);
+		expect(distance).toBeLessThan(5700000);
+	});
+});
diff --git a/website/client.ts b/website/client.ts
new file mode 100644
index 0000000..312fa0e
--- /dev/null
+++ b/website/client.ts
@@ -0,0 +1,20 @@
+/**
+ * Website app singleton configuration.
+ *
+ * Follows the same pattern as vtex/client.ts and resend/client.ts.
+ */
+
+import type { WebsiteConfig } from "./types";
+
+let _config: WebsiteConfig | null = null;
+
+export function configureWebsite(config: WebsiteConfig): void {
+	_config = config;
+}
+
+export function getWebsiteConfig(): WebsiteConfig {
+	if (!_config) {
+		throw new Error("Website app not configured. Call configureWebsite() first.");
+	}
+	return _config;
+}
diff --git a/website/components/Analytics.tsx b/website/components/Analytics.tsx
new file mode 100644
index 0000000..54f64b3
--- /dev/null
+++ b/website/components/Analytics.tsx
@@ -0,0 +1,146 @@
+declare global {
+	interface Window {
+		dataLayer: unknown[];
+		DECO: { events: { subscribe: (fn: (event: any) => void) => void } };
+	}
+}
+
+export const getGTMIdFromSrc = (src: string | undefined) => {
+	if (!src) return undefined;
+	try {
+		return new URL(src).searchParams.get("id") ?? undefined;
+	} catch {
+		return undefined;
+	}
+};
+
+interface TagManagerProps {
+	trackingId: string;
+	src?: string;
+}
+
+export function GoogleTagManager(props: TagManagerProps) {
+	const _isOnPremises = !!props.src;
+	const hasTrackingId = "trackingId" in props;
+	const id = _isOnPremises ? props.src : props.trackingId;
+	const hostname = _isOnPremises ? props.src : "https://www.googletagmanager.com";
+	const src = new URL(`/gtm.js?id=${hasTrackingId ? props.trackingId : ""}`, hostname);
+	const noscript = new URL(`/ns.html?id=${hasTrackingId ? props.trackingId : ""}`, hostname);
+
+	return (
+		<>
+			<script
+				id={`gtm-script-${id}`}
+				dangerouslySetInnerHTML={{
+					__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s);j.async=true;j.src=i;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer', '${src.href}');`,
+				}}
+			/>
+			<noscript>
+				<iframe
+					title="Google Tag Manager"
+					src={noscript.href}
+					height="0"
+					width="0"
+					style={{ display: "none", visibility: "hidden" }}
+				/>
+			</noscript>
+		</>
+	);
+}
+
+export function GTAG({ trackingId }: Pick<TagManagerProps, "trackingId">) {
+	const safeId = trackingId.replace(/[^a-zA-Z0-9_-]/g, "");
+	return (
+		<>
+			<script async src={`https://www.googletagmanager.com/gtag/js?id=${safeId}`} />
+			<script
+				dangerouslySetInnerHTML={{
+					__html: `window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag("js", new Date());
+gtag("config", '${safeId}');`,
+				}}
+			/>
+		</>
+	);
+}
+
+/**
+ * DataLayer event forwarding snippet.
+ * Subscribes to DECO events and pushes them to the GTM dataLayer.
+ */
+const snippetCode = `
+(function() {
+  if (typeof globalThis.window !== "undefined" && globalThis.window.DECO && globalThis.window.DECO.events) {
+    globalThis.window.DECO.events.subscribe(function(event) {
+      globalThis.window.dataLayer = globalThis.window.dataLayer || [];
+      if (!event || !globalThis.window.dataLayer || typeof globalThis.window.dataLayer.push !== "function") {
+        return;
+      }
+      if (event.name === "deco") {
+        globalThis.window.dataLayer.push({ event: event.name, deco: event.params });
+        return;
+      }
+      globalThis.window.dataLayer.push({ ecommerce: null });
+      globalThis.window.dataLayer.push({ event: event.name, ecommerce: event.params });
+    });
+  }
+})();
+`;
+
+export interface Props {
+	/**
+	 * @description google tag manager container id. For more info: https://developers.google.com/tag-platform/tag-manager/web#standard_web_page_installation .
+	 */
+	trackingIds?: string[];
+	/**
+	 * @title GA Measurement Ids
+	 * @label measurement id
+	 * @description the google analytics property measurement id. For more info: https://support.google.com/analytics/answer/9539598
+	 */
+	googleAnalyticsIds?: string[];
+	/**
+	 * @description custom url for serving google tag manager.
+	 */
+	src?: string;
+	/**
+	 * @description Disable forwarding events into dataLayer
+	 */
+	disableAutomaticEventPush?: boolean;
+}
+
+export default function Analytics({
+	trackingIds,
+	src,
+	googleAnalyticsIds,
+	disableAutomaticEventPush,
+}: Props) {
+	const isDeploy = process.env.NODE_ENV === "production";
+	// Backwards compat: extract GTM ID from src URL
+	const trackingId = getGTMIdFromSrc(src) ?? "";
+
+	return (
+		<>
+			{isDeploy && (
+				<>
+					{trackingIds?.map((id) => (
+						<GoogleTagManager key={id} src={src} trackingId={id.trim()} />
+					))}
+					{googleAnalyticsIds?.map((id) => (
+						<GTAG key={id} trackingId={id.trim()} />
+					))}
+					{src && !trackingIds?.length && <GoogleTagManager src={src} trackingId={trackingId} />}
+				</>
+			)}
+
+			{disableAutomaticEventPush !== true && (
+				<script defer id="analytics-script" dangerouslySetInnerHTML={{ __html: snippetCode }} />
+			)}
+		</>
+	);
+}
diff --git a/website/components/Seo.tsx b/website/components/Seo.tsx
new file mode 100644
index 0000000..50d8c51
--- /dev/null
+++ b/website/components/Seo.tsx
@@ -0,0 +1,139 @@
+import type { ImageWidget, OGType } from "../types";
+import { stripHTML } from "../utils/html";
+
+export const renderTemplateString = (template: string, value: string) =>
+	template.replace("%s", value);
+
+export type SEOSection = React.JSX.Element;
+
+export interface Props {
+	title?: string;
+	/**
+	 * @title Title template
+	 * @description add a %s whenever you want it to be replaced with the product name, category name or search term
+	 * @default %s
+	 */
+	titleTemplate?: string;
+	description?: string;
+	/**
+	 * @title Description template
+	 * @description add a %s whenever you want it to be replaced with the product name, category name or search term
+	 * @default %s
+	 */
+	descriptionTemplate?: string;
+	/** @default website */
+	type?: OGType;
+	/** @description Recommended: 1200 x 630 px (up to 5MB) */
+	image?: ImageWidget;
+	/** @description Recommended: 16 x 16 px */
+	favicon?: ImageWidget;
+	/** @description Suggested color that browsers should use to customize the display of the page or of the surrounding user interface */
+	themeColor?: string;
+	/** @title Canonical URL */
+	canonical?: string;
+	/**
+	 * @title Disable indexing
+	 * @description In testing, you can use this to prevent search engines from indexing your site
+	 */
+	noIndexing?: boolean;
+
+	/** @title Open Graph Config */
+	openGraphConfig?: {
+		title?: string;
+		description?: string;
+		image?: ImageWidget;
+		url?: string;
+	};
+
+	/** @title Twitter Config */
+	twitterConfig?: {
+		title?: string;
+		description?: string;
+		image?: ImageWidget;
+	};
+
+	jsonLDs?: unknown[];
+}
+
+/**
+ * SEO component — renders meta tags that React 19 / TanStack Start
+ * automatically hoists into <head>.
+ */
+function Seo({
+	title: t = "",
+	titleTemplate = "%s",
+	description: desc,
+	descriptionTemplate = "%s",
+	type,
+	image,
+	favicon,
+	themeColor,
+	canonical,
+	noIndexing,
+	openGraphConfig,
+	twitterConfig,
+	jsonLDs = [],
+}: Props) {
+	const twitterCard = type === "website" ? "summary" : "summary_large_image";
+
+	const title = stripHTML(t);
+	const description = stripHTML(desc || "");
+
+	const twitterImage = twitterConfig?.image ?? image;
+	const twitterTitle = twitterConfig?.title ? stripHTML(twitterConfig.title) : title;
+	const twitterDescription = twitterConfig?.description
+		? stripHTML(twitterConfig.description)
+		: description;
+
+	const openGraphImage = openGraphConfig?.image ?? image;
+	const openGraphTitle = openGraphConfig?.title ? stripHTML(openGraphConfig.title) : title;
+	const openGraphDescription = openGraphConfig?.description
+		? stripHTML(openGraphConfig.description)
+		: description;
+
+	return (
+		<>
+			<title>{renderTemplateString(titleTemplate, title)}</title>
+			<meta name="description" content={renderTemplateString(descriptionTemplate, description)} />
+			<meta name="theme-color" content={themeColor} />
+			<link rel="icon" href={favicon} />
+
+			{/* Twitter tags */}
+			<meta property="twitter:title" content={twitterTitle} />
+			<meta property="twitter:description" content={twitterDescription} />
+			<meta property="twitter:image" content={twitterImage} />
+			<meta property="twitter:card" content={twitterCard} />
+
+			{/* OpenGraph tags */}
+			<meta property="og:title" content={openGraphTitle} />
+			<meta property="og:description" content={openGraphDescription} />
+			<meta property="og:type" content={type} />
+			<meta property="og:image" content={openGraphImage} />
+			{Boolean(openGraphConfig?.url || canonical) && (
+				<meta property="og:url" content={openGraphConfig?.url ?? canonical} />
+			)}
+
+			{/* Link tags */}
+			{canonical && <link rel="canonical" href={canonical} />}
+
+			{/* No index, no follow */}
+			{noIndexing && <meta name="robots" content="noindex, nofollow" />}
+			{!noIndexing && <meta name="robots" content="index, follow" />}
+
+			{jsonLDs.map((json, idx) => (
+				<script
+					key={idx}
+					type="application/ld+json"
+					dangerouslySetInnerHTML={{
+						__html: JSON.stringify({
+							"@context": "https://schema.org",
+							...(json as Record<string, unknown>),
+						}),
+					}}
+				/>
+			))}
+		</>
+	);
+}
+
+export default Seo;
diff --git a/website/components/Theme.tsx b/website/components/Theme.tsx
new file mode 100644
index 0000000..3e658a4
--- /dev/null
+++ b/website/components/Theme.tsx
@@ -0,0 +1,47 @@
+import { useId } from "react";
+import type { Font, Variable } from "../types";
+
+export interface Props {
+	variables?: Variable[];
+	fonts?: Font[];
+	colorScheme?: "light" | "dark";
+}
+
+const withPrefersColorScheme = (scheme: "light" | "dark", css: string) =>
+	`@media (prefers-color-scheme: ${scheme}) { ${css} }`;
+
+/**
+ * Theme component — injects CSS custom properties and font stylesheets.
+ * React 19 / TanStack Start automatically hoists <style> into <head>.
+ */
+function Theme({ fonts = [], variables = [], colorScheme }: Props) {
+	const id = useId();
+
+	const family = fonts.reduce((acc, { family }) => (acc ? `${acc}, ${family}` : family), "");
+
+	const vars = [{ name: "--font-family", value: family }, ...variables]
+		.map(({ name, value }) => `${name}: ${value}`)
+		.join(";");
+
+	const css = `* {${vars}}`;
+	const html = colorScheme ? withPrefersColorScheme(colorScheme, css) : css;
+
+	return (
+		<>
+			{fonts?.map(({ styleSheet }, idx) =>
+				styleSheet ? (
+					<style key={idx} type="text/css" dangerouslySetInnerHTML={{ __html: styleSheet }} />
+				) : null,
+			)}
+			{html && (
+				<style
+					type="text/css"
+					id={`__DESIGN_SYSTEM_VARS-${id}`}
+					dangerouslySetInnerHTML={{ __html: html }}
+				/>
+			)}
+		</>
+	);
+}
+
+export default Theme;
diff --git a/website/components/Video.tsx b/website/components/Video.tsx
new file mode 100644
index 0000000..5aa406c
--- /dev/null
+++ b/website/components/Video.tsx
@@ -0,0 +1,44 @@
+/**
+ * TODO: Implement video preload with link[rel="preload"] tags once
+ * browsers support it. More info at: https://stackoverflow.com/a/68368601
+ */
+import { forwardRef } from "react";
+
+import { getOptimizedMediaUrl } from "../../commerce/components/Image";
+
+export interface Props {
+	src: string;
+	/** @description Improves Web Vitals (CLS|LCP) */
+	width: number;
+	/** @description Improves Web Vitals (CLS|LCP) */
+	height: number;
+	/** @description Force video through the optimization engine */
+	forceOptimizedSrc?: boolean;
+	className?: string;
+	style?: React.CSSProperties;
+	autoPlay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	playsInline?: boolean;
+	controls?: boolean;
+	poster?: string;
+}
+
+const Video = forwardRef<HTMLVideoElement, Props>((props, ref) => {
+	const { forceOptimizedSrc, src: originalSrc, width, height, ...rest } = props;
+
+	const src = forceOptimizedSrc
+		? getOptimizedMediaUrl({
+				originalSrc,
+				width,
+				height,
+				fit: "cover",
+			})
+		: originalSrc;
+
+	return <video {...rest} preload={undefined} src={src} width={width} height={height} ref={ref} />;
+});
+
+Video.displayName = "Video";
+
+export default Video;
diff --git a/website/flags/audience.ts b/website/flags/audience.ts
new file mode 100644
index 0000000..841c8dd
--- /dev/null
+++ b/website/flags/audience.ts
@@ -0,0 +1,56 @@
+import type { FlagObj, Matcher } from "../types";
+import Flag from "./flag";
+
+/**
+ * @title Site Route
+ * @titleBy pathTemplate
+ */
+export interface Route {
+	pathTemplate: string;
+	/**
+	 * @description if true so the path will be checked against the coming from request instead of using urlpattern.
+	 */
+	isHref?: boolean;
+	handler: {
+		value: unknown;
+	};
+	/**
+	 * @title Priority
+	 * @description higher priority means that this route will be used in favor of other routes with less or none priority
+	 */
+	highPriority?: boolean;
+}
+
+/**
+ * @title Routes
+ * @description Used to configure your site routes
+ */
+export type Routes = Route[];
+
+/**
+ * @titleBy name
+ */
+export interface Audience {
+	matcher: Matcher;
+	/**
+	 * @title The audience name (will be used on cookies).
+	 * @description Add a meaningful short word for the audience name.
+	 * @minLength 3
+	 * @pattern ^[A-Za-z0-9_-]+$
+	 */
+	name: string;
+	routes?: Routes;
+}
+
+/**
+ * @title Audience
+ * @description Select routes based on the matched audience.
+ */
+export default function Audience({ matcher, routes, name }: Audience): FlagObj<Route[]> {
+	return Flag<Route[]>({
+		matcher,
+		true: routes ?? [],
+		false: [],
+		name,
+	});
+}
diff --git a/website/flags/everyone.ts b/website/flags/everyone.ts
new file mode 100644
index 0000000..553957c
--- /dev/null
+++ b/website/flags/everyone.ts
@@ -0,0 +1,19 @@
+import MatchAlways from "../matchers/always";
+import type { FlagObj } from "../types";
+import Audience, { type Route, type Routes } from "./audience";
+
+export interface EveryoneConfig {
+	routes?: Routes;
+}
+
+/**
+ * @title Audience Everyone
+ * @description Always match regardless of the current user
+ */
+export default function Everyone({ routes }: EveryoneConfig): FlagObj<Route[]> {
+	return Audience({
+		matcher: MatchAlways,
+		routes: routes ?? [],
+		name: "Everyone",
+	});
+}
diff --git a/website/flags/flag.ts b/website/flags/flag.ts
new file mode 100644
index 0000000..c33f394
--- /dev/null
+++ b/website/flags/flag.ts
@@ -0,0 +1,15 @@
+import type { FlagObj } from "../types";
+
+export type Props<T> = FlagObj<T>;
+
+/**
+ * @title Flag
+ */
+export default function Flag<T>({ matcher, name, true: T, false: F }: Props<T>): FlagObj<T> {
+	return {
+		matcher,
+		true: T,
+		false: F,
+		name,
+	};
+}
diff --git a/website/flags/multivariate.ts b/website/flags/multivariate.ts
new file mode 100644
index 0000000..7525bbd
--- /dev/null
+++ b/website/flags/multivariate.ts
@@ -0,0 +1 @@
+export { default } from "./multivariate/page";
diff --git a/website/flags/multivariate/image.ts b/website/flags/multivariate/image.ts
new file mode 100644
index 0000000..cad22af
--- /dev/null
+++ b/website/flags/multivariate/image.ts
@@ -0,0 +1,11 @@
+import type { ImageWidget, MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+/**
+ * @title Image Variants
+ */
+export default function Image(
+	props: MultivariateProps<ImageWidget>,
+): MultivariateFlag<ImageWidget> {
+	return multivariate(props);
+}
diff --git a/website/flags/multivariate/message.ts b/website/flags/multivariate/message.ts
new file mode 100644
index 0000000..069844f
--- /dev/null
+++ b/website/flags/multivariate/message.ts
@@ -0,0 +1,11 @@
+import type { MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+export type Message = string;
+
+/**
+ * @title Message Variants
+ */
+export default function Message(props: MultivariateProps<Message>): MultivariateFlag<Message> {
+	return multivariate(props);
+}
diff --git a/website/flags/multivariate/page.ts b/website/flags/multivariate/page.ts
new file mode 100644
index 0000000..d36724b
--- /dev/null
+++ b/website/flags/multivariate/page.ts
@@ -0,0 +1,16 @@
+import type { MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+/**
+ * Section type placeholder — the actual Section type is defined by the framework.
+ */
+type Section = unknown;
+
+/**
+ * @title Page Variants
+ */
+export default function PageVariants(
+	props: MultivariateProps<Section[]>,
+): MultivariateFlag<Section[]> {
+	return multivariate(props);
+}
diff --git a/website/flags/multivariate/section.ts b/website/flags/multivariate/section.ts
new file mode 100644
index 0000000..7ecaa43
--- /dev/null
+++ b/website/flags/multivariate/section.ts
@@ -0,0 +1,16 @@
+import type { MultivariateFlag } from "../../types";
+import multivariate, { type MultivariateProps } from "../../utils/multivariate";
+
+/**
+ * Section type placeholder — the actual Section type is defined by the framework.
+ */
+type Section = unknown;
+
+/**
+ * @title Section Variants
+ */
+export default function SectionVariants(
+	props: MultivariateProps<Section>,
+): MultivariateFlag<Section> {
+	return multivariate(props);
+}
diff --git a/website/index.ts b/website/index.ts
new file mode 100644
index 0000000..c5e7f84
--- /dev/null
+++ b/website/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Public API for the website app.
+ */
+
+export { configureWebsite, getWebsiteConfig } from "./client";
+// App
+export { configure } from "./mod";
+
+// Types
+export type {
+	FlagObj,
+	Font,
+	ImageWidget,
+	MatchContext,
+	Matcher,
+	MultivariateFlag,
+	OGType,
+	SeoConfig,
+	Variable,
+	Variant,
+	WebsiteConfig,
+} from "./types";
diff --git a/website/loaders/environment.ts b/website/loaders/environment.ts
new file mode 100644
index 0000000..69557e4
--- /dev/null
+++ b/website/loaders/environment.ts
@@ -0,0 +1,45 @@
+/**
+ * @title Environment
+ * @hideOption true
+ */
+export interface Environment {
+	/** @ignore */
+	get: () => string | null;
+}
+
+export interface Props {
+	/**
+	 * @title Environment Value
+	 */
+	value: string;
+	/**
+	 * @title Environment Name
+	 * @description Used in dev mode as a environment variable (should not contain spaces or special characters)
+	 * @pattern ^[a-zA-Z_][a-zA-Z0-9_]*$
+	 */
+	name?: string;
+}
+
+const getEnvironment = (props: Props): string | null => {
+	const name = props?.name;
+	if (name && process.env[name] !== undefined) {
+		return process.env[name]!;
+	}
+	const value = props?.value;
+	if (!value) {
+		return null;
+	}
+	return value;
+};
+
+/**
+ * @title Environment
+ */
+export default function EnvironmentLoader(props: Props): Environment {
+	const environmentValue = getEnvironment(props);
+	return {
+		get: (): string | null => {
+			return environmentValue;
+		},
+	};
+}
diff --git a/website/loaders/fonts/googleFonts.ts b/website/loaders/fonts/googleFonts.ts
new file mode 100644
index 0000000..bf13488
--- /dev/null
+++ b/website/loaders/fonts/googleFonts.ts
@@ -0,0 +1,119 @@
+import type { Font } from "../../types";
+
+interface Props {
+	fonts: GoogleFont[];
+}
+
+/**
+ * @title {{weight}} {{#italic}}Italic{{/italic}}{{^italic}}{{/italic}}
+ */
+interface FontVariation {
+	weight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+	italic?: boolean;
+}
+
+/** @titleBy family */
+interface GoogleFont {
+	family: string;
+	variations: FontVariation[];
+}
+
+const getFontVariations = (variations: FontVariation[]) => {
+	if (variations.length === 0) {
+		return "";
+	}
+
+	let hasItalic = false;
+	const sortedVariations = [...variations]
+		.sort((a, b) => {
+			a.italic ??= false;
+			b.italic ??= false;
+
+			if (a.italic !== b.italic) {
+				hasItalic = true;
+				if (a.italic) return 1;
+				if (!a.italic) return -1;
+			}
+
+			return Number.parseInt(a.weight, 10) - Number.parseInt(b.weight, 10);
+		})
+		.filter(
+			(item, index, self) =>
+				index === self.findIndex((t) => t.weight === item.weight && t.italic === item.italic),
+		);
+
+	const variants: string[] = [];
+
+	for (const { weight, italic } of sortedVariations) {
+		if (!hasItalic) {
+			variants.push(weight);
+			continue;
+		}
+		variants.push(`${italic ? "1," : "0,"}${weight}`);
+	}
+
+	return `:${hasItalic ? "ital," : ""}wght@${variants.join(";")}`;
+};
+
+const NEW_BROWSER_KEY = {
+	"User-Agent":
+		"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36",
+};
+
+const OLD_BROWSER_KEY = {
+	"User-Agent": "deco-cx/1.0",
+};
+
+const loader = async (props: Props): Promise<Font> => {
+	const { fonts = [] } = props;
+
+	if (fonts.length === 0) {
+		return { family: "", styleSheet: "" };
+	}
+
+	const url = new URL("https://fonts.googleapis.com/css2?display=swap");
+
+	const reduced = fonts.reduce(
+		(acc, font) => {
+			const { family, variations } = font;
+			acc[family] = acc[family] ?? { family, variations: [] };
+			acc[family].variations = [...acc[family].variations, ...variations];
+			return acc;
+		},
+		{} as Record<string, GoogleFont>,
+	);
+
+	for (const font of Object.values(reduced)) {
+		url.searchParams.append("family", `${font.family}${getFontVariations(font.variations)}`);
+	}
+
+	const logFontError = (label: string, fontUrl: URL, e: unknown) => {
+		const message = e instanceof Error ? e.message : String(e);
+		const short = message.length > 300 ? `${message.slice(0, 300)}…` : message;
+		console.error(`Error fetching font (${label}): ${fontUrl.toString()} - ${short}`);
+	};
+
+	const sheets = await Promise.all([
+		fetch(url, { headers: OLD_BROWSER_KEY })
+			.then((res) => res.text())
+			.catch((e) => {
+				logFontError("OLD_UA", url, e);
+				return "";
+			}),
+		fetch(url, { headers: NEW_BROWSER_KEY })
+			.then((res) => res.text())
+			.catch((e) => {
+				logFontError("NEW_UA", url, e);
+				return "";
+			}),
+	]);
+
+	const styleSheet = sheets.join("\n");
+
+	return {
+		family: Object.keys(reduced).join(", "),
+		styleSheet,
+	};
+};
+
+export default loader;
diff --git a/website/loaders/fonts/local.ts b/website/loaders/fonts/local.ts
new file mode 100644
index 0000000..f7d47d8
--- /dev/null
+++ b/website/loaders/fonts/local.ts
@@ -0,0 +1,85 @@
+import type { Font } from "../../types";
+
+interface Props {
+	fonts: LocalFont[];
+}
+
+/**
+ * @title {{weight}} {{#italic}}Italic{{/italic}}{{^italic}}{{/italic}}
+ */
+interface FontVariation {
+	weight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+	italic?: boolean;
+	/** @format file */
+	src: string;
+}
+
+const getFontFormat = (src: string): string => {
+	const clean = src.toLowerCase().split(/[?#]/, 1)[0];
+	const extension = clean.slice(clean.lastIndexOf(".") + 1);
+	switch (extension) {
+		case "woff2":
+			return "woff2";
+		case "woff":
+			return "woff";
+		case "ttf":
+			return "truetype";
+		case "otf":
+			return "opentype";
+		case "eot":
+			return "embedded-opentype";
+		case "svg":
+			return "svg";
+		default:
+			return "truetype";
+	}
+};
+
+/** @titleBy family */
+interface LocalFont {
+	family: string;
+	variations: FontVariation[];
+}
+
+const loader = (props: Props): Font => {
+	const { fonts = [] } = props;
+
+	const reduced = fonts.reduce(
+		(acc, font) => {
+			const { family, variations } = font;
+			acc[family] = acc[family] ?? { family, variations: [] };
+			acc[family].variations = [...acc[family].variations, ...variations];
+			return acc;
+		},
+		{} as Record<string, LocalFont>,
+	);
+
+	const fontFaces: string[] = [];
+
+	for (const font of Object.values(reduced)) {
+		for (const variation of font.variations) {
+			const { weight, italic = false, src } = variation;
+			const fontStyle = italic ? "italic" : "normal";
+			const format = getFontFormat(src);
+
+			const fontFace = `@font-face {
+  font-family: '${font.family}';
+  font-style: ${fontStyle};
+  font-weight: ${weight};
+  font-display: swap;
+  src: url(${encodeURI(src)}) format('${format}');
+}`;
+
+			fontFaces.push(fontFace);
+		}
+	}
+
+	const styleSheet = fontFaces.join("\n");
+
+	return {
+		family: Object.keys(reduced).join(", "),
+		styleSheet,
+	};
+};
+
+export default loader;
diff --git a/website/loaders/secret.ts b/website/loaders/secret.ts
new file mode 100644
index 0000000..1831021
--- /dev/null
+++ b/website/loaders/secret.ts
@@ -0,0 +1,60 @@
+/**
+ * @title Secret
+ * @hideOption true
+ */
+export interface Secret {
+	/** @ignore */
+	get: () => string | null;
+}
+
+export interface Props {
+	/**
+	 * @title Secret Value
+	 * @format secret
+	 */
+	encrypted: string;
+	/**
+	 * @title Secret Name
+	 * @description Used in dev mode as a environment variable (should not contain spaces or special characters)
+	 * @pattern ^[a-zA-Z_][a-zA-Z0-9_]*$
+	 */
+	name?: string;
+}
+
+/**
+ * Resolve a secret value.
+ * In local dev, reads from process.env using the `name` field.
+ * In production, the framework's ResolveSecretFn handles decryption
+ * before the value reaches this loader.
+ */
+const getSecret = (props: Props): string | null => {
+	const name = props?.name;
+	if (name && process.env[name] !== undefined) {
+		return process.env[name]!;
+	}
+	const encrypted = props?.encrypted;
+	if (!encrypted) {
+		return null;
+	}
+	// In production, the encrypted value should already be resolved
+	// by the framework's ResolveSecretFn before reaching this loader.
+	// If we get here with an encrypted value in dev, warn.
+	if (process.env.NODE_ENV !== "production") {
+		console.warn(
+			`Secret "${name ?? "anonymous"}" has encrypted value but no env var set. Set ${name} in .env.`,
+		);
+	}
+	return encrypted;
+};
+
+/**
+ * @title Secret
+ */
+export default function SecretLoader(props: Props): Secret {
+	const secretValue = getSecret(props);
+	return {
+		get: (): string | null => {
+			return secretValue;
+		},
+	};
+}
diff --git a/website/loaders/secretString.ts b/website/loaders/secretString.ts
new file mode 100644
index 0000000..23571c4
--- /dev/null
+++ b/website/loaders/secretString.ts
@@ -0,0 +1,18 @@
+import type { Secret } from "./secret";
+
+export interface Props {
+	secret: Secret;
+}
+
+/**
+ * @title Secret String (use Secret instead)
+ */
+export type SecretString = string | null;
+
+/**
+ * @title Secret String
+ * @deprecated true
+ */
+export default function ({ secret }: Props): SecretString {
+	return secret.get();
+}
diff --git a/website/manifest.gen.ts b/website/manifest.gen.ts
new file mode 100644
index 0000000..fd276be
--- /dev/null
+++ b/website/manifest.gen.ts
@@ -0,0 +1,31 @@
+// AUTO-GENERATED by scripts/generate-manifests.ts — DO NOT EDIT
+// This file is checked into source control and updated via: npm run generate:manifests
+import * as loaders_environment from "./loaders/environment";
+import * as loaders_fonts_googleFonts from "./loaders/fonts/googleFonts";
+import * as loaders_fonts_local from "./loaders/fonts/local";
+import * as loaders_secret from "./loaders/secret";
+import * as loaders_secretString from "./loaders/secretString";
+
+const sections_Analytics_Analytics = () => import("./sections/Analytics/Analytics");
+const sections_Seo_Seo = () => import("./sections/Seo/Seo");
+const sections_Seo_SeoV2 = () => import("./sections/Seo/SeoV2");
+
+const manifest = {
+	name: "website",
+	loaders: {
+		"website/loaders/environment": loaders_environment,
+		"website/loaders/fonts/googleFonts": loaders_fonts_googleFonts,
+		"website/loaders/fonts/local": loaders_fonts_local,
+		"website/loaders/secret": loaders_secret,
+		"website/loaders/secretString": loaders_secretString,
+	},
+	actions: {},
+	sections: {
+		"website/sections/Analytics/Analytics": sections_Analytics_Analytics,
+		"website/sections/Seo/Seo": sections_Seo_Seo,
+		"website/sections/Seo/SeoV2": sections_Seo_SeoV2,
+	},
+} as const;
+
+export type Manifest = typeof manifest;
+export default manifest;
diff --git a/website/matchers/always.ts b/website/matchers/always.ts
new file mode 100644
index 0000000..401c4f9
--- /dev/null
+++ b/website/matchers/always.ts
@@ -0,0 +1,12 @@
+/**
+ * @title Always
+ * @description Target all users
+ * @icon eye
+ */
+const MatchAlways = () => {
+	return true;
+};
+
+export default MatchAlways;
+
+export const cacheable = true;
diff --git a/website/matchers/cookie.ts b/website/matchers/cookie.ts
new file mode 100644
index 0000000..cb06190
--- /dev/null
+++ b/website/matchers/cookie.ts
@@ -0,0 +1,33 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title Cookie
+ */
+export interface Props {
+	name: string;
+	value: string;
+}
+
+function parseCookies(headers: Headers): Record<string, string> {
+	const cookieHeader = headers.get("cookie") || "";
+	const cookies: Record<string, string> = {};
+	for (const pair of cookieHeader.split(";")) {
+		const [key, ...rest] = pair.split("=");
+		if (key) {
+			cookies[key.trim()] = rest.join("=").trim();
+		}
+	}
+	return cookies;
+}
+
+/**
+ * @title Cookie
+ * @description Target users that have a specific cookie
+ * @icon cookie
+ */
+const MatchCookie = ({ name, value }: Props, { request }: MatchContext) => {
+	const cookies = parseCookies(request.headers);
+	return cookies[name] === value;
+};
+
+export default MatchCookie;
diff --git a/website/matchers/cron.ts b/website/matchers/cron.ts
new file mode 100644
index 0000000..c2bf14f
--- /dev/null
+++ b/website/matchers/cron.ts
@@ -0,0 +1,109 @@
+/**
+ * @titleBy cron
+ */
+export interface CronProps {
+	/**
+	 * @format cron
+	 * @example * 0-23 * * WED (At every minute past every hour from 0 through 23 on Wednesday.)
+	 * @pattern ^(?:(?:(?:\*|(?:\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*)|[A-Z]+)(?:\/\d+)?)(?:\s+|$)){5}$
+	 */
+	cron: string;
+}
+
+function nowWithMinutePrecision() {
+	const date = new Date();
+	date.setSeconds(0);
+	date.setMilliseconds(0);
+	date.setTime(Math.floor(date.getTime() / 1000) * 1000);
+	return date;
+}
+
+/**
+ * Minimal 5-field cron matcher (minute, hour, day-of-month, month, day-of-week).
+ * Supports: wildcards (*), ranges (1-5), lists (1,3,5), steps (star/2), and
+ * abbreviated weekday names (MON-SUN).
+ */
+function matchesCron(cronExpr: string, date: Date): boolean {
+	const DAY_NAMES: Record<string, number> = {
+		SUN: 0,
+		MON: 1,
+		TUE: 2,
+		WED: 3,
+		THU: 4,
+		FRI: 5,
+		SAT: 6,
+	};
+
+	const fields = cronExpr.trim().split(/\s+/);
+	if (fields.length < 5) return false;
+
+	const values = [
+		date.getMinutes(),
+		date.getHours(),
+		date.getDate(),
+		date.getMonth() + 1,
+		date.getDay(),
+	];
+
+	for (let i = 0; i < 5; i++) {
+		const field = fields[i];
+		const value = values[i];
+
+		if (!matchField(field, value, i === 4)) return false;
+	}
+	return true;
+
+	function matchField(field: string, value: number, isDow: boolean): boolean {
+		return field.split(",").some((part) => matchPart(part, value, isDow));
+	}
+
+	function matchPart(part: string, value: number, isDow: boolean): boolean {
+		const [rangeStr, stepStr] = part.split("/");
+		const step = stepStr ? Number.parseInt(stepStr, 10) : 1;
+
+		if (rangeStr === "*") {
+			return step === 1 || value % step === 0;
+		}
+
+		if (rangeStr.includes("-")) {
+			const [startStr, endStr] = rangeStr.split("-");
+			const start = parseVal(startStr, isDow);
+			const end = parseVal(endStr, isDow);
+			if (start <= end) {
+				if (value < start || value > end) return false;
+			} else {
+				// wrap-around (e.g. FRI-MON)
+				if (value < start && value > end) return false;
+			}
+			return step === 1 || (value - start + 100) % step === 0;
+		}
+
+		return parseVal(rangeStr, isDow) === value;
+	}
+
+	function parseVal(s: string, isDow: boolean): number {
+		if (isDow) {
+			const upper = s.toUpperCase();
+			if (upper in DAY_NAMES) return DAY_NAMES[upper];
+			// Cron allows 7 as alias for Sunday (0)
+			const n = Number.parseInt(s, 10);
+			return n === 7 ? 0 : n;
+		}
+		return Number.parseInt(s, 10);
+	}
+}
+
+/**
+ * @title Cron
+ * @description Target users with precision using recurring schedules
+ * @icon refresh
+ */
+const MatchCron = (props: CronProps) => {
+	if (!props?.cron) {
+		return false;
+	}
+	const minutePrecision = nowWithMinutePrecision();
+	return matchesCron(props.cron, minutePrecision);
+};
+
+export default MatchCron;
diff --git a/website/matchers/date.ts b/website/matchers/date.ts
new file mode 100644
index 0000000..2f9d2dd
--- /dev/null
+++ b/website/matchers/date.ts
@@ -0,0 +1,29 @@
+/**
+ * @titleBy start
+ */
+export interface Props {
+	/**
+	 * @format date-time
+	 */
+	start?: string;
+	/**
+	 * @format date-time
+	 */
+	end?: string;
+}
+
+/**
+ * @title Date and Time
+ * @description Target users based on specific dates or date ranges, including specific times
+ * @icon calendar-event
+ */
+const MatchDate = (props: Props) => {
+	const now = new Date();
+	const start = props.start ? now > new Date(props.start) : true;
+	const end = props.end ? now < new Date(props.end) : true;
+	return start && end;
+};
+
+export default MatchDate;
+
+export const cacheable = true;
diff --git a/website/matchers/device.ts b/website/matchers/device.ts
new file mode 100644
index 0000000..452e975
--- /dev/null
+++ b/website/matchers/device.ts
@@ -0,0 +1,40 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title {{{.}}}
+ */
+export type Device = "mobile" | "tablet" | "desktop";
+
+/**
+ * @title {{#mobile}}Mobile{{/mobile}} {{#tablet}}Tablet{{/tablet}} {{#desktop}}Desktop{{/desktop}}
+ */
+export interface Props {
+	/** @title Mobile */
+	mobile?: boolean;
+	/** @title Tablet */
+	tablet?: boolean;
+	/** @title Desktop */
+	desktop?: boolean;
+}
+
+// backwards compatibility
+interface OldProps {
+	devices: Device[];
+}
+
+/**
+ * @title Device
+ * @description Target users based on their device type, such as desktop, tablet, or mobile
+ * @icon device-mobile
+ */
+const MatchDevice = ({ mobile, tablet, desktop, ...rest }: Props, { device }: MatchContext) => {
+	const devices = (rest as unknown as OldProps)?.devices ?? [];
+	if (mobile) devices.push("mobile");
+	if (tablet) devices.push("tablet");
+	if (desktop) devices.push("desktop");
+	return devices.includes(device);
+};
+
+export default MatchDevice;
+
+export const cacheable = true;
diff --git a/website/matchers/environment.ts b/website/matchers/environment.ts
new file mode 100644
index 0000000..f99a4ed
--- /dev/null
+++ b/website/matchers/environment.ts
@@ -0,0 +1,21 @@
+/**
+ * @title {{{environment}}}
+ */
+export interface Props {
+	environment: "production" | "development";
+}
+
+/**
+ * @title Environment
+ * @description Target users based from where they are accessing your site (development, testing, or production)
+ * @icon code
+ */
+const MatchEnvironment = ({ environment }: Props) => {
+	const isProduction = process.env.NODE_ENV === "production";
+
+	return environment === "production" ? isProduction : !isProduction;
+};
+
+export default MatchEnvironment;
+
+export const cacheable = true;
diff --git a/website/matchers/host.ts b/website/matchers/host.ts
new file mode 100644
index 0000000..5dbf258
--- /dev/null
+++ b/website/matchers/host.ts
@@ -0,0 +1,25 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title {{{includes}}} {{{match}}}
+ */
+export interface Props {
+	includes?: string;
+	match?: string;
+}
+
+/**
+ * @title Host
+ * @description Target users based on the domain or subdomain they are accessing your site from
+ * @icon world-www
+ */
+const MatchHost = ({ includes, match }: Props, { request }: MatchContext) => {
+	const host = request.headers.get("host") || request.headers.get("origin") || "";
+	const regexMatch = match ? new RegExp(match).test(host) : true;
+	const includesFound = includes ? host.includes(includes) : true;
+	return regexMatch && includesFound;
+};
+
+export default MatchHost;
+
+export const cacheable = true;
diff --git a/website/matchers/location.ts b/website/matchers/location.ts
new file mode 100644
index 0000000..92a79bc
--- /dev/null
+++ b/website/matchers/location.ts
@@ -0,0 +1,113 @@
+import type { MatchContext } from "../types";
+import { haversine } from "../utils/location";
+
+export interface Coordinate {
+	latitude: number;
+	longitude: number;
+	radius?: number;
+}
+
+export interface Map {
+	/**
+	 * @title Area selection
+	 * @example -7.27820,-35.97630,2000
+	 */
+	coordinates?: string;
+}
+
+export interface Location {
+	/**
+	 * @title City
+	 * @example São Paulo
+	 */
+	city?: string;
+	/**
+	 * @title Region Code
+	 * @example SP
+	 */
+	regionCode?: string;
+	/**
+	 * @title Country
+	 * @example BR
+	 */
+	country?: string;
+}
+
+export interface Props {
+	/** @title Include Locations */
+	includeLocations?: (Location | Map)[];
+	/** @title Exclude Locations */
+	excludeLocations?: (Location | Map)[];
+}
+
+export interface MapLocation {
+	city?: string;
+	regionCode?: string;
+	country?: string;
+	coordinates?: string;
+}
+
+const matchLocation =
+	(defaultNotMatched = true, source: MapLocation) =>
+	(target: MapLocation) => {
+		if (!target.regionCode && !target.city && !target.country && !target.coordinates) {
+			return defaultNotMatched;
+		}
+		let result = !target.regionCode || target.regionCode === source.regionCode;
+		result &&=
+			!source.coordinates ||
+			!target.coordinates ||
+			haversine(source.coordinates, target.coordinates) <= Number(target.coordinates.split(",")[2]);
+		result &&= !target.city || target.city === source.city;
+		result &&= !target.country || target.country === source.country;
+		return result;
+	};
+
+function fixEncoding(input: string): string {
+	try {
+		const utf8bytes = [...input].map((char) => char.charCodeAt(0));
+		return new TextDecoder("utf-8").decode(Uint8Array.from(utf8bytes));
+	} catch {
+		return input;
+	}
+}
+
+const escaped = ({ city, country, regionCode, coordinates }: MapLocation): MapLocation => {
+	return {
+		coordinates,
+		regionCode,
+		city: city ? fixEncoding(city) : city,
+		country: country ? fixEncoding(country) : country,
+	};
+};
+
+/**
+ * @title Location
+ * @description Target users based on their geographical location, such as country, city, or region
+ * @icon map-2
+ */
+export default function MatchLocation(
+	{ includeLocations, excludeLocations }: Props,
+	{ request }: MatchContext,
+) {
+	const city = request.headers.get("cf-ipcity") ?? undefined;
+	const country = request.headers.get("cf-ipcountry") ?? undefined;
+	const regionCode = request.headers.get("cf-region-code") ?? undefined;
+	const latitude = request.headers.get("cf-iplatitude") ?? undefined;
+	const longitude = request.headers.get("cf-iplongitude") ?? undefined;
+	const coordinates = latitude ? `${latitude},${longitude}` : undefined;
+
+	const userLocation = { city, country, regionCode, coordinates };
+	const isLocationExcluded =
+		excludeLocations?.some(matchLocation(false, escaped(userLocation))) ?? false;
+
+	if (isLocationExcluded) {
+		return false;
+	}
+
+	if (includeLocations?.length === 0) {
+		return true;
+	}
+
+	return includeLocations?.some(matchLocation(true, escaped(userLocation))) ?? true;
+}
diff --git a/website/matchers/multi.ts b/website/matchers/multi.ts
new file mode 100644
index 0000000..ae43f5d
--- /dev/null
+++ b/website/matchers/multi.ts
@@ -0,0 +1,24 @@
+import type { MatchContext, Matcher } from "../types";
+
+/**
+ * @title Combined options with {{{op}}}
+ */
+export interface Props {
+	op: "or" | "and";
+	matchers: Matcher[];
+}
+
+/**
+ * @title Multi
+ * @description Create more complex conditions by combining multiple matchers
+ * @icon plus
+ */
+const MatchMulti =
+	({ op, matchers }: Props) =>
+	(ctx: MatchContext) => {
+		return op === "or"
+			? matchers.some((matcher) => matcher(ctx))
+			: matchers.every((matcher) => matcher(ctx));
+	};
+
+export default MatchMulti;
diff --git a/website/matchers/negate.ts b/website/matchers/negate.ts
new file mode 100644
index 0000000..a58aa9b
--- /dev/null
+++ b/website/matchers/negate.ts
@@ -0,0 +1,21 @@
+import type { MatchContext, Matcher } from "../types";
+
+export interface Props {
+	/**
+	 * @description Matcher to be negated.
+	 */
+	matcher: Matcher;
+}
+
+/**
+ * @title Negates
+ * @description Create conditions that target users who do not meet certain criteria
+ * @icon minus
+ */
+const NegateMatcher =
+	({ matcher }: Props) =>
+	(ctx: MatchContext) => {
+		return !matcher(ctx);
+	};
+
+export default NegateMatcher;
diff --git a/website/matchers/never.ts b/website/matchers/never.ts
new file mode 100644
index 0000000..adce560
--- /dev/null
+++ b/website/matchers/never.ts
@@ -0,0 +1,12 @@
+/**
+ * @title Never
+ * @description Hide from all users
+ * @icon eye-off
+ */
+const MatchNever = () => {
+	return false;
+};
+
+export default MatchNever;
+
+export const cacheable = true;
diff --git a/website/matchers/pathname.ts b/website/matchers/pathname.ts
new file mode 100644
index 0000000..6d7a8a5
--- /dev/null
+++ b/website/matchers/pathname.ts
@@ -0,0 +1,69 @@
+import type { MatchContext } from "../types";
+
+interface BaseCase {
+	/**
+	 * @title Pathname
+	 * @description Must start with "/"
+	 */
+	pathname?: string;
+	/**
+	 * @title Negate
+	 * @description Inverts the match result (NOT)
+	 * @default false
+	 */
+	negate?: boolean;
+}
+
+/** @title Equals */
+interface Equals extends BaseCase {
+	/** @readonly @hide true */
+	type: "Equals";
+}
+
+interface Includes extends BaseCase {
+	/** @readonly @hide true */
+	type: "Includes";
+}
+
+interface Template extends BaseCase {
+	/** @readonly @hide true */
+	type: "Template";
+}
+
+export interface Props {
+	/** @title Operation */
+	case: Equals | Includes | Template;
+}
+
+const operations: Record<Props["case"]["type"], (pathname: string, condition: string) => boolean> =
+	Object.freeze({
+		Equals: (pathname, value) => pathname === value,
+		Includes: (pathname, value) => pathname.includes(value),
+		Template: (pathname, template) => {
+			const escaped = template
+				.replace(/:[^/]+/g, "\0")
+				.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+				.replace(/\0/g, "([^/]+)");
+			const regex = new RegExp(`^${escaped}$`);
+			return regex.test(pathname);
+		},
+	});
+
+/**
+ * @title Pathname
+ * @description Target users based on the pathname
+ * @icon world-www
+ */
+const MatchPathname = (props: Props, { request }: MatchContext) => {
+	const url = new URL(request.url);
+	const pathname = url.pathname;
+	if (!props.case.pathname) {
+		return false;
+	}
+	const result = operations[props.case.type](pathname, props.case.pathname);
+	return props.case.negate ? !result : result;
+};
+
+export default MatchPathname;
+
+export const cacheable = true;
diff --git a/website/matchers/queryString.ts b/website/matchers/queryString.ts
new file mode 100644
index 0000000..9b64faf
--- /dev/null
+++ b/website/matchers/queryString.ts
@@ -0,0 +1,98 @@
+import type { MatchContext } from "../types";
+
+interface BaseCase {
+	value: string;
+}
+
+/** @title Equals */
+interface Equals extends BaseCase {
+	/** @readonly @hide true */
+	type: "Equals";
+}
+interface Greater extends BaseCase {
+	/** @readonly @hide true */
+	type: "Greater";
+}
+interface Lesser extends BaseCase {
+	/** @readonly @hide true */
+	type: "Lesser";
+}
+interface GreaterOrEquals extends BaseCase {
+	/** @readonly @hide true */
+	type: "GreaterOrEquals";
+}
+interface LesserOrEquals extends BaseCase {
+	/** @readonly @hide true */
+	type: "LesserOrEquals";
+}
+interface Includes extends BaseCase {
+	/** @readonly @hide true */
+	type: "Includes";
+}
+interface Exists {
+	/** @readonly @hide true */
+	type: "Exists";
+}
+
+/**
+ * @title {{{param}}} {{{case.type}}} {{{case.value}}}
+ */
+interface Condition {
+	param: string;
+	case: Equals | Greater | Lesser | GreaterOrEquals | LesserOrEquals | Includes | Exists;
+}
+
+/**
+ * @title Query String Matcher
+ */
+export interface Props {
+	conditions: Condition[];
+}
+
+const matchesAtLeastOne = (
+	params: string[],
+	condition: Condition,
+	compare: (a: string, b: string) => boolean,
+) => {
+	if (condition.case.type === "Exists") {
+		return false;
+	}
+	const value = (condition.case as BaseCase).value;
+	return params.filter((param) => compare(param, value)).length > 0;
+};
+
+const operations: Record<
+	Condition["case"]["type"],
+	(param: string[], condition: Condition) => boolean
+> = Object.freeze({
+	Equals: (params, condition) => matchesAtLeastOne(params, condition, (a, b) => a === b),
+	Greater: (params, condition) => matchesAtLeastOne(params, condition, (a, b) => a > b),
+	GreaterOrEquals: (params, condition) => matchesAtLeastOne(params, condition, (a, b) => a >= b),
+	Includes: (params, condition) => matchesAtLeastOne(params, condition, (a, b) => a.includes(b)),
+	Lesser: (params, condition) => matchesAtLeastOne(params, condition, (a, b) => a < b),
+	LesserOrEquals: (params, condition) => matchesAtLeastOne(params, condition, (a, b) => a <= b),
+	Exists: (_params, _condition) => true,
+});
+
+/**
+ * @title Query String
+ * @description Match with a specific querystring
+ * @icon question-mark
+ */
+const MatchQueryString = (props: Props, { request }: MatchContext) => {
+	let matches = true;
+	const url = new URL(request.url);
+	for (const condition of props.conditions) {
+		const params = url.searchParams.getAll(condition.param);
+		if (!params.length) {
+			matches = false;
+			continue;
+		}
+		matches = matches && operations[condition.case.type](params, condition);
+	}
+	return matches;
+};
+
+export default MatchQueryString;
+
+export const cacheable = true;
diff --git a/website/matchers/random.ts b/website/matchers/random.ts
new file mode 100644
index 0000000..4e5bf1e
--- /dev/null
+++ b/website/matchers/random.ts
@@ -0,0 +1,24 @@
+/**
+ * @title ABTest {{{percentage traffic}}}
+ */
+export interface Props {
+	traffic: number;
+}
+
+// once selected the session will reuse the same value
+export const sticky = "session";
+
+/**
+ * @title Random
+ * @description Target a percentage of the total traffic to do an A/B test
+ * @icon arrow-split
+ */
+const MatchRandom = ({ traffic }: Props) => {
+	return Math.random() < traffic;
+};
+
+export default MatchRandom;
+
+export const sessionKey = (props: Props) => {
+	return `${props.traffic}`;
+};
diff --git a/website/matchers/site.ts b/website/matchers/site.ts
new file mode 100644
index 0000000..4c35ad9
--- /dev/null
+++ b/website/matchers/site.ts
@@ -0,0 +1,21 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title {{{siteId}}}
+ */
+export interface Props {
+	siteId: number;
+}
+
+/**
+ * @title Site
+ * @description Target users based on the deco website ID they are on
+ * @icon hand-click
+ */
+const MatchSite = ({ siteId }: Props, { siteId: currSiteId }: MatchContext) => {
+	return siteId === currSiteId;
+};
+
+export default MatchSite;
+
+export const cacheable = true;
diff --git a/website/matchers/userAgent.ts b/website/matchers/userAgent.ts
new file mode 100644
index 0000000..5a3c183
--- /dev/null
+++ b/website/matchers/userAgent.ts
@@ -0,0 +1,23 @@
+import type { MatchContext } from "../types";
+
+/**
+ * @title {{{includes}}} {{{match}}}
+ */
+export interface Props {
+	includes?: string;
+	match?: string;
+}
+
+/**
+ * @title User Agent
+ * @description Target users based on their web browser or operational system
+ * @icon world
+ */
+const MatchUserAgent = ({ includes, match }: Props, { request }: MatchContext) => {
+	const ua = request.headers.get("user-agent") || "";
+	const regexMatch = match ? new RegExp(match).test(ua) : true;
+	const includesFound = includes ? ua.includes(includes) : true;
+	return regexMatch && includesFound;
+};
+
+export default MatchUserAgent;
diff --git a/website/mod.ts b/website/mod.ts
new file mode 100644
index 0000000..7bf2aa7
--- /dev/null
+++ b/website/mod.ts
@@ -0,0 +1,48 @@
+/**
+ * Website app module — standard autoconfig contract.
+ *
+ * Exports `configure` following the AppModContract pattern.
+ * Provides SEO defaults, theme, matchers, and flags for the site.
+ */
+
+import type { AppDefinition, ResolveSecretFn } from "../commerce/app-types";
+import { configureWebsite } from "./client";
+import manifest from "./manifest.gen";
+import type { WebsiteConfig } from "./types";
+
+// -------------------------------------------------------------------------
+// State
+// -------------------------------------------------------------------------
+
+export interface WebsiteState {
+	config: WebsiteConfig;
+}
+
+// -------------------------------------------------------------------------
+// Configure
+// -------------------------------------------------------------------------
+
+/**
+ * Configure the Website app from CMS block data.
+ * Always returns an AppDefinition (no required fields).
+ */
+export async function configure(
+	// biome-ignore lint/suspicious/noExplicitAny: block data comes from CMS with no fixed schema
+	block: any,
+	_resolveSecret: ResolveSecretFn,
+): Promise<AppDefinition<WebsiteState>> {
+	const config: WebsiteConfig = {
+		seo: block?.seo,
+	};
+
+	configureWebsite(config);
+
+	return {
+		name: "website",
+		manifest,
+		state: { config },
+	};
+}
+
+/** Placeholder preview for CMS editor. */
+export const preview = undefined;
diff --git a/website/sections/Analytics/Analytics.tsx b/website/sections/Analytics/Analytics.tsx
new file mode 100644
index 0000000..9f82d57
--- /dev/null
+++ b/website/sections/Analytics/Analytics.tsx
@@ -0,0 +1,7 @@
+import AnalyticsComponent, { type Props } from "../../components/Analytics";
+
+function Section(props: Props) {
+	return <AnalyticsComponent {...props} />;
+}
+
+export default Section;
diff --git a/website/sections/Seo/Seo.tsx b/website/sections/Seo/Seo.tsx
new file mode 100644
index 0000000..c8fdb0b
--- /dev/null
+++ b/website/sections/Seo/Seo.tsx
@@ -0,0 +1,14 @@
+import SeoComponent, { type Props as SeoProps } from "../../components/Seo";
+
+type Props = Omit<SeoProps, "jsonLDs">;
+
+/**
+ * @deprecated true
+ * @migrate website/sections/Seo/SeoV2.tsx
+ * @title SEO deprecated
+ */
+function Section(props: Props) {
+	return <SeoComponent {...props} />;
+}
+
+export default Section;
diff --git a/website/sections/Seo/SeoV2.tsx b/website/sections/Seo/SeoV2.tsx
new file mode 100644
index 0000000..ef964ef
--- /dev/null
+++ b/website/sections/Seo/SeoV2.tsx
@@ -0,0 +1,45 @@
+import SeoComponent, {
+	renderTemplateString,
+	type SEOSection,
+	type Props as SeoProps,
+} from "../../components/Seo";
+import type { WebsiteConfig } from "../../types";
+
+type Props = Pick<
+	SeoProps,
+	"title" | "description" | "type" | "favicon" | "image" | "themeColor" | "noIndexing"
+>;
+
+/**
+ * Loader that merges page-level SEO props with app-level defaults.
+ * The framework calls this with the WebsiteConfig from the app state.
+ */
+export function loader(props: Props, seo?: WebsiteConfig["seo"]) {
+	const {
+		titleTemplate = "",
+		descriptionTemplate = "",
+		title: appTitle = "",
+		description: appDescription = "",
+		...seoSiteProps
+	} = seo ?? {};
+
+	const { title: _title, description: _description, ...seoProps } = props;
+
+	const title = renderTemplateString(
+		(titleTemplate ?? "").trim().length === 0 ? "%s" : titleTemplate,
+		_title ?? appTitle,
+	);
+
+	const description = renderTemplateString(
+		(descriptionTemplate ?? "").trim().length === 0 ? "%s" : descriptionTemplate,
+		_description ?? appDescription,
+	);
+
+	return { ...seoSiteProps, ...seoProps, title, description };
+}
+
+function Section(props: Props): SEOSection {
+	return <SeoComponent {...props} />;
+}
+
+export default Section;
diff --git a/website/types.ts b/website/types.ts
new file mode 100644
index 0000000..2050371
--- /dev/null
+++ b/website/types.ts
@@ -0,0 +1,125 @@
+/**
+ * Core types for the website app.
+ *
+ * Defines the matcher/flag system types locally so we don't depend on
+ * @deco/deco/blocks — everything is self-contained in @decocms/apps.
+ */
+
+// -------------------------------------------------------------------------
+// Script
+// -------------------------------------------------------------------------
+
+export type Script = { src: string | ((req: Request) => string) };
+
+// -------------------------------------------------------------------------
+// Matcher system
+// -------------------------------------------------------------------------
+
+/**
+ * Context passed to matchers at request time.
+ * The framework populates this from the incoming request.
+ */
+export interface MatchContext {
+	request: Request;
+	device: "mobile" | "tablet" | "desktop";
+	siteId: number;
+}
+
+/**
+ * A matcher is a function that evaluates request context and returns a boolean.
+ */
+export type Matcher = (ctx: MatchContext) => boolean;
+
+// -------------------------------------------------------------------------
+// Flag system
+// -------------------------------------------------------------------------
+
+/**
+ * A feature flag with a matcher and two branches.
+ * The framework evaluates the matcher at request time and selects the
+ * appropriate branch value.
+ */
+export interface FlagObj<T> {
+	matcher: Matcher;
+	true: T;
+	false: T;
+	name: string;
+}
+
+/**
+ * A multivariate flag with multiple variants, each with its own matcher.
+ */
+export interface MultivariateFlag<T> {
+	variants: Variant<T>[];
+}
+
+/**
+ * A single variant in a multivariate flag.
+ */
+export interface Variant<T> {
+	matcher?: Matcher;
+	value: T;
+	weight?: number;
+}
+
+// -------------------------------------------------------------------------
+// Theme / Font types
+// -------------------------------------------------------------------------
+
+export interface Variable {
+	name: string;
+	value: string;
+}
+
+export type Font = {
+	family: string;
+	styleSheet: string;
+};
+
+// -------------------------------------------------------------------------
+// SEO types
+// -------------------------------------------------------------------------
+
+/** @description Recommended: 1200 x 630 px (up to 5MB) */
+export type ImageWidget = string;
+
+export type OGType = "website" | "article";
+
+export interface SeoConfig {
+	title?: string;
+	/**
+	 * @title Title template
+	 * @description add a %s whenever you want it to be replaced with the product name, category name or search term
+	 * @default %s
+	 */
+	titleTemplate?: string;
+	description?: string;
+	/**
+	 * @title Description template
+	 * @description add a %s whenever you want it to be replaced with the product name, category name or search term
+	 * @default %s
+	 */
+	descriptionTemplate?: string;
+	/** @default website */
+	type?: OGType;
+	/** @description Recommended: 1200 x 630 px (up to 5MB) */
+	image?: ImageWidget;
+	/** @description Recommended: 16 x 16 px */
+	favicon?: ImageWidget;
+	/** @description Suggested color that browsers should use to customize the display */
+	themeColor?: string;
+	/**
+	 * @title Disable indexing
+	 * @description In testing, you can use this to prevent search engines from indexing your site
+	 */
+	noIndexing?: boolean;
+}
+
+// -------------------------------------------------------------------------
+// Website app config
+// -------------------------------------------------------------------------
+
+export interface WebsiteConfig {
+	/** @title Seo */
+	seo?: SeoConfig;
+}
diff --git a/website/utils/html.ts b/website/utils/html.ts
new file mode 100644
index 0000000..a1f2f6a
--- /dev/null
+++ b/website/utils/html.ts
@@ -0,0 +1 @@
+export const stripHTML = (str: string) => str.replace(/(<([^>]+)>)/gi, "");
diff --git a/website/utils/location.ts b/website/utils/location.ts
new file mode 100644
index 0000000..86f6dcf
--- /dev/null
+++ b/website/utils/location.ts
@@ -0,0 +1,20 @@
+export const toRadians = (degrees: number): number => {
+	return degrees * (Math.PI / 180);
+};
+
+export const haversine = (coordinate1: string, coordinate2: string): number => {
+	const [lat1, lng1] = coordinate1.split(",").map((value) => Number(value));
+	const [lat2, lng2] = coordinate2.split(",").map((value) => Number(value));
+
+	const earthRadius = 6371000; // Earth radius in meters
+	const dLat = toRadians(lat1 - lat2);
+	const dLon = toRadians(lng1 - lng2);
+
+	const halfChordLengthSquared =
+		Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+		Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2));
+
+	const angularDistance =
+		2 * Math.atan2(Math.sqrt(halfChordLengthSquared), Math.sqrt(1 - halfChordLengthSquared));
+	return earthRadius * angularDistance;
+};
diff --git a/website/utils/multivariate.ts b/website/utils/multivariate.ts
new file mode 100644
index 0000000..6de16bc
--- /dev/null
+++ b/website/utils/multivariate.ts
@@ -0,0 +1,20 @@
+import type { MultivariateFlag, Variant } from "../types";
+
+/**
+ * @title Multivariate
+ */
+export interface MultivariateProps<T> {
+	/**
+	 * @minItems 1
+	 * @addBehavior 1
+	 */
+	variants: Variant<T>[];
+}
+
+/**
+ * @title Variant
+ * @label hidden
+ */
+export default function multivariate<T>(props: MultivariateProps<T>): MultivariateFlag<T> {
+	return props;
+}