Add content to English home page

docs/en/README.md

@@ -2,74 +2,292 @@
 home: true
 # layout: BlogHome
 icon: home
-title: Ocelot.Social
+# title: Ocelot.Social
 heroFullScreen: false
-heroImage: /logo.svg
-heroText: Free and open-source social network for active citizenship.
+# heroImage: /logo.svg
+# heroText: Das freie soziale Open-Source-Netzwerk für eine aktive Zivilgesellschaft.
 tagLine: 
 # actions:
 #   - text: Demo
 #     link: https://stage.ocelot.social/
 ---
-## Benefits
 
-How is ocelot.social different from other social networks?
+<!-- markdownlint-disable no-inline-html first-line-heading -->
+<div class="hero-container">
+  <div class="hero-container-inner">
+    <div class="hero-container-content">
+      <img id="logo" src="/logo.svg" alt="ocelot.social" />
+      <div id="slogan-container">
+        <span id="slogan-1" class="slogan">Free Open Source Software</span>
+        <span id="slogan-2" class="slogan">For Your Social Network</span>
+      </div>
+      <a href="#benefits">
+        <Button class="hero-button">
+          Discover more
+        </Button>
+      </a>
+    </div>
+  </div>
+</div>
 
-- **Open Source:** The software code of this network is Open Source. This means that the code is public and can be copied, used, modified, enhanced and verified by anyone. You can contribute as a developer or translator to improve and enhance this project
-- **Not for profit:** Ocelot.social is non-profit, serving the public good. The network is developed and maintained by a non-profit association located in Germany, assisted by open source contributors around the world
-- **Privacy:** Your data will not be sold to advertisers and no user profiling will be done unless the operator of the network in question explicitly states this in its privacy policy
-- **Funded by donations:** The ocelot.social software is funded by donations which means that you may or may not give some love back by a donation or by other ways of contributing
-- **Self-determination:** Independence from the terms of use of the well-known major social networks: The operator of an Ocelot.Social network sets its own terms of use
+<h2 id="benefits" class="large-header">Why Ocelot.Social?</h2>
 
-<!-- ## Video (link) -->
+<div class="benefits-grid center">
+  <figure>
+    <HopeIcon icon="fa-solid fa-face-smile" />
+    <figcapture>
+      <h3>Free open source software</h3>
+      You can use and further develop the software.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-people-group" />
+    <figcapture>
+      <h3>For everyone</h3>
+      <i>Ocelot.social</i> is suitable for civil society as well as for public and private organizations.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-filter" />
+    <figcapture>
+      <h3>Self-determined filtering</h3>
+      You choose what content you see – no impenetrable selection.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-gears" />
+    <figcapture>
+      <h3>Configurable</h3>
+      As the operator, you can customize the design and functions according to your wishes.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-code" />
+    <figcapture>
+      <h3>Expandable</h3>
+      New functions can be added that benefit everyone.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-up-right-and-down-left-from-center" />
+    <figcapture>
+      <h3>Scalable</h3>
+      Thanks to the latest technology, you can use the software for all network sizes.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="home" />
+    <figcapture>
+      <h3>Flexible hosting</h3>
+      You can host your network yourself or have it hosted by your service provider.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-scale-balanced" />
+    <figcapture>
+      <h3>Your own rules</h3>
+      Determine the terms of use for your network yourself.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-shuttle-space" />
+    <figcapture>
+      <h3>Latest technology</h3>
+      The software is at the cutting edge of technology – flexible, reliable, high-performance.
+    </figcapture>
+  </figure>
+</div>
 
-## Screenshots
+<h2 id="feature-headline" class="large-header">Major Functions</h2>
 
-<!-- We want to make a slider with different screenshots -->
+<div class="image-grid center">
+  <figure>
+    <img src="../de/assets/login.png" alt="Login" />
+    <figcapture>
+      Login
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/newsfeed.png" alt="Post overview (newsfeed)" />
+    <figcapture>
+      Post overview (newsfeed)
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/single-post.png" alt="Individual post" />
+    <figcapture>
+      Individual post
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/single-event.png" alt="Individual event" />
+    <figcapture>
+      Individual event
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/user-profile.png" alt="User profile" />
+    <figcapture>
+      User profile
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/user-settings.png" alt="User account settings" />
+    <figcapture>
+      User account settings
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/group-list.png" alt="Group overview" />
+    <figcapture>
+      Group overview
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/group-profile.png" alt="Group profile" />
+    <figcapture>
+      Group profile
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/1-to-1-chat.png" alt="One-to-one chat" />
+    <figcapture>
+      One-to-one chat
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/notifications.png" alt="Notifications" />
+    <figcapture>
+      Notifications
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/map.png" alt="Map" />
+    <figcapture>
+      Map
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/language-selection.png" alt="Multilingualism" />
+    <figcapture>
+      Multilingualism
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/moderation.png" alt="Moderation" />
+    <figcapture>
+      Moderation
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/system-administration.png" alt="System management" />
+    <figcapture>
+      System management
+    </figcapture>
+  </figure>
+</div>
 
-## Features
+<div class="all-features">
+  <a id="hero-button" href="/en/features/">
+    <Button>
+      View all functions
+    </Button>
+  </a>
+</div>
 
-Ocelot.social networks features:
+<!-- XXX translate -->
 
-- User Accounts
-- User Roles
-- news feed (Posts)
-  - Filter
-- posts
-  - as articles
-  - as events
-  - comments
-- Search
-- Groups
-- Map
+<!-- <h2 id="benefits" class="large-header">Why free open source software?</h2>
 
-[See all features](/en/features)
-<!-- Button
-<Button >See all features!</Button>
+<div class="benefits-grid center">
+  <figure>
+    <HopeIcon icon="fa-solid" />
+    <figcapture>
+      <h3>Frei verfügbar</h3>
+      Freie Software ist für jeden Menschen jederzeit zugänglich. Dass Lizenzen ablaufen, gibt es nicht.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid" />
+    <figcapture>
+      <h3>Transparent</h3>
+      Bei freier Software ist der Quellcode einsehbar. Jeder Mensch hat so die Möglichkeit nachzusehen, was im Hintergrund eines Programmes passiert.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid" />
+    <figcapture>
+      <h3>Kopierbar</h3>
+      Ich kann jederzeit mit allen meinen Kolleginnen und Kollegen zusammenarbeiten. Alle können es jederzeit verwenden, ohne Einschränkungen.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid" />
+    <figcapture>
+      <h3>Veränderbar</h3>
+      Jede Person kann etwas zu ihrem Lieblingsprogramm beitragen, jederzeit. Ich kann das Programm so verwenden, wie ich es am liebsten will.
+    </figcapture>
+  </figure>
+</div> -->
+
+<h2 class="large-header">Try it out</h2>
+
+<!--
+| E-Mail                  | Passwort | Benutzerrolle   |
+| :---                    | :---     | :---            |
+| `user@example.org`      | 1234     | normaler Nutzer |
+| `moderator@example.org` | 1234     | Moderator       |
+| `admin@example.org`     | 1234     | Administrator   |
 -->
 
-## Demo
+<div class="center">
+  <p>
+    Test the live demo on
+    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
+    with the following access data:
+  </p>
 
-try out the application under the following link [Ocelot.Social](https://stage.ocelot.social/)
-<!-- Button to demo page -->
+  <table><thead><tr><th style="text-align:left;">E-mail</th><th style="text-align:left;">Password</th><th style="text-align:left;">User role</th></tr></thead><tbody><tr><td style="text-align:left;"><code>user@example.org</code></td><td style="text-align:left;">1234</td><td style="text-align:left;">normal user</td></tr><tr><td style="text-align:left;"><code>moderator@example.org</code></td><td style="text-align:left;">1234</td><td style="text-align:left;">moderator</td></tr><tr><td style="text-align:left;"><code>admin@example.org</code></td><td style="text-align:left;">1234</td><td style="text-align:left;">administrator</td></tr></tbody></table>
+</div>
 
-## Get started
+<h2 class="large-header">Get started</h2>
 
-If you want to install the application on a server or your local machine follow the [link](/en/get-started)
-<!-- Button to get started page  -->
+<div class="center">
+  <p>
+    You can host <i>ocelot.social</i> on your own server or have it hosted.<br>
+    Take a look at the options available:
+  </p>
+  <a id="hero-button" href="/en/get-started/">
+    <Button>
+      Let's go
+    </Button>
+  </a>
+</div>
 
-## Testimonials
+<!-- ## Testimonials
 
-<!-- Heimo (sender.fm), Ulf Tramsen, Lars Ebert (Yunite.me), Jenseblümchen (freilernen.social) -->
+XXX -->
 
-## Donation
+<h2 class="large-header">Donate</h2>
 
-Ocelot.Social is a not-for-profit which can is keep running thanks to your donations. Do you like what we do? Do you think we’re going in the right direction? If so, and you’re able to make a donation, we’d much appreciate it! [Donation Page](/en/donations)
-<!-- Button to Donation Page -->
+<!-- XXX translate check -->
 
-## Contact
+<div class="center">
+  <p>
+    The <i>ocelot.social</i> software is freely available – but maintenance and further development cost money.<br>
+    Help us with your donation:
+  </p>
+  <a href="/en/donate/">
+    <Button class="donate-button">
+      Donate here
+    </Button>
+  </a>
+</div>
 
-If you want more informations you can join us on [Discord](https://discord.gg/AGPJ7YgC), on GitHub or by email.
+<h2 class="large-header">Contact</h2>
 
-[Contact](/en/contact)
-<!-- Button to contact page-->
+<div class="center">
+  <p>
+    If you have any questions, suggestions or requests, please <a href="/en/contact/">contact us</a>.
+  </p>
+</div>