feat(gallery): land-art gallery grid

Six-image square grid with serif captions on a card background.
Sources are Wix CDN URLs of works already in the existing gallery;
to be downloaded into public/ once selections are confirmed.

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

View file

@ -68,6 +68,19 @@
"body": "Community celebrations that braid art and ecology together — markets, live music, folk dance and seasonal exhibitions." "body": "Community celebrations that braid art and ecology together — markets, live music, folk dance and seasonal exhibitions."
} }
}, },
"gallery": {
"kicker": "Gallery",
"title": "Land art gallery",
"lede": "A turning archive of works grown from the land — sculpture, mosaic, found objects and small offerings made on site by residents and visitors.",
"captions": {
"landArt": "Sculpture in the garden",
"buddhaHand": "Gilded hand",
"fountain": "Stone garden fountain",
"mosaic": "Mosaic stones",
"petStatue": "Garden figure",
"miniBuddha": "Miniature shrine"
}
},
"vision": { "vision": {
"hero": { "hero": {
"kicker": "Vision & Values", "kicker": "Vision & Values",

View file

@ -68,6 +68,19 @@
"body": "Des célébrations communautaires qui tissent art et écologie — marchés, musique vivante, danse folklorique et expositions saisonnières." "body": "Des célébrations communautaires qui tissent art et écologie — marchés, musique vivante, danse folklorique et expositions saisonnières."
} }
}, },
"gallery": {
"kicker": "Galerie",
"title": "Galerie d'art de la terre",
"lede": "Une archive vivante d'œuvres nées du lieu — sculpture, mosaïque, objets trouvés et petites offrandes faites sur place par les résident·es et les visiteur·euses.",
"captions": {
"landArt": "Sculpture dans le jardin",
"buddhaHand": "Main dorée",
"fountain": "Fontaine de pierre",
"mosaic": "Mosaïque de pierres",
"petStatue": "Figure de jardin",
"miniBuddha": "Petit autel"
}
},
"vision": { "vision": {
"hero": { "hero": {
"kicker": "Vision & Valeurs", "kicker": "Vision & Valeurs",

View file

@ -2,11 +2,71 @@
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
const { t } = useI18n() const { t } = useI18n()
const items = [
{
key: 'landArt' as const,
src: 'https://static.wixstatic.com/media/11062b_7c683da5bcbd44d7b0d2ddbaf4693625~mv2.jpg',
},
{
key: 'buddhaHand' as const,
src: 'https://static.wixstatic.com/media/11062b_2000d43a092c402ea7a62d1bf035158e~mv2.jpg',
},
{
key: 'fountain' as const,
src: 'https://static.wixstatic.com/media/a5b5ead2d4ee45aebc360586754a7ec2.jpg',
},
{
key: 'mosaic' as const,
src: 'https://static.wixstatic.com/media/3e0a4ede4ca84154973ffdce2ccf83b9.jpg',
},
{
key: 'petStatue' as const,
src: 'https://static.wixstatic.com/media/11062b_031106bf76154b3a93121564bfa4d7ac~mv2.jpg',
},
{
key: 'miniBuddha' as const,
src: 'https://static.wixstatic.com/media/11062b_ce4905ae109c49bb970fe4487a0325a3~mv2.jpg',
},
]
</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.gallery') }}</h1> <section class="border-b border-border bg-secondary/40">
<p class="mt-4 text-muted-foreground">{{ t('common.comingSoon') }}</p> <div class="mx-auto max-w-4xl px-4 py-16 lg:px-6 lg:py-20">
</article> <p class="text-xs uppercase tracking-[0.2em] text-accent">{{ t('gallery.kicker') }}</p>
<h1 class="mt-3 font-serif text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
{{ t('gallery.title') }}
</h1>
<p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
{{ t('gallery.lede') }}
</p>
</div>
</section>
<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>
</ul>
</section>
</div>
</template> </template>