Hero blocks

App screenshot

Centred copy above a full-bleed framed product shot, drawn as live markup rather than an image

labb block add lb/hero/app-screenshot

/blocks/app/lb/hero/app-screenshot/

<main class="overflow-hidden">

    <section class="container mx-auto max-w-3xl px-4 pt-24 pb-12 text-center">

        <div class="flex flex-col items-center">

            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-balance">
                See the quarter before it lands.
            </h1>

            <p class="mt-5 text-lg text-base-content/70 max-w-xl text-balance">
                Arden watches every renewal, flags the ones drifting and tells you what
                each will cost. Forty-six days of warning, on average.
            </p>

            <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
                <c-lb.button variant="primary" icon.end="rmx.arrow-right">
                    Start free trial
                </c-lb.button>
                <c-lb.button btnStyle="ghost" icon="rmx.play-circle">
                    Watch the 3-minute tour
                </c-lb.button>
            </div>

            <c-app-screenshot.trust />

        </div>

    </section>

    <c-app-screenshot.shot />

    <section class="container mx-auto max-w-4xl px-4 py-16">
        <c-app-screenshot.metrics />
    </section>

</main>

<c-vars height="40%" :muted="False" />

<div class="flex-1 rounded-sm {% if muted %}bg-primary/20{% else %}bg-primary/70{% endif %}"
     style="height: {{ height }}"></div>

<div class="grid border-t border-base-300 bg-base-100 sm:grid-cols-[13rem_1fr]">

    <aside class="hidden flex-col gap-1 border-r border-base-300 bg-base-200/50 p-4 sm:flex">
        <div class="mb-4 flex items-center gap-2">
            <c-arden.mark size="xs" />
            <span class="text-sm font-semibold tracking-tight">Arden</span>
        </div>
        <c-lb.menu size="sm" class="w-full p-0">
            <c-lb.menu.item active>
                <c-lbi.rmx.line-chart w="16" h="16" />
                Revenue
            </c-lb.menu.item>
            <c-lb.menu.item>
                <c-lbi.rmx.building w="16" h="16" />
                Customers
            </c-lb.menu.item>
            <c-lb.menu.item>
                <c-lbi.rmx.file-check w="16" h="16" />
                Invoices
            </c-lb.menu.item>
            <c-lb.menu.item>
                <c-lbi.rmx.calendar-check w="16" h="16" />
                Renewals
            </c-lb.menu.item>
        </c-lb.menu>
    </aside>

    <div class="flex flex-col gap-5 p-5">

        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="text-base font-semibold tracking-tight">Revenue · Q3</h2>
                <p class="text-xs text-base-content/50">1 July – 30 September</p>
            </div>
            <c-lb.badge variant="success" style="soft" size="sm">Synced 2m ago</c-lb.badge>
        </div>

        <div class="grid gap-3 sm:grid-cols-4">
            <c-app-screenshot.tile label="Net MRR" value="$412,900" delta="+4.2%" />
            <c-app-screenshot.tile label="Expansion" value="$38,100" delta="+11.6%" />
            <c-app-screenshot.tile label="Contraction" value="$9,700" delta="-1.4%" deltaClass="text-error" />
            <c-app-screenshot.tile label="At risk" value="$21,400" delta="-2.8%" deltaClass="text-error" />
        </div>

        <div class="rounded-lg border border-base-300 p-4">
            <div class="flex items-end gap-2 h-28" aria-hidden="true">
                <c-app-screenshot.bar height="34%" muted />
                <c-app-screenshot.bar height="42%" muted />
                <c-app-screenshot.bar height="38%" muted />
                <c-app-screenshot.bar height="51%" muted />
                <c-app-screenshot.bar height="47%" muted />
                <c-app-screenshot.bar height="63%" muted />
                <c-app-screenshot.bar height="58%" muted />
                <c-app-screenshot.bar height="72%" />
                <c-app-screenshot.bar height="69%" />
                <c-app-screenshot.bar height="88%" />
                <c-app-screenshot.bar height="81%" />
                <c-app-screenshot.bar height="100%" />
            </div>
            <div class="mt-3 text-xs text-base-content/50">Net revenue, last 12 months</div>
        </div>

        <c-lb.table size="sm" class="hidden sm:table">
            <thead>
                <tr>
                    <th>Workspace</th>
                    <th class="text-right">MRR</th>
                    <th class="text-right">Renews</th>
                    <th class="text-right">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="font-medium">AtlasForge</td>
                    <td class="tabular-nums text-right">$128,400</td>
                    <td class="tabular-nums text-right">12 Oct</td>
                    <td class="text-right">
                        <c-lb.badge variant="success" style="soft" size="sm">Renewed</c-lb.badge>
                    </td>
                </tr>
                <tr>
                    <td class="font-medium">Kite &amp; Bell</td>
                    <td class="tabular-nums text-right">$96,200</td>
                    <td class="tabular-nums text-right">03 Nov</td>
                    <td class="text-right">
                        <c-lb.badge variant="warning" style="soft" size="sm">At risk</c-lb.badge>
                    </td>
                </tr>
                <tr>
                    <td class="font-medium">Northwind Co</td>
                    <td class="tabular-nums text-right">$74,800</td>
                    <td class="tabular-nums text-right">28 Nov</td>
                    <td class="text-right">
                        <c-lb.badge variant="info" style="soft" size="sm">Expanding</c-lb.badge>
                    </td>
                </tr>
                <tr>
                    <td class="font-medium">Verity Labs</td>
                    <td class="tabular-nums text-right">$51,300</td>
                    <td class="tabular-nums text-right">09 Dec</td>
                    <td class="text-right">
                        <c-lb.badge style="soft" size="sm">Steady</c-lb.badge>
                    </td>
                </tr>
            </tbody>
        </c-lb.table>

    </div>

</div>

<div class="flex flex-col gap-6">

    <c-lb.stat.group class="w-full border border-base-300 shadow-sm">
        <c-lb.stat>
            <c-lb.stat.figure variant="primary" icon="rmx.line-chart" />
            <c-lb.stat.title>ARR under management</c-lb.stat.title>
            <c-lb.stat.value variant="primary" class="tabular-nums">$2.4B</c-lb.stat.value>
            <c-lb.stat.desc>Across 2,400 workspaces</c-lb.stat.desc>
        </c-lb.stat>
        <c-lb.stat>
            <c-lb.stat.figure variant="secondary" icon="rmx.file-check" />
            <c-lb.stat.title>Invoices reconciled</c-lb.stat.title>
            <c-lb.stat.value class="tabular-nums">8.1M</c-lb.stat.value>
            <c-lb.stat.desc>Nightly, without a spreadsheet</c-lb.stat.desc>
        </c-lb.stat>
        <c-lb.stat>
            <c-lb.stat.figure variant="accent" icon="rmx.calendar-check" />
            <c-lb.stat.title>Renewal warning</c-lb.stat.title>
            <c-lb.stat.value class="tabular-nums">46 days</c-lb.stat.value>
            <c-lb.stat.desc>Median lead time on churn risk</c-lb.stat.desc>
        </c-lb.stat>
    </c-lb.stat.group>

    <p class="text-center text-xs uppercase tracking-wider text-base-content/40">
        Trusted by 2,400+ finance and ops teams
    </p>

</div>

<div class="relative">

    <div class="absolute inset-x-0 top-1/4 bottom-0"
         style="background:
            radial-gradient(50% 70% at 26% 0%, #0e7490 0%, transparent 70%),
            radial-gradient(48% 66% at 58% 8%, #2563eb 0%, transparent 70%),
            radial-gradient(40% 58% at 86% 2%, #65a30d 0%, transparent 72%);
            opacity: 0.12;
            -webkit-mask-image: linear-gradient(black, transparent 88%);
            mask-image: linear-gradient(black, transparent 88%);"
         aria-hidden="true"></div>

    <div class="relative mx-auto max-w-6xl px-4">
        <c-lb.mockup-window class="border border-base-300 bg-base-200 shadow-2xl">
            <c-app-screenshot.dashboard />
        </c-lb.mockup-window>
    </div>

</div>

<c-vars label="" value="" delta="" deltaClass="text-success" />

<div class="rounded-lg border border-base-300 bg-base-100 p-4">
    <div class="text-xs text-base-content/50">{{ label }}</div>
    <div class="mt-1 text-xl font-semibold tabular-nums tracking-tight">{{ value }}</div>
    <div class="text-xs tabular-nums {{ deltaClass }}">{{ delta }}</div>
</div>

<div class="mt-6 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-base-content/50">

    <span class="flex items-center gap-1.5">
        <c-lbi.rmx.shield-check w="16" h="16" />
        SOC 2 Type II
    </span>
    <span class="flex items-center gap-1.5">
        <c-lbi.rmx.refresh w="16" h="16" />
        Reads Stripe, Chargebee and NetSuite
    </span>
    <span class="flex items-center gap-1.5">
        <c-lbi.rmx.eye w="16" h="16" />
        Read-only. Arden never writes to your billing system.
    </span>

</div>

{% load lb_tags %}
<c-vars
    size="sm"
    :tile="{'xs':'w-6 h-6 rounded-md','sm':'w-8 h-8 rounded-lg','md':'w-10 h-10 rounded-xl','lg':'w-12 h-12 rounded-xl'}"
    :icon="{'xs':'w-4 h-4','sm':'w-5 h-5','md':'w-6 h-6','lg':'w-7 h-7'}"
/>

<span class="inline-flex shrink-0 items-center justify-center bg-primary text-primary-content {{ tile|get_dict_item:size }}" {{ attrs }}>
    <svg viewBox="0 0 48 48" class="{{ icon|get_dict_item:size }}" fill="none" aria-hidden="true">
        <path d="M12 36 24 12l12 24" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M17 27h14" stroke="currentColor" stroke-width="5" stroke-linecap="round" />
    </svg>
</span>

<c-vars active="overview" drawerId="" />

<div class="flex h-full flex-col bg-base-100 border-r border-base-300 transition-[width] is-drawer-close:w-16 is-drawer-open:w-60">
    {% if drawerId %}
    <c-lb.drawer.toggle
        for="{{ drawerId }}"
        class="btn btn-square btn-sm fixed top-16 z-50 hidden -translate-x-1/2 border border-base-300 bg-base-100 shadow-sm transition-[left] duration-200 lg:flex is-drawer-close:left-16 is-drawer-open:left-60"
        aria-label="Toggle sidebar">
        <c-lbi n="rmx.sidebar-unfold" w="18" h="18" />
    </c-lb.drawer.toggle>
    {% endif %}

    <div class="flex h-16 items-center gap-3 px-4">
        <c-arden.mark size="xs" />
        <span class="font-semibold tracking-tight is-drawer-close:hidden">Arden</span>
    </div>

    <nav class="grow px-2 py-3">
        <ul class="menu gap-1 p-0">
            <li><a href="#" class="{% if active == 'overview' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Overview"><c-lbi n="rmx.pie-chart-2" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Overview</span></a></li>
            <li><a href="#" class="{% if active == 'customers' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Customers"><c-lbi n="rmx.group-2" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Customers</span></a></li>
            <li><a href="#" class="{% if active == 'activity' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Activity"><c-lbi n="rmx.pulse" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Activity</span></a></li>
            <li><a href="#" class="{% if active == 'reports' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Reports"><c-lbi n="rmx.bar-chart-2" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Reports</span></a></li>
        </ul>
    </nav>

    <div class="border-t border-base-300 p-2">
        <a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-base-content/60 hover:bg-base-200 is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
            <c-lbi n="rmx.settings-3" w="18" h="18" class="shrink-0" />
            <span class="is-drawer-close:hidden">Settings</span>
        </a>
    </div>
</div>

Learn from this block

Window chrome wrapped around a live Arden dashboard — menu, stat tiles, chart and table, all real components. It stays crisp on any display, weighs nothing to download, and follows the theme.

Mockup window
The chart bars are `primary` at two opacities. Switch the theme and the chart restyles itself — no palette to maintain, and nothing to re-export.

Theming guide
There is no script tag in this block. Datastar loads only where a page uses it, so a marketing page that needs nothing ships nothing.

Getting started
The security line above the fold and the metrics below it are the block's surrounding matter. They answer the question the screenshot provokes.

Getting started

Centred bold

Large centred type with paired CTAs, an avatar-backed social proof row and a one-line customer quote

labb block add lb/hero/centred-bold

Open

/blocks/app/lb/hero/centred-bold/

components
- centred_bold
  - proof.html
templates
- pages
  - index.html

<main class="container mx-auto max-w-3xl px-4 py-24 lg:py-32">

    <div class="flex flex-col items-center text-center">

        <c-lb.badge variant="primary" style="soft" size="sm" icon="rmx.line-chart">
            Know your revenue.
        </c-lb.badge>

        <h1 class="mt-5 text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-balance">
            Stop closing the books from memory.
        </h1>

        <p class="mt-5 text-lg text-base-content/70 max-w-xl text-balance">
            Arden pulls every invoice, plan change and renewal into one ledger your
            team can actually read. No spreadsheet archaeology, no month-end
            reconstruction.
        </p>

        <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
            <c-lb.button variant="primary" icon.end="rmx.arrow-right">
                Start free trial
            </c-lb.button>
            <c-lb.button btnStyle="ghost" icon="rmx.eye">
                Explore a live workspace
            </c-lb.button>
        </div>

        <p class="mt-3 text-sm text-base-content/50">
            Fourteen days free. No card required.
        </p>

        <c-centred-bold.proof />

    </div>

</main>

<div class="mt-6 flex w-full flex-col items-center gap-6 border-t border-base-300 pt-10">

    <div class="flex flex-col items-center gap-3 sm:flex-row sm:gap-4">
        <c-lb.avatar.group spacing="tight">
            <c-lb.avatar placeholder initials="MC" bgColor="primary" size="sm" />
            <c-lb.avatar placeholder initials="JP" bgColor="secondary" size="sm" />
            <c-lb.avatar placeholder initials="PR" bgColor="accent" size="sm" />
            <c-lb.avatar placeholder initials="DO" bgColor="neutral" size="sm" />
        </c-lb.avatar.group>

        <div class="flex flex-col items-center gap-1 sm:items-start">
            <div class="flex items-center gap-1 text-warning" aria-hidden="true">
                <c-lbi.rmx.star-s w="16" h="16" />
                <c-lbi.rmx.star-s w="16" h="16" />
                <c-lbi.rmx.star-s w="16" h="16" />
                <c-lbi.rmx.star-s w="16" h="16" />
                <c-lbi.rmx.star-s w="16" h="16" />
            </div>
            <p class="text-sm text-base-content/60">
                4.8 out of 5 from 2,400+ finance and ops teams
            </p>
        </div>
    </div>

    <c-lb.card class="max-w-lg border border-base-300 bg-base-200/60">
        <c-lb.card.body class="items-center gap-3 p-6 text-center">
            <p class="text-base leading-relaxed">
                “We found $310k of silent churn in the first week. Arden had been
                staring at it in our own billing data the whole time.”
            </p>
            <div class="flex items-center gap-3">
                <c-lb.avatar placeholder initials="PR" bgColor="accent" size="sm" />
                <div class="text-left text-xs">
                    <div class="font-medium">Priya Raman</div>
                    <div class="text-base-content/50">CFO, Northwind Co</div>
                </div>
            </div>
        </c-lb.card.body>
    </c-lb.card>

</div>

Learn from this block

A centred hero has one job: the sentence. It scales with the viewport and ships as plain HTML — no bundle, no hydration, nothing to wait for.

Getting started
A centred card has nowhere to hide, which is why most centred heroes read as templates. The rating strip, the avatar group and the customer quote are what make this one a page.

Getting started
Initials on a themed background. No image files to redistribute, no licence to inherit, and the whole group recolours when the theme does.

Avatar

Gradient mesh

A hero crowned by a deliberate fixed-colour mesh gradient that renders identically in every theme, over content built from daisyUI tokens

labb block add lb/hero/gradient-mesh

Open

/blocks/app/lb/hero/gradient-mesh/

components
- gradient_mesh
  - mesh.html
  - proof.html
templates
- pages
  - index.html

<main class="relative isolate overflow-hidden bg-base-100">

    <c-gradient-mesh.mesh />

    <div class="container relative mx-auto max-w-5xl px-4 py-24 lg:py-32">

        <div class="flex flex-col items-center text-center">

            <c-lb.badge variant="primary" style="soft" size="sm" icon="rmx.sparkling">
                Reconciled nightly. Never re-keyed.
            </c-lb.badge>

            <h1 class="mt-5 text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-balance max-w-3xl">
                Your revenue, finally in focus.
            </h1>

            <p class="mt-5 text-lg text-base-content/70 max-w-2xl text-balance">
                Arden turns billing exhaust into a picture of the business. One ledger,
                every workspace, settled before you open your laptop.
            </p>

            <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
                <c-lb.button variant="primary" icon.end="rmx.arrow-right">
                    Start free trial
                </c-lb.button>
                <c-lb.button btnStyle="ghost" icon="rmx.refresh">
                    See how reconciliation works
                </c-lb.button>
            </div>

        </div>

        <c-gradient-mesh.proof />

    </div>

</main>

<div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden" aria-hidden="true">

    <div class="absolute left-1/2 top-[-20rem] h-[46rem] w-[84rem] -translate-x-1/2"
         style="background:
            radial-gradient(34% 44% at 18% 58%, #0f766e 0%, transparent 72%),
            radial-gradient(32% 42% at 48% 34%, #0284c7 0%, transparent 70%),
            radial-gradient(30% 40% at 76% 54%, #4f46e5 0%, transparent 72%);
            filter: blur(72px);
            opacity: 0.65;
            -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 34%, black 12%, transparent 72%);
            mask-image: radial-gradient(ellipse 60% 58% at 50% 34%, black 12%, transparent 72%);"></div>

    <div class="absolute inset-x-0 top-0 h-px bg-base-content/10"></div>

</div>

<div class="mt-20 grid items-stretch gap-6 lg:grid-cols-5">

    <c-lb.card class="lg:col-span-3 h-full border border-base-300 bg-base-100 shadow-sm">
        <c-lb.card.body class="gap-4 p-7">
            <c-lbi.rmx.double-quotes-l w="28" h="28" class="text-base-content/20" />
            <p class="text-lg leading-relaxed text-balance">
                &ldquo;We stopped guessing at churn. The first renewal Arden flagged
                covered the year &mdash; and we found it forty-six days before the invoice
                went out.&rdquo;
            </p>
            <div class="mt-auto flex items-center gap-3 pt-2">
                <c-lb.avatar placeholder initials="MC" bgColor="neutral" size="sm" />
                <div class="text-sm">
                    <div class="font-medium">Mira Chen</div>
                    <div class="text-base-content/50">Founder, AtlasForge</div>
                </div>
            </div>
        </c-lb.card.body>
    </c-lb.card>

    <c-lb.card class="lg:col-span-2 h-full border border-base-300 bg-base-100 shadow-sm">
        <c-lb.card.body class="justify-center divide-y divide-base-200 p-0">
            <div class="px-7 py-5">
                <div class="text-3xl font-semibold tabular-nums tracking-tight">$2.4B</div>
                <div class="mt-1 text-xs text-base-content/50">ARR under management</div>
            </div>
            <div class="px-7 py-5">
                <div class="text-3xl font-semibold tabular-nums tracking-tight">8.1M</div>
                <div class="mt-1 text-xs text-base-content/50">Invoices reconciled</div>
            </div>
            <div class="px-7 py-5">
                <div class="text-3xl font-semibold tabular-nums tracking-tight">4 days</div>
                <div class="mt-1 text-xs text-base-content/50">Median time to close the books</div>
            </div>
        </c-lb.card.body>
    </c-lb.card>

</div>

Learn from this block

The one sanctioned fixed-colour exception: a blurred mesh of three curated hues, masked so it crowns the hero and fades before the content. It is declared in `block.yaml` (`allow_fixed_colours`) precisely because it must look the same in light and dark — a brand gradient, not a theme surface.

Theming guide
A flat `base-100` ground carries the panel — no gradient. It resolves to the same token in every theme, which is why the hero never looks like it was designed for a theme it is no longer in.

Theming guide
No canvas, no WebGL, no animation loop — the whole effect is CSS on server-rendered markup. Nothing to download and nothing to run.

Getting started
Decoration is not a value proposition. The testimonial and the numbers sit on clean cards below the headline, so the block still says something once the styling is stripped away.

Getting started

Split visual

Hero copy beside a framed product shot, built from theme tokens — no image asset and no JavaScript

labb block add lb/hero/split-visual

Open

/blocks/app/lb/hero/split-visual/

<main class="container mx-auto max-w-6xl px-4 py-20 lg:py-28">

    <div class="grid items-center gap-12 lg:grid-cols-2">

        <div class="flex flex-col">

            <c-lb.badge variant="primary" style="soft" icon="rmx.sparkling">
                Renewal forecasting is live
            </c-lb.badge>

            <h1 class="mt-5 text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-balance">
                Know your revenue.
            </h1>

            <p class="mt-5 text-lg text-base-content/70 max-w-md text-balance">
                Every customer, invoice and renewal in one place. Arden reconciles your
                billing data every night and tells you what moved, so the quarter never
                ends in a surprise.
            </p>

            <div class="mt-8 flex flex-wrap items-center gap-3">
                <c-lb.button variant="primary" icon.end="rmx.arrow-right">
                    Start free trial
                </c-lb.button>
                <c-lb.button btnStyle="ghost" icon="rmx.play-circle">
                    Watch the 3-minute tour
                </c-lb.button>
            </div>

            <c-split-visual.proof />

        </div>

        <c-split-visual.shot />

    </div>

</main>

<c-vars height="40%" :muted="False" />

<div class="flex-1 rounded-sm {% if muted %}bg-primary/20{% else %}bg-primary/70{% endif %}"
     style="height: {{ height }}"></div>

<div class="flex flex-col gap-4 border-t border-base-300 bg-base-100 p-4">

    <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
            <c-arden.mark size="xs" />
            <span class="text-sm font-semibold tracking-tight">Revenue · Q3</span>
        </div>
        <c-lb.badge variant="success" style="soft" size="sm">Synced 2m ago</c-lb.badge>
    </div>

    <div class="grid grid-cols-3 gap-2">
        <c-split-visual.tile label="Net MRR" value="$412,900" delta="+4.2%" />
        <c-split-visual.tile label="Expansion" value="$38,100" delta="+11.6%" />
        <c-split-visual.tile label="At risk" value="$21,400" delta="-2.8%" deltaClass="text-error" />
    </div>

    <div class="rounded-lg border border-base-300 bg-base-100 p-3">
        <div class="flex items-end gap-1.5 h-20" aria-hidden="true">
            <c-split-visual.bar height="34%" muted />
            <c-split-visual.bar height="42%" muted />
            <c-split-visual.bar height="38%" muted />
            <c-split-visual.bar height="51%" muted />
            <c-split-visual.bar height="47%" muted />
            <c-split-visual.bar height="63%" muted />
            <c-split-visual.bar height="58%" muted />
            <c-split-visual.bar height="72%" />
            <c-split-visual.bar height="69%" />
            <c-split-visual.bar height="88%" />
            <c-split-visual.bar height="81%" />
            <c-split-visual.bar height="100%" />
        </div>
        <div class="mt-2 text-xs text-base-content/50">Net revenue, last 12 months</div>
    </div>

    <c-lb.table size="sm">
        <tbody>
            <tr>
                <td class="font-medium">AtlasForge</td>
                <td class="tabular-nums text-right">$128,400</td>
                <td class="text-right">
                    <c-lb.badge variant="success" style="soft" size="sm">Renewed</c-lb.badge>
                </td>
            </tr>
            <tr>
                <td class="font-medium">Kite &amp; Bell</td>
                <td class="tabular-nums text-right">$96,200</td>
                <td class="text-right">
                    <c-lb.badge variant="warning" style="soft" size="sm">At risk</c-lb.badge>
                </td>
            </tr>
            <tr>
                <td class="font-medium">Northwind Co</td>
                <td class="tabular-nums text-right">$74,800</td>
                <td class="text-right">
                    <c-lb.badge variant="info" style="soft" size="sm">Expanding</c-lb.badge>
                </td>
            </tr>
        </tbody>
    </c-lb.table>

</div>

<div class="mt-10 flex flex-col gap-5 border-t border-base-300 pt-6">

    <c-lb.stat.group class="w-full">
        <c-lb.stat class="px-0">
            <c-lb.stat.value class="text-2xl tabular-nums">$2.4B</c-lb.stat.value>
            <c-lb.stat.desc>ARR under management</c-lb.stat.desc>
        </c-lb.stat>
        <c-lb.stat class="px-0">
            <c-lb.stat.value class="text-2xl tabular-nums">8.1M</c-lb.stat.value>
            <c-lb.stat.desc>Invoices reconciled</c-lb.stat.desc>
        </c-lb.stat>
        <c-lb.stat class="px-0">
            <c-lb.stat.value class="text-2xl tabular-nums">4 days</c-lb.stat.value>
            <c-lb.stat.desc>Median time to close</c-lb.stat.desc>
        </c-lb.stat>
    </c-lb.stat.group>

    <p class="text-xs uppercase tracking-wider text-base-content/40">
        Trusted by 2,400+ finance and ops teams
    </p>

</div>

<div class="relative">

    <div class="absolute -inset-4 rounded-2xl border border-base-300/60 bg-base-200/40"
         aria-hidden="true"></div>

    <c-lb.mockup-browser
        url="app.arden.io/revenue"
        class="relative border border-base-300 bg-base-200 shadow-xl">
        <c-split-visual.dashboard />
    </c-lb.mockup-browser>

</div>

<c-vars label="" value="" delta="" deltaClass="text-success" />

<div class="rounded-lg border border-base-300 bg-base-100 p-3">
    <div class="text-xs text-base-content/50">{{ label }}</div>
    <div class="mt-1 text-lg font-semibold tabular-nums tracking-tight">{{ value }}</div>
    <div class="text-xs tabular-nums {{ deltaClass }}">{{ delta }}</div>
</div>

{% load lb_tags %}
<c-vars
    size="sm"
    :tile="{'xs':'w-6 h-6 rounded-md','sm':'w-8 h-8 rounded-lg','md':'w-10 h-10 rounded-xl','lg':'w-12 h-12 rounded-xl'}"
    :icon="{'xs':'w-4 h-4','sm':'w-5 h-5','md':'w-6 h-6','lg':'w-7 h-7'}"
/>

<span class="inline-flex shrink-0 items-center justify-center bg-primary text-primary-content {{ tile|get_dict_item:size }}" {{ attrs }}>
    <svg viewBox="0 0 48 48" class="{{ icon|get_dict_item:size }}" fill="none" aria-hidden="true">
        <path d="M12 36 24 12l12 24" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M17 27h14" stroke="currentColor" stroke-width="5" stroke-linecap="round" />
    </svg>
</span>

<c-vars active="overview" drawerId="" />

<div class="flex h-full flex-col bg-base-100 border-r border-base-300 transition-[width] is-drawer-close:w-16 is-drawer-open:w-60">
    {% if drawerId %}
    <c-lb.drawer.toggle
        for="{{ drawerId }}"
        class="btn btn-square btn-sm fixed top-16 z-50 hidden -translate-x-1/2 border border-base-300 bg-base-100 shadow-sm transition-[left] duration-200 lg:flex is-drawer-close:left-16 is-drawer-open:left-60"
        aria-label="Toggle sidebar">
        <c-lbi n="rmx.sidebar-unfold" w="18" h="18" />
    </c-lb.drawer.toggle>
    {% endif %}

    <div class="flex h-16 items-center gap-3 px-4">
        <c-arden.mark size="xs" />
        <span class="font-semibold tracking-tight is-drawer-close:hidden">Arden</span>
    </div>

    <nav class="grow px-2 py-3">
        <ul class="menu gap-1 p-0">
            <li><a href="#" class="{% if active == 'overview' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Overview"><c-lbi n="rmx.pie-chart-2" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Overview</span></a></li>
            <li><a href="#" class="{% if active == 'customers' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Customers"><c-lbi n="rmx.group-2" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Customers</span></a></li>
            <li><a href="#" class="{% if active == 'activity' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Activity"><c-lbi n="rmx.pulse" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Activity</span></a></li>
            <li><a href="#" class="{% if active == 'reports' %}active {% endif %}is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Reports"><c-lbi n="rmx.bar-chart-2" w="18" h="18" class="shrink-0" /><span class="is-drawer-close:hidden">Reports</span></a></li>
        </ul>
    </nav>

    <div class="border-t border-base-300 p-2">
        <a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-base-content/60 hover:bg-base-200 is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
            <c-lbi n="rmx.settings-3" w="18" h="18" class="shrink-0" />
            <span class="is-drawer-close:hidden">Settings</span>
        </a>
    </div>
</div>

Learn from this block

The whole block is server-rendered markup. There is no script tag, no bundle and no hydration step — Datastar only loads on pages that ask for it, and this page never does.

Getting started
Browser chrome around a real Arden dashboard built from components. It weighs nothing, stays sharp at any density, and recolours with the theme — which a screenshot cannot do.

Mockup browser
The frame behind the shot is a hairline and a wash over theme tokens. Swap the daisyUI theme and it follows.

Theming guide
A headline and two buttons is a template. The stat row and the trust line are what make it a page — and they cost no JavaScript either.

Getting started

With logos

Hero above a customer logo cloud, with the marks drawn from labb's own icon pack — no third-party assets

labb block add lb/hero/with-logos

Open

/blocks/app/lb/hero/with-logos/

components
- with_logos
  - cloud.html
  - logo.html
templates
- pages
  - index.html

<main class="container mx-auto max-w-5xl px-4 py-24 lg:py-32">

    <div class="flex flex-col items-center text-center">

        <c-lb.badge variant="primary" style="soft" icon="rmx.shield-check">
            SOC 2 Type II · Read-only billing access
        </c-lb.badge>

        <h1 class="mt-5 text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-balance max-w-3xl">
            Revenue ops your finance team will actually trust.
        </h1>

        <p class="mt-5 text-lg text-base-content/70 max-w-xl text-balance">
            Arden reconciles billing, plans and renewals every night, then shows you
            the delta. Every number traces back to an invoice you can open.
        </p>

        <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
            <c-lb.button variant="primary" icon.end="rmx.arrow-right">
                Start free trial
            </c-lb.button>
            <c-lb.button btnStyle="ghost" icon="rmx.calendar-check">
                Talk to our team
            </c-lb.button>
        </div>

    </div>

    <c-with-logos.cloud :customers=customers />

</main>

<c-vars :customers="[]" />

<section class="mt-20 flex flex-col items-center gap-8 border-t border-base-300 pt-12">

    <p class="text-xs uppercase tracking-wider text-base-content/40">
        The teams closing their quarter on Arden
    </p>

    <div class="flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
        {% for customer in customers %}
        <c-with-logos.logo name="{{ customer.name }}" icon="{{ customer.icon }}" />
        {% endfor %}
    </div>

    <p class="text-sm text-base-content/60 text-center max-w-lg text-balance">
        <span class="font-semibold tabular-nums text-base-content">$2.4B</span> in ARR
        tracked across
        <span class="font-semibold tabular-nums text-base-content">2,400</span>
        workspaces, reconciled nightly.
    </p>

</section>

<c-vars name="" icon="" />

<div class="flex items-center gap-2 text-base-content/50">
    <c-lbi n="{{ icon }}" w="24" h="24" />
    <span class="text-base font-semibold tracking-tight whitespace-nowrap">{{ name }}</span>
</div>

Learn from this block

A hero that only asserts is a template. This one shows who already agreed.

Getting started
Each mark is an `rmx` icon named by the data, so the block carries no image files, no CDN call and no third-party licence into the project that installs it. Swap in real SVG logos when you have them.

Icons
The customers come from `preview_context` in the manifest, so the block has no view and no Python at all. Point the loop at your own queryset when you wire it up.

Getting started