{{ define "main" }}
{{ $lang := .Site.Language.Lang }}
<section class="hero">
  <div class="hero-copy">
    <h1>{{ .Params.hero.title }}</h1>
    <p class="tagline">{{ .Params.hero.tagline }}</p>
    <p class="lead">{{ .Params.hero.lead }}</p>
    {{ .Content }}
    {{ partial "store-badges.html" . }}
  </div>
  {{ $shot := resources.Get (printf "screenshots/%s/inventory.png" $lang) }}
  {{ with $shot }}
  <div class="hero-shot">
    <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane inventory" loading="eager" /></div>
  </div>
  {{ end }}
</section>

<section class="pillars">
  {{ range .Params.pillars }}
  <article class="pillar">
    <div class="pillar-icon" aria-hidden="true">{{ .icon }}</div>
    <h2>{{ .title }}</h2>
    <p>{{ .body }}</p>
  </article>
  {{ end }}
</section>

{{ $screens := slice "home" "inventory" "market" "calendar" "detail" }}
<section class="shots">
  <h2>{{ T "screenshotsTitle" }}</h2>
  <div class="shot-row">
    {{ range $s := $screens }}
      {{ $img := resources.Get (printf "screenshots/%s/%s.png" $lang $s) }}
      {{ with $img }}
      <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane {{ $s }}" loading="lazy" /></div>
      {{ end }}
    {{ end }}
  </div>
</section>

<section class="values">
  <h2>{{ .Params.values.title }}</h2>
  <ul>
    {{ range .Params.values.points }}<li>{{ . }}</li>{{ end }}
  </ul>
</section>

<section class="get-it" id="get">
  <h2>{{ T "getItTitle" }}</h2>
  {{ partial "store-badges.html" . }}
</section>
{{ end }}