Update legal notice

Public registrations are paused; surface a signup form on the homepage
hero that subscribes users to the beta tester list.

config.yml

@@ -34,14 +34,12 @@ languages:
       DefaultDescription: "L'interface qui vous rend heureux de gérer vos noms de domaines."
 
       others_links:
-        - text: "S'inscrire"
-          href: "//app.happydomain.org/register"
-          class: "btn btn-secondary"
-          icon: "bi-person-plus-fill"
         - text: "S'identifier"
           href: "//app.happydomain.org/login"
-          class: "btn btn-outline-primary"
-          icon: "bi-person-check-fill"
+          class: "btn btn-link text-dark"
+        - text: "Essayer en ligne →"
+          href: "//try.happydomain.org/"
+          class: "btn btn-primary btn-sm"
 
       carousel:
         - title: "domains-lists"
@@ -90,14 +88,12 @@ params:
   tryit: "https://try.happydomain.org/"
 
   others_links:
-    - text: "Sign up"
-      href: "//app.happydomain.org/register"
-      class: "btn btn-secondary"
-      icon: "bi-person-plus-fill"
     - text: "Sign in"
       href: "//app.happydomain.org/login"
-      class: "btn btn-outline-primary"
-      icon: "bi-person-check-fill"
+      class: "btn btn-link text-dark"
+    - text: "Try it online →"
+      href: "//try.happydomain.org/"
+      class: "btn btn-primary btn-sm"
 
   carousel:
     - title: "domains-lists"

content/legal-notice.en.md

@@ -16,8 +16,8 @@ De facto association "happyDNS"
 <address style="margin-left: 2em; margin-top: -.5em">
 Association happyDNS<br>
 ABS Pierre-Olivier Mercier<br>
-40 avenue Raspail<br>
-94250 GENTILLY
+8 avenue Georges Clemenceau<br>
+14000 CAEN
 </address>
 
 

content/legal-notice.fr.md

@@ -18,8 +18,8 @@ Siège social :
 <address style="margin-left: 2em; margin-top: -.5em">
 Association happyDNS<br>
 ABS Pierre-Olivier Mercier<br>
-40 avenue Raspail<br>
-94250 GENTILLY
+8 avenue Georges Clemenceau<br>
+14000 CAEN
 </address>
 
 ### Hébergement

content/newsletter.en.html

@@ -25,7 +25,7 @@ title = "Subscribe to our newsletter"
         <input type="hidden" name="lang" value="en" />
         <input type="email" name="email" required placeholder="j.postel@isi.edu" class="form-control mb-3">
         <input type="text" name="name" placeholder="Name (optional)" class="form-control mb-3">
-        <div class="mb-2 mx-auto h-captcha" data-sitekey="12a1e811-7f34-44ca-9e7c-fb1e9ade6b00"></div>
+        <altcha-widget floating class="mb-2 mx-auto" challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"></altcha-widget>
         <button type="submit" class="btn btn-lg btn-primary py-2" data-umami-event="cta-newsletter-join">
           Join our newsletter
         </button>

content/newsletter.fr.html

@@ -25,7 +25,7 @@ title = "Rejoindre notre newsletter"
         <input type="hidden" name="lang" value="en" />
         <input type="email" name="email" required placeholder="j.postel@isi.edu" class="form-control mb-3">
         <input type="text" name="name" placeholder="Nom (optionnel)" class="form-control mb-3">
-        <div class="mb-2 mx-auto h-captcha" data-sitekey="12a1e811-7f34-44ca-9e7c-fb1e9ade6b00"></div>
+        <altcha-widget floating class="mb-2 mx-auto" challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"></altcha-widget>
         <button type="submit" class="btn btn-lg btn-primary py-2" data-umami-event="cta-newsletter-join">
           Rejoindre notre newsletter
         </button>

content/use-happyDomain/cio.en.html

@@ -19,12 +19,12 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Keep track of every change with the built-in history.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> allows you to go back at any time in case of a problem.
+          happy<span class="fw-bold">Domain</span> allows you to go back at any time in case of a problem.
         </p>
         <p>
           The history allows you to easily track the latest changes, keeping track of who made them.
@@ -37,14 +37,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Share the management of zones between your teams.
           <small class="text-muted">
             (coming soon)
@@ -55,7 +55,7 @@ layout = "usage"
           Reduce friction between your teams by allowing them to manage records related to their projects (internal or even public).
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> implements a powerful access control system allowing you to delegate all or part of a zone, up to the recording.
+          happy<span class="fw-bold">Domain</span> implements a powerful access control system allowing you to delegate all or part of a zone, up to the recording.
         </p>
       </div>
     </div>
@@ -66,12 +66,12 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Centralize and synchronize your domain portfolios.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> connects to more than 25 hosting providers worldwide. You can manage them in the interface with one click.
+          happy<span class="fw-bold">Domain</span> connects to more than 25 hosting providers worldwide. You can manage them in the interface with one click.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -81,14 +81,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Relisiez puis confirmer les modifications qui seront appliquées">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Keep track of the purpose of each sub-domain.
           <small class="text-muted">
             (coming soon)
@@ -96,7 +96,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> allows you to set an expiration date on your subdomains so that a temporary event and its servers do not remain accessible, simply because a closing ticket has not been processed. We take care of it automatically.
+          happy<span class="fw-bold">Domain</span> allows you to set an expiration date on your subdomains so that a temporary event and its servers do not remain accessible, simply because a closing ticket has not been processed. We take care of it automatically.
         </p>
       </div>
     </div>

content/use-happyDomain/cio.fr.html

@@ -19,12 +19,12 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Garder une trace de chaque modification avec l'historique intégré.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> vous permet de revenir en arrière à n'importe quel moment en cas de problème.
+          happy<span class="fw-bold">Domain</span> vous permet de revenir en arrière à n'importe quel moment en cas de problème.
         </p>
         <p>
           L'historique vous permet de vous repérer facilement dans les dernières modifications, en gardant une trace des intervenants.
@@ -37,14 +37,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Partagez la gestion des zones entre vos équipes.
           <small class="text-muted">
             (bientôt disponible)
@@ -55,7 +55,7 @@ layout = "usage"
           Réduisez les points de frictions entre vos équipes en leur permettant de gérer les enregistrements relatifs à leurs projets (internes ou publics).
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> met en place un puissant système de contrôle d'accès permettant de déléguer tout ou partie d'une zone, jusqu'à l'enregistrement.
+          happy<span class="fw-bold">Domain</span> met en place un puissant système de contrôle d'accès permettant de déléguer tout ou partie d'une zone, jusqu'à l'enregistrement.
         </p>
       </div>
     </div>
@@ -66,12 +66,12 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Centraliser et synchroniser vos portefeuilles de domaines.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> se connecte à plus de 25 hébergeurs à travers le monde. Vous pouvez les gérer dans l'interface en un clic.
+          happy<span class="fw-bold">Domain</span> se connecte à plus de 25 hébergeurs à travers le monde. Vous pouvez les gérer dans l'interface en un clic.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -81,14 +81,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Relisiez puis confirmer les modifications qui seront appliquées">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Garder une trace de la raison d'être de chaque sous-domaine.
           <small class="text-muted">
             (bientôt disponible)
@@ -96,7 +96,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> vous permet de fixer une date d'expiration sur vos sous-domaines pour éviter qu'un événement temporaire et ses serveurs restent accessibles simplement parce qu'un ticket de fermeture n'a pas été traité. On s'en occupe automatiquement.
+          happy<span class="fw-bold">Domain</span> vous permet de fixer une date d'expiration sur vos sous-domaines pour éviter qu'un événement temporaire et ses serveurs restent accessibles simplement parce qu'un ticket de fermeture n'a pas été traité. On s'en occupe automatiquement.
         </p>
       </div>
     </div>

content/use-happyDomain/devops.en.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           All your domains' operations<br>
           accessible via a REST API.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Everything that's done in the happy<span class="font-weight-bold">Domain</span> web interface can easily be done with the API, in your language of choice.
+          Everything that's done in the happy<span class="fw-bold">Domain</span> web interface can easily be done with the API, in your language of choice.
         </p>
         <p>
           Our REST API is fully documented, and thanks to Swagger, you can browse it and easily generate a tool using it in any supported language.
@@ -40,20 +40,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Forget about the complexity of each hosting company.<br>
           Take advantage of our unified interface.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Don't be afraid of discovering a new host. happy<span class="font-weight-bold">Domain</span> manages over 25 hosts worldwide:
+          Don't be afraid of discovering a new host. happy<span class="fw-bold">Domain</span> manages over 25 hosts worldwide:
         </p>
         <ul class="text-left">
           <li class="mb-1"><strong>cloud services&nbsp;:</strong> Route53, Azure DNS, Google Cloud DNS, DigitalOcean, Linode, Oracle Cloud, ...</li>
@@ -73,13 +73,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Respond to all requests<br>
           with ease.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          A new service? An urgent fix? happy<span class="font-weight-bold">Domain</span> uses simple terminology to stay focused.
+          A new service? An urgent fix? happy<span class="fw-bold">Domain</span> uses simple terminology to stay focused.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -89,14 +89,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/sdk-python.webp" alt="Python SDK usage">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Many tools are already available for you, DevOps.
         </h4>
         <hr class="bg-light mx-5">
@@ -107,8 +107,8 @@ layout = "usage"
             </a>
             <span class="text-hilight px-1 text-dark">add or modify zone records,</span>
             manage new domains through their registrar,
-            manage happy<span class="font-weight-bold">Domain</span>'s users,
-            or deploy happy<span class="font-weight-bold">Domain</span> using the official Ansible collection.
+            manage happy<span class="fw-bold">Domain</span>'s users,
+            or deploy happy<span class="fw-bold">Domain</span> using the official Ansible collection.
           </li>
           <li class="mb-2">
             <a href="https://pypi.org/project/happydomain/" target="_blank">

content/use-happyDomain/devops.fr.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Tous vos domaines<br>
           accessibles par une API REST.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Tout ce qui se fait dans l'interface web d'happy<span class="font-weight-bold">Domain</span> peut se faire facilement avec l'API, dans votre langage de prédilection.
+          Tout ce qui se fait dans l'interface web d'happy<span class="fw-bold">Domain</span> peut se faire facilement avec l'API, dans votre langage de prédilection.
         </p>
         <p>
           Notre API REST est entièrement documentée et grâce à Swagger, vous pouvez la parcourir et générer aisément un outil l'utilisant dans tous les langages supportés.
@@ -40,20 +40,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Oubliez la complexité de chaque hébergeur.<br>
           Profitez de notre interface unifiée.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="font-weight-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde&nbsp;:
+          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="fw-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde&nbsp;:
         </p>
         <ul class="text-left">
           <li class="mb-1"><strong>services de cloud&nbsp;:</strong> Route53, Azure DNS, Google Cloud DNS, DigitalOcean, Linode, Oracle Cloud, ...</li>
@@ -73,13 +73,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Répondez à toutes les demandes<br>
           en toute simplicité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="font-weight-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
+          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="fw-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -89,14 +89,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/sdk-python.webp" alt="Utilisation du SDK Python">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Déjà de nombreux outils disponibles pour les DevOps.
         </h4>
         <hr class="bg-light mx-5">
@@ -107,8 +107,8 @@ layout = "usage"
             </a>
             <span class="text-hilight px-1 text-dark">ajouter ou modifier les enregistrements d'une zone,</span>
             gérer les bureaux d'enregistrement,
-            gérer les utilisateurs d'happy<span class="font-weight-bold">Domain</span>,
-            ou encore déployer happy<span class="font-weight-bold">Domain</span> grâce à la collection Ansible officielle.
+            gérer les utilisateurs d'happy<span class="fw-bold">Domain</span>,
+            ou encore déployer happy<span class="fw-bold">Domain</span> grâce à la collection Ansible officielle.
           </li>
           <li class="mb-2">
             <a href="https://pypi.org/project/happydomain/" target="_blank">

content/use-happyDomain/freelance.en.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           All domain names<br>
           grouped by customer.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          No matter how many customers you follow, happy<span class="font-weight-bold">Domain</span> always gives you a clear overview.
+          No matter how many customers you follow, happy<span class="fw-bold">Domain</span> always gives you a clear overview.
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -34,20 +34,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Forget about the complexity of each hosting company.<br>
           Take advantage of our unified interface.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Don't be afraid of discovering a new host. happy<span class="font-weight-bold">Domain</span> manages over 25 hosts worldwide. Your customers are probably using them.
+          Don't be afraid of discovering a new host. happy<span class="fw-bold">Domain</span> manages over 25 hosts worldwide. Your customers are probably using them.
         </p>
       </div>
     </div>
@@ -58,13 +58,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Respond to all requests<br>
           with ease.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          A new service? An urgent fix? happy<span class="font-weight-bold">Domain</span> uses simple terminology to stay focused.
+          A new service? An urgent fix? happy<span class="fw-bold">Domain</span> uses simple terminology to stay focused.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -74,14 +74,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Share the management of the area with your client, his teams or your collaborators.
           <small class="text-muted">
             (coming soon)
@@ -89,7 +89,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whether it is permanent or in preparation for a particular event, happy<span class="font-weight-bold">Domain</span> offers you the possibility to collaborate on the editing of the same area.
+          Whether it is permanent or in preparation for a particular event, happy<span class="fw-bold">Domain</span> offers you the possibility to collaborate on the editing of the same area.
         </p>
         <p>
           Delegate to your client's teams all or only part of the area, it's up to you.

content/use-happyDomain/freelance.fr.html

@@ -18,13 +18,13 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Tous les domaines<br>
           regroupés par client.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Quel que soit le nombre de clients que vous suivez, happy<span class="font-weight-bold">Domain</span> vous <span class="text-stroke">donne un aperçu toujours clair</span>.
+          Quel que soit le nombre de clients que vous suivez, happy<span class="fw-bold">Domain</span> vous <span class="text-stroke">donne un aperçu toujours clair</span>.
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -34,20 +34,20 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Oubliez la complexité de chaque hébergeur.<br>
           Profitez de notre interface unifiée.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="font-weight-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde. Vos clients les utilisent sûrement.
+          N'ayez plus d'appréhension à découvrir un nouvel hébergeur. happy<span class="fw-bold">Domain</span> gère plus de 25 hébergeurs à travers le monde. Vos clients les utilisent sûrement.
         </p>
       </div>
     </div>
@@ -58,13 +58,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Répondez à toutes les demandes<br>
           en toute simplicité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="font-weight-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
+          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="fw-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur ses objectifs.
         </p>
       </div>
       <div class="order-1 col-md-7">
@@ -74,14 +74,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Partagez la gestion de la zone avec votre client, ses équipes ou vos collaborateurs.
           <small class="text-muted">
             (bientôt disponible)
@@ -89,7 +89,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Que ce soit de façon permanente ou en préparation d'un événement particulier, happy<span class="font-weight-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
+          Que ce soit de façon permanente ou en préparation d'un événement particulier, happy<span class="fw-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
         </p>
         <p>
           Déléguez aux équipes de votre client tout ou partie de la zone, c'est vous qui choisissez.

content/use-happyDomain/geek.en.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Discover a simple and clear interface.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whatever the host of your zones, happy<span class="font-weight-bold">Domain</span> displays them in a clear way to limit errors.
+          Whatever the host of your zones, happy<span class="fw-bold">Domain</span> displays them in a clear way to limit errors.
         </p>
         <p>
-          By installing happy<span class="font-weight-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration.
+          By installing happy<span class="fw-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration.
           <span class="text-muted">(coming soon)</span>
         </p>
       </div>
@@ -37,19 +37,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Self-hosting made easy.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> allows you with the same interface to manage your DNS zone with a third party provider, or to manage your own DNS servers.
+          happy<span class="fw-bold">Domain</span> allows you with the same interface to manage your DNS zone with a third party provider, or to manage your own DNS servers.
         </p>
         <p>
           Don't be afraid to edit a zone text file, we take care of it!
@@ -66,13 +66,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Meet all your needs<br>
           in all simplicity.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          A new service? An urgent fix? happy<span class="font-weight-bold">Domain</span> uses simple terminology to stay focused on the expected result.
+          A new service? An urgent fix? happy<span class="fw-bold">Domain</span> uses simple terminology to stay focused on the expected result.
         </p>
         <p>
           We are committed to providing the latest in DNS registration and services.
@@ -85,14 +85,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/service-caa.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Manage easily, even special zones.
           <small class="text-muted">
             (coming soon)
@@ -104,7 +104,7 @@ layout = "usage"
           Or a <a href="https://en.wikipedia.org/wiki/DNSBL">Real-time Blockhole List (DNSBL)</a> zone? Or a DNS <a href="https://www.dnsrpz.info/">Response Policy Zones</a> (DNS-RPZ)?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> understands them and allows you to manage them unequivocally.
+          happy<span class="fw-bold">Domain</span> understands them and allows you to manage them unequivocally.
         </p>
       </div>
     </div>

content/use-happyDomain/geek.fr.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Découvrez une interface simple et claire.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Quel que soit l'hébergeur de vos zones, happy<span class="font-weight-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
+          Quel que soit l'hébergeur de vos zones, happy<span class="fw-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
         </p>
         <p>
-          En installant happy<span class="font-weight-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration.
+          En installant happy<span class="fw-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration.
           <span class="text-muted">(bientôt disponible)</span>
         </p>
       </div>
@@ -37,19 +37,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domain-abstract.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Auto-hébergement facilité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          happy<span class="font-weight-bold">Domain</span> vous permet avec la même interface de gérer votre zone DNS auprès d'un fournisseur tiers, ou de gérer votre/vos propres serveurs DNS.
+          happy<span class="fw-bold">Domain</span> vous permet avec la même interface de gérer votre zone DNS auprès d'un fournisseur tiers, ou de gérer votre/vos propres serveurs DNS.
         </p>
         <p>
           N'ayez plus peur de mal éditer un fichier texte de zone, on s'en occupe&nbsp;!
@@ -66,13 +66,13 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Répondez à tous vos besoins<br>
           en toute simplicité.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="font-weight-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur le résultat attendu.
+          Un nouveau service&nbsp;? Une correction urgente&nbsp;? happy<span class="fw-bold">Domain</span> utilise une terminologie simple, pour rester focalisé sur le résultat attendu.
         </p>
         <p>
           Nous avons à cœur de mettre à disposition les dernières nouveautés en terme d'enregistrement DNS et de services.
@@ -85,14 +85,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/service-caa.webp" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Gérez simplement, même les zones spéciales.
           <small class="text-muted">
             (bientôt disponible)
@@ -103,7 +103,7 @@ layout = "usage"
           Vous recherchez une interface qui affiche d'une manière humaine les zones de <span class="font-italic">reverse</span> IPv4/IPv6&nbsp;? ou une zone <a href="https://fr.wikipedia.org/wiki/DNSBL"><span class="font-italic">Real-time Blockhole List</span> (DNSBL)</a>&nbsp;? Ou encore une zone de politique <a href="https://www.dnsrpz.info/">de filtrage des réponses DNS (DNS-RPZ)</a>&nbsp;?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
+          happy<span class="fw-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
         </p>
       </div>
     </div>

content/use-happyDomain/sysadmin.en.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Edit your zone files more efficiently.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whatever the host of your zones, happy<span class="font-weight-bold">Domain</span> displays them in a clear way to limit errors.
+          Whatever the host of your zones, happy<span class="fw-bold">Domain</span> displays them in a clear way to limit errors.
         </p>
         <p>
-          By installing happy<span class="font-weight-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration. <span class="text-muted">(coming soon)</span>
+          By installing happy<span class="fw-bold">Domain</span> next to your Bind or PowerDNS, enjoy the interface without changing your configuration. <span class="text-muted">(coming soon)</span>
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -36,19 +36,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Review and confirm the changes that will be applied">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           View your changes before applying them.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Before publishing your changes, happy<span class="font-weight-bold">Domain</span> shows you what changes will be made. A preview that will avoid many mistakes.
+          Before publishing your changes, happy<span class="fw-bold">Domain</span> shows you what changes will be made. A preview that will avoid many mistakes.
         </p>
         <p>
           You can even select which changes you want to release now and which ones should wait.
@@ -62,7 +62,7 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Share the zone management with your teams or collaborators.
           <small class="text-muted">
             (coming soon)
@@ -70,7 +70,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Whether it's permanent or in preparation for a particular event, happy<span class="font-weight-bold">Domain</span> gives you the ability to collaborate on editing the same area.
+          Whether it's permanent or in preparation for a particular event, happy<span class="fw-bold">Domain</span> gives you the ability to collaborate on editing the same area.
         </p>
         <p>
           Delegate to your teams all or only part of the area, it's up to you.
@@ -83,14 +83,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domains-list.png" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Manage simply, even the special zones.
           <small class="text-muted">
             (coming soon)
@@ -102,7 +102,7 @@ layout = "usage"
           Or a <a href="https://en.wikipedia.org/wiki/DNSBL">Real-time Blockhole List (DNSBL)</a> zone? Or a DNS <a href="https://www.dnsrpz.info/">Response Policy Zones</a> (DNS-RPZ)?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> understands them and allows you to manage them unequivocally.
+          happy<span class="fw-bold">Domain</span> understands them and allows you to manage them unequivocally.
         </p>
       </div>
     </div>

content/use-happyDomain/sysadmin.fr.html

@@ -18,15 +18,15 @@ layout = "usage"
   <div class="container mb-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Éditez plus efficacement vos fichiers de zone.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Quel que soit l'hébergeur de vos zones, happy<span class="font-weight-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
+          Quel que soit l'hébergeur de vos zones, happy<span class="fw-bold">Domain</span> les affiche de manière claire pour limiter les erreurs.
         </p>
         <p>
-          En installant happy<span class="font-weight-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration. <span class="text-muted">(bientôt disponible)</span>
+          En installant happy<span class="fw-bold">Domain</span> à côté de votre Bind ou PowerDNS, profitez de l'interface sans changer votre configuration. <span class="text-muted">(bientôt disponible)</span>
         </p>
       </div>
       <div class="order-1 col-md-7 py-2 align-self-center">
@@ -36,19 +36,19 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-green-50)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/zone-diff.webp" alt="Relisiez puis confirmer les modifications qui seront appliquées">
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Visualisez les modifications apportées avant de les appliquer.
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Avant de publier vos changements, happy<span class="font-weight-bold">Domain</span> vous montre quelles modifications seront faites. Une prévisualisation qui évitera bien des erreurs.
+          Avant de publier vos changements, happy<span class="fw-bold">Domain</span> vous montre quelles modifications seront faites. Une prévisualisation qui évitera bien des erreurs.
         </p>
         <p>
           Vous pouvez même sélectionner les changements que vous souhaitez diffuser maintenant et ceux qui doivent attendre.
@@ -62,7 +62,7 @@ layout = "usage"
   <div class="container my-5">
     <div class="row">
       <div class="order-0 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Partagez la gestion de la zone avec vos équipes ou vos collaborateurs.
           <small class="text-muted">
             (bientôt disponible)
@@ -70,7 +70,7 @@ layout = "usage"
         </h4>
         <hr class="bg-light mx-5">
         <p>
-          Que ce soit permanent ou en préparation d'un événement particulier, happy<span class="font-weight-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
+          Que ce soit permanent ou en préparation d'un événement particulier, happy<span class="fw-bold">Domain</span> vous offre la possibilité de collaborer à l'édition d'un même domaine.
         </p>
         <p>
           Déléguez à vos équipes tout ou partie de la zone, c'est vous qui choisissez.
@@ -83,14 +83,14 @@ layout = "usage"
   </div>
 </div>
 
-<div class="container-fluid py-5 bg-secondary text-light">
+<div class="container-fluid py-5" style="background: var(--hd-plum-100)">
   <div class="container my-5">
     <div class="row">
       <div class="order-1 order-md-0 col-md-7 align-self-center">
         <img class="rounded img-thumbnail" src="/img/screenshots/domains-list.png" alt="Liste des domaines, regroupés astucieusement par client">
       </div>
       <div class="order-0  order-md-1 col-md-5 align-self-center text-center">
-        <h4 class="font-weight-bold">
+        <h4 class="fw-bold">
           Gérez simplement, même les zones spéciales.
           <small class="text-muted">
             (bientôt disponible)
@@ -101,7 +101,7 @@ layout = "usage"
           Vous recherchez une interface qui affiche d'une manière humaine les zones de <span class="font-italic">reverse</span> IPv4/IPv6&nbsp;? ou une zone <a href="https://fr.wikipedia.org/wiki/DNSBL"><span class="font-italic">Real-time Blockhole List</span> (DNSBL)</a>&nbsp;? Ou encore une zone de politique <a href="https://www.dnsrpz.info/">de filtrage des réponses DNS (DNS-RPZ)</a>&nbsp;?
         </p>
         <p>
-          happy<span class="font-weight-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
+          happy<span class="fw-bold">Domain</span> les comprend et vous permet de les gérer sans équivoque.
         </p>
       </div>
     </div>

data/features.toml

@@ -8,12 +8,12 @@ id = "registrar"
     en = "Choose your provider"
 
   [features.title]
-  fr = "Gérer les zones hébergées chez des prestataires d'hébergement"
-  en = "Manage your zones hosted on hosting providers"
+  fr = "Gérer les zones de votre fournisseur de noms de domaine"
+  en = "Manage zones at your registrar"
 
   [features.content]
-  fr = "happyDomain peut regrouper les domaines que vous possédez dans différents bureaux d'enregistrement. Nous supportons aujourd'hui plus de 55 fournisseurs tels que OVH, Gandi, DigitalOcean, ..."
-  en = "happyDomain can group the domains you own in different registrars. We currently support 55+ providers like OVH, Gandi, DigitalOcean, ..."
+  fr = "Connectez OVH, Gandi, DigitalOcean, Cloudflare et plus de 50 autres. happyDomain lit, édite et synchronise les zones pour vous."
+  en = "Connect OVH, Gandi, DigitalOcean, Cloudflare and 50+ more. happyDomain reads, edits and synchronizes their zones for you."
 
   [features.link]
   link = "https://app.happydomain.org/providers/features"
@@ -32,16 +32,16 @@ id = "dynamicDNS"
   [features.img]
   src = "/img/screenshots/features/dyndns.png"
     [features.img.alt]
-    fr = "Une interface au dessus de votre serveur existant"
-    en = "An interface on top of your existing server"
+    fr = "Gérez votre propre serveur de noms"
+    en = "Drive your own name server"
 
   [features.title]
   fr = "Gérer les zones de vos serveurs BIND, Knot, PowerDNS, ..."
   en = "Manage your zones backed by BIND, Knot, PowerDNS, ..."
 
   [features.content]
-  fr = "happyDomain peut s'utiliser comme interface au dessus d'un serveur faisant autorité. Il utilise pour cela le Dynamic DNS (RFC 2136), implémenté dans de nombreux serveurs."
-  en = "happyDomain can be used as an interface above an authoritative name server. It uses the Dynamic DNS (RFC 2136), implemented in many server software."
+  fr = "Utilisez happyDomain comme interface conviviale devant BIND, Knot ou PowerDNS via le DNS dynamique (RFC 2136). Implémenté dans de nombreux serveurs faisant autorité."
+  en = "Use happyDomain as a friendly UI in front of BIND, Knot or PowerDNS via Dynamic DNS (RFC 2136). Implemented in many authoritative servers."
 
   [features.link]
   link = "https://help.happydomain.org/fr/deploy/"
@@ -59,12 +59,12 @@ id = "diff"
     en = "Sample diff"
 
   [features.title]
-  fr = "Visualiser clairement les changements"
-  en = "Clearly visualize changes"
+  fr = "Visualiser chaque changement"
+  en = "Visualize every change"
 
   [features.content]
-  fr = "Avant de publier vos modifications, happyDomain vous montre quels seront exactement les changements (ajouts, modifications, suppressions, ...) qui seront effectués sur la zone. C'est le bon moment pour se relire."
-  en = "Before publishing your changes, happyDomain shows you exactly what changes (additions, modifications, deletions, ...) will be made to your zone. This is a good time to reread."
+  fr = "Avant de publier, vérifiez précisément quels enregistrements seront ajoutés, modifiés ou supprimés. Vous pouvez relire attentivement les changements avant d'appuyer sur le bouton."
+  en = "Before publishing, see exactly which records will be added, modified or deleted. Read-through your zone before you press the button."
 
 
 [[features]]
@@ -77,8 +77,8 @@ id = "resolver"
     en = "DNS Resolver"
 
   [features.title]
-  fr = "Tester ou déboguer votre zone en ligne"
-  en = "Test or debug your zone online"
+  fr = "Tester et déboguer votre zone"
+  en = "Test & debug your zone"
 
   [features.content]
   fr = "happyDomain intégre un résolveur DNS simple d'utilisation, qui vous permet de vous connecter sans effort à une cinquantaine de résolveurs publics. Vous pouvez facilement voir la propagation de vos modifications."
@@ -90,29 +90,6 @@ id = "resolver"
   en = "I want to test this now!"
 
 
-[[features]]
-id = "rest"
-
-  [features.img]
-  src = "/img/screenshots/features/rest.png"
-    [features.img.alt]
-    fr = "API REST"
-    en = "REST API"
-
-  [features.title]
-  fr = "Utiliser happyDomain comme API REST"
-  en = "Use happyDomain as a API REST"
-
-  [features.content]
-  fr = "happyDomain expose une API REST que vous pouvez utiliser pour automatiser des tâches de création de sous-domaine à la volée, par exemple dans votre système de déploiement continu."
-  en = "happyDomain exposes a REST API that you can use to automate sub-domain creation tasks on the fly, for example in your continuous deployment system."
-
-  [features.link]
-  link = "https://app.happydomain.org/swagger/index.html"
-  fr = "Montrez-moi l'API !"
-  en = "Show me the API!"
-
-
 [[features]]
 id = "history"
 
@@ -124,8 +101,31 @@ id = "history"
 
   [features.title]
   fr = "Garder une trace des modifications"
-  en = "Keeping track of changes"
+  en = "Versioned, undoable"
 
   [features.content]
-  fr = "happyDomain ne se contente pas de vous montrer votre zone telle qu'elle est publiée. Chaque modification est enregistrée afin de garder un historique de vos changements. En cas de problème, revenez à une version précédente en 2 clics."
-  en = "happyDomain doesn't just show you your zone as it is published. Every modification is saved to keep a history of your changes. In case of problem, go back to a previous version in 2 clicks."
+  fr = "Chaque modification publiée est enregistrée. Revenez à n'importe quelle version précédente de votre zone en deux clics. Auditez qui a effectué quelles modifications."
+  en = "Every published change is saved. Roll back to any previous version of your zone in two clicks. Audit who did what."
+
+
+[[features]]
+id = "rest"
+
+  [features.img]
+  src = "/img/screenshots/features/rest.png"
+    [features.img.alt]
+    fr = "API REST"
+    en = "REST API"
+
+  [features.title]
+  fr = "API REST, scripter vos domaines"
+  en = "REST API, ready to script"
+
+  [features.content]
+  fr = "Automatisez la création de domaines à la volée : idéal pour le déploiement continu et la mise en place de locataires."
+  en = "Automate domain creation tasks on the fly: perfect for continuous deployment and tenant provisioning."
+
+  [features.link]
+  link = "https://app.happydomain.org/swagger/index.html"
+  fr = "Montrez-moi l'API !"
+  en = "Show me the API!"

i18n/en.yaml

@@ -1,15 +1,16 @@
 - id: slogan
   translation: |
-    <span class="font-weight-bolder" style="color: var(--bs-plum)">All</span> your domains. <span class="font-weight-bolder" style="color: var(--bs-plum)">One</span> interface.
+    <span class="font-weight-bolder" style="color: var(--bs-primary)">All</span> your domains. <span class="font-weight-bolder" style="color: var(--bs-primary)">One</span> interface.
 
 - id: lead
-  translation: "is a free web interface that brings all your domain names together in one simple space."
+  translation: |
+    brings every DNS zone you manage (across registrars, providers and self-hosted name servers) into one calm space, clearly organized by service.
 
 - id: tryit
-  translation: "Try it online now"
+  translation: "Try it online"
 
 - id: downloadit
-  translation: "Download now"
+  translation: "Self-host it"
 
 - id: learnhow
   translation: "Learn how"
@@ -44,12 +45,15 @@
 - id: press-kit
   translation: "Press Kit"
 
-- id: features-title
+- id: features-eyebrow
   translation: "Main features"
 
+- id: features-title
+  translation: "Everything DNS, calm and connected."
+
 - id: features-lead
   translation: |
-    Find out how happyDomain can simplify your domain name management.
+    happyDomain works as a smart layer above your existing infrastructure: connecting to registrars, hosting providers and authoritative servers so you can manage them all from one place.
 
 - id: features-grid-title
   translation: What can happyDomain do for you today?
@@ -119,7 +123,9 @@
 
     We publish a [Docker image](https://hub.docker.com/r/happydomain/happydomain/), feel free to test it thanks to:
 
-            docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
+    docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
 
     Precompiled binaries are also availables on <https://get.happydomain.org/>.
 
@@ -249,6 +255,13 @@
 - id: cta-account-button
   translation: "Create my online space"
 
+- id: beta-alert-title
+  translation: "Online version closed, beta access only"
+- id: beta-alert-text
+  translation: "Public registrations are paused. Join the beta program to get early access."
+- id: beta-alert-button
+  translation: "Join the beta"
+
 - id: cta-newsletter-title
   translation: "Stay a step ahead!"
 - id: cta-newsletter-text

i18n/fr.yaml

@@ -1,15 +1,16 @@
 - id: slogan
   translation: |
-    <span class="font-weight-bolder" style="color: var(--bs-plum)">Tous</span> vos domaines. <span class="font-weight-bolder" style="color: var(--bs-plum)">Une</span> interface.
+    <span class="font-weight-bolder" style="color: var(--bs-primary)">Tous</span> vos domaines. <span class="font-weight-bolder" style="color: var(--bs-primary)">Une</span> interface.
 
 - id: lead
-  translation: "est une interface web libre qui rassemble tous vos noms de domaine dans un endroit simple."
+  translation: |
+    rassemble toutes les zones DNS que vous gérez (qu'elles proviennent de bureaux d'enregistrement, de prestataires de cloud ou de serveurs de noms auto-hébergés) au sein d'un espace unique et clair, organisé clairement par service.
 
 - id: tryit
   translation: "Essayer maintenant"
 
 - id: downloadit
-  translation: "Télécharger"
+  translation: "Hébergez-le"
 
 - id: learnhow
   translation: "Découvrez comment"
@@ -44,9 +45,12 @@
 - id: press-kit
   translation: "Dossier de presse"
 
-- id: features-title
+- id: features-eyebrow
   translation: "Principales fonctionnalités"
 
+- id: features-title
+  translation: "Tout le DNS, sereinement connecté."
+
 - id: features-lead
   translation: "Découvrez comment happyDomain peut faciliter la gestion de vos noms de domaine."
 
@@ -118,7 +122,9 @@
 
     Vous préférez une [image Docker](https://hub.docker.com/r/happydomain/happydomain/) ? Essayez-la
 
-            docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
+    docker run -e HAPPYDOMAIN_NO_AUTH=1 -p 8081:8081 happydomain/happydomain
+    ```
 
     Les binaires précompilés sont disponibles sur <https://get.happydomain.org/>.
 
@@ -248,6 +254,13 @@
 - id: cta-account-button
   translation: "Créer mon espace en ligne"
 
+- id: beta-alert-title
+  translation: "Version en ligne fermée, accès bêta uniquement"
+- id: beta-alert-text
+  translation: "Les inscriptions publiques sont suspendues. Rejoignez le programme bêta pour un accès anticipé."
+- id: beta-alert-button
+  translation: "Rejoindre la bêta"
+
 - id: cta-newsletter-title
   translation: "Gardez une longueur d'avance !"
 - id: cta-newsletter-text

layouts/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}" style="background-color: #3A0B4D">
+<html lang="{{ .Site.LanguageCode }}" style="background-color: var(--bs-dark)">
 
   {{ partial "head.html" . }}
 

layouts/partials/carousel.html

@@ -1,8 +1,12 @@
 {{ if isset .Site.Params "carousel" }} {{ if gt (len .Site.Params.carousel) 0 }}
 <section
     id="screenshots"
-    class="carousel text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
-    style="gap: 1em 1em; overflow-x: scroll"
+    class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
+    style="
+        background-color: var(--hd-plum-600);
+        gap: 1em 1em;
+        overflow-x: scroll;
+    "
 >
     {{ range sort .Site.Params.carousel "weight" }}
     <figure class="my-5 me-5 text-center" style="min-width: 65vw">

layouts/partials/cta-newsletter.html

@@ -39,10 +39,11 @@
                             placeholder="j.postel@isi.edu"
                             class="form-control my-3"
                         />
-                        <div
-                            class="my-2 mx-auto h-captcha"
-                            data-sitekey="12a1e811-7f34-44ca-9e7c-fb1e9ade6b00"
-                        ></div>
+                        <altcha-widget
+                            floating
+                            class="my-2 mx-auto"
+                            challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"
+                        ></altcha-widget>
                         <button
                             type="submit"
                             class="btn btn-lg btn-primary py-2"

layouts/partials/discover.html

@@ -1,4 +1,4 @@
-<section id="discover" class="py-5" style="background: linear-gradient(to right, var(--secondary-ultralight) 0%, white 100%)">
+<section id="discover" class="py-5" style="background: var(--hd-green-50)">
     <div class="container">
         <div class="section-title text-center mb-5">
             <h2 class="mb-3 display-4">

layouts/partials/features.html

@@ -1,48 +1,11 @@
-<section id="features" class="bg-light" style="scroll-margin-top: 2em">
-    <div class="container py-4">
-        <div class="section-title text-center mt-5 mb-5">
-            <h2 class="mb-3 display-4">{{ i18n "features-title" }}</h2>
-            <div class="row">
-                <p
-                    class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 text-muted"
-                    style="font-size: 1.15rem"
-                >
-                    {{ i18n "features-lead" }}
-                </p>
-            </div>
-        </div>
-
-        <div class="alert alert-warning my-5 d-flex">
-            <div class="display-2">🏗️</div>
-            <div class="ms-2 flex-fill">
-                <p class="lead">{{ i18n "features-wip-lead" }}</p>
-                <p>
-                    {{ i18n "features-wip-p1-start" }}
-                    <strong
-                        >{{ i18n "features-wip-p1-strong" }}
-                        <a
-                            href="https://github.com/happyDomain/happydomain/"
-                            target="_blank"
-                            rel="noopener"
-                            data-umami-event="goto-issue"
-                            >{{ i18n "features-wip-p1-link" }}</a
-                        >.</strong
-                    >
-                    {{ i18n "features-wip-p1-end" }}
-                </p>
-                <p>
-                    <a
-                        href="https://feedback.happydomain.org"
-                        target="_blank"
-                        rel="noopener"
-                        data-umami-event="goto-feedback"
-                        >{{ i18n "features-wip-p2-feedback" }}</a
-                    >
-                    {{ i18n "features-wip-p2-start" }}
-                    <u>{{ i18n "features-wip-p2-emph" }}</u>{{ i18n
-                    "features-wip-p2-end" }}
-                </p>
-            </div>
+<section id="features" class="section" style="scroll-margin-top: 2em">
+    <div class="container">
+        <div class="section-head">
+            <span class="eyebrow"
+                ><span class="dot"></span>{{ i18n "features-eyebrow" }}</span
+            >
+            <h2 class="h2">{{ i18n "features-title" }}</h2>
+            <p class="lede">{{ i18n "features-lead" }}</p>
         </div>
 
         <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
@@ -86,5 +49,38 @@
             </div>
             {{ end }} {{ end }}
         </div>
+
+        <div class="alert alert-warning mt-5 d-flex">
+            <div class="display-2">🏗️</div>
+            <div class="ms-2 flex-fill">
+                <p class="lead">{{ i18n "features-wip-lead" }}</p>
+                <p>
+                    {{ i18n "features-wip-p1-start" }}
+                    <strong
+                        >{{ i18n "features-wip-p1-strong" }}
+                        <a
+                            href="https://github.com/happyDomain/happydomain/"
+                            target="_blank"
+                            rel="noopener"
+                            data-umami-event="goto-issue"
+                            >{{ i18n "features-wip-p1-link" }}</a
+                        >.</strong
+                    >
+                    {{ i18n "features-wip-p1-end" }}
+                </p>
+                <p>
+                    <a
+                        href="https://feedback.happydomain.org"
+                        target="_blank"
+                        rel="noopener"
+                        data-umami-event="goto-feedback"
+                        >{{ i18n "features-wip-p2-feedback" }}</a
+                    >
+                    {{ i18n "features-wip-p2-start" }}
+                    <u>{{ i18n "features-wip-p2-emph" }}</u>{{ i18n
+                    "features-wip-p2-end" }}
+                </p>
+            </div>
+        </div>
     </div>
 </section>

layouts/partials/jumbo.html

@@ -1,83 +1,189 @@
-<section
-    class="py-5 mt-n1 mb-0"
-    style="
-        background: linear-gradient(
-            135deg,
-            var(--primary-ultralight) 0%,
-            white 100%
-        );
-    "
->
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-md-3 d-flex flex-column mb-5 align-items-center">
-                <img
-                    src="/img/screenshots/happydomain-rounded.webp"
-                    alt="happyDomain logo"
-                    style="width: 100%; max-width: 40vw"
-                />
-            </div>
-            <div class="col">
-                <div class="row">
-                    <div
-                        class="col col-sm-8 offset-sm-2 col-md-10 offset-md-1 col-xl-8 offset-xl-2"
-                    >
-                        <h2
-                            class="display-4 text-center text-dark fw-bold"
-                            style="text-wrap: balance"
-                        >
-                            {{ i18n "slogan" | safeHTML }}
-                        </h2>
-                    </div>
-                </div>
-                <p class="mt-5 lead text-center text-muted">
-                    happy<strong>Domain</strong>
-                    {{ i18n "lead" | markdownify }}
+<style>
+.jumbo-hero {
+    padding: 8rem 0 5rem;
+    background: linear-gradient(135deg, var(--hd-accent-subtle, #f0fdf4) 0%, var(--hd-bg-canvas, white) 60%);
+}
+.hero-eyebrow {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .75rem;
+    margin-bottom: 1.5rem;
+    font-size: .875rem;
+    color: var(--hd-fg-3, #6b7280);
+}
+.hero-eyebrow .badge-os {
+    display: inline-flex;
+    align-items: center;
+    gap: .35rem;
+    padding: .25em .75em;
+    background: var(--hd-accent-subtle, #f0fdf4);
+    border: 1px solid var(--hd-accent, #22c55e);
+    border-radius: 2em;
+    color: var(--hd-accent, #22c55e);
+    font-weight: 600;
+    font-size: .8rem;
+}
+.hero-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 1.5rem;
+    font-size: .875rem;
+    color: var(--hd-fg-3, #6b7280);
+}
+.hero-meta .check { color: var(--hd-accent, #22c55e); margin-right: .25rem; }
+/* Browser mockup */
+.hero-stack { position: relative; }
+.hero-stack .browser:last-child {
+    position: absolute;
+    bottom: 0; right: 0;
+    width: 86%;
+    z-index: 0;
+    opacity: .45;
+    pointer-events: none;
+}
+.hero-stack .browser:first-child { position: relative; z-index: 1; }
+.browser {
+    background: var(--hd-bg-canvas, #fff);
+    border-radius: 10px;
+    box-shadow: 0 16px 48px rgba(0,0,0,.12);
+    overflow: hidden;
+    border: 1px solid var(--hd-border, #e5e7eb);
+}
+.browser-bar {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .55rem 1rem;
+    background: var(--hd-bg-subtle, #f9fafb);
+    border-bottom: 1px solid var(--hd-border, #e5e7eb);
+}
+.browser-dots { display: flex; gap: 5px; }
+.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--hd-border, #e5e7eb); }
+.browser-url {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: .01rem;
+    background: var(--hd-bg-canvas, #fff);
+    border-radius: 4px;
+    padding: .22rem .6rem;
+    font-size: .75rem;
+    color: var(--hd-fg-3, #6b7280);
+}
+.browser-url .lock { color: var(--hd-accent, #22c55e); font-size: .7rem; }
+</style>
+
+<section class="jumbo-hero">
+    <div class="container">
+        <div class="row align-items-center g-5">
+
+            <!-- Copy column -->
+            <div class="col-lg-5">
+                <a class="hero-eyebrow" href="https://git.happydomain.org/" target="_blank">
+                    <span class="badge-os"><i class="bi bi-git"></i> Open source</span>
+                </a>
+
+                <h1 class="display-4 fw-bold mb-5" style="text-wrap: balance">
+                    {{ i18n "slogan" | safeHTML }}
+                </h1>
+
+                <p class="lead mb-5 pb-2">
+                    happy<strong>Domain</strong> {{ i18n "lead" | markdownify }}
                 </p>
-                <div class="mt-5 py-2 d-none d-md-flex justify-content-center">
+
+                <div class="d-flex flex-wrap gap-3">
                     <a
-                        class="btn btn-lg btn-primary px-4 me-3"
+                        class="btn btn-lg btn-primary px-4"
                         data-umami-event="jumbo-tryit"
                         href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
-                        >{{ i18n "tryit" }} &#187;</a
                     >
+                        {{ i18n "tryit" }} <i class="bi bi-arrow-right"></i>
+                    </a>
                     <a
-                        class="btn btn-lg btn-outline-secondary px-4 ms-3"
+                        class="btn btn-lg btn-outline-dark px-4"
                         data-umami-event="jumbo-downloads"
                         href="#downloads"
-                        >{{ i18n "downloadit" }}</a
-                    >
-                </div>
-                <div
-                    class="container mt-5 py-2 d-flex d-md-none flex-column justify-content-center"
-                >
-                    <a
-                        class="btn btn-lg btn-primary px-4 mb-3"
-                        data-umami-event="jumbo-tryit"
-                        href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
-                        style="border-radius: 2em"
-                        >{{ i18n "tryit" }} &#187;</a
-                    >
-                    <a
-                        class="btn btn-lg btn-outline-secondary px-4"
-                        data-umami-event="jumbo-downloads"
-                        href="#downloads"
-                        style="border-radius: 2em"
-                        >{{ i18n "downloadit" }}</a
                     >
+                        <i class="bi bi-box-seam"></i> {{ i18n "downloadit" }}
+                    </a>
                 </div>
 
-                <!--div class="mt-5 card bg-secondary text-light flex-row align-items-center" style="border-radius: .3rem">
-          <div class="card-body">
-            <h3>{{ i18n "conf-fosdem24-title" }}</h3>
-            <p class="card-text">
-              {{ i18n "conf-fosdem24-body-1" }}
-              <a href="{{ i18n "conf-fosdem24-href" }}" target="_blank" rel="noopener"><em>{{ i18n "conf-fosdem24-link" }}</em></a>
-              {{ i18n "conf-fosdem24-body-2" }}
-            </p>
-          </div>
-          <img src="/img/assets/FOSDEM24_logo.png" alt="FOSDEM 2024" style="height: 10em">
-        </div-->
+                <div class="hero-meta">
+                    <span><i class="bi bi-check2 check"></i><strong>No account</strong> needed for the demo</span>
+                    <span><i class="bi bi-check2 check"></i><strong>~30s</strong> to first zone</span>
+                    <span><i class="bi bi-check2 check"></i><strong>55+</strong> providers</span>
+                </div>
+            </div>
+
+            <!-- Visual column -->
+            <div class="col-lg-7 d-none d-lg-block">
+                <div class="hero-stack">
+                    <!-- Front browser frame: zone editor -->
+                    <div class="browser">
+                        <div class="browser-bar">
+                            <div class="browser-dots"><span></span><span></span><span></span></div>
+                            <div class="browser-url">
+                                <i class="bi bi-lock-fill lock me-1"></i>
+                                <span>app.</span><strong>happydomain.org</strong><span>/zone/happydomain.org</span>
+                            </div>
+                        </div>
+                        <img
+                            src="/img/screenshots/domain-abstract.webp"
+                            alt="happyDomain zone editor"
+                            style="width:100%;display:block"
+                        />
+                    </div>
+                    <!-- Back browser frame, peeking -->
+                    <div class="browser" aria-hidden="true">
+                        <div class="browser-bar">
+                            <div class="browser-dots"><span></span><span></span><span></span></div>
+                            <div class="browser-url"><i class="bi bi-lock-fill lock"></i><span>try.</span><strong>happydomain.org</strong></div>
+                        </div>
+                        <div style="padding:14px 16px;height:120px;background:var(--hd-bg-subtle,#f9fafb)"></div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="alert alert-warning mt-5 mb-0" role="alert">
+            <div class="row align-items-center g-3">
+                <div class="col-lg-7">
+                    <h5 class="alert-heading mb-1">
+                        <i class="bi bi-info-circle"></i>
+                        {{ i18n "beta-alert-title" }}
+                    </h5>
+                    <p class="mb-0">{{ i18n "beta-alert-text" }}</p>
+                </div>
+                <form
+                    class="col-lg-5 d-flex flex-column flex-sm-row gap-2"
+                    method="post"
+                    action="https://lists.happydomain.org/subscription/form"
+                >
+                    <input type="hidden" name="nonce" />
+                    <input type="hidden" name="l" value="ef8b61ad-fa7d-4f1a-a20f-bb34ac37a3bf" />
+                    <input type="hidden" name="lang" value="{{ site.LanguageCode }}" />
+                    <input
+                        type="email"
+                        name="email"
+                        required
+                        placeholder="j.postel@isi.edu"
+                        class="form-control"
+                    />
+                    <altcha-widget
+                        floating
+                        challengeurl="https://lists.happydomain.org/api/public/captcha/altcha"
+                    ></altcha-widget>
+                    <button
+                        type="submit"
+                        class="btn btn-primary text-nowrap"
+                        data-umami-event="beta-join"
+                    >
+                        {{ i18n "beta-alert-button" }}
+                    </button>
+                </form>
             </div>
         </div>
     </div>

layouts/partials/nav.html

@@ -1,7 +1,4 @@
-<nav
-    class="navbar navbar-expand-md sticky-top navbar-light bg-light"
-    id="mainnav"
->
+<nav class="navbar navbar-expand-md fixed-top" id="mainnav">
     <div class="container">
         <a
             class="h1 navbar-brand d-flex align-items-top gap-2 mb-0"
@@ -55,7 +52,30 @@
                 </li>
                 {{ end }}
             </ul>
-            <div class="d-flex">
+            <div class="d-flex align-items-center">
+                <div class="nav-item dropdown">
+                    <a
+                        class="btn btn-sm btn-outline-plum dropdown-toggle"
+                        href="#"
+                        id="navbarLangDropdown"
+                        role="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                    >
+                        <i class="bi bi-translate"></i> {{ .Language.Lang |
+                        upper }}
+                    </a>
+                    <div
+                        class="dropdown-menu dropdown-menu-end"
+                        aria-labelledby="navbarLangDropdown"
+                    >
+                        {{ range .Site.Home.AllTranslations }}
+                        <a href="{{ .Permalink }}" class="dropdown-item">
+                            {{ .Language }}
+                        </a>
+                        {{ end }}
+                    </div>
+                </div>
                 <div class="nav-item nav-ext-links">
                     {{ if .Site.Params.others_links }} {{ range
                     .Site.Params.others_links }}
@@ -65,33 +85,12 @@
                         class="nav-icon-link {{ .class }}"
                         data-umami-event="nav-{{ .id }}"
                     >
+                        {{ if .icon }}
                         <i class="bi {{ .icon }}"></i>
-                        {{ .text }}
+                        {{ end }} {{ .text }}
                     </a>
                     {{ end }} {{ end }}
                 </div>
-                <div class="nav-item dropdown">
-                    <a
-                        class="btn btn-outline-secondary dropdown-toggle"
-                        href="#"
-                        id="navbarLangDropdown"
-                        role="button"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                    >
-                        <i class="bi bi-globe"></i> {{ .Language.Lang | upper }}
-                    </a>
-                    <div
-                        class="dropdown-menu dropdown-menu-end"
-                        aria-labelledby="navbarLangDropdown"
-                    >
-                        {{ range .Site.Home.AllTranslations }}
-                        <a href="{{ .Permalink }}" class="dropdown-item"
-                            >{{ .Language.LanguageName }}</a
-                        >
-                        {{ end }}
-                    </div>
-                </div>
             </div>
         </div>
     </div>

layouts/partials/scripts.html

@@ -1,5 +1,5 @@
 <script src="/js/bootstrap.bundle.min.js"></script>
-<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+<script src="https://lists.happydomain.org/public/static/altcha.umd.js" async defer></script>
 <script>
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
         document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');

layouts/partials/usage_footer.html

@@ -16,7 +16,7 @@
         <a class="btn btn-primary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-tryit" data-umami-event-lang="{{ .Page.Language.Lang }}" href="{{ .Site.Params.tryit }}">
           {{ i18n "tryit" }} &#187;
         </a>
-        <a class="btn btn-outline-secondary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
+        <a class="btn btn-outline-dark mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
           {{ i18n "downloadit" }} &#187;
         </a>
       </p>
@@ -56,7 +56,7 @@
   </div>
 </div>
 
-<div class="container-fluid bg-secondary text-light text-center py-5">
+<div class="container-fluid text-center py-5" style="background: var(--hd-plum-100)">
   <div class="container my-4">
     <div class="row">
       <div class="order-0 col-md-5 offset-md-1 align-self-center text-center">
@@ -70,7 +70,7 @@
         <p>
           {{ i18n "footer-us-text-1" }}<span class="text-dark text-hilight px-1">{{ i18n "footer-us-text-hilight" }}</span>{{ i18n "footer-us-text-2" }}
         </p>
-        <a href="{{ i18n "footer-us-button-link" }}" class="btn btn-outline-light" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
+        <a href="{{ i18n "footer-us-button-link" }}" class="btn btn-outline-dark" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
           {{ i18n "footer-us-button" }}
         </a>
       </div>

static/css/custom.css

@@ -1,21 +1,19 @@
 nav.navbar {
-    background: var(--hd-bg-subtle);
+    background: var(--hd-bg-canvas);
     box-shadow: 0 0px 3px 0 var(--hd-accent);
     border-bottom: 1px solid var(--hd-accent);
     z-index: 1024;
     transition: background 1s linear;
 }
 nav.navbar.beginscroll {
-    background: linear-gradient(
-        90deg,
-        var(--hd-accent-subtle) 0%,
-        white 150%
-    );
+    background:
+        linear-gradient(90deg, var(--hd-accent-subtle) 0%, white 100%),
+        var(--hd-accent-subtle);
     box-shadow: none;
     border-bottom: none;
 }
 nav.navbar.scrolled {
-    background: var(--hd-bg-subtle);
+    background: var(--hd-bg-canvas);
     box-shadow: 0 0px 3px 0 var(--hd-accent);
     border-bottom: 1px solid var(--hd-accent);
 }
@@ -68,10 +66,6 @@ a.card:hover {
     height: 60px;
 }
 
-.carousel {
-    background-color: var(--hd-plum-700);
-}
-
 .text-hilight {
     background-color: yellow;
 }
@@ -97,23 +91,6 @@ img {
     max-width: 100%;
 }
 
-#features .card {
-    background-color: var(--hd-bg-canvas);
-    border-radius: 10px;
-    padding-top: 3px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    transition: transform 0.3s;
-    border-top: 4px solid var(--hd-accent);
-}
-
-#features .col:nth-child(even) .card {
-    border-top: 4px solid var(--hd-brand-dark);
-}
-
-#features .card:hover {
-    transform: translateY(-10px);
-}
-
 #discover .steps {
     display: flex;
     justify-content: space-between;
@@ -267,7 +244,10 @@ footer {
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     font-size: 0.9rem;
-    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
+    transition:
+        color 0.2s,
+        border-color 0.2s,
+        background-color 0.2s;
 }
 
 .footer-social a:hover {
@@ -344,3 +324,244 @@ footer {
         border-right: 1px solid var(--hd-plum-400);
     }
 }
+
+/* ── Big idea section ── */
+.section {
+    padding: 96px 0;
+}
+
+.section--paper {
+    background: var(--hd-bg-subtle);
+    border-top: 1px solid var(--hd-border-1);
+    border-bottom: 1px solid var(--hd-border-1);
+}
+
+.section-head {
+    margin-bottom: 56px;
+}
+
+.section-head .eyebrow {
+    display: flex;
+    margin-bottom: 14px;
+}
+
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--hd-fg-3);
+}
+
+.eyebrow .dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--hd-accent);
+    flex-shrink: 0;
+}
+
+.h2 {
+    font-size: clamp(1.5rem, 4vw, 2.25rem);
+    font-weight: 700;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    color: var(--hd-fg-1);
+    margin: 0;
+}
+
+.section-head .h2 {
+    max-width: 720px;
+}
+
+.cta-content h2 {
+    color: var(--bs-light);
+}
+
+.lede {
+    font-size: 1.0625rem;
+    line-height: 1.65;
+    color: var(--hd-fg-2);
+    margin-top: 14px;
+    max-width: 640px;
+}
+
+.idea-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    border: 1px solid var(--hd-border-1);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--hd-bg-canvas);
+}
+
+.idea-col {
+    padding: 28px 28px 24px;
+}
+
+.idea-col + .idea-col {
+    border-left: 1px solid var(--hd-border-1);
+}
+
+.idea-tag {
+    font-family: var(--hd-font-mono, monospace);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--hd-fg-4);
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.idea-tag .num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    background: var(--hd-bg-subtle);
+    color: var(--hd-fg-3);
+    font-size: 9px;
+}
+
+.idea-col h3 {
+    font-weight: 700;
+    font-size: 1.25rem;
+    color: var(--hd-fg-1);
+    letter-spacing: -0.015em;
+    margin: 0 0 18px;
+}
+
+.idea-col h3 .strike {
+    text-decoration: line-through;
+    color: var(--hd-fg-4);
+    font-weight: 600;
+}
+
+.zone-pre {
+    font-family: var(--hd-font-mono, monospace);
+    font-size: 11.5px;
+    line-height: 1.7;
+    color: var(--hd-fg-3);
+    background: var(--hd-bg-subtle);
+    border: 1px solid var(--hd-border-1);
+    border-radius: 8px;
+    padding: 14px 16px;
+    margin: 0;
+    white-space: pre;
+    overflow: auto;
+}
+
+.zone-pre .k {
+    color: var(--hd-fg-1);
+    font-weight: 500;
+}
+.zone-pre .v {
+    color: var(--hd-fg-2);
+}
+.zone-pre .c {
+    color: var(--hd-fg-4);
+}
+.zone-pre .a {
+    color: var(--hd-accent);
+}
+
+.svc {
+    border: 1px solid var(--hd-border-1);
+    border-radius: 8px;
+    margin-bottom: 6px;
+    background: var(--hd-bg-canvas);
+    overflow: hidden;
+}
+
+.svc-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 9px 12px;
+}
+
+.svc-row + .svc-row {
+    border-top: 1px solid var(--hd-bg-subtle);
+}
+
+.svc-l {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+}
+
+.svc-ico {
+    width: 26px;
+    height: 26px;
+    border-radius: 6px;
+    background: var(--hd-accent-subtle);
+    border: 1px solid var(--hd-accent-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--hd-accent);
+    font-size: 13px;
+    flex-shrink: 0;
+}
+
+[data-bs-theme="dark"] .svc-ico {
+    background: var(--hd-accent-muted);
+}
+
+.svc-name {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--hd-fg-1);
+}
+
+.svc-desc {
+    font-size: 10.5px;
+    color: var(--hd-fg-3);
+    margin-top: 1px;
+}
+
+.svc-r {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.svc-cnt {
+    font-family: var(--hd-font-mono, monospace);
+    font-size: 10px;
+    color: var(--hd-fg-4);
+    background: var(--hd-bg-subtle);
+    padding: 2px 6px;
+    border-radius: 9999px;
+}
+
+.svc-ok {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--hd-accent);
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+@media (max-width: 767px) {
+    .idea-grid {
+        grid-template-columns: 1fr;
+    }
+    .idea-col + .idea-col {
+        border-left: none;
+        border-top: 1px solid var(--hd-border-1);
+    }
+    .section {
+        padding: 64px 0;
+    }
+}