website/layouts/partials/jumbo.html

<style>
.jumbo-hero {
    padding: 8rem 0 5rem;
    background: linear-gradient(135deg, var(--hd-accent-subtle, #f0fdf4) 0%, var(--hd-bg-canvas, white) 60%);
}
.hero-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    color: var(--hd-fg-3, #6b7280);
}
.hero-eyebrow .badge-os {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25em .75em;
    background: var(--hd-accent-subtle, #f0fdf4);
    border: 1px solid var(--hd-accent, #22c55e);
    border-radius: 2em;
    color: var(--hd-accent, #22c55e);
    font-weight: 600;
    font-size: .8rem;
}
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    font-size: .875rem;
    color: var(--hd-fg-3, #6b7280);
}
.hero-meta .check { color: var(--hd-accent, #22c55e); margin-right: .25rem; }
/* Browser mockup */
.hero-stack { position: relative; }
.hero-stack .browser:last-child {
    position: absolute;
    bottom: 0; right: 0;
    width: 86%;
    z-index: 0;
    opacity: .45;
    pointer-events: none;
}
.hero-stack .browser:first-child { position: relative; z-index: 1; }
.browser {
    background: var(--hd-bg-canvas, #fff);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
    overflow: hidden;
    border: 1px solid var(--hd-border, #e5e7eb);
}
.browser-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    background: var(--hd-bg-subtle, #f9fafb);
    border-bottom: 1px solid var(--hd-border, #e5e7eb);
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--hd-border, #e5e7eb); }
.browser-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .01rem;
    background: var(--hd-bg-canvas, #fff);
    border-radius: 4px;
    padding: .22rem .6rem;
    font-size: .75rem;
    color: var(--hd-fg-3, #6b7280);
}
.browser-url .lock { color: var(--hd-accent, #22c55e); font-size: .7rem; }
</style>

<section class="jumbo-hero">
    <div class="container">
        <div class="row align-items-center g-5">

            <!-- Copy column -->
            <div class="col-lg-5">
                <a class="hero-eyebrow" href="https://git.happydomain.org/" target="_blank">
                    <span class="badge-os"><i class="bi bi-git"></i> Open source</span>
                </a>

                <h1 class="display-4 fw-bold mb-5" style="text-wrap: balance">
                    {{ i18n "slogan" | safeHTML }}
                </h1>

                <p class="lead mb-5 pb-2">
                    happy<strong>Domain</strong> {{ i18n "lead" | markdownify }}
                </p>

                <div class="d-flex flex-wrap gap-3">
                    <a
                        class="btn btn-lg btn-primary px-4"
                        data-umami-event="jumbo-tryit"
                        href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
                    >
                        {{ i18n "tryit" }} <i class="bi bi-arrow-right"></i>
                    </a>
                    <a
                        class="btn btn-lg btn-outline-dark px-4"
                        data-umami-event="jumbo-downloads"
                        href="#downloads"
                    >
                        <i class="bi bi-box-seam"></i> {{ i18n "downloadit" }}
                    </a>
                </div>

                <div class="hero-meta">
                    <span><i class="bi bi-check2 check"></i><strong>No account</strong> needed for the demo</span>
                    <span><i class="bi bi-check2 check"></i><strong>~30s</strong> to first zone</span>
                    <span><i class="bi bi-check2 check"></i><strong>55+</strong> providers</span>
                </div>
            </div>

            <!-- Visual column -->
            <div class="col-lg-7 d-none d-lg-block">
                <div class="hero-stack">
                    <!-- Front browser frame: zone editor -->
                    <div class="browser">
                        <div class="browser-bar">
                            <div class="browser-dots"><span></span><span></span><span></span></div>
                            <div class="browser-url">
                                <i class="bi bi-lock-fill lock me-1"></i>
                                <span>app.</span><strong>happydomain.org</strong><span>/zone/happydomain.org</span>
                            </div>
                        </div>
                        <img
                            src="/img/screenshots/domain-abstract.webp"
                            alt="happyDomain zone editor"
                            style="width:100%;display:block"
                        />
                    </div>
                    <!-- Back browser frame, peeking -->
                    <div class="browser" aria-hidden="true">
                        <div class="browser-bar">
                            <div class="browser-dots"><span></span><span></span><span></span></div>
                            <div class="browser-url"><i class="bi bi-lock-fill lock"></i><span>try.</span><strong>happydomain.org</strong></div>
                        </div>
                        <div style="padding:14px 16px;height:120px;background:var(--hd-bg-subtle,#f9fafb)"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>