Store Hero

Open source

Storefront heroes — an editorial collection opener with headline, supporting copy and call-to-action over a dominant product image.

Add to page builder

3 of 3

resources/views/blocks/store-hero-video.blade.php Blade

@props([
    'eyebrow'      => 'Now in motion',
    'headline'     => 'The Winter Atelier Film',
    'subcopy'      => 'A moving portrait of the season — structured outerwear and hand-finished knitwear, captured in natural light.',
    'videoSrc'     => null,
    'poster'       => null,
    'primaryCta'   => ['label' => 'Shop the collection', 'href' => '#'],
    'secondaryCta' => ['label' => 'Watch the film',       'href' => '#'],
])

{{--
    store-hero-03 — "Background-video" storefront hero (store-hero family).
    A distinct variant from store-hero-editorial (bottom-start editorial over a static
    placeholder): a full-viewport-height media stage that plays a muted autoplay
    loop <video> when `videoSrc` is given, otherwise a token `bg-muted` placeholder.
    A `bg-foreground/40` scrim sits over the media; copy is CENTER-stacked over it
    (uppercase eyebrow, large `font-heading` headline, a supporting line, dual CTAs).
    Reduced-motion users never see the moving video — it carries `motion-reduce:hidden`
    and a `bg-muted` poster layer always sits behind it as the still fallback.
    No external video URL ships in defaults (videoSrc defaults to null → placeholder).
    Composes <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<x-ui.section
    space="none" {{ $attributes }}
    data-slot="store-hero"
    aria-label="{{ __($headline) }}"
>
    <div class="relative isolate flex min-h-[80vh] items-center justify-center overflow-hidden">
        {{-- ── Media stage ── --}}
        {{-- Still fallback layer: also what reduced-motion users keep seeing --}}
        <div class="absolute inset-0 bg-muted" aria-hidden="true"></div>

        @if ($videoSrc)
            <video
                class="absolute inset-0 size-full object-cover motion-reduce:hidden"
                @if ($poster) poster="{{ $poster }}" @endif
                autoplay
                muted
                loop
                playsinline
                aria-hidden="true"
            >
                <source src="{{ $videoSrc }}" />
            </video>
        @endif

        {{-- Legibility scrim — foreground/background invert is readable in both themes --}}
        <div class="absolute inset-0 bg-foreground/80" aria-hidden="true"></div>

        {{-- ── Centered overlaid copy ── --}}
        <div class="relative mx-auto flex max-w-3xl flex-col items-center gap-6 px-6 py-24 text-center text-background sm:px-8 sm:py-28 lg:py-32">

            {{-- Eyebrow --}}
            @if ($eyebrow)
                <p class="font-body text-xs uppercase tracking-[0.3em] text-background">
                    {{ __($eyebrow) }}
                </p>
            @endif

            {{-- Headline --}}
            <h1 class="font-heading text-4xl font-normal leading-[1.05] tracking-tight sm:text-5xl lg:text-6xl">
                {{ __($headline) }}
            </h1>

            {{-- Subcopy --}}
            @if ($subcopy)
                <p class="max-w-xl font-body text-base leading-relaxed text-background sm:text-lg">
                    {{ __($subcopy) }}
                </p>
            @endif

            {{-- CTAs --}}
            <div class="mt-4 flex flex-wrap items-center justify-center gap-4">
                <x-ui.button :href="$primaryCta['href']" :withArrow="true">
                    {{ __($primaryCta['label']) }}
                </x-ui.button>
                @if ($secondaryCta)
                    <x-ui.button :href="$secondaryCta['href']" variant="secondary">
                        {{ __($secondaryCta['label']) }}
                    </x-ui.button>
                @endif
            </div>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/store-hero-video

Installs these dependencies automatically:

button section

Registry contract

Install confidence

php artisan ui:add blocks/store-hero-video 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.5
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

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

Registry dependencies

button 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.

store-hero-video.md

# Brok UI block: Store Hero Video (`store-hero-video`)

A full-bleed background-video storefront hero — a tall autoplay muted loop video (or a token placeholder when no source is set) under a foreground scrim, with centered overlaid editorial copy: uppercase eyebrow, large display headline, a supporting line and dual CTAs; reduced-motion users see the poster instead of the moving video.

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/store-hero-video
```

## Render it

```blade
<x-blocks.store-hero-video />
```

## Props

- `eyebrow` (string, default `Now in motion`) — Small label shown above the heading.
- `headline` (string, default `The Winter Atelier Film`) — Primary headline.
- `subcopy` (string, default `A moving portrait of the season — structured outerwear and hand-finished knitwear, captured in natural light.`) — Supporting copy under the headline.
- `video-src` (mixed|null, default `null`) — Background video source; null renders a static token placeholder instead.
- `poster` (mixed|null, default `null`) — Poster image shown before the video plays.
- `primary-cta` (array, default `['label' => 'Shop the collection', 'href' => '#']`) — Primary {label, href} call to action.
- `secondary-cta` (array, default `['label' => 'Watch the film',       'href' => '#']`) — Secondary {label, href} call to action.

## Use when

- Opening a storefront with a full-bleed autoplay background video and centered overlaid copy.
- Wanting motion to express the brand, with a poster fallback for reduced motion.

## Avoid when

- Wanting a static image hero instead of video; use store-hero-editorial instead.

## Rules

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

Ask about Store Hero Video 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 storefront with a full-bleed autoplay background video and centered overlaid copy.
Wanting motion to express the brand, with a poster fallback for reduced motion.

Avoid when

Wanting a static image hero instead of video; use store-hero-editorial instead.

Anti-patterns

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

Anatomy: root store-hero

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.store-hero-video />

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.