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

{% block bodyClass %}ds-index{% endblock %}

{% block content %}
    <section class="ds-index-wrapper">
        <div class="ds-index-content">
            <h1 class="ds-index-title">{{ 'app.design_system.index.title'|trans({'%site%': sylius.channel}) }}</h1>
            <p>{{ 'app.design_system.index.desc'|trans({'%site%': sylius.channel}) }}</p>
            <p>{{ 'app.design_system.index.desc_2'|trans }}</p>
            <p>{{ 'app.design_system.index.desc_3'|trans }}</p>

            <a href="" class="ds-btn">{{ 'app.design_system.index.btn'|trans }} ></a>
        </div>
    </section>
    <img src="{{ asset('build/'~sylius.channel|lower ~'/images/bg-design-system.jpg', sylius.channel|lower) }}" alt="Design System {{ sylius.channel }}" class="ds-index-img">
{% endblock %}
