@extends('layouts.master')
@section('accueilactive', 'active')
@section('content')

<!-- Banner Area -->
<section id="home_one_banner">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="banner_one_text">
                    <h1><span><span class="color_big">AESEJ</span> TOGO</span>
                    Appui à l'Education et à la Santé des Enfants et des Jeunes.</h1>
                    <p>AESEJ vous présente les opportunités les ressources et les astuses qui vont naturellement ammener les apprenants à s'exprimer en anglais. Elle vise aussi à créer un impact signitificatif dans 50 écoles, en commencant par la grande ville de Lomé.</p>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="banner_one_img">
                    <img src="template/assets/img/banner/rena.jpg"  width="619" height="684">
                    <div class="banner_element">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Top Area -->
<section id="about_top_area" class="section_padding">
    <div class="container">
        <div class="row" style="justify-content: center; ">
            <div class="col-lg-3 col-md-6 col-sm-12 col-12">
                <div class="about_top_boxed bg_one">
                    <div class="about_top_boxed_icon">
                        <img src="template/assets/img/icon/book.png" alt="img">
                    </div>
                    <div class="about_top_boxed_text">
                        <p></p>
                        <h3>Education</h3>
                        <!-- <a href="about.html">Plus de details...</a> -->
                    </div>
                    <div class="about_top_boxed_vector">
                        <img src="template/assets/img/icon/round.png" alt="img">
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 col-12">
                <div class="about_top_boxed bg_three">
                    <div class="about_top_boxed_icon">
                        <img src="template/assets/img/icon/heart.png" alt="img">
                    </div>
                    <div class="about_top_boxed_text">
                        <p></p>
                        <h3>Santé</h3>
                        <!-- <a href="about.html">Plus de details...</a> -->
                    </div>
                    <div class="about_top_boxed_vector">
                        <img src="template/assets/img/icon/round.png" alt="img">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Area -->
<section id="about_area" class="section_padding_bottom">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="about_area_img">
                    <img src="template/assets/premg.jpg" alt="img">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="about_area_main_text">
                    <div class="about_area_heading">
                        <img src="template/assets/img/icon/about.png" alt="img">
                        <h3>Bienvenue à AESEJ</h3>
                    </div>
                    <div class="about_area_heading_two">
                        <h2>Un monde de<span class="color_big_heading"> connaissance </span> <br />
                            pour tous</h2>
                        <h3>Voici les objectifs majeurs: </h3>
                    </div>
                    <div class="about_area_para">
                        <h5>Appui aux enfants et Jeunes par Des séances de formations de leadership et d'entrepreunariat.</h5>
                        <p>Eveil le civisme et le patriotisme.</p>
                        <p> Aide à l'assistance médical.</p>
                    </div>
                    <div class="about_vedio_area">
                        <a href="https://www.youtube.com/watch?v=5YtQtSJp67o" class="vedio_btn popup-vimeo"><i
                                class="fa fa-play"></i>Comment nous travaillons</a>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</section>

<!-- Trending causes Area -->
<section id="trending_causes" class="section_after section_padding bg-color">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 offset-lg-3 col-md-12 col-sm-12 col-12">
                <div class="section_heading">
                    <h2> Objectifs et buts et moyens d'actions</h2>
                    <p>Vue l'ampleur que prend l'éducation et les formations professionnelles dans nos régions surtout dans la langue anglaise et vu aussi le peu de moyen dont dispose la population surtout jeune pour s'en approprier et aussi certaines maladies infantiles et juvéniles qui attaquent la population à des périodes déterminées de l'année, il s'avère indispensable de mettre sur pied une association AESEJ pour apporter un appui et contribuer au développement socio-éducatif et sanitaire.</p>
                </div>
            </div>
        </div>
        <div class="row" id="counter">
            <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="case_boxed_wrapper">
                    <div class="case_boxed_img">
                        <a href="javascript:void(0)"><img src="template/assets/img/causes/objectif.png" alt="img"></a>
                        <span class="causes_badge bg-danger">Objectifs majeurs</span>
                    </div>
                    <div class="causes_boxed_text">
                        <div class="class-full causes_pro_bar progress_bar">
                            <div class="class-full-bar-box">
                                <!-- <h3 class="h3-title">Goal: <span>$45,000</span></h3>
                                <div class="class-full-bar-percent">
                                    <h2><span class="counting-data" data-count="100">0</span>
                                        <span>%</span>
                                    </h2>
                                </div> -->
                                <div class="skill-bar class-bar" data-width="100%">
                                    <div class="skill-bar-inner class-bar-in"></div>
                                </div>
                            </div>
                        </div>
                        <ul>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Appui aux enfants et Jeunes par Des séances de formations de leadership et d'entrepreunariat</li>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Promouvoir la lecture et l'autodidacte</li>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Eveiller le civisme et le patriotisme</li>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Aide à l'assistance médical</li>
                        </ul>
                        
                        <div class="causes_boxed_bottom_wrapper">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                   
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <div class="casuses_bottom_boxed casuses_left_padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="case_boxed_wrapper">
                    <div class="case_boxed_img">
                        <a href="javascript:void(0)"><img src="{{asset('template/assets/img/causes/moyen.png')}}" alt="img"></a>
                        <span class="causes_badge bg-danger">Moyens d'actions</span>
                    </div>
                    <div class="causes_boxed_text">
                        <div class="class-full causes_pro_bar progress_bar">
                            <div class="class-full-bar-box">
                                <!-- <h3 class="h3-title">Goal: <span>$45,000</span></h3>
                                <div class="class-full-bar-percent">
                                    <h2><span class="counting-data" data-count="100">0</span>
                                        <span>%</span>
                                    </h2>
                                </div> -->
                                <div class="skill-bar class-bar" data-width="100%">
                                    <div class="skill-bar-inner class-bar-in"></div>
                                </div>
                            </div>
                        </div>
                        <ul>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Organiser Des concours </li>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Collaborer avec d'autres NGOs</li>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Fournir des kits scolaires & sanitaires</li>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Visites dans les écoles et sensibilisation aux élèves sur les thèmes de l'Education.</li>
                            <li style="list-style-type: circle !important; margin-left: 15px !important; text-align: justify;">Communication sur les médias</li>
                        </ul>
                        
                        <div class="causes_boxed_bottom_wrapper">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                   
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <div class="casuses_bottom_boxed casuses_left_padding">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                <img src="{{asset('template/assets/img1.jpg')}}">
                <img style="margin-top: 15px" src="{{asset('template/assets/img2.jpg')}}">
            </div>

            
        </div>
    </div>
</section>

<!-- Blog Area -->
<section id="home_blog_area" class="section_after bg-color">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 offset-lg-3 col-md-12 col-sm-12 col-12">
                <div class="section_heading">
                    <h2>
                        <span class="color_big_heading">Nos dernières publicaions
                    </h2>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach($actualite as $actualites)
            <div class="col-lg-4">
                <div class="blog_card_wrapper mt-30">
                    <div class="blog_card_img">
                        <a href="{{url('detail_article/'.$actualites->IdArticle)}}"><img style="height: 270px" src="{{asset($actualites->ImageArticle)}}" alt="img"></a>
                    </div>
                    <div class="blog_card_text">
                        <div class="blog_card_tags">
                            <a href="{{url('detail_article/'.$actualites->IdArticle)}}">#Actualités</a>
                        </div>
                        <div class="blog_card_heading">
                            <h3><a href="{{url('detail_article/'.$actualites->IdArticle)}}">{{ Str::limit($actualites->TitreArticle, 20, '...')}}</a></h3>
                            <p>{!! Str::limit($actualites->ContenuArticle, 50, '...') !!}</p>
                        </div>
                        <div class="blog_boxed_bottom_wrapper ">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <div class="blog_bottom_boxed">
                                        <div class="blog_bottom_icon">
                                            <img src="template/assets/img/icon/cal.png" alt="icon">
                                        </div>
                                        <div class="blog_bottom_content">
                                            <h5>Date:</h5>
                                            
                                            <p>{{$day }} {{$months[$month-1] }} {{$year }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <div class="blog_bottom_boxed blog_left_padding">
                                        <div class="blog_bottom_icon">
                                            <img src="template/assets/img/icon/user.png" alt="icon">
                                        </div>
                                        <div class="blog_bottom_content">
                                            <h5>Par:</h5>
                                            <p>AESEJ</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>

            @endforeach
            
        </div>
    </div>
</section>



<!-- Partner Area -->
<section id="partner_area">
    <!-- <h2 class="d-none">Heading</h2> -->
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="partner_slider_wrapper owl-theme owl-carousel">
                    <div class="partner_logo">
                        <a href="https://logexit.com"><img src="template/assets/logex.png" alt="img"></a>
                    </div>
                    <div class="partner_logo">
                        <a href="https://cabinetsynergie.com"><img src="template/assets/synergie.png" alt="img"></a>
                    </div>
                    <div class="partner_logo">
                        <a href="https://cabinetsynergie.com"><img src="template/assets/acpve.png" alt="img"></a>
                    </div>
                    <div class="partner_logo">
                        <a href="https://cabinetsynergie.com"><img src="template/assets/edole.png" alt="img"></a>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</section>

    
@endsection