happyDomain/website
2
0
Fork 0
Code Issues Pull requests Releases Activity

Rework jumbo

Browse source
This commit is contained in:
nemunaire 2026-05-17 19:19:22 +08:00
commit f63128a68f
3 changed files with 145 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

9
i18n/en.yaml
View file

@ -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"

7
i18n/fr.yaml
View file

@ -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"

206
layouts/partials/jumbo.html
View file

@ -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>