Block Header
Page header component with navigation options.
{# derafu_twig:templates/pages/components/block-header.html.twig #}
{% extends 'layouts/default.html.twig' %}
{% block content %}
<twig:block-header
logoImage="../../img/block-hero.jpeg"
logoHtml="<span class='fw-normal'>Libre</span><span class='fw-bold text-primary'>DTE</span>"
:leftNav="[
{
text: 'Inicio',
url: '#'
},
{
text: 'Servicios',
icon: 'fa-solid fa-cube',
items: [
{
text: 'Servicio Basic',
icon: 'fa-solid fa-star',
url: '#'
},
{
type: 'divider'
},
{
text: 'Servicio Plus',
icon: 'fa-solid fa-stars',
items: [
{
text: 'Características',
url: '#'
},
{
icon: 'fa-solid fa-dollar-sign',
text: 'Precios',
url: '#'
},
{
type: 'divider'
},
{
icon: 'fa-solid fa-book',
text: 'Documentación',
url: '#'
}
]
}
]
},
{
text: 'Productos',
icon: 'fa-solid fa-th-large',
sections: [
{
title: 'Finance',
links: [
{
text: 'Accounting',
url: '#',
icon: 'fa-solid fa-calculator'
},
{
text: 'Invoicing',
url: '#',
icon: 'fa-solid fa-file-invoice'
}
]
},
{
title: 'Sales',
links: [
{
text: 'CRM',
url: '#',
icon: 'fa-solid fa-users'
},
{
text: 'Sales',
url: '#',
icon: 'fa-solid fa-chart-line'
}
]
}
],
footer: [
{
icon: 'fa-brands fa-github',
text: 'Derafu ORG',
url: 'https://www.derafu.org'
},
{
icon: 'fa-brands fa-github',
text: 'View on Github',
url: '#'
}
],
}
]"
:rightNav="[
{
text: 'Documentación',
url: '#',
icon: 'fa-solid fa-book'
},
{
text: 'Productos',
icon: 'fa-solid fa-th-large',
sections: [
{
title: 'Finance',
cols: 3,
links: [
{
text: 'Accounting',
url: '#',
icon: 'fa-solid fa-calculator'
},
{
text: 'Invoicing',
url: '#',
icon: 'fa-solid fa-file-invoice'
}
]
},
{
title: 'Sales',
cols: 3,
links: [
{
text: 'CRM',
url: '#',
icon: 'fa-solid fa-users'
},
{
text: 'Sales',
url: '#',
icon: 'fa-solid fa-chart-line'
}
]
}
],
footer: [
{
icon: 'fa-brands fa-github',
text: 'Derafu ORG',
url: 'https://www.derafu.org'
},
{
icon: 'fa-brands fa-github',
text: 'View on Github',
url: '#'
}
],
},
{
text: 'Soporte',
icon: 'fa-solid fa-headset',
items: [
{
text: 'Centro de Ayuda',
icon: 'fa-solid fa-question-circle',
url: '#'
},
{
type: 'divider'
},
{
text: 'Contacto',
icon: 'fa-solid fa-envelope',
url: '#'
}
]
}
]"
ctaIcon="fa-solid fa-check"
ctaText="¡Probar GRATIS!"
ctaUrl="#"
/>
{% endblock %}