feat: images locales avec composant Image Astro (WebP auto-optimisé)

src/components/Gallery.astro

@@ -1,3 +1,24 @@
+---
+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">
 
@@ -7,32 +28,16 @@
     </div>
 
     <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-      <img
-        src="/src/assets/images/gallery_1.jpg"
-        alt="Extérieur du gîte"
-        class="w-full h-64 object-cover rounded-sm"
-      />
-      <img
-        src="/src/assets/images/gallery_2.jpg"
-        alt="Chambre"
-        class="w-full h-64 object-cover rounded-sm"
-      />
-      <img
-        src="/src/assets/images/gallery_3.jpg"
-        alt="Cuisine"
-        class="w-full h-64 object-cover rounded-sm"
-      />
-      <img
-        src="/src/assets/images/gallery_4.jpg"
-        alt="Rivière et forêt"
-        class="w-full h-64 object-cover rounded-sm"
-      />
-      <img
-        src="/src/assets/images/gallery_5.jpg"
-        alt="Vue panoramique"
-        class="w-full h-64 object-cover rounded-sm"
-      />
+      {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>
+</section>