{{ partial "header" . }}

<div class="landing page">
  <section class="landing hero">
    <div class="contained">

      <div class="hero-copy">
        <h1 class="headline">{{ .Site.Data.landing.hero.headline | markdownify }}</h1>
        <span class="subhead">{{ .Site.Data.landing.hero.subhead | markdownify }}</span>
      </div>
      <div class="hero-features">
        <h2>{{ .Site.Data.landing.hero.devhook | markdownify }}</h2>
        {{ range $index, $id := .Site.Data.landing.hero.devfeatures }}
          <div class="feature">
            <h3>{{ .feature | markdownify }}</h3>
            <p>{{ .description | markdownify }}</p>
          </div>
        {{ end }}
      </div>
      <div class="hero-graphic">
        <img src="/img/demo.gif" class="responsive"/>
      </div>

    </div>
  </section>

  <section class="cta">
    <div class="cta-primary">
      <p><span class="hook">{{ .Site.Data.landing.cta.primaryhook | markdownify }}</span>&nbsp;{{ .Site.Data.landing.cta.primary | markdownify }}</p>{{ .Site.Data.landing.cta.button | markdownify }}
    </div>
    <span class="cta-secondary">{{ .Site.Data.landing.cta.secondary | markdownify }}&nbsp;{{ .Site.Data.landing.cta.secondarylink | markdownify }}</span>
  </section>

  <section class="editors">
    <div class="contained">
      <h2>{{ .Site.Data.landing.editors.hook | markdownify }}</h2>
      <p>{{ .Site.Data.landing.editors.intro | markdownify }}</p>
      <div class="editors-features">
        {{ range $index, $id := .Site.Data.landing.editors.features }}
        <div class="feature">
          <img src="{{ .imgpath }}" >
          <h3>{{ .feature | markdownify }}</h3>
          <p>{{ .description | markdownify }}</p>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

  <section class="communitysupport">
    <div class="contained">
      <h2>{{ .Site.Data.landing.community.hook | markdownify }}</h2>
      <div class="community-features">
        {{ range $index, $id := .Site.Data.landing.community.features }}
        <div class="feature">
          <h3>{{ .feature | markdownify }}</h3>
          <p>{{ .description | markdownify }}</p>
        </div>
        {{ end }}
        <div class="contributors feature">
          <h3>{{ .Site.Data.landing.community.contributors | markdownify }}</h3>
          <div class="contributor-list">
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
            <img src="https://place.cat/c/64/64" />
          </div>
        </div>
      </div>
    </div>
  </section>

{{ partial "footer" . }}