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

Redesign discover section and add personas grid

Browse source 
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:
nemunaire 2026-06-12 13:24:10 +09:00
commit b3830ab7c4
6 changed files with 332 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

96
layouts/partials/discover.html
View file

@ -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="section-title text-center mb-5">
<h2 class="mb-3 display-4">
{{ i18n "discover-title" }}
</h2>
<div class="row">
<p class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 text-muted" style="font-size: 1.15rem;">
{{ i18n "discover-lead" }}
</p>
</div>
<div class="section-head">
<span class="eyebrow"
><span class="dot"></span>{{ i18n "discover-eyebrow" }}</span
>
<h2 class="h2">{{ i18n "discover-title" }}</h2>
<p class="lede">{{ i18n "discover-lead" }}</p>
</div>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="steps-grid">
<div class="step-col">
<div class="idea-tag"><span class="num">1</span> {{ i18n "discover-1-tag" }}</div>
<h3>{{ i18n "discover-1-title" }}</h3>
<p>{{ i18n "discover-1-text" }}</p>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-col">
<div class="idea-tag"><span class="num">2</span> {{ i18n "discover-2-tag" }}</div>
<h3>{{ i18n "discover-2-title" }}</h3>
<p>{{ i18n "discover-2-text" }}</p>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-col">
<div class="idea-tag"><span class="num">3</span> {{ i18n "discover-3-tag" }}</div>
<h3>{{ i18n "discover-3-title" }}</h3>
<p>{{ i18n "discover-3-text" }}</p>
</div>
</div>
<h3 class="text-center my-5">
{{ i18n "learnhow" }} happy<strong>Domain</strong> {{ i18n "canhelpyou" }}
</h3>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 justify-content-center">
<div class="col mb-4">
<a href="{{ ref . "/use-happyDomain/freelance" }}" class="card h-100" data-umami-event="learnmore-freelance">
<img src="/img/screenshots/users/freelance.webp" alt="{{ i18n "freelance" }}" class="img-top flex-grow-1">
<h3 class="text-center mt-1">{{ i18n "freelance" }}</h3>
</a>
</div>
<div class="col mb-4">
<a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="card h-100" data-umami-event="learnmore-sysadmin">
<img src="/img/screenshots/users/sysadmin.webp" alt="{{ i18n "sysadmin" }}" class="img-top flex-grow-1">
<h3 class="text-center mt-1">{{ i18n "sysadmin" }}</h3>
</a>
</div>
<div class="col mb-4">
<a href="{{ ref . "/use-happyDomain/devops" }}" class="card h-100" data-umami-event="learnmore-devops">
<img src="/img/screenshots/users/devops.webp" alt="{{ i18n "devops" }}" class="img-top flex-grow-1">
<h3 class="text-center mt-1">{{ i18n "devops" }}</h3>
</a>
</div>
<div class="col mb-4">
<a href="{{ ref . "/use-happyDomain/cio" }}" class="card h-100" data-umami-event="learnmore-cio">
<img src="/img/screenshots/users/cio.webp" alt="{{ i18n "cio" }}" class="img-top flex-grow-1">
<h3 class="text-center mt-1">{{ i18n "cio" }}</h3>
</a>
</div>
<div class="col mb-4">
<a href="{{ ref . "/use-happyDomain/geek" }}" class="card h-100" data-umami-event="learnmore-geek">
<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>
<ul class="assurances list-unstyled">
<li class="assurance">
<span class="assurance-check" aria-hidden="true">&#10003;</span>
<div>
<strong>{{ i18n "discover-assurance-1-title" }}</strong>
<p class="mb-0">{{ i18n "discover-assurance-1-text" }}</p>
</div>
</li>
<li class="assurance">
<span class="assurance-check" aria-hidden="true">&#10003;</span>
<div>
<strong>{{ i18n "discover-assurance-2-title" }}</strong>
<p class="mb-0">{{ i18n "discover-assurance-2-text" }}</p>
</div>
</li>
<li class="assurance">
<span class="assurance-check" aria-hidden="true">&#10003;</span>
<div>
<strong>{{ i18n "discover-assurance-3-title" }}</strong>
<p class="mb-0">{{ i18n "discover-assurance-3-text" }}</p>
</div>
</li>
<li class="assurance">
<span class="assurance-check" aria-hidden="true">&#10003;</span>
<div>
<strong>{{ i18n "discover-assurance-4-title" }}</strong>
<p class="mb-0">{{ i18n "discover-assurance-4-text" }}</p>
</div>
</li>
</ul>
</div>
</section>

34
layouts/partials/personas.html Normal file
View 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>