@extends('layouts.splash')

@section('content')
<style>
        /* Conteneur principal */
    .main_view {
        position: relative; /* Permet au footer de se positionner à l’intérieur */
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        padding-bottom: 140px; /* Espace pour le footer */
    }

    
    /* Footer à l'intérieur du bloc principal */
    .footer-inside {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .footer-inside img {
        width: 100%;

    }
</style>
<link href="{{ asset('css/main2.css') }}" rel="stylesheet">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-xl-5 col-12 main_view">
            
            <!-- Header -->
            <img src="{{ asset('images/espacesud/header.png') }}" class="img-fluid" alt="Header">

            <!-- Texte principal -->
            <div class="row justify-content-center">
                <div class="col-10 mg-top-140 text-center">
                    <div class="blockQuestion">
                        <h2><strong>Accède dès à présent <br/>au Quiz Rocher du Diamant</strong></h2>
                    </div>
                </div>
            </div>

            <!-- Bouton vers le quiz -->
            <div class="row justify-content-center">
                <div class="col-4 mg-top-10 mg-bottom-200 text-center">
                    <a href="{{ url('jouer/' . $url) }}">
                        <img src="{{ asset('images/espacesud/start.png') }}" class="img-fluid" alt="Commencer le quiz">
                    </a>
                </div>
            </div>

             <!-- Footer à l'intérieur du bloc principal -->
            <div class="footer-inside">
                <img src="{{ asset('images/espacesud/Rocher.png') }}" alt="Footer Rocher">
            </div>
        </div>
    </div>
</div>

@endsection