{% extends 'base.html.twig' %}
{% block asset_css %}
<link href="{{ asset('assets/css/aos.css') }}" rel="stylesheet">
<style>
.gallery-item {
height: 200px !important;
}
.gallery-item img {
/*width: 25%;*/
}
.about img {
width: 100% !important;
height: 100% !important;
}
.container2{
position: relative;
font-family: Arial;
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.text-block {
display:block;
position: absolute;
bottom: 3px;
right:0px;
left:0px;
width:265px;
background-color: #007b31;
text-align:center;
opacity:0.7;
color: white;
margin-left:auto ;
margin-right: auto;
}
</style>
{% endblock %}
{% block body %}
<section id="banniere" class="banniere align-items-center">
<div class="color-overlay"></div>
<div class="container-banner">
<video id="background-video" autoplay loop muted poster="{{ asset('assets/video/home.jpg') }}">
<source src="{{ asset('assets/video/home.mp4') }}" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" id="text_accueil">
<div class="text-banner" id="div-text-banner">
<h1 id="titre-text-banner">OFFICE PHARMACEUTIQUE MALGACHE</h1>
<span id="sous-titre-text-banner" style="font-size: 34px">Votre santé, notre métier</span>
</div>
<button class="btn btn-success" id="button-text-banner">
<a href="{{ path('app_auth_redirection') }}">
{% if not app.user %}
CONNECTEZ-VOUS
{% else %}
ESPACE CLIENT
{% endif %}
</a>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- End Hero -->
<main id="main">
<!-- ======= Why Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container">
<div class="row">
<div class="col-lg-7 align-items-stretch" data-aos="fade-right">
<div class="icon-box d-flex px-3">
<div class="icon">
{% if aproposList[0].image %}
<img src="{{ asset(aproposList[0].image) }}" alt="loan" width="60"
class="mb-2">
{% endif %}
</div>
<div>
<h4 class="title"><a href="">{{ aproposList[0].titre }}</a></h4>
<p class="description">
{{ aproposList[0].descCourte|raw }}
</p>
</div>
</div>
<div class="icon-box d-flex px-3">
<div class="icon">
{% if aproposList[1].image %}
<img src="{{ asset(aproposList[1].image) }}" alt="loan" width="60"
class="mb-2">
{% endif %}
</div>
<div>
<h4 class="title"><a href="">{{ aproposList[1].titre }}</a></h4>
<p class="description">
{{ aproposList[1].descCourte|raw }}
</p>
</div>
</div>
<div class="icon-box d-flex px-3">
<div class="icon">
{% if aproposList[2].image %}
<img src="{{ asset(aproposList[2].image) }}" alt="loan" width="60"
class="mb-2">
{% endif %}
</div>
<div>
<h4 class="title"><a href="">{{ aproposList[2].titre }}</a></h4>
<p class="description">
{{ aproposList[2].descCourte|raw }}
</p>
</div>
</div>
</div>
<div class="col-lg-5 d-flex align-items-stretch">
<div class="content" data-aos="fade-left" data-aos-anchor="#text_accueil"
data-aos-anchor-placement="top-bottom" data-aos-duration="2000">
<h2 class="text-center">A PROPOS</h2>
<p class="m-5" id="apropos-description">
{{ societe.descCourte }}
</p>
<div class="text-center">
<a href="/a-propos.php" class="more-btn">En savoir plus <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div><!-- End .content-->
</div>
</section><!-- End Why Us Section -->
<hr class="sep-section">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="row" data-aos="fade-up" data-aos-anchor="#why-us"
data-aos-anchor-placement="top-center" data-aos-duration="2000">
<img src="{{ asset('assets/images/bg-section/a_propos2.png') }}" alt="OPHAM"
class="col-12 col-ms-12 col-md-6 col-lg-6 col-xl-6 left" width="100%" height="100%"/>
<div class="col-12 col-ms-12 col-md-6 col-lg-6 col-xl-6 align-items-stretch right">
<h2 id="iso9001">ISO 9001 : Qualité de distribution aux normes internationales</h2>
<div class="d-flex px-3">
<div>
<div class="icon"><img src="{{ asset('assets/images/picto/equipe.png') }}"
alt="experience"></div>
</div>
<div class="text">
<h4 class="title">Equipe Expérimentée</h4>
<p class="description">Une équipe performante et présente sur tous les <b>canaux
de
distribution</b> de Madagascar</p>
</div>
</div>
<div class="d-flex px-3">
<div>
<div class="icon"><img src="{{ asset('assets/images/picto/tracabilite.png') }}"
alt="experience"></div>
</div>
<div class="text">
<h4 class="title" id="tracabilite">Traçabilite</h4>
<p class="description">L’assurance d’une <b>traçabilité</b> complète de vos produits</p>
</div>
</div>
<div class="d-flex px-3">
<div>
<div class="icon"><img src="{{ asset('assets/images/picto/savoir-faire.png') }}"
alt="savoir faire">
</div>
</div>
<div class="text">
<h4 class="title">Savoir Faire</h4>
<p class="description">
Un savoir-faire en distribution répondant aux exigences des <b>normes
internationales</b>
</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End About Section -->
<hr class="sep-section">
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="section-title" data-aos="fade-down" data-aos-anchor="#about"
data-aos-anchor-placement="top-center" data-aos-duration="2000">
<h2 class="" id="notreMetier">Notre métier</h2>
</div>
{% if metiers[2] %}
<div class="d-flex px-3 distribution mb-5" data-aos="fade-right"
data-aos-anchor="#iso9001"
data-aos-anchor-placement="top-center" data-aos-duration="1750">
<div>
<div class="icon"><i class="fa fa-ambulance"></i></div>
</div>
<div>
<h4 class="title">
<a id="metier2">
{{ metiers[2].titre }}
</a>
</h4>
</div>
</div>
{% endif %}
{% if metiers[1] %}
<div class="d-flex px-3 partenariat" data-aos="fade-left" data-aos-anchor="#iso9001"
data-aos-anchor-placement="top-center" data-aos-duration="1750">
<div>
<div class="icon"><i class="fa fa-user-md"></i></div>
</div>
<div>
<h4 class="title">
<a id="metier1">
{{ metiers[1].titre }}
</a>
</h4>
</div>
</div>
{% endif %}
{% if metiers[0] %}
<div class="d-flex px-3 representation" data-aos="fade-right" data-aos-anchor="#iso9001"
data-aos-anchor-placement="top-center" data-aos-duration="1750">
<div>
<div class="icon"><i class="fa fa-medkit"></i></div>
</div>
<div>
<h4 class="title">
<a id="metier0">
{{ metiers[0].titre }}
</a>
</h4>
</div>
</div>
{% endif %}
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 right ">
<img src="{{ asset('assets/images/metier/notre_metier.jpg') }}" alt="img-center"
class="img_right"
style="width:450px;height:450px;border-radius:50%;margin-top:28px;margin-left:177px;">
<!-- <img src="../assets/images/a-propos-right.png" alt="a-propos-right"> -->
</div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Doctors Section ======= -->
<section id="doctors" class="doctors">
<div class="container">
<div class="p-4"></div>
<div class="section-title" id="div-section-urgences" data-aos="fade-down" data-aos-anchor=".fa-medkit"
data-aos-duration="2000">
<h2 id="urgences">SERVICES D'URGENCE</h2>
<p>Découvrez tous les services d’urgence à Antananarivo et ses périphéries.</p>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pharmacie" id="pharmacie">
<h3 data-aos="fade-zoom-in" data-aos-anchor=".fa-medkit" class="text-center"
data-aos-anchor-placement="top-center" data-aos-duration="2000">
PHARMACIES DE GARDE
</h3>
<div class="container2">
<center>
<img src="{{ asset('assets/images/urgence/pharmacies.png') }}" class="mx-auto" height="200px"/>
</center>
<div class="text-block">
<p>
<i class="fa fa-calendar"></i> {{ startWeekDate|date('d/m/Y') }} au {{ endWeekDate|date('d/m/Y') }}
</p>
</div>
</div>
<div data-aos="fade-right" data-aos-anchor=".fa-medkit"
data-aos-anchor-placement="top-center" data-aos-duration="2000" id="pharmacie-items"
style="display: block; margin-left: auto; margin-right: auto; width: auto;" class="text-center mt-2">
{# <span class="calendrier">
<b>
<i class="fa fa-calendar"></i> 
{{ startWeekDate|date('d/m/Y') }} au {{ endWeekDate|date('d/m/Y') }}
</b>
</span> #}
{# {% if u_phGarde %}
{% if u_phGarde.dateDebut and u_phGarde.dateFin %}
<span class="calendrier">
<b>
<i class="fa fa-calendar"></i> 
{{ u_phGarde.dateDebut|date('d/m/Y') }} au {{ u_phGarde.dateFin|date('d/m/Y') }}
</b></span>
{% endif %}
<p class="localisation">
<span>
<i class="fa fa-map-marker"></i> 
{{ u_phGarde.libelle }}
</span>
</p>
<p class="phone"><span><i class="fa fa-phone"></i> {{ u_phGarde.tel1 }}</span>
</p>
{% if u_phGarde.tel2 %}
<p class="phone"><span><i
class="fa fa-phone"></i> {{ u_phGarde.tel2 }}</span>
</p>
{% endif %}
{% endif %} #}
</div>
<p class="plus-info" data-aos="fade-up" data-aos-anchor=".fa-medkit"
data-aos-anchor-placement="top-bottom"
data-aos-duration="2000">
<a href="{{ path('app_public_u_pharmacie') }}" class="appointment-btn scrollto">
Plus d'infos <i class="fa fa-arrow-circle-right"></i>
</a>
</p>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 hopital" id="hopital">
<h3 data-aos="fade-zoom-in" data-aos-anchor=".fa-medkit" class="text-center"
data-aos-anchor-placement="top-center" data-aos-duration="2000">
HÔPITAUX ET CLINIQUES
</h3>
<img src="{{ asset('assets/images/urgence/hopitaux.png') }}" class="text-center"
style="display: block; margin-left: auto; margin-right: auto; width: auto;"
height="200px"/>
<div data-aos="fade-up" data-aos-anchor=".fa-medkit"
data-aos-anchor-placement="top-center" data-aos-duration="2000" id="hopital-items">
{# {% if u_hopitauxGarde %}
<p class="localisation">
<span>
<i class="fa fa-map-marker"></i> 
{{ u_hopitauxGarde.libelle }}
</span>
</p>
<p class="phone"><span><i
class="fa fa-phone"></i> {{ u_hopitauxGarde.tel1 }}</span>
</p>
{% if u_hopitauxGarde.tel2 %}
<p class="phone"><span><i
class="fa fa-phone"></i> {{ u_hopitauxGarde.tel2 }}</span>
</p>
{% endif %}
{% endif %} #}
</div>
<p class="plus-info" data-aos="fade-up" data-aos-anchor=".fa-medkit"
data-aos-anchor-placement="top-bottom"
data-aos-duration="2000">
<a href="{{ path('app_public_u_hopitaux') }}" class="appointment-btn scrollto">
Plus d'infos <i class="fa fa-arrow-circle-right"></i>
</a>
</p>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pharmacie" id="ambulance">
<h3 data-aos="fade-zoom-in" data-aos-anchor=".fa-medkit" class="text-center"
data-aos-anchor-placement="top-center" data-aos-duration="2000">
AMBULANCE
</h3>
<img src="{{ asset('assets/images/urgence/ambulances.png') }}" class="text-center"
style="display: block; margin-left: auto; margin-right: auto; width: auto;"
height="200px"/>
<div data-aos="fade-left" data-aos-anchor=".fa-medkit"
data-aos-anchor-placement="top-center" data-aos-duration="2000" id="ambulance-items">
{# {% if u_ambulance %}
<p class="localisation">
<span>
<i class="fa fa-map-marker"></i> 
{{ u_ambulance.libelle }}
</span>
</p>
<p class="phone"><span><i class="fa fa-phone"></i> {{ u_ambulance.tel1 }}</span>
</p>
{% if u_ambulance.tel2 %}
<p class="phone"><span><i
class="fa fa-phone"></i> {{ u_ambulance.tel2 }}</span>
</p>
{% endif %}
{% endif %} #}
</div>
<p class="plus-info" data-aos="fade-up" data-aos-anchor=".fa-medkit"
data-aos-anchor-placement="top-bottom"
data-aos-duration="2000">
<a href="{{ path("app_public_u_ambulance") }}" class="appointment-btn scrollto">
Plus d'infos <i class="fa fa-arrow-circle-right"></i>
</a>
</p>
</div>
</div>
</div>
</section><!-- End Doctors Section -->
<!-- ======= Gallery Section ======= -->
<!--Add listing-->
<section class="actus" id="actus">
<div class="container">
<div class="p-4"></div>
<div class="section-title" data-aos="fade-down" data-aos-anchor="#urgences"
data-aos-anchor-placement="bottom-bottom" data-aos-duration="2000">
<h2 id="actu">Les actualités </h2>
<p>Suivez toutes les actualités de notre société</p>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12">
<div class="card-deck">
{% for actualite in actualites|slice(0,4) %}
<div class="card" data-aos="flip-left" data-aos-anchor="#pharmacie"
data-aos-anchor-placement="bottom-bottom" data-aos-duration="2000">
<div class="card-img-top">
{% set imgSrc = 'assets/images/brand/opham-logo.png' %}
{% if actualite.image %}
{% set imgSrc = actualite.image %}
{% endif %}
<img class="img-fluid" src="{{ asset(imgSrc) }}"
alt="Card image cap" style="width:100%;height:175px;object-fit:cover"/>
</div>
<div class="card-body">
<h5 class="card-title">{{ actualite.libelle }}</h5>
</div>
<div class="card-footer">
<small class="text-muted"><a
href="{{ path('app_public_actualite_show', {'id' : actualite.id}) }}">
<button class="btn btn-success w-100 text-truncate">En savoir plus
</button>
</a></small>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<!-- ======= Gallery Section ======= -->
<section id="gallery" class="gallery" data-aos="fade-left" data-aos-anchor="#actu" data-aos-duration="2000">
<div class="container">
<div class="p-4"></div>
<div class="section-title">
<h2>Nos partenaires </h2>
<p>Représentation et partenaires depuis 70ans.</p>
</div>
</div>
<!-- carousel -->
<div class="container text-center my-3 carousel-partenaire">
<div class="mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
{% for key, partenaire in partenaires %}
<div class="carousel-item {{ key == 0 ? "active" }} bg-white">
<div class="gallery-item">
<a href="" class="gallery-lightbox">
<img src="{{ asset(partenaire.img) }}"
alt="Opham - {{ partenaire.libelle }}"
class="img-fluid">
</a>
</div>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
<!-- /carousel -->
</section><!-- End Gallery Section -->
<!-- contact-form -->
<section class="contact-form" id="contact-form">
<!--Contact-->
<div class="sptb mb-0 pb-0">
<div class="container">
<div class="row">
<div class="col-lg-5 col-xl-4 col-md-12 d-block mb-7">
<div class="section-title center-block text-center">
<h2>Info</h2>
</div>
<div class="row mx-auto w-100 text-white">
<div class="col-12 mb-5">
<div class="support-service bg-primary br-2 mb-4 mb-xl-0 tel row"
data-aos="fade-right"
data-aos-anchor=".text-muted">
<div class="col-2 p-0">
<i class="fa fa-phone"></i>
</div>
<div class="col-10">
<h6>{{ societe.telFixe }}</h6>
<P>Téléphone</P>
</div>
</div>
</div>
<div class="col-12 mb-5">
<div class="support-service bg-primary br-2 mb-4 mb-xl-0 tel row"
data-aos="fade-right"
data-aos-anchor=".text-muted">
<div class="col-2 p-0">
<i class="fa fa-phone"></i>
</div>
<div class="col-10">
<h6>{{ _soc.numeroCommande }}</h6>
<P>Commande</P>
</div>
</div>
</div>
<div class="col-12 mb-5">
<div class="support-service bg-secondary br-2 mb-4 mb-xl-0 ouvert row"
data-aos="fade-left" data-aos-anchor=".text-muted">
<div class="col-2 p-0">
<i class="fa fa-clock-o"></i>
</div>
<div class="col-10">
<h6>Lun-Sam(09:00-17:00)</h6>
<p>Heure d'ouverture</p>
</div>
</div>
</div>
<div class="col-12">
<div class="support-service br-2 email row" data-aos="fade-right"
data-aos-anchor=".text-muted">
<div class="col-2 p-0">
<i class="fa fa-envelope-o"></i>
</div>
<div class="col-10">
<h6 style="color:#fff">{{ societe.email }}</h6>
<p>Email</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 col-xl-8 col-md-12 d-block ">
<div class="single-page">
<div class="col-lg-12 col-md-12 mx-auto d-block" id="form_contact">
<div class="section-title center-block text-center">
<h2>Contact</h2>
</div>
<div class="wrapper wrapper2">
<div class="card mb-0">
<div class="card-body">
{{ form_start(formContact, {'action': path('app_public_contact')}) }}
<div class="form-group">
{{ form_row(formContact.name, {'label' : false, 'attr' :{'class' : 'form-control', 'placeholder' : 'Nom' }}) }}
</div>
<div class="form-group">
{{ form_row(formContact.mail, {'label' : false, 'attr' :{'class' : 'form-control', 'placeholder' : 'Adresse mail' }}) }}
</div>
<div class="form-group">
{{ form_row(formContact.message, {'label' : false, 'attr' :{'class' : 'form-control', 'placeholder' : 'Message', 'rows' : "9" }}) }}
</div>
<button type="submit" class="btn btn-primary">
Envoyer le message
</button>
{{ form_end(formContact) }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Contact-->
</section>
<!-- /contact-form -->
</main><!-- End #main -->
<!-- Newsletter-->
<section class="sptb bg-white border-top">
<div class="container">
<div class="row">
<div class="col-lg-7 col-xl-6 col-md-12">
<div class="sub-newsletter" data-aos="fade-right" data-aos-anchor=".carousel-control-prev"
data-aos-duration="1500">
<h3 class="mb-2"><i class="fa fa-paper-plane-o me-2"></i> Souscrivez à notre newsletter</h3>
<p class="mb-0">Votre santé, notre métier</p>
</div>
</div>
<div class="col-lg-5 col-xl-6 col-md-12">
{{ form_start(formNewsLetterSub, {
'action': path('app_public_newsLetterInscription'),
'attr' : {
'class' : "input-group sub-input mt-1",
'data-aos' : "fade-left",
'data-aos-anchor' : ".carousel-control-prev",
'data-aos-duration' : "1500"
}
}) }}
{{ form_widget(formNewsLetterSub.mail, {'label' : false, 'attr' :{'class' : 'form-control input-lg ', 'placeholder' : 'Ajouter votre Email' }}) }}
<div class=" ">
<button type="submit" id="btn-souscrire" class="btn btn-primary btn-lg br-ts-0 br-bs-0">
Souscrire
</button>
</div>
{{ form_end(formNewsLetterSub) }}
</div>
</div>
</div>
</section>
<!--/Newsletter-->
{% endblock %}
{% block asset_js %}
<script src="{{ asset('assets/js/aos.js') }}"></script>
<script>
AOS.init({
duration: 1500,
once: true
});
</script>
{% endblock %}