{% extends "base.html" %}

{% block title %}Estadísticas - Renako{% endblock %}

{% block content %}
<div class="space-y-12">
    <!-- Stats Hero Section Component -->
    <div class="opacity-0 transform translate-y-6" id="statsHero">
        {% include 'components/stats_hero.html' %}
    </div>

    <!-- Statistics Cards Component -->
    <div class="opacity-0 transform translate-y-6" id="statsCards">
        {% include 'components/stats_cards.html' %}
    </div>
</div>

<script>
// Animación de entrada para la página de Estadísticas
document.addEventListener('DOMContentLoaded', function() {
    const statsHero = document.getElementById('statsHero');
    const statsCards = document.getElementById('statsCards');
    
    // Animar hero section
    setTimeout(() => {
        statsHero.style.transition = 'all 0.8s ease-out';
        statsHero.style.opacity = '1';
        statsHero.style.transform = 'translateY(0)';
    }, 200);
    
    // Animar cards de estadísticas
    setTimeout(() => {
        statsCards.style.transition = 'all 0.8s ease-out';
        statsCards.style.opacity = '1';
        statsCards.style.transform = 'translateY(0)';
    }, 500);
});
</script>
{% endblock %}