From 17cf1ec57749c05ef242386a214ec0418d375f10 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 8 Jun 2026 18:07:46 +0200
Subject: [PATCH] feat(marketplace): placeholder with three category teasers

Three dashed-bordered cards (field / pantry / crafted on site) sketch
what the shop will hold, with a launch-date notice and a mailto for
specific-item requests. Real storefront lands in a follow-up.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/i18n/locales/en.json      | 16 ++++++++++
 src/i18n/locales/fr.json      | 16 ++++++++++
 src/views/MarketplaceView.vue | 55 ++++++++++++++++++++++++++++++++---
 3 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 8b50e96..f9db728 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -178,6 +178,22 @@
       "cta": "Write to us"
     }
   },
+  "marketplace": {
+    "kicker": "Marketplace",
+    "title": "Boutique & farmstand",
+    "lede": "An online corner for what we grow and make on site is in the works. For now, a glimpse of what it will hold.",
+    "categoriesTitle": "What you'll find",
+    "categories": {
+      "freshTitle": "From the field",
+      "freshBody": "Seasonal vegetables, herbs and eggs from the farm.",
+      "pantryTitle": "Pantry",
+      "pantryBody": "Herbal chocolates, sprouted seeds, apple molasses and fruit vinegars.",
+      "craftTitle": "Crafted on site",
+      "craftBody": "Woolen wares, carved wood and pottery made by resident artists."
+    },
+    "notice": "Marketplace launches alongside the public opening, fall 2026.",
+    "ctaContact": "Ask us about a specific item"
+  },
   "accommodation": {
     "hero": {
       "kicker": "Reservations · Accommodation",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 8820c3a..e9e1a05 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -178,6 +178,22 @@
       "cta": "Nous écrire"
     }
   },
+  "marketplace": {
+    "kicker": "Boutique",
+    "title": "Boutique & fermette",
+    "lede": "Un coin en ligne pour ce que nous cultivons et fabriquons sur place est en préparation. En attendant, un aperçu de ce qu'il accueillera.",
+    "categoriesTitle": "Ce que vous y trouverez",
+    "categories": {
+      "freshTitle": "Du champ",
+      "freshBody": "Légumes, plantes aromatiques et œufs de saison de la fermette.",
+      "pantryTitle": "Garde-manger",
+      "pantryBody": "Chocolats aux plantes, graines germées, mélasse de pommes et vinaigres de fruits.",
+      "craftTitle": "Fabriqué sur place",
+      "craftBody": "Lainages, bois sculpté et poteries des artistes en résidence."
+    },
+    "notice": "La boutique ouvrira en même temps que le lieu, à l'automne 2026.",
+    "ctaContact": "Nous écrire pour un produit précis"
+  },
   "accommodation": {
     "hero": {
       "kicker": "Réservations · Hébergement",
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
index 9e76f3b..30f8a11 100644
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@@ -2,11 +2,58 @@
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
+
+const categories = ['fresh', 'pantry', 'craft'] as const
 </script>
 
 <template>
-  <article class="mx-auto max-w-4xl px-4 py-16">
-    <h1 class="font-serif text-4xl font-semibold tracking-tight">{{ t('nav.marketplace') }}</h1>
-    <p class="mt-4 text-muted-foreground">{{ t('common.comingSoon') }}</p>
-  </article>
+  <div>
+    <section class="border-b border-border bg-secondary/40">
+      <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
+        <p class="text-xs uppercase tracking-[0.2em] text-accent">
+          {{ t('marketplace.kicker') }}
+        </p>
+        <h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
+          {{ t('marketplace.title') }}
+        </h1>
+        <p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
+          {{ t('marketplace.lede') }}
+        </p>
+      </div>
+    </section>
+
+    <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
+      <h2 class="font-serif text-3xl font-semibold tracking-tight">
+        {{ 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"
+        >
+          <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>
+      </div>
+    </section>
+
+    <section class="border-t border-border bg-secondary/30">
+      <div class="mx-auto max-w-4xl px-4 py-12 text-center lg:px-6">
+        <p class="font-serif text-lg italic text-foreground/85">
+          {{ t('marketplace.notice') }}
+        </p>
+        <a
+          href="mailto:chateaudufaune@ariege.io?subject=Boutique%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
+          class="mt-6 inline-block rounded-md border border-border bg-card px-5 py-3 text-sm font-medium hover:bg-muted"
+        >
+          {{ t('marketplace.ctaContact') }}
+        </a>
+      </div>
+    </section>
+  </div>
 </template>