<?php include 'header.php'; ?>

<style>
    .animated.fadeIn {
        /* Fondo relacionado con GPS */
        background-image: url('../public/images/gps-background.jpg'); 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 100vh; /* Altura mínima igual a toda la pantalla */
        padding: 2rem; /* Espaciado interno */
    }

    .card {
        background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente */
        border: none;
    }

    .card-body {
        padding: 2rem;
    }

    @media (max-width: 768px) {
        .animated.fadeIn {
            padding: 1rem;
            background-position: center top;
        }

        .card-body {
            padding: 1rem;
        }

        h3 {
            font-size: 1.5rem;
        }

        p {
            font-size: 1rem;
        }
    }
</style>

<div class="content mt-3">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h3>Bienvenido a Vehitraker</h3>
                        <p>
                            <strong>Vehitraker</strong> es un sistema integral de gestión de flotas que permite supervisar y controlar el mantenimiento preventivo y correctivo de tus vehículos automotores. Con nuestra plataforma, podrás garantizar que tu flota se mantenga en óptimas condiciones, reduciendo fallas inesperadas y mejorando la eficiencia operativa.
                        </p>
                        <p>
                            Gracias a la integración con tecnología de <strong>GPS</strong>, Vehitraker facilita la ubicación y seguimiento en tiempo real de cada unidad, optimizando rutas y fortaleciendo la seguridad de tu flota.
                        </p>
                        <p>
                            Nuestro sistema es utilizado por empresas en Perú y Latinoamérica, destacando por su enfoque práctico, escalable y adaptable a distintas necesidades operativas.
                        </p>
                        <p>
                            Te recomendamos revisar el manual de usuario para aprovechar al máximo todas las funcionalidades disponibles y garantizar una experiencia eficiente y productiva.
                        </p>
                        <p>
                            Estamos comprometidos con la mejora continua de Vehitraker y agradecemos cualquier sugerencia o comentario que permita optimizar su rendimiento y funcionalidad.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- .animated -->
</div><!-- .content -->

<?php include 'footer.php'; ?>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const wrapper = document.querySelector('.robot-wrapper');
        if (wrapper) {
            setTimeout(() => {
                wrapper.classList.add('show');
            }, 500); // Delay para animación
        }
    });
</script>
