{% import 'macros/footer.html' as macros_footer -%}

{% extends "base.html" %}

{% block seo %}
{{ super() }}

{% if config.title %}
{% set title = config.title %}
{% else %}
{% set title = "" %}
{% endif %}

{% if config.extra.title_addition and title %}
{% set title_addition = title_separator ~ config.extra.title_addition %}
{% elif config.extra.title_addition %}
{% set title_addition = config.extra.title_addition %}
{% else %}
{% set title_addition = "" %}
{% endif %}

{% set description = config.description %}

{{ macros_head::seo(title=title, title_addition=title_addition, description=description, is_home=true) }}
{% endblock seo %}

{% block content %}
<div class="prose dark:prose-invert max-w-[100%]">

<div class="relative bg-left-bottom mt-12 md:mt-0">
    <img class="m-0 mt-[-60px] w-full" src="header.svg"/>
</div>


<div class="pb-20 section section-colored bg-redrust">
    <div class="mb-10 pt-8 text-center section-colored">
        <h1>
            It’s Like Ruby on Rails, but for Rust.
        </h1>
        <h2>
            Get the same great building experience of Rails, with the incredible<br /> performance and safety of Rust.
        </h2>
    </div>
    <div class="flex items-center justify-center ">
        <div class="relative w-full max-w-[50rem] max-h-[600px] mx-auto px-1 sm:px-0">
            <div class="relative" style="padding-top: 56.25%">
                <iframe class="absolute inset-0 w-full h-full rounded-md shadow-lg"
                    src="https://www.youtube.com/embed/EircfwF8c0E?si=jv_PZuWZIJ59Qz3O&rel=0" title="Loco.rs" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <div class="flex items-center justify-center py-6 z-10 relative">
        <a class="fatbtn dark:bg-foreground dark:text-background" href="/docs/getting-started/tour/">Get started &rarr;</a>
    </div>
</div>


<div class="pt-20 relative section section-colored bg-orangerust">
    <div class="mb-10 text-center">
        <h1>
            It’s time to make Rust your super-power.
        </h1>
        <h2>
            Using Rust with Loco is super easy. With a simple request lifecycle,<br /> code generators, productivity
            toolkits and more.
        </h2>
    </div>

    <div class="container"> 
        <div class="flex items-center justify-center relative z-1 ">
            <div
                class="rounded-lg bg-card text-card-foreground shadow-lg mb-5 w-full max-w-[50rem] z-10 ">

                <div class="p-0 sm:p-6">
<pre class="text-lg bg-inherit text-inherit text-[11px] sm:text-[16px]"><div class="text-red-100 font-semibold py-0">$ cargo loco generate scaffold post title:string content:text</div>added: "src/controllers/post.rs"
injected: "src/controllers/mod.rs"
injected: "src/app.rs"
...<div class="text-red-100 font-semibold py-0 ">$ cargo loco start</div>
<div style="line-height: 16px;" class="text-[9px] sm:text-[16px]">
                      ▄     ▀
                                 ▀  ▄
                  ▄       ▀     ▄  ▄ ▄▀
                                    ▄ ▀▄▄
                        ▄     ▀    ▀  ▀▄▀█▄
                                          ▀█▄
▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄ ▀▀█
 ██████  █████   ███ █████   ███ █████   ███ ▀█
 ██████  █████   ███ █████   ▀▀▀ █████   ███ ▄█▄
 ██████  █████   ███ █████       █████   ███ ████▄
 ██████  █████   ███ █████   ▄▄▄ █████   ███ █████
 ██████  █████   ███  ████   ███ █████   ███ ████▀
   ▀▀▀██▄ ▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀ ██▀
       ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
                https://loco.rs
</div>
environment: <span class="text-red-400">development</span>
   database: <span class="text-yellow-400">automigrate</span>
     logger: <span class="text-red-400">disabled</span>
compilation: <span class="text-yellow-400">debug</span>
      modes: <span class="text-green-400">server</span>

<div class="text-yellow-500">listening on localhost:5150</div></pre>
                </div>
            </div>
        </div>


    </div>
    <div class="py-6"></div>

    <img src="/cloud.svg" class="absolute right-0 bottom-0 m-0" />
</div>



<div class="pt-20 pb-20 section relative section-colored bg-redrust ">
    <div class="mb-10 mt-15 z-10 relative text-center">
        <h1>
            Enjoy that sweet & effortless Rust performance
        </h1>
        <h2>
            Loco packs a lot of features and still gives you 10x more<br /> performance compared to Node.js
        </h2>
    </div>

    <div class="container">
        <div class="flex flex-col items-center rounded-lg shadow-lg bg-red-900 w-full sm:w-7/12 mx-auto">
            <img src="bench-db-q.svg"/>
            <img src="bench-no-db.svg"/>
        </div>
    </div>

    <div class="flex items-center justify-center py-6 z-10 relative">
        <a class="fatbtn dark:bg-foreground dark:text-background" href="/docs/getting-started/tour/">Get started &rarr;</a>
    </div>
    <img src="/mountain-bg.svg" class="absolute left-0 top-[-490px]" />
</div>

<div class="section bg-gray-100 dark:bg-background">
    <div class="container">
        <div class="pt-20 text-center">
            <h1>
                Build apps locally and save lots of time.
            </h1>
            <h2>
                No need for SaaS or cloud services. Save time, money, and effort with<br /> auth, workers, emails & more
                out of the box.
            </h2>
        </div>

        <div
            class=" items-start justify-center gap-6 rounded-lg p-8 md:grid xl:grid-cols-2  relative z-4 ">

            {% for val in config.extra.homepage.features %}
            <div class="col-span-2 grid items-start xl:col-span-1 text-center">
                    <div class="overflow-auto text-sm prose min-w-[100%] text-left">
                        {{ val.example | markdown(inline=true) | safe }}
                    </div>

                    <h3 class="my-5 mb-3 text-2xl">
                        {{ val.name }}
                    </h3>
                    <p class="mb-20 text-xl">
                        {{val.description | safe}}
                    </p>
            </div>
            {% endfor %}

        </div>

        <div class="flex items-center justify-center py-6 z-10 relative pb-20">
            <a class="fatbtn dark:bg-zinc-700" href="/docs/getting-started/guide/">Read the Guide &rarr;</a>
        </div>
    </div>
</div>

</div>
{% endblock content %}