From db5f8d74882cd5744b9368476dc2bd2aa2f891a7 Mon Sep 17 00:00:00 2001 From: Pierre-Olivier Mercier Date: Sun, 17 May 2026 21:46:29 +0800 Subject: [PATCH] WIP new home page design --- layouts/index.html | 6 +- layouts/partials/big-idea.html | 72 ++++++++++++++++++++++++ layouts/partials/work-with.html | 18 ++++++ static/css/custom.css | 98 +++++++++++++++++++++++++++++++++ 4 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 layouts/partials/big-idea.html create mode 100644 layouts/partials/work-with.html diff --git a/layouts/index.html b/layouts/index.html index 140e8b0..670dcc9 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -13,10 +13,14 @@ {{ partial "jumbo.html" . }} - {{ partial "carousel.html" . }} + {{ partial "work-with.html" . }} + + {{ partial "big-idea.html" . }} {{ partial "features.html" . }} + {{ partial "carousel.html" . }} + {{ partial "discover.html" . }} {{/* partial "testimonials.html" . */}} diff --git a/layouts/partials/big-idea.html b/layouts/partials/big-idea.html new file mode 100644 index 0000000..479847b --- /dev/null +++ b/layouts/partials/big-idea.html @@ -0,0 +1,72 @@ + +
+
+
+ The big idea +

Stop reading zone files.
Start managing services.

+

DNS records are an implementation detail. happyDomain groups them by what they actually do — your email, your website, your delegation — so you can edit with intent instead of decoding RFCs.

+
+ +
+
+
AWithout happyDomain
+

happydomain.org · zone file

+
; Zone: happydomain.org.
+; TTL = 3600
+
+@      IN SOA   ns1 admin 2024010101 3600 900 604800 300
+@      IN NS    ns1.happydomain.org.
+@      IN NS    ns2.happydomain.org.
+@      IN A     93.184.216.34
+@      IN AAAA  2606:2800:220:1:248:1893:25c8:1946
+@      IN MX    10 mail.happydomain.org.
+@      IN TXT   "v=spf1 include:_spf.eu ~all"
+_dmarc IN TXT   "v=DMARC1; p=none; rua=…"
+mail   IN A     93.184.216.40
+www    IN CNAME @
+@      IN CAA   0 issue "letsencrypt.org"
+
+
+
BWith happyDomain
+

happydomain.org · services

+
+
+
+
+
Website
A, AAAA on @ · CNAME on www
+
+
3 OK
+
+
+
+
+
+
+
Email
MX, SPF and DMARC policy
+
+
3 OK
+
+
+
+
+
+
+
Delegation
2 nameservers
+
+
2 OK
+
+
+
+
+
+
+
TLS / Security
CAA · Let's Encrypt only
+
+
1 OK
+
+
+

Same zone. Edit by intent, not by record type.

+
+
+
+
diff --git a/layouts/partials/work-with.html b/layouts/partials/work-with.html new file mode 100644 index 0000000..86ef4c0 --- /dev/null +++ b/layouts/partials/work-with.html @@ -0,0 +1,18 @@ + +
+
+
Works with
+
+ OVH + Gandi + DigitalOcean + Cloudflare + Hetzner + Namecheap + BIND + Knot DNS + PowerDNS +
+ + 46 more → +
+
diff --git a/static/css/custom.css b/static/css/custom.css index d05865e..4dc5384 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -316,6 +316,104 @@ footer { } } +/* ── Trust strip ── */ +.trust { + padding: 20px 0; + border-top: 1px solid var(--bs-border-color); + border-bottom: 1px solid var(--bs-border-color); + background: var(--hd-bg-canvas); +} + +.trust-grid { + display: flex; + align-items: center; + gap: 24px; + flex-wrap: wrap; +} + +.trust-tag { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--hd-accent); + white-space: nowrap; +} + +.trust-tag .dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--hd-accent); + animation: pulse-dot 2s ease-in-out infinite; +} + +@keyframes pulse-dot { + 0%, + 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.5; + transform: scale(0.75); + } +} + +.trust-list { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; + flex: 1; +} + +.trust-list span { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 12px; + border-radius: 20px; + border: 1px solid color-mix(in srgb, currentColor 20%, transparent); + font-size: 0.85rem; + font-weight: 500; + color: var(--hd-fg-3); + background: transparent; + transition: + border-color 0.2s, + color 0.2s, + background 0.2s; +} + +.trust-list span:hover { + border-color: var(--hd-accent); + color: var(--hd-accent); + background: color-mix(in srgb, var(--hd-accent) 8%, transparent); +} + +.trust-list span i { + font-size: 0.9em; + opacity: 0.7; +} + +.trust-more { + font-size: 0.8rem; + font-weight: 500; + color: var(--hd-accent); + white-space: nowrap; + text-decoration: none; + cursor: pointer; + transition: opacity 0.2s; +} + +.trust-more:hover { + opacity: 0.7; +} + @media (min-width: 768px) { #community > div > div { width: 50% !important;