{{ with (.Site.GetPage "/headless/main/hero") }}
  <section class="hero">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="hero__content">
            <h1 class="hero__title">{{ .Params.title }}</h1>
            <p class="hero__subtitle">{{ .Params.subtitle }}</p>
            <div class="hero__buttons">
              <a data-metric-loc="hero" href="{{ .Params.startFree.url }}" class="button button_contained button_lg"
                >{{ .Params.startFree.text }}</a
              >
              <a data-metric-loc="hero" href="{{ .Params.learnMore.url }}" class="button button_outlined button_lg"
                >{{ .Params.learnMore.text }}</a
              >
            </div>
          </div>
        </div>
      </div>
      <a href="{{ .Params.githubStars.actionUrl }}" type="button" class="hero__stars" target="_blank">
        {{ .Params.githubStars.logo | safeHTML }}
        <span class="hero__stars-text">{{ .Params.githubStars.actionText }}</span>
        <span class="hero__stars-count">
          {{ .Params.githubStars.starIcon | safeHTML }}
          {{ with (.Site.GetPage "/headless/stats") }}
            {{ .Params.stats.githubStars }}
          {{ end }}
        </span>
      </a>
    </div>
    <div class="hero__image">
      <picture>
        {{ range .Params.heroImageSources }}
          <source
            {{ if
              .minWidth
            }}
              media="(min-width: {{ .minWidth }})"
            {{ end }}
            srcset="{{ .srcset }}"
            type="{{ .type }}"
          />
        {{ end }}
        <img src="{{ .Params.fallbackHeroImage.src }}" alt="{{ .Params.fallbackHeroImage.alt }}" draggable="false" />
      </picture>
    </div>
  </section>
{{ end }}