Layout masonry avec ordre de lecture naturel pour les recommandations

Remplace CSS columns (ordre vertical) par deux colonnes flex avec
distribution en zigzag : les plus récentes en haut, lecture
gauche-droite ligne par ligne, hauteur naturelle des cartes préservée.

src/pages/ar/برمجة/توصيات.astro

@@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+
+const leftCol = recommendations.filter((_, i) => i % 2 === 0);
+const rightCol = recommendations.filter((_, i) => i % 2 === 1);
 ---
 
 <Layout
@@ -24,9 +27,10 @@ const recommendations = (await getCollection("recommendations"))
       <p class="mt-3 text-white/60 text-lg">ما يقوله الأشخاص الذين عملت معهم.</p>
     </div>
 
-    <div class="columns-1 sm:columns-2 gap-5 space-y-5">
+    <div class="hidden sm:grid grid-cols-2 gap-5 items-start">
-      {recommendations.map((rec) => (
+      {[leftCol, rightCol].map((col) => (
-        <div class="break-inside-avoid">
+        <div class="space-y-5">
+          {col.map((rec) => (
             <RecommendationCard
               author={rec.data.author}
               authorRole={rec.data.authorRole}
@@ -37,8 +41,23 @@ const recommendations = (await getCollection("recommendations"))
               url={rec.data.url}
               lang={rec.data.lang}
             />
+          ))}
         </div>
       ))}
     </div>
+    <div class="sm:hidden space-y-5">
+      {recommendations.map((rec) => (
+        <RecommendationCard
+          author={rec.data.author}
+          authorRole={rec.data.authorRole}
+          company={rec.data.company}
+          text={rec.body || ''}
+          date={rec.data.date}
+          avatar={rec.data.avatar}
+          url={rec.data.url}
+          lang={rec.data.lang}
+        />
+      ))}
+    </div>
   </section>
 </Layout>

src/pages/code/recommandations.astro

@@ -5,6 +5,9 @@ import RecommendationCard from "../../components/code/RecommendationCard.astro";
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+
+const leftCol = recommendations.filter((_, i) => i % 2 === 0);
+const rightCol = recommendations.filter((_, i) => i % 2 === 1);
 ---
 
 <Layout
@@ -24,9 +27,10 @@ const recommendations = (await getCollection("recommendations"))
       <p class="mt-3 text-white/60 text-lg">Ce que disent les gens avec qui j'ai travaillé.</p>
     </div>
 
-    <div class="columns-1 sm:columns-2 gap-5 space-y-5">
+    <div class="hidden sm:grid grid-cols-2 gap-5 items-start">
-      {recommendations.map((rec) => (
+      {[leftCol, rightCol].map((col) => (
-        <div class="break-inside-avoid">
+        <div class="space-y-5">
+          {col.map((rec) => (
             <RecommendationCard
               author={rec.data.author}
               authorRole={rec.data.authorRole}
@@ -37,8 +41,23 @@ const recommendations = (await getCollection("recommendations"))
               url={rec.data.url}
               lang={rec.data.lang}
             />
+          ))}
         </div>
       ))}
     </div>
+    <div class="sm:hidden space-y-5">
+      {recommendations.map((rec) => (
+        <RecommendationCard
+          author={rec.data.author}
+          authorRole={rec.data.authorRole}
+          company={rec.data.company}
+          text={rec.body || ''}
+          date={rec.data.date}
+          avatar={rec.data.avatar}
+          url={rec.data.url}
+          lang={rec.data.lang}
+        />
+      ))}
+    </div>
   </section>
 </Layout>

src/pages/en/code/recommendations.astro

@@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
+
+const leftCol = recommendations.filter((_, i) => i % 2 === 0);
+const rightCol = recommendations.filter((_, i) => i % 2 === 1);
 ---
 
 <Layout
@@ -24,9 +27,10 @@ const recommendations = (await getCollection("recommendations"))
       <p class="mt-3 text-white/60 text-lg">What people I've worked with say about me.</p>
     </div>
 
-    <div class="columns-1 sm:columns-2 gap-5 space-y-5">
+    <div class="hidden sm:grid grid-cols-2 gap-5 items-start">
-      {recommendations.map((rec) => (
+      {[leftCol, rightCol].map((col) => (
-        <div class="break-inside-avoid">
+        <div class="space-y-5">
+          {col.map((rec) => (
             <RecommendationCard
               author={rec.data.author}
               authorRole={rec.data.authorRole}
@@ -37,8 +41,23 @@ const recommendations = (await getCollection("recommendations"))
               url={rec.data.url}
               lang={rec.data.lang}
             />
+          ))}
         </div>
       ))}
     </div>
+    <div class="sm:hidden space-y-5">
+      {recommendations.map((rec) => (
+        <RecommendationCard
+          author={rec.data.author}
+          authorRole={rec.data.authorRole}
+          company={rec.data.company}
+          text={rec.body || ''}
+          date={rec.data.date}
+          avatar={rec.data.avatar}
+          url={rec.data.url}
+          lang={rec.data.lang}
+        />
+      ))}
+    </div>
   </section>
 </Layout>