diff --git a/docs/fr/README.md b/docs/fr/README.md
index 40c7963..e389467 100644
--- a/docs/fr/README.md
+++ b/docs/fr/README.md
@@ -2,43 +2,295 @@
 home: true
 # layout: BlogHome
 icon: home
-title: Ocelot.Social
+# title: Ocelot.Social
 heroFullScreen: false
-heroImage: /logo.svg
-heroText: Réseau social libre et gratuit pour citoyen actif.
+# 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
 
-XXX
+<!-- 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">Logiciel libre et open source</span>
+        <!-- XXX translate check caps -->
+        <span id="slogan-2" class="slogan">pour ton réseau social</span>
+      </div>
+      <a href="#benefits">
+        <Button class="hero-button">
+          Découvrir plus
+        </Button>
+      </a>
+    </div>
+  </div>
+</div>
 
-## Features
+<h2 id="benefits" class="large-header">Pourquoi Ocelot.Social ?</h2>
 
-XXX
+<div class="benefits-grid center">
+  <figure>
+    <HopeIcon icon="fa-solid fa-face-smile" />
+    <figcapture>
+      <h3>Logiciel libre et gratuit</h3>
+      Tu peux utiliser et développer le logiciel.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-people-group" />
+    <figcapture>
+      <h3>Pour tout le monde</h3>
+      <i>Ocelot.social</i> est adapté à la société civile ainsi qu'aux organisations publiques et privées.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-filter" />
+    <figcapture>
+      <h3>Filtrage autodéterminé</h3>
+      Tu choisis le contenu que tu vois – pas de sélection impénétrable.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-gears" />
+    <figcapture>
+      <h3>Configurable</h3>
+      En tant qu'opérateur, tu peux personnaliser le design et les fonctions selon tes souhaits.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-code" />
+    <figcapture>
+      <h3>Extensible</h3>
+      De nouvelles fonctions peuvent être ajoutées pour le bénéfice de tous.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-up-right-and-down-left-from-center" />
+    <figcapture>
+      <h3>Évolutif</h3>
+      Grâce à la technologie la plus récente, tu peux utiliser le logiciel pour toutes les tailles de réseau.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="home" />
+    <figcapture>
+      <h3>Hébergement flexible</h3>
+      Tu peux héberger votre réseau vous-même ou le faire héberger par votre fournisseur de services.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-scale-balanced" />
+    <figcapture>
+      <h3>Vos propres règles</h3>
+      Détermines toi-même les conditions d'utilisation de ton réseau.
+    </figcapture>
+  </figure>
+  <figure>
+    <HopeIcon icon="fa-solid fa-shuttle-space" />
+    <figcapture>
+      <h3>Technologie de pointe</h3>
+      Le logiciel est à la pointe de la technologie – flexible, fiable, performant.
+    </figcapture>
+  </figure>
+</div>
 
-## Demo (link)
+<h2 id="feature-headline" class="large-header">Fonctions les plus importantes</h2>
 
-XXX
+<div class="image-grid center">
+  <figure>
+    <img src="../de/assets/login.png" alt="Aperçu des messages (newsfeed)" />
+    <figcapture>
+      Aperçu des messages (newsfeed)
+    </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="Message individuel" />
+    <figcapture>
+      Message individuel
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/single-event.png" alt="Événement individuel" />
+    <figcapture>
+      Événement individuel
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/user-profile.png" alt="Profil de l'utilisateur" />
+    <figcapture>
+      Profil de l'utilisateur
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/user-settings.png" alt="Paramètres du compte utilisateur" />
+    <figcapture>
+      Paramètres du compte utilisateur
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/group-list.png" alt="Aperçu du groupe" />
+    <figcapture>
+      Aperçu du groupe
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/group-profile.png" alt="Profil du groupe" />
+    <figcapture>
+      Profil du groupe
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/1-to-1-chat.png" alt="Chat en tête-à-tête" />
+    <figcapture>
+      Chat en tête-à-tête
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/notifications.png" alt="Notifications" />
+    <figcapture>
+      Notifications
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/map.png" alt="Carte" />
+    <figcapture>
+      Carte
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/language-selection.png" alt="Multilinguisme" />
+    <figcapture>
+      Multilinguisme
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/moderation.png" alt="Modération" />
+    <figcapture>
+      Modération
+    </figcapture>
+  </figure>
+  <figure>
+    <img src="../de/assets/system-administration.png" alt="Gestion du système" />
+    <figcapture>
+      Gestion du système
+    </figcapture>
+  </figure>
+</div>
 
-## Get started (link)
+<div class="all-features">
+  <a id="hero-button" href="/fr/features/">
+    <Button>
+      Toutes les fonctions
+    </Button>
+  </a>
+</div>
 
-XXX
+<!-- XXX translate -->
 
-## Video (link)
+<!-- <h2 id="benefits" class="large-header">Why free open source software?</h2>
 
-XXX
+<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> -->
 
-## testimonials
+<h2 class="large-header">Essayes-le</h2>
 
-XXX
+<!--
+| E-Mail                  | Passwort | Benutzerrolle   |
+| :---                    | :---     | :---            |
+| `user@example.org`      | 1234     | normaler Nutzer |
+| `moderator@example.org` | 1234     | Moderator       |
+| `admin@example.org`     | 1234     | Administrator   |
+-->
 
-## Donation
+<div class="center">
+  <p>
+    Testes la démo en direct sur
+    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
+    avec les données d'accès suivantes :
+  </p>
 
-XXX
+  <table><thead><tr><th style="text-align:left;">Courriel</th><th style="text-align:left;">Mot de passe</th><th style="text-align:left;">Rôle de l'utilisateur</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;">utilisateur normal</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;">modérateur</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;">administrateur</td></tr></tbody></table>
+</div>
 
-## Contact
+<h2 class="large-header">Commences</h2>
 
-XXX
+<div class="center">
+  <p>
+    <!-- XXX translate <i>Ocelot.social</i> -->
+    Tu peux héberger <i>Ocelot.social</i> sur ton propre serveur ou le faire héberger.<br>
+    Jetes un coup d'œil aux options disponibles :
+  </p>
+  <a id="hero-button" href="/fr/get-started/">
+    <Button>
+      <!-- XXX translate exclamation mark with space, like deeple says. and apostrophe -->
+      C'est parti!
+    </Button>
+  </a>
+</div>
+
+<!-- ## Testimonials
+
+XXX -->
+
+<h2 class="large-header">Faire un don</h2>
+
+<!-- XXX translate check -->
+
+<div class="center">
+  <p>
+    Le logiciel <i>ocelot.social</i> est disponible gratuitement – mais la maintenance et le développement ultérieur coûtent de l'argent.<br>
+    Aidez-nous avec votre don :
+  </p>
+  <a href="/fr/donate/">
+    <Button class="donate-button">
+      Faire un don
+    </Button>
+  </a>
+</div>
+
+<h2 class="large-header">Contact</h2>
+
+<div class="center">
+  <p>
+    Si tu as des questions, des suggestions ou des demandes, n'hésites pas à <a href="/fr/contact/">nous contacter</a>.
+  </p>
+</div>