From f63128a68f7c4ee84588ddc9d21afd37cc69fa76 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sun, 17 May 2026 19:19:22 +0800
Subject: [PATCH] Rework jumbo

---
 i18n/en.yaml                |   9 +-
 i18n/fr.yaml                |   7 +-
 layouts/partials/jumbo.html | 206 ++++++++++++++++++++++++------------
 3 files changed, 146 insertions(+), 76 deletions(-)

diff --git a/i18n/en.yaml b/i18n/en.yaml
index 32ca153..5031a24 100644
--- a/i18n/en.yaml
+++ b/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"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
index e25946b..f9ad14d 100644
--- a/i18n/fr.yaml
+++ b/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"
diff --git a/layouts/partials/jumbo.html b/layouts/partials/jumbo.html
index c557c48..2398ebf 100644
--- a/layouts/partials/jumbo.html
+++ b/layouts/partials/jumbo.html
@@ -1,84 +1,152 @@
-<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: 5rem 0 4rem;
+    margin-top: -1px;
+    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; padding: 0 20px 20px 0; }
+.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>
 </section>