<PageHero> es un macro JinjaX que compone .layout.hero.wide con un <header> (icon-box + title + subtitle) y un <footer class="actions center"> con los CTAs. Acepta align="center" (default) o align="left", e incluye opcionalmente un back_href que añade un botón de back arriba.
Default (centrado)
Empieza con ERPlora
Crea tu primer hub en menos de 5 minutos. Sin tarjeta de crédito, sin compromisos.
<section class="layout hero wide">
<header>
<span class="icon-box xl">
<iconify-icon icon="lucide:rocket" width="28" height="28"></iconify-icon>
</span>
<h1 class="title 2xl text-center">Empieza con ERPlora</h1><p class="sub lg muted text-center">Crea tu primer hub en menos de 5 minutos. Sin tarjeta de crédito, sin compromisos.</p>
</header>
<footer class="actions center"><a class="btn brand" href="#">Crear cuenta</a><a class="btn outline" href="#">Ver demo</a>
</footer>
</section>
<PageHero
eyebrow_icon="lucide:rocket"
title="Empieza con ERPlora"
subtitle="Crea tu primer hub en menos de 5 minutos. Sin tarjeta de crédito, sin compromisos."
cta_label="Crear cuenta" cta_href="#"
cta_secondary_label="Ver demo" cta_secondary_href="#" />
<PageHero
eyebrow_icon="lucide:rocket"
title="Empieza con ERPlora"
subtitle="Crea tu primer hub en menos de 5 minutos. Sin tarjeta de crédito, sin compromisos."
cta_label="Crear cuenta" cta_href="#"
cta_secondary_label="Ver demo" cta_secondary_href="#" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Sin CTAs
Documentación
Guías, API reference y ejemplos para integrar ERPlora con tu stack.
<section class="layout hero wide">
<header>
<span class="icon-box xl">
<iconify-icon icon="lucide:book" width="28" height="28"></iconify-icon>
</span>
<h1 class="title 2xl text-center">Documentación</h1><p class="sub lg muted text-center">Guías, API reference y ejemplos para integrar ERPlora con tu stack.</p>
</header>
</section>
<PageHero
eyebrow_icon="lucide:book"
title="Documentación"
subtitle="Guías, API reference y ejemplos para integrar ERPlora con tu stack." />
<PageHero
eyebrow_icon="lucide:book"
title="Documentación"
subtitle="Guías, API reference y ejemplos para integrar ERPlora con tu stack." />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
align="left" · alineación izquierda
Verifactu listo
Cumple desde el día uno con la normativa AEAT vigente.
<section class="layout hero wide">
<header>
<span class="icon-box xl">
<iconify-icon icon="lucide:check-check" width="28" height="28"></iconify-icon>
</span>
<h1 class="title 2xl">Verifactu listo</h1><p class="sub lg muted">Cumple desde el día uno con la normativa AEAT vigente.</p>
</header>
</section>
<PageHero
eyebrow_icon="lucide:check-check"
title="Verifactu listo"
subtitle="Cumple desde el día uno con la normativa AEAT vigente."
align="left" />
<PageHero
eyebrow_icon="lucide:check-check"
title="Verifactu listo"
subtitle="Cumple desde el día uno con la normativa AEAT vigente."
align="left" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
<section class="layout hero wide">
<a class="btn clear pill local shift-icon" href="index.html">
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
<span class="lbl">Back</span>
</a>
<header>
<span class="icon-box xl">
<iconify-icon icon="lucide:shield-check" width="28" height="28"></iconify-icon>
</span>
<h1 class="title 2xl text-center">Política de privacidad</h1><p class="sub lg muted text-center">Cómo recopilamos, usamos y protegemos tus datos.</p>
</header>
</section>
<PageHero
eyebrow_icon="lucide:shield-check"
title="Política de privacidad"
subtitle="Cómo recopilamos, usamos y protegemos tus datos."
back_href="index.html" />
<PageHero
eyebrow_icon="lucide:shield-check"
title="Política de privacidad"
subtitle="Cómo recopilamos, usamos y protegemos tus datos."
back_href="index.html" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}