{include file="_partials/head.tpl"}

<div class="hb hb--home">
  <div class="hb-wrap">
    <header class="hb-hero">
      <span class="hb-hero__eyebrow"><svg class="cz-ic"><use href="#i-cap"/></svg> {lang key="handbook.title"}</span>
      <h1>{lang key="handbook.hero_title"}</h1>
      <p>{lang key="handbook.hero_sub"}</p>
      <div class="hb-langs hb-langs--hero">
        [foreach var="lang_links" as="l"]<a href="{l.href}" hreflang="{l.code}" class="[if {l.is_active}="1"]is-active[/if]">{l.label}</a>[/foreach]
      </div>
    </header>

    <div class="hb-cards">
      [foreach var="docs_cards" as="g"]
      <section class="hb-card">
        <div class="hb-card__head"><svg class="cz-ic"><use href="#{g.icon}"/></svg> <h2>{g.title}</h2></div>
        <ul class="hb-card__list">
          [foreach var="g.items" as="it"]<li><a href="{it.url}"><svg class="cz-ic"><use href="#i-arrow"/></svg> {it.title}</a></li>[/foreach]
        </ul>
      </section>
      [/foreach]
    </div>
  </div>
</div>

{include file="_partials/foot.tpl"}
