index.html

{{ define "main" -}}
{{- $breakpoint := $.Scratch.Get "breakpoint" -}}


<div class="container-xxl flex-fill p-4 px-xxl-0">
  <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
    <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-12">
      {{- $metadata := "full" -}}
      {{ if isset .Params "metadata" }}
      {{ $metadata = .Params.metadata }}
      {{ else }}
      {{- with (index site.Params.pages .Type ) -}}
      {{ if isset . "metadata" }}{{ $metadata = (index . "metadata") }}{{ end }}
      {{- end -}}
      {{ end }}

      {{- $supportedStates := slice "full" "original" "none" -}}
      {{- if not (in $supportedStates $metadata) -}}
      {{- errorf "layout [_default/single/header.html] - Invalid value for param 'metadata': %s" $metadata -}}
      {{- end -}}

      <div class="row justify-content-center mt-5">
        <div class="col-lg-8 text-center">

          <img alt="passkey icon" src="img/logos/pdd-icon-color-simple.svg" width="20%" />

          <div class="mt-4">
            <p class="display-6 mt-0 mb-5">Hello <span class="fw-bold">passkeys!</span><br><span class="fade-out-text">Goodbye passwords.</span></p>
            <a aria-label="Get started" href="docs/intro/what-are-passkeys/" class="btn btn-primary position-relative"
              role="button">
              <span class="d-flex justify-content-center">
                <span class="my-auto fw-bolder">Get Started</span>
              </span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Mastodon verification --><a rel="me" href="https://fosstodon.org/@passkeysdev" aria-label="Mastodon verification"></a>
{{ end -}}