From 4de8dab42d2795119430a5100ad40f0179f7477b Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 13 Jan 2025 14:02:52 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20section=20=C2=ABet=20aussi=C2=BB=20dans?=
 =?UTF-8?q?=20les=20pi=C3=A8ces?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/blocks/MainSection.astro | 14 +++--
 src/pages/pieces.astro                     | 69 +++++++++++++++++++++-
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/blocks/MainSection.astro b/src/components/ui/blocks/MainSection.astro
index 64fed89..fd8693c 100644
--- a/src/components/ui/blocks/MainSection.astro
+++ b/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>
+    {
+      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}
+        </p>
+      )
+    }
     <slot />
     {
       btnTitle && btnURL ? (
diff --git a/src/pages/pieces.astro b/src/pages/pieces.astro
index 49cd6e4..12bf712 100644
--- a/src/pages/pieces.astro
+++ b/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>