{% extends "layouts/base.twig" %}

{% block title %}{{ site.title }} - Главная страница{% endblock %}

{% block content %}
<div class="hero">
    <div class="container">
        <div class="hero__content">
            <h1 class="hero__title">ViteKit Universal</h1>
            <p class="hero__subtitle">
                Современный универсальный сборщик проектов с Vite + Twig + компонентами
            </p>
            <div class="hero__actions">
                <a href="/components-demo" class="btn btn--primary btn--lg">
                    Посмотреть компоненты
                </a>
                <a href="#features" class="btn btn--outline btn--lg">
                    Узнать больше
                </a>
            </div>
        </div>
    </div>
</div>

<section id="features" class="features">
    <div class="container">
        <div class="section-header">
            <h2>Возможности</h2>
            <p>Все необходимое для современной веб-разработки</p>
        </div>
        
        <div class="row">
            <div class="col-md-4">
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h3 class="feature__title">Быстрая сборка</h3>
                    <p class="feature__description">
                        Основанный на Vite для молниеносной разработки и сборки проектов
                    </p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h3 class="feature__title">Готовые компоненты</h3>
                    <p class="feature__description">
                        Набор протестированных UI компонентов для быстрого прототипирования
                    </p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
                            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12 15l8.5-8.5a2.12 2.12 0 000-3L18 1l-8.5 8.5a2.12 2.12 0 000 3L12 15z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h3 class="feature__title">Легкая настройка</h3>
                    <p class="feature__description">
                        Гибкая архитектура и конфигурация под любые потребности проекта
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="technologies">
    <div class="container">
        <div class="section-header">
            <h2>Технологический стек</h2>
            <p>Современные инструменты для эффективной разработки</p>
        </div>
        
        <div class="tech-grid">
            <div class="tech-item">
                <h4>Vite</h4>
                <p>Быстрый сборщик проектов</p>
            </div>
            <div class="tech-item">
                <h4>Twig</h4>
                <p>Мощный шаблонизатор</p>
            </div>
            <div class="tech-item">
                <h4>SCSS</h4>
                <p>Расширенный CSS</p>
            </div>
            <div class="tech-item">
                <h4>Vanilla JS</h4>
                <p>Нативный JavaScript</p>
            </div>
            <div class="tech-item">
                <h4>ESLint</h4>
                <p>Качество кода</p>
            </div>
            <div class="tech-item">
                <h4>Prettier</h4>
                <p>Форматирование</p>
            </div>
        </div>
    </div>
</section>
{% endblock %}