{{/*
  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>