feat(opportunities): roles by domain + how-we-hire

Six domain cards (eco-building, farming, wellness, community,
development, rewilding & arts) listing the positions inside each.
Below: three explainers for the hiring model, the symposium
application window, and the open application path. Apply CTA opens a
pre-subject mailto.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/i18n/locales/en.json

@@ -178,6 +178,40 @@
       "cta": "Write to us"
     }
   },
+  "opportunities": {
+    "hero": {
+      "kicker": "Collaborate · Opportunities",
+      "title": "Open positions",
+      "lede": "We're shaping the team that will bring the next phase of Château du Faune to life. Each role can be paid, equity-based, housed on site, or a blend — let's talk."
+    },
+    "groupsTitle": "Roles open now",
+    "groupsSubtitle": "Grouped by domain. Symposium II.0 funds the first cohort.",
+    "groups": {
+      "buildingTitle": "Eco-Building",
+      "buildingPositions": "Construction Manager & Building Crew Lead · Eco-Building Apprentice",
+      "farmingTitle": "Farming",
+      "farmingPositions": "Agroecology & Farm Manager · Groundskeeper / Site Steward · Farmhand Apprentice",
+      "wellnessTitle": "Wellness",
+      "wellnessPositions": "Kitchen Manager (plant-based chef) · Yoga Teacher",
+      "communityTitle": "Community",
+      "communityPositions": "Public Relations Coordinator",
+      "developmentTitle": "Development",
+      "developmentPositions": "Compliance & Funding Manager · Open-Source Technology Strategist",
+      "rewildingTitle": "Rewilding & The Arts",
+      "rewildingPositions": "Roles in this stream are being defined."
+    },
+    "applyTitle": "How we hire",
+    "apply": {
+      "modelTitle": "A compassionate model",
+      "modelBody": "Compensation can take the form of pay, equity, on-site housing, team integration — or some combination. We aim for arrangements that work for both sides.",
+      "windowTitle": "Symposium application window",
+      "windowBody": "Symposium II.0 applications: 1 January → 15 March 2026. Open positions outside the symposium can be filled year-round.",
+      "openTitle": "Not sure where you fit?",
+      "openBody": "Send us an open residency application — describe what you do, what you're hoping to find, and we'll figure it out from there."
+    },
+    "ctaApply": "Send an application",
+    "ctaSymposium": "Symposium II.0 details"
+  },
   "longStays": {
     "hero": {
       "kicker": "Collaborate · Long Stays",

src/i18n/locales/fr.json

@@ -178,6 +178,40 @@
       "cta": "Nous écrire"
     }
   },
+  "opportunities": {
+    "hero": {
+      "kicker": "Collaborer · Opportunités",
+      "title": "Postes ouverts",
+      "lede": "Nous formons l'équipe qui va donner vie à la prochaine étape du Château du Faune. Chaque poste peut être rémunéré, en équité, avec logement sur place, ou un mélange — discutons-en."
+    },
+    "groupsTitle": "Rôles ouverts en ce moment",
+    "groupsSubtitle": "Regroupés par domaine. Le Symposium II.0 finance la première cohorte.",
+    "groups": {
+      "buildingTitle": "Éco-construction",
+      "buildingPositions": "Responsable construction & chef·fe d'équipe · Apprenti·e en éco-construction",
+      "farmingTitle": "Agriculture",
+      "farmingPositions": "Responsable agroécologie & ferme · Gardien·ne du lieu · Apprenti·e à la ferme",
+      "wellnessTitle": "Bien-être",
+      "wellnessPositions": "Responsable cuisine (chef·fe végétal·e) · Professeur·e de yoga",
+      "communityTitle": "Communauté",
+      "communityPositions": "Coordinateur·trice relations publiques",
+      "developmentTitle": "Développement",
+      "developmentPositions": "Responsable conformité & financement · Stratège open source",
+      "rewildingTitle": "Réensauvagement & arts",
+      "rewildingPositions": "Les rôles de ce volet sont en cours de définition."
+    },
+    "applyTitle": "Notre manière de recruter",
+    "apply": {
+      "modelTitle": "Un modèle bienveillant",
+      "modelBody": "La rémunération peut prendre la forme d'un salaire, d'équité, d'un logement sur place, d'une intégration à l'équipe — ou d'une combinaison. Nous cherchons des arrangements justes pour chacune des parties.",
+      "windowTitle": "Fenêtre de candidature au Symposium",
+      "windowBody": "Symposium II.0 : candidatures du 1ᵉʳ janvier au 15 mars 2026. Les postes hors symposium peuvent être pourvus toute l'année.",
+      "openTitle": "Pas sûr·e d'où vous placer ?",
+      "openBody": "Envoyez-nous une candidature libre — décrivez ce que vous faites, ce que vous cherchez, et nous trouverons ensemble."
+    },
+    "ctaApply": "Envoyer une candidature",
+    "ctaSymposium": "Détails du Symposium II.0"
+  },
   "longStays": {
     "hero": {
       "kicker": "Collaborer · Séjours longue durée",

src/views/OpportunitiesView.vue

@@ -1,12 +1,97 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { RouterLink } from 'vue-router'
 
 const { t } = useI18n()
+
+const groups = [
+  'building',
+  'farming',
+  'wellness',
+  'community',
+  'development',
+  'rewilding',
+] as const
+
+const applyKeys = ['model', 'window', 'open'] as const
 </script>
 
 <template>
-  <article class="mx-auto max-w-4xl px-4 py-16">
+  <div>
-    <h1 class="font-serif text-4xl font-semibold tracking-tight">{{ t('nav.opportunities') }}</h1>
+    <!-- Hero -->
-    <p class="mt-4 text-muted-foreground">{{ t('common.comingSoon') }}</p>
+    <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('opportunities.hero.kicker') }}
+        </p>
+        <h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
+          {{ t('opportunities.hero.title') }}
+        </h1>
+        <p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
+          {{ t('opportunities.hero.lede') }}
+        </p>
+      </div>
+    </section>
+
+    <!-- Groups of positions -->
+    <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
+      <div class="max-w-3xl">
+        <h2 class="font-serif text-3xl font-semibold tracking-tight">
+          {{ t('opportunities.groupsTitle') }}
+        </h2>
+        <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>
+      </ul>
+    </section>
+
+    <!-- How we hire -->
+    <section class="border-t border-border bg-secondary/30">
+      <div class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
+        <h2 class="font-serif text-3xl font-semibold tracking-tight">
+          {{ 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"
+          >
+            <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>
+        </div>
+        <div class="mt-10 flex flex-wrap items-center gap-3">
+          <a
+            href="mailto:chateaudufaune@ariege.io?subject=Application%20%E2%80%94%20Ch%C3%A2teau%20du%20Faune"
+            class="rounded-md bg-primary px-5 py-3 text-sm font-medium text-primary-foreground hover:opacity-90"
+          >
+            {{ t('opportunities.ctaApply') }}
+          </a>
+          <RouterLink
+            to="/symposium"
+            class="rounded-md border border-border px-5 py-3 text-sm font-medium hover:bg-muted"
+          >
+            {{ t('opportunities.ctaSymposium') }}
+          </RouterLink>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>