From 4cdfc8b681280453a1463811abf214cae3f4e1ac Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Fri, 30 Jul 2021 10:23:30 +0200
Subject: [PATCH] Switch to card-grid

---
 layouts/partials/jumbo.html | 75 +++++++++++++++++++++++++------------
 1 file changed, 51 insertions(+), 24 deletions(-)

diff --git a/layouts/partials/jumbo.html b/layouts/partials/jumbo.html
index 435de2a..2db6bd5 100644
--- a/layouts/partials/jumbo.html
+++ b/layouts/partials/jumbo.html
@@ -19,30 +19,57 @@
     <h4 class="text-center mb-4">
       {{ i18n "learnhow" }} happy<strong>Domain</strong> {{ i18n "canhelpyou" }}
     </h4>
-    <div class="list-group list-group-horizontal-md">
-      <a href="{{ ref . "/use-happyDNS/freelance" }}" class="list-group-item list-group-item-action text-center font-weight-bold d-flex flex-column">
-        <img src="/img/screenshots/users/freelance.svg" alt="{{ i18n "freelance" }}" class="w-100 mb-3 flex-grow-1">
-        <span>{{ i18n "freelance" }}</span>
-      </a>
-      <a class="list-group-item list-group-item-action text-center font-weight-bold disabled d-flex flex-column">
-        <img src="/img/screenshots/users/sysadmin.svg" alt="{{ i18n "sysadmin" }}" class="w-100 mb-3 flex-grow-1">
-        <span>{{ i18n "sysadmin" }}</span>
-      </a>
-      <a class="list-group-item list-group-item-action text-center font-weight-bold disabled d-flex flex-column">
-        <img src="/img/screenshots/users/devops.svg" alt="{{ i18n "devops" }}" class="w-100 mb-3 flex-grow-1">
-        <span>{{ i18n "devops" }}</span>
-      </a>
-      <a class="list-group-item list-group-item-action text-center font-weight-bold disabled d-flex flex-column">
-        <img src="/img/screenshots/users/cio.svg" alt="{{ i18n "cio" }}" class="w-100 mb-3 flex-grow-1">
-        <span>{{ i18n "cio" }}</span>
-      </a>
-      <a class="list-group-item list-group-item-action text-center font-weight-bold disabled d-flex flex-column">
-        <img src="/img/screenshots/users/geek.svg" alt="{{ i18n "geek" }}" class="w-100 mb-3 flex-grow-1">
-        <span>{{ i18n "geek" }}</span>
-      </a>
-    </div>
-    <div class="lead text-muted font-italic text-center mt-4">
-      {{ i18n "goodreasontouse" }}
+    <div class="row row-cols-sm-2 row-cols-md-3 row-cols-xl-5">
+      <div class="col mb-4">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <a href="{{ ref . "/use-happyDNS/freelance" }}" class="list-group-item-action text-center font-weight-bold flex-grow-1 d-flex flex-column">
+              <img src="/img/screenshots/users/freelance.svg" alt="{{ i18n "freelance" }}" class="w-100 mb-3 flex-grow-1">
+              <span>{{ i18n "freelance" }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="col mb-4">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <a class="list-group-item-action text-center font-weight-bold disabled flex-grow-1 d-flex flex-column">
+              <img src="/img/screenshots/users/sysadmin.svg" alt="{{ i18n "sysadmin" }}" class="w-100 mb-3 flex-grow-1">
+              <span>{{ i18n "sysadmin" }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="col mb-4">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <a class="list-group-item-action text-center font-weight-bold disabled flex-grow-1 d-flex flex-column">
+              <img src="/img/screenshots/users/devops.svg" alt="{{ i18n "devops" }}" class="w-100 mb-3 flex-grow-1">
+              <span>{{ i18n "devops" }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="col mb-4">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <a class="list-group-item-action text-center font-weight-bold disabled flex-grow-1 d-flex flex-column">
+              <img src="/img/screenshots/users/cio.svg" alt="{{ i18n "cio" }}" class="w-100 mb-3 flex-grow-1">
+              <span>{{ i18n "cio" }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="col mb-4">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <a class="list-group-item-action text-center font-weight-bold disabled flex-grow-1 d-flex flex-column">
+              <img src="/img/screenshots/users/geek.svg" alt="{{ i18n "geek" }}" class="w-100 mb-3 flex-grow-1">
+              <span>{{ i18n "geek" }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>