From 4cb0fa14a22849455e038624dc70b24b8c40949e Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 17:01:51 +0200
Subject: [PATCH 1/7] feat(ui): install shadcn Card; sweep card patterns
 site-wide
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add the shadcn-vue Card primitive (Card / CardHeader / CardTitle /
CardDescription / CardContent / CardFooter) at src/components/ui/card.

Replace ~20 hand-rolled "rounded-lg border border-border bg-card …"
patterns across nine views with <Card>:

- ConceptView (slow-farming pillars)
- VisionValuesView (philosophy + pillars + team)
- GalleryView (image figure cards)
- EventsView (program cards)
- SymposiumView (included items + apply steps)
- LongStaysView (path cards)
- OpportunitiesView (group cards + apply explainers)
- AccommodationView (rooms + cabins + exterior items)
- ReservationsView (kind cards + contact card)
- MarketplaceView (category cards)
- HomeView (featured events)

For image-bearing cards (events / rooms), use Card + CardContent so
the image stays flush at the top of the card and the inner padding
lives on the content slot. For clickable cards, the RouterLink wraps
the Card so the whole card is the link target.

Variants where the card sits on a tinted section (philosophy items on
bg-card section, cabins on bg-card section) override Card's default
bg-card with bg-background via the class prop.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/ui/card/Card.vue            |  21 ++++
 src/components/ui/card/CardContent.vue     |  14 +++
 src/components/ui/card/CardDescription.vue |  14 +++
 src/components/ui/card/CardFooter.vue      |  14 +++
 src/components/ui/card/CardHeader.vue      |  14 +++
 src/components/ui/card/CardTitle.vue       |  18 ++++
 src/components/ui/card/index.ts            |   6 ++
 src/views/AccommodationView.vue            | 119 ++++++++++-----------
 src/views/ConceptView.vue                  |   9 +-
 src/views/EventsView.vue                   |  45 ++++----
 src/views/GalleryView.vue                  |  35 +++---
 src/views/HomeView.vue                     |  39 +++----
 src/views/LongStaysView.vue                |   9 +-
 src/views/MarketplaceView.vue              |   9 +-
 src/views/OpportunitiesView.vue            |  29 +++--
 src/views/ReservationsView.vue             |  13 +--
 src/views/SymposiumView.vue                |  29 +++--
 src/views/VisionValuesView.vue             |  25 ++---
 18 files changed, 265 insertions(+), 197 deletions(-)
 create mode 100644 src/components/ui/card/Card.vue
 create mode 100644 src/components/ui/card/CardContent.vue
 create mode 100644 src/components/ui/card/CardDescription.vue
 create mode 100644 src/components/ui/card/CardFooter.vue
 create mode 100644 src/components/ui/card/CardHeader.vue
 create mode 100644 src/components/ui/card/CardTitle.vue
 create mode 100644 src/components/ui/card/index.ts

diff --git a/src/components/ui/card/Card.vue b/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..db8c07a
--- /dev/null
+++ b/src/components/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardContent.vue b/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..4c4dfc7
--- /dev/null
+++ b/src/components/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardDescription.vue b/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..02bddba
--- /dev/null
+++ b/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/src/components/ui/card/CardFooter.vue b/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..fad3928
--- /dev/null
+++ b/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardHeader.vue b/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..119700c
--- /dev/null
+++ b/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardTitle.vue b/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..d0c0ea7
--- /dev/null
+++ b/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts
new file mode 100644
index 0000000..e5c7cb2
--- /dev/null
+++ b/src/components/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
diff --git a/src/views/AccommodationView.vue b/src/views/AccommodationView.vue
index 73f1b8f..f0bab13 100644
--- a/src/views/AccommodationView.vue
+++ b/src/views/AccommodationView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 
 const { t, tm, rt } = useI18n()
 
@@ -82,41 +83,39 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
         <p class="mt-3 text-muted-foreground">{{ t('accommodation.rooms.subtitle') }}</p>
       </div>
       <ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <li
-          v-for="room in rooms"
-          :key="room.key"
-          class="overflow-hidden rounded-lg border border-border bg-card"
-        >
-          <img
-            :src="room.image"
-            alt=""
-            class="aspect-[4/3] w-full object-cover"
-            loading="lazy"
-          />
-          <div class="p-5">
-            <div class="flex items-baseline justify-between gap-3">
-              <h3 class="font-serif text-xl font-semibold">
-                {{ t(`accommodation.rooms.${room.key}.name`) }}
-              </h3>
-              <span
-                class="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider"
-                :class="
-                  room.open
-                    ? 'bg-primary/10 text-primary'
-                    : 'border border-border text-muted-foreground'
-                "
-              >
-                {{
-                  room.open
-                    ? t('accommodation.statusOpen')
-                    : t('accommodation.statusComingSoon')
-                }}
-              </span>
-            </div>
-            <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-              {{ t(`accommodation.rooms.${room.key}.summary`) }}
-            </p>
-          </div>
+        <li v-for="room in rooms" :key="room.key">
+          <Card class="overflow-hidden">
+            <img
+              :src="room.image"
+              alt=""
+              class="aspect-[4/3] w-full object-cover"
+              loading="lazy"
+            />
+            <CardContent class="p-5 pt-5">
+              <div class="flex items-baseline justify-between gap-3">
+                <h3 class="font-serif text-xl font-semibold">
+                  {{ t(`accommodation.rooms.${room.key}.name`) }}
+                </h3>
+                <span
+                  class="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider"
+                  :class="
+                    room.open
+                      ? 'bg-primary/10 text-primary'
+                      : 'border border-border text-muted-foreground'
+                  "
+                >
+                  {{
+                    room.open
+                      ? t('accommodation.statusOpen')
+                      : t('accommodation.statusComingSoon')
+                  }}
+                </span>
+              </div>
+              <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+                {{ t(`accommodation.rooms.${room.key}.summary`) }}
+              </p>
+            </CardContent>
+          </Card>
         </li>
       </ul>
     </section>
@@ -131,27 +130,25 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
           <p class="mt-3 text-muted-foreground">{{ t('accommodation.cabins.subtitle') }}</p>
         </div>
         <ul class="mt-8 grid gap-6 md:grid-cols-3">
-          <li
-            v-for="cabin in cabins"
-            :key="cabin.key"
-            class="overflow-hidden rounded-lg border border-border bg-background"
-          >
-            <img
-              :src="cabin.image"
-              alt=""
-              class="aspect-[4/3] w-full object-cover"
-              loading="lazy"
-            />
-            <div class="flex items-baseline justify-between gap-3 p-5">
-              <h3 class="font-serif text-xl font-semibold">
-                {{ t(`accommodation.cabins.${cabin.key}`) }}
-              </h3>
-              <span
-                class="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
-              >
-                {{ t('accommodation.statusComingSoon') }}
-              </span>
-            </div>
+          <li v-for="cabin in cabins" :key="cabin.key">
+            <Card class="overflow-hidden bg-background">
+              <img
+                :src="cabin.image"
+                alt=""
+                class="aspect-[4/3] w-full object-cover"
+                loading="lazy"
+              />
+              <div class="flex items-baseline justify-between gap-3 p-5">
+                <h3 class="font-serif text-xl font-semibold">
+                  {{ t(`accommodation.cabins.${cabin.key}`) }}
+                </h3>
+                <span
+                  class="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
+                >
+                  {{ t('accommodation.statusComingSoon') }}
+                </span>
+              </div>
+            </Card>
           </li>
         </ul>
       </div>
@@ -166,12 +163,10 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
         <p class="mt-3 text-muted-foreground">{{ t('accommodation.exterior.subtitle') }}</p>
       </div>
       <ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <li
-          v-for="(item, i) in exteriorItems"
-          :key="i"
-          class="rounded-lg border border-dashed border-border bg-secondary/20 p-5 text-sm text-foreground/85"
-        >
-          {{ rt(item) }}
+        <li v-for="(item, i) in exteriorItems" :key="i">
+          <Card class="border-dashed bg-secondary/20 p-5 text-sm text-foreground/85">
+            {{ rt(item) }}
+          </Card>
         </li>
       </ul>
     </section>
diff --git a/src/views/ConceptView.vue b/src/views/ConceptView.vue
index 50d04d6..d099c19 100644
--- a/src/views/ConceptView.vue
+++ b/src/views/ConceptView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -96,18 +97,14 @@ const pillars = [
           <p class="mt-3 text-muted-foreground">{{ t('concept.slowFarming.body') }}</p>
         </div>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <article
-            v-for="p in pillars"
-            :key="p.key"
-            class="rounded-lg border border-border bg-card p-6"
-          >
+          <Card v-for="p in pillars" :key="p.key" class="p-6">
             <h3 class="font-serif text-xl font-semibold">
               {{ t(`concept.slowFarming.${p.key}Title`) }}
             </h3>
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`concept.slowFarming.${p.key}Body`) }}
             </p>
-          </article>
+          </Card>
         </div>
       </div>
     </section>
diff --git a/src/views/EventsView.vue b/src/views/EventsView.vue
index dc8c653..79fb3a1 100644
--- a/src/views/EventsView.vue
+++ b/src/views/EventsView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -64,28 +65,30 @@ const events = [
           <component
             :is="e.to ? 'RouterLink' : 'article'"
             v-bind="e.to ? { to: e.to } : {}"
-            class="group block h-full overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
+            class="group block h-full"
           >
-            <img
-              :src="e.image"
-              alt=""
-              class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
-              loading="lazy"
-            />
-            <div class="p-5">
-              <p class="text-xs uppercase tracking-wider text-accent">
-                {{ t(`events.${e.key}.date`) }}
-              </p>
-              <h2 class="mt-1 font-serif text-xl font-semibold">
-                {{ t(`events.${e.key}.title`) }}
-              </h2>
-              <p class="mt-1 text-xs text-muted-foreground">
-                {{ t(`events.${e.key}.location`) }}
-              </p>
-              <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-                {{ t(`events.${e.key}.description`) }}
-              </p>
-            </div>
+            <Card class="h-full overflow-hidden transition hover:shadow-md">
+              <img
+                :src="e.image"
+                alt=""
+                class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
+                loading="lazy"
+              />
+              <CardContent class="p-5 pt-5">
+                <p class="text-xs uppercase tracking-wider text-accent">
+                  {{ t(`events.${e.key}.date`) }}
+                </p>
+                <h2 class="mt-1 font-serif text-xl font-semibold">
+                  {{ t(`events.${e.key}.title`) }}
+                </h2>
+                <p class="mt-1 text-xs text-muted-foreground">
+                  {{ t(`events.${e.key}.location`) }}
+                </p>
+                <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+                  {{ t(`events.${e.key}.description`) }}
+                </p>
+              </CardContent>
+            </Card>
           </component>
         </li>
       </ul>
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
index d82889f..ed895a4 100644
--- a/src/views/GalleryView.vue
+++ b/src/views/GalleryView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -47,24 +48,22 @@ const items = [
 
     <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
       <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <li
-          v-for="item in items"
-          :key="item.key"
-          class="group overflow-hidden rounded-lg border border-border bg-card"
-        >
-          <figure>
-            <img
-              :src="item.src"
-              :alt="t(`gallery.captions.${item.key}`)"
-              class="aspect-square w-full object-cover transition group-hover:scale-[1.02]"
-              loading="lazy"
-            />
-            <figcaption
-              class="border-t border-border px-4 py-3 font-serif text-sm text-foreground/85"
-            >
-              {{ t(`gallery.captions.${item.key}`) }}
-            </figcaption>
-          </figure>
+        <li v-for="item in items" :key="item.key" class="group">
+          <Card class="overflow-hidden">
+            <figure>
+              <img
+                :src="item.src"
+                :alt="t(`gallery.captions.${item.key}`)"
+                class="aspect-square w-full object-cover transition group-hover:scale-[1.02]"
+                loading="lazy"
+              />
+              <figcaption
+                class="border-t border-border px-4 py-3 font-serif text-sm text-foreground/85"
+              >
+                {{ t(`gallery.captions.${item.key}`) }}
+              </figcaption>
+            </figure>
+          </Card>
         </li>
       </ul>
     </section>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0660f9e..e2c31b8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 import cosmicStag from '@/assets/cosmic-stag.avif'
 import heroLandscape from '@/assets/hero-landscape.webp'
 import sectionTile from '@/assets/section-tile.webp'
@@ -192,25 +193,27 @@ const featuredEvents = [
             v-for="e in featuredEvents"
             :key="e.key"
             :to="e.to"
-            class="group overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
+            class="group block"
           >
-            <img
-              :src="e.image"
-              alt=""
-              class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
-              loading="lazy"
-            />
-            <div class="p-5">
-              <p class="text-xs uppercase tracking-wider text-accent">
-                {{ t(`events.${e.key}.date`) }}
-              </p>
-              <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
-                {{ t(`events.${e.key}.title`) }}
-              </h3>
-              <p class="mt-1 text-xs text-foreground/70">
-                {{ t(`events.${e.key}.location`) }}
-              </p>
-            </div>
+            <Card class="overflow-hidden transition hover:shadow-md">
+              <img
+                :src="e.image"
+                alt=""
+                class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
+                loading="lazy"
+              />
+              <CardContent class="p-5 pt-5">
+                <p class="text-xs uppercase tracking-wider text-accent">
+                  {{ t(`events.${e.key}.date`) }}
+                </p>
+                <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
+                  {{ t(`events.${e.key}.title`) }}
+                </h3>
+                <p class="mt-1 text-xs text-foreground/70">
+                  {{ t(`events.${e.key}.location`) }}
+                </p>
+              </CardContent>
+            </Card>
           </RouterLink>
         </div>
         <div class="mt-10 text-center">
diff --git a/src/views/LongStaysView.vue b/src/views/LongStaysView.vue
index c5f8bc5..355a7f0 100644
--- a/src/views/LongStaysView.vue
+++ b/src/views/LongStaysView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -31,18 +32,14 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
         {{ t('longStays.pathsTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 md:grid-cols-2">
-        <article
-          v-for="key in paths"
-          :key="key"
-          class="rounded-lg border border-border bg-card p-6"
-        >
+        <Card v-for="key in paths" :key="key" class="p-6">
           <h3 class="font-serif text-xl font-semibold">
             {{ t(`longStays.paths.${key}Title`) }}
           </h3>
           <p class="mt-3 text-base leading-relaxed text-foreground/85">
             {{ t(`longStays.paths.${key}Body`) }}
           </p>
-        </article>
+        </Card>
       </div>
     </section>
 
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
index dd0124a..cb79bc2 100644
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -28,18 +29,14 @@ const categories = ['fresh', 'pantry', 'craft'] as const
         {{ t('marketplace.categoriesTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 md:grid-cols-3">
-        <article
-          v-for="key in categories"
-          :key="key"
-          class="rounded-lg border border-dashed border-border bg-card p-6"
-        >
+        <Card v-for="key in categories" :key="key" class="border-dashed p-6">
           <h3 class="font-serif text-xl font-semibold">
             {{ t(`marketplace.categories.${key}Title`) }}
           </h3>
           <p class="mt-3 text-base leading-relaxed text-foreground/85">
             {{ t(`marketplace.categories.${key}Body`) }}
           </p>
-        </article>
+        </Card>
       </div>
     </section>
 
diff --git a/src/views/OpportunitiesView.vue b/src/views/OpportunitiesView.vue
index 1e35cc1..cfca7c2 100644
--- a/src/views/OpportunitiesView.vue
+++ b/src/views/OpportunitiesView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -43,17 +44,15 @@ const applyKeys = ['model', 'window', 'open'] as const
         <p class="mt-3 text-muted-foreground">{{ t('opportunities.groupsSubtitle') }}</p>
       </div>
       <ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <li
-          v-for="key in groups"
-          :key="key"
-          class="rounded-lg border border-border bg-card p-6"
-        >
-          <h3 class="font-serif text-xl font-semibold">
-            {{ t(`opportunities.groups.${key}Title`) }}
-          </h3>
-          <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-            {{ t(`opportunities.groups.${key}Positions`) }}
-          </p>
+        <li v-for="key in groups" :key="key">
+          <Card class="p-6">
+            <h3 class="font-serif text-xl font-semibold">
+              {{ t(`opportunities.groups.${key}Title`) }}
+            </h3>
+            <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+              {{ t(`opportunities.groups.${key}Positions`) }}
+            </p>
+          </Card>
         </li>
       </ul>
     </section>
@@ -65,18 +64,14 @@ const applyKeys = ['model', 'window', 'open'] as const
           {{ t('opportunities.applyTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <article
-            v-for="key in applyKeys"
-            :key="key"
-            class="rounded-lg border border-border bg-card p-6"
-          >
+          <Card v-for="key in applyKeys" :key="key" class="p-6">
             <h3 class="font-serif text-lg font-semibold">
               {{ t(`opportunities.apply.${key}Title`) }}
             </h3>
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`opportunities.apply.${key}Body`) }}
             </p>
-          </article>
+          </Card>
         </div>
         <div class="mt-10 flex flex-wrap items-center gap-3">
           <Button as-child>
diff --git a/src/views/ReservationsView.vue b/src/views/ReservationsView.vue
index eca6e2f..de0dd7d 100644
--- a/src/views/ReservationsView.vue
+++ b/src/views/ReservationsView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -31,18 +32,14 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
         {{ t('reservations.kindsTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <article
-          v-for="key in kinds"
-          :key="key"
-          class="rounded-lg border border-border bg-card p-6"
-        >
+        <Card v-for="key in kinds" :key="key" class="p-6">
           <h3 class="font-serif text-xl font-semibold">
             {{ t(`reservations.kinds.${key}Title`) }}
           </h3>
           <p class="mt-3 text-sm leading-relaxed text-foreground/85">
             {{ t(`reservations.kinds.${key}Body`) }}
           </p>
-        </article>
+        </Card>
       </div>
     </section>
 
@@ -87,7 +84,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
           </div>
         </div>
 
-        <aside class="rounded-lg border border-border bg-card p-6 lg:col-span-2">
+        <Card class="p-6 lg:col-span-2">
           <h3 class="font-serif text-xl font-semibold">
             {{ t('reservations.contactCard.title') }}
           </h3>
@@ -118,7 +115,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
               <dd class="mt-1">{{ t('reservations.contactCard.openingValue') }}</dd>
             </div>
           </dl>
-        </aside>
+        </Card>
       </div>
     </section>
   </div>
diff --git a/src/views/SymposiumView.vue b/src/views/SymposiumView.vue
index cac3995..e494ca0 100644
--- a/src/views/SymposiumView.vue
+++ b/src/views/SymposiumView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -56,18 +57,14 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
           {{ t('symposium.includedTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          <article
-            v-for="key in included"
-            :key="key"
-            class="rounded-lg border border-border bg-background p-6"
-          >
+          <Card v-for="key in included" :key="key" class="bg-background p-6">
             <h3 class="font-serif text-lg font-semibold">
               {{ t(`symposium.included.${key}Title`) }}
             </h3>
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`symposium.included.${key}Body`) }}
             </p>
-          </article>
+          </Card>
         </div>
       </div>
     </section>
@@ -89,17 +86,15 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
           {{ t('symposium.applyTitle') }}
         </h2>
         <ol class="mt-8 grid gap-6 md:grid-cols-3">
-          <li
-            v-for="step in applySteps"
-            :key="step"
-            class="rounded-lg border border-border bg-card p-6"
-          >
-            <h3 class="font-serif text-lg font-semibold">
-              {{ t(`symposium.apply.${step}Title`) }}
-            </h3>
-            <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-              {{ t(`symposium.apply.${step}Body`) }}
-            </p>
+          <li v-for="step in applySteps" :key="step">
+            <Card class="p-6">
+              <h3 class="font-serif text-lg font-semibold">
+                {{ t(`symposium.apply.${step}Title`) }}
+              </h3>
+              <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+                {{ t(`symposium.apply.${step}Body`) }}
+              </p>
+            </Card>
           </li>
         </ol>
         <div class="mt-10 flex flex-wrap items-center gap-3">
diff --git a/src/views/VisionValuesView.vue b/src/views/VisionValuesView.vue
index 96a36f5..9c9b2e8 100644
--- a/src/views/VisionValuesView.vue
+++ b/src/views/VisionValuesView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -55,11 +56,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
           <p class="mt-3 text-muted-foreground">{{ t('vision.philosophySubtitle') }}</p>
         </div>
         <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
-          <article
-            v-for="(p, i) in philosophy"
-            :key="p"
-            class="rounded-lg border border-border bg-background p-5"
-          >
+          <Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5">
             <div class="font-serif text-2xl text-accent">{{ i + 1 }}</div>
             <h3 class="mt-2 font-serif text-lg font-semibold">
               {{ t(`vision.philosophy.${p}Title`) }}
@@ -67,7 +64,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
             <p class="mt-2 text-sm leading-relaxed text-foreground/85">
               {{ t(`vision.philosophy.${p}Body`) }}
             </p>
-          </article>
+          </Card>
         </div>
       </div>
     </section>
@@ -81,16 +78,12 @@ const team = ['patrick', 'coco', 'charlie'] as const
         <p class="mt-3 text-muted-foreground">{{ t('vision.pillarsSubtitle') }}</p>
       </div>
       <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        <article
-          v-for="p in pillars"
-          :key="p"
-          class="rounded-lg border border-border bg-card p-6"
-        >
+        <Card v-for="p in pillars" :key="p" class="p-6">
           <h3 class="font-serif text-xl font-semibold">{{ t(`vision.pillars.${p}Title`) }}</h3>
           <p class="mt-3 text-sm leading-relaxed text-foreground/85">
             {{ t(`vision.pillars.${p}Body`) }}
           </p>
-        </article>
+        </Card>
       </div>
     </section>
 
@@ -101,11 +94,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
           {{ t('vision.teamTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <article
-            v-for="m in team"
-            :key="m"
-            class="rounded-lg border border-border bg-card p-6"
-          >
+          <Card v-for="m in team" :key="m" class="p-6">
             <h3 class="font-serif text-xl font-semibold">{{ t(`vision.team.${m}Name`) }}</h3>
             <p class="mt-1 text-xs uppercase tracking-wider text-accent">
               {{ t(`vision.team.${m}Role`) }}
@@ -113,7 +102,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`vision.team.${m}Body`) }}
             </p>
-          </article>
+          </Card>
         </div>
       </div>
     </section>

From d56664abf968a8963db4d30c391d52c62b59b840 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 17:02:57 +0200
Subject: [PATCH 2/7] feat(ui): install shadcn Badge; use for accommodation
 status pills
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add the Badge primitive at src/components/ui/badge with the standard
default / secondary / destructive / outline variants.

Replace the two hand-rolled status pill patterns in AccommodationView
(rooms + cabins) with <Badge>:

- Room "Open" pill → variant="default" (filled gold on green)
- Room/Cabin "Coming soon" pill → variant="outline" (border + muted)

Keeps the small-caps tracking and 10px size via class overrides so
the visual rhythm against the room/cabin Card titles is preserved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/ui/badge/Badge.vue | 17 +++++++++++++++++
 src/components/ui/badge/index.ts  | 26 ++++++++++++++++++++++++++
 src/views/AccommodationView.vue   | 20 +++++++++-----------
 3 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ui/badge/Badge.vue
 create mode 100644 src/components/ui/badge/index.ts

diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000..0374568
--- /dev/null
+++ b/src/components/ui/badge/Badge.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<{
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
new file mode 100644
index 0000000..98a768d
--- /dev/null
+++ b/src/components/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex gap-1 items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/src/views/AccommodationView.vue b/src/views/AccommodationView.vue
index f0bab13..a84aad4 100644
--- a/src/views/AccommodationView.vue
+++ b/src/views/AccommodationView.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
 const { t, tm, rt } = useI18n()
 
@@ -96,20 +97,16 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
                 <h3 class="font-serif text-xl font-semibold">
                   {{ t(`accommodation.rooms.${room.key}.name`) }}
                 </h3>
-                <span
-                  class="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider"
-                  :class="
-                    room.open
-                      ? 'bg-primary/10 text-primary'
-                      : 'border border-border text-muted-foreground'
-                  "
+                <Badge
+                  :variant="room.open ? 'default' : 'outline'"
+                  class="text-[10px] uppercase tracking-wider"
                 >
                   {{
                     room.open
                       ? t('accommodation.statusOpen')
                       : t('accommodation.statusComingSoon')
                   }}
-                </span>
+                </Badge>
               </div>
               <p class="mt-3 text-sm leading-relaxed text-foreground/85">
                 {{ t(`accommodation.rooms.${room.key}.summary`) }}
@@ -142,11 +139,12 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
                 <h3 class="font-serif text-xl font-semibold">
                   {{ t(`accommodation.cabins.${cabin.key}`) }}
                 </h3>
-                <span
-                  class="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
+                <Badge
+                  variant="outline"
+                  class="text-[10px] uppercase tracking-wider text-muted-foreground"
                 >
                   {{ t('accommodation.statusComingSoon') }}
-                </span>
+                </Badge>
               </div>
             </Card>
           </li>

From 262fb039a858c0c7d9f618cb97c71bf42f51e4ce Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 23:16:27 +0200
Subject: [PATCH 3/7] feat(header): shadcn NavigationMenu replaces hand-rolled
 dropdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Install the shadcn-vue NavigationMenu component family at
src/components/ui/navigation-menu (NavigationMenu / NavigationMenuList
/ NavigationMenuItem / NavigationMenuTrigger / NavigationMenuContent /
NavigationMenuLink / NavigationMenuIndicator / NavigationMenuViewport
+ navigationMenuTriggerStyle cva). Files came in via the registry JSON
(www.shadcn-vue.com/r/styles/default/navigation-menu.json) because the
CLI's corepack pnpm shim conflicts with our nix-managed pnpm — handle
that more cleanly later.

Adds @vueuse/core as a runtime dependency (reactiveOmit /
useForwardProps inside the navigation-menu primitives).

Two upstream fixes applied:

1. NavigationMenuTrigger imports ChevronDown from "@lucide/vue", not
   the deprecated "lucide-vue-next" the registry ships by default.

2. NavigationMenuViewport's height/width CSS variable references use
   Tailwind v3 syntax — h-[--reka-navigation-menu-viewport-height] —
   which renders as a literal string under Tailwind v4, collapsing
   the viewport to 2px. Wrap them in var() so v4 resolves them
   correctly: h-[var(--reka-navigation-menu-viewport-height)].

SiteHeader desktop nav: drop the custom openGroup ref, the
document-level click/keydown listeners and the v-show toggle in
favour of NavigationMenuTrigger + NavigationMenuContent for the four
group dropdowns (Concept / What's On / Collaborate / Reservations),
plus a flat Marketplace link styled with navigationMenuTriggerStyle.
Hover/focus/open states all use bg-muted + text-primary to preserve
the green-bg/gold-text feel from the hand-rolled nav.

Mobile menu stays hand-rolled for this commit; Sheet refactor lands
in a follow-up.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   3 +
 src/components/SiteHeader.vue                 | 117 ++++++++----------
 .../ui/navigation-menu/NavigationMenu.vue     |  29 +++++
 .../navigation-menu/NavigationMenuContent.vue |  30 +++++
 .../NavigationMenuIndicator.vue               |  22 ++++
 .../ui/navigation-menu/NavigationMenuItem.vue |  12 ++
 .../ui/navigation-menu/NavigationMenuLink.vue |  18 +++
 .../ui/navigation-menu/NavigationMenuList.vue |  27 ++++
 .../navigation-menu/NavigationMenuTrigger.vue |  31 +++++
 .../NavigationMenuViewport.vue                |  30 +++++
 src/components/ui/navigation-menu/index.ts    |  14 +++
 12 files changed, 272 insertions(+), 62 deletions(-)
 create mode 100644 src/components/ui/navigation-menu/NavigationMenu.vue
 create mode 100644 src/components/ui/navigation-menu/NavigationMenuContent.vue
 create mode 100644 src/components/ui/navigation-menu/NavigationMenuIndicator.vue
 create mode 100644 src/components/ui/navigation-menu/NavigationMenuItem.vue
 create mode 100644 src/components/ui/navigation-menu/NavigationMenuLink.vue
 create mode 100644 src/components/ui/navigation-menu/NavigationMenuList.vue
 create mode 100644 src/components/ui/navigation-menu/NavigationMenuTrigger.vue
 create mode 100644 src/components/ui/navigation-menu/NavigationMenuViewport.vue
 create mode 100644 src/components/ui/navigation-menu/index.ts

diff --git a/package.json b/package.json
index 482316c..d306d8e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@lucide/vue": "^1.16.0",
     "@vee-validate/zod": "^4.15.1",
+    "@vueuse/core": "^14.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "pinia": "^3.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a409bb..d9abe51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@vee-validate/zod':
         specifier: ^4.15.1
         version: 4.15.1(vue@3.5.34(typescript@6.0.3))(zod@3.25.76)
+      '@vueuse/core':
+        specifier: ^14.3.0
+        version: 14.3.0(vue@3.5.34(typescript@6.0.3))
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 285caf1..8f7600d 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink, useRoute } from 'vue-router'
+import { cn } from '@/lib/utils'
 import cosmicStag from '@/assets/cosmic-stag.avif'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu'
 
 const { t, locale } = useI18n()
 const route = useRoute()
 
-const openGroup = ref<string | null>(null)
 const mobileOpen = ref(false)
-const headerEl = ref<HTMLElement | null>(null)
 
 interface NavItem {
   to: string
@@ -57,12 +65,7 @@ const groups = computed<NavGroup[]>(() => [
   },
 ])
 
-function toggle(id: string) {
-  openGroup.value = openGroup.value === id ? null : id
-}
-
-function closeAll() {
-  openGroup.value = null
+function closeMobile() {
   mobileOpen.value = false
 }
 
@@ -70,35 +73,16 @@ function toggleLocale() {
   locale.value = locale.value === 'fr' ? 'en' : 'fr'
 }
 
-function onClickOutside(e: MouseEvent) {
-  if (!headerEl.value) return
-  if (!headerEl.value.contains(e.target as Node)) openGroup.value = null
-}
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') closeAll()
-}
-
-watch(() => route.path, closeAll)
-
-onMounted(() => {
-  document.addEventListener('click', onClickOutside)
-  document.addEventListener('keydown', onKeydown)
-})
-onUnmounted(() => {
-  document.removeEventListener('click', onClickOutside)
-  document.removeEventListener('keydown', onKeydown)
-})
+watch(() => route.path, closeMobile)
 </script>
 
 <template>
   <header
-    ref="headerEl"
     class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150"
   >
     <div class="mx-auto max-w-7xl px-4 lg:px-6">
       <div class="flex h-16 items-center justify-between gap-4">
-        <RouterLink to="/" class="flex items-center gap-3" @click="closeAll">
+        <RouterLink to="/" class="flex items-center gap-3" @click="closeMobile">
           <img :src="cosmicStag" alt="" class="h-9 w-9 shrink-0" />
           <span class="leading-tight">
             <span class="block font-serif text-base tracking-tight text-foreground">
@@ -110,38 +94,47 @@ onUnmounted(() => {
           </span>
         </RouterLink>
 
-        <nav class="hidden items-center gap-1 lg:flex">
-          <div v-for="g in groups" :key="g.id" class="relative">
-            <button
-              type="button"
-              class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
-              :aria-expanded="openGroup === g.id"
-              @click.stop="toggle(g.id)"
-            >
-              {{ g.label }}
-              <span class="ml-1 inline-block text-xs">▾</span>
-            </button>
-            <ul
-              v-show="openGroup === g.id"
-              class="absolute right-0 top-full z-50 mt-1 min-w-52 rounded-md border border-border bg-popover py-1 shadow-md"
-            >
-              <li v-for="i in g.items" :key="i.to">
-                <RouterLink
-                  :to="i.to"
-                  class="block px-4 py-2 text-sm hover:bg-muted"
-                  @click="closeAll"
+        <div class="hidden items-center gap-1 lg:flex">
+          <NavigationMenu>
+            <NavigationMenuList>
+              <NavigationMenuItem v-for="g in groups" :key="g.id">
+                <NavigationMenuTrigger
+                  class="bg-transparent hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary data-[state=open]:bg-muted data-[state=open]:text-primary"
                 >
-                  {{ i.label }}
-                </RouterLink>
-              </li>
-            </ul>
-          </div>
-          <RouterLink
-            to="/marketplace"
-            class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
-          >
-            {{ t('nav.marketplace') }}
-          </RouterLink>
+                  {{ g.label }}
+                </NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul class="min-w-52 p-1">
+                    <li v-for="i in g.items" :key="i.to">
+                      <NavigationMenuLink as-child>
+                        <RouterLink
+                          :to="i.to"
+                          class="block rounded-sm px-4 py-2 text-sm hover:bg-muted hover:text-primary"
+                        >
+                          {{ i.label }}
+                        </RouterLink>
+                      </NavigationMenuLink>
+                    </li>
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink as-child>
+                  <RouterLink
+                    to="/marketplace"
+                    :class="
+                      cn(
+                        navigationMenuTriggerStyle(),
+                        'bg-transparent hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary',
+                      )
+                    "
+                  >
+                    {{ t('nav.marketplace') }}
+                  </RouterLink>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
           <button
             type="button"
             class="ml-2 rounded-md border border-border px-2 py-1 text-xs uppercase tracking-wider text-muted-foreground hover:bg-muted"
@@ -149,7 +142,7 @@ onUnmounted(() => {
           >
             {{ locale === 'fr' ? 'EN' : 'FR' }}
           </button>
-        </nav>
+        </div>
 
         <button
           type="button"
diff --git a/src/components/ui/navigation-menu/NavigationMenu.vue b/src/components/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 0000000..48d0931
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import NavigationMenuViewport from "./NavigationMenuViewport.vue"
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuContent.vue b/src/components/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 0000000..35729f9
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuIndicator.vue b/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 0000000..80bfdf4
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuItem.vue b/src/components/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 0000000..0d3b9c7
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from "reka-ui"
+import { NavigationMenuItem } from "reka-ui"
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuLink.vue b/src/components/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 0000000..e8240b9
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
+import {
+  NavigationMenuLink,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuList.vue b/src/components/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 0000000..4c175f0
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuList, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuTrigger.vue b/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 0000000..4c138ba
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "@lucide/vue"
+import {
+  NavigationMenuTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { navigationMenuTriggerStyle } from "."
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuViewport.vue b/src/components/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 0000000..9618846
--- /dev/null
+++ b/src/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuViewport,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/src/components/ui/navigation-menu/index.ts b/src/components/ui/navigation-menu/index.ts
new file mode 100644
index 0000000..e7efa86
--- /dev/null
+++ b/src/components/ui/navigation-menu/index.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+export { default as NavigationMenu } from "./NavigationMenu.vue"
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
+export { default as NavigationMenuList } from "./NavigationMenuList.vue"
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+)

From 0aeab927637b6be6e522a1d7d0a1d0d0755fa22c Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 23:20:11 +0200
Subject: [PATCH 4/7] fix(header): drop nav triggers back to font-light

navigationMenuTriggerStyle ships with font-medium baked in. Our
pre-NavigationMenu nav had no weight class so it inherited Roboto 300
(font-light) from the body, which read more in keeping with the
restrained aesthetic of the rest of the page. Override the cva base
with font-light on each NavigationMenuTrigger and on the Marketplace
flat link.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/SiteHeader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 8f7600d..c30a993 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -99,7 +99,7 @@ watch(() => route.path, closeMobile)
             <NavigationMenuList>
               <NavigationMenuItem v-for="g in groups" :key="g.id">
                 <NavigationMenuTrigger
-                  class="bg-transparent hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary data-[state=open]:bg-muted data-[state=open]:text-primary"
+                  class="bg-transparent font-light hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary data-[state=open]:bg-muted data-[state=open]:text-primary"
                 >
                   {{ g.label }}
                 </NavigationMenuTrigger>
@@ -125,7 +125,7 @@ watch(() => route.path, closeMobile)
                     :class="
                       cn(
                         navigationMenuTriggerStyle(),
-                        'bg-transparent hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary',
+                        'bg-transparent font-light hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary',
                       )
                     "
                   >

From b0a414972b6a785aa747ce508c94d2b23bdbc46e Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 23:31:32 +0200
Subject: [PATCH 5/7] feat(header): shadcn Sheet replaces hand-rolled mobile
 menu

Install the shadcn-vue Sheet primitives (Sheet / SheetTrigger /
SheetContent / SheetHeader / SheetTitle / SheetDescription /
SheetFooter / SheetClose + the sheetVariants cva) at
src/components/ui/sheet. Files mirrored from the registry JSON to
sidestep the same corepack-pnpm issue that blocks the CLI; X icon
import fixed to @lucide/vue.

SiteHeader: drop the hand-rolled hamburger that toggled a v-show
panel beneath the header, in favour of a Sheet with the hamburger
as SheetTrigger (as-child) and the full nav list as SheetContent
sliding from the right. Sheet handles open-state via v-model:open,
which the route watcher still drives so navigating from the menu
auto-closes the panel. SheetContent runs through a Portal at body
level so the slide animation isn't constrained by the frosted-glass
header.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/SiteHeader.vue                | 93 ++++++++++++--------
 src/components/ui/sheet/Sheet.vue            | 15 ++++
 src/components/ui/sheet/SheetClose.vue       | 12 +++
 src/components/ui/sheet/SheetContent.vue     | 53 +++++++++++
 src/components/ui/sheet/SheetDescription.vue | 20 +++++
 src/components/ui/sheet/SheetFooter.vue      | 19 ++++
 src/components/ui/sheet/SheetHeader.vue      | 16 ++++
 src/components/ui/sheet/SheetTitle.vue       | 20 +++++
 src/components/ui/sheet/SheetTrigger.vue     | 12 +++
 src/components/ui/sheet/index.ts             | 32 +++++++
 10 files changed, 253 insertions(+), 39 deletions(-)
 create mode 100644 src/components/ui/sheet/Sheet.vue
 create mode 100644 src/components/ui/sheet/SheetClose.vue
 create mode 100644 src/components/ui/sheet/SheetContent.vue
 create mode 100644 src/components/ui/sheet/SheetDescription.vue
 create mode 100644 src/components/ui/sheet/SheetFooter.vue
 create mode 100644 src/components/ui/sheet/SheetHeader.vue
 create mode 100644 src/components/ui/sheet/SheetTitle.vue
 create mode 100644 src/components/ui/sheet/SheetTrigger.vue
 create mode 100644 src/components/ui/sheet/index.ts

diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index c30a993..83afe58 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -13,6 +13,13 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from '@/components/ui/navigation-menu'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
 
 const { t, locale } = useI18n()
 const route = useRoute()
@@ -144,45 +151,53 @@ watch(() => route.path, closeMobile)
           </button>
         </div>
 
-        <button
-          type="button"
-          class="rounded-md p-2 lg:hidden"
-          :aria-label="t('nav.menu')"
-          :aria-expanded="mobileOpen"
-          @click="mobileOpen = !mobileOpen"
-        >
-          <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
-          <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
-          <span class="block h-0.5 w-6 bg-foreground"></span>
-        </button>
-      </div>
-
-      <div v-show="mobileOpen" class="border-t border-border py-3 lg:hidden">
-        <div v-for="g in groups" :key="g.id" class="py-2">
-          <div
-            class="px-2 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-          >
-            {{ g.label }}
-          </div>
-          <RouterLink
-            v-for="i in g.items"
-            :key="i.to"
-            :to="i.to"
-            class="block rounded-md px-4 py-2 hover:bg-muted"
-          >
-            {{ i.label }}
-          </RouterLink>
-        </div>
-        <RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
-          {{ t('nav.marketplace') }}
-        </RouterLink>
-        <button
-          type="button"
-          class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
-          @click="toggleLocale"
-        >
-          {{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
-        </button>
+        <Sheet v-model:open="mobileOpen">
+          <SheetTrigger as-child>
+            <button
+              type="button"
+              class="rounded-md p-2 lg:hidden"
+              :aria-label="t('nav.menu')"
+            >
+              <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
+              <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
+              <span class="block h-0.5 w-6 bg-foreground"></span>
+            </button>
+          </SheetTrigger>
+          <SheetContent side="right" class="w-full overflow-y-auto sm:max-w-sm">
+            <SheetHeader>
+              <SheetTitle class="font-display uppercase tracking-wider">
+                {{ t('nav.menu') }}
+              </SheetTitle>
+            </SheetHeader>
+            <nav class="mt-6 space-y-4">
+              <div v-for="g in groups" :key="g.id" class="space-y-1">
+                <div
+                  class="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  {{ g.label }}
+                </div>
+                <RouterLink
+                  v-for="i in g.items"
+                  :key="i.to"
+                  :to="i.to"
+                  class="block rounded-md px-4 py-2 hover:bg-muted"
+                >
+                  {{ i.label }}
+                </RouterLink>
+              </div>
+              <RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
+                {{ t('nav.marketplace') }}
+              </RouterLink>
+              <button
+                type="button"
+                class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
+                @click="toggleLocale"
+              >
+                {{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
+              </button>
+            </nav>
+          </SheetContent>
+        </Sheet>
       </div>
     </div>
   </header>
diff --git a/src/components/ui/sheet/Sheet.vue b/src/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..47b0968
--- /dev/null
+++ b/src/components/ui/sheet/Sheet.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/src/components/ui/sheet/SheetClose.vue b/src/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..0295976
--- /dev/null
+++ b/src/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..502879c
--- /dev/null
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SheetVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "@lucide/vue"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sheetVariants } from "."
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: SheetVariants["side"]
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/src/components/ui/sheet/SheetDescription.vue b/src/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..455c2f4
--- /dev/null
+++ b/src/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/src/components/ui/sheet/SheetFooter.vue b/src/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..5f481e5
--- /dev/null
+++ b/src/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/sheet/SheetHeader.vue b/src/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..f97d24a
--- /dev/null
+++ b/src/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/sheet/SheetTitle.vue b/src/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..5870787
--- /dev/null
+++ b/src/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/src/components/ui/sheet/SheetTrigger.vue b/src/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..a4fc3ee
--- /dev/null
+++ b/src/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/src/components/ui/sheet/index.ts b/src/components/ui/sheet/index.ts
new file mode 100644
index 0000000..a370633
--- /dev/null
+++ b/src/components/ui/sheet/index.ts
@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>

From ba009ed4b77f261c086d093e9cb73ee562993d5c Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 23:32:56 +0200
Subject: [PATCH 6/7] feat(events): shadcn Alert replaces hand-rolled callout
 aside
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Install the shadcn-vue Alert primitives (Alert / AlertTitle /
AlertDescription + the alertVariants cva) at
src/components/ui/alert. Files mirrored from the registry JSON.

EventsView: the bouge.ariege.io heads-up at the top of the listing
was a hand-styled <aside> with a <p> kicker and a body paragraph;
swap to <Alert><AlertTitle>…</AlertTitle><AlertDescription>…
</AlertDescription></Alert>. Keep bg-card + text-foreground/85
overrides so it still reads as a quiet card on the green hero band
rather than the variant default.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/ui/alert/Alert.vue            | 17 ++++++++++++++
 src/components/ui/alert/AlertDescription.vue | 14 ++++++++++++
 src/components/ui/alert/AlertTitle.vue       | 14 ++++++++++++
 src/components/ui/alert/index.ts             | 24 ++++++++++++++++++++
 src/views/EventsView.vue                     | 15 ++++++------
 5 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ui/alert/Alert.vue
 create mode 100644 src/components/ui/alert/AlertDescription.vue
 create mode 100644 src/components/ui/alert/AlertTitle.vue
 create mode 100644 src/components/ui/alert/index.ts

diff --git a/src/components/ui/alert/Alert.vue b/src/components/ui/alert/Alert.vue
new file mode 100644
index 0000000..9feea31
--- /dev/null
+++ b/src/components/ui/alert/Alert.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert/AlertDescription.vue b/src/components/ui/alert/AlertDescription.vue
new file mode 100644
index 0000000..afeaa01
--- /dev/null
+++ b/src/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert/AlertTitle.vue b/src/components/ui/alert/AlertTitle.vue
new file mode 100644
index 0000000..1f98d11
--- /dev/null
+++ b/src/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/src/components/ui/alert/index.ts b/src/components/ui/alert/index.ts
new file mode 100644
index 0000000..1106fd0
--- /dev/null
+++ b/src/components/ui/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/src/views/EventsView.vue b/src/views/EventsView.vue
index 79fb3a1..b060aac 100644
--- a/src/views/EventsView.vue
+++ b/src/views/EventsView.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
 const { t } = useI18n()
 
@@ -48,14 +49,14 @@ const events = [
         <p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
           {{ t('events.page.lede') }}
         </p>
-        <aside
-          class="mt-8 max-w-prose rounded-md border border-border bg-card p-4 text-sm text-foreground/85"
-        >
-          <p class="text-xs font-semibold uppercase tracking-wider text-accent">
+        <Alert class="mt-8 max-w-prose bg-card text-foreground/85">
+          <AlertTitle class="text-xs uppercase tracking-wider text-accent">
             {{ t('events.page.noteHeading') }}
-          </p>
-          <p class="mt-1">{{ t('events.page.calendarNote') }}</p>
-        </aside>
+          </AlertTitle>
+          <AlertDescription>
+            {{ t('events.page.calendarNote') }}
+          </AlertDescription>
+        </Alert>
       </div>
     </section>
 

From 35bec04fd22ec6518dbfcaa9e2042443ae0e801a Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 23:50:52 +0200
Subject: [PATCH 7/7] feat(header): frosted-glass mobile sheet

Match the desktop nav's frosted aesthetic on the mobile menu:

- SheetContent in SiteHeader overrides the default bg-background with
  bg-background/65 + backdrop-blur-xl + backdrop-saturate-150 (same
  recipe the sticky <header> uses), plus a translucent white/10
  border so the slide-in panel reads as glass rather than a solid
  green block.
- SheetContent.vue (shared primitive): drop the overlay opacity from
  bg-black/80 to bg-black/30 so the page behind the sheet dims
  enough to indicate focus, but the pinned landscape still shows
  through.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/SiteHeader.vue            | 5 ++++-
 src/components/ui/sheet/SheetContent.vue | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 83afe58..4498007 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -163,7 +163,10 @@ watch(() => route.path, closeMobile)
               <span class="block h-0.5 w-6 bg-foreground"></span>
             </button>
           </SheetTrigger>
-          <SheetContent side="right" class="w-full overflow-y-auto sm:max-w-sm">
+          <SheetContent
+            side="right"
+            class="w-full overflow-y-auto border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 sm:max-w-sm"
+          >
             <SheetHeader>
               <SheetTitle class="font-display uppercase tracking-wider">
                 {{ t('nav.menu') }}
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 502879c..59e668c 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       :class="cn(sheetVariants({ side }), props.class)"