@extends('layouts.app')

@section('content')
<div style="background-image: url('img/waaye.jpg')" class="bg-cover bg-center">
    <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">Waaye est une solution de réseau social professionnel privé</h1>
            <p class="text-white text-base lg:text-xl leading-normal">
         Vous pouvez collaborer, échanger et Federer votre communauté
            </p>
        </div>
    </div>
</div>

<div class="bg-white py-6">
    <div class="container flex flex-col px-2 lg:px-24">
        <div class="flex items-baseline justify-between border-b-2 border-grey-light mb-6">
            <span class="font-bold uppercase tracking-wide py-1 border-b-2 border-waaye -mb-2px">Actualités</span>
            <a href="#" class="font-semiblod text-black no-underline hover:underline">Voir plus</a>
        </div>
        <div class="flex flex-wrap -mx-3">
            <div class="w-full md:w-1/2 lg:w-1/3 px-3 flex flex-col mb-6">
                <div class="bg-white rounded border flex-1 flex flex-col overflow-hidden hover:shadow">
                    <a href="#." class="block no-underline bg-cover h-32" style="background-image: url('img/pexels.jpeg')"></a>
                    <div class="px-4 py-3 flex-1 flex flex-col justify-between">
                        <a href="#" class="text-sm text-black no-underline hover:underline">Think Outside the Database</a>
                    </div>
                </div>
            </div>

            <div class="w-full md:w-1/2 lg:w-1/3 px-3 flex felx-col mb-6">
                <div class="bg-white rounded border flex-1 flex flex-col overflow-hidden hover:shadow">
                    <a href="#." class="block no-underline bg-cover h-32" style="background-image: url('img/photo1.jpeg')"></a>
                    <div class="px-4 py-3 flex-1 flex flex-col justify-between">
                        <a href="#" class="text-sm text-black no-underline hover:underline">Uses Fewer Boerders</a>
                    </div>
                </div>
            </div>

            <div class="w-full md:w-1/2 lg:w-1/3 px-3 flex felx-col mb-6">
                <div class="bg-white rounded border flex-1 flex flex-col overflow-hidden hover:shadow">
                    <a href="#." class="block no-underline bg-cover h-32" style="background-image: url('img/photo2.jpg')"></a>
                    <div class="px-4 py-3 flex-1 flex flex-col justify-between">
                        <a href="#" class="text-sm text-black no-underline hover:underline">Overlap Image to Add Depth Overlap Image to Add Depth Overlap Image to Add Depth </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg-grey-lighter">
    <div class="container flex flex-wrap px-2 lg:px-24 py-8 text-black">
        <div class="w-full lg:w-1/3">
            <a href="#" class="text-black no-underline flex items-center">
                <div class="w-1/3 flex items-center p-2">
                    <div class="bg-white text-black rounded-full text-center w-full p-4">
                        <i class="fa fa-users fa-3x"></i>
                    </div>
                </div>
                <div class="w-2/3 flex items-center p-2">
                    <div class="">
                        <span class="font-bold text-3xl leading-none">2910</span>
                        <br>
                        <span class="text leading-none">Membres</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="w-full lg:w-1/3">
            <a href="#" class="text-black no-underline flex items-center">
                <div class="w-1/3 flex items-center p-2">
                    <div class="bg-white text-black rounded-full text-center w-full p-4">
                        <i class="fa fa-calendar-alt fa-3x"></i>
                    </div>
                </div>
                <div class="w-2/3 flex items-center p-2">
                    <div class="">
                        <span class="font-bold text-3xl leading-none">13</span>
                        <br>
                        <span class="text leading-none">Evènements</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="w-full lg:w-1/3">
            <a href="#" class="text-black no-underline flex items-center">
                <div class="w-1/3 flex items-center p-2">
                    <div class="bg-white text-black rounded-full text-center w-full p-4">
                        <i class="fa fa-bullhorn fa-3x"></i>
                    </div>
                </div>
                <div class="w-2/3 flex items-center p-2">
                    <div class="">
                        <span class="font-bold text-3xl leading-none">5</span>
                        <br>
                        <span class="text leading-none">Offres</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

<div class="bg-white py-6">
    <div class="container flex flex-col px-2 lg:px-24">
        <div class="flex items-baseline justify-between border-b-2 border-grey-light mb-6">
            <span class="font-bold uppercase tracking-wide py-2 border-b-2 border-waaye -mb-2px">évènements</span>
            <a href="#" class="font-semiblod text-black no-underline hover:underline">Voir plus</a>
        </div>
        <div class="flex flex-wrap -mx-3">
            <div class="w-full md:w-1/2 lg:w-1/3 px-3 flex flex-col mb-6">
                <div class="bg-white border flex-1 flex flex-col overflow-hidden rounded hover:shadow">
                    <a href="#." class="block no-underline bg-cover h-48 no-underline text-black px-4 py-4" style="background-image: url('img/pexels.jpeg')">
                        <div class="w-1/4 bg-white border text-center py-1 rounded">
                            <div class="text-red font-bold leading-none">12</div>
                            <div class="text-sm text-grey-dark leading-none">Mars</div>
                        </div>
                    </a>
                    <div class="px-4 py-3 flex-1">
                        <span class="text-sm text-grey-dark"><i class="far fa-clock"></i> 12 Mars 2019 à 10:00</span> <br>
                        <a href="#" class="text-sm text-black no-underline hover:underline">Think Outside the Database</a>
                    </div>
                </div>
            </div>

            <div class="w-full md:w-1/2 lg:w-1/3 px-3 flex flex-col mb-6">
                <div class="bg-white border flex-1 flex flex-col overflow-hidden rounded hover:shadow">
                    <a href="#." class="block no-underline bg-cover h-48 no-underline text-black px-4 py-4" style="background-image: url('img/photo2.jpg')">
                        <div class="w-1/4 bg-white border text-center py-1 rounded">
                            <div class="text-red font-bold leading-none">12</div>
                            <div class="text-sm text-grey-dark leading-none">Mars</div>
                        </div>
                    </a>
                    <div class="px-4 py-3 flex-1">
                        <span class="text-sm text-grey-dark"><i class="far fa-clock"></i> 12 Mars 2019 à 10:00</span> <br>
                        <a href="#" class="text-sm text-black no-underline hover:underline">Think Outside the Database</a>
                    </div>
                </div>
            </div>

            <div class="w-full md:w-1/2 lg:w-1/3 px-3 flex flex-col mb-6">
                <div class="bg-white border flex-1 flex flex-col overflow-hidden rounded hover:shadow">
                    <a href="#." class="block no-underline bg-cover h-48 no-underline text-black px-4 py-4" style="background-image: url('img/photo1.jpeg')">
                        <div class="w-1/4 bg-white border text-center py-1 rounded">
                            <div class="text-red font-bold leading-none">12</div>
                            <div class="text-sm text-grey-dark leading-none">Mars</div>
                        </div>
                    </a>
                    <div class="px-4 py-3 flex-1">
                        <span class="text-sm text-grey-dark"><i class="far fa-clock"></i> 12 Mars 2019 à 10:00</span> <br>
                        <a href="#" class="text-sm text-black no-underline hover:underline">Think Outside the Database</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg-white py-6">
    <div class="container flex flex-col lg:px-24 px-2">
        <div class="flex items-baseline justify-between border-b-2 border-grey-light mb-6">
            <span class="font-bold uppercase tracking-wide py-2 border-b-2 border-waaye -mb-2px">Offres</span>
            <a href="#" class="font-semiblod text-black no-underline hover:underline">Voir plus</a>
        </div>
        <div class="flex flex-wrap -mx-2">
            <div class="w-full lg:w-1/2 flex flex-col mb-3 px-2">
                <a href="#" class="bg-white border flex-1 flex rounded hover:shadow p-3 no-underline">
                    <div class="w-1/5 text-center">
                        <img src="{{ asset('img/entreprise.png') }}" class="border h-12 w-12 md:h-16 md:w-16 lg:h-16 lg:w-16">
                    </div>
                    <div class="w-full pl-1">
                        <div class="text-grey-darkest font-bold">
                            <span class="text-base text-black font-bold no-underline hover:underline">
                                Nullam accumsan accumsan gravida.
                            </span>
                        </div>
                        <div class="text-grey-darkest">Creatic Studio</div>
                        <div class="text-grey-darker text-sm mb-2">
                            <div>
                                <i class="fa fa-map-marker"></i> Dakar, Sénégal
                            </div>
                            <div>
                                <i class="far fa-clock"></i> Il y a 5 jours
                                <i class="fa fa-briefcase ml-2"></i> CDI
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="w-full lg:w-1/2 flex flex-col mb-3 px-2">
                <a href="#" class="bg-white border flex-1 flex rounded hover:shadow p-3 no-underline">
                    <div class="w-1/5 text-center">
                        <img src="{{ asset('img/logo-entreprise1.png') }}" class="h-12 w-12 lg:h-16 lg:w-16">
                    </div>
                    <div class="w-full pl-1">
                        <div class="text-grey-darkest font-bold">
                            <span class="text-base text-black font-bold no-underline hover:underline">
                                Nullam accumsan accumsan gravida.
                            </span>
                        </div>
                        <div class="text-grey-darkest">Creatic Studio</div>
                        <div class="text-grey-darker text-sm mb-2">
                            <div>
                                <i class="fa fa-map-marker"></i> Dakar, Sénégal
                            </div>
                            <div>
                                <i class="far fa-clock"></i> Il y a 5 jours
                                <i class="fa fa-briefcase ml-2"></i> CDI
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection