index.html

---
layout: default
menu: home
---

{% assign hero = site.data.features.hero[site.active_lang] %}
<div class="container col-xxl-8 px-4 py-5">
    <div class="row flex-lg-row align-items-center g-5 py-5">
        <div class="col-10 col-sm-8 col-lg-6">
            <div class="screenshot d-block mx-lg-auto img-fluid" >
                <div class="pic" id="pic3"></div>
                <div class="pic" id="pic2"></div>
                <div class="pic" id="pic1"></div>
            </div>
        </div>
        <div class="col-lg-6">
            <img class="d-grid gap-2 mb-3 d-md-flex justify-content-md-start logo" src="/logo.png" alt="Logo" width="150" height="150">
            <h1 class="display-5 fw-bold lh-1 mb-2">{{ hero.title }}</h1>
            <h3 class="lead lh-1 mt-2">{{ hero.subtitle | markdownify }}</h3>
        </div>
    </div>
</div>

<div class="container col-xxl-8 px-4 py-5">
    <div class="align-items-center g-5 py-5">
        {%- if site.explainers.size > 0 -%}
        {%- assign cards = site.explainers | sort: "order" %}
        {%- for card in cards -%}

        <div class="card mb-5">
            <div class="card-body">
                <h5 class="card-title"><span class="iconify-inline" data-icon="{{ card.icon }}" style="color: green;"></span>&nbsp;&nbsp; {{ card.title | escape }}</h5>
                <p class="card-text">{{ card.content }}</p>

            </div>
        </div>
        {%- endfor -%}
        {%- endif -%}
    </div>
</div>