update

src/components/About.astro

@@ -1,6 +1,10 @@
 ---
+import { Waves, Sprout, Bed, WifiOff, HousePlus } from 'lucide-astro';
 import { Image } from 'astro:assets';
-import gallery1 from '../assets/images/gallery_1.jpg';
+import about_1 from '../assets/images/about_1.jpg';
+import about_2 from '../assets/images/about_2.jpg';
+import about_3 from '../assets/images/about_3.jpg';
+import about_4 from '../assets/images/about_4.jpg';
 ---
 
 <section id="about" class="py-32 scroll-mt-20">
@@ -27,41 +31,51 @@ import gallery1 from '../assets/images/gallery_1.jpg';
         </p>
         <ul class="space-y-3 list-none">
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <Waves class="w-8 h-8 text-blue-500 flex-shrink-0" />
             À 500m de la plage
           </li>
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <Sprout class="w-8 h-8 text-green-500 flex-shrink-0" />
             Jardin, terrasse et coins de verdure
           </li>
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
-            3 chambres · 1 dortoir 
+            <Bed class="w-8 h-8 text-red-500 flex-shrink-0" />
+            3 chambres · 1 dortoir · Jusqu'à 9 personnes
           </li>          
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
-            Jusqu'à 9 personnes
-          </li>
-          <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
+            <HousePlus class="w-8 h-8 text-yellow-500 flex-shrink-0" />
             Au format Gite ou chambre d'hôtes, selon vos envies 
           </li>
           <li class="flex items-center gap-3 text-dark/70">
-            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
-            Sans wifi — pour mieux décrocher
+            <WifiOff class="w-8 h-8 text-gray-500 flex-shrink-0" />
+            Sans wifi, pour mieux décrocher
           </li>
         </ul>
       </div>
-
-      <div class="relative">
-        <Image
-          src={gallery1}
-          alt="Intérieur du gîte"
-          class="w-full h-[500px] object-cover rounded-sm object-center"
-        />
-        <div class="absolute -bottom-5 -left-5 w-40 h-40 border border-primary/25 -z-10"></div>
-      </div>
-
+      
+      <div class="relative flex items-center justify-center">
+        <div class="grid grid-cols-2 md:grid-cols-2 gap-1 bg-white p-1">
+            <Image
+              src={about_1}
+              alt="La Maison de Cécile"
+              class="w-full h-64 object-cover rounded-sm"
+            />
+            <Image
+                src={about_2}
+                alt="Jardin et terrasse de la maison de Cécile"
+                class="w-full h-64 object-cover rounded-sm"
+            />
+            <Image
+                src={about_3}
+                alt="Vue sur l'Allier depuis la maison de Cécile"
+                class="w-full h-64 object-cover rounded-sm"
+            />
+            <Image
+                src={about_4}
+                alt="Vue sur la terrasse et le jardin de la maison de Cécile"
+                class="w-full h-64 object-cover rounded-sm"
+            />
+        </div>
     </div>
   </div>
 </section>