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

4 of 15

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

@props([
    'eyebrow' => 'New — v2.0 is here',
    'heading' => 'Give your big idea the design it deserves',
    'subheading' => 'A Laravel-native UI and blocks system you install into your own codebase. Own the source, theme with tokens, and ship a polished product faster.',
    'primaryCta' => 'Get started',
    'primaryHref' => '#',
    'secondaryCta' => 'GitHub',
    'secondaryHref' => '#',
    'url' => 'app.example.com',
])

<x-ui.section space="none" class="relative isolate overflow-hidden" {{ $attributes }}>
    {{-- Brand glow blooming from the top, behind everything --}}
    <x-ui.glow variant="top" />

    <div class="relative z-10 mx-auto max-w-3xl px-4 pt-20 text-center sm:pt-28">
        @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-2xl text-pretty text-lg text-muted-foreground">
            {{ __($subheading) }}
        </p>

        <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
            <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>
    </div>

    {{-- Product screenshot framed in a browser mockup --}}
    <div class="relative z-10 mx-auto mt-16 max-w-5xl px-4 pb-20 sm:pb-28">
        <x-ui.mockup :url="$url" size="large">
            <x-ui.aspect-ratio ratio="16 / 9">
                <div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-muted to-background"></div>
                <div class="absolute inset-0 flex gap-4 p-6">
                    <div class="hidden w-44 shrink-0 flex-col gap-4 sm:flex">
                        <div class="h-8 w-2/3 rounded-md bg-foreground/10"></div>
                        <div class="mt-2 space-y-2">
                            <div class="h-3 w-full rounded-full bg-foreground/10"></div>
                            <div class="h-3 w-5/6 rounded-full bg-foreground/10"></div>
                            <div class="h-3 w-4/6 rounded-full bg-foreground/10"></div>
                            <div class="h-3 w-3/4 rounded-full bg-primary/20"></div>
                        </div>
                    </div>
                    <div class="flex flex-1 flex-col gap-4">
                        <div class="grid grid-cols-3 gap-4">
                            <div class="h-20 rounded-lg bg-primary/15"></div>
                            <div class="h-20 rounded-lg bg-foreground/10"></div>
                            <div class="h-20 rounded-lg bg-foreground/10"></div>
                        </div>
                        <div class="flex-1 rounded-lg bg-foreground/5"></div>
                    </div>
                </div>
            </x-ui.aspect-ratio>
        </x-ui.mockup>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/hero-mockup

Installs these dependencies automatically:

aspect-ratio badge button glow mockup section

Registry contract

Install confidence

php artisan ui:add blocks/hero-mockup 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-mockup.blade.php

Registry dependencies

aspect-ratio badge button glow 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-mockup.md

# Brok UI block: Hero Mockup (`hero-mockup`)

A centered product hero with eyebrow badge, headline, dual call-to-action, a top brand glow, and a dashboard screenshot framed in a browser mockup.

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-mockup
```

## Render it

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

## 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 `Give your big idea the design it deserves`) — 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 a polished product faster.`) — Supporting copy under the heading.
- `primary-cta` (string, default `Get started`) — Primary button label.
- `primary-href` (string, default `#`) — Primary button destination.
- `secondary-cta` (string, default `GitHub`) — Secondary button label; falsy hides the secondary button.
- `secondary-href` (string, default `#`) — Secondary button destination.
- `url` (string, default `app.example.com`) — URL shown in the mockup's fake browser address bar.

## Use when

- Opening a product landing page with a centered headline and dual CTA above a detailed dashboard screenshot framed in a browser-chrome mockup.
- Wanting a top brand glow behind the copy instead of a full switchable decorative backdrop.

## Avoid when

- Needing the screenshot beside the copy in two columns instead of centered above it; use hero-split for a split layout.
- Promoting a mobile app on a phone; use hero-mobile-app, a two-column grid with the copy at the start and an iPhone frame at the end, where this block is one centred column stacked above a full-width browser mockup.

## Rules

- Render the installed block with `<x-blocks.hero-mockup />` 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-mockup
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/hero-mockup.json

Ask about Hero Mockup 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 product landing page with a centered headline and dual CTA above a detailed dashboard screenshot framed in a browser-chrome mockup.
Wanting a top brand glow behind the copy instead of a full switchable decorative backdrop.

Avoid when

Needing the screenshot beside the copy in two columns instead of centered above it; use hero-split for a split layout.
Promoting a mobile app on a phone; use hero-mobile-app, a two-column grid with the copy at the start and an iPhone frame at the end, where this block is one centred column stacked above a full-width browser mockup.

Anti-patterns

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

Anatomy: section brand glow eyebrow badge heading subheading primary cta secondary cta browser mockup dashboard screenshot

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.hero-mockup />

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.