@extends('layouts.app')

@section('content')
<div style="background-image: url('img/hero-pattern.svg')">
    <div class="container pb-4 lg:pb-16 pt-16 lg:pt-32 mx-auto px-6">
        <div class="my-10 flex flex-col text-center">
            <h1 class="text-white text-2xl md:text-6xl lg:text-5xl font-bold mb-4 leading-none">Tired of relying on Bootstrap</h1>
            <p class="text-white text-base lg:text-xl leading-normal">
                Le Lorem Ipsum est simplement du faux texte employé <br>
                dans <strong class="text-white font-bold">la composition</strong> et <strong class="text-white font-bold">la mise en page</strong> avant impression.
            </p>
        </div>
    </div>
</div>

<div class="container py-0 lg:py-16 flex flex-col">
    <div class="bg-white rounded shadow hover:shadow-lg px-4 py-4 lg:mb-8">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-1/4">
                <img src="{{ asset('img/undraw_exams_g4ow.png') }}" alt="" class="w-full">
            </div>
            <div class="w-full lg:w-3/4 flex flex-col px-3 py-3">
                <h1 class="flex-1 text-xl lg:text-3xl text-center lg:text-left text-grey-darkest">Etudiants ou Diplômés</h1>
                <p class="text-sm flex-1 text-center lg:text-left">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu imperdiet dolor. Pellentesque 
                    vitae feugiat mi. In ac sapien quis quam feugiat lobortis. Mauris maximus ligula tortor. Mauris ipsum enim, 
                    rutrum id iaculis facilisis, mollis at augue. Donec interdum elit est, id commodo sem gravida ac.
                </p>
                <div class="flex-1 lg:flex  lg:items-end text-center lg:text-left pt-3">
                    <a href="{{ route('etudiants-diplomes') }}" class="text-waaye no-underline text-sm mr-2 border border-waaye px-2 py-1 hover:bg-waaye hover:text-white">Activer votre compte</a>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded shadow hover:shadow-lg px-4 py-4 lg:mb-8">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-1/4">
                <img src="{{ asset('img/undraw_business_deal_cpi9.png') }}" alt="" class="w-full">
            </div>
            <div class="w-full lg:w-3/4 flex flex-col px-3 py-3">
                <h1 class="flex-1 text-xl lg:text-3xl text-center lg:text-left text-grey-darkest">Entreprises ou Recruteurs</h1>
                <p class="text-sm flex-1 text-center lg:text-left">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu imperdiet dolor. Pellentesque 
                    vitae feugiat mi. In ac sapien quis quam feugiat lobortis. Mauris maximus ligula tortor. Mauris ipsum enim, 
                    rutrum id iaculis facilisis, mollis at augue. Donec interdum elit est, id commodo sem gravida ac.
                </p>
                <div class="flex-1 lg:flex  lg:items-end text-center lg:text-left pt-3">
                    <a href="{{ route('compte-entrepreneur') }}" class="text-waaye no-underline text-sm mr-2 border border-waaye px-2 py-1 hover:bg-waaye hover:text-white">Créer votre compte</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection