complète les pièces

src/components/ui/blocks/LeftSection.astro

@@ -1,11 +1,11 @@
 ---
-// Import the necessary modules
 import { Image } from "astro:assets";
 import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
-// Destructure the props passed to the Astro component
+import { LightboxImage } from "@/components/LightboxImage";
+
 const { title, subTitle, btnExists, btnTitle, btnURL, img, imgAlt } =
   Astro.props;
-// Define TypeScript interface for props
+
 interface Props {
   title: string;
   subTitle: string;
@@ -21,14 +21,15 @@ interface Props {
 <section
   class="mx-auto max-w-[85rem] items-center gap-8 px-4 py-10 sm:px-6 sm:py-16 md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 xl:gap-16 2xl:max-w-full"
 >
-  <!-- The Image component which renders the image -->
-  <Image
-    class="w-full rounded-xl"
-    src={img}
-    alt={imgAlt}
-    draggable={"false"}
-    format={"avif"}
-  />
+  <LightboxImage alt={imgAlt} image={img} client:idle >
+    <Image
+      class="w-full rounded-xl"
+      src={img}
+      alt={imgAlt}
+      draggable={"false"}
+      format={"avif"}
+    />
+  </LightboxImage>
   <!-- The container for title, subtitle, and optional CTA button -->
   <div class="mt-4 md:mt-0">
     <!-- The title of the section -->

src/components/ui/blocks/RightSection.astro

@@ -1,8 +1,8 @@
 ---
-// Import the required modules
 import { Image } from "astro:assets";
 import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
-// Extract properties from Astro.props
+import { LightboxImage } from "@components/LightboxImage";
+
 const {
   title,
   subTitle,
@@ -15,7 +15,7 @@ const {
   imgTwo,
   imgTwoAlt,
 } = Astro.props;
-// Define TypeScript interface for the properties
+
 interface Props {
   title: string;
   subTitle: string;
@@ -53,32 +53,36 @@ interface Props {
   {
     single ? (
       <div class="mt-8">
-        <!-- Single image -->
-        <Image
-          class="w-full rounded-lg"
-          src={imgOne}
-          alt={imgOneAlt}
-          format={"avif"}
-        />
+        <LightboxImage client:idle alt={imgOneAlt} image={imgOne} >
+          <Image
+            class="w-full rounded-lg"
+            src={imgOne}
+            alt={imgOneAlt}
+            format={"avif"}
+          />
+        </LightboxImage>
       </div>
     ) : (
       <div class="mt-8 grid grid-cols-2 gap-4">
-        <!-- First image in a two-image layout -->
-        <Image
-          class="w-full rounded-xl"
-          src={imgOne}
-          alt={imgOneAlt}
-          draggable={"false"}
-          format={"avif"}
-        />
-        <!-- Second image in a two-image layout -->
-        <Image
-          class="mt-4 w-full rounded-xl lg:mt-10"
-          src={imgTwo}
-          alt={imgTwoAlt}
-          draggable={"false"}
-          format={"avif"}
-        />
+        <LightboxImage client:idle alt={imgOneAlt} image={imgOne} >
+          <Image
+            class="w-full rounded-xl"
+            src={imgOne}
+            alt={imgOneAlt}
+            draggable={"false"}
+            format={"avif"}
+          />
+        </LightboxImage>
+
+        <LightboxImage client:idle alt={imgTwoAlt} image={imgTwo} >
+          <Image
+            class="mt-4 w-full rounded-xl lg:mt-10"
+            src={imgTwo}
+            alt={imgTwoAlt}
+            draggable={"false"}
+            format={"avif"}
+          />
+        </LightboxImage>
       </div>
     )
   }

src/pages/pieces.astro

@@ -48,11 +48,20 @@ const articles: Article[] = [
   },
   {
     isRightSection: false,
+    title: "Cuisine ouverte, toute équipée",
+    subTitle:
+      "Refaite en 2017, la cuisine allie plan de travail en bois et nombreux rangements. Elle est équipée de plaques à induction, d’une hotte et d’un four Bosch.",
+    img: photoSalonCheminee,
+    imgAlt: "Blueprints and digital tablet with construction plans.",
+  },
+  {
+    isRightSection: true,
     title: "Chambre principale",
     subTitle:
       "Our skilled craftsmen bring precision and excellence to every construction project. From minor installations to substantial structural work, ScrewFast offers reliable construction services to turn your plans into tangible outcomes. We ensure the highest standards of safety and workmanship, utilizing top-quality tools and materials from our extensive inventory.",
-    img: photoParentale,
-    imgAlt: "Construction site before and after",
+    imgOne: photoParentale,
+    imgOneAlt: "Construction site before and after",
+    single: true,
     btnExists: false,
     btnTitle: "Learn More",
     btnURL: "#",
@@ -78,30 +87,7 @@ const articles: Article[] = [
     imgOneAlt: "Construction workers orchestrating a project",
     imgTwo: photoChambreEnfantEst,
     imgTwoAlt: "Aerial view of managed construction",
-  },
-  {
-    isRightSection: false,
-    title: "Ensuring Long-lasting Performance",
-    subTitle:
-      "Our commitment to your project doesn't end at completion. ScrewFast offers ongoing maintenance and support services to ensure your construction's longevity and performance. From regular check-ups to emergency assistance, our responsive team is there to provide seamless support.",
-    img: usingTools,
-    imgAlt:
-      "Man in orange and black vest wearing white helmet holding yellow and black power tool",
-  },
-  {
-    isRightSection: true,
-    title: "Crafting Bespoke Strategies for Unique Challenges",
-    subTitle:
-      "For our larger enterprise clients, ScrewFast offers custom solutions designed to meet specific industry challenges. By understanding your unique needs, we engineer tailored strategies aimed at optimizing your operations, enhancing efficiency, and driving your business forward.",
-    single: false,
-    imgOne: progressBuilding,
-    imgOneAlt: "In progress building structure",
-    imgTwo: underConstruction,
-    imgTwoAlt: "Brown and gray building under construction",
-    btnExists: true,
-    btnTitle: "Read more",
-    btnURL: "#",
-  },
+  }
 ];
 
 const pageTitle: string = `Pièces | ${SITE.title}`;