From b3830ab7c49a4be61b95c82a09abcad8c42f7dcd Mon Sep 17 00:00:00 2001 From: Pierre-Olivier Mercier Date: Fri, 12 Jun 2026 13:24:10 +0900 Subject: [PATCH] Redesign discover section and add personas grid Rework "How it works" into a flat three-step grid with health-check messaging and a row of reassurance promises. Add a new personas section on the home page and back it with a screenshot background on the CTA band. Co-Authored-By: Claude Opus 4.8 --- i18n/en.yaml | 51 ++++++-- i18n/fr.yaml | 51 ++++++-- layouts/index.html | 2 + layouts/partials/discover.html | 96 +++++++-------- layouts/partials/personas.html | 34 +++++ static/css/custom.css | 218 +++++++++++++++++++++++++-------- 6 files changed, 335 insertions(+), 117 deletions(-) create mode 100644 layouts/partials/personas.html diff --git a/i18n/en.yaml b/i18n/en.yaml index 4acb9ea..029fb44 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -61,10 +61,12 @@ - id: features-grid-footer translation: And we have many other features in preparation... -- id: discover-title +- id: discover-eyebrow translation: "How it works" +- id: discover-title + translation: "Three steps, zero commitment" - id: discover-lead - translation: "A simple approach to efficient domain management." + translation: "Connect a domain and happyDomain starts watching over it. No migration, no configuration, and nothing changes on your side." - id: features-wip-lead translation: "happyDomain is functional but still very much a work in progress: it's a carefully crafted proof of concept that evolves thanks to your feedbacks!" @@ -85,18 +87,51 @@ - id: features-wip-p2-end translation: "." +- id: discover-1-tag + translation: "Connect" +- id: discover-2-tag + translation: "Monitor" +- id: discover-3-tag + translation: "Optional" + +- id: personas-eyebrow + translation: "For everyone" +- id: personas-title + translation: "Made for the way you work" +- id: personas-lead + translation: "One domain or a thousand, deep DNS expertise or none at all: happyDomain meets you where you are. Pick the profile that sounds like you and see what it changes day to day." + - id: discover-1-title - translation: "Connect your accounts" + translation: "Connect your domains" - id: discover-1-text - translation: "Add your access information to the various registrars and DNS hosts." + translation: "Link your registrar, DNS host or authoritative server in a few clicks. Your domains stay exactly where they are: no transfer, no change of ownership." - id: discover-2-title - translation: "Import your domains" + translation: "Get instant health checks" - id: discover-2-text - translation: "Automatically import all your domain names and configurations into happyDomain." + translation: "From the very first minute, happyDomain runs deep checks on every domain: expiration, DNSSEC, response time and more. Nothing to configure, and you're notified the moment something changes." - id: discover-3-title - translation: "Manage with efficiently" + translation: "Edit when you want to" - id: discover-3-text - translation: "Edit, add and synchronize all your DNS records from a single interface." + translation: "Your provider's console keeps working as before. When you're ready, guided forms, change previews and one-click rollback make every edit safer. It's there to help, never required." + +- id: discover-assurances-title + translation: "Our promises" +- id: discover-assurance-1-title + translation: "Your data stays at your provider" +- id: discover-assurance-1-text + translation: "happyDomain connects to your existing provider. Nothing is moved, nothing is locked in." +- id: discover-assurance-2-title + translation: "No migration needed" +- id: discover-assurance-2-text + translation: "Bring your domains as they are today, and leave whenever you like." +- id: discover-assurance-3-title + translation: "Your usual console still works" +- id: discover-assurance-3-text + translation: "Keep using your provider's interface alongside happyDomain, with no conflict." +- id: discover-assurance-4-title + translation: "Everything is optional" +- id: discover-assurance-4-text + translation: "Monitoring works out of the box. Use the editor, history and API only if and when you need them." - id: downloads-title translation: | diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 6a3c734..f2be4f1 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -79,23 +79,58 @@ - id: features-grid-footer translation: Et nous avons encore bien d'autres fonctionnalités en préparation... -- id: discover-title +- id: discover-eyebrow translation: "Comment ça marche" +- id: discover-title + translation: "Trois étapes, zéro engagement" - id: discover-lead - translation: "Une approche simple pour une gestion de domaine efficace." + translation: "Connectez un domaine et happyDomain commence à veiller dessus. Pas de migration, pas de configuration, et rien ne change de votre côté." + +- id: discover-1-tag + translation: "Connexion" +- id: discover-2-tag + translation: "Surveillance" +- id: discover-3-tag + translation: "Optionnel" + +- id: personas-eyebrow + translation: "Pour tout le monde" +- id: personas-title + translation: "Conçu pour votre façon de travailler" +- id: personas-lead + translation: "Un domaine ou un millier, expert DNS ou débutant : happyDomain s'adapte à votre réalité. Choisissez le profil qui vous ressemble et découvrez ce que ça change au quotidien." - id: discover-1-title - translation: "Connectez vos comptes" + translation: "Connectez vos domaines" - id: discover-1-text - translation: "Ajoutez vos informations d'accès aux différents bureaux d'enregistrement et hébergeurs DNS." + translation: "Reliez votre bureau d'enregistrement, votre hébergeur DNS ou votre serveur faisant autorité en quelques clics. Vos domaines restent exactement là où ils sont : pas de transfert, pas de changement de propriétaire." - id: discover-2-title - translation: "Importez vos domaines" + translation: "Profitez de vérifications instantanées" - id: discover-2-text - translation: "Importez automatiquement tous vos noms de domaine et leurs configurations dans happyDomain." + translation: "Dès la première minute, happyDomain effectue des vérifications approfondies sur chaque domaine : expiration, DNSSEC, temps de réponse et bien plus. Rien à configurer, et vous êtes notifié dès qu'un état change." - id: discover-3-title - translation: "Gérez efficacement" + translation: "Modifiez quand vous le souhaitez" - id: discover-3-text - translation: "Modifiez, ajoutez et synchronisez tous vos enregistrements DNS depuis une seule interface." + translation: "La console de votre hébergeur continue de fonctionner comme avant. Quand vous êtes prêt, formulaires guidés, aperçu des changements et retour arrière en un clic rendent chaque modification plus sûre. C'est une aide, jamais une obligation." + +- id: discover-assurances-title + translation: "Nos promesses" +- id: discover-assurance-1-title + translation: "Vos données restent chez votre hébergeur" +- id: discover-assurance-1-text + translation: "happyDomain se connecte à votre hébergeur actuel. Rien n'est déplacé, rien n'est verrouillé." +- id: discover-assurance-2-title + translation: "Aucune migration nécessaire" +- id: discover-assurance-2-text + translation: "Amenez vos domaines tels qu'ils sont aujourd'hui, et repartez quand vous voulez." +- id: discover-assurance-3-title + translation: "Votre console habituelle fonctionne toujours" +- id: discover-assurance-3-text + translation: "Continuez d'utiliser l'interface de votre hébergeur en parallèle de happyDomain, sans aucun conflit." +- id: discover-assurance-4-title + translation: "Tout est optionnel" +- id: discover-assurance-4-text + translation: "La surveillance fonctionne immédiatement. Utilisez l'éditeur, l'historique et l'API seulement si vous en avez besoin, quand vous en avez besoin." - id: downloads-title translation: | diff --git a/layouts/index.html b/layouts/index.html index 140e8b0..968f620 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -19,6 +19,8 @@ {{ partial "discover.html" . }} + {{ partial "personas.html" . }} + {{/* partial "testimonials.html" . */}} {{ partial "cta-join.html" . }} diff --git a/layouts/partials/discover.html b/layouts/partials/discover.html index 4fee0d6..c92ef0e 100644 --- a/layouts/partials/discover.html +++ b/layouts/partials/discover.html @@ -1,68 +1,60 @@ -
+
-
-

- {{ i18n "discover-title" }} -

-
-

- {{ i18n "discover-lead" }} -

-
+
+ {{ i18n "discover-eyebrow" }} +

{{ i18n "discover-title" }}

+

{{ i18n "discover-lead" }}

-
-
-
1
+
+
+
1 {{ i18n "discover-1-tag" }}

{{ i18n "discover-1-title" }}

{{ i18n "discover-1-text" }}

-
-
2
+
+
2 {{ i18n "discover-2-tag" }}

{{ i18n "discover-2-title" }}

{{ i18n "discover-2-text" }}

-
-
3
+
+
3 {{ i18n "discover-3-tag" }}

{{ i18n "discover-3-title" }}

{{ i18n "discover-3-text" }}

-

- {{ i18n "learnhow" }} happyDomain {{ i18n "canhelpyou" }} -

-
-
- - {{ i18n -

{{ i18n "freelance" }}

- -
-
- - {{ i18n -

{{ i18n "sysadmin" }}

- -
-
- - {{ i18n -

{{ i18n "devops" }}

- -
-
- - {{ i18n -

{{ i18n "cio" }}

- -
-
- - {{ i18n -

{{ i18n "geek" }}

- -
-
+
    +
  • + +
    + {{ i18n "discover-assurance-1-title" }} +

    {{ i18n "discover-assurance-1-text" }}

    +
    +
    • +
  • + +
    + {{ i18n "discover-assurance-2-title" }} +

    {{ i18n "discover-assurance-2-text" }}

    +
    +
    • +
  • + +
    + {{ i18n "discover-assurance-3-title" }} +

    {{ i18n "discover-assurance-3-text" }}

    +
    +
    • +
  • + +
    + {{ i18n "discover-assurance-4-title" }} +

    {{ i18n "discover-assurance-4-text" }}

    +
    +
    • +
diff --git a/layouts/partials/personas.html b/layouts/partials/personas.html new file mode 100644 index 0000000..26f0e1b --- /dev/null +++ b/layouts/partials/personas.html @@ -0,0 +1,34 @@ +
+
+
+ {{ i18n "personas-eyebrow" }} +

{{ i18n "personas-title" }}

+

{{ i18n "personas-lead" }}

+
+ +
+ + + {{ i18n "freelance" }} + + + + {{ i18n "sysadmin" }} + + + + {{ i18n "devops" }} + + + + {{ i18n "cio" }} + + + + {{ i18n "geek" }} + +
+
+
diff --git a/static/css/custom.css b/static/css/custom.css index 3d41426..db24d33 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -314,70 +314,190 @@ img { max-width: 100%; } -#discover .steps { +/* ── How it works (#discover) ── + Same flat language as the big-idea section: one bordered surface, + columns split by hairlines, mono step tags. */ +#discover .steps-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + border: 1px solid var(--hd-border-1); + border-radius: 12px; + overflow: hidden; + background: var(--hd-bg-canvas); +} + +#discover .step-col { + padding: 28px 28px 24px; +} + +#discover .step-col + .step-col { + border-left: 1px solid var(--hd-border-1); +} + +#discover .step-col h3 { + font-weight: 700; + font-size: 1.125rem; + color: var(--hd-fg-1); + letter-spacing: -0.015em; + margin: 0 0 10px; +} + +#discover .step-col p { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--hd-fg-3); + margin: 0; +} + +#discover .assurances { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px 28px; + margin: 40px 0 0; + padding-top: 32px; + border-top: 1px solid var(--hd-border-1); +} + +#discover .assurance { display: flex; - justify-content: space-between; - flex-wrap: wrap; - margin-top: 60px; - position: relative; + align-items: flex-start; + gap: 10px; } -#discover .steps::before { - content: ""; - position: absolute; - top: 25px; - left: 10%; - width: 80%; - height: 2px; - background: linear-gradient( - to right, - var(--hd-accent) 0%, - var(--hd-brand-dark) 100% - ); - z-index: 1; -} - -#discover .step { - flex-basis: 30%; - text-align: center; - position: relative; - z-index: 2; -} - -#discover .step-number { - background: linear-gradient( - 135deg, - var(--hd-accent) 0%, - var(--hd-brand-dark) 100% - ); - color: white; - width: 50px; - height: 50px; - border-radius: 50%; +#discover .assurance-check { + flex-shrink: 0; display: flex; align-items: center; justify-content: center; - font-size: 24px; - font-weight: bold; - margin: 0 auto 20px; + width: 20px; + height: 20px; + margin-top: 1px; + border-radius: 6px; + background: var(--hd-accent-subtle); + border: 1px solid var(--hd-accent-border); + color: var(--hd-accent); + font-size: 11px; + font-weight: 700; } -#discover .step h3 { - margin-bottom: 15px; - font-size: 22px; +[data-bs-theme="dark"] #discover .assurance-check { + background: var(--hd-accent-muted); } -#discover .step p { +#discover .assurance strong { + display: block; + font-size: 0.875rem; + color: var(--hd-fg-1); + margin-bottom: 3px; +} + +#discover .assurance p { color: var(--hd-fg-3); + font-size: 0.8125rem; + line-height: 1.55; +} + +@media (max-width: 991px) { + #discover .assurances { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + #discover .steps-grid { + grid-template-columns: 1fr; + } + #discover .step-col + .step-col { + border-left: none; + border-top: 1px solid var(--hd-border-1); + } + #discover .assurances { + grid-template-columns: 1fr; + } +} + +/* ── Personas (#personas) ── */ +.personas-grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 16px; +} + +.persona-card { + display: flex; + flex-direction: column; + text-decoration: none; + background: var(--hd-bg-canvas); + border: 1px solid var(--hd-border-1); + border-radius: 12px; + overflow: hidden; + transition: + border-color 0.15s, + transform 0.15s, + box-shadow 0.15s; +} + +.persona-card:hover { + border-color: var(--hd-accent-border); + transform: translateY(-3px); + box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35); +} + +.persona-card img { + display: block; + width: 100%; + height: auto; + aspect-ratio: 4 / 3; + object-fit: cover; +} + +.persona-card .persona-name { + display: flex; + align-items: center; + justify-content: space-between; + padding: 11px 14px; + font-size: 0.875rem; + font-weight: 600; + color: var(--hd-fg-1); + border-top: 1px solid var(--hd-border-1); +} + +.persona-card .persona-name::after { + content: "\2192"; + color: var(--hd-fg-4); + transition: + color 0.15s, + transform 0.15s; +} + +.persona-card:hover .persona-name::after { + color: var(--hd-accent); + transform: translateX(3px); +} + +@media (max-width: 991px) { + .personas-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 575px) { + .personas-grid { + grid-template-columns: repeat(2, 1fr); + } } #cta { padding: 100px 0; - background: linear-gradient( - 135deg, - var(--hd-brand-dark) 0%, - var(--hd-accent) 100% - ); + background: + linear-gradient( + 135deg, + rgba(54, 11, 72, 0.65) 0%, + rgba(28, 180, 135, 0.55) 100% + ), + url("/img/screenshots/home.webp"); + background-size: cover; + background-position: center; color: white; text-align: center; position: relative;