@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<style>
    .container-divs {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 130px;
        margin-top: 30px;
    }

    .item-div {
        text-align: center;
    }

    .item-div button {
        background-color: #585858;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px;
    }

    .item-div h3 {
        margin: 15px 0 10px;
    }
</style>

<h2>Bienvenido</h2>
<h1>{{ $usuario }}</h1>

<br>

<div class="container-divs">

    <div class="item-div">
        <div>
            <img src="{{ asset('images/icono 1.svg') }}" alt="icono1" style="height: 200px;" />
        </div>
        <h3>TRACKING OS</h3>
        <button>loren ipsum</button>
    </div>

    <div class="item-div">
        <div>
            <img src="{{ asset('images/icono 2.svg') }}" alt="icono2" style="height: 200px;" />
        </div>
        <h3>DESCARGA MASIVA CEDIBLE</h3>
        <button>loren ipsum</button>
    </div>

    <div class="item-div">
        <div>
            <img src="{{ asset('images/icono 3.svg') }}" alt="icono3" style="height: 200px;" />
        </div>
        <h3>LEADTIME</h3>
        <button>loren ipsum</button>
    </div>

</div>
@endsection