index.html

{% set restyled="v2" %}
{% extends 'base.html' %}

{% set headerDropdownTheme = "dark" %}

{% block head_preload %}
    <link rel="preload" href="/assets/fonts/Inter/Inter-Regular.woff2" as="font">
    <link rel="preload" href="/assets/fonts/Inter/Inter-Bold.woff2" as="font">

    <link rel="preload" href="/assets/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2" as="font">
    <link rel="preload" href="/assets/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2" as="font">
    <link rel="preload" href="/assets/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2" as="font">
{% endblock %}

{% block body_class %}page__index-new{% endblock %}

{% block page_outer_content %}
    {% include 'inc/pages/index/intro.html' %}
    {% include 'inc/pages/index/code-examples.html' %}

    <section class="kotlin-banner-section kto-overview-section kto-overview-section_mode_dark" data-test="index-page-banner">
        <div class="g-layout">
            <h2 class="kotlin-banner-section__header kto-heading kto-heading_size_h1">Latest from Kotlin</h2>
            <div class="kotlin-banner-section__banner">
                <a target="_blank" class="kotlin-banner-section__link"
                   href="https://blog.jetbrains.com/kotlin/2022/09/kotlin-1-7-20-released/">
                    <picture>
                        <source media="(max-width: 537px)" srcset="/assets/images/index/banners/kotlin-1.7.20-mobile.jpg">
                        <img src="/assets/images/index/banners/kotlin-1.7.20.jpg" alt="Kotlin 1.7.20" width="100%">
                    </picture>
                </a>
            </div>
            <div class="kotlin-news-section">
                {% set index_news_group = split_chunk(site.data["last-news"], 2) %}
                {% for news_list in index_news_group %}
                    <div class="kotlin-news-section__chunk">
                        {% for news in news_list %}
                            {% set domain_link = get_domain(news.link) %}
                            <a class="kotlin-news-section__item" href="{{ news.link }}"{% if domain_link %}
                               target="_blank"{% endif %}>
                                <p class="kto-text kto-text_size_s">
                                    {% if news.tag %}{{ news.tag }}
                                        {% elif domain_link %}{{ domain_link }}
                                    {% else %}Overview{% endif %}
                                </p>
                                <h3 class="kto-text kto-text_size_m">
                                    <span class="kotlin-news-section__title">{{ news.title }}</span>&nbsp;<span
                                        class="kotlin-news-section__arrow">↗</span>
                                </h3>
                            </a>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>

            <div class="kotlin-news-section__button">
                <a class="kto-button kto-button_theme_dark kto-button_size_l kto-button_mode_outline"
                   href="https://blog.jetbrains.com/kotlin/" target="_blank">Kotlin blog ↗</a>
            </div>
        </div>
    </section>

    {% include 'inc/pages/index/why-section.html' %}

    <section id="usage-highlights" class="kto-overview-section kotlin-highlights-section">
        <div class="g-layout">
            <h2 class="kotlin-highlights-section__title kto-heading kto-heading_size_hero">
                <a class="kto-anchor-link kto-anchor-link--hover-white" href="#usage-highlights">Kotlin Usage Highlights</a>
            </h2>
            <div class="kto-highlights">
                {% for testimonial in data.testimonials %}
                    <a class="kto-highlights-item kto-highlights-item_company_{{ testimonial.company.lower() | safe }}"
                       href="{{ testimonial.url | safe }}" target="_blank">
                        <h3 class="kto-highlights-item__header">{{ testimonial.company | safe }}</h3>
                        <div class="kto-highlights-item__text">{{ testimonial.text | safe }}</div>
                    </a>
                {% endfor %}
            </div>
        </div>
    </section>

    {# include 'inc/pages/index/stay-in-touch.html' #}

    <section id="get-started" class="kto-overview-section kotlin-get-started-section">
        <div class="g-layout">
            <p class="kto-text kto-text_size_s">How about to try?</p>
            <h2 class="kto-heading kto-heading_size_hero kotlin-get-started-section__title">
                <a class="kto-anchor-link" href="#get-started">
                    Start using Kotlin today!<br>
                    Build your first app in your favorite IDE
                </a>
            </h2>
            <a
                    class="kto-button kto-button_size_m kto-button_mode_contrast smooth-anchor"
                    href="/docs/getting-started.html"
            >Get started</a>
        </div>
    </section>
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css')|autoversion }}">
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='index.js')|autoversion }}"></script>
{% endblock %}