Block Tabs

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

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

{% block content %}
{% set tab_content_1 %}
    <twig:block-text-image
        title="Lorem ipsum dolor sit amet"
        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet commodo odio. Mauris sagittis consequat quam interdum laoreet. Vivamus pretium pellentesque ligula, eget euismod turpis maximus sed."
        :buttons="[
            {
                text: 'Conoce más',
                url: 'https://www.example.com'
            },
            {
                text: 'Solicita un período de prueba GRATIS',
                url: 'https://www.example.com'
            }
        ]"
        image="{{ base_path }}/img/block-hero.jpeg"
    />
{% endset %}

{% set tab_content_2 %}
    <h2>Información</h2>
    <p>Contenido...</p>
{% endset %}

<twig:block-tabs
    :tabs="[
        {
            'id': 'features',
            'title': 'Características',
            'icon': 'fa-solid fa-list',
            'content': tab_content_1
        },
        {
            'id': 'info',
            'title': 'Información',
            'icon': 'fa-solid fa-info-circle',
            'content': tab_content_2
        }
    ]"
/>
<twig:block-tabs
    :tabs="[
        {
            'id': 'features2',
            'title': 'Características',
            'icon': 'fa-solid fa-list',
            'content': tab_content_1
        },
        {
            'id': 'info2',
            'title': 'Información',
            'icon': 'fa-solid fa-info-circle',
            'content': tab_content_2
        }
    ]"
    position="vertical"
    :cols="3"
/>
{% endblock %}