Block Footer

{# derafu_twig:templates/pages/components/block-footer.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}

{# Example 1: Complete Footer with 4 columns #}
<twig:block-footer
    class="my-4"
    col1Title="Useful Links"
    :col1Links="[
        {
            text: 'Academy',
            url: 'http://www.example.com',
            icon: 'fa-solid fa-graduation-cap fa-fw'
        },
        {
            text: 'Jobs',
            url: 'http://www.example.com',
            icon: 'fa-solid fa-briefcase fa-fw',
            targetBlank: true
        },
        {
            text: 'Store',
            url: '#',
            icon: 'fa-solid fa-shopping-cart fa-fw'
        },
        {
            text: 'Bank Transfer Payments',
            url: '#',
            icon: 'fa-solid fa-money-bill fa-fw'
        }
    ]"

    col2Title="Software Products"
    :col2Links="[
        {
            text: 'Software 1',
            url: '#',
            icon: 'fa-solid fa-file-invoice fa-fw'
        },
        {
            text: 'Software 2',
            url: '#',
            icon: 'fa-solid fa-network-wired'
        },
        {
            text: 'Software 3',
            url: '#',
            icon: 'fa-solid fa-cash-register fa-fw'
        }
    ]"

    col3Title="Contact Us"
    :col3Links="[
        {
            text: '[email protected]',
            url: 'mailto:[email protected]',
            icon: 'fa-solid fa-envelope fa-fw'
        },
        {
            text: 'Schedule a Meeting',
            url: '#',
            icon: 'fa-solid fa-calendar fa-fw'
        },
        {
            text: 'Help Center',
            url: '#',
            icon: 'fa-solid fa-question-circle fa-fw'
        }
    ]"

    col4Title="Derafu ORG"
    col4Html="<p>Santa Cruz, Chile.</p><p>From Chile to the world with ❤️</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"
    rightText="All rights reserved"
    socialIconsCircular="true"
/>

{# Example 2: Minimalist Footer with 2 columns #}
<twig:block-footer
    class="my-4"
    col1Title="Our Company"
    col1Html="<p>Innovative software solutions for modern businesses.</p>"
    :col1Links="[
        {
            text: 'About Us',
            url: '#'
        },
        {
            text: 'Contact',
            url: '#'
        }
    ]"

    col2Title="Quick Links"
    :col2Links="[
        {
            text: 'Documentation',
            url: '#'
        },
        {
            text: 'Support',
            url: '#'
        }
    ]"

    leftText="© 2024 Derafu ORG"
/>

{# Example 3: Footer with emphasis on social media #}
<twig:block-footer
    class="my-4"
    col1Title="Follow Us"
    col1Html="<p>Stay connected with us on social media</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="Community"
    :col2Links="[
        {
            text: 'Blog',
            url: '#',
            icon: 'fa-solid fa-blog'
        },
        {
            text: 'Forum',
            url: '#',
            icon: 'fa-solid fa-comments'
        },
        {
            text: 'Events',
            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="Join our community"
    rightText='<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a>'
/>

{% endblock %}