{# src/CeremhBundle/Ressources/home.html.twig #}

{% extends "main/_Layout.html.twig" %}

{% block Meta %}

    <title>{{ meta.title }}</title>
    <meta name="description" content="{{ meta.description }}">
    <meta name="keyword" content="{{ meta.keyword }}">

{% endblock %}

{% block content %}

    <!--
    <div class="page-titles-img title-space-lg bg-parallax parallax-overlay "  style=' height: 300px;  background-image: url({{ asset('_Assets/Images/image_fond_13.png') }})'>
        <div class="container">
            <div class="row">
                <div class="col-md-8" style="text-align: left">
                    <h4 class="banner-Subtitle" style="z-index:7">une politique de mobilité</h4>
                    <h2 class="banner-title" style="z-index:7"> a destination de l'innovation</h2>
                </div>
            </div>
        </div>
    </div><!--page title end-->

    {% for flashMessage in app.session.flashbag.get('1') %}
        <div class="alert alert-success alert-dismissable">
            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
            {{ flashMessage }}
        </div>
    {% endfor%}

    {% for flashMessage in app.session.flashbag.get('2') %}
        <div class="alert alert-warning alert-dismissable">
            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
            {{ flashMessage }}
        </div>
    {% endfor%}

    <div id="rev_slider_1078_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="classic4export" data-source="gallery" style="margin:0px auto;background-color:transparent;padding:0px;margin-top:0px;margin-bottom:0px;height: 200px!important;">
        <!-- START REVOLUTION SLIDER 5.4.1 auto mode -->
        <div id="rev_slider_1078_1" class="rev_slider fullwidthabanner" style="display:none; height: 100px" data-version="5.4.1">
            <ul>

                {% for bd in bandeau.records %}

                    <!-- SLIDE  -->
                    <li data-index="rs-3045-{{ bd.fields.Name }}" data-transition="parallaxtoleft" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000" data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="{{ bd.fields.bd_image[0].url }}"  alt="image auto-école"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption mainSlide-Subtitle   tp-resizeme"
                             id="slide-1706-layer-1"
                             data-x="['left','left','left','left']" data-hoffset="['30','15','15','15']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['-102','-102','-92','-68']"
                             data-width="none"
                             data-height="none"
                             data-whitespace="nowrap"
                             data-fontsize="['20','20','20','20']"
                             data-lineheight="['25','25','25','25']"
                             data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":800,"speed":1500,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-textAlign="['left','left','left','left']"
                             data-paddingtop="[0,0,0,0]"
                             data-paddingright="[0,0,0,0]"
                             data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"

                             style="z-index: 7; white-space: nowrap;text-transform:left;">CEREMH - {{ bd.fields.bd_marque }}</div>
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption mainSlide-Title-Centered   tp-resizeme"
                             id="slide-1706-layer-2"
                             data-x="['left','left','left','left']" data-hoffset="['30','15','15','15']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','1']"
                             data-fontsize="['55','55','40','30']"
                             data-lineheight="['65','65','55','35']"
                             data-width="['800','700','621','420']"
                             data-height="none"
                             data-whitespace="normal"

                             data-type="text"
                             data-responsive_offset="on"
                             data-frames='[{"delay":1400,"speed":1500,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-textAlign="['left','left','left','left']"
                             data-paddingtop="[0,0,0,0]"
                             data-paddingright="[0,0,0,0]"
                             data-paddingbottom="[10,10,10,10]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 6; text-align:left; max-width:1170px; white-space: normal;">{{ bd.fields.bd_claim }} </div>
                        <!-- LAYER NR. 3 -->
                        <div class="tp-caption mainSlide-Button btn btn-lg btn-white-outline "
                             id="slide-1706-layer-3"
                             data-x="['left','left','left','left']" data-hoffset="['30','15','15','15']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['112','112','112','96']"
                             data-width="none"
                             data-height="none"
                             data-whitespace="nowrap"

                             data-type="button"
                             data-actions='[{"event":"click","action":"http://www.ceremh.org","offset":"px","delay":""}]'
                             data-responsive_offset="on"
                             data-responsive="off"
                             data-frames='[{"delay":2000,"speed":1500,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-textAlign="['left','left','left','left']"
                             data-paddingtop="[12,12,12,12]"
                             data-paddingright="[35,35,35,35]"
                             data-paddingbottom="[12,12,12,12]"
                             data-paddingleft="[35,35,35,35]"


                             style="z-index: 8; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;"><a href="{{ bd.fields.bd_lien }}" style="color: darkgray">{{ bd.fields.bd_titre_btn }}</a> </div>
                    </li>
                    <!-- SLIDE  -->


                {% endfor %}


            </ul>
            <div class="tp-bannertimer" style="height: 7px; background-color: rgba(255, 255, 255, 0.25);"></div>	</div>
    </div><!-- END REVOLUTION SLIDER -->






    <div class="container pt50 pb50">

        <div class="row">
            <div class="col-8">




                <h1 style="font-size: 40px; color:darkgray">Expert de la <br><span style="font-size: 50px; color:#2D57A3">Mobilité et du Handicap</span><br> au service de l'intérêt général</h1>

                <hr>

                <p>Les compétences du CEREMH sont à votre service pour vous accompagner dans vos projets de mobilité à destination des personnes en situation de handicap.</p>

                <p>Nous sommes en mesure de vous proposer différentes formes d'accompagnement.
                Notre fonctionnement en LivingLab nous permet d'accéder à différentes ressources matérielles
                    ou partenaires pour répondre complètement à vos besoins.</p>





                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb30">
                            <img class="card-img-top img-fluid" style="padding: 5px" src="_Assets/Images/logo_ceremh/Logo_Ceremh_Conduite.png" alt="Card image cap">
                            <div class="card-body text-center">
                                <h4 class="card-title">
                                    Ceremh Conduite
                                </h4>
                                <p class="card-text"></p>
                                <a href="{{ path('conduite') }}" class="btn btn-primary">Rejoindre</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb30">
                            <img class="card-img-top img-fluid" style="padding: 5px" src="_Assets/Images/logo_ceremh/Logo_Ceremh_Formation.png" alt="Card image cap">
                            <div class="card-body text-center">
                                <h4 class="card-title">
                                    Ceremh Formation
                                </h4>
                                <p class="card-text"></p>
                                <a href="{{ path('formation') }}" class="btn btn-primary">Rejoindre</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb30">
                            <img class="card-img-top img-fluid" style="padding: 5px" src="_Assets/Images/logo_ceremh/Logo_Ceremh_Lab.png" alt="Card image cap">
                            <div class="card-body text-center">
                                <h4 class="card-title">
                                    Ceremh Lab
                                </h4>
                                <p class="card-text"></p>
                                <a href="{{ path('lab') }}" class="btn btn-primary">Rejoindre</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-4" style="padding-left: 50px">
                
                <img src="{{ asset('_Assets/Images/logo_ceremh/Logo_Ceremh.png') }}" class="" style="width: 80%; margin-bottom: 60px">


                <h4> CEREMH</h4>
                <p>10-12 avenue de l'Europe, <br>78140 - Vélizy Villacoublay - France</p>
                <P><i class="fa fa-envelope"> </i> contact@ceremh.org <br> <i class="fa fa-phone"> </i> 01 39 25 49 87  </P>


            </div>

        </div>

    </div>


    <div class=" pt40 pb40 bg-faded">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>Campagne de dons 2023</h2>
                    <hr>
                </div>
                <div class="col-lg-8">
                    <p style="text-align: center; color:#2D57A3; font-size: 25px; line-height: 30px; font-weight: bold">Vos contributions nous sont essentielles pour atteindre de nos objectifs </p>
                    <p style="text-align: center; color:#2D57A3; font-size: 25px; line-height: 30px; font-weight: bold">- Soutenez nous - </p>
                    <p style="font-weight: bold; text-align: center">Nous avons besoin en 2023 d'accompagner par loin de 50 élèves à la conduite vers une nouvelle autonomie et d'investir sur un nouveau véhicule à conduite embarquée. <p>
                </div>
                <div class="col-lg-4" style="text-align:center">
                    <div id="donate-button-container">
                        <div id="donate-button"></div>
                        <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
                        <script>
                            PayPal.Donation.Button({
                                env:'production',
                                hosted_button_id:'FHHPVR3MBREZQ',
                                image: {
                                    src:'https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_donate_LG.gif',
                                    alt:'Bouton Faites un don avec PayPal',
                                    title:'PayPal - The safer, easier way to pay online!',
                                }
                            }).render('#donate-button');
                        </script>
                    </div>
                    <hr>
                    <img src="{{ asset('_Assets/Images/paypal/QR_code.png') }}" class="" style="width: 80%">
                </div>
            </div>
        </div>
    </div>




    <div class=" pt40 pb40">

        <div class="container">

            <div class="title-heading1">
                <H3>Des actualités à consulter</h3>
            </div>

            <div class="row">



                {% for data in actu.records %}


                    <div class="col-lg-4">
                        <div class="card" style="margin-top: 20px">
                            <div class="card-body">
                                <h4 class="card-title">
                                    {{ data.fields.ac_titre }}
                                </h4>
                                <span class="card-subtitle text-muted">


                                                {% if data.fields.ac_marque == 'Conduite' %}
                                                    <i  style="color:#2C57A3" class="fa fa-tags"></i> <a href="#">CEREMH Conduite</a>
                                                {% endif %}
                                                {% if data.fields.ac_marque == 'Lab' %}
                                                    <i  style="color:#7CC27C" class="fa fa-tags"></i> <a href="#">CEREMH Lab</a>
                                                {% endif %}
                                                {% if data.fields.ac_marque == 'Formation' %}
                                                    <i  style="color:orange" class="fa fa-tags"></i> <a href="#">CEREMH Formation</a>
                                                {% endif %}

                                </span>
                            </div>

                            {% if  data.fields.ac_nom_image is not null %}
                            <img class="img-fluid" src="{{ data.fields.ac_image[0].url }}" alt="Card image cap">
                            {% endif %}

                            <div class="card-body">
                                {%  if data.fields.ac_contenu is not null %}
                                <p class="card-text">{{ data.fields.ac_contenu }}</p>
                                {% endif %}
                                <a href="{{ data.fields.ac_lien }}" class="btn btn-primary">{{ data.fields.ac_titre_btn }}</a>
                            </div>
                        </div>
                    </div>

                {% endfor %}

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

    <!--
    <div class="cta bg-faded pt50 pb50">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h4>Le CEREMH accompagne les acteurs de la mobilité pour la conception de produits et services innovants.</h4>
                </div>
                <div class="col-lg-4">
                    <a href="#" class="btn btn-rounded btn-lg btn-outline-primary">
                        Nous connaitre en détail
                    </a>
                </div>
            </div>
        </div>
    </div> -->

{% endblock %}