feat(homepage): add supported backends section

Makefile

@@ -102,6 +102,7 @@ esbuild: $(CSS_SOURCES) node_modules
 		--format=esm \
 		--loader:.jpg=file \
 		--loader:.otf=file \
+		--loader:.png=file \
 		--loader:.svg=file \
 		--loader:.ttf=file \
 		--loader:.webp=file \

docs/pages/index.md

@@ -41,6 +41,38 @@ description: >
         </hgroup>
     </div>
 </div>
+<div class="homepage-drivers">
+    <h3>Backend Drivers Support</h3>
+    <ul class="homepage-drivers__items">
+        <li class="homepage-drivers__item homepage-drivers__item--swoole">
+            <div class="homepage-drivers__item__background"></div>
+            <div class="homepage-drivers__item__name">
+                Swoole
+            </div>
+            <div class="homepage-drivers__item__state">
+                Supported since v0.1.0
+            </div>
+        </li>
+        <li class="homepage-drivers__item homepage-drivers__item--openswoole">
+            <div class="homepage-drivers__item__background"></div>
+            <div class="homepage-drivers__item__name">
+                OpenSwoole
+            </div>
+            <div class="homepage-drivers__item__state">
+                Supported since v0.1.0
+            </div>
+        </li>
+        <li class="homepage-drivers__item homepage-drivers__item--amphp">
+            <div class="homepage-drivers__item__background"></div>
+            <div class="homepage-drivers__item__name">
+                AMPHP
+            </div>
+            <div class="homepage-drivers__item__state">
+                In progress
+            </div>
+        </li>
+    </ul>
+</div>
 <div class="homepage-gallery">
     <h3>New Releases</h3>
     <ul class="homepage-gallery__items">

resources/css/docs-page-homepage.css

@@ -18,17 +18,12 @@
   background-color: var(--color-body-background);
 }
 
+.homepage-drivers,
 .homepage-gallery {
-  background-color: var(--color-block-dark-background);
-  color: var(--color-body-font-dark-background);
-  display: flex;
-  flex-direction: column;
-  height: 460px;
-  padding: 40px 20px;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  row-gap: 20px;
   max-width: 100vw;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 40px 20px;
 
   h3 {
     font-size: 2em;
@@ -38,6 +33,65 @@
   }
 }
 
+.homepage-drivers {
+  background-color: white;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+}
+
+.homepage-drivers__items {
+  align-items: center;
+  column-gap: 20px;
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+}
+
+.homepage-drivers__item {
+  border: 1px solid var(--color-border);
+  box-shadow: 8px 8px #00000033;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  row-gap: 20px;
+  text-align: center;
+}
+
+.homepage-drivers__item.homepage-drivers__item--amphp {
+  --drivers-bg-image: url(../images/amphp.webp);
+}
+
+.homepage-drivers__item.homepage-drivers__item--openswoole {
+  --drivers-bg-image: url(../images/openswoole.png);
+}
+
+.homepage-drivers__item.homepage-drivers__item--swoole {
+  --drivers-bg-image: url(../images/swoole.png);
+}
+
+.homepage-drivers__item__background {
+  background-image: var(--drivers-bg-image);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 200px;
+  width: 460px;
+}
+
+.homepage-drivers__item__name {
+  font-weight: bold;
+}
+
+.homepage-gallery {
+  background-color: var(--color-block-dark-background);
+  color: var(--color-body-font-dark-background);
+  display: flex;
+  flex-direction: column;
+  height: 460px;
+  row-gap: 20px;
+}
+
 .homepage-gallery::-webkit-scrollbar-thumb {
   background-color: var(--color-body-background);
 }