Improve design of service grid on dashboard

app/views/dashboard/index.html.erb

@@ -2,60 +2,87 @@
 
 <%= render MainSimpleComponent.new do %>
   <section>
-    <p>
+    <p class="mb-8">
       Your Kosmos account and password currently give you access to these
       services:
     </p>
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 services mt-12">
-      <div>
-        <h3 class="mb-3.5">
-          <%= link_to "Chat", "https://wiki.kosmos.org/Services:Chat", class: "ks-text-link" %>
-        </h3>
-        <p class="text-gray-500">
-          Chat rooms and instant messaging (XMPP/Jabber)
-        </p>
+    <div class="services grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+      <div class="border border-gray-300 rounded-md hover:border-gray-400
+                  bg-cover bg-[center_top_-50px] bg-no-repeat
+                  bg-[url(/img/logos/icon_xmpp.svg)]">
+        <%= link_to "https://wiki.kosmos.org/Services:Chat",
+              class: "block h-full px-6 py-6 rounded-md" do %>
+          <h3 class="mb-3.5">Chat</h3>
+          <p class="text-gray-600">
+            Federated chat rooms and instant messaging
+          </p>
+        <% end %>
       </div>
-      <div>
-        <h3 class="mb-3.5">
-          <%= link_to "Discourse", "https://community.kosmos.org", class: "ks-text-link" %>
-        </h3>
-        <p class="text-gray-500">
-          Kosmos community forums and user support/help site
-        </p>
+      <div class="border border-gray-300 rounded-md hover:border-gray-400
+                  bg-[length:95%] bg-center bg-no-repeat
+                  bg-[url(/img/logos/icon_discourse.svg)]">
+        <%= link_to "https://community.kosmos.org",
+              class: "block h-full px-6 py-6 rounded-md" do %>
+          <h3 class="mb-3.5">Discourse</h3>
+          <p class="text-gray-600">
+            Kosmos community forums and user support/help site
+          </p>
+        <% end %>
       </div>
-      <div>
-        <h3 class="mb-3.5">
-          <%= render partial: "icons/zap", locals: { custom_class: "text-amber-500 h-4 w-4 inline" } %>
-          <%= link_to "Lightning Wallet", wallet_path, class: "ks-text-link" %>
-        </h3>
-        <p class="text-gray-500">
-          Send and receive sats over the Bitcoin Lightning Network
-        </p>
+      <div class="border border-gray-300 rounded-md hover:border-gray-400
+                  bg-cover bg-[center_top_-20px] bg-no-repeat
+                  bg-[url(/img/logos/icon_mediawiki.svg)]">
+        <%= link_to "https://wiki.kosmos.org",
+              class: "block h-full px-6 py-6 rounded-md" do %>
+          <h3 class="mb-3.5">Wiki</h3>
+          <p class="text-gray-600">
+            Kosmos documentation and knowledge base
+          </p>
+        <% end %>
       </div>
-      <div>
-        <h3 class="mb-3.5">
-          <%= link_to "Wiki", "https://wiki.kosmos.org", class: "ks-text-link" %>
-        </h3>
-        <p class="text-gray-500">
-          Kosmos documentation and knowledge base
-        </p>
+      <div class="border border-gray-300 rounded-md hover:border-gray-400
+                  bg-cover bg-center sm:bg-[center_top_-140px] bg-no-repeat
+                  bg-[url(/img/logos/icon_lightning.svg)]">
+        <%= link_to wallet_path,
+              class: "block h-full px-6 py-6 rounded-md" do %>
+          <h3 class="mb-3.5">Wallet</h3>
+          <p class="text-gray-600">
+            Send and receive sats over the Bitcoin Lightning Network
+          </p>
+        <% end %>
       </div>
-      <div>
-        <h3 class="mb-3.5">
-          <%= link_to "Gitea", "https://gitea.kosmos.org", class: "ks-text-link" %>
-        </h3>
-        <p class="text-gray-500">
-          Code hosting and collaboration for software projects
-        </p>
+      <div class="border border-gray-300 rounded-md hover:border-gray-400
+                  bg-cover bg-center bg-no-repeat
+                  bg-[url(/img/logos/icon_gitea.png)]">
+        <%= link_to "https://gitea.kosmos.org",
+              class: "block h-full px-6 py-6 rounded-md" do %>
+          <h3 class="mb-3.5">Gitea</h3>
+          <p class="text-gray-600">
+            Code hosting and collaboration for software projects
+          </p>
+        <% end %>
       </div>
-      <div>
-        <h3 class="mb-3.5">
-          <%= link_to "Drone CI", "https://drone.kosmos.org", class: "ks-text-link" %>
-        </h3>
-        <p class="text-gray-500">
-          Continuous integration for software projects on Gitea
-        </p>
+      <div class="border border-gray-300 rounded-md hover:border-gray-400
+                  bg-cover bg-[center_top_-70px] bg-no-repeat
+                  bg-[url(/img/logos/icon_droneci.svg)]">
+        <%= link_to "https://drone.kosmos.org",
+              class: "block h-full px-6 py-6 rounded-md" do %>
+          <h3 class="mb-3.5">Drone CI</h3>
+          <p class="text-gray-600">
+            Continuous integration for software projects on Gitea
+          </p>
+        <% end %>
       </div>
+      <!-- <div class="border border&#45;gray&#45;300 rounded&#45;md hover:border&#45;gray&#45;400 -->
+      <!--             bg&#45;[length:80%] bg&#45;[right_top_&#45;30px] bg&#45;no&#45;repeat -->
+      <!--             bg&#45;[url(/img/logos/icon_mastodon.svg)]"> -->
+      <!--   <%= link_to "https://kosmos.social", class: "block h&#45;full px&#45;6 py&#45;6 rounded&#45;md" do %> -->
+      <!--     <h3 class="mb&#45;3.5">Mastodon</h3> -->
+      <!--     <p class="text&#45;gray&#45;400"> -->
+      <!--       Your account on the Open Social Web -->
+      <!--     </p> -->
+      <!--   <% end %> -->
+      <!-- </div> -->
     </div>
   </section>
 <% end %>