ux.symfony.com/templates/main/homepage.html.twig

{% extends 'base.html.twig' %}

{% set meta = {
    title: "Symfony UX: JavaScript tools you'll love",
    title_suffix: false,
    description: 'A set of PHP & JavaScript packages, curated by Symfony, to solve your every day frontend problems. Featuring Stimulus and Turbo.',
    canonical: url('app_homepage'),
} %}

{% block content %}
<div class="hero hero-background">
    <div class="container-fluid container-xxl px-4 py-4 px-md-5 py-md-5">

        <div class="row justify-content-center g-5 pt-3 mt-2">
          <div class="col-12 text-center text-lg-start col-lg-6 mt-0 mt-sm-5">
            <span class="eyebrows">curated by symfony</span>
            <h1 class="my-3">JavaScript <em class="rainbow-emphasis">tools</em> you can't live without.</h1>
            <p>A set of PHP &amp; JavaScript packages to solve every day frontend problems featuring Stimulus and Turbo.</p>
          </div>
          <div class="col-12 col-sm-10 col-md-8 col-lg-6">
              <twig:HomepageTerminalSwapper class="shadow-blur shadow-blur--rainbow" style="--shadow-bottom: 2rem;" />
          </div>
        </div>
    </div>
</div>

<div class="container-fluid container-xxl px-4 py-4 px-md-5 py-md-5">
    <h2 class="ubuntu">Install it</h2>

    <div class="arrow mb-3 d-none d-md-block"></div>

    <div class="row">
        <div class="col-12 col-md-6">
            <twig:Terminal bottomPadding="145">
                composer require symfony/asset-mapper symfony/stimulus-bundle
            </twig:Terminal>
        </div>

        <div class="col-12 col-md-6 mt-3 mt-md-0">
            <div data-controller="tooltips" class="ux-container FileTree  flex-grow-1 ms-2 py-3">
                <div style="height: 185px; overflow: auto;">
                    <twig:FileTree files="{{ recipeFileTree.files }}" />
                </div>
            </div>
        </div>
    </div>

    <p class="eyebrows" style="margin: 70px 0 0;">Stimulus Controllers</p>
    <div class="d-md-flex justify-content-md-between align-items-center text-center text-md-start">
        <h2 class="ubuntu pt-2 component-headlines">Write custom JavaScript inside <em class="rainbow-emphasis">Stimulus Controllers</em></h2>
        <a style="height: 100%;" class="btn btn-md btn-outline-primary my-3 my-md-0" href="https://symfony.com/doc/current/frontend/ux.html">
            Read full Documentation
            <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);"/>
        </a>
    </div>

    <div class="arrow mb-3 d-none d-md-block"></div>

    <div class="row">
        <div class="col-12 col-md-6">
            <twig:CodeBlock
                filename="templates/main/homepage.html.twig"
                targetTwigBlock="markdown_example"
                :showTwigExtends="false"
                :stripExcessHtml="true"
            />
        </div>
        <div class="col-12 col-md-6  mt-3 mt-md-0">
            <twig:CodeBlock
                filename="assets/controllers/markdown-controller.js"
            />
        </div>
    </div>

    <div class="shadow-blur shadow-blur--rainbow mt-5" style="--shadow-bottom: 2rem;">
        <div class="DemoContainer py-2 px-4 d-flex justify-content-center">
            <small style="opacity: 80%;">And you have a Markdown live convertor!</small>
        </div>
        <div class="DemoContainer-inner p-4">
            {% block markdown_example %}
                <div class="d-flex align-items-stretch row" data-controller="markdown">
                    <div class="col d-flex">
                        <textarea
                            rows="2" class="form-control p-3"
                            aria-label="Type markdown into this box"
                            autocomplete="off"
                            data-markdown-target="input"
                            data-action="markdown#render"
                        >Writing _JavaScript_ is... a **dream** with Stimulus 🤩</textarea>
                    </div>
                    <div class="col d-flex">
                        <div class="markdown-form-render-container p-3" data-markdown-target="preview">
                            <small>&lt;- Write something in the textarea!</small>
                        </div>
                    </div>
                </div>
            {% endblock %}
        </div>
            <div class="arrow" style="transform:scaleY(-1) translateY(20%);margin-bottom: -1rem;"></div>
    </div>

    <p class="eyebrows" style="margin: 111px 0 0;">Packages</p>
    <div class="d-md-flex justify-content-md-between text-center align-items-center text-md-start">
        <h2 class="ubuntu pt-2 component-headlines">Install UX <em class="rainbow-emphasis">Components</em></h2>

{# <a class="Button Button--dark" href="{{ url('app_packages') }}"> #}
{# Browse all Packages #}
{# <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);"/> #}
{# </a> #}

        <a style="height: 100%;" class="btn btn-md btn-outline-primary mt-3 mt-md-0"  href="{{ path('app_packages') }}">
            Browse all Packages
            <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);"/>
        </a>
    </div>
    <div class="row mt-3 mt-md-5">
        <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));">
            {% for package in packages|slice(0, 12) %}
                <twig:Package:PackageBox package="{{ package }}" titleTag="h3" />
            {% endfor %}
        </div>
    </div>
</div>

{{ include('_aside.html.twig') }}

{% endblock %}