@push('styles')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.min.css" integrity="sha512-s4DOVHc73MjMnsueMjvJSnYucSU3E7WF0UVGRQFd/QDzeAx0D0BNuAX9fbZSLkrYW7V2Ly0/BKHSER04bCJgtQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{{asset('/css/panel.css')}}">

@endpush

@php
    $urlStart = auth()->user()->role_id == \App\Models\User::CUSTOMER_ROL_ID ?
        '/invitations/'.$invitation->id.'/edit':
        '/invitations/'.$invitation->id.'/overview';
@endphp
<section class="start min-vh-100 d-flex align-items-center" id="startAnimated">
    <livewire:animated-svg path="img/anim.json" className="d-sm-block d-none" style="position: absolute; z-index: -1" />
    <livewire:animated-svg path="img/anim-mobile.json" className="d-sm-none d-block" style="position: absolute; z-index: -1" />
    <div class="container text-center">
        <div class="textos">
            <h2 class="fs-sm-48 fw-800 fs-32">¡Fantástico!</h2>
            <p class="fs-sm-28 fw-600 fs-24">Comencemos</p>
            <a href="{{$urlStart}}" wire:navigate class="btn text-uppercase bg-primary rounded-pill text-white px-5 fw-600 py-2 fs-sm-18 fs-16" wire:click="nextStep">comenzar</a>
        </div>
    </div>
</section>
@script
<script>
    setTimeout(()=>{
        $('.image-bg')[0].style=""
    },100)
</script>
@endscript