<div class="
  docs-bg-brand docs-text-white
  docs-px-4 docs-py-16 docs-text-center
" ...attributes>
  <div class="docs-max-w-sm docs-mx-auto">
    <h1 class="
      docs-font-title docs-font-normal docs-text-jumbo-1 md:docs-text-jumbo-2 xl:docs-text-jumbo-3
      docs-leading-none docs-tracking-tight
    ">
      {{#if this.prefix}}
        <span class="docs-block docs-text-large-5 md:docs-text-large-6 xl:docs-text-large-7">
          {{this.prefix}}
        </span>
      {{/if}}

      {{this.heading}}
    </h1>

    <p class="
      docs-mt-4 xl:docs-mt-6 docs-mb-2 docs-leading-small docs-mx-auto docs-tracking-tight
      docs-text-large-1 md:docs-text-large-2 xl:docs-text-large-3
    ">
      {{this.byline}}
    </p>

    <div class="docs-mt-8">
      <LinkTo @route="docs" class="
        docs-no-underline docs-bg-white docs-text-brand docs-text-xs docs-px-3 docs-py-2
        docs-rounded docs-mt-4 docs-shadow-md hover:docs-shadow-lg
        docs-transition hover:docs-nudge-t docs-font-bold docs-inline-block docs-uppercase
      ">
        Read the docs
      </LinkTo>
    </div>

    {{yield}}
  </div>
</div>
