release: WRNexusJS 0.6.0

This commit is contained in:
Clintchiz committed 2026-08-01 01:09:58 +05:30
1 parent 3e565e8d03
commit 687d345882
502 files changed
+33038 -11358

No files matched your search

@@ -52,7 +52,7 @@ page HeroDetail {
<span class="showcase-eyebrow">Marketing component</span>
<h1>Hero</h1>
<p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p>
<div class="detail-badges"><span>38 props</span><span>6 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
<div class="detail-badges"><span>38 props</span><span>6 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
@@ -427,7 +427,7 @@ page HeroDetail {
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>38 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-eyebrowIcon"><span><strong>eyebrow Icon</strong><small>string</small></span><input id="playground-hero-eyebrowIcon" name="pg_eyebrowIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-hero-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-hero-title" name="pg_title" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-hero-description" name="pg_description" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="solid">solid</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-hero-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-hero-layout" name="pg_layout"><option value="split" selected>split</option><option value="stacked">stacked</option><option value="content">content</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-hero-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-hero-visualStyle"><span><strong>visual Style</strong><small>string</small></span><select id="playground-hero-visualStyle" name="pg_visualStyle"><option value="plain" selected>plain</option><option value="card">card</option><option value="soft">soft</option></select></label><label class="playground-toggle" for="playground-hero-showDecorations"><span><strong>show Decorations</strong><small>boolean</small></span><input id="playground-hero-showDecorations" name="pg_showDecorations" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-hero-fullBleed" name="pg_fullBleed" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-visualEyebrow"><span><strong>visual Eyebrow</strong><small>string</small></span><input id="playground-hero-vLine truncated
<div class="playground-fields"><label class="playground-field" for="playground-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-eyebrowIcon"><span><strong>eyebrow Icon</strong><small>string</small></span><input id="playground-hero-eyebrowIcon" name="pg_eyebrowIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-hero-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-hero-title" name="pg_title" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-hero-description" name="pg_description" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="solid">solid</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-hero-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-hero-layout" name="pg_layout"><option value="split" selected>split</option><option value="stacked">stacked</option><option value="content">content</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-hero-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-hero-visualStyle"><span><strong>visual Style</strong><small>string</small></span><select id="playground-hero-visualStyle" name="pg_visualStyle"><option value="plain" selected>plain</option><option value="card">card</option><option value="soft">soft</option></select></label><label class="playground-toggle" for="playground-hero-showDecorations"><span><strong>show Decorations</strong><small>boolean</small></span><input id="playground-hero-showDecorations" name="pg_showDecorations" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-hero-fullBleed" name="pg_fullBleed" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-visualEyebrow"><span><strong>visual Eyebrow</strong><small>string</small></span><input id="playground-hero-vLine truncated
{
"id": "hero-0-1",
"key": "hero-0-1",
@@ -534,7 +534,7 @@ page HeroDetail {
"Standard"
]
}
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-hero-primaryHref" name="pg_primaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-primaryTarget"><span><strong>primary Target</strong><small>string</small></span><input id="playground-hero-primaryTarget" name="pg_primaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryTarget"><span><strong>secondary Target</strong><small>string</small></span><input id="playground-hero-secondaryTarget" name="pg_secondaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryLabel"><span><strong>tertiary Label</strong><small>string</small></span><input id="playground-hero-tertiaryLabel" name="pg_tertiaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-tertiaryHref"><span><strong>tertiary Href</strong><small>string</small></span><input id="playground-hero-tertiaryHref" name="pg_tertiaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-tertiaryIcon"><span><strong>tertiary Icon</strong><small>string</small></span><input id="playground-hero-tertiaryIcon" name="pg_tertiaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryTarget"><span><strong>tertiary Target</strong><small>string</small></span><input id="playground-hero-tertiaryTarget" name="pg_tertiaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-badges"><span><strong>badges</strong><small>string</small></span><textarea id="playground-hero-badges" name="pg_badges" rows="5" spellcheck="false" data-playground-json>[
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-hero-primaryHref" name="pg_primaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-primaryTarget"><span><strong>primary Target</strong><small>string</small></span><input id="playground-hero-primaryTarget" name="pg_primaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-secondaryTarget"><span><strong>secondary Target</strong><small>string</small></span><input id="playground-hero-secondaryTarget" name="pg_secondaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryLabel"><span><strong>tertiary Label</strong><small>string</small></span><input id="playground-hero-tertiaryLabel" name="pg_tertiaryLabel" type="text" value="Hero" /></label><label class="playground-field" for="playground-hero-tertiaryHref"><span><strong>tertiary Href</strong><small>string</small></span><input id="playground-hero-tertiaryHref" name="pg_tertiaryHref" type="text" value="#hero-demo" /></label><label class="playground-field" for="playground-hero-tertiaryIcon"><span><strong>tertiary Icon</strong><small>string</small></span><input id="playground-hero-tertiaryIcon" name="pg_tertiaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-tertiaryTarget"><span><strong>tertiary Target</strong><small>string</small></span><input id="playground-hero-tertiaryTarget" name="pg_tertiaryTarget" type="text" value="" /></label><label class="playground-field" for="playground-hero-badges"><span><strong>badges</strong><small>unknown[]</small></span><textarea id="playground-hero-badges" name="pg_badges" rows="5" spellcheck="false" data-playground-json>[
{
"id": "hero-0-1",
"key": "hero-0-1",
@@ -641,7 +641,7 @@ page HeroDetail {
"Standard"
]
}
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-trustItems"><span><strong>trust Items</strong><small>string</small></span><textarea id="playground-hero-trustItems" name="pg_trustItems" rows="5" spellcheck="false" data-playground-json>[
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-trustItems"><span><strong>trust Items</strong><small>unknown[]</small></span><textarea id="playground-hero-trustItems" name="pg_trustItems" rows="5" spellcheck="false" data-playground-json>[
{
"id": "hero-0-1",
"key": "hero-0-1",
@@ -1691,7 +1691,7 @@ page HeroDetail {
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>eyebrowIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Build something remarkable"</code></td><td>No</td></tr><tr><td><code>highlight</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"split"</code></td><td>No</td></tr><tr><td><code>visualPosition</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>visualStyle</code></td><td>string</td><td><code>"plain"</code></td><td>No</td></tr><tr><td><code>showDecorations</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullBleed</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>visualEyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualDescription</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualImage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualItems</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badges</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>trustItems</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>eyebrowIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Build something remarkable"</code></td><td>No</td></tr><tr><td><code>highlight</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"split"</code></td><td>No</td></tr><tr><td><code>visualPosition</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>visualStyle</code></td><td>string</td><td><code>"plain"</code></td><td>No</td></tr><tr><td><code>showDecorations</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullBleed</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>visualEyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualDescription</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualImage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualItems</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tertiaryTarget</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badges</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>trustItems</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#hero-demo-1">Split hero with visual</a><a href="#hero-demo-2">Centered campaign hero</a><a href="#hero-demo-3">Hero with badges and trust</a><a href="#api">Props API</a></div>