feat(concept): Art & Ecology landing page

Five-section page laying out the project's organizing idea: mission,
land art & residencies, farmstand & boutique, the three pillars of
slow farming, and events in nature. Each prose section pairs with a
property photo from the gallery; CTAs cross-link to /gallery,
/marketplace and /events.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-08 17:36:25 +02:00
commit 6bad4b0bce
3 changed files with 197 additions and 4 deletions

View file

@ -35,6 +35,39 @@
"address": "456 Grand Rue de Bellissen, Château de Bénac, 09000 France", "address": "456 Grand Rue de Bellissen, Château de Bénac, 09000 France",
"rights": "All rights reserved." "rights": "All rights reserved."
}, },
"concept": {
"hero": {
"kicker": "Concept",
"title": "Art & Ecology",
"lede": "We steward land and shared resources through holistic, regenerative practices that align with natural rhythms and support artistic expression."
},
"mission": {
"title": "A center for art and ecology",
"body": "Productivity, here, is measured by health and continuity rather than by financial gain. We grow slowly so that what takes root can last."
},
"landArt": {
"title": "Land art & residencies",
"body": "A sculpture garden woven through with edible berries, where residencies arise from listening to the materials at hand. Art is not imposed on the landscape — it arises from it."
},
"farmstand": {
"title": "Farmstand & boutique",
"body": "Fresh produce, herbal chocolates, sprouted seeds, apple molasses and fruit vinegars, alongside woolen wares, carved wood and pottery from resident makers."
},
"slowFarming": {
"title": "Slow farming",
"body": "Three pillars hold the field together.",
"pillarOneTitle": "Holistic ecology",
"pillarOneBody": "The farm read as a living field of relationships, not as isolated outputs.",
"pillarTwoTitle": "Non-extractive methods",
"pillarTwoBody": "Nothing is taken without something restored in its place.",
"pillarThreeTitle": "Reciprocity",
"pillarThreeBody": "Co-regulating with nature, in mutual exchange."
},
"events": {
"title": "Events in nature",
"body": "Community celebrations that braid art and ecology together — markets, live music, folk dance and seasonal exhibitions."
}
},
"home": { "home": {
"hero": { "hero": {
"kicker": "Ariège · Pyrenean foothills", "kicker": "Ariège · Pyrenean foothills",

View file

@ -35,6 +35,39 @@
"address": "456 Grand Rue de Bellissen, Château de Bénac, 09000 France", "address": "456 Grand Rue de Bellissen, Château de Bénac, 09000 France",
"rights": "Tous droits réservés." "rights": "Tous droits réservés."
}, },
"concept": {
"hero": {
"kicker": "Concept",
"title": "Art & Écologie",
"lede": "Nous prenons soin de la terre et des ressources partagées par des pratiques holistiques et régénératives, accordées aux rythmes naturels et au soutien de la création artistique."
},
"mission": {
"title": "Un centre pour l'art et l'écologie",
"body": "Ici, la productivité se mesure à la santé et à la continuité plutôt qu'au gain financier. Nous croissons lentement, pour que ce qui s'enracine puisse durer."
},
"landArt": {
"title": "Art de la terre & résidences",
"body": "Un jardin de sculptures traversé de baies comestibles, où les résidences naissent de l'écoute des matériaux. L'art ne s'impose pas au paysage — il en émerge."
},
"farmstand": {
"title": "Fermette & boutique",
"body": "Légumes frais, chocolats aux plantes, graines germées, mélasse de pommes et vinaigres de fruits, aux côtés de lainages, de bois sculpté et de poteries des artistes en résidence."
},
"slowFarming": {
"title": "Agriculture lente",
"body": "Trois piliers tiennent le champ ensemble.",
"pillarOneTitle": "Écologie holistique",
"pillarOneBody": "La ferme lue comme un champ vivant de relations, et non comme une somme de rendements isolés.",
"pillarTwoTitle": "Non-extractivisme",
"pillarTwoBody": "Rien n'est prélevé sans qu'autre chose ne soit restitué à sa place.",
"pillarThreeTitle": "Réciprocité",
"pillarThreeBody": "Co-régulation avec la nature, dans un échange mutuel."
},
"events": {
"title": "Événements en nature",
"body": "Des célébrations communautaires qui tissent art et écologie — marchés, musique vivante, danse folklorique et expositions saisonnières."
}
},
"home": { "home": {
"hero": { "hero": {
"kicker": "Ariège · piémont pyrénéen", "kicker": "Ariège · piémont pyrénéen",

View file

@ -1,12 +1,139 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { RouterLink } from 'vue-router'
const { t } = useI18n() const { t } = useI18n()
const pillars = [
{ key: 'pillarOne' as const },
{ key: 'pillarTwo' as const },
{ key: 'pillarThree' as const },
]
</script> </script>
<template> <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.artEcology') }}</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-24">
<p class="text-xs uppercase tracking-[0.2em] text-accent">
{{ t('concept.hero.kicker') }}
</p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('concept.hero.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('concept.hero.lede') }}
</p>
</div>
</section>
<!-- Mission -->
<section class="mx-auto max-w-4xl px-4 py-16 lg:px-6">
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.mission.title') }}
</h2>
<p class="mt-5 max-w-prose text-base leading-relaxed">
{{ t('concept.mission.body') }}
</p>
</section>
<!-- Land art & residencies -->
<section class="bg-card border-y border-border">
<div class="mx-auto grid max-w-7xl gap-10 px-4 py-16 lg:grid-cols-2 lg:gap-14 lg:px-6">
<img
src="https://static.wixstatic.com/media/11062b_7c683da5bcbd44d7b0d2ddbaf4693625~mv2.jpg"
alt=""
class="aspect-[4/3] w-full rounded-lg object-cover"
loading="lazy"
/>
<div>
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.landArt.title') }}
</h2>
<p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.landArt.body') }}</p>
<RouterLink
to="/gallery"
class="mt-6 inline-block text-sm font-medium text-accent hover:underline"
>
{{ t('common.seeAll') }}
</RouterLink>
</div>
</div>
</section>
<!-- Farmstand & boutique -->
<section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="grid gap-10 lg:grid-cols-2 lg:gap-14">
<div class="order-2 lg:order-1">
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.farmstand.title') }}
</h2>
<p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.farmstand.body') }}</p>
<RouterLink
to="/marketplace"
class="mt-6 inline-block text-sm font-medium text-accent hover:underline"
>
{{ t('nav.marketplace') }}
</RouterLink>
</div>
<img
src="https://static.wixstatic.com/media/3e0a4ede4ca84154973ffdce2ccf83b9.jpg"
alt=""
class="order-1 aspect-[4/3] w-full rounded-lg object-cover lg:order-2"
loading="lazy"
/>
</div>
</section>
<!-- Slow farming -->
<section class="bg-secondary/30 border-y border-border">
<div 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('concept.slowFarming.title') }}
</h2>
<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"
>
<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> </article>
</div>
</div>
</section>
<!-- Events in nature -->
<section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
<div class="grid gap-10 lg:grid-cols-2 lg:gap-14">
<img
src="https://static.wixstatic.com/media/11062b_a56b905cae7c424c84cbaa1677d59ec5~mv2.jpg"
alt=""
class="aspect-[4/3] w-full rounded-lg object-cover"
loading="lazy"
/>
<div>
<h2 class="font-serif text-3xl font-semibold tracking-tight">
{{ t('concept.events.title') }}
</h2>
<p class="mt-5 max-w-prose leading-relaxed">{{ t('concept.events.body') }}</p>
<RouterLink
to="/events"
class="mt-6 inline-block text-sm font-medium text-accent hover:underline"
>
{{ t('home.events.seeAll') }}
</RouterLink>
</div>
</div>
</section>
</div>
</template> </template>