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:
parent
bd923d0e2e
commit
2acfb84fc4
3 changed files with 90 additions and 4 deletions
|
|
@ -68,6 +68,19 @@
|
|||
"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": {
|
||||
"hero": {
|
||||
"kicker": "Vision & Values",
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"hero": {
|
||||
"kicker": "Vision & Valeurs",
|
||||
|
|
|
|||
|
|
@ -2,11 +2,71 @@
|
|||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<article class="mx-auto max-w-4xl px-4 py-16">
|
||||
<h1 class="font-serif text-4xl font-semibold tracking-tight">{{ t('nav.gallery') }}</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('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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue