Block Footer

{# 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 %}