templates/inc/pages/index/why-section.html

{% macro switch_tabs(data) -%}
    <div class="kjq-tabs kjq-tabs_size_s">
        <ul class="kjq-tabs__list">
            {% for feature in data %}
                <li class="kjq-tabs__tab kjq-tabs-tab" data-tab-id="{{ feature.id }}">
                    <p class="kjq-tabs-tab__title">{{ feature.id.capitalize() }}</p>
                    <div class="kjq-tabs-tab__content">
                        {{ feature.content | safe }}
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
{%- endmacro %}

<article class="kto-overview-section kotlin-why-section">
    <div class="g-layout">
        <section class="kotlin-why-section__section">
            <h3 class="kto-heading kto-heading_size_h1">Share code on your terms and for different platforms</h3>

            <p class="kto-text kto-text_size_m">
              Simplify the development of cross-platform projects with Kotlin Multiplatform. It reduces time spent writing and maintaining the same code for different platforms while retaining the flexibility and benefits of native programming.
              Kotlin applications will work on different operating systems, such as iOS, Android, macOS, Windows, Linux, watchOS, and others.
            </p>

            <div class="kotlin-why-section__section-content kotlin-why-section__content">
                <img class="kotlin-why-section__media kotlin-why-section__media_type_why" alt="Mobile platforms Feature" src="/assets/images/index/multiplatform.svg" width="100%">
            </div>

            <a class="kto-button kto-button_size_l kto-button_mode_outline" href="https://kotlinlang.org/multiplatform/">
                <span class="kotlin-why-section__button-text-xs">Learn about Kotlin Multiplatform →</span>
                <span class="kotlin-why-section__button-text-xxs">Learn more →</span>
            </a>
        </section>

        <section class="kotlin-why-section__section">
            <h3 class="kto-heading kto-heading_size_h1">Big, friendly and helpful <br />community</h3>

            <p class="kto-text kto-text_size_m">
                Kotlin has great support and many contributors in&nbsp;its fast-growing global community. Enjoy the benefits of&nbsp;a&nbsp;rich ecosystem with a&nbsp;wide range of&nbsp;community libraries. Help is&nbsp;never far away&nbsp;&mdash; consult extensive community resources or&nbsp;ask the Kotlin team directly.
            </p>

            <div class="kotlin-why-section__section-content">
                <div class="kto-overview-youtube kotlin-why-section__media">
                    <iframe width="560" height="315" frameborder="0" allowfullscreen
                            src="https://www.youtube-nocookie.com/embed/JGvk4M0Rfxo"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
                </div>
            </div>

            <a class="kto-button kto-button_size_l kto-button_mode_outline" href="/community/">
                Join the community →
            </a>
        </section>
    </div>
</article>