43 lines
1.3 KiB
Plaintext
43 lines
1.3 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import g1 from '../assets/images/gallery_1.jpg';
|
|
import g2 from '../assets/images/gallery_2.jpg';
|
|
import g3 from '../assets/images/gallery_3.jpg';
|
|
import g4 from '../assets/images/gallery_4.jpg';
|
|
import g5 from '../assets/images/gallery_5.jpg';
|
|
import g6 from '../assets/images/gallery_6.jpg';
|
|
import g7 from '../assets/images/gallery_7.jpg';
|
|
|
|
const photos = [
|
|
{ src: g1, alt: 'Le gîte' },
|
|
{ src: g2, alt: 'Chambre' },
|
|
{ src: g3, alt: 'Cuisine' },
|
|
{ src: g4, alt: 'Salon' },
|
|
{ src: g5, alt: 'Extérieur' },
|
|
{ src: g6, alt: 'Rivière' },
|
|
{ src: g7, alt: 'Vue panoramique' },
|
|
];
|
|
---
|
|
|
|
<section id="gallery" class="py-32 scroll-mt-20">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
|
|
<div class="mb-14 text-center">
|
|
<span class="block text-xs tracking-[0.3em] uppercase text-primary mb-4">Galerie</span>
|
|
<h2 class="font-serif text-5xl font-light">Découvrez le lieu</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
{photos.map((photo, i) => (
|
|
<div class:list={["overflow-hidden rounded-sm", i === 6 ? "col-span-2 md:col-span-1" : ""]}>
|
|
<Image
|
|
src={photo.src}
|
|
alt={photo.alt}
|
|
class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section> |