{{ define "main" }}

<section class="hero">
  <div class="hero-inner">
    <img class="hero-logo" src="{{ "logo.svg" | relURL }}" alt="TrainUs" width="96" height="96">
    <h1 class="hero-title">TrainUs</h1>
    <p class="hero-tagline">{{ .Site.Params.tagline }}</p>
    <div class="hero-actions">
      {{ if .Site.Params.appUrl -}}
        <a href="{{ .Site.Params.appUrl }}" class="btn btn-primary">{{ i18n "heroOpenApp" }}</a>
      {{- else -}}
        <span class="btn btn-primary btn-disabled"
              title="{{ i18n "heroOpenAppComingSoon" }}"
              aria-disabled="true"
              role="button">{{ i18n "heroOpenApp" }}</span>
      {{- end }}
      {{ with site.GetPage "/docs" }}<a href="{{ .RelPermalink }}" class="btn btn-secondary">{{ i18n "heroReadDocs" }}</a>{{ end }}
    </div>
  </div>
</section>

<section class="features">
  <div class="container">
    <div class="features-grid">

      <div class="feature-card">
        <div class="feature-icon" aria-hidden="true">🗄</div>
        <h2 class="feature-title">{{ i18n "featureLocalFirstTitle" }}</h2>
        <p class="feature-desc">{{ i18n "featureLocalFirstDesc" }}</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon" aria-hidden="true">👥</div>
        <h2 class="feature-title">{{ i18n "featureShareTitle" }}</h2>
        <p class="feature-desc">{{ i18n "featureShareDesc" }}</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon" aria-hidden="true">🌐</div>
        <h2 class="feature-title">{{ i18n "featureBilingualTitle" }}</h2>
        <p class="feature-desc">{{ i18n "featureBilingualDesc" }}</p>
      </div>

      <div class="feature-card">
        <div class="feature-icon" aria-hidden="true">📱</div>
        <h2 class="feature-title">{{ i18n "featurePwaTitle" }}</h2>
        <p class="feature-desc">{{ i18n "featurePwaDesc" }}</p>
      </div>

    </div>
  </div>
</section>

{{ end }}