{% extends 'base.html.twig' %}

{% block title %}Accueil - Job Portal{% endblock %}

{% block body %}
    <section class="bg-cover bg-center py-20" style="background-image: url('{{ asset('images/fond_site.png') }}');">
        <div class="container mx-auto text-center text-white">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Trouvez votre stage de rêve !</h1>
            <p class="text-lg mb-8">Connectez les talents aux opportunités : votre clé vers le succès professionnel</p>
            <div class="bg-white rounded-lg shadow-lg p-6 inline-block">
                <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
                    <label>
                        <input class="border border-gray-300 rounded py-2 px-4 w-full md:w-auto" placeholder="Nom de l'entreprise" type="text"/>
                    </label>
                    <label>
                        <input class="border border-gray-300 rounded py-2 px-4 w-full md:w-auto" placeholder="Indiquez un endroit" type="text"/>
                    </label>
                    <label>
                        <input class="border border-gray-300 rounded py-2 px-4 w-full md:w-auto" placeholder="Sélectionnez une catégorie" type="text"/>
                    </label>
                    <button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-6 rounded">Trouvez un stage</button>
                </div>
            </div>
            <div class="flex justify-center space-x-8 mt-8">
                <div class="text-center">
                    <i class="fas fa-briefcase text-2xl"></i>
                    <p class="mt-2">+850 Stages</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-users text-2xl"></i>
                    <p class="mt-2">1500 Candidats</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-building text-2xl"></i>
                    <p class="mt-2">+500 Entreprises</p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}