<section id="discover" class="py-5" style="background: linear-gradient(to right, var(--secondary-ultralight) 0%, white 100%)">
    <div class="container">
        <div class="section-title text-center mb-5">
            <h2 class="mb-3 display-4">
                {{ i18n "discover-title" }}
            </h2>
            <div class="row">
                <p class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 text-muted" style="font-size: 1.15rem;">
                    {{ i18n "discover-lead" }}
                </p>
            </div>
        </div>

        <div class="steps">
            <div class="step">
                <div class="step-number">1</div>
                <h3>{{ i18n "discover-1-title" }}</h3>
                <p>{{ i18n "discover-1-text" }}</p>
            </div>
            <div class="step">
                <div class="step-number">2</div>
                <h3>{{ i18n "discover-2-title" }}</h3>
                <p>{{ i18n "discover-2-text" }}</p>
            </div>
            <div class="step">
                <div class="step-number">3</div>
                <h3>{{ i18n "discover-3-title" }}</h3>
                <p>{{ i18n "discover-3-text" }}</p>
            </div>
        </div>

        <h3 class="text-center my-5">
            {{ i18n "learnhow" }} happy<strong>Domain</strong> {{ i18n "canhelpyou" }}
        </h3>
        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 justify-content-center">
            <div class="col mb-4">
                <a href="{{ ref . "/use-happyDomain/freelance" }}" class="card h-100" data-umami-event="learnmore-freelance">
                    <img src="/img/screenshots/users/freelance.webp" alt="{{ i18n "freelance" }}" class="img-top flex-grow-1">
                    <h3 class="text-center mt-1">{{ i18n "freelance" }}</h3>
                </a>
            </div>
            <div class="col mb-4">
                <a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="card h-100" data-umami-event="learnmore-sysadmin">
                    <img src="/img/screenshots/users/sysadmin.webp" alt="{{ i18n "sysadmin" }}" class="img-top flex-grow-1">
                    <h3 class="text-center mt-1">{{ i18n "sysadmin" }}</h3>
                </a>
            </div>
            <div class="col mb-4">
                <a href="{{ ref . "/use-happyDomain/devops" }}" class="card h-100" data-umami-event="learnmore-devops">
                    <img src="/img/screenshots/users/devops.webp" alt="{{ i18n "devops" }}" class="img-top flex-grow-1">
                    <h3 class="text-center mt-1">{{ i18n "devops" }}</h3>
                </a>
            </div>
            <div class="col mb-4">
                <a href="{{ ref . "/use-happyDomain/cio" }}" class="card h-100" data-umami-event="learnmore-cio">
                    <img src="/img/screenshots/users/cio.webp" alt="{{ i18n "cio" }}" class="img-top flex-grow-1">
                    <h3 class="text-center mt-1">{{ i18n "cio" }}</h3>
                </a>
            </div>
            <div class="col mb-4">
                <a href="{{ ref . "/use-happyDomain/geek" }}" class="card h-100" data-umami-event="learnmore-geek">
                    <img src="/img/screenshots/users/geek.webp" alt="{{ i18n "geek" }}" class="img-top flex-grow-1">
                    <h3 class="text-center mt-1">{{ i18n "geek" }}</h3>
                </a>
            </div>
        </div>
    </div>
</section>
