Add the hero image to the home page

docs/.vuepress/config.js

@@ -11,6 +11,24 @@ export default defineUserConfig({
   plugins,
   bundler: viteBundler(),
   base: process.env.VUEPRESS_BASE ? `/${process.env.VUEPRESS_BASE}/` : '/',
+  head: [
+    [
+      "link",
+      {
+        // href: "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap",
+        href: "public/fonts/Noto_Sans/NotoSans-Regular.ttf",
+        rel: "stylesheet",
+      },
+    ],
+    [
+      "link",
+      {
+        // href: "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap",
+        href: "public/fonts/Noto_Sans/NotoSans-Bold.ttf",
+        rel: "stylesheet",
+      },
+    ],
+  ],
   locales: {
     // The key is the path for the locale to be nested under.
     // As a special case, the default locale can use '/' as its path.

docs/.vuepress/styles/palette.scss

@@ -1,3 +1,17 @@
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/Noto_Sans/NotoSans-Regular.ttf');
+}
+@font-face {
+  font-family: 'Noto Sans Bold';
+  font-style: bold;
+  font-weight: 600;
+  src: url('fonts/Noto_Sans/NotoSans-Bold.ttf');
+}
+
+// $font-family: XXX;
 $theme-color: #17b53f;
 
 .md-button {
@@ -20,6 +34,78 @@ $theme-color: #17b53f;
   flex-wrap: wrap;
 }
 
+.hero-container {
+  height: 800px;
+  width: auto;
+  background-image: linear-gradient(#282a82, #5e0d46);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 450px;
+  margin-bottom: 1rem;
+  color: #eee;
+  font-family: var(--font-family-heading);
+}
+
+.hero-container-inner {
+  width: 90%;
+  margin: 2em auto;
+  text-align: center;
+}
+
+.hero-button {
+  background-color: rgba(0, 0, 0, 0);
+  border-color: white;
+  border-style: solid;
+  border-radius: 5px;
+  padding: 8px 16px;
+}
+
+.hero-button:hover {
+  background-color: rgba(255, 225, 255, 0.15);
+  border-color: white;
+  border-style: solid;
+  border-radius: 5px;
+  padding: 8px 16px;
+  cursor: grab;
+}
+
+#logo {
+  width: 150px;
+}
+
+#slogan-container {
+  margin: 30px auto;
+}
+
+#slogan-1 {
+  font-family: 'Noto Sans Bold';
+  font-weight: bold;
+  font-size: 3em;
+}
+
+#slogan-2 {
+  font-family: 'Noto Sans';
+  font-size: 2em;
+}
+
+.slogan {
+  display: block;
+}
+
+#main-title {
+//  z-index: -1000 !important;
+  position: absolute;
+  top: -100;
+  opacity: 0 !important;
+}
+
+#main-description {
+  display: none;
+}
+
 .image-grid figure {
   width: 300px;
   height: auto;

docs/de/README.md

@@ -2,18 +2,32 @@
 home: true
 # layout: BlogHome
 icon: home
-title: Ocelot.Social
+# title: Ocelot.Social
 heroFullScreen: false
-heroImage: /logo.svg
-heroText: Das freie soziale Open-Source-Netzwerk für eine aktive Zivilgesellschaft.
+# heroImage: /logo.svg
+# heroText: Das freie soziale Open-Source-Netzwerk für eine aktive Zivilgesellschaft.
 tagLine: 
 # actions:
 #   - text: Demo
 #     link: https://stage.ocelot.social/
 ---
 
+<div class="hero-container">
+  <div class="hero-container-inner">
+    <img id="logo" src="/logo.svg" alt="ocelot.social" />
+    <div id="slogan-container">
+      <span id="slogan-1" class="slogan">Freie Open-Source-Software</span>
+      <span id="slogan-2" class="slogan">für dein soziales Netzwerk</span>
+    </div>
+    <a id="hero-button" href="#warum-ocelot-social">
+      <Button class="hero-button">
+        Entdecke mehr
+      </Button>
+    </a>
+  </div>
+</div>
 
-## Vorteile
+## Warum Ocelot.Social?
 
 Betreiber: