{% extends "base.html" %}

{% block title %}Главная{% endblock %}

{% block content %}
<div class="welcome-section">
    <h1 class="welcome-title">Добро пожаловать в <span class="highlight">Вектор</span></h1>
    <p class="welcome-subtitle">Цифровая платформа для оценки внеурочных достижений</p>
</div>

<div class="directions-grid">
    <div class="direction-card exact">
        <div class="direction-header">
            <h3>Точное</h3>
        </div>
        <p>Математика, Информатика, Физика</p>
    </div>
    <div class="direction-card science">
        <div class="direction-header">
            <h3>Естественно-научное</h3>
        </div>
        <p>Химия, Биология, География</p>
    </div>
    <div class="direction-card social">
        <div class="direction-header">
            <h3>Социальное</h3>
        </div>
        <p>Обществознание, Экономика, Право</p>
    </div>
    <div class="direction-card humanitarian">
        <div class="direction-header">
            <h3>Гуманитарное</h3>
        </div>
        <p>Русский язык, Литература, История</p>
    </div>
    <div class="direction-card applied">
        <div class="direction-header">
            <h3>Прикладное</h3>
        </div>
        <p>Технология, Труд, Черчение</p>
    </div>
    <div class="direction-card sport">
        <div class="direction-header">
            <h3>Спортивное</h3>
        </div>
        <p>Физкультура, Соревнования</p>
    </div>
</div>

<div class="info-section">
    <div class="info-card">
        <h3>Как это работает?</h3>
        <ol>
            <li>Загрузи грамоту или диплом</li>
            <li>Модераторы проверят данные</li>
            <li>Система начислит баллы</li>
            <li>Обменивай баллы на оценки</li>
        </ol>
    </div>
    <div class="info-card">
        <h3>Преимущества</h3>
        <ul>
            <li>Справедливая оценка достижений</li>
            <li>Снижение учебной нагрузки</li>
            <li>6 направлений для развития</li>
            <li>Ежегодное награждение лучших</li>
        </ul>
    </div>
</div>
{% endblock %}