Improve persona page with browser-like screenshots and background color

content/use-happyDomain/cio.en.md

@@ -24,6 +24,7 @@ An expired domain, a broken delegation, a forgotten subdomain still pointing at
   title="See your entire domain portfolio in one place."
   image="/img/screenshots/domains-list.webp"
   alt="List of domains from several providers, grouped by need"
+  url="app.happydomain.org/domains"
 >}}
 happy<span class="fw-bold">Domain</span> connects to more than 25 hosting providers worldwide: registrars, cloud DNS, CDNs and your on-premise servers.
 
@@ -34,6 +35,7 @@ Import a provider in one click and get a single, always up-to-date inventory of
   title="Catch incidents before your users do."
   image="/img/screenshots/checks-dashboard.webp"
   alt="Monitoring dashboard showing the status of every check on a domain"
+  url="app.happydomain.org/domains/example.com/checks"
   flip="true"
   bg="green"
 >}}
@@ -46,6 +48,7 @@ Your teams are notified the moment something changes state. Silent failures beco
   title="Review every change before it reaches production."
   image="/img/screenshots/zone-diff.webp"
   alt="Review and confirm the changes that will be applied"
+  url="app.happydomain.org/domains/example.com/diff"
 >}}
 No change is applied blindly: happy<span class="fw-bold">Domain</span> shows the exact difference between the current zone and the new one, and asks for confirmation.
 
@@ -56,6 +59,7 @@ A typo in a record no longer takes a service down. Your team sees what will chan
   title="A full audit trail, and a way back."
   image="/img/screenshots/domain-logs.webp"
   alt="Domain logs showing change history"
+  url="app.happydomain.org/domains/example.com/logs"
   flip="true"
   bg="plum"
 >}}
@@ -68,6 +72,7 @@ And because the entire history is kept, you can roll any zone back to a previous
   title="Delegate to your teams, without losing control."
   image="/img/screenshots/domain-abstract.webp"
   alt="Zone management shared between teams"
+  url="app.happydomain.org/domains/example.com"
   coming_soon="true"
 >}}
 Let each team manage the records related to its own projects, internal or public, instead of queuing tickets to a central admin.
@@ -79,6 +84,7 @@ happy<span class="fw-bold">Domain</span>'s fine-grained access control lets you
   title="No more forgotten subdomains."
   image="/img/screenshots/domain-services.webp"
   alt="Services attached to a domain, each with a clear purpose"
+  url="app.happydomain.org/domains/example.com/services"
   flip="true"
   bg="green"
   coming_soon="true"

content/use-happyDomain/cio.fr.md

@@ -23,6 +23,7 @@ Un domaine expiré, une délégation cassée, un sous-domaine oublié qui pointe
 {{< usage-feature
   title="Visualisez tout votre portefeuille de domaines au même endroit."
   image="/img/screenshots/domains-list.webp"
+  url="app.happydomain.org/domains"
   alt="Liste des domaines de plusieurs hébergeurs, regroupés selon vos besoins"
 >}}
 happy<span class="fw-bold">Domain</span> se connecte à plus de 25 hébergeurs à travers le monde : registrars, DNS cloud, CDN et vos serveurs internes.
@@ -33,6 +34,7 @@ Importez un hébergeur en un clic et obtenez un inventaire unique et toujours à
 {{< usage-feature
   title="Détectez les incidents avant vos utilisateurs."
   image="/img/screenshots/checks-dashboard.webp"
+  url="app.happydomain.org/domains/example.com/checks"
   alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine"
   flip="true"
   bg="green"
@@ -45,6 +47,7 @@ Vos équipes sont notifiées dès qu'un état change. Les pannes silencieuses de
 {{< usage-feature
   title="Relisez chaque modification avant qu'elle n'atteigne la production."
   image="/img/screenshots/zone-diff.webp"
+  url="app.happydomain.org/domains/example.com/diff"
   alt="Relisez puis confirmez les modifications qui seront appliquées"
 >}}
 Aucune modification n'est appliquée à l'aveugle : happy<span class="fw-bold">Domain</span> affiche la différence exacte entre la zone actuelle et la nouvelle, et demande confirmation.
@@ -55,6 +58,7 @@ Une faute de frappe dans un enregistrement ne met plus un service à terre. Votr
 {{< usage-feature
   title="Une piste d'audit complète, et un retour en arrière possible."
   image="/img/screenshots/domain-logs.webp"
+  url="app.happydomain.org/domains/example.com/logs"
   alt="Historique des modifications d'un domaine"
   flip="true"
   bg="plum"
@@ -67,6 +71,7 @@ Et puisque tout l'historique est conservé, vous pouvez restaurer n'importe quel
 {{< usage-feature
   title="Déléguez à vos équipes, sans perdre le contrôle."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Gestion d'une zone partagée entre les équipes"
   coming_soon="true"
 >}}
@@ -78,6 +83,7 @@ Le contrôle d'accès fin de happy<span class="fw-bold">Domain</span> vous perme
 {{< usage-feature
   title="Fini les sous-domaines oubliés."
   image="/img/screenshots/domain-services.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Services rattachés à un domaine, chacun avec un objectif clair"
   flip="true"
   bg="green"

content/use-happyDomain/devops.en.md

@@ -23,6 +23,7 @@ Deployments are reviewed, tested and rolled back. DNS changes go straight to pro
 {{< usage-feature
   title="One REST API for all your domains' operations."
   image="/img/screenshots/features/rest.png"
+  url="app.happydomain.org/swagger/index.html"
   alt="Our REST API, commented and exposed with Swagger"
 >}}
 Everything that's done in the happy<span class="fw-bold">Domain</span> web interface can be done with the API, in your language of choice. Script it once, run it everywhere.
@@ -35,6 +36,7 @@ Our REST API is fully documented, and thanks to Swagger, you can browse it and g
 {{< usage-feature
   title="Forget the quirks of each provider. One abstraction for over 25 hosts."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="A zone displayed the same way, whatever the provider behind it"
   flip="true"
   bg="green"
@@ -54,6 +56,7 @@ Write your automation against happy<span class="fw-bold">Domain</span> once; it
 {{< usage-feature
   title="Bring DNS into your review workflow."
   image="/img/screenshots/zone-diff.webp"
+  url="app.happydomain.org/domains/example.com/diff"
   alt="Review and confirm the changes that will be applied"
 >}}
 Before anything is published, happy<span class="fw-bold">Domain</span> shows the exact diff between the current zone and the new one, and waits for confirmation.
@@ -64,6 +67,7 @@ You can even cherry-pick which changes ship now and which ones wait. It works li
 {{< usage-feature
   title="Tooling that plugs into what you already use."
   image="/img/screenshots/sdk-python.webp"
+  url="pypi.org/project/happydomain"
   alt="Python SDK usage"
   flip="true"
   bg="plum"
@@ -87,6 +91,7 @@ You can even cherry-pick which changes ship now and which ones wait. It works li
 {{< usage-feature
   title="Monitoring included, no extra stack to deploy."
   image="/img/screenshots/checks-dashboard.webp"
+  url="app.happydomain.org/domains/example.com/checks"
   alt="Monitoring dashboard showing the status of every check on a domain"
 >}}
 happy<span class="fw-bold">Domain</span>'s checkers continuously verify expirations, DNSSEC, delegation, certificates and service availability for every domain you manage.

content/use-happyDomain/devops.fr.md

@@ -23,6 +23,7 @@ Les déploiements sont relus, testés et réversibles. Les changements DNS parte
 {{< usage-feature
   title="Une seule API REST pour toutes les opérations sur vos domaines."
   image="/img/screenshots/features/rest.png"
+  url="app.happydomain.org/swagger/index.html"
   alt="Notre API REST, commentée et exposée avec Swagger"
 >}}
 Tout ce qui se fait dans l'interface web d'happy<span class="fw-bold">Domain</span> peut se faire avec l'API, dans votre langage de prédilection. Scriptez-le une fois, exécutez-le partout.
@@ -35,6 +36,7 @@ Notre API REST est entièrement documentée et grâce à Swagger, vous pouvez la
 {{< usage-feature
   title="Oubliez les particularités de chaque hébergeur. Une seule abstraction pour plus de 25 hébergeurs."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Une zone affichée de la même façon, quel que soit le fournisseur derrière"
   flip="true"
   bg="green"
@@ -54,6 +56,7 @@ Notre API REST est entièrement documentée et grâce à Swagger, vous pouvez la
 {{< usage-feature
   title="Intégrez le DNS dans votre workflow de relecture."
   image="/img/screenshots/zone-diff.webp"
+  url="app.happydomain.org/domains/example.com/diff"
   alt="Relisez et confirmez les changements qui seront appliqués"
 >}}
 Avant toute publication, happy<span class="fw-bold">Domain</span> affiche le diff exact entre la zone actuelle et la nouvelle, et attend votre confirmation.
@@ -64,6 +67,7 @@ Vous pouvez même choisir quels changements partent maintenant et lesquels atten
 {{< usage-feature
   title="Des outils qui s'intègrent à ce que vous utilisez déjà."
   image="/img/screenshots/sdk-python.webp"
+  url="pypi.org/project/happydomain"
   alt="Utilisation du SDK Python"
   flip="true"
   bg="plum"
@@ -87,6 +91,7 @@ Vous pouvez même choisir quels changements partent maintenant et lesquels atten
 {{< usage-feature
   title="Supervision incluse, aucune stack supplémentaire à déployer."
   image="/img/screenshots/checks-dashboard.webp"
+  url="app.happydomain.org/domains/example.com/checks"
   alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine"
 >}}
 Les vérificateurs d'happy<span class="fw-bold">Domain</span> contrôlent en continu les expirations, le DNSSEC, la délégation, les certificats et la disponibilité des services pour chaque domaine que vous gérez.

content/use-happyDomain/freelance.en.md

@@ -23,6 +23,7 @@ An expired domain, broken mail, an invalid certificate. Too often, the person wh
 {{< usage-feature
   title="All your clients' domains, grouped by client."
   image="/img/screenshots/domains-list.webp"
+  url="app.happydomain.org/domains"
   alt="List of domain names, cleverly grouped by client"
 >}}
 No matter how many clients you follow, happy<span class="fw-bold">Domain</span> gives you a clear overview of every domain you are responsible for, organized your way.
@@ -33,6 +34,7 @@ One login, one inventory, no more digging through password managers to answer a
 {{< usage-feature
   title="One interface, whatever your client's provider."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="A zone displayed the same way, whatever the provider behind it"
   flip="true"
   bg="green"
@@ -45,6 +47,7 @@ Every zone is displayed and edited the same way, so a new client with an exotic
 {{< usage-feature
   title="Fix issues before your client even notices."
   image="/img/screenshots/checks-dashboard.webp"
+  url="app.happydomain.org/domains/example.com/checks"
   alt="Monitoring dashboard showing the status of every check on a client domain"
 >}}
 happy<span class="fw-bold">Domain</span>'s built-in checkers keep watch over every client domain: expiry dates, DNSSEC, mail and web service availability, TLS certificates and more, all reported with a clear <span class="fw-bold">OK</span> / <span class="fw-bold">Warning</span> / <span class="fw-bold">Critical</span> status.
@@ -55,6 +58,7 @@ Get notified the moment something changes, fix it quietly, and show up looking l
 {{< usage-feature
   title="Respond to every request with ease."
   image="/img/screenshots/domain-services.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Services attached to a domain, described in plain words"
   flip="true"
   bg="plum"
@@ -67,6 +71,7 @@ Less time decoding record types, more time delivering.
 {{< usage-feature
   title="Collaborate on a zone with your client or your team."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Zone management shared with clients and collaborators"
   coming_soon="true"
 >}}

content/use-happyDomain/freelance.fr.md

@@ -23,6 +23,7 @@ Un domaine expiré, un mail en panne, un certificat invalide. Trop souvent, celu
 {{< usage-feature
   title="Tous les domaines de vos clients, regroupés par client."
   image="/img/screenshots/domains-list.webp"
+  url="app.happydomain.org/domains"
   alt="Liste des domaines, regroupés astucieusement par client"
 >}}
 Quel que soit le nombre de clients que vous suivez, happy<span class="fw-bold">Domain</span> vous donne un aperçu clair de chaque domaine dont vous êtes responsable, organisé à votre façon.
@@ -33,6 +34,7 @@ Un seul login, un seul inventaire, fini de fouiller dans les gestionnaires de mo
 {{< usage-feature
   title="Une seule interface, quel que soit l'hébergeur de votre client."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Une zone affichée de la même façon, quel que soit l'hébergeur derrière"
   flip="true"
   bg="green"
@@ -45,6 +47,7 @@ Chaque zone s'affiche et s'édite de la même façon, ainsi un nouveau client av
 {{< usage-feature
   title="Corrigez les problèmes avant même que votre client ne s'en aperçoive."
   image="/img/screenshots/checks-dashboard.webp"
+  url="app.happydomain.org/domains/example.com/checks"
   alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine client"
 >}}
 Les vérificateurs intégrés de happy<span class="fw-bold">Domain</span> veillent sur chaque domaine client : dates d'expiration, DNSSEC, disponibilité des services mail et web, certificats TLS et plus encore, le tout reporté avec un statut clair <span class="fw-bold">OK</span> / <span class="fw-bold">Avertissement</span> / <span class="fw-bold">Critique</span>.
@@ -55,6 +58,7 @@ Soyez notifié dès qu'un changement survient, corrigez-le discrètement, et aff
 {{< usage-feature
   title="Répondez à toutes les demandes en toute simplicité."
   image="/img/screenshots/domain-services.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Services attachés à un domaine, décrits avec des mots simples"
   flip="true"
   bg="plum"
@@ -67,6 +71,7 @@ Moins de temps à décoder les types d'enregistrements, plus de temps à livrer.
 {{< usage-feature
   title="Collaborez sur une zone avec votre client ou votre équipe."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Gestion de zone partagée avec les clients et les collaborateurs"
   coming_soon="true"
 >}}

content/use-happyDomain/geek.en.md

@@ -23,6 +23,7 @@ Each registrar's interface decides what you can do and how. Moving your zones el
 {{< usage-feature
   title="A simple and clear interface, whatever the host."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="A zone displayed in a clear, human-readable way"
 >}}
 Whether your zones live at a registrar or on your own servers, happy<span class="fw-bold">Domain</span> displays them the same clear way, limiting errors.
@@ -34,6 +35,7 @@ Install happy<span class="fw-bold">Domain</span> next to your Bind or PowerDNS a
 {{< usage-feature
   title="Self-hosting made easy, even for DNS."
   image="/img/screenshots/providers-list.webp"
+  url="app.happydomain.org/providers"
   alt="List of supported providers, from cloud services to self-hosted servers"
   flip="true"
   bg="green"
@@ -48,6 +50,7 @@ happy<span class="fw-bold">Domain</span> is open source, needs very few resource
 {{< usage-feature
   title="Tinker without fear: preview, history, rollback."
   image="/img/screenshots/zone-diff.webp"
+  url="app.happydomain.org/domains/example.com/diff"
   alt="Review and confirm the changes that will be applied"
 >}}
 Before any change is published, happy<span class="fw-bold">Domain</span> shows you exactly what will be modified and asks for confirmation. No more silent typos.
@@ -58,6 +61,7 @@ And since every version of your zone is kept in history, you can experiment free
 {{< usage-feature
   title="Set up any service in all simplicity."
   image="/img/screenshots/domain-services.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Services attached to a domain, described in plain words"
   flip="true"
   bg="plum"
@@ -70,6 +74,7 @@ We are committed to providing the latest in DNS registration and services, so yo
 {{< usage-feature
   title="Manage easily, even special zones."
   image="/img/screenshots/service-caa.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Editing an advanced DNS service through a guided form"
   coming_soon="true"
 >}}

content/use-happyDomain/geek.fr.md

@@ -23,6 +23,7 @@ L'interface de chaque registrar décide de ce que vous pouvez faire et comment.
 {{< usage-feature
   title="Une interface simple et claire, quel que soit l'hébergeur."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Une zone affichée de manière claire et lisible"
 >}}
 Que vos zones soient chez un registrar ou sur vos propres serveurs, happy<span class="fw-bold">Domain</span> les affiche de la même manière claire, pour limiter les erreurs.
@@ -34,6 +35,7 @@ Installez happy<span class="fw-bold">Domain</span> à côté de votre Bind ou Po
 {{< usage-feature
   title="L'auto-hébergement facilité, même pour le DNS."
   image="/img/screenshots/providers-list.webp"
+  url="app.happydomain.org/providers"
   alt="Liste des fournisseurs pris en charge, des services cloud aux serveurs auto-hébergés"
   flip="true"
   bg="green"
@@ -48,6 +50,7 @@ happy<span class="fw-bold">Domain</span> est open source, n'a besoin que de trè
 {{< usage-feature
   title="Bidouillez sans crainte : aperçu, historique, retour arrière."
   image="/img/screenshots/zone-diff.webp"
+  url="app.happydomain.org/domains/example.com/diff"
   alt="Vérifiez et confirmez les modifications qui seront appliquées"
 >}}
 Avant la publication de toute modification, happy<span class="fw-bold">Domain</span> vous montre exactement ce qui va changer et demande confirmation. Fini les fautes de frappe silencieuses.
@@ -58,6 +61,7 @@ Et comme chaque version de votre zone est conservée dans l'historique, vous pou
 {{< usage-feature
   title="Répondez à tous vos besoins en toute simplicité."
   image="/img/screenshots/domain-services.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Services rattachés à un domaine, décrits en mots simples"
   flip="true"
   bg="plum"
@@ -70,6 +74,7 @@ Nous avons à cœur de mettre à disposition les dernières nouveautés en terme
 {{< usage-feature
   title="Gérez simplement, même les zones spéciales."
   image="/img/screenshots/service-caa.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Édition d'un service DNS avancé via un formulaire guidé"
   coming_soon="true"
 >}}

content/use-happyDomain/sysadmin.en.md

@@ -23,6 +23,7 @@ You're the only one trusted to touch DNS, so every record request becomes a tick
 {{< usage-feature
   title="Edit all your zones in one place, internal and public."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="A zone displayed the same clear way, whatever the host"
 >}}
 Whatever the host of your zones, happy<span class="fw-bold">Domain</span> displays them in the same clear way, limiting errors.
@@ -33,6 +34,7 @@ Install happy<span class="fw-bold">Domain</span> next to your Bind or PowerDNS a
 {{< usage-feature
   title="View your changes before applying them."
   image="/img/screenshots/zone-diff.webp"
+  url="app.happydomain.org/domains/example.com/diff"
   alt="Review and confirm the changes that will be applied"
   flip="true"
   bg="green"
@@ -45,6 +47,7 @@ You can even select which changes go out now and which ones should wait.
 {{< usage-feature
   title="Full history, instant rollback."
   image="/img/screenshots/domain-history.webp"
+  url="app.happydomain.org/domains/example.com/logs"
   alt="History of every version of a zone"
 >}}
 Every version of every zone is kept, with who changed what and when.
@@ -55,6 +58,7 @@ When something breaks, you don't reconstruct the previous state from backups: yo
 {{< usage-feature
   title="Catch problems before they become outages."
   image="/img/screenshots/checks-dashboard.webp"
+  url="app.happydomain.org/domains/example.com/checks"
   alt="Monitoring dashboard showing the status of every check on a domain"
   flip="true"
   bg="plum"
@@ -67,6 +71,7 @@ Each check is evaluated against clear rules and reported as <span class="fw-bold
 {{< usage-feature
   title="Share zone management with your teams."
   image="/img/screenshots/domain-abstract-records.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Zone management shared between teams"
   coming_soon="true"
 >}}
@@ -78,6 +83,7 @@ Delegate all or only part of a zone, down to a single record. The routine reques
 {{< usage-feature
   title="Manage simply, even the special zones."
   image="/img/screenshots/service-caa.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Editing an advanced DNS service through a guided form"
   flip="true"
   bg="green"

content/use-happyDomain/sysadmin.fr.md

@@ -23,6 +23,7 @@ Vous êtes la seule personne de confiance pour toucher au DNS, alors chaque dema
 {{< usage-feature
   title="Éditez toutes vos zones au même endroit, internes et publiques."
   image="/img/screenshots/domain-abstract.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Une zone affichée de la même manière claire, quel que soit l'hébergeur"
 >}}
 Quel que soit l'hébergeur de vos zones, happy<span class="fw-bold">Domain</span> les affiche de la même manière claire, pour limiter les erreurs.
@@ -33,6 +34,7 @@ Installez happy<span class="fw-bold">Domain</span> à côté de votre Bind ou Po
 {{< usage-feature
   title="Visualisez vos modifications avant de les appliquer."
   image="/img/screenshots/zone-diff.webp"
+  url="app.happydomain.org/domains/example.com/diff"
   alt="Relisez puis confirmez les modifications qui seront appliquées"
   flip="true"
   bg="green"
@@ -45,6 +47,7 @@ Vous pouvez même sélectionner les changements qui partent maintenant et ceux q
 {{< usage-feature
   title="Historique complet, retour arrière instantané."
   image="/img/screenshots/domain-history.webp"
+  url="app.happydomain.org/domains/example.com/logs"
   alt="Historique de chaque version d'une zone"
 >}}
 Chaque version de chaque zone est conservée, avec qui a changé quoi et quand.
@@ -55,6 +58,7 @@ Quand quelque chose casse, vous ne reconstruisez pas l'état précédent à part
 {{< usage-feature
   title="Détectez les problèmes avant qu'ils ne deviennent des pannes."
   image="/img/screenshots/checks-dashboard.webp"
+  url="app.happydomain.org/domains/example.com/checks"
   alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine"
   flip="true"
   bg="plum"
@@ -67,6 +71,7 @@ Chaque vérification est évaluée selon des règles claires et reportée en <sp
 {{< usage-feature
   title="Partagez la gestion de la zone avec vos équipes."
   image="/img/screenshots/domain-abstract-records.webp"
+  url="app.happydomain.org/domains/example.com"
   alt="Gestion de zone partagée entre les équipes"
   coming_soon="true"
 >}}
@@ -78,6 +83,7 @@ Déléguez tout ou seulement une partie d'une zone, jusqu'à un seul enregistrem
 {{< usage-feature
   title="Gérez simplement, même les zones spéciales."
   image="/img/screenshots/service-caa.webp"
+  url="app.happydomain.org/domains/example.com/services"
   alt="Édition d'un service DNS avancé via un formulaire guidé"
   flip="true"
   bg="green"

layouts/partials/usage-browser.html

@@ -0,0 +1,22 @@
+{{/*
+  Wraps a screenshot in a fake browser frame, like the hero on the home page.
+  Params (passed as a dict):
+    image (required) — screenshot URL
+    alt              — alt text
+    url              — address shown in the URL bar (default: app.happydomain.org)
+*/}}
+{{ $image := .image }}
+{{ $alt := .alt | default "" }}
+{{ $url := .url | default "app.happydomain.org" }}
+<div class="usage-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"></i>
+      <span>{{ $url }}</span>
+    </div>
+  </div>
+  <div class="browser-body">
+    <img src="{{ $image }}" alt="{{ $alt }}">
+  </div>
+</div>

layouts/shortcodes/usage-feature.html

@@ -1,5 +1,6 @@
 {{ $image := .Get "image" }}
 {{ $alt := .Get "alt" | default "" }}
+{{ $url := .Get "url" }}
 {{ $title := .Get "title" }}
 {{ $flip := eq (.Get "flip") "true" }}
 {{ $bg := .Get "bg" | default "" }}
@@ -9,12 +10,14 @@
 {{ if eq $bg "green" }}{{ $style = "background: var(--hd-green-50)" }}{{ end }}
 {{ if eq $bg "plum" }}{{ $style = "background: var(--hd-plum-100)" }}{{ end }}
 
+{{ $browserArgs := dict "image" $image "alt" $alt "url" $url }}
+
 <div class="container-fluid py-5"{{ with $style }} style="{{ . }}"{{ end }}>
   <div class="container my-5">
     <div class="row">
       {{ if $flip }}
       <div class="order-1 order-md-0 col-md-7 align-self-center">
-        <img class="rounded img-thumbnail" src="{{ $image }}" alt="{{ $alt }}">
+        {{ partial "usage-browser.html" $browserArgs }}
       </div>
       <div class="order-0 order-md-1 col-md-5 align-self-center text-center">
       {{ else }}
@@ -28,7 +31,7 @@
       </div>
       {{ if not $flip }}
       <div class="order-1 col-md-7 py-2 align-self-center">
-        <img class="rounded img-thumbnail" src="{{ $image }}" alt="{{ $alt }}">
+        {{ partial "usage-browser.html" $browserArgs }}
       </div>
       {{ end }}
     </div>

static/css/custom.css

@@ -1,3 +1,65 @@
+/* Fake browser frame wrapping usage screenshots (see partials/usage-browser.html) */
+.usage-browser {
+    background: var(--hd-bg-canvas);
+    border: 1px solid var(--hd-border-1);
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
+}
+
+.usage-browser .browser-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    background: var(--hd-bg-subtle);
+    border-bottom: 1px solid var(--hd-border-1);
+}
+
+.usage-browser .browser-dots {
+    display: flex;
+    gap: 6px;
+}
+
+.usage-browser .browser-dots span {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--hd-border-2);
+}
+
+.usage-browser .browser-url {
+    flex: 1;
+    font-family: var(--hd-font-mono, monospace);
+    font-size: 11px;
+    background: var(--hd-bg-canvas);
+    border: 1px solid var(--hd-border-1);
+    border-radius: 5px;
+    padding: 4px 10px;
+    color: var(--hd-fg-3);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.usage-browser .browser-url .lock {
+    color: var(--hd-accent);
+    font-size: 10px;
+}
+
+.usage-browser .browser-body {
+    display: block;
+}
+
+.usage-browser .browser-body img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
 nav.navbar {
     background: var(--hd-bg-canvas);
     box-shadow: 0 0px 3px 0 var(--hd-accent);