From 49b7a2920a4967a010547f1d748b0b7e26cf9a57 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Tue, 28 Jul 2026 19:09:59 +0200
Subject: [PATCH] feat(deck): drop-in image gallery with City/Farm/Festival
 sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New Gallery slide (after the entity deep-dives) with a tabbed masonry grid
and a full-screen lightbox (prev/next, counter, ESC/arrows/swipe) styled
after the webapp marketplace viewer. Images auto-populate via
import.meta.glob — drop files into src/deck/gallery/{city,farm,festival}/
and they appear, sorted by filename, with a graceful empty state. Seeded
placeholder SVGs (clearly marked) so the gallery is populated in the demo.

Lightbox keys are handled in the capture phase so they don't trigger the
deck's slide navigation. Deck is now 17 slides.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/deck/Deck.vue                            |   2 +
 src/deck/components/Icon.vue                 |   4 +
 src/deck/components/Lightbox.vue             | 125 +++++++++++++++++++
 src/deck/gallery.ts                          |  82 ++++++++++++
 src/deck/gallery/README.md                   |  18 +++
 src/deck/gallery/city/01-placeholder.svg     |  15 +++
 src/deck/gallery/city/02-placeholder.svg     |  15 +++
 src/deck/gallery/city/03-placeholder.svg     |  15 +++
 src/deck/gallery/city/04-placeholder.svg     |  15 +++
 src/deck/gallery/city/05-placeholder.svg     |  15 +++
 src/deck/gallery/farm/01-placeholder.svg     |  15 +++
 src/deck/gallery/farm/02-placeholder.svg     |  15 +++
 src/deck/gallery/farm/03-placeholder.svg     |  15 +++
 src/deck/gallery/farm/04-placeholder.svg     |  15 +++
 src/deck/gallery/festival/01-placeholder.svg |  15 +++
 src/deck/gallery/festival/02-placeholder.svg |  15 +++
 src/deck/gallery/festival/03-placeholder.svg |  15 +++
 src/deck/gallery/festival/04-placeholder.svg |  15 +++
 src/deck/gallery/festival/05-placeholder.svg |  15 +++
 src/deck/slides/GallerySlide.vue             |  92 ++++++++++++++
 20 files changed, 533 insertions(+)
 create mode 100644 src/deck/components/Lightbox.vue
 create mode 100644 src/deck/gallery.ts
 create mode 100644 src/deck/gallery/README.md
 create mode 100644 src/deck/gallery/city/01-placeholder.svg
 create mode 100644 src/deck/gallery/city/02-placeholder.svg
 create mode 100644 src/deck/gallery/city/03-placeholder.svg
 create mode 100644 src/deck/gallery/city/04-placeholder.svg
 create mode 100644 src/deck/gallery/city/05-placeholder.svg
 create mode 100644 src/deck/gallery/farm/01-placeholder.svg
 create mode 100644 src/deck/gallery/farm/02-placeholder.svg
 create mode 100644 src/deck/gallery/farm/03-placeholder.svg
 create mode 100644 src/deck/gallery/farm/04-placeholder.svg
 create mode 100644 src/deck/gallery/festival/01-placeholder.svg
 create mode 100644 src/deck/gallery/festival/02-placeholder.svg
 create mode 100644 src/deck/gallery/festival/03-placeholder.svg
 create mode 100644 src/deck/gallery/festival/04-placeholder.svg
 create mode 100644 src/deck/gallery/festival/05-placeholder.svg
 create mode 100644 src/deck/slides/GallerySlide.vue

diff --git a/src/deck/Deck.vue b/src/deck/Deck.vue
index e0a9866..a836d17 100644
--- a/src/deck/Deck.vue
+++ b/src/deck/Deck.vue
@@ -12,6 +12,7 @@ import EntitiesSlide from './slides/EntitiesSlide.vue'
 import ArchipelagoSlide from './slides/ArchipelagoSlide.vue'
 import SolunarSlide from './slides/SolunarSlide.vue'
 import ChateauSlide from './slides/ChateauSlide.vue'
+import GallerySlide from './slides/GallerySlide.vue'
 import EcosystemSlide from './slides/EcosystemSlide.vue'
 import RevenueSlide from './slides/RevenueSlide.vue'
 import InvestmentOverviewSlide from './slides/InvestmentOverviewSlide.vue'
@@ -30,6 +31,7 @@ const slides = [
   { id: 'archipelago', label: 'Archipelago', component: ArchipelagoSlide },
   { id: 'solunar', label: 'Solunar Society', component: SolunarSlide },
   { id: 'chateau', label: 'Chateau du Faune', component: ChateauSlide },
+  { id: 'gallery', label: 'Gallery', component: GallerySlide },
   { id: 'ecosystem', label: 'One membership', component: EcosystemSlide },
   { id: 'revenue', label: 'Revenue', component: RevenueSlide },
   { id: 'invest-overview', label: 'The raise', component: InvestmentOverviewSlide },
diff --git a/src/deck/components/Icon.vue b/src/deck/components/Icon.vue
index 1ecde30..e46ad45 100644
--- a/src/deck/components/Icon.vue
+++ b/src/deck/components/Icon.vue
@@ -30,6 +30,8 @@ import {
   Moon,
   MapPin,
   ChevronRight,
+  Images,
+  Expand,
   type LucideProps,
 } from '@lucide/vue'
 import type { FunctionalComponent } from 'vue'
@@ -64,6 +66,8 @@ const registry: Record<string, FunctionalComponent<LucideProps>> = {
   Moon,
   MapPin,
   ChevronRight,
+  Images,
+  Expand,
 }
 
 const props = defineProps<{ name: string }>()
diff --git a/src/deck/components/Lightbox.vue b/src/deck/components/Lightbox.vue
new file mode 100644
index 0000000..ce78a9e
--- /dev/null
+++ b/src/deck/components/Lightbox.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * Full-screen image lightbox, styled after the webapp marketplace viewer.
+ * Teleported to <body>; arrow keys / swipe navigate, ESC or backdrop closes.
+ *
+ * Keyboard is handled in the CAPTURE phase and stopPropagation'd while open,
+ * so the deck's own arrow-key slide navigation doesn't also fire.
+ */
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { X, ChevronLeft, ChevronRight } from '@lucide/vue'
+import type { GalleryImage } from '../gallery'
+
+const props = defineProps<{ images: GalleryImage[] }>()
+// null = closed; otherwise the active image index
+const index = defineModel<number | null>({ required: true })
+
+const current = computed(() =>
+  index.value != null ? (props.images[index.value] ?? null) : null,
+)
+const hasPrev = computed(() => index.value != null && index.value > 0)
+const hasNext = computed(() => index.value != null && index.value < props.images.length - 1)
+
+function close() {
+  index.value = null
+}
+function prev() {
+  if (hasPrev.value) index.value = (index.value as number) - 1
+}
+function next() {
+  if (hasNext.value) index.value = (index.value as number) + 1
+}
+
+function onKey(e: KeyboardEvent) {
+  if (index.value == null) return // closed → let the deck handle keys
+  if (['ArrowRight', 'ArrowLeft', 'Escape', ' '].includes(e.key)) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+  if (e.key === 'ArrowRight' || e.key === ' ') next()
+  else if (e.key === 'ArrowLeft') prev()
+  else if (e.key === 'Escape') close()
+}
+
+// basic swipe support
+let touchX = 0
+function onTouchStart(e: TouchEvent) {
+  touchX = e.changedTouches[0].clientX
+}
+function onTouchEnd(e: TouchEvent) {
+  const dx = e.changedTouches[0].clientX - touchX
+  if (dx > 50) prev()
+  else if (dx < -50) next()
+}
+
+onMounted(() => window.addEventListener('keydown', onKey, true)) // capture
+onUnmounted(() => window.removeEventListener('keydown', onKey, true))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="lb">
+      <div
+        v-if="current"
+        class="fixed inset-0 z-[9999] flex items-center justify-center bg-[hsl(160_28%_4%/0.94)] p-6 backdrop-blur-sm"
+        @click="close"
+        @touchstart.passive="onTouchStart"
+        @touchend.passive="onTouchEnd"
+      >
+        <img
+          :src="current.src"
+          :alt="current.name"
+          class="max-h-[90vh] max-w-[92vw] rounded-lg object-contain shadow-2xl"
+          @click.stop
+        />
+
+        <!-- close -->
+        <button
+          class="absolute right-5 top-5 grid size-11 place-items-center rounded-full border border-white/15 bg-white/10 text-sand backdrop-blur transition hover:bg-white/20"
+          aria-label="Close"
+          @click.stop="close"
+        >
+          <X class="size-5" />
+        </button>
+
+        <!-- prev / next -->
+        <button
+          v-if="hasPrev"
+          class="absolute left-5 top-1/2 grid size-11 -translate-y-1/2 place-items-center rounded-full border border-white/15 bg-white/10 text-sand backdrop-blur transition hover:bg-white/20"
+          aria-label="Previous image"
+          @click.stop="prev"
+        >
+          <ChevronLeft class="size-6" />
+        </button>
+        <button
+          v-if="hasNext"
+          class="absolute right-5 top-1/2 grid size-11 -translate-y-1/2 place-items-center rounded-full border border-white/15 bg-white/10 text-sand backdrop-blur transition hover:bg-white/20"
+          aria-label="Next image"
+          @click.stop="next"
+        >
+          <ChevronRight class="size-6" />
+        </button>
+
+        <!-- counter + hint -->
+        <div
+          v-if="images.length > 1"
+          class="absolute bottom-5 left-1/2 -translate-x-1/2 rounded-full border border-white/15 bg-white/10 px-4 py-1.5 text-sm text-sand backdrop-blur"
+        >
+          {{ (index ?? 0) + 1 }} / {{ images.length }}
+          <span class="ml-2 hidden text-sand-dim sm:inline">← → to browse · Esc to close</span>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.lb-enter-active,
+.lb-leave-active {
+  transition: opacity 0.2s ease;
+}
+.lb-enter-from,
+.lb-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/deck/gallery.ts b/src/deck/gallery.ts
new file mode 100644
index 0000000..de2fff2
--- /dev/null
+++ b/src/deck/gallery.ts
@@ -0,0 +1,82 @@
+/**
+ * Gallery auto-population.
+ *
+ * Drop image files into these folders and they appear in the deck gallery
+ * automatically — no code changes, no manifest to edit:
+ *
+ *   src/deck/gallery/city/       → City   (Archipelago)
+ *   src/deck/gallery/farm/       → Farm   (Chateau du Faune)
+ *   src/deck/gallery/festival/   → Festival (Solunar Society)
+ *
+ * Supported: jpg jpeg png webp avif gif svg. Images show sorted by filename,
+ * so prefix with 01-, 02-, … to control order. The seeded *-placeholder.svg
+ * files are just demo art — delete them once you add real photos.
+ *
+ * Under the hood this uses Vite's import.meta.glob, which must take a literal
+ * pattern (no variables) — hence one call per folder.
+ */
+import { entityById, type Accent } from './data'
+
+type GlobMap = Record<string, string>
+
+// NB: import.meta.glob is statically analysed by Vite — its options must be an
+// inline object literal (not a shared const), so the object is repeated below.
+const city = import.meta.glob('./gallery/city/*.{jpg,jpeg,png,webp,avif,gif,svg}', {
+  eager: true,
+  query: '?url',
+  import: 'default',
+}) as GlobMap
+const farm = import.meta.glob('./gallery/farm/*.{jpg,jpeg,png,webp,avif,gif,svg}', {
+  eager: true,
+  query: '?url',
+  import: 'default',
+}) as GlobMap
+const festival = import.meta.glob('./gallery/festival/*.{jpg,jpeg,png,webp,avif,gif,svg}', {
+  eager: true,
+  query: '?url',
+  import: 'default',
+}) as GlobMap
+
+export type GalleryImage = { src: string; name: string }
+
+function toImages(map: GlobMap): GalleryImage[] {
+  return Object.entries(map)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([path, src]) => ({ src, name: path.split('/').pop()!.replace(/\.[^.]+$/, '') }))
+}
+
+export type GallerySection = {
+  id: 'city' | 'farm' | 'festival'
+  label: string
+  entityName: string
+  accent: Accent
+  folder: string
+  images: GalleryImage[]
+}
+
+export const gallerySections: GallerySection[] = [
+  {
+    id: 'city',
+    label: 'City',
+    entityName: entityById('archipelago').name,
+    accent: 'pine',
+    folder: 'src/deck/gallery/city/',
+    images: toImages(city),
+  },
+  {
+    id: 'farm',
+    label: 'Farm',
+    entityName: entityById('chateau').name,
+    accent: 'clay',
+    folder: 'src/deck/gallery/farm/',
+    images: toImages(farm),
+  },
+  {
+    id: 'festival',
+    label: 'Festival',
+    entityName: entityById('solunar').name,
+    accent: 'indigo',
+    folder: 'src/deck/gallery/festival/',
+    images: toImages(festival),
+  },
+]
diff --git a/src/deck/gallery/README.md b/src/deck/gallery/README.md
new file mode 100644
index 0000000..4706557
--- /dev/null
+++ b/src/deck/gallery/README.md
@@ -0,0 +1,18 @@
+# Deck gallery — just drop images in
+
+Each subfolder feeds one section of the Gallery slide. **Drop image files in and
+they appear automatically** — no code to touch.
+
+| Folder      | Section  | Entity            |
+| ----------- | -------- | ----------------- |
+| `city/`     | City     | Archipelago       |
+| `farm/`     | Farm     | Chateau du Faune  |
+| `festival/` | Festival | Solunar Society   |
+
+- Supported formats: `jpg` `jpeg` `png` `webp` `avif` `gif` `svg`.
+- Images display **sorted by filename** — prefix `01-`, `02-`, … to order them.
+- The `*-placeholder.svg` files are demo art. **Delete them** once you add real photos.
+- Wiring lives in `src/deck/gallery.ts` (Vite `import.meta.glob`). If you add a
+  brand-new format, extend the glob patterns there.
+
+Recommended: web-optimized `.webp` under ~500 KB each for fast loading.
diff --git a/src/deck/gallery/city/01-placeholder.svg b/src/deck/gallery/city/01-placeholder.svg
new file mode 100644
index 0000000..08db74e
--- /dev/null
+++ b/src/deck/gallery/city/01-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1040" width="800" height="1040" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(160 60% 40%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="1040" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="1040" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(160 60% 40%)" opacity="0.12"/>
+  <circle cx="70" cy="970" r="90" fill="hsl(160 60% 40%)" opacity="0.10"/>
+  <text x="400" y="480" text-anchor="middle" fill="hsl(160 60% 40%)" font-size="46" font-weight="bold">City</text>
+  <text x="400" y="526" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 01</text>
+  <text x="400" y="564" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×1040</text>
+</svg>
diff --git a/src/deck/gallery/city/02-placeholder.svg b/src/deck/gallery/city/02-placeholder.svg
new file mode 100644
index 0000000..9b3bb39
--- /dev/null
+++ b/src/deck/gallery/city/02-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 620" width="800" height="620" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(160 60% 40%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="620" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="620" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(160 60% 40%)" opacity="0.12"/>
+  <circle cx="70" cy="550" r="90" fill="hsl(160 60% 40%)" opacity="0.10"/>
+  <text x="400" y="270" text-anchor="middle" fill="hsl(160 60% 40%)" font-size="46" font-weight="bold">City</text>
+  <text x="400" y="316" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 02</text>
+  <text x="400" y="354" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×620</text>
+</svg>
diff --git a/src/deck/gallery/city/03-placeholder.svg b/src/deck/gallery/city/03-placeholder.svg
new file mode 100644
index 0000000..fe463cb
--- /dev/null
+++ b/src/deck/gallery/city/03-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(160 60% 40%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="800" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="800" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(160 60% 40%)" opacity="0.12"/>
+  <circle cx="70" cy="730" r="90" fill="hsl(160 60% 40%)" opacity="0.10"/>
+  <text x="400" y="360" text-anchor="middle" fill="hsl(160 60% 40%)" font-size="46" font-weight="bold">City</text>
+  <text x="400" y="406" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 03</text>
+  <text x="400" y="444" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×800</text>
+</svg>
diff --git a/src/deck/gallery/city/04-placeholder.svg b/src/deck/gallery/city/04-placeholder.svg
new file mode 100644
index 0000000..7af5625
--- /dev/null
+++ b/src/deck/gallery/city/04-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560" width="800" height="560" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(160 60% 40%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="560" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="560" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(160 60% 40%)" opacity="0.12"/>
+  <circle cx="70" cy="490" r="90" fill="hsl(160 60% 40%)" opacity="0.10"/>
+  <text x="400" y="240" text-anchor="middle" fill="hsl(160 60% 40%)" font-size="46" font-weight="bold">City</text>
+  <text x="400" y="286" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 04</text>
+  <text x="400" y="324" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×560</text>
+</svg>
diff --git a/src/deck/gallery/city/05-placeholder.svg b/src/deck/gallery/city/05-placeholder.svg
new file mode 100644
index 0000000..b2000a4
--- /dev/null
+++ b/src/deck/gallery/city/05-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 900" width="800" height="900" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(160 60% 40%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="900" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="900" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(160 60% 40%)" opacity="0.12"/>
+  <circle cx="70" cy="830" r="90" fill="hsl(160 60% 40%)" opacity="0.10"/>
+  <text x="400" y="410" text-anchor="middle" fill="hsl(160 60% 40%)" font-size="46" font-weight="bold">City</text>
+  <text x="400" y="456" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 05</text>
+  <text x="400" y="494" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×900</text>
+</svg>
diff --git a/src/deck/gallery/farm/01-placeholder.svg b/src/deck/gallery/farm/01-placeholder.svg
new file mode 100644
index 0000000..6becd7a
--- /dev/null
+++ b/src/deck/gallery/farm/01-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 620" width="800" height="620" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(14 72% 62%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="620" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="620" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(14 72% 62%)" opacity="0.12"/>
+  <circle cx="70" cy="550" r="90" fill="hsl(14 72% 62%)" opacity="0.10"/>
+  <text x="400" y="270" text-anchor="middle" fill="hsl(14 72% 62%)" font-size="46" font-weight="bold">Farm</text>
+  <text x="400" y="316" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 01</text>
+  <text x="400" y="354" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×620</text>
+</svg>
diff --git a/src/deck/gallery/farm/02-placeholder.svg b/src/deck/gallery/farm/02-placeholder.svg
new file mode 100644
index 0000000..bd737ad
--- /dev/null
+++ b/src/deck/gallery/farm/02-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 900" width="800" height="900" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(14 72% 62%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="900" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="900" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(14 72% 62%)" opacity="0.12"/>
+  <circle cx="70" cy="830" r="90" fill="hsl(14 72% 62%)" opacity="0.10"/>
+  <text x="400" y="410" text-anchor="middle" fill="hsl(14 72% 62%)" font-size="46" font-weight="bold">Farm</text>
+  <text x="400" y="456" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 02</text>
+  <text x="400" y="494" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×900</text>
+</svg>
diff --git a/src/deck/gallery/farm/03-placeholder.svg b/src/deck/gallery/farm/03-placeholder.svg
new file mode 100644
index 0000000..04911bb
--- /dev/null
+++ b/src/deck/gallery/farm/03-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560" width="800" height="560" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(14 72% 62%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="560" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="560" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(14 72% 62%)" opacity="0.12"/>
+  <circle cx="70" cy="490" r="90" fill="hsl(14 72% 62%)" opacity="0.10"/>
+  <text x="400" y="240" text-anchor="middle" fill="hsl(14 72% 62%)" font-size="46" font-weight="bold">Farm</text>
+  <text x="400" y="286" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 03</text>
+  <text x="400" y="324" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×560</text>
+</svg>
diff --git a/src/deck/gallery/farm/04-placeholder.svg b/src/deck/gallery/farm/04-placeholder.svg
new file mode 100644
index 0000000..2f3a624
--- /dev/null
+++ b/src/deck/gallery/farm/04-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(14 72% 62%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="800" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="800" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(14 72% 62%)" opacity="0.12"/>
+  <circle cx="70" cy="730" r="90" fill="hsl(14 72% 62%)" opacity="0.10"/>
+  <text x="400" y="360" text-anchor="middle" fill="hsl(14 72% 62%)" font-size="46" font-weight="bold">Farm</text>
+  <text x="400" y="406" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 04</text>
+  <text x="400" y="444" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×800</text>
+</svg>
diff --git a/src/deck/gallery/festival/01-placeholder.svg b/src/deck/gallery/festival/01-placeholder.svg
new file mode 100644
index 0000000..73a7b1f
--- /dev/null
+++ b/src/deck/gallery/festival/01-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(256 78% 68%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="800" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="800" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(256 78% 68%)" opacity="0.12"/>
+  <circle cx="70" cy="730" r="90" fill="hsl(256 78% 68%)" opacity="0.10"/>
+  <text x="400" y="360" text-anchor="middle" fill="hsl(256 78% 68%)" font-size="46" font-weight="bold">Festival</text>
+  <text x="400" y="406" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 01</text>
+  <text x="400" y="444" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×800</text>
+</svg>
diff --git a/src/deck/gallery/festival/02-placeholder.svg b/src/deck/gallery/festival/02-placeholder.svg
new file mode 100644
index 0000000..b6c7456
--- /dev/null
+++ b/src/deck/gallery/festival/02-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560" width="800" height="560" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(256 78% 68%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="560" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="560" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(256 78% 68%)" opacity="0.12"/>
+  <circle cx="70" cy="490" r="90" fill="hsl(256 78% 68%)" opacity="0.10"/>
+  <text x="400" y="240" text-anchor="middle" fill="hsl(256 78% 68%)" font-size="46" font-weight="bold">Festival</text>
+  <text x="400" y="286" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 02</text>
+  <text x="400" y="324" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×560</text>
+</svg>
diff --git a/src/deck/gallery/festival/03-placeholder.svg b/src/deck/gallery/festival/03-placeholder.svg
new file mode 100644
index 0000000..3951739
--- /dev/null
+++ b/src/deck/gallery/festival/03-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1040" width="800" height="1040" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(256 78% 68%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="1040" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="1040" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(256 78% 68%)" opacity="0.12"/>
+  <circle cx="70" cy="970" r="90" fill="hsl(256 78% 68%)" opacity="0.10"/>
+  <text x="400" y="480" text-anchor="middle" fill="hsl(256 78% 68%)" font-size="46" font-weight="bold">Festival</text>
+  <text x="400" y="526" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 03</text>
+  <text x="400" y="564" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×1040</text>
+</svg>
diff --git a/src/deck/gallery/festival/04-placeholder.svg b/src/deck/gallery/festival/04-placeholder.svg
new file mode 100644
index 0000000..46ef5c8
--- /dev/null
+++ b/src/deck/gallery/festival/04-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 700" width="800" height="700" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(256 78% 68%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="700" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="700" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(256 78% 68%)" opacity="0.12"/>
+  <circle cx="70" cy="630" r="90" fill="hsl(256 78% 68%)" opacity="0.10"/>
+  <text x="400" y="310" text-anchor="middle" fill="hsl(256 78% 68%)" font-size="46" font-weight="bold">Festival</text>
+  <text x="400" y="356" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 04</text>
+  <text x="400" y="394" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×700</text>
+</svg>
diff --git a/src/deck/gallery/festival/05-placeholder.svg b/src/deck/gallery/festival/05-placeholder.svg
new file mode 100644
index 0000000..e9ce0cc
--- /dev/null
+++ b/src/deck/gallery/festival/05-placeholder.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" font-family="Georgia, serif">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="hsl(256 78% 68%)" stop-opacity="0.40"/>
+      <stop offset="1" stop-color="hsl(160 28% 6%)" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="600" fill="hsl(160 28% 6%)"/>
+  <rect width="800" height="600" fill="url(#g)"/>
+  <circle cx="740" cy="60" r="120" fill="hsl(256 78% 68%)" opacity="0.12"/>
+  <circle cx="70" cy="530" r="90" fill="hsl(256 78% 68%)" opacity="0.10"/>
+  <text x="400" y="260" text-anchor="middle" fill="hsl(256 78% 68%)" font-size="46" font-weight="bold">Festival</text>
+  <text x="400" y="306" text-anchor="middle" fill="hsl(44 30% 90%)" font-size="26" opacity="0.85">Photo 05</text>
+  <text x="400" y="344" text-anchor="middle" fill="hsl(150 8% 62%)" font-size="18" letter-spacing="3">PLACEHOLDER · 800×600</text>
+</svg>
diff --git a/src/deck/slides/GallerySlide.vue b/src/deck/slides/GallerySlide.vue
new file mode 100644
index 0000000..b059a62
--- /dev/null
+++ b/src/deck/slides/GallerySlide.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import SlideFrame from '../components/SlideFrame.vue'
+import Icon from '../components/Icon.vue'
+import Lightbox from '../components/Lightbox.vue'
+import { gallerySections } from '../gallery'
+import { accentText, accentRing } from '../data'
+
+const activeId = ref(gallerySections[0].id)
+const active = computed(() => gallerySections.find((s) => s.id === activeId.value)!)
+
+// lightbox index into the active section's images (null = closed)
+const lightboxIndex = ref<number | null>(null)
+
+function selectTab(id: (typeof gallerySections)[number]['id']) {
+  activeId.value = id
+  lightboxIndex.value = null
+}
+</script>
+
+<template>
+  <SlideFrame
+    kicker="See it"
+    title="Gallery"
+    subtitle="Photography from each entity. Drop images into the matching folder and they appear here automatically."
+  >
+    <!-- section tabs -->
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="s in gallerySections"
+        :key="s.id"
+        class="flex items-center gap-2 rounded-full border px-4 py-2 text-sm transition"
+        :class="
+          activeId === s.id
+            ? [accentRing[s.accent], accentText[s.accent]]
+            : 'border-white/10 bg-white/[0.03] text-sand-dim hover:border-white/25 hover:text-sand'
+        "
+        :aria-pressed="activeId === s.id"
+        @click="selectTab(s.id)"
+      >
+        <span class="font-medium">{{ s.label }}</span>
+        <span class="text-xs opacity-70">{{ s.entityName }}</span>
+        <span class="rounded-full bg-white/10 px-1.5 text-[11px] tabular-nums">{{ s.images.length }}</span>
+      </button>
+    </div>
+
+    <!-- masonry grid (scrolls within the slide if tall) -->
+    <div class="mt-6 max-h-[56vh] overflow-y-auto pr-1 [scrollbar-width:thin]">
+      <div v-if="active.images.length" class="gap-3 [column-fill:_balance] columns-2 sm:columns-3 lg:columns-4">
+        <button
+          v-for="(img, i) in active.images"
+          :key="img.src"
+          class="group relative mb-3 block w-full break-inside-avoid overflow-hidden rounded-xl border border-white/10 bg-white/[0.03]"
+          :aria-label="`Open ${img.name}`"
+          @click="lightboxIndex = i"
+        >
+          <img
+            :src="img.src"
+            :alt="img.name"
+            loading="lazy"
+            class="w-full object-cover transition duration-300 group-hover:scale-[1.03] group-hover:brightness-110"
+          />
+          <span
+            class="pointer-events-none absolute inset-0 flex items-end justify-end bg-gradient-to-t from-black/50 to-transparent p-2 opacity-0 transition group-hover:opacity-100"
+          >
+            <span class="grid size-8 place-items-center rounded-full bg-white/15 text-sand backdrop-blur">
+              <Icon name="Expand" class="size-4" />
+            </span>
+          </span>
+        </button>
+      </div>
+
+      <!-- empty state -->
+      <div
+        v-else
+        class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/15 px-6 py-16 text-center"
+      >
+        <span class="grid size-12 place-items-center rounded-xl bg-white/5" :class="accentText[active.accent]">
+          <Icon name="Images" class="size-6" />
+        </span>
+        <p class="mt-4 text-sand">No {{ active.label }} photos yet.</p>
+        <p class="mt-1 max-w-md text-sm text-sand-dim">
+          Drop images into
+          <code class="rounded bg-white/10 px-1.5 py-0.5 text-xs text-sand">{{ active.folder }}</code>
+          and they’ll appear here automatically.
+        </p>
+      </div>
+    </div>
+
+    <Lightbox v-model="lightboxIndex" :images="active.images" />
+  </SlideFrame>
+</template>