<section
    class="py-5 mt-n1 mb-0"
    style="
        background: linear-gradient(
            135deg,
            var(--primary-ultralight) 0%,
            white 100%
        );
    "
>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 d-flex flex-column mb-5 align-items-center">
                <img
                    src="/img/screenshots/happydomain-rounded.webp"
                    alt="happyDomain logo"
                    style="width: 100%; max-width: 40vw"
                />
            </div>
            <div class="col">
                <div class="row">
                    <div
                        class="col col-sm-8 offset-sm-2 col-md-10 offset-md-1 col-xl-8 offset-xl-2"
                    >
                        <h2
                            class="display-4 text-center text-dark fw-bold"
                            style="text-wrap: balance"
                        >
                            {{ i18n "slogan" | safeHTML }}
                        </h2>
                    </div>
                </div>
                <p class="mt-5 lead text-center text-muted">
                    happy<strong>Domain</strong>
                    {{ i18n "lead" | markdownify }}
                </p>
                <div class="mt-5 py-2 d-none d-md-flex justify-content-center">
                    <a
                        class="btn btn-lg btn-primary px-4 me-3"
                        data-umami-event="jumbo-tryit"
                        href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
                        >{{ i18n "tryit" }} &#187;</a
                    >
                    <a
                        class="btn btn-lg btn-outline-secondary px-4 ms-3"
                        data-umami-event="jumbo-downloads"
                        href="#downloads"
                        >{{ i18n "downloadit" }}</a
                    >
                </div>
                <div
                    class="container mt-5 py-2 d-flex d-md-none flex-column justify-content-center"
                >
                    <a
                        class="btn btn-lg btn-primary px-4 mb-3"
                        data-umami-event="jumbo-tryit"
                        href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
                        style="border-radius: 2em"
                        >{{ i18n "tryit" }} &#187;</a
                    >
                    <a
                        class="btn btn-lg btn-outline-secondary px-4"
                        data-umami-event="jumbo-downloads"
                        href="#downloads"
                        style="border-radius: 2em"
                        >{{ i18n "downloadit" }}</a
                    >
                </div>

                <!--div class="mt-5 card bg-secondary text-light flex-row align-items-center" style="border-radius: .3rem">
          <div class="card-body">
            <h3>{{ i18n "conf-fosdem24-title" }}</h3>
            <p class="card-text">
              {{ i18n "conf-fosdem24-body-1" }}
              <a href="{{ i18n "conf-fosdem24-href" }}" target="_blank" rel="noopener"><em>{{ i18n "conf-fosdem24-link" }}</em></a>
              {{ i18n "conf-fosdem24-body-2" }}
            </p>
          </div>
          <img src="/img/assets/FOSDEM24_logo.png" alt="FOSDEM 2024" style="height: 10em">
        </div-->
            </div>
        </div>
    </div>
</section>
