From 8bb70aca2fac63b10107da36205e044797124291 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <clem.heritier@gmail.com>
Date: Sat, 30 May 2026 19:01:55 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20images=20locales=20avec=20composant=20I?=
 =?UTF-8?q?mage=20Astro=20(WebP=20auto-optimis=C3=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/About.astro   |  9 ++++--
 src/components/Food.astro    | 11 +++++--
 src/components/Gallery.astro | 57 ++++++++++++++++++++----------------
 src/components/Hero.astro    | 14 ++++++---
 4 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/src/components/About.astro b/src/components/About.astro
index 6f4d1be..11a8e3d 100644
--- a/src/components/About.astro
+++ b/src/components/About.astro
@@ -1,3 +1,8 @@
+---
+import { Image } from 'astro:assets';
+import gallery1 from '../assets/images/gallery_1.jpg';
+---
+
 <section id="about" class="py-32 scroll-mt-20">
   <div class="max-w-6xl mx-auto px-6">
     <div class="grid md:grid-cols-2 gap-16 items-center">
@@ -35,8 +40,8 @@
       </div>
 
       <div class="relative">
-        <img
-          src="/src/assets/images/facade.jpg"
+        <Image
+          src={gallery1}
           alt="Intérieur du gîte"
           class="w-full h-[500px] object-cover rounded-sm object-center"
         />
diff --git a/src/components/Food.astro b/src/components/Food.astro
index c4cdad2..6099ca8 100644
--- a/src/components/Food.astro
+++ b/src/components/Food.astro
@@ -1,12 +1,17 @@
+---
+import { Image } from 'astro:assets';
+import facade from '../assets/images/facade.jpg';
+---
+
 <section id="food" class="py-32 bg-secondary/20 scroll-mt-20">
   <div class="max-w-6xl mx-auto px-6">
     <div class="grid md:grid-cols-2 gap-16 items-center">
 
       <!-- Image -->
       <div class="relative order-2 md:order-1">
-        <img
-          src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=800&q=80"
-          alt="Repas fait maison"
+        <Image
+          src={facade}
+          alt="Le Moulin des Rives"
           class="w-full h-[500px] object-cover rounded-sm"
         />
         <div class="absolute -top-5 -right-5 w-40 h-40 border border-primary/25 -z-10"></div>
diff --git a/src/components/Gallery.astro b/src/components/Gallery.astro
index 7bbca4b..ce2683d 100644
--- a/src/components/Gallery.astro
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index aaed03f..24e2cd4 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,14 +1,20 @@
+---
+import { Image } from 'astro:assets';
+import facade from '../assets/images/facade.jpg';
+---
+
 <section class="relative h-screen flex items-center justify-center overflow-hidden">
   <!-- Image de fond -->
   <div class="absolute inset-0">
-    <img
-      src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=80"
-      alt="Vallée de l'Allier"
+    <Image
+      src={facade}
+      alt="Le Moulin des Rives"
       class="w-full h-full object-cover"
+      loading="eager"
     />
     <div class="absolute inset-0 bg-dark/50"></div>
   </div>
-    docker inspect moulin-web-1 | grep -A5 "Networks"
+
   <!-- Contenu centré -->
   <div class="relative z-10 text-center text-white px-6 max-w-4xl mx-auto">
     <span class="block text-xs tracking-[0.4em] uppercase text-white/60 mb-6">