From d06a683a62f626b28a92849cdb034be69135a35e Mon Sep 17 00:00:00 2001
From: Mateusz Charytoniuk <mateusz.charytoniuk@protonmail.com>
Date: Tue, 9 Jul 2024 15:23:25 +0200
Subject: [PATCH] fix: homepage tiles

---
 docs/pages/index.md                  | 43 +++++++++++++++-------------
 resources/css/docs-page-homepage.css | 20 +++++++++++--
 2 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/docs/pages/index.md b/docs/pages/index.md
index c075a63..50b5d13 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -46,47 +46,50 @@ description: >
 <div class="homepage-gallery homepage-gallery--reasons">
     <h3>Why Resonance?</h3>
     <ul class="homepage-gallery__grid">
-        <li class="homepage-gallery__item">
+        <li class="homepage-gallery__grid-item">
             <h4>
-                <a href="/docs/features/">
-                    Predictable Performance
-                </a>
+                Predictable Performance
             </h4>
             <p>
-                Resonance is designed with a few priorities: no memory leaks, blocking operations, and garbage collector surprises.<br><br>
+                Resonance is designed with a few priorities: no memory leaks, blocking operations, and garbage collector surprises.
+            </p>
+            <p>
                 Most of the internals are read-only and stateless. After the application startup, nothing disturbs JIT and opcode (Reflection is only used during the application startup), so there are no surprise slowdowns during runtime.
             </p>
+            <p>
+                Dependency Injection container is designed to prevent any cyclical dependencies between services.
+            </p>
         </li>
-        <li class="homepage-gallery__item">
+        <li class="homepage-gallery__grid-item">
             <h4>
-                <a href="/docs/features/">
-                    Opinionated
-                </a>
+                Opinionated
             </h4>
             <p>
-                All the libraries under the hood have been thoroughly tested to ensure they work together correctly, complement each other, and work perfectly under async environments.<br><br>
+                All the libraries under the hood have been thoroughly tested to ensure they work together correctly, complement each other, and work perfectly under async environments.
+            </p>
+            <p>
                 For example, Resonance implements custom <a href="https://www.doctrine-project.org/">Doctrine</a> drivers, so it uses Swoole's connection pools.
             </p>
         </li>
-        <li class="homepage-gallery__item">
+        <li class="homepage-gallery__grid-item">
             <h4>
-                <a href="/docs/features/">
-                    Resolves Input/Output Issues
-                </a>
+                Resolves Input/Output Issues
             </h4>
             <p>
-                Resonance is designed to handle IO-intensive tasks, such as serving Machine Learning models, handling WebSocket connections, and processing long-running HTTP requests.<br><br>
+                Resonance is designed to handle IO-intensive tasks, such as serving Machine Learning models, handling WebSocket connections, and processing long-running HTTP requests.
+            </p>
+            <p>
                 It views modern applications as a mix of services that communicate with each other asynchronously, including AI completions and ML inferences, so it provides a set of tools to make this communication as easy as possible.
             </p>
         </li>
-        <li class="homepage-gallery__item">
+        <li class="homepage-gallery__grid-item">
             <h4>
-                <a href="/docs/features/">
-                    Complete Package
-                </a>
+                Complete Package
             </h4>
             <p>
-                Resonance includes everything you need to build a modern web application, from the HTTP server to the AI capabilities.<br><br>
+                Resonance includes everything you need to build a modern web application, from the HTTP server to the AI capabilities.
+            </p>
+            <p>
                 It provides security features, HTML templating, integration with open-source LLMs, and provides capability to serve ML models.
             </p>
         </li>
diff --git a/resources/css/docs-page-homepage.css b/resources/css/docs-page-homepage.css
index e129bb9..e51d939 100644
--- a/resources/css/docs-page-homepage.css
+++ b/resources/css/docs-page-homepage.css
@@ -62,15 +62,31 @@
 }
 
 .homepage-gallery__grid {
+  gap: 40px;
   display: grid;
-  gap: 20px;
+  list-style-type: none;
 
   @media screen and (max-width: 1023px) {
     grid-template-columns: 1fr;
   }
-  @media screen and (min-width: 1024px) {
+  @media screen and (min-width: 1024px) and (max-width: 1479px) {
     grid-template-columns: repeat(2, 1fr);
   }
+  @media screen and (min-width: 1480px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.homepage-gallery__grid-item {
+  border: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  padding: 40px 20px;
+  row-gap: 20px;
+
+  h4 {
+    font-weight: bold;
+  }
 }
 
 .homepage-gallery__items {