Block Footer
Page footer component with various layouts.
{# derafu_twig:templates/pages/components/block-footer.html.twig #}
{% extends 'layouts/default.html.twig' %}
{% block content %}
{% for theme, name in themes %}
{# Ejemplo 1: Footer Completo con 4 columnas #}
<twig:block-footer
col1Title="Enlaces útiles"
:col1Links="[
{
text: 'Academia',
url: 'http://www.example.com',
icon: 'fa-solid fa-graduation-cap fa-fw'
},
{
text: 'Empleos',
url: 'http://www.example.com',
icon: 'fa-solid fa-briefcase fa-fw',
targetBlank: true
},
{
text: 'Tienda',
url: '#',
icon: 'fa-solid fa-shopping-cart fa-fw'
},
{
text: 'Pagos con transferencia',
url: '#',
icon: 'fa-solid fa-money-bill fa-fw'
}
]"
col2Title="Productos de software"
:col2Links="[
{
text: 'LibreDTE',
url: '#',
icon: 'fa-solid fa-file-invoice fa-fw'
},
{
text: 'API Gateway',
url: '#',
icon: 'fa-solid fa-network-wired'
},
{
text: 'BillMySales',
url: '#',
icon: 'fa-solid fa-cash-register fa-fw'
}
]"
col3Title="Contáctanos"
:col3Links="[
{
text: '[email protected]',
url: 'mailto:[email protected]',
icon: 'fa-solid fa-envelope fa-fw'
},
{
text: 'Agendar una reunión',
url: '#',
icon: 'fa-solid fa-calendar fa-fw'
},
{
text: 'Centro de ayuda',
url: '#',
icon: 'fa-solid fa-question-circle fa-fw'
}
]"
col4Title="Derafu ORG"
col4Html="<p>Santa Cruz, Chile.</p><p>Desde Chile para todo el mundo con ❤️</p>"
:col4SocialIcons="[
{
icon: 'fa-brands fa-linkedin fa-2x',
url: '#',
color: '#0077b5',
targetBlank: true
},
{
icon: 'fa-brands fa-github fa-2x',
url: '#',
color: '#333',
targetBlank: true
}
]"
leftText="Copyright © Derafu ORG (Theme: {{ name }})"
rightText="Todos los derechos reservados"
socialIconsCircular="true"
/>
<div class="mt-5"></div>
{# Ejemplo 2: Footer Minimalista con 2 columnas #}
<twig:block-footer
col1Title="Nuestra Empresa"
col1Html="<p>Soluciones de software innovadoras para empresas modernas.</p>"
:col1Links="[
{
text: 'Sobre Nosotros',
url: '#'
},
{
text: 'Contacto',
url: '#'
}
]"
col2Title="Enlaces Rápidos"
:col2Links="[
{
text: 'Documentación',
url: '#'
},
{
text: 'Soporte',
url: '#'
}
]"
leftText="© 2024 Derafu ORG (Theme: {{ name }})"
theme="{{ theme }}"
/>
<div class="mt-5"></div>
{# Ejemplo 3: Footer con énfasis en redes sociales #}
<twig:block-footer
col1Title="Síguenos"
col1Html="<p>Mantente conectado con nosotros en redes sociales</p>"
:col1SocialIcons="[
{
icon: 'fa-brands fa-facebook fa-2x',
url: 'http://www.example.com',
color: '#1877f2',
targetBlank: true
},
{
icon: 'fa-brands fa-twitter fa-2x',
url: '#',
color: '#1da1f2',
targetBlank: true
},
{
icon: 'fa-brands fa-instagram fa-2x',
url: '#',
color: '#e4405f',
targetBlank: true
},
{
icon: 'fa-brands fa-youtube fa-2x',
url: '#',
color: '#ff0000',
targetBlank: true
}
]"
col2Title="Comunidad"
:col2Links="[
{
text: 'Blog',
url: '#',
icon: 'fa-solid fa-blog'
},
{
text: 'Foro',
url: '#',
icon: 'fa-solid fa-comments'
},
{
text: 'Eventos',
url: '#',
icon: 'fa-solid fa-calendar-days'
}
]"
:col2SocialIcons="[
{
icon: 'fa-brands fa-discord fa-2x',
url: '#',
color: '#5865f2',
targetBlank: true
},
{
icon: 'fa-brands fa-telegram fa-2x',
url: '#',
color: '#0088cc',
targetBlank: true
}
]"
leftText="Únete a nuestra comunidad (Theme: {{ name }})"
rightText='<a href="#">Política de Privacidad</a> | <a href="#">Términos de Uso</a>'
theme="{{ theme }}"
/>
<div class="mt-5"></div>
{% endfor %}
{% endblock %}