{{ define "main" }}
<div class="cp-home">
    <section class="cp-hero">
        <figure class="cp-polaroid">
            <img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="900" height="560" fetchpriority="high">
        </figure>
        <div class="cp-hero-copy">
            <p class="cp-tagline">{{ .Params.hero_tagline | default "Service public numérique — petite enfance" }}</p>
            <h1>{{ .Title }}</h1>
        </div>
    </section>
    <div class="cp-zine-grid">
        <div class="cp-panel cp-panel--mint">
            {{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
        </div>
        <div class="cp-panel">
            <div class="cp-stickers" aria-label="Engagements">
                {{ range .Params.ethics }}
                <div class="cp-sticker"><strong>{{ .title }}</strong>{{ .detail }}</div>
                {{ end }}
            </div>
        </div>
    </div>
    <div class="cp-band">
        {{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
    </div>
    <section class="cp-cta" aria-labelledby="cp-cta-title">
        <h2 id="cp-cta-title">{{ .Params.cta_title | default "Passer à l'action" }}</h2>
        <div>
            <a class="cp-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
            <a class="cp-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
        </div>
    </section>
</div>
{{ end }}