About Page
Full about-company pages — story-led, split-hero, and process-timeline layouts with team and stats sections.
Preview
@props([])
<div class="min-h-screen bg-background text-foreground">
<x-blocks.header-dropdown />
<main>
<x-blocks.hero-split />
<x-blocks.stats-split />
<x-blocks.team-split-lead />
<x-blocks.awards />
<x-blocks.testimonials-masonry />
<x-blocks.closing-cta-split />
</main>
<x-blocks.footer-newsletter />
</div>
Installation
php artisan ui:add pages/about-page-split-hero
Registry contract
Install confidence
php artisan ui:add pages/about-page-split-hero
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.3
- License
- open
- Stability
- stable
- Contract
- v1
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/pages/about-page-split-hero.blade.php |
Registry dependencies
Package dependencies
composer: jml/brok:^0.2
Use with AI
A brief for your coding agent: what the page is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this page in an assistant.
# Brok UI page: About Page 02 (`about-page-split-hero`)
An about page with a dropdown header, a split hero, a stats split, a split-lead team, awards, a masonry testimonials wall and a split CTA.
Brok UI is a Laravel Blade registry. `ui:add` copies this page into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.
## Install
```bash
php artisan ui:add pages/about-page-split-hero
```
## Render it
```blade
<x-pages.about-page-split-hero />
```
## Use when
- An About page with a dropdown header, a split hero, a stats split, a split-lead team section, awards, a masonry testimonials wall and a split call-to-action.
- It composes blocks/header-dropdown, blocks/hero-split, blocks/stats-split, blocks/team-split-lead, blocks/awards, blocks/testimonials-masonry, blocks/closing-cta-split and blocks/footer-newsletter.
## Avoid when
- Wanting a simpler story-led About page; use about-page-story or about-page-timeline instead.
## Rules
- Render the installed page with `<x-pages.about-page-split-hero />` 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/pages/about-page-split-hero
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/about-page-split-hero.json
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
- An About page with a dropdown header, a split hero, a stats split, a split-lead team section, awards, a masonry testimonials wall and a split call-to-action.
- It composes blocks/header-dropdown, blocks/hero-split, blocks/stats-split, blocks/team-split-lead, blocks/awards, blocks/testimonials-masonry, blocks/closing-cta-split and blocks/footer-newsletter.
Avoid when
- Wanting a simpler story-led About page; use about-page-story or about-page-timeline instead.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
Usage
Render the page as a component, or wire it to a route. Pass data where useful:
<x-pages.about-page-split-hero />
Built from blocks & primitives
This page 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 pages.
@props([])
<div class="min-h-screen bg-background text-foreground">
<x-blocks.header-dropdown />
<main>
<x-blocks.hero-split />
<x-blocks.stats-split />
<x-blocks.team-split-lead />
<x-blocks.awards />
<x-blocks.testimonials-masonry />
<x-blocks.closing-cta-split />
</main>
<x-blocks.footer-newsletter />
</div>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.0.3 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0