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

{% block title %}Ateliers{% endblock %}

{% block body %}


    <h1 class="text-2xl" >Liste des ateliers</h1>

    <div class="container mx-auto flex flex-row flex-wrap justify-center">

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_atelier_debutants', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/atelier_grands_debutants.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Grands débutants</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Les bases de l'informatique : clavier, souris, e-mails, authentification.</p>
                <a href="{{ path('app_atelier_debutants', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_organisation_pc', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/organiser_pc.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Organisation sur mon PC</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">S'organiser et gérer ses documents dans son espace de travail.</p>
                <a href="{{ path('app_organisation_pc', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_france_connect', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/atelierfranceco.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">France Connect</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">S'authentifier sur les différents services administratifs avec France Connect.</p>
                <a href="{{ path('app_france_connect', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>


        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_controle_parental', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/atelier_controle_parental.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Contrôle parental</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Mettre en place sur un smartphone ou ordinateur un contrôle parental.</p>
                <a href="{{ path('app_controle_parental', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_cloud', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/atelier_cloud.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Le Cloud</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Comprendre ce qu'est réellement le Cloud.</p>
                <a href="{{ path('app_cloud', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_darkpattern', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/dark_pattern.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Les Dark Pattern</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Comment le design des sites et produits vous piègent.</p>
                <a href="{{ path('app_darkpattern', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_cv', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/atelier_CV.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Rédiger son CV</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Comment créer un CV design avec le logiciel en ligne CVDesignr.</p>
                <a href="{{ path('app_cv', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_nettoyage', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/nettoyage.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Nettoyer son PC</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Comment nettoyer son ordinateur pour ses performances et sa longévité.</p>
                <a href="{{ path('app_nettoyage', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>


        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_achatsecu', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/atelier_achat_secu.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Achat en ligne de manière sécurisée</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Les bon réflexes à avoir sur les sites e-commerce.</p>
                <a href="{{ path('app_achatsecu', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>

        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_mooc', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/mooc.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Apprendre avec les MOOC</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Découvrez comment apprendre toute sa vie et dans tous les domaines grace aux MOOC.</p>
                <a href="{{ path('app_mooc', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>


        <div class="m-2 w-80 border rounded-lg shadow bg-gray-800 border-gray-700">
            <a href="{{ path('app_appgoogle', {}) }}" target="_blank">
                <img class="rounded-t-lg" src="{{ asset('img/atelier_app_google.svg') }}" alt="" />
            </a>
            <div class="p-4">
                <a href="#">
                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">Les applications Google</h5>
                </a>
                <p class="mb-3 font-normal text-gray-400">Découverte des applications proposées avec un compte Google : des équivalences gratuites.</p>
                <a href="{{ path('app_appgoogle', {}) }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-700 focus:ring-blue-800" target="_blank">
                    Voir
                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>                
                </a>
            </div>
        </div>


    </div>

{% endblock %}