{% extends "base.html" %}
{% block title %}Inicio{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-eyebrow">Panel principal</div>
  <div class="page-title"><i class="bi bi-house"></i> Bienvenido a PyFleet</div>
  <div class="page-subtitle">Gestión de flota.</div>
</div>

<div class="card-grid">
  <div class="card">
    <div class="card-icon">🏠</div>
    <div class="card-title">Página de Inicio</div>
    <div class="card-desc">Desde el menu lateral puedes navegar a las distintas secciones.</div>
  </div>
  <div class="card">
    <div class="card-icon">🔔</div>
    <div class="card-title">Notificaciones</div>
    <div class="card-desc">El mensaje informativo que escribas aparecerá en cualquier sección.</div>
    <div class="card-desc">La app mantiene los mensajes activos hasta que sean eliminados.</div>

  </div>
  <div class="card">
    <div class="card-icon">⚡</div>
    <div class="card-title">Escalable</div>
    <div class="card-desc">En la seccion CONFIGURACIÓN (Unidades - Tipo vehículo) podrás añadir o eliminar datos.</div>
  </div>
</div>

<form class="msg-form" method="POST">
  <input type="text" name="mensaje" placeholder="Escribe un mensaje…" autofocus>
  <button type="submit">Enviar</button>
</form>


{% endblock %}