Add benefits grid to the home page

docs/.vuepress/config/theme.js

@@ -150,5 +150,6 @@ export default hopeTheme({
     seo: {
       fallbackImage: '/logo.svg'
     }
-  }
+  },
+  iconAssets: "fontawesome",
 })

docs/.vuepress/styles/palette.scss

@@ -11,9 +11,18 @@
   src: url('@theme/assets/fonts/Noto_Sans/NotoSans-Bold.ttf');
 }
 
-// $font-family: XXX;
+$font-family: '"Noto Sans", sans-serif' !default;
+$font-family-heading: '"Noto Sans Bold", sans-serif' !default;
 $theme-color: #17b53f;
 
+body {
+  font-family: 'Noto Sans';
+};
+
+h1, h2, h3, h4 {
+  font-family: 'Noto Sans Bold';
+};
+
 .md-button {
   background-color: $theme-color;
   border-radius: 5px;
@@ -35,8 +44,8 @@ $theme-color: #17b53f;
 }
 
 .hero-container {
-  height: 800px;
   width: auto;
+  height: 800px;
   background-image: linear-gradient(#282a82, #5e0d46);
 
   position: relative;
@@ -46,7 +55,6 @@ $theme-color: #17b53f;
   height: 450px;
   margin-bottom: 1rem;
   color: #eee;
-  font-family: var(--font-family-heading);
 }
 
 .hero-container-inner {
@@ -56,6 +64,7 @@ $theme-color: #17b53f;
 }
 
 .hero-button {
+  color: white;
   background-color: rgba(0, 0, 0, 0);
   border-color: white;
   border-style: solid;
@@ -110,4 +119,24 @@ $theme-color: #17b53f;
   width: 300px;
   height: auto;
   flex-shrink: 1;
+}
+
+.benefits-grid {
+  height: 700px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+}
+
+.benefits-grid figure {
+  width: 300px;
+  height: auto;
+  flex-shrink: 1;
+  align-items: stretch;
+}
+
+.benefits-grid span {
+  font-size: 3rem;
 }

docs/de/README.md

@@ -27,22 +27,77 @@ tagLine:
   </div>
 </div>
 
-## Warum Ocelot.Social?
+<!-- ## Warum Ocelot.Social? -->
 
-Betreiber:
+<div class="benefits-grid">
+  <figure>
+    <HopeIcon icon="fa-solid fa-face-smile" />
+    <figcapture>
+      <h3>Freie und Open-Source-Software</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-filter" />
+    <figcapture>
+      <h3>Selbstbestimmtes Filtern des Inhalts möglich (keine undurchschaubare Auswahl)</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-gears" />
+    <figcapture>
+      <h3>Konfigurierbar</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-code" />
+    <figcapture>
+      <h3>Erweiterbar</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-up-right-and-down-left-from-center" />
+    <figcapture>
+      <h3>Skalierbar für alle Netzwerkgrößen</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-people-group" />
+    <figcapture>
+      <h3>Für alle: Zivilgesellschaft, Staat, private (auch kommerziell)</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="home" />
+    <figcapture>
+      <h3>Zum selber hosten oder hosten lassen</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-hand-middle-finger" />
+    <figcapture>
+      <h3>Deine eigenen Nutzungsbedingungen</h3>
+      XXX
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-shuttle-space" />
+    <figcapture>
+      <h3>Neueste Technologie</h3>
+      XXX
+    </figcapture>
+  </figure>
+</div>
 
-- Freie und Open-Source-Software
-- Konfigurierbar
-- Erweiterbar
-- Skalierbar für alle Netzwerkgrößen
-- Für alle: Zivilgesellschaft, Staat, private (auch kommerziell)
-- Zum **Selber-Hosten** oder hosten lassen
-- Deine eigenen Nutzungsbedingungen
-- Neueste Technologie
+<!-- ## Screenshots -->
 
-## Screenshots
-
-XXX
+<!-- XXX -->
 
 <div class="image-grid">
   <figure>