Skip to content
Brok UI

Loading…

No results

About Page

Open source

Full about-company pages — story-led, split-hero, and process-timeline layouts with team and stats sections.

Preview

resources/views/pages/about-page-split-hero.blade.php Blade
@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

terminal
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

blocks/header-dropdown blocks/hero-split blocks/stats-split blocks/team-split-lead blocks/awards blocks/testimonials-masonry blocks/closing-cta-split blocks/footer-newsletter

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.

about-page-split-hero.md
# 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:

resources/views/welcome.blade.php Blade
<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.

resources/views/pages/about-page-split-hero.blade.php Blade
@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