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 <noreply@anthropic.com>
This commit is contained in:
parent
2272761843
commit
b3830ab7c4
6 changed files with 332 additions and 114 deletions
51
i18n/en.yaml
51
i18n/en.yaml
|
|
@ -61,10 +61,12 @@
|
||||||
- id: features-grid-footer
|
- id: features-grid-footer
|
||||||
translation: And we have many other features in preparation...
|
translation: And we have many other features in preparation...
|
||||||
|
|
||||||
- id: discover-title
|
- id: discover-eyebrow
|
||||||
translation: "How it works"
|
translation: "How it works"
|
||||||
|
- id: discover-title
|
||||||
|
translation: "Three steps, zero commitment"
|
||||||
- id: discover-lead
|
- 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
|
- 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!"
|
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
|
- id: features-wip-p2-end
|
||||||
translation: "."
|
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
|
- id: discover-1-title
|
||||||
translation: "Connect your accounts"
|
translation: "Connect your domains"
|
||||||
- id: discover-1-text
|
- 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
|
- id: discover-2-title
|
||||||
translation: "Import your domains"
|
translation: "Get instant health checks"
|
||||||
- id: discover-2-text
|
- 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
|
- id: discover-3-title
|
||||||
translation: "Manage with efficiently"
|
translation: "Edit when you want to"
|
||||||
- id: discover-3-text
|
- 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
|
- id: downloads-title
|
||||||
translation: |
|
translation: |
|
||||||
|
|
|
||||||
51
i18n/fr.yaml
51
i18n/fr.yaml
|
|
@ -79,23 +79,58 @@
|
||||||
- id: features-grid-footer
|
- id: features-grid-footer
|
||||||
translation: Et nous avons encore bien d'autres fonctionnalités en préparation...
|
translation: Et nous avons encore bien d'autres fonctionnalités en préparation...
|
||||||
|
|
||||||
- id: discover-title
|
- id: discover-eyebrow
|
||||||
translation: "Comment ça marche"
|
translation: "Comment ça marche"
|
||||||
|
- id: discover-title
|
||||||
|
translation: "Trois étapes, zéro engagement"
|
||||||
- id: discover-lead
|
- 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
|
- id: discover-1-title
|
||||||
translation: "Connectez vos comptes"
|
translation: "Connectez vos domaines"
|
||||||
- id: discover-1-text
|
- 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
|
- id: discover-2-title
|
||||||
translation: "Importez vos domaines"
|
translation: "Profitez de vérifications instantanées"
|
||||||
- id: discover-2-text
|
- 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
|
- id: discover-3-title
|
||||||
translation: "Gérez efficacement"
|
translation: "Modifiez quand vous le souhaitez"
|
||||||
- id: discover-3-text
|
- 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
|
- id: downloads-title
|
||||||
translation: |
|
translation: |
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,8 @@
|
||||||
|
|
||||||
{{ partial "discover.html" . }}
|
{{ partial "discover.html" . }}
|
||||||
|
|
||||||
|
{{ partial "personas.html" . }}
|
||||||
|
|
||||||
{{/* partial "testimonials.html" . */}}
|
{{/* partial "testimonials.html" . */}}
|
||||||
|
|
||||||
{{ partial "cta-join.html" . }}
|
{{ partial "cta-join.html" . }}
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,60 @@
|
||||||
<section id="discover" class="py-5" style="background: var(--hd-green-50)">
|
<section id="discover" class="section section--paper">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-title text-center mb-5">
|
<div class="section-head">
|
||||||
<h2 class="mb-3 display-4">
|
<span class="eyebrow"
|
||||||
{{ i18n "discover-title" }}
|
><span class="dot"></span>{{ i18n "discover-eyebrow" }}</span
|
||||||
</h2>
|
>
|
||||||
<div class="row">
|
<h2 class="h2">{{ i18n "discover-title" }}</h2>
|
||||||
<p class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 text-muted" style="font-size: 1.15rem;">
|
<p class="lede">{{ i18n "discover-lead" }}</p>
|
||||||
{{ i18n "discover-lead" }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="steps">
|
<div class="steps-grid">
|
||||||
<div class="step">
|
<div class="step-col">
|
||||||
<div class="step-number">1</div>
|
<div class="idea-tag"><span class="num">1</span> {{ i18n "discover-1-tag" }}</div>
|
||||||
<h3>{{ i18n "discover-1-title" }}</h3>
|
<h3>{{ i18n "discover-1-title" }}</h3>
|
||||||
<p>{{ i18n "discover-1-text" }}</p>
|
<p>{{ i18n "discover-1-text" }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="step">
|
<div class="step-col">
|
||||||
<div class="step-number">2</div>
|
<div class="idea-tag"><span class="num">2</span> {{ i18n "discover-2-tag" }}</div>
|
||||||
<h3>{{ i18n "discover-2-title" }}</h3>
|
<h3>{{ i18n "discover-2-title" }}</h3>
|
||||||
<p>{{ i18n "discover-2-text" }}</p>
|
<p>{{ i18n "discover-2-text" }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="step">
|
<div class="step-col">
|
||||||
<div class="step-number">3</div>
|
<div class="idea-tag"><span class="num">3</span> {{ i18n "discover-3-tag" }}</div>
|
||||||
<h3>{{ i18n "discover-3-title" }}</h3>
|
<h3>{{ i18n "discover-3-title" }}</h3>
|
||||||
<p>{{ i18n "discover-3-text" }}</p>
|
<p>{{ i18n "discover-3-text" }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="text-center my-5">
|
<ul class="assurances list-unstyled">
|
||||||
{{ i18n "learnhow" }} happy<strong>Domain</strong> {{ i18n "canhelpyou" }}
|
<li class="assurance">
|
||||||
</h3>
|
<span class="assurance-check" aria-hidden="true">✓</span>
|
||||||
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 justify-content-center">
|
<div>
|
||||||
<div class="col mb-4">
|
<strong>{{ i18n "discover-assurance-1-title" }}</strong>
|
||||||
<a href="{{ ref . "/use-happyDomain/freelance" }}" class="card h-100" data-umami-event="learnmore-freelance">
|
<p class="mb-0">{{ i18n "discover-assurance-1-text" }}</p>
|
||||||
<img src="/img/screenshots/users/freelance.webp" alt="{{ i18n "freelance" }}" class="img-top flex-grow-1">
|
</div>
|
||||||
<h3 class="text-center mt-1">{{ i18n "freelance" }}</h3>
|
</li>
|
||||||
</a>
|
<li class="assurance">
|
||||||
</div>
|
<span class="assurance-check" aria-hidden="true">✓</span>
|
||||||
<div class="col mb-4">
|
<div>
|
||||||
<a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="card h-100" data-umami-event="learnmore-sysadmin">
|
<strong>{{ i18n "discover-assurance-2-title" }}</strong>
|
||||||
<img src="/img/screenshots/users/sysadmin.webp" alt="{{ i18n "sysadmin" }}" class="img-top flex-grow-1">
|
<p class="mb-0">{{ i18n "discover-assurance-2-text" }}</p>
|
||||||
<h3 class="text-center mt-1">{{ i18n "sysadmin" }}</h3>
|
</div>
|
||||||
</a>
|
</li>
|
||||||
</div>
|
<li class="assurance">
|
||||||
<div class="col mb-4">
|
<span class="assurance-check" aria-hidden="true">✓</span>
|
||||||
<a href="{{ ref . "/use-happyDomain/devops" }}" class="card h-100" data-umami-event="learnmore-devops">
|
<div>
|
||||||
<img src="/img/screenshots/users/devops.webp" alt="{{ i18n "devops" }}" class="img-top flex-grow-1">
|
<strong>{{ i18n "discover-assurance-3-title" }}</strong>
|
||||||
<h3 class="text-center mt-1">{{ i18n "devops" }}</h3>
|
<p class="mb-0">{{ i18n "discover-assurance-3-text" }}</p>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
<div class="col mb-4">
|
<li class="assurance">
|
||||||
<a href="{{ ref . "/use-happyDomain/cio" }}" class="card h-100" data-umami-event="learnmore-cio">
|
<span class="assurance-check" aria-hidden="true">✓</span>
|
||||||
<img src="/img/screenshots/users/cio.webp" alt="{{ i18n "cio" }}" class="img-top flex-grow-1">
|
<div>
|
||||||
<h3 class="text-center mt-1">{{ i18n "cio" }}</h3>
|
<strong>{{ i18n "discover-assurance-4-title" }}</strong>
|
||||||
</a>
|
<p class="mb-0">{{ i18n "discover-assurance-4-text" }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col mb-4">
|
</li>
|
||||||
<a href="{{ ref . "/use-happyDomain/geek" }}" class="card h-100" data-umami-event="learnmore-geek">
|
</ul>
|
||||||
<img src="/img/screenshots/users/geek.webp" alt="{{ i18n "geek" }}" class="img-top flex-grow-1">
|
|
||||||
<h3 class="text-center mt-1">{{ i18n "geek" }}</h3>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
34
layouts/partials/personas.html
Normal file
34
layouts/partials/personas.html
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
<section id="personas" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow"
|
||||||
|
><span class="dot"></span>{{ i18n "personas-eyebrow" }}</span
|
||||||
|
>
|
||||||
|
<h2 class="h2">{{ i18n "personas-title" }}</h2>
|
||||||
|
<p class="lede">{{ i18n "personas-lead" }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="personas-grid">
|
||||||
|
<a href="{{ ref . "/use-happyDomain/freelance" }}" class="persona-card" data-umami-event="learnmore-freelance">
|
||||||
|
<img src="/img/screenshots/users/freelance.webp" alt="" loading="lazy">
|
||||||
|
<span class="persona-name">{{ i18n "freelance" }}</span>
|
||||||
|
</a>
|
||||||
|
<a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="persona-card" data-umami-event="learnmore-sysadmin">
|
||||||
|
<img src="/img/screenshots/users/sysadmin.webp" alt="" loading="lazy">
|
||||||
|
<span class="persona-name">{{ i18n "sysadmin" }}</span>
|
||||||
|
</a>
|
||||||
|
<a href="{{ ref . "/use-happyDomain/devops" }}" class="persona-card" data-umami-event="learnmore-devops">
|
||||||
|
<img src="/img/screenshots/users/devops.webp" alt="" loading="lazy">
|
||||||
|
<span class="persona-name">{{ i18n "devops" }}</span>
|
||||||
|
</a>
|
||||||
|
<a href="{{ ref . "/use-happyDomain/cio" }}" class="persona-card" data-umami-event="learnmore-cio">
|
||||||
|
<img src="/img/screenshots/users/cio.webp" alt="" loading="lazy">
|
||||||
|
<span class="persona-name">{{ i18n "cio" }}</span>
|
||||||
|
</a>
|
||||||
|
<a href="{{ ref . "/use-happyDomain/geek" }}" class="persona-card" data-umami-event="learnmore-geek">
|
||||||
|
<img src="/img/screenshots/users/geek.webp" alt="" loading="lazy">
|
||||||
|
<span class="persona-name">{{ i18n "geek" }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -314,70 +314,190 @@ img {
|
||||||
max-width: 100%;
|
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: flex-start;
|
||||||
flex-wrap: wrap;
|
gap: 10px;
|
||||||
margin-top: 60px;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#discover .steps::before {
|
#discover .assurance-check {
|
||||||
content: "";
|
flex-shrink: 0;
|
||||||
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%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 24px;
|
width: 20px;
|
||||||
font-weight: bold;
|
height: 20px;
|
||||||
margin: 0 auto 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 {
|
[data-bs-theme="dark"] #discover .assurance-check {
|
||||||
margin-bottom: 15px;
|
background: var(--hd-accent-muted);
|
||||||
font-size: 22px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#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);
|
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 {
|
#cta {
|
||||||
padding: 100px 0;
|
padding: 100px 0;
|
||||||
background: linear-gradient(
|
background:
|
||||||
135deg,
|
linear-gradient(
|
||||||
var(--hd-brand-dark) 0%,
|
135deg,
|
||||||
var(--hd-accent) 100%
|
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;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue