feat: section «et aussi» dans les pièces

src/components/ui/blocks/MainSection.astro

@@ -18,15 +18,17 @@ interface Props {
 >
   <div class="max-w-screen-md">
     <h1
-      class="mb-4 text-balance text-4xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200"
+      class="text-balance text-4xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200"
     >
       {title}
     </h1>
-    <p
+    {
-      class="mb-8 max-w-prose text-pretty font-normal text-neutral-600 dark:text-neutral-400 sm:text-xl"
+      subTitle && (
-    >
+        <p class="mt-4  mb-8 max-w-prose text-pretty font-normal text-neutral-600 dark:text-neutral-400 sm:text-xl">
-      {subTitle}
+          {subTitle}
-    </p>
+        </p>
+      )
+    }
     <slot />
     {
       btnTitle && btnURL ? (

src/pages/pieces.astro

@@ -1,9 +1,11 @@
 ---
+import { Image } from "astro:assets";
 import MainLayout from "@/layouts/MainLayout.astro";
 import MainSection from "@components/ui/blocks/MainSection.astro";
 import LeftSection from "@components/ui/blocks/LeftSection.astro";
 import RightSection from "@components/ui/blocks/RightSection.astro";
 import FeaturesStats from "@components/sections/features/FeaturesStats.astro";
+import BureauSection from "@components/sections/BureauSection.astro";
 import photoSalonCheminee from "@images/salon-cheminee.jpg";
 import photoSalonCuisine from "@images/salon-1.jpg";
 import photoCuisine from "@images/cuisine-1.jpg";
@@ -13,8 +15,11 @@ import photoSuite1 from "@images/suite-du-bas-1.jpg";
 import photoParentale from "@images/chambre-parentale.jpg";
 import photoSalleDEau from "@images/salle-d-eau-1.jpg";
 import photoChambre2 from "@images/chambre-2.jpg";
+import photoDeLaPiscine from "@images/vue-piscine.jpg"
+import vueCathedrale from "@images/vue-albi-cathedrale-sainte-cecile.jpg"
+import photoVueAerienne from "@images/vue-aerienne-face-1.jpg"
+import photoTerrasse from "@images/terrasse-5.jpg"
 import { websiteStructuredDescription } from "../data_files/constants";
-import BureauSection from "../components/sections/BureauSection.astro";
 
 interface Article {
   isRightSection: boolean;
@@ -32,7 +37,7 @@ interface Article {
   imgTwoAlt?: string;
 }
 
-const articles: Article[] = [
+const pieces: Article[] = [
   {
     isRightSection: true,
     title: "Grande pièce de vie lumineuse",
@@ -131,7 +136,7 @@ const pageTitle: string = `Pièces de la maison | 177m2 à vendre à Albi`;
   />
 
   {
-    articles.map(article => {
+    pieces.map(article => {
       return article.isRightSection ? (
         <RightSection
           title={article.title}
@@ -181,4 +186,62 @@ const pageTitle: string = `Pièces de la maison | 177m2 à vendre à Albi`;
       },
     ]}
   />
+
+  <MainSection title="Et aussi" subTitle="" />
+
+  <div class="flex flex-col md:flex-row w-full">
+    <div class="flex-1 h-64 m-4">
+      <h3 class="text-xl font-bold m-2">Une piscine</h3>
+      <a href="/avec-piscine/">
+        <Image
+          src={photoDeLaPiscine}
+          alt="Une grande piscine de 50m3 dans un écrin composé de la terrasse et de verdure"
+          width={400}
+          densities={[1, 1.5, 2]}
+          class:list={["w-full object-cover object-center rounded-lg m-2"]}
+          loading="eager"
+        />
+      </a>
+    </div>
+    <div class="flex-1 h-64 m-4">
+      <h3 class="text-xl font-bold m-2">Une terrasse</h3>
+      <a href="/avec-terrasse/">
+        <Image
+          src={photoTerrasse}
+          alt="Une grande piscine de 50m3 dans un écrin composé de la terrasse et de verdure"
+          width={400}
+          densities={[1, 1.5, 2]}
+          class:list={["w-full object-cover object-center rounded-lg m-2"]}
+          loading="eager"
+        />
+      </a>
+    </div>
+    <div class="flex-1 h-64 m-4">
+      <h3 class="text-xl font-bold m-2">L’impasse</h3>
+      <a href="/dans-une-impasse/">
+        <Image
+          src={photoVueAerienne}
+          alt="Une grande piscine de 50m3 dans un écrin composé de la terrasse et de verdure"
+          width={400}
+          densities={[1, 1.5, 2]}
+          class:list={["w-full h-full object-cover object-center rounded-lg m-2 h-64"]}
+          loading="eager"
+        />
+      </a>
+    </div>
+    <div class="flex-1 m-4">
+      <h3 class="text-xl font-bold m-2">Le quartier</h3>
+      <a href="/quartier-cantepau/">
+        <Image
+          src={vueCathedrale}
+          alt="Une grande piscine de 50m3 dans un écrin composé de la terrasse et de verdure"
+          width={400}
+          densities={[1, 1.5, 2]}
+          class:list={["w-full object-cover object-center rounded-lg m-2 h-64"]}
+          loading="eager"
+        />
+      </a>
+    </div>
+  </div>
+
 </MainLayout>