{#{{ dump(block) }}#}{#<img src="{{ sonata_path(block['image_id'], 'reference') }}"/>#}<figure class="banner my-[80px] md:my-[160px] md:h-[498px] px-[16px] py-[16px] md:px-[48px] md:py-[68px] md:min-h-[498px] rounded-[16px] w-full border border-[#E2E2E9] bg-[#F7F7FA] bg-no-repeat bg-contain bg-right" style="background-image: {% if block.image_id is not empty %}url('{{ sonata_path(block['image_id'], 'reference') }}'){% endif %}"> {% if block.text is not empty %} <p class="text-[18px] md:text-[24px] text-[#5B5B5B] font-medium text-left mb-[12px] md:mb-[24px]">{{ block.text }}</p> {% endif %} {% if block.heading is not empty %} <h2 class="text-[24px] md:text-[32px] text-[#1B2028] font-medium text-left mb-[12px] md:mb-[32px] max-w-[770px] leading-[1.2]">{{ block.heading }}</h2> {% endif %} <div class="flex flex-col md:flex-row gap-[16px]"> <a href="{{ path('how_it_works') }}" class="min-w-[250px]"> {% include '@App/shared/ui/button/button.html.twig' with { text: 'Перейти до інструкції'|trans({}, 'order'), } %} </a> <a class="js--scrollTo min-w-[250px] font-medium text-[#fff] text-[16px] min-h-[48px] text-center block" style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}"> <button class=" hover:underline transition ease-in-out duration-150 w-full flex flex-row gap-[8px] justify-center text-center p-[12px] min-h-[48px] bg-transparent border rounded-[10px] font-semibold text-[14px] focus:outline-none" style="color: {{ companyStyles.notFilledButtonTextColor }}; border-color: {{ companyStyles.notFilledButtonTextColor }}"> {% trans from 'main' %}Підключитися зараз{% endtrans %} </button> </a> </div></figure>