templates/home/presentation.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  4. {% block customstylesheets %}
  5.     <!-- Required meta tags -->
  6.     <meta charset="utf-8">
  7.                 <meta property="title" content="Le Mail Français - La potion magique de vos e-mails"/>
  8.                 <meta name="description" content="Personnalisez facilement les images de vos e-mails. Intégrez le nom de vos clients, personnalisez selon la météo, ajoutez un compte à rebours animé en temps réel.">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.     <link rel="canonical" href="https://lemailfrancais.app"/>
  11.                 <link rel=”alternate” hreflang=”fr-fr” href="https://lemailfrancais.app" />
  12.                 <meta property="og:site_name" content="Le Mail Français">
  13.                 <meta property="og:url" content="https://lemailfrancais.app">
  14.                 <meta property="og:description" content="Personnalisez facilement les images de vos e-mails. Intégrez le nom de vos clients, personnalisez selon la météo, ajoutez un compte à rebours animé en temps réel.">
  15.                 <meta property="og:type" content="website">
  16.                 <meta property="og:image" content="https://lemailfrancais.app/img/logo_lemailfr.png">
  17.     <meta property="og:locale" content="fr_FR"/>
  18.     <meta property="og:title" content="Le Mail Français - La potion magique de vos e-mails"/>
  19.     <meta property="og:video" content="https://lemailfrancais.app/video/accueil.mp4"/>
  20.     <meta property="og:image:secure_url" content="https://lemailfrancais.app/img/logo_lemailfr.png"/>
  21.     <meta property="og:image:width" content="896"/>
  22.     <meta property="og:image:height" content="506"/>
  23.                 <meta name="twitter:card" content="summary_large_image"/>
  24.     <meta name="twitter:description" content="Personnalisez facilement les images de vos e-mails. Intégrez le nom de vos clients, personnalisez selon la météo, ajoutez un compte à rebours animé en temps réel."/>
  25.     <meta name="twitter:title" content="Le Mail Français - La potion magique de vos e-mails"/>
  26.     <meta name="twitter:image" content="https://lemailfrancais.app/img/logo_lemailfr.png"/>
  28.                 <link rel="stylesheet" href="{{ asset('css/style_presentation.css') }}">
  29.     <link rel="stylesheet" href="{{ asset('css/media.css') }}">
  30. {% endblock %}
  34. {% block body %}
  37.     <!-- DEBUT CONTAINER -->
  38.     <section  class="container intro">
  39.         <div class="row">
  40.             <div class="col-md-6">
  41.                 <h1>Stimulez vos e-mails à&nbsp;la&nbsp;française&nbsp;!</h1>
  42.                 <a href="{{ path('registration') }}" type="button" class="btn btn-primary btn-cestparti">C'EST PARTI !</a>
  43.                 <img alt="C'est parti !" src="{{ asset('img/presentation/300pct_simple.png') }}" width="100%" >
  44.             </div>
  45.             <div class="col-md-6">
  46.                 <video autoplay loop muted poster="{{ asset('img/presentation/fond_vid.jpg') }}" id="background">
  47.                     <source src="{{ asset('video/Video.mp4') }}" type="video/mp4">
  48.                 </video>
  49.             </div>
  50.         </div>
  52.     </section>
  55.     <section id="concept" class="blocs1_2_3 " >
  57.        <div class="container">
  58.            <div class="row">
  59.                <div class="col-12">
  60.                    <video width="320" height="240" controls>
  61.                        <source src="{{ asset('video/accueil.mp4') }}" type="video/mp4">
  62.                    </video>
  63.                </div>
  65.                <div class="col-12">
  66.                    <div class="bloc_btn-cestparti">
  67.                        <a href="{{ path('registration') }}" type="button" class="align-items-center btn btn-primary btn-cestparti">C'EST PARTI !</a>
  68.                        <img alt="animation personnage" src="{{ asset('img/presentation/Personnage_bouton_1.png') }}" class="marche personnage_bouton imgh" alt="c'est parti"/>
  69.                    </div>
  70.                </div>
  71.            </div>
  72.        </div>
  73.     </section>
  75.     
  77.     <section class="container blocs_doityourself">
  78.         <div class="row diy">
  79.             <div class="col-md-12">
  80.                 <h2>À vous de jouer !</h2>
  81.             </div>
  82.             <div class="col-md-3 ">
  83.                 <img alt="A vous de jouer !" class="img-fluid" loading="lazy" src="{{ asset('img/presentation/doityourself_perso.png') }}">
  84.             </div>
  85.             <div class="col-md-6">
  86.                 <h3>Je teste</h3>
  87.                 <p><strong>Inscrivez-vous GRATUITEMENT</strong> pour accéder directement<br>
  88.                     à tous vos <strong>"STIMS"</strong> et diffuser votre première campagne test&nbsp;!<br>
  89.                     Grâce à notre système, <strong>seuls les e-mails ouverts<br>
  90.                         sont décomptés sous forme de Jetons.</strong>
  91.                 </p>
  92.                 <p><strong style="color: #42c4df;">Laissez-vous guider, c’est simple et intuitif.</strong></p>
  93.                 <div class="col-md-12">
  94.                     <a href="{{ path('registration') }}" type="button" class="btn btn-primary btn-cestparti">C'EST PARTI !</a>
  95.                 </div>
  96.             </div>
  97.             <div class="col-md-3">
  98.                 <img alt="jetons - offre" class="img-fluid" loading="lazy" src="{{ asset('img/presentation/jetonsofferts.png') }}">
  99.             </div>
  100.         </div>
  101.         <div class="col-md-12 doityourself_separateur">
  102.             <img alt="separateur" loading="lazy" src="{{ asset('img/presentation/doityourself_separateur.png') }}">
  103.         </div>
  104.         <div class="row diy"  id="price">
  105.             <div class="col-md-12">
  106.                 <h3>Je suis fan</h3>
  107.                 <p>
  108.                     Profitez d'un large choix de packs avantageux pour acheter des Jetons.<br/>
  109.                     Disponibles dans l'espace membre.
  110.                     <!--
  111.                     <a href="{{ path('registration') }}">Inscrivez-vous</a> ou <a href="{{ path('app_login') }}">connectez vous</a>
  112.                     -->
  113.                 </p>
  114.             </div>
  115.         </div>
  116.     </section>
  118.     <section>
  119.         <div class="container">
  120.             <div id="products" class="row">
  121.                 <div class="col-sm-4 col-lg-4">
  122.                     <div class="pack_titre">
  123.                         OFFRE
  124.                         <div class="pack_sep"></div>
  125.                         <img alt="pack gratuit" class="pack-img-center" loading="lazy" src="{{ asset('img/presentation/packgratuit.png') }}">
  126.                     </div>
  127.                     <div class="pack_contenu">
  128.                         <p class="pack_car1">10 000</p>
  129.                         <p class="pack_car2">Jetons Offerts</p>
  130.                         <div class="pack_sep"></div>
  131.                         <p class="pack_car4">Pour toute première inscription à la plateforme pour réaliser vos tests.</p>
  132.                         <p class="pack_car6"><br />(L'offre d'essai est limitée à un compte par entreprise et par adresse IP de connexion)</p>
  133.                         <p><br /><a href="{{ path('registration') }}" type="button" class="btn btn-primary btn-cestparti">> C'EST PARTI !</a></p>
  135.                     </div>
  136.                 </div>
  137.                 {% set ratioBase = ( 1000 * products[0].price ) / products[0].credits  %}
  138.                 {% for product in products %}
  139.                     {# On set  les certaines variables #}
  140.                     {% set credits = product.credits|number_format(0,',',' ') %}
  141.                     {% set euro = product.price|round(0,'floor') %}
  142.                     {% set decimals = (product.price - euro)*100 %}
  143.                     {% set ratio = ( ( 1000 * product.price ) / product.credits ) %}
  144.                     {% set reduction = 100 - (ratio * 100 /ratioBase) %}
  145.                     {# On affiche les produits #}
  146.                     <div class="col-sm-4 col-lg-4">
  147.                         <div class="pack_titre">
  148.                             OFFRE
  149.                             <div class="pack_sep"></div>
  150.                             <img alt="Pack" class="pack-img-center" loading="lazy" src="{{ asset('img/presentation/'~ product.imgFilename) }}">
  151.                         </div>
  152.                         <div class="pack_contenu">
  153.                             <p class="pack_car1">{{ credits }}</p>
  154.                             <p class="pack_car2">Jetons</p>
  155.                             <div class="pack_sep"></div>
  156.                             <p class="pack_car3">
  157.                                 {% if decimals != 0 %}
  158.                                     {{euro}},<sup>{{ decimals }}€<sup>HT</sup></sup>
  159.                                 {% else %}
  160.                                     {{euro}}<sup>€<sup>HT</sup></sup>
  161.                                 {% endif %}
  162.                             </p>
  163.                             <p class="pack_car4">les {{ credits }} Jetons</p>
  164.                             <p class="pack_car5">soit {{ ratio | number_format(2,',',' ') }}€<sup>HT</sup></p>
  165.                             <p class="pack_car6">les 1 000 ouvertures</p>
  166.                             {% if reduction != 0 %}
  167.                             <p class="pack_car7">(-{{ reduction | round(0,'floor')}}% de réduction)</p>
  168.                             {% endif %}
  169.                         </div>
  170.                     </div>
  171.                 {% endfor %}
  172.                 <div class="col-sm-4 col-lg-4">
  173.                     <div class="pack_titre">
  174.                         OFFRE
  175.                         <div class="pack_sep"></div>
  176.                         <img alt="Pack" class="pack-img-center" src="{{ asset('img/presentation/packcoupe.png') }}">
  177.                     </div>
  178.                     <div class="pack_contenu">
  179.                         <p class="pack_car2">Envie d'aller</p>
  180.                         <p class="pack_car1">plus loin ?</p>
  181.                         <div class="pack_sep"></div>
  182.                         <p class="pack_car4">Demandez notre service<br />sur-mesure.</p>
  183.                         <p class="pack_car6"><br />Connexions à vos webservices, créations uniques, idées d'animations personnalisées impossibles ?</p>
  184.                         <p><br /><button type="button" class="btn btn-primary btn-cestparti" data-toggle="modal"
  185.                                      data-target="#ticketModal">CONTACTEZ-NOUS</button></p>
  187.                     </div>
  188.                 </div>
  189.             </div>
  190.         </div>
  191.     </section>
  195.     <section id="malin">
  196.         <div class="container">
  197.             <div class="row">
  198.                 <div class="col-md-12">
  199.                     <div class="bloc_btn-cestparti2">
  200.                         <a href="{{ path('registration') }}" title="J'y vais !">
  201.                             <button type="button" class="align-items-center btn btn-primary btn-cestparti2">C'EST PARTI !
  202.                             </button>
  203.                             <img alt="Malin ! Mes jetons ne sont débités que si mes e-mails sont ouverts et en plus ils sont valables sans limite de temps" loading="lazy" src="{{ asset('img/presentation/personnage_malin.png') }}" class="personnage_bouton">
  204.                         </a>
  205.                     </div>
  206.                 </div>
  207.             </div>
  208.         </div>
  209.     </section>
  214.     <section id="premium" class="blocs_contact">
  215.         <div class="container">
  216.             <div class="row">
  217.                 <div class="col-md-12">
  218.                     <p class="contact_intro">Vous préférez qu’on s’occupe de tout pour vous <br>ou vous avez des demandes
  219.                         spécifiques ?<br>Nos experts (et le reste de l'équipe) sont là pour ça...</p>
  220.                     <h2>Préparez-vous à battre des records&nbsp;!</h2>
  221.                 </div>
  222.             </div>
  223.             <div class="row">
  224.                 <div class="col-md-4">
  225.                     <img alt="Photo Philippe Poivret" class="img-fluid" loading="lazy" src="{{ asset('img/presentation/contact_1.png') }}">
  226.                     <p class="contact_nom">Philippe POIVRET</p>
  227.                     <p class="contact_poste">Directeur Digital</p>
  228.                 </div>
  229.                 <div class="col-md-4">
  230.                     <img alt="Photo Thierry LECLERCQ" class="img-fluid" loading="lazy" src="{{ asset('img/presentation/contact_2.png') }}">
  231.                     <p class="contact_nom">Thierry LECLERCQ</p>
  232.                     <p class="contact_poste">Directeur de Création</p>
  233.                 </div>
  234.                 <div class="col-md-4">
  235.                     <img alt="Photo Audrey NOIRJEAN"  class="img-fluid" loading="lazy" src="{{ asset('img/presentation/contact_3.png') }}">
  236.                     <p class="contact_nom">Audrey NOIRJEAN</p>
  237.                     <p class="contact_poste">DA Multimédia</p>
  238.                 </div>
  239.             </div>
  240.             <div class="row">
  241.                 <div class="col-md-4">
  242.                     <img alt="Photo Fanny Hichami"  class="img-fluid" loading="lazy" src="{{ asset('img/presentation/contact_5.png') }}">
  243.                     <p class="contact_nom">Fanny Hichami</p>
  244.                     <p class="contact_poste">DA Multimédia</p>
  245.                 </div>
  246.                 <div class="col-md-4">
  247.                     <img  alt="Photo Tony SWILLENS" class="img-fluid" loading="lazy" src="{{ asset('img/presentation/contact_6.png') }}">
  248.                     <p  class="contact_nom">Tony SWILLENS</p>
  249.                     <p class="contact_poste">Chef de Projet Emailing</p>
  250.                 </div>
  251.                 <div class="col-md-4">
  252.                     <img alt="Photo Maxime THÉVENOT"   loading="lazy" class="img-fluid" src="{{ asset('img/presentation/contact_7.png') }}">
  253.                     <p class="contact_nom">Maxime THÉVENOT</p>
  254.                     <p class="contact_poste">Développeur Full Stack</p>
  255.                 </div>
  256.             </div>
  257.             <div class="row">
  258.                 <div class="col-12">
  259.                     <p class="contact_texte">
  260.                         API, stocks, création… Vous avez une autre idée ou un besoin particulier ? Laissez-nous gérer. Et
  261.                         n’hésitez pas à nous passer le relai. Notre équipe sur-entraînée est prête à partir au quart de
  262.                         tour. Avec à l’arrivée : une campagne plus inventive, compétitive et percutante que jamais.
  263.                     </p>
  264.                     <button type="button"
  265.                             class="btn btn-primary btn-contact"
  266.                             data-toggle="modal"
  267.                             data-target="#ticketModal">CONTACTEZ-NOUS</button>
  268.                 </div>
  269.             </div>
  270.         </div>
  272.     </section>
  275.     <!-- DEBUT FOOTER -->
  276.     <section class="container-fluid footer">
  277.         <div class="row ">
  278.             <div class="col-md-4 footer1">
  279.                 <img alt="Le Mail Français - logo" loading="lazy" src="{{ asset('img/presentation/footer_logo.png') }}">
  280.                 <p>7 avenue Foch<br>
  281.                     59700 Marcq-en-Barœul<br>
  282.                     FRANCE  <img alt="Drapeau France" loading="lazy"  src="{{ asset('img/presentation/drapeauFrance.gif') }}">
  283.                 </p>
  285.             </div>
  286.             <div class="col-md-4 footer2">
  287.                 <div class="row">
  288.                     <div class="col-md-12">
  289.                         <a href="#premium">Prestation sur-mesures</a>
  290.                         <br><br>
  291.                         <a href="{{ path('faq_public') }}">Questions fréquentes</a>
  292.                         <br><br>
  293.                         <a href="#">Mentions légales / RGPD</a>
  294.                         <br><br>
  295.                         <a href="https://www.linkedin.com/company/le-mail-fran%C3%A7ais" target="_blank">Suivez-nous sur <img alt="Suivez nous sur Linkedin" src="{{ asset('img/presentation/logoLinkedin.png') }}"></a>
  296.                     </div>
  297.                 </div>
  298.             </div>
  299.             <div class="col-md-4 text-center footer3">
  300.                 <p>Visitez le site de notre agence !</p>
  301.                 <a href="https://www.agence-jpgc.com" target="_blank"><img
  302.                             alt="Agence JPGC - Logo" src="{{ asset('img/presentation/footer_logo_jpgc.png') }}"></a>
  303.             </div>
  304.         </div>
  305.     </section>
  307.     <section class="mention">
  308.         <div class="row">
  309.             <div class="col-md-12 text-center">
  310.                 <p><strong> © lemailfrancais {{ "now"|date("Y") }}</strong> - Tous droits réservés</p>
  311.             </div>
  312.         </div>
  313.     </section>
  314.     <!-- FIN FOOTER -->
  318.     <div class="modal fade ticketModal" id="ticketModal" tabindex="-1" role="dialog" aria-labelledby="ticketModalLabel" aria-hidden="true"
  319.          data-error="{% if not ticketForm.vars.valid %}true{% endif %}"
  320.          data-success="{% if formSuccessMessage is not null %}true{% endif %}">
  321.         <div class="modal-dialog modal-lg">
  322.             <div class="modal-content">
  323.                 <div class="modal-header">
  324.                     <div class="d-flex justify-content-start">
  325.                         <div class="p-0">
  326.                             <img width="40px" alt="animation" loading="lazy" src="{{ asset('img/home/Personnage_marche1.png') }}"  alt="Responsive image">
  327.                         </div>
  328.                         <div class="p-3">
  329.                             <h2 class="">Que puis-je pour vous ?</h2>
  330.                         </div>
  331.                     </div>
  332.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
  333.                 </div>
  334.                 <div class="modal-body">
  336.                     <div class="container">
  338.                         {%  if formSuccessMessage is not null %}
  339.                         <div class="row">
  340.                             <div class="col-12 alert alert-success alert-dismissible fade show message-retour">
  341.                                 {{ formSuccessMessage|raw}}
  342.                                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  343.                                     <span aria-hidden="true">&times;</span>
  344.                                 </button>
  345.                             </div>
  346.                         </div>
  347.                         {% endif %}
  349.                         {# Var ticketForm \App\Form\ExtTicketType #}
  350.                         {{ form_start(ticketForm) }}
  351.                         <div class="row">
  352.                             <div class="col-12">
  353.                                 {{ form_row(ticketForm.object) }}
  354.                             </div>
  355.                         </div>
  356.                         <div class="row">
  357.                             <div class="col-6">
  358.                                 {{ form_row(ticketForm.enterprise) }}
  359.                             </div>
  360.                         </div>
  361.                         <div class="row">
  362.                             <div class="col-6">
  363.                                 {{ form_row(ticketForm.firstName) }}
  364.                             </div>
  365.                             <div class="col-6">
  366.                                 {{ form_row(ticketForm.lastName) }}
  367.                             </div>
  368.                         </div>
  369.                         <div class="row">
  370.                             <div class="col-6">
  371.                                 {{ form_row(ticketForm.email) }}
  372.                             </div>
  373.                             <div class="col-6">
  374.                                 {{ form_row(ticketForm.phoneNumber) }}
  375.                             </div>
  376.                         </div>
  377.                         <div class="row">
  378.                             <div class="col-12 text-center">
  379.                                 {{ form_row(ticketForm.message) }}
  380.                             </div>
  381.                         </div>
  382.                         <div class="row">
  383.                             <div class="col-12 text-center">
  384.                                 {{ form_row(ticketForm.submit) }}
  385.                             </div>
  386.                         </div>
  387.                         {{ form_end(ticketForm) }}
  388.                     </div>
  389.                 </div>
  390.             </div>
  391.         </div>
  392.     </div>
  397.     <!-- Modal -->
  398.     <div class="modal fade" id="modal-demo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
  399.          aria-hidden="true"
  400.          data-banque="{{ path('presentation_demo',{'demo':'banque'}) }}"
  401.          data-boutique1="{{ path('presentation_demo',{'demo':'boutique1'}) }}"
  402.          data-boutique2="{{ path('presentation_demo',{'demo':'boutique2'}) }}"
  403.          data-boutique3="{{ path('presentation_demo',{'demo':'boutique3'}) }}"
  404.          data-boutique4="{{ path('presentation_demo',{'demo':'boutique4'}) }}"
  405.          data-fondation="{{ path('presentation_demo',{'demo':'fondation'}) }}"
  406.          data-assurances="{{ path('presentation_demo',{'demo':'assurances'}) }}"
  407.          data-fidelite="{{ path('presentation_demo',{'demo':'fidelite'}) }}"
  408.          data-luxe="{{ path('presentation_demo',{'demo':'luxe'}) }}">
  409.         <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
  410.             <div class="modal-content">
  412.             </div>
  413.         </div>
  414.     </div>
  415.     
  416.     
  420. {% endblock %}
  423. {# Ici tu peux venir mettre ton javasript perso qui sera injecté après bottstrap jquery etc... #}
  424. {% block customjavascript %}
  425.     <!-- Optional JavaScript -->
  426.     <script src="{{ asset('js/wc-presentation.js') }}"></script>
  427.     <script type="text/javascript" id="script-marche"
  428.             data-marche1="{{ asset('img/home/Personnage_marche1.png') }}"
  429.             data-marche2="{{ asset('img/home/Personnage_marche2.png') }}"
  430.             src="{{ asset('js/wc-marche.js') }}"></script>
  431.     <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
  432.     <script>
  433.         $(function() {
  434.             /**
  435.              * Smooth scrolling to page anchor on click
  436.              **/
  437.             $("a[href*='#']:not([href='#'])").click(function() {
  438.                 if (
  439.                     location.hostname == this.hostname
  440.                     && this.pathname.replace(/^\//,"") == location.pathname.replace(/^\//,"")
  441.                 ) {
  442.                     var anchor = $(this.hash);
  443.                     anchor = anchor.length ? anchor : $("[name=" + this.hash.slice(1) +"]");
  444.                     if ( anchor.length ) {
  445.                         $("html, body").animate( { scrollTop: anchor.offset().top-100 }, 1500);
  446.                     }
  447.                 }
  448.             });
  450.             /**
  451.             Open modal if get parameter contactForm is Open
  452.              */
  453.             function GetURLParameter(sParam)
  454.             {
  455.                 let sPageURL = window.location.search.substring(1);
  456.                 let sURLVariables = sPageURL.split('&');
  457.                 for (let i = 0; i < sURLVariables.length; i++)
  458.                 {
  459.                     let sParameterName = sURLVariables[i].split('=');
  460.                     if ( sParameterName[0] === sParam)
  461.                     {
  462.                         return sParameterName[1];
  463.                     }
  464.                 }
  465.             }
  466.             let contactForm = GetURLParameter("formContact");
  467.             if( contactForm === 'true'){
  468.                 $('#ticketModal').modal('show');
  469.             }
  470.         });
  471.     </script>
  473.     <script>
  475. /*
  476. Changement de version de logo pour la nav fixed
  477. */
  479.         $(document).ready(function (){
  481.             let e = document.getElementById('navbar')
  482.             let observer = new MutationObserver(function (event) {
  483.                 let navbar = event[0].target;
  484.                 let navbarClass = $('#'+navbar.id).attr('class');
  486.                 //On check si fixed-top ou pas
  487.                 if(navbarClass.includes('fixed-top')){
  488.                     $('#logoEmailFrancais').hide();
  489.                     $('#logoEmailFrancaisSmall').show();
  490.                 }else{
  491.                     $('#logoEmailFrancais').show();
  492.                     $('#logoEmailFrancaisSmall').hide();
  493.                 }
  494.             });
  496.             observer.observe(e, {
  497.                 attributes: true,
  498.                 attributeFilter: ['class'],
  499.                 childList: false,
  500.                 characterData: false
  501.             });
  504.         });
  506.     </script>
  512. {% endblock %}