{{ define "main" }}
{{ $shortDesc := site.Params.description.brief | markdownify }}
{{ $longDesc  := site.Params.description.long | markdownify }}
{{ $buttons   := site.Params.home.buttons }}
{{ $logo      := site.Params.logos.color | relURL }}
{{ $cncfLogo  := site.Params.logos.cncf | relURL }}
{{ $features  := site.Data.features }}
<section class="hero is-fullheight-with-navbar is-light">
  <div class="hero-body home-page">
    <div class="container has-text-centered">
      <img class="is-home-logo" src="{{ $logo }}" alt="Main TiKV logo">

      <br />

      <p class="title is-size-1-desktop is-size-3-touch is-spaced">
        <span>
          {{ $shortDesc }}
        </span>
      </p>

      <p class="subtitle is-size-3 is-size-4-tablet is-size-5-mobile">
        {{ $longDesc }}
      </p>

      <div class="notification is-radiusless">
        <p class="title is-size-3 is-size-4-mobile">
          We are a <a href="https://cncf.io" target="_blank" class="is-link">Cloud Native Computing Foundation</a> graduated project. 🎉
        </p>

        <img class="is-cncf-logo" src="{{ $cncfLogo }}" alt="Cloud Native Computing Foundation logo">
      </div>
    </div>
  </div>
</section>

<section class="section has-background-primary">
  <div class="container">
    <div class="columns">
      {{ range where $features "featured" true }}
      <div class="column">
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">
              {{ .name }}
            </p>
            {{ with .icon }}
            <div class="card-header-icon">
              <span class="icon has-text-primary">
                <i class="fas {{ . }}" aria-hidden="true"></i>
              </span>
            </div>
            {{ end }}
          </header>
          {{ with .description }}
          <div class="card-content">
            <div class="content">
              {{ . | markdownify }}
            </div>
          </div>
          {{ end }}
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>

<!--
<section class="section">
  <div class="container has-text-centered">
    <p class="title is-size-4 is-size-5-mobile">
     TiKV is a <a>Cloud Native Computing Foundation</a> incubating project
    </p>

    <img class="image is-cncf-logo" src="{{ $cncfLogo }}" alt="Cloud Native Computing Foundation logo">
  </div>
</section>
-->
{{ end }}