ClintchizandClaude Opus 5.5
c0ac38c572
- Sync app, public, scripts, test and examples from the framework's component-showcase: redesigned component demos, marketing blocks under /blocks, template and preview galleries, distinct Timeline/Section variants, Chat Bubble receipts, a top-placement Drawer demo, and the playground code panel fix (objects in array props no longer blank out). - Standalone adaptations kept: the generator and tests read component-reference.json from the published @wrnexus/ui, and tests use the published @wrnexus/compiler and @wrnexus/syntax. - Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88, styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
20 lines
14 KiB
Plaintext
20 lines
14 KiB
Plaintext
page HeroBlock {
|
|
layout = "gallery"
|
|
|
|
seo { title = "Hero block" }
|
|
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Hero</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="wide" class="showcase-instance showcase-instance--1"><div data-slot="visual">
|
|
<div class="showcase-visual-panel">
|
|
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
|
<strong>Composable visual panel</strong>
|
|
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
|
</div></div></Hero></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page HeroExample <span>{</span>
|
|
view <span>{</span>
|
|
<Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[<span>{</span>"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[<span>{</span>"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>]' trustItems='[<span>{</span>"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>]' maxWidth="wide" class="showcase-instance showcase-instance--1"><div data-slot="visual">
|
|
<div class="showcase-visual-panel">
|
|
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
|
<strong>Composable visual panel</strong>
|
|
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
|
</div></div></Hero>
|
|
<span>}</span>
|
|
<span>}</span></code></pre></section> }
|
|
} |