From bab4e61c4e4d005d53f63186ea3612eadd2f7c62 Mon Sep 17 00:00:00 2001
From: Daniel White <dazzling@Mac.lan>
Date: Fri, 22 Aug 2025 16:03:59 +0100
Subject: [PATCH] Fix mobile responsive layout for network statistics

---
 src/layouts/IndexLayout.astro | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/layouts/IndexLayout.astro b/src/layouts/IndexLayout.astro
index e7e8dd3..0351123 100644
--- a/src/layouts/IndexLayout.astro
+++ b/src/layouts/IndexLayout.astro
@@ -57,28 +57,28 @@ const { frontmatter } = Astro.props
     <div class="flex-none container mx-auto py-12 text-left max-w-7xl p-6">
       <h1 class="text-3xl md:text-4xl font-extrabold text-black mb-4">Network statistics</h1>
       <h2 class="text-xl md:text-2xl font-semibold text-black mb-8">Xahau in numbers</h2>
-      <div class="items-end grid grid-cols-3 md:grid-cols-9 gap-4">
-        <div class="text-black flex flex-col col-span-2 md:col-span-3 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
+      <div class="items-end grid grid-cols-6 md:grid-cols-9 gap-4">
+        <div class="text-black flex flex-col col-span-4 md:col-span-3 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
           <h3 class="text-xl md:text-2xl font-semibold">Accounts</h3>
           <h4 class="text-4xl md:text-6xl font-extrabold">130K+</h4>
         </div>
-        <div class="text-black flex flex-col col-span-1 md:col-span-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
+        <div class="text-black flex flex-col col-span-2 md:col-span-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
           <h3 class="text-xl md:text-2xl font-semibold">Hooks installed</h3>
           <h4 class="text-4xl md:text-6xl font-extrabold">5K+</h4>
         </div>
-        <div class="text-xahau-secondary flex flex-col col-span-1 md:col-span-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
+        <div class="text-xahau-secondary flex flex-col col-span-2 md:col-span-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
           <h3 class="text-xl md:text-2xl font-semibold">Nodes</h3>
           <h4 class="text-4xl md:text-6xl font-extrabold">300+</h4>
         </div>
-        <div class="text-xahau-secondary flex flex-col col-span-1 md:col-span-2 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
+        <div class="text-xahau-secondary flex flex-col col-span-4 md:col-span-2 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-xahau-gray border-black border-2">
           <h3 class="text-xl md:text-2xl font-semibold">Transactions/24h</h3>
           <h4 class="text-4xl md:text-6xl font-extrabold">1.5M+</h4>
         </div>
-        <div class="text-black flex flex-col col-span-2 md:col-span-3 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
+        <div class="text-black flex flex-col col-span-6 md:col-span-3 row-start-auto md:row-start-2 min-h-40 items-start justify-end p-4 bg-white border-black border-2">
           <h3 class="text-xl md:text-2xl font-semibold">Ledgers closed</h3>
           <h4 class="text-4xl md:text-6xl font-extrabold">16M+</h4>
         </div>
-        <a href="/docs/infrastructure/node-requirements/" class="col-span-3 row-start-auto md:row-start-2 px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition">Want to run a node?</a>
+        <a href="/docs/infrastructure/node-requirements/" class="col-span-6 row-start-auto md:row-start-2 px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition">Want to run a node?</a>
       </div>
     </div>
   </div>