From 8608a8f4f9da6190e4a802494b79af5903a71460 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Thu, 16 Apr 2026 04:39:40 +0200
Subject: [PATCH] sections

---
 lex.config.js                                 |   1 +
 lexicons/app/blento/card.json                 |   1 +
 lexicons/app/blento/section.json              |  24 +
 src/lib/atproto/settings.ts                   |   1 +
 src/lib/contrail/config.ts                    |   6 +
 src/lib/helper.ts                             |  33 +-
 .../GridSection/EditingGridSection.svelte     | 150 +++++
 .../sections/GridSection/GridSection.svelte   |  24 +
 src/lib/sections/GridSection/add-item.ts      |  45 ++
 src/lib/sections/GridSection/index.ts         |  37 ++
 src/lib/sections/index.ts                     |  12 +
 src/lib/sections/migrate.ts                   |  27 +
 src/lib/sections/types.ts                     |  36 ++
 src/lib/types.ts                              |  15 +
 src/lib/website/AddSectionButton.svelte       |  59 ++
 src/lib/website/EditBar.svelte                |  43 +-
 src/lib/website/EditableWebsite.svelte        | 514 ++++++------------
 src/lib/website/SectionsModal.svelte          | 140 +++++
 src/lib/website/Website.svelte                |  31 +-
 src/lib/website/file-processing.ts            |  79 +++
 src/lib/website/load.ts                       |  45 +-
 21 files changed, 920 insertions(+), 403 deletions(-)
 create mode 100644 lexicons/app/blento/section.json
 create mode 100644 src/lib/sections/GridSection/EditingGridSection.svelte
 create mode 100644 src/lib/sections/GridSection/GridSection.svelte
 create mode 100644 src/lib/sections/GridSection/add-item.ts
 create mode 100644 src/lib/sections/GridSection/index.ts
 create mode 100644 src/lib/sections/index.ts
 create mode 100644 src/lib/sections/migrate.ts
 create mode 100644 src/lib/sections/types.ts
 create mode 100644 src/lib/website/AddSectionButton.svelte
 create mode 100644 src/lib/website/SectionsModal.svelte
 create mode 100644 src/lib/website/file-processing.ts

diff --git a/lex.config.js b/lex.config.js
index 44743a3..7c88fce 100644
--- a/lex.config.js
+++ b/lex.config.js
@@ -13,6 +13,7 @@ export default defineLexiconConfig({
 				nsids: [
 					'app.blento.card',
 					'app.blento.page',
+					'app.blento.section',
 					'app.bsky.actor.profile',
 					'site.standard.publication'
 				]
diff --git a/lexicons/app/blento/card.json b/lexicons/app/blento/card.json
index bcee074..3a11945 100644
--- a/lexicons/app/blento/card.json
+++ b/lexicons/app/blento/card.json
@@ -22,6 +22,7 @@
 					"cardData": { "type": "unknown" },
 					"color": { "type": "string" },
 					"page": { "type": "string" },
+					"sectionId": { "type": "string" },
 					"updatedAt": { "type": "string", "format": "datetime" },
 					"version": { "type": "integer" }
 				}
diff --git a/lexicons/app/blento/section.json b/lexicons/app/blento/section.json
new file mode 100644
index 0000000..cae1486
--- /dev/null
+++ b/lexicons/app/blento/section.json
@@ -0,0 +1,24 @@
+{
+	"$type": "com.atproto.lexicon.schema",
+	"lexicon": 1,
+	"id": "app.blento.section",
+	"defs": {
+		"main": {
+			"type": "record",
+			"key": "tid",
+			"record": {
+				"type": "object",
+				"required": ["sectionType", "page", "index"],
+				"properties": {
+					"sectionType": { "type": "string" },
+					"page": { "type": "string" },
+					"index": { "type": "integer" },
+					"sectionData": { "type": "unknown" },
+					"name": { "type": "string" },
+					"updatedAt": { "type": "string", "format": "datetime" },
+					"version": { "type": "integer" }
+				}
+			}
+		}
+	}
+}
diff --git a/src/lib/atproto/settings.ts b/src/lib/atproto/settings.ts
index 63cf291..5c10bfd 100644
--- a/src/lib/atproto/settings.ts
+++ b/src/lib/atproto/settings.ts
@@ -6,6 +6,7 @@ export const SITE = env.PUBLIC_DOMAIN;
 export const collections = [
 	'app.blento.card',
 	'app.blento.page',
+	'app.blento.section',
 	'app.blento.settings',
 	'app.blento.comment',
 	'app.blento.guestbook.entry',
diff --git a/src/lib/contrail/config.ts b/src/lib/contrail/config.ts
index ab90354..60034a5 100644
--- a/src/lib/contrail/config.ts
+++ b/src/lib/contrail/config.ts
@@ -11,6 +11,12 @@ export const config: ContrailConfig = {
 		},
 		'app.blento.page': {
 			queryable: {}
+		},
+		'app.blento.section': {
+			queryable: {
+				page: {},
+				sectionType: {}
+			}
 		}
 	},
 	profiles: [
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index 1c078b6..8e35f7c 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -188,10 +188,36 @@ export async function savePage(
 	data: WebsiteData,
 	currentItems: Item[],
 	originalCards: Item[],
-	originalPublication: string
+	originalPublication: string,
+	originalSections?: import('$lib/types').SectionRecord[]
 ) {
 	const promises = [];
 
+	// Save sections
+	for (const section of data.sections) {
+		section.updatedAt = new Date().toISOString();
+		section.version = 1;
+		const record = JSON.parse(JSON.stringify(section));
+		const rkey = record.id;
+		delete record.id;
+		promises.push(
+			putRecord({
+				collection: 'app.blento.section',
+				rkey,
+				record
+			})
+		);
+	}
+
+	// Delete removed sections
+	if (originalSections) {
+		for (const original of originalSections) {
+			if (!data.sections.find((s) => s.id === original.id)) {
+				promises.push(deleteRecord({ collection: 'app.blento.section', rkey: original.id }));
+			}
+		}
+	}
+
 	// Save all current cards. We don't diff against originals because the
 	// server-side load can modify cards (e.g. fixing overlaps), so the
 	// "original" the client sees is already the post-fix version — there's
@@ -301,7 +327,7 @@ export async function savePage(
 	fetch(`/${data.did}/og-new.png`, { method: 'DELETE' }).catch(() => {});
 }
 
-export function createEmptyCard(page: string) {
+export function createEmptyCard(page: string, sectionId?: string) {
 	return {
 		id: TID.now(),
 		x: 0,
@@ -314,7 +340,8 @@ export function createEmptyCard(page: string) {
 		mobileY: 0,
 		cardType: '',
 		cardData: {},
-		page
+		page,
+		sectionId
 	} as Item;
 }
 
diff --git a/src/lib/sections/GridSection/EditingGridSection.svelte b/src/lib/sections/GridSection/EditingGridSection.svelte
new file mode 100644
index 0000000..d8c95fa
--- /dev/null
+++ b/src/lib/sections/GridSection/EditingGridSection.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import type { EditingSectionContentProps } from '../types';
+	import { EditableGrid, fixCollisions, compactItems, setPositionOfNewItem } from '$lib/layout';
+	import BaseEditingCard from '$lib/cards/_base/BaseCard/BaseEditingCard.svelte';
+	import EditingCard from '$lib/cards/_base/Card/EditingCard.svelte';
+	import { SectionDefinitionsByType } from '$lib/sections';
+	import { positionItemAtGridPos } from './add-item';
+
+	let {
+		section,
+		items = $bindable(),
+		isMobile,
+		selectedCardId,
+		isCoarse,
+		isActive,
+		onlayoutchange,
+		ondeselect,
+		onadditem,
+		oncreatefilecards,
+		onactivate,
+		onrefchange
+	}: EditingSectionContentProps = $props();
+
+	let gridRef: HTMLDivElement | undefined = $state();
+
+	let sectionItems = $derived(items.filter((i) => i.sectionId === section.id));
+
+	let hovered = $state(false);
+	const def = $derived(SectionDefinitionsByType[section.sectionType]);
+
+	$effect(() => {
+		onrefchange(gridRef);
+		return () => onrefchange(undefined);
+	});
+
+	$effect(() => {
+		const el = gridRef;
+		if (!el) return;
+
+		const enter = () => (hovered = true);
+		const leave = () => (hovered = false);
+		const down = () => onactivate();
+
+		el.addEventListener('pointerenter', enter);
+		el.addEventListener('pointerleave', leave);
+		el.addEventListener('pointerdown', down);
+
+		return () => {
+			el.removeEventListener('pointerenter', enter);
+			el.removeEventListener('pointerleave', leave);
+			el.removeEventListener('pointerdown', down);
+		};
+	});
+
+	async function handleFileDrop(files: File[], gridX: number, gridY: number) {
+		const cards = await oncreatefilecards(files);
+		for (let i = 0; i < cards.length; i++) {
+			const card = cards[i];
+			card.sectionId = section.id;
+			if (i === 0) {
+				positionItemAtGridPos(card, gridX, gridY, isMobile);
+			} else {
+				const currentSectionItems = items.filter((it) => it.sectionId === section.id);
+				setPositionOfNewItem(card, currentSectionItems);
+			}
+
+			items = [...items, card];
+			const updatedSectionItems = items.filter((it) => it.sectionId === section.id);
+			fixCollisions(updatedSectionItems, card, isMobile);
+			fixCollisions(updatedSectionItems, card, !isMobile);
+		}
+		onlayoutchange();
+	}
+</script>
+
+<EditableGrid
+	items={sectionItems}
+	bind:ref={gridRef}
+	{isMobile}
+	{selectedCardId}
+	{isCoarse}
+	{onlayoutchange}
+	{ondeselect}
+	onfiledrop={handleFileDrop}
+>
+	{#if hovered || isActive}
+		<div
+			class="pointer-events-none absolute inset-0 z-30 rounded-3xl border-2 border-dashed transition-colors duration-150 {isActive
+				? 'border-accent-500/50'
+				: 'border-base-400/30 dark:border-base-500/30'}"
+		>
+			<div
+				class="bg-base-100/80 dark:bg-base-900/80 absolute -top-3 left-4 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium backdrop-blur-sm {isActive
+					? 'text-accent-600 dark:text-accent-400'
+					: 'text-base-500 dark:text-base-400'}"
+			>
+				{#if def?.icon}
+					<span class="[&_svg]:size-3">{@html def.icon}</span>
+				{/if}
+				{section.name || def?.name || section.sectionType}
+			</div>
+		</div>
+	{/if}
+
+	{#if sectionItems.length === 0}
+		<div
+			class="border-base-300/50 dark:border-base-700/50 pointer-events-auto relative flex min-h-32 items-center justify-center rounded-3xl border-2 border-dashed"
+		>
+			<p class="text-base-400 dark:text-base-500 text-sm">
+				Click the + button to add cards to this section
+			</p>
+		</div>
+	{/if}
+
+	{#each sectionItems as item (item.id)}
+		{@const idx = items.indexOf(item)}
+		<BaseEditingCard
+			bind:item={items[idx]}
+			ondelete={() => {
+				items = items.filter((it) => it !== item);
+				compactItems(
+					items.filter((i) => i.sectionId === section.id),
+					false
+				);
+				compactItems(
+					items.filter((i) => i.sectionId === section.id),
+					true
+				);
+				onlayoutchange();
+			}}
+			onsetsize={(newW, newH) => {
+				if (isMobile) {
+					item.mobileW = newW;
+					item.mobileH = newH;
+				} else {
+					item.w = newW;
+					item.h = newH;
+				}
+				fixCollisions(
+					items.filter((i) => i.sectionId === section.id),
+					item,
+					isMobile
+				);
+				onlayoutchange();
+			}}
+		>
+			<EditingCard bind:item={items[idx]} />
+		</BaseEditingCard>
+	{/each}
+</EditableGrid>
diff --git a/src/lib/sections/GridSection/GridSection.svelte b/src/lib/sections/GridSection/GridSection.svelte
new file mode 100644
index 0000000..632fb80
--- /dev/null
+++ b/src/lib/sections/GridSection/GridSection.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { SectionContentProps } from '../types';
+	import BaseCard from '$lib/cards/_base/BaseCard/BaseCard.svelte';
+	import Card from '$lib/cards/_base/Card/Card.svelte';
+	import { sortItems } from '$lib/helper';
+
+	let { section, items, isMobile }: SectionContentProps = $props();
+
+	let maxHeight = $derived(
+		items.reduce(
+			(max, item) => Math.max(max, isMobile ? item.mobileY + item.mobileH : item.y + item.h),
+			0
+		)
+	);
+</script>
+
+<div class="@container/grid relative col-span-3 px-2 py-8 lg:px-8">
+	{#each items.toSorted(sortItems) as item (item.id)}
+		<BaseCard {item}>
+			<Card {item} />
+		</BaseCard>
+	{/each}
+	<div style="height: {(maxHeight / 8) * 100}cqw;"></div>
+</div>
diff --git a/src/lib/sections/GridSection/add-item.ts b/src/lib/sections/GridSection/add-item.ts
new file mode 100644
index 0000000..4a79cd0
--- /dev/null
+++ b/src/lib/sections/GridSection/add-item.ts
@@ -0,0 +1,45 @@
+import { COLUMNS } from '$lib';
+import {
+	setPositionOfNewItem,
+	fixCollisions,
+	compactItems,
+	getViewportCenterGridY
+} from '$lib/layout';
+import type { Item } from '$lib/types';
+import type { AddItemOptions } from '../types';
+
+export function addItemToGridSection(
+	item: Item,
+	allItems: Item[],
+	options: AddItemOptions
+): Item[] {
+	const sectionItems = allItems.filter((i) => i.sectionId === item.sectionId);
+	const viewportCenter = options.gridRef
+		? getViewportCenterGridY(options.gridRef, options.isMobile)
+		: undefined;
+	setPositionOfNewItem(item, sectionItems, viewportCenter);
+
+	const newItems = [...allItems, item];
+	const updatedSectionItems = newItems.filter((i) => i.sectionId === item.sectionId);
+
+	fixCollisions(updatedSectionItems, item, false, true);
+	fixCollisions(updatedSectionItems, item, true, true);
+	compactItems(updatedSectionItems, false);
+	compactItems(updatedSectionItems, true);
+
+	return newItems;
+}
+
+export function positionItemAtGridPos(item: Item, gridX: number, gridY: number, isMobile: boolean) {
+	if (isMobile) {
+		item.mobileX = gridX;
+		item.mobileY = gridY;
+		item.x = Math.floor((COLUMNS - item.w) / 2);
+		item.y = Math.max(0, Math.round(gridY / 2));
+	} else {
+		item.x = gridX;
+		item.y = gridY;
+		item.mobileX = Math.floor((COLUMNS - item.mobileW) / 2);
+		item.mobileY = Math.max(0, Math.round(gridY * 2));
+	}
+}
diff --git a/src/lib/sections/GridSection/index.ts b/src/lib/sections/GridSection/index.ts
new file mode 100644
index 0000000..734e8f0
--- /dev/null
+++ b/src/lib/sections/GridSection/index.ts
@@ -0,0 +1,37 @@
+import { fixCollisions, compactItems } from '$lib/layout';
+import type { Item } from '$lib/types';
+import type { SectionDefinition } from '../types';
+import { addItemToGridSection } from './add-item';
+import EditingGridSection from './EditingGridSection.svelte';
+import GridSection from './GridSection.svelte';
+
+function getSectionItems(allItems: Item[], sectionId: string) {
+	return allItems.filter((i) => i.sectionId === sectionId);
+}
+
+export const GridSectionDefinition: SectionDefinition = {
+	type: 'grid',
+	contentComponent: GridSection,
+	editingContentComponent: EditingGridSection,
+	addItem: (item, allItems, options) => addItemToGridSection(item, allItems, options),
+	deleteItem: (itemId, allItems, sectionId) => {
+		const newItems = allItems.filter((i) => i.id !== itemId);
+		const sectionItems = getSectionItems(newItems, sectionId);
+		compactItems(sectionItems, false);
+		compactItems(sectionItems, true);
+		return newItems;
+	},
+	resizeItem: (item, allItems, w, h, isMobile) => {
+		if (isMobile) {
+			item.mobileW = w;
+			item.mobileH = h;
+		} else {
+			item.w = w;
+			item.h = h;
+		}
+		const sectionItems = getSectionItems(allItems, item.sectionId!);
+		fixCollisions(sectionItems, item, isMobile);
+	},
+	name: 'Grid',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>`
+};
diff --git a/src/lib/sections/index.ts b/src/lib/sections/index.ts
new file mode 100644
index 0000000..0821e19
--- /dev/null
+++ b/src/lib/sections/index.ts
@@ -0,0 +1,12 @@
+import type { SectionDefinition } from './types';
+import { GridSectionDefinition } from './GridSection';
+
+export const AllSectionDefinitions = [GridSectionDefinition] as const;
+
+export const SectionDefinitionsByType = AllSectionDefinitions.reduce(
+	(acc, def) => {
+		acc[def.type] = def;
+		return acc;
+	},
+	{} as Record<string, SectionDefinition>
+);
diff --git a/src/lib/sections/migrate.ts b/src/lib/sections/migrate.ts
new file mode 100644
index 0000000..e0a8ff0
--- /dev/null
+++ b/src/lib/sections/migrate.ts
@@ -0,0 +1,27 @@
+import * as TID from '@atcute/tid';
+import type { Item, SectionRecord } from '$lib/types';
+
+export function ensureSections(
+	storedSections: SectionRecord[],
+	cards: Item[],
+	page: string
+): { sections: SectionRecord[]; cards: Item[] } {
+	if (storedSections.length > 0) {
+		const firstGridId =
+			storedSections.find((s) => s.sectionType === 'grid')?.id ?? storedSections[0].id;
+		const fixedCards = cards.map((c) => (c.sectionId ? c : { ...c, sectionId: firstGridId }));
+		return { sections: storedSections, cards: fixedCards };
+	}
+
+	const newId = TID.now();
+	const synthesized: SectionRecord = {
+		id: newId,
+		sectionType: 'grid',
+		page,
+		index: 0,
+		sectionData: {},
+		version: 1
+	};
+	const fixedCards = cards.map((c) => ({ ...c, sectionId: c.sectionId ?? newId }));
+	return { sections: [synthesized], cards: fixedCards };
+}
diff --git a/src/lib/sections/types.ts b/src/lib/sections/types.ts
new file mode 100644
index 0000000..c4ee5bf
--- /dev/null
+++ b/src/lib/sections/types.ts
@@ -0,0 +1,36 @@
+import type { Component } from 'svelte';
+import type { Item, SectionRecord } from '$lib/types';
+
+export type SectionContentProps = {
+	section: SectionRecord;
+	items: Item[];
+	isMobile: boolean;
+};
+
+export type EditingSectionContentProps = SectionContentProps & {
+	selectedCardId: string | null;
+	isCoarse: boolean;
+	isActive: boolean;
+	onlayoutchange: () => void;
+	ondeselect: () => void;
+	onadditem: (item: Item) => void;
+	oncreatefilecards: (files: File[]) => Promise<Item[]>;
+	onactivate: () => void;
+	onrefchange: (el: HTMLDivElement | undefined) => void;
+};
+
+export type AddItemOptions = {
+	gridRef?: HTMLDivElement;
+	isMobile: boolean;
+};
+
+export type SectionDefinition = {
+	type: string;
+	contentComponent: Component<SectionContentProps>;
+	editingContentComponent: Component<EditingSectionContentProps>;
+	addItem: (item: Item, allItems: Item[], options: AddItemOptions) => Item[];
+	deleteItem: (itemId: string, allItems: Item[], sectionId: string) => Item[];
+	resizeItem: (item: Item, allItems: Item[], w: number, h: number, isMobile: boolean) => void;
+	name: string;
+	icon?: string;
+};
diff --git a/src/lib/types.ts b/src/lib/types.ts
index d6728f6..d5fbd41 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -25,6 +25,8 @@ export type Item = {
 	version?: number;
 
 	page?: string;
+
+	sectionId?: string;
 };
 
 export type PronounSet = {
@@ -40,6 +42,17 @@ export type PronounsRecord = {
 	};
 };
 
+export type SectionRecord = {
+	id: string;
+	sectionType: string;
+	page: string;
+	index: number;
+	sectionData: Record<string, any>;
+	name?: string;
+	updatedAt?: string;
+	version?: number;
+};
+
 export type WebsiteData = {
 	page: string;
 	did: string;
@@ -80,6 +93,8 @@ export type WebsiteData = {
 	pronouns?: string;
 	pronounsRecord?: PronounsRecord;
 
+	sections: SectionRecord[];
+
 	additionalData: Record<string, unknown>;
 	updatedAt: number;
 	version?: number;
diff --git a/src/lib/website/AddSectionButton.svelte b/src/lib/website/AddSectionButton.svelte
new file mode 100644
index 0000000..dfeca57
--- /dev/null
+++ b/src/lib/website/AddSectionButton.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Button, Popover } from '@foxui/core';
+	import { AllSectionDefinitions } from '$lib/sections';
+
+	let {
+		onadd
+	}: {
+		onadd: (sectionType: string) => void;
+	} = $props();
+
+	let popoverOpen = $state(false);
+</script>
+
+<div class="pointer-events-auto relative col-span-3 flex w-full items-center justify-center py-1">
+	<Popover bind:open={popoverOpen}>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				type="button"
+				class="border-base-300 dark:border-base-700 hover:border-accent-500 hover:bg-accent-500/10 text-base-400 dark:text-base-500 hover:text-accent-600 dark:hover:text-accent-400 flex cursor-pointer items-center gap-1 rounded-full border bg-white/50 px-3 py-1 text-xs font-medium opacity-0 backdrop-blur-sm transition-all duration-150 group-hover/wrapper:opacity-60 hover:opacity-100 focus:opacity-100 dark:bg-black/30"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="size-3"
+				>
+					<path d="M12 5v14" />
+					<path d="M5 12h14" />
+				</svg>
+				Add section
+			</button>
+		{/snippet}
+		<div class="flex flex-col gap-1 p-1">
+			{#each AllSectionDefinitions as def (def.type)}
+				<Button
+					variant="ghost"
+					size="sm"
+					class="justify-start gap-2 text-sm"
+					onclick={() => {
+						onadd(def.type);
+						popoverOpen = false;
+					}}
+				>
+					{#if def.icon}
+						<span class="text-base-500 dark:text-base-400">
+							{@html def.icon}
+						</span>
+					{/if}
+					{def.name}
+				</Button>
+			{/each}
+		</div>
+	</Popover>
+</div>
diff --git a/src/lib/website/EditBar.svelte b/src/lib/website/EditBar.svelte
index 293a085..d7161ed 100644
--- a/src/lib/website/EditBar.svelte
+++ b/src/lib/website/EditBar.svelte
@@ -17,8 +17,7 @@
 
 		save,
 
-		handleImageInputChange,
-		handleVideoInputChange,
+		handleFileInputChange,
 
 		newCard,
 		addLink,
@@ -30,7 +29,8 @@
 		isCoarse = false,
 		ondeselect,
 		ondelete,
-		onsetsize
+		onsetsize,
+		showSectionsModal
 	}: {
 		data: WebsiteData;
 
@@ -41,8 +41,7 @@
 
 		save: () => Promise<void>;
 
-		handleImageInputChange: (evt: Event) => void;
-		handleVideoInputChange: (evt: Event) => void;
+		handleFileInputChange: (evt: Event) => void;
 
 		newCard: (type?: string, cardData?: any) => void;
 		addLink: (url: string) => void;
@@ -55,11 +54,11 @@
 		ondeselect?: () => void;
 		ondelete?: () => void;
 		onsetsize?: (w: number, h: number) => void;
+		showSectionsModal: () => void;
 	} = $props();
 
 	let linkPopoverOpen = $state(false);
 	let imageInputRef: HTMLInputElement | undefined = $state();
-	let videoInputRef: HTMLInputElement | undefined = $state();
 
 	function getShareUrl() {
 		const base = typeof window !== 'undefined' ? window.location.origin : '';
@@ -136,24 +135,14 @@
 
 <input
 	type="file"
-	accept="image/*"
-	onchange={handleImageInputChange}
+	accept="image/*,video/*"
+	onchange={handleFileInputChange}
 	class="hidden"
-	id="image-input"
+	id="file-input"
 	multiple
 	bind:this={imageInputRef}
 />
 
-<input
-	type="file"
-	accept="video/*"
-	onchange={handleVideoInputChange}
-	class="hidden"
-	id="video-input"
-	multiple
-	bind:this={videoInputRef}
-/>
-
 {#if dev || (user.isLoggedIn && user.profile?.did === data.did)}
 	<Navbar
 		class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto"
@@ -354,6 +343,22 @@
 			</div>
 		{/if}
 		<div class={['flex items-center gap-2', showMobileEditControls ? 'hidden' : '']}>
+			<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showSectionsModal}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="size-5"
+				>
+					<rect x="3" y="3" width="18" height="18" rx="2" />
+					<path d="M3 9h18" />
+					<path d="M3 15h18" />
+				</svg>
+			</Button>
 			<Toggle
 				class="hidden bg-transparent backdrop-blur-none lg:block dark:bg-transparent"
 				bind:pressed={showingMobileView}
diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index f25973f..c4ab67f 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Button, Modal, toast, Toaster } from '@foxui/core';
-	import { COLUMNS } from '$lib';
 	import {
 		checkAndUploadImage,
 		createEmptyCard,
@@ -16,37 +15,30 @@
 	import EditableProfile from './EditableProfile.svelte';
 	import type { Item, WebsiteData } from '../types';
 	import { innerWidth } from 'svelte/reactivity/window';
-	import EditingCard from '../cards/_base/Card/EditingCard.svelte';
 	import { AllCardDefinitions, CardDefinitionsByType } from '../cards';
 	import { tick, type Component } from 'svelte';
 	import type { CardDefinition, CreationModalComponentProps } from '../cards/types';
-	import { dev } from '$app/environment';
 	import { page } from '$app/state';
 	import { setIsCoarse, setIsMobile, setSelectedCardId, setSelectCard } from './context';
-	import BaseEditingCard from '../cards/_base/BaseCard/BaseEditingCard.svelte';
 	import Context from './Context.svelte';
 	import Head from './Head.svelte';
 	import Account from './Account.svelte';
 	import EditBar from './EditBar.svelte';
 	import SaveModal from './SaveModal.svelte';
 	import FloatingEditButton from './FloatingEditButton.svelte';
-	import { user, resolveHandle, listRecords, getCDNImageBlobUrl } from '$lib/atproto';
+	import { user } from '$lib/atproto';
 	import * as TID from '@atcute/tid';
 	import { launchConfetti } from '@foxui/visual';
 	import Controls from './Controls.svelte';
+	import SectionsModal from './SectionsModal.svelte';
+	import AddSectionButton from './AddSectionButton.svelte';
+	import { createImageCard, createVideoCard } from './file-processing';
 	import CardCommand from '$lib/components/card-command/CardCommand.svelte';
 	import ImageViewerProvider from '$lib/components/image-viewer/ImageViewerProvider.svelte';
 	import { SvelteMap } from 'svelte/reactivity';
-	import {
-		fixCollisions,
-		compactItems,
-		fixAllCollisions,
-		setPositionOfNewItem,
-		shouldMirror,
-		mirrorLayout,
-		getViewportCenterGridY,
-		EditableGrid
-	} from '$lib/layout';
+	import { shouldMirror, mirrorLayout } from '$lib/layout';
+	import { SectionDefinitionsByType } from '$lib/sections';
+	import type { SectionRecord } from '$lib/types';
 
 	let {
 		data
@@ -65,19 +57,14 @@
 		return `${origin}/${actor}/og-new.png`;
 	});
 
-	// Snapshot the original cards so savePage can detect deletions.
+	// Snapshot the original cards and sections so savePage can detect deletions.
 	const originalCards: Item[] = structuredClone(data.cards);
+	const originalSections: SectionRecord[] = structuredClone(data.sections);
 
 	// svelte-ignore state_referenced_locally
 	let items: Item[] = $state(data.cards);
-
-	// Flag set by checkData when overlapping cards were auto-fixed on load
-	let showLayoutFixModal = $state(data.hasLayoutIssue ?? false);
-
-	function acknowledgeLayoutFix() {
-		hasUnsavedChanges = true;
-		showLayoutFixModal = false;
-	}
+	// svelte-ignore state_referenced_locally
+	let sections: SectionRecord[] = $state(data.sections);
 
 	// svelte-ignore state_referenced_locally
 	let publication = $state(JSON.stringify(data.publication));
@@ -105,32 +92,7 @@
 		}
 	});
 
-	// Warn user before closing tab if there are unsaved changes
-	$effect(() => {
-		function handleBeforeUnload(e: BeforeUnloadEvent) {
-			if (hasUnsavedChanges) {
-				e.preventDefault();
-				return '';
-			}
-		}
-
-		window.addEventListener('beforeunload', handleBeforeUnload);
-		return () => window.removeEventListener('beforeunload', handleBeforeUnload);
-	});
-
-	// Press Escape to deselect the currently selected card.
-	$effect(() => {
-		function handleKeydown(e: KeyboardEvent) {
-			if (e.key === 'Escape' && selectedCardId) {
-				selectedCardId = null;
-			}
-		}
-
-		window.addEventListener('keydown', handleKeydown);
-		return () => window.removeEventListener('keydown', handleKeydown);
-	});
-
-	let gridContainer: HTMLDivElement | undefined = $state();
+	let gridRefs = new SvelteMap<string, HTMLDivElement>();
 
 	let showingMobileView = $state(false);
 	let isMobile = $derived(showingMobileView || (innerWidth.current ?? 1000) < 1024);
@@ -165,20 +127,15 @@
 		selectedCardId = id;
 	});
 
-	const getY = (item: Item) => (isMobile ? (item.mobileY ?? item.y) : item.y);
-	const getH = (item: Item) => (isMobile ? (item.mobileH ?? item.h) : item.h);
-	let maxHeight = $derived(items.reduce((max, item) => Math.max(max, getY(item) + getH(item)), 0));
+	let activeSectionId = $state(sections[0]?.id);
+	let gridContainer = $derived(
+		activeSectionId ? gridRefs.get(activeSectionId) : gridRefs.values().next().value
+	);
 
 	function newCard(type: string = 'link', cardData?: any) {
 		selectedCardId = null;
 
-		// close sidebar if open
-		const popover = document.getElementById('mobile-menu');
-		if (popover) {
-			popover.hidePopover();
-		}
-
-		let item = createEmptyCard(data.page);
+		let item = createEmptyCard(data.page, activeSectionId);
 		item.cardType = type;
 
 		item.cardData = cardData ?? {};
@@ -213,31 +170,46 @@
 		setTimeout(restore, 50);
 	}
 
-	async function saveNewItem() {
-		if (!newItem.item) return;
-		const item = newItem.item;
+	function addItem(item: Item) {
+		const sectionId = item.sectionId;
+		const section = sections.find((s) => s.id === sectionId);
+		const def = section ? SectionDefinitionsByType[section.sectionType] : undefined;
+		const ref = sectionId ? gridRefs.get(sectionId) : gridContainer;
 
-		const viewportCenter = gridContainer
-			? getViewportCenterGridY(gridContainer, isMobile)
-			: undefined;
-		setPositionOfNewItem(item, items, viewportCenter);
+		if (def?.addItem) {
+			items = def.addItem(item, items, { gridRef: ref, isMobile });
+		} else {
+			items = [...items, item];
+		}
 
-		items = [...items, item];
+		onLayoutChanged();
+		return ref;
+	}
 
-		// Push overlapping items down, then compact to fill gaps
-		fixCollisions(items, item, false, true);
-		fixCollisions(items, item, true, true);
-		compactItems(items, false);
-		compactItems(items, true);
+	async function createFileCards(files: File[]): Promise<Item[]> {
+		const cards: Item[] = [];
+		for (const file of files) {
+			if (file.type.startsWith('video/')) {
+				cards.push(createVideoCard(file, data.page));
+			} else {
+				cards.push(await createImageCard(file, data.page));
+			}
+		}
+		return cards;
+	}
 
-		onLayoutChanged();
+	async function saveNewItem() {
+		if (!newItem.item) return;
+		const item = newItem.item;
+
+		const ref = addItem(item);
 
 		newItem = {};
 
 		await tick();
 		cleanupDialogArtifacts();
 
-		scrollToItem(item, isMobile, gridContainer);
+		scrollToItem(item, isMobile, ref);
 	}
 
 	let isSaving = $state(false);
@@ -261,7 +233,8 @@
 			data.publication.preferences ??= {};
 			data.publication.preferences.editedOn = editedOn;
 
-			await savePage(data, items, originalCards, publication);
+			data.sections = sections;
+			await savePage(data, items, originalCards, publication, originalSections);
 
 			publication = JSON.stringify(data.publication);
 			savedPronouns = JSON.stringify(data.pronounsRecord);
@@ -281,6 +254,41 @@
 		}
 	}
 
+	let showSectionsModal = $state(false);
+
+	function addSection(sectionType: string, afterIndex?: number) {
+		const sorted = sections.toSorted((a, b) => a.index - b.index);
+		let newIndex: number;
+		if (afterIndex !== undefined && afterIndex < sorted.length) {
+			const curr = sorted[afterIndex].index;
+			const next = afterIndex + 1 < sorted.length ? sorted[afterIndex + 1].index : curr + 200;
+			newIndex = Math.floor((curr + next) / 2);
+		} else {
+			newIndex = (sorted[sorted.length - 1]?.index ?? 0) + 100;
+		}
+
+		const section: SectionRecord = {
+			id: TID.now(),
+			sectionType,
+			page: data.page,
+			index: newIndex,
+			sectionData: {},
+			version: 1
+		};
+		sections = [...sections, section];
+		hasUnsavedChanges = true;
+	}
+
+	function deleteSection(id: string) {
+		if (sections.length <= 1) return;
+		items = items.filter((i) => i.sectionId !== id);
+		sections = sections.filter((s) => s.id !== id);
+		if (activeSectionId === id) {
+			activeSectionId = sections[0]?.id;
+		}
+		hasUnsavedChanges = true;
+	}
+
 	let linkValue = $state('');
 
 	function addLink(url: string, specificCardDef?: CardDefinition) {
@@ -289,7 +297,7 @@
 			toast.error('invalid link');
 			return;
 		}
-		let item = createEmptyCard(data.page);
+		let item = createEmptyCard(data.page, activeSectionId);
 
 		if (specificCardDef?.onUrlHandler?.(link, item)) {
 			item.cardType = specificCardDef.type;
@@ -313,204 +321,37 @@
 		}
 	}
 
-	function getImageDimensions(src: string): Promise<{ width: number; height: number }> {
-		return new Promise((resolve) => {
-			const img = new Image();
-			img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
-			img.onerror = () => resolve({ width: 1, height: 1 });
-			img.src = src;
-		});
-	}
-
-	function getBestGridSize(
-		imageWidth: number,
-		imageHeight: number,
-		candidates: [number, number][]
-	): [number, number] {
-		const imageRatio = imageWidth / imageHeight;
-		let best: [number, number] = candidates[0];
-		let bestDiff = Infinity;
-
-		for (const candidate of candidates) {
-			const gridRatio = candidate[0] / candidate[1];
-			const diff = Math.abs(Math.log(imageRatio) - Math.log(gridRatio));
-			if (diff < bestDiff) {
-				bestDiff = diff;
-				best = candidate;
-			}
-		}
-
-		return best;
-	}
-
-	const desktopSizeCandidates: [number, number][] = [
-		[2, 2],
-		[2, 4],
-		[4, 2],
-		[4, 4],
-		[4, 6],
-		[6, 4]
-	];
-	const mobileSizeCandidates: [number, number][] = [
-		[4, 4],
-		[4, 6],
-		[4, 8],
-		[6, 4],
-		[8, 4],
-		[8, 6]
-	];
-
-	async function processImageFile(file: File, gridX?: number, gridY?: number) {
-		const isGif = file.type === 'image/gif';
-
-		// Don't compress GIFs to preserve animation
-		const objectUrl = URL.createObjectURL(file);
-
-		let item = createEmptyCard(data.page);
-
-		item.cardType = isGif ? 'gif' : 'image';
-		item.cardData = {
-			image: { blob: file, objectUrl }
-		};
-
-		// Size card based on image aspect ratio
-		const { width, height } = await getImageDimensions(objectUrl);
-		const [dw, dh] = getBestGridSize(width, height, desktopSizeCandidates);
-		const [mw, mh] = getBestGridSize(width, height, mobileSizeCandidates);
-		item.w = dw;
-		item.h = dh;
-		item.mobileW = mw;
-		item.mobileH = mh;
-
-		// If grid position is provided (image dropped on grid)
-		if (gridX !== undefined && gridY !== undefined) {
-			if (isMobile) {
-				item.mobileX = gridX;
-				item.mobileY = gridY;
-				// Derive desktop Y from mobile
-				item.x = Math.floor((COLUMNS - item.w) / 2);
-				item.x = Math.floor(item.x / 2) * 2;
-				item.y = Math.max(0, Math.round(gridY / 2));
-			} else {
-				item.x = gridX;
-				item.y = gridY;
-				// Derive mobile Y from desktop
-				item.mobileX = Math.floor((COLUMNS - item.mobileW) / 2);
-				item.mobileX = Math.floor(item.mobileX / 2) * 2;
-				item.mobileY = Math.max(0, Math.round(gridY * 2));
-			}
-
-			items = [...items, item];
-			fixCollisions(items, item, isMobile);
-			fixCollisions(items, item, !isMobile);
-		} else {
-			const viewportCenter = gridContainer
-				? getViewportCenterGridY(gridContainer, isMobile)
-				: undefined;
-			setPositionOfNewItem(item, items, viewportCenter);
-			items = [...items, item];
-			fixCollisions(items, item, false, true);
-			fixCollisions(items, item, true, true);
-			compactItems(items, false);
-			compactItems(items, true);
-		}
-
-		onLayoutChanged();
-
-		await tick();
-
-		scrollToItem(item, isMobile, gridContainer);
-	}
-
-	async function handleFileDrop(files: File[], gridX: number, gridY: number) {
-		for (let i = 0; i < files.length; i++) {
-			// First image gets the drop position, rest use normal placement
-			if (i === 0) {
-				await processImageFile(files[i], gridX, gridY);
-			} else {
-				await processImageFile(files[i]);
-			}
-		}
-	}
-
-	async function handleImageInputChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		if (!target.files || target.files.length < 1) return;
-
-		const files = Array.from(target.files);
-
-		if (files.length === 1) {
-			// Single file: use default positioning
-			await processImageFile(files[0]);
-		} else {
-			// Multiple files: place in grid pattern starting from first available position
-			let gridX = 0;
-			let gridY = maxHeight;
-			const cardW = isMobile ? 4 : 2;
-			const cardH = isMobile ? 4 : 2;
-
-			for (const file of files) {
-				await processImageFile(file, gridX, gridY);
-
-				// Move to next cell position
-				gridX += cardW;
-				if (gridX + cardW > COLUMNS) {
-					gridX = 0;
-					gridY += cardH;
-				}
-			}
-		}
-
-		// Reset the input so the same file can be selected again
-		target.value = '';
-	}
-
-	async function processVideoFile(file: File) {
-		const objectUrl = URL.createObjectURL(file);
-
-		let item = createEmptyCard(data.page);
-
-		item.cardType = 'video';
-		item.cardData = {
-			blob: file,
-			objectUrl
-		};
-
-		const viewportCenter = gridContainer
-			? getViewportCenterGridY(gridContainer, isMobile)
-			: undefined;
-		setPositionOfNewItem(item, items, viewportCenter);
-		items = [...items, item];
-		fixCollisions(items, item, false, true);
-		fixCollisions(items, item, true, true);
-		compactItems(items, false);
-		compactItems(items, true);
-
-		onLayoutChanged();
-
-		await tick();
-
-		scrollToItem(item, isMobile, gridContainer);
-	}
-
-	async function handleVideoInputChange(event: Event) {
+	async function handleFileInputChange(event: Event) {
 		const target = event.target as HTMLInputElement;
 		if (!target.files || target.files.length < 1) return;
 
-		const files = Array.from(target.files);
-
-		for (const file of files) {
-			await processVideoFile(file);
+		const cards = await createFileCards(Array.from(target.files));
+		for (const card of cards) {
+			card.sectionId = activeSectionId;
+			addItem(card);
 		}
 
-		// Reset the input so the same file can be selected again
 		target.value = '';
 	}
 
 	let showCardCommand = $state(false);
 </script>
 
+<svelte:window
+	onbeforeunload={(e) => {
+		if (hasUnsavedChanges) {
+			e.preventDefault();
+			return '';
+		}
+	}}
+/>
+
 <svelte:body
+	onkeydown={(e) => {
+		if (e.key === 'Escape' && selectedCardId) {
+			selectedCardId = null;
+		}
+	}}
 	onpaste={(event) => {
 		if (isTyping()) return;
 
@@ -537,21 +378,14 @@
 	<CardCommand
 		bind:open={showCardCommand}
 		onselect={(cardDef: CardDefinition) => {
-			if (cardDef.type === 'image') {
-				const input = document.getElementById('image-input') as HTMLInputElement;
+			if (cardDef.type === 'image' || cardDef.type === 'video') {
+				const input = document.getElementById('file-input') as HTMLInputElement;
 				if (input) {
 					input.click();
 					return;
 				}
-			} else if (cardDef.type === 'video') {
-				const input = document.getElementById('video-input') as HTMLInputElement;
-				if (input) {
-					input.click();
-					return;
-				}
-			} else {
-				newCard(cardDef.type);
 			}
+			newCard(cardDef.type);
 		}}
 		onlink={(url, cardDef) => {
 			addLink(url, cardDef);
@@ -588,31 +422,12 @@
 		page={data.page}
 	/>
 
-	<Modal open={showLayoutFixModal} closeButton={false}>
-		<div class="flex flex-col items-center gap-4 text-center">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				class="size-10 text-amber-500"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
-				/>
-			</svg>
-			<p class="text-base-700 dark:text-base-300 text-xl font-bold">Layout Auto-Fixed</p>
-			<p class="text-base-500 dark:text-base-400 text-sm">
-				Your card layout had overlapping cards from an older version. This has been automatically
-				fixed, but some cards may have moved. Please check your layout and rearrange if needed, then
-				save to keep the changes.
-			</p>
-			<Button class="w-full" onclick={acknowledgeLayoutFix}>Got it</Button>
-		</div>
-	</Modal>
+	<SectionsModal
+		bind:open={showSectionsModal}
+		bind:sections
+		ondelete={deleteSection}
+		onlayoutchange={() => (hasUnsavedChanges = true)}
+	/>
 
 	<Modal open={showMobileWarning} closeButton={false}>
 		<div class="flex flex-col items-center gap-4 text-center">
@@ -640,7 +455,7 @@
 
 	<div
 		class={[
-			'@container/wrapper relative w-full',
+			'group/wrapper @container/wrapper relative w-full',
 			showingMobileView
 				? 'bg-base-50 dark:bg-base-900 my-4 min-h-[calc(100dvh-2em)] overflow-hidden rounded-2xl lg:mx-auto lg:w-90'
 				: ''
@@ -659,44 +474,36 @@
 			]}
 		>
 			<div class="pointer-events-none"></div>
-			<EditableGrid
-				bind:items
-				bind:ref={gridContainer}
-				{isMobile}
-				{selectedCardId}
-				{isCoarse}
-				onlayoutchange={onLayoutChanged}
-				ondeselect={() => {
-					selectedCardId = null;
-				}}
-				onfiledrop={handleFileDrop}
-			>
-				{#each items as item, i (item.id)}
-					<BaseEditingCard
-						bind:item={items[i]}
-						ondelete={() => {
-							items = items.filter((it) => it !== item);
-							compactItems(items, false);
-							compactItems(items, true);
-							onLayoutChanged();
-						}}
-						onsetsize={(newW: number, newH: number) => {
-							if (isMobile) {
-								item.mobileW = newW;
-								item.mobileH = newH;
-							} else {
-								item.w = newW;
-								item.h = newH;
-							}
-
-							fixCollisions(items, item, isMobile);
-							onLayoutChanged();
-						}}
-					>
-						<EditingCard bind:item={items[i]} />
-					</BaseEditingCard>
+			<div class="@5xl/wrapper:col-start-2 @5xl/wrapper:-col-end-1">
+				{#each sections.toSorted((a, b) => a.index - b.index) as section, i (section.id)}
+					{@const def = SectionDefinitionsByType[section.sectionType]}
+					{#if def}
+						<def.editingContentComponent
+							{section}
+							bind:items
+							{isMobile}
+							{selectedCardId}
+							{isCoarse}
+							isActive={activeSectionId === section.id}
+							onrefchange={(el) => {
+								if (el) gridRefs.set(section.id, el);
+								else gridRefs.delete(section.id);
+							}}
+							onlayoutchange={onLayoutChanged}
+							ondeselect={() => {
+								selectedCardId = null;
+							}}
+							onadditem={(item) => addItem(item)}
+							oncreatefilecards={createFileCards}
+							onactivate={() => {
+								activeSectionId = section.id;
+							}}
+						/>
+					{/if}
+					<AddSectionButton onadd={(type) => addSection(type, i)} />
 				{/each}
-			</EditableGrid>
+				<div class="h-20"></div>
+			</div>
 		</div>
 	</div>
 
@@ -709,8 +516,7 @@
 		{newCard}
 		{addLink}
 		{save}
-		{handleImageInputChange}
-		{handleVideoInputChange}
+		{handleFileInputChange}
 		showCardCommand={() => {
 			showCardCommand = true;
 		}}
@@ -722,37 +528,33 @@
 		}}
 		ondelete={() => {
 			if (selectedCard) {
-				items = items.filter((it) => it.id !== selectedCardId);
-				compactItems(items, false);
-				compactItems(items, true);
+				const section = sections.find((s) => s.id === selectedCard!.sectionId);
+				const def = section ? SectionDefinitionsByType[section.sectionType] : undefined;
+				if (def?.deleteItem) {
+					items = def.deleteItem(selectedCardId!, items, selectedCard.sectionId!);
+				} else {
+					items = items.filter((it) => it.id !== selectedCardId);
+				}
 				onLayoutChanged();
 				selectedCardId = null;
 			}
 		}}
 		onsetsize={(w: number, h: number) => {
 			if (selectedCard) {
-				if (isMobile) {
-					selectedCard.mobileW = w;
-					selectedCard.mobileH = h;
-				} else {
-					selectedCard.w = w;
-					selectedCard.h = h;
+				const section = sections.find((s) => s.id === selectedCard!.sectionId);
+				const def = section ? SectionDefinitionsByType[section.sectionType] : undefined;
+				if (def?.resizeItem) {
+					def.resizeItem(selectedCard, items, w, h, isMobile);
 				}
-				fixCollisions(items, selectedCard, isMobile);
 				onLayoutChanged();
 			}
 		}}
+		showSectionsModal={() => {
+			showSectionsModal = true;
+		}}
 	/>
 
 	<Toaster />
 
 	<FloatingEditButton {data} />
-
-	{#if dev}
-		<div
-			class="bg-base-900/70 text-base-100 fixed top-2 right-2 z-50 flex items-center gap-2 rounded px-2 py-1 font-mono text-xs"
-		>
-			<span>editedOn: {editedOn}</span>
-		</div>
-	{/if}
 </Context>
diff --git a/src/lib/website/SectionsModal.svelte b/src/lib/website/SectionsModal.svelte
new file mode 100644
index 0000000..c27be42
--- /dev/null
+++ b/src/lib/website/SectionsModal.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { Button, Modal } from '@foxui/core';
+	import type { SectionRecord } from '$lib/types';
+	import { SectionDefinitionsByType } from '$lib/sections';
+
+	let {
+		open = $bindable(false),
+		sections = $bindable(),
+		ondelete,
+		onlayoutchange
+	}: {
+		open: boolean;
+		sections: SectionRecord[];
+		ondelete: (id: string) => void;
+		onlayoutchange: () => void;
+	} = $props();
+
+	function moveUp(index: number) {
+		if (index <= 0) return;
+		const sorted = sections.toSorted((a, b) => a.index - b.index);
+		const prev = sorted[index - 1];
+		const curr = sorted[index];
+		const tmpIndex = prev.index;
+		prev.index = curr.index;
+		curr.index = tmpIndex;
+		sections = [...sections];
+		onlayoutchange();
+	}
+
+	function moveDown(index: number) {
+		const sorted = sections.toSorted((a, b) => a.index - b.index);
+		if (index >= sorted.length - 1) return;
+		const next = sorted[index + 1];
+		const curr = sorted[index];
+		const tmpIndex = next.index;
+		next.index = curr.index;
+		curr.index = tmpIndex;
+		sections = [...sections];
+		onlayoutchange();
+	}
+</script>
+
+<Modal bind:open>
+	<div class="flex flex-col gap-4">
+		<h2 class="text-lg font-semibold">Sections</h2>
+
+		{#if sections.length === 0}
+			<p class="text-base-500 dark:text-base-400 text-sm">No sections yet.</p>
+		{/if}
+
+		<div class="flex flex-col gap-2">
+			{#each sections.toSorted((a, b) => a.index - b.index) as section, i (section.id)}
+				{@const def = SectionDefinitionsByType[section.sectionType]}
+				<div
+					class="border-base-200 dark:border-base-800 flex items-center gap-3 rounded-xl border p-3"
+				>
+					{#if def?.icon}
+						<span class="text-base-500 dark:text-base-400 shrink-0">
+							{@html def.icon}
+						</span>
+					{/if}
+
+					<div class="flex flex-1 flex-col">
+						<span class="text-sm font-medium">
+							{section.name || def?.name || section.sectionType}
+						</span>
+					</div>
+
+					<div class="flex items-center gap-1">
+						<Button
+							size="sm"
+							variant="ghost"
+							disabled={i === 0}
+							onclick={() => moveUp(i)}
+							class="size-8 min-w-8"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="size-4"
+							>
+								<path d="m18 15-6-6-6 6" />
+							</svg>
+						</Button>
+						<Button
+							size="sm"
+							variant="ghost"
+							disabled={i === sections.length - 1}
+							onclick={() => moveDown(i)}
+							class="size-8 min-w-8"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="size-4"
+							>
+								<path d="m6 9 6 6 6-6" />
+							</svg>
+						</Button>
+						{#if sections.length > 1}
+							<Button
+								size="sm"
+								variant="ghost"
+								onclick={() => ondelete(section.id)}
+								class="size-8 min-w-8 text-rose-500"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="size-4"
+								>
+									<path d="M3 6h18" />
+									<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+									<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+								</svg>
+							</Button>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<Button variant="ghost" onclick={() => (open = false)}>Done</Button>
+	</div>
+</Modal>
diff --git a/src/lib/website/Website.svelte b/src/lib/website/Website.svelte
index e879387..1455315 100644
--- a/src/lib/website/Website.svelte
+++ b/src/lib/website/Website.svelte
@@ -1,19 +1,17 @@
 <script lang="ts">
-	import Card from '../cards/_base/Card/Card.svelte';
 	import Profile from './Profile.svelte';
 	import {
 		getDescription,
 		getHideProfileSection,
 		getProfilePosition,
 		getName,
-		sortItems,
 		getImage
 	} from '../helper';
 	import { innerWidth } from 'svelte/reactivity/window';
 	import { setDidContext, setHandleContext, setIsMobile } from './context';
-	import BaseCard from '../cards/_base/BaseCard/BaseCard.svelte';
 	import type { WebsiteData } from '$lib/types';
 	import Context from './Context.svelte';
+	import { SectionDefinitionsByType } from '$lib/sections';
 	import MadeWithBlento from './MadeWithBlento.svelte';
 	import Head from './Head.svelte';
 	import type { Did, Handle } from '@atcute/lexicons';
@@ -55,13 +53,6 @@
 		return `${origin}/${actor}/og-new.png`;
 	});
 
-	let maxHeight = $derived(
-		data.cards.reduce(
-			(max, item) => Math.max(max, isMobile ? item.mobileY + item.mobileH : item.y + item.h),
-			0
-		)
-	);
-
 	let container: HTMLDivElement | undefined = $state();
 </script>
 
@@ -91,16 +82,22 @@
 			]}
 		>
 			<div></div>
-			<div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8">
+			<div class="@5xl/wrapper:col-start-2 @5xl/wrapper:-col-end-1">
 				{#if data.cards.length === 0 && data.page === 'blento.self'}
-					<EmptyState {data} />
+					<div bind:this={container} class="@container/grid relative px-2 py-8 lg:px-8">
+						<EmptyState {data} />
+					</div>
 				{:else}
-					{#each data.cards.toSorted(sortItems) as item (item.id)}
-						<BaseCard {item}>
-							<Card {item} />
-						</BaseCard>
+					{#each data.sections.toSorted((a, b) => a.index - b.index) as section (section.id)}
+						{@const def = SectionDefinitionsByType[section.sectionType]}
+						{#if def}
+							<def.contentComponent
+								{section}
+								items={data.cards.filter((c) => c.sectionId === section.id)}
+								{isMobile}
+							/>
+						{/if}
 					{/each}
-					<div style="height: {(maxHeight / 8) * 100}cqw;"></div>
 				{/if}
 			</div>
 		</div>
diff --git a/src/lib/website/file-processing.ts b/src/lib/website/file-processing.ts
new file mode 100644
index 0000000..0851954
--- /dev/null
+++ b/src/lib/website/file-processing.ts
@@ -0,0 +1,79 @@
+import { createEmptyCard } from '$lib/helper';
+import type { Item } from '$lib/types';
+
+export function getImageDimensions(src: string): Promise<{ width: number; height: number }> {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+		img.onerror = () => resolve({ width: 1, height: 1 });
+		img.src = src;
+	});
+}
+
+export function getBestGridSize(
+	imageWidth: number,
+	imageHeight: number,
+	candidates: [number, number][]
+): [number, number] {
+	const imageRatio = imageWidth / imageHeight;
+	let best = candidates[0];
+	let bestDiff = Infinity;
+
+	for (const [w, h] of candidates) {
+		const gridRatio = w / h;
+		const diff = Math.abs(gridRatio - imageRatio);
+		if (diff < bestDiff) {
+			bestDiff = diff;
+			best = [w, h];
+		}
+	}
+
+	return best;
+}
+
+const desktopSizeCandidates: [number, number][] = [
+	[2, 2],
+	[2, 4],
+	[4, 2],
+	[4, 4],
+	[4, 6],
+	[6, 4]
+];
+
+const mobileSizeCandidates: [number, number][] = [
+	[4, 4],
+	[4, 6],
+	[4, 8],
+	[6, 4],
+	[8, 4],
+	[8, 6]
+];
+
+export async function createImageCard(file: File, page: string, sectionId?: string): Promise<Item> {
+	const isGif = file.type === 'image/gif';
+	const objectUrl = URL.createObjectURL(file);
+
+	const item = createEmptyCard(page, sectionId);
+	item.cardType = isGif ? 'gif' : 'image';
+	item.cardData = { image: { blob: file, objectUrl } };
+
+	const { width, height } = await getImageDimensions(objectUrl);
+	const [dw, dh] = getBestGridSize(width, height, desktopSizeCandidates);
+	const [mw, mh] = getBestGridSize(width, height, mobileSizeCandidates);
+	item.w = dw;
+	item.h = dh;
+	item.mobileW = mw;
+	item.mobileH = mh;
+
+	return item;
+}
+
+export function createVideoCard(file: File, page: string, sectionId?: string): Item {
+	const objectUrl = URL.createObjectURL(file);
+
+	const item = createEmptyCard(page, sectionId);
+	item.cardType = 'video';
+	item.cardData = { blob: file, objectUrl };
+
+	return item;
+}
diff --git a/src/lib/website/load.ts b/src/lib/website/load.ts
index 4dc089f..9053ba9 100644
--- a/src/lib/website/load.ts
+++ b/src/lib/website/load.ts
@@ -3,7 +3,8 @@ import { getCDNImageBlobUrl } from '$lib/atproto/methods';
 import { CardDefinitionsByType } from '$lib/cards';
 import type { CacheService } from '$lib/cache';
 import { createEmptyCard } from '$lib/helper';
-import type { Item, PronounsRecord, WebsiteData } from '$lib/types';
+import type { Item, PronounsRecord, SectionRecord, WebsiteData } from '$lib/types';
+import { ensureSections } from '$lib/sections/migrate';
 import { error } from '@sveltejs/kit';
 import type { ActorIdentifier, Did } from '@atcute/lexicons';
 
@@ -137,15 +138,18 @@ function loadCardFromContrail(did: Did, rkey: string, db: D1Database) {
  * for card types that actually appear on the current page.
  */
 function loadFromContrail(actor: ActorIdentifier, db: D1Database, page: string) {
-	return tryContrail('cards+pages query', async () => {
+	return tryContrail('cards+pages+sections query', async () => {
 		const client = getServerClient(db);
-		const [cardRes, pageRes] = await Promise.all([
+		const [cardRes, pageRes, sectionRes] = await Promise.all([
 			client.get('app.blento.card.listRecords', {
 				params: { actor, limit: 200, profiles: true, page }
 			}),
 			client.get('app.blento.page.listRecords', {
 				params: { actor, limit: 200 }
-			})
+			}),
+			client.get('app.blento.section.listRecords' as any, {
+				params: { actor, limit: 200, page }
+			}) as Promise<any>
 		]);
 
 		if (!cardRes.ok) return null;
@@ -162,9 +166,17 @@ function loadFromContrail(actor: ActorIdentifier, db: D1Database, page: string)
 					}))
 			: [];
 
+		const sections =
+			sectionRes?.ok && sectionRes.data?.records
+				? (sectionRes.data.records as any[]).map(
+						(r: any) => ({ ...(r.record as object), id: parseUri(r.uri)?.rkey }) as SectionRecord
+					)
+				: [];
+
 		return {
 			cards,
 			pages,
+			sections,
 			profiles: (cardRes.data.profiles ?? []) as ContrailProfile[]
 		};
 	});
@@ -213,6 +225,7 @@ export async function loadData(
 	const contrailData = db ? await loadFromContrail(handle, db, fullPage) : null;
 
 	let cards: Item[];
+	let sectionRecords: SectionRecord[] = [];
 	let pageRecords: Awaited<ReturnType<typeof listRecords>>;
 	let profile: WebsiteData['profile'];
 	let publication: WebsiteData['publication'] | undefined;
@@ -220,6 +233,7 @@ export async function loadData(
 
 	if (contrailData) {
 		cards = contrailData.cards;
+		sectionRecords = contrailData.sections;
 		pageRecords = contrailData.pages;
 
 		const extracted = extractProfileData(did, contrailData.profiles);
@@ -228,7 +242,7 @@ export async function loadData(
 		pronounsRecord = extracted.pronounsRecord;
 	} else {
 		// Fallback: no D1 available (e.g. vite dev) — use PDS directly
-		const [cardRecords, pageRecs, mainPub, prof, pronouns] = await Promise.all([
+		const [cardRecords, pageRecs, sectionRecs, mainPub, prof, pronouns] = await Promise.all([
 			listRecords({ did, collection: 'app.blento.card', limit: 0 }).catch((e) => {
 				console.error('error getting records for collection app.blento.card', e);
 				return [] as Awaited<ReturnType<typeof listRecords>>;
@@ -236,12 +250,18 @@ export async function loadData(
 			listRecords({ did, collection: 'app.blento.page' }).catch(
 				() => [] as Awaited<ReturnType<typeof listRecords>>
 			),
+			listRecords({ did, collection: 'app.blento.section' }).catch(
+				() => [] as Awaited<ReturnType<typeof listRecords>>
+			),
 			getSelfPublicationFromPDS(did),
 			getDetailedProfile({ did }),
 			getPronounsFromPDS(did)
 		]);
 
 		cards = cardRecords.map((v) => ({ ...v.value }) as Item);
+		sectionRecords = sectionRecs
+			.filter((v) => (v.value as any)?.page === fullPage)
+			.map((v) => ({ ...(v.value as object), id: parseUri(v.uri)?.rkey }) as SectionRecord);
 		pageRecords = pageRecs;
 		profile = prof;
 		publication = mainPub?.value as WebsiteData['publication'] | undefined;
@@ -256,13 +276,20 @@ export async function loadData(
 
 	publication ??= defaultPublication(profile);
 
-	const additionalData = await loadAdditionalData(cards, { did, handle, cache, platform }, env);
+	const migrated = ensureSections(sectionRecords, cards, fullPage);
+
+	const additionalData = await loadAdditionalData(
+		migrated.cards,
+		{ did, handle, cache, platform },
+		env
+	);
 
 	return checkData({
-		page: 'blento.' + page,
+		page: fullPage,
 		handle,
 		did,
-		cards,
+		cards: migrated.cards,
+		sections: migrated.sections,
 		publication,
 		additionalData,
 		profile,
@@ -353,6 +380,7 @@ export async function loadCardData(
 		handle: resolvedHandle,
 		did,
 		cards,
+		sections: [],
 		publication: publication ?? defaultPublication(profile),
 		additionalData,
 		profile,
@@ -434,6 +462,7 @@ export async function loadCardTypeData(
 		handle: resolvedHandle,
 		did,
 		cards,
+		sections: [],
 		publication: publication ?? defaultPublication(profile),
 		additionalData,
 		profile,
-- 
2.51.2