Hero

Open source

Marketing hero sections: centred, split, search, form, video, stats, screenshot and more; the centred hero takes a switchable backdrop.

Add to page builder

3 of 15

resources/views/blocks/hero-split.blade.php Blade

@props([
    'eyebrow' => 'New — v2.0 is here',
    'heading' => 'Build and ship your product in record time',
    'subheading' => 'A Laravel-native UI and blocks system you install into your own codebase. Own the source, theme with tokens, and ship polished interfaces faster.',
    'primaryCta' => 'Start building',
    'primaryHref' => '#',
    'secondaryCta' => 'Live demo',
    'secondaryHref' => '#',
    'trustText' => 'Loved by 2,000+ teams',
    'avatars' => null,
])

@php
    $avatars ??= [
        ['fallback' => 'AM', 'alt' => 'Amara M.'],
        ['fallback' => 'JK', 'alt' => 'Jonah K.'],
        ['fallback' => 'SL', 'alt' => 'Sofia L.'],
        ['fallback' => 'RD', 'alt' => 'Ravi D.'],
    ];
@endphp

<x-ui.section space="none" class="relative isolate overflow-hidden" {{ $attributes }}>
    <div class="mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-4 py-20 sm:py-28 lg:grid-cols-2 lg:gap-16">
        {{-- Left: copy + CTAs + trust row --}}
        <div class="text-center lg:text-start">
            @if ($eyebrow)
                <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
            @endif

            <h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
                {{ __($heading) }}
            </h1>

            <p class="mx-auto mt-6 max-w-xl text-pretty text-lg text-muted-foreground lg:mx-0">
                {{ __($subheading) }}
            </p>

            <div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center lg:justify-start">
                <x-ui.button :href="$primaryHref" size="lg" class="w-full sm:w-auto">{{ __($primaryCta) }}</x-ui.button>
                @if ($secondaryCta)
                    <x-ui.button :href="$secondaryHref" size="lg" variant="outline" class="w-full sm:w-auto">{{ __($secondaryCta) }}</x-ui.button>
                @endif
            </div>

            @if (! empty($avatars))
                <div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center lg:justify-start">
                    <x-ui.avatar-group :avatars="array_map(fn ($avatar) => ['src' => $avatar['src'] ?? null, 'name' => __($avatar['alt']), 'initials' => $avatar['fallback'] ?? null], $avatars)" :max="count($avatars)" />
                    <p class="text-sm text-muted-foreground">{{ __($trustText) }}</p>
                </div>
            @endif
        </div>

        {{-- Right: product screenshot mock in browser chrome --}}
        <div class="relative">
            <x-ui.mockup type="browser" url="app.example.com">
                {{-- Screenshot panel --}}
                <div class="p-4">
                    <x-ui.aspect-ratio ratio="16 / 10" class="rounded-lg border border-border">
                        <div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-muted to-background"></div>
                        <div class="absolute inset-0 flex flex-col gap-4 p-6">
                            <div class="h-8 w-1/3 rounded-md bg-foreground/10"></div>
                            <div class="space-y-2">
                                <div class="h-3 w-5/6 rounded-full bg-foreground/10"></div>
                                <div class="h-3 w-2/3 rounded-full bg-foreground/10"></div>
                                <div class="h-3 w-3/4 rounded-full bg-foreground/10"></div>
                            </div>
                            <div class="mt-auto grid grid-cols-3 gap-4">
                                <div class="h-16 rounded-lg bg-primary/15"></div>
                                <div class="h-16 rounded-lg bg-foreground/10"></div>
                                <div class="h-16 rounded-lg bg-foreground/10"></div>
                            </div>
                        </div>
                    </x-ui.aspect-ratio>
                </div>
            </x-ui.mockup>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/hero-split

Installs these dependencies automatically:

aspect-ratio avatar-group badge button mockup section

Registry contract

Install confidence

php artisan ui:add blocks/hero-split writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.6
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/hero-split.blade.php

Registry dependencies

aspect-ratio avatar-group badge button mockup section

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

hero-split.md

# Brok UI block: Hero Split (`hero-split`)

Two-column hero with eyebrow badge, headline, dual CTAs and an avatar trust row on the left, and a faux-browser product screenshot mock on the right.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/hero-split
```

## Render it

```blade
<x-blocks.hero-split />
```

## Props

- `eyebrow` (string, default `New — v2.0 is here`) — Small label shown above the heading inside a badge; falsy hides the badge.
- `heading` (string, default `Build and ship your product in record time`) — Primary headline.
- `subheading` (string, default `A Laravel-native UI and blocks system you install into your own codebase. Own the source, theme with tokens, and ship polished interfaces faster.`) — Supporting copy under the heading.
- `primary-cta` (string, default `Start building`) — Primary button label.
- `primary-href` (string, default `#`) — Primary button destination.
- `secondary-cta` (string, default `Live demo`) — Secondary button label; falsy hides the secondary button.
- `secondary-href` (string, default `#`) — Secondary button destination.
- `trust-text` (string, default `Loved by 2,000+ teams`) — Caption shown beside the avatar stack.
- `avatars` (mixed|null, default `null`) — Rows of {src, alt, fallback} rendered as an overlapping avatar stack; null falls back to a default 4-person sample.

## Use when

- Opening a SaaS or product landing page with a two-column layout: copy, dual CTAs and an avatar trust row on the left, and a faux-browser product screenshot mock on the right.
- Wanting a lightweight social-proof signal (an overlapping avatar stack plus a trust line) without a full ratings or logo-wall section.

## Avoid when

- Needing the screenshot centered below the copy instead of beside it; use hero-spotlight, hero-screenshot, or hero-mockup for a centered layout with a mockup underneath.

## Rules

- Render the installed block with `<x-blocks.hero-split />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/hero-split
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/hero-split.json

Ask about Hero Split in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Opening a SaaS or product landing page with a two-column layout: copy, dual CTAs and an avatar trust row on the left, and a faux-browser product screenshot mock on the right.
Wanting a lightweight social-proof signal (an overlapping avatar stack plus a trust line) without a full ratings or logo-wall section.

Avoid when

Needing the screenshot centered below the copy instead of beside it; use hero-spotlight, hero-screenshot, or hero-mockup for a centered layout with a mockup underneath.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: eyebrow badge heading subheading primary cta secondary cta avatar trust row browser mockup screenshot

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.hero-split />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.