{% extends '@DediSyliusTheme/DesignSystem/layout.html.twig' %}

{% block content %}
    <div class="ds-container">
        <h2 class="ds-title">{{ 'app.design_system.sliders.title'|trans }}</h2>
        <p class="ds-text">{{ 'app.design_system.sliders.desc'|trans }}</p>

        <h3 class="ds-subtitle">{{ 'app.design_system.sliders.main'|trans }} <button class="ds-btn-code" rel=".example-main"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_sliderMain.html.twig' %}

        <h3 class="ds-subtitle">{{ 'app.design_system.sliders.product'|trans }} <button class="ds-btn-code" rel=".example-product"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_sliderVisual.html.twig' %}

        <h3 class="ds-subtitle">{{ 'app.design_system.sliders.cross_selling'|trans }} <button class="ds-btn-code" rel=".example-crossselling"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_sliderProduct.html.twig' %}
    </div>
{% endblock %}
