templates/default/indexPro.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello DefaultController!{% endblock %}
  5. {% block body %}
  6. <style>
  7. .select2-container--default .select2-selection--single {
  8.   background-color: #fff;
  9.   border: none !important;
  10.   border-radius: 4px;
  11. }
  13. .select2-container--default .select2-selection--single .select2-selection__arrow {
  14.   height: 26px;
  15.   position: absolute;
  16.   top: 1px;
  17.   right: 1px;
  18.   width: 20px;
  19.   display: none;
  20. }
  22. </style>
  23. <section class="landing-padding landing-pro" style="height:100%">
  24.    <div class="container-fluid my-auto" style="height: 100vh;">
  25.       <div class="row spacing-particulier">
  26.          <div class="col-lg-8 col-md-12 col-sm-12 col-12 box1">
  27.             <h1>Trouvez des promotions près de soi</h1>
  28.             <h4 class="title-particulier pink" style="font-size:20px">Ne perdez pas de temps les annonces sont valables uniquement quelques heures !</h4>
  29.             <div class="search-box" style="border: none;">
  30.                <form class="search-box" action="{{ path('annonces') }}" method="get">
  31.                   <img src="{{ asset('assets/images/particulier/epingle.png') }}" alt="">
  32.                   <select class="input-search js-data-example-ajax" name="ville" style="width:100%"></select>
  33.                   <button type="submit" class="bgreen" style="color: white; border-radius: 5px; padding: 10px;">Rechercher</button>
  34.                </form>
  35.             </div>
  36.          </div>
  37.          <div class="col-lg-4 col-md-12 col-sm-12 col-12 box2 section-title">
  38.             <br><br>
  39.             <img src="{{asset('assets/images/pro/pro-img.png')}}" alt="">
  40.          </div>
  41.       </div>
  42.    </div>
  43.    <div class="container-fluid" style="margin-top : -50px">
  44.       <div class="row" style="background: #ADB9CA; text-align: right; color: white; height: 70px">
  45.          <h2 class="souts-title-particulier" style=" padding-right: 8% !important; margin-top: 15px"><i>Limiter le gaspillage tout en faisant plus de profit !</i></h2>
  46.       </div>
  47.    </div>
  48. </section>
  49. <section class="section-padding" id="propos">
  50.    <div class="container section3-particulier">
  51.       <div class="row py-5 ">
  52.          <div class="section-title text-center">
  53.             <h2 class="pink">MODIXOM c'est quoi ?</h2>
  54.          </div>
  55.       </div>
  56.       <div class="row">
  57.          <div class="col-md-6 col-12 h-100 fs-5">
  58.             <ul>
  59.                <li class="py-4 py-md-3 mx-auto"><b class="blue">o</b> Vous disposez de trop de stock et vous avez peur que cela finisse à la poubelle ? </li>
  60.                <li class="py-4 py-md-3 mx-auto"><b class="blue">o</b> Votre commerce est très calme aujourd’hui ?</li>
  61.                <li class="py-4 py-md-3 mx-auto"><b class="blue">o</b> Sans plus attendre diffusez une promotion sur Modixom ! De nombreux utilisateurs de notre plateforme se chargeront de limiter le gaspillage ce qui permettra de limiter vos pertes et augmenter le trafic de votre commerce.</li>
  62.                <li class="py-4 py-md-3 mx-auto"><b class="blue">o</b> Vous pouvez prévoir de déposer des annonces en avance ou bien les diffuser le jour même à n’importe quel moment de la journée !</li>
  63.                <li class="py-4 py-md-3 mx-auto"><b class="blue">o</b> Le fait que les annonces ont une durée maximale de 24h permet de limiter les invendus du jour car cela oblige les clients à venir le jour-même.</li>
  64.             </ul>
  65.          </div>
  66.          <div class="col-md-6 col-12 d-none d-md-flex justify-content-center align-items-center">
  67.             <img src="{{asset('assets/images/mockup.png')}}" style="height: 600px; width: 600px !important" alt="">
  68.          </div>
  69.       </div>
  70.    </div>
  71. </section>
  72. <section class="section-padding bg-light" id="propos">
  73.    <div class="container section3-particulier">
  74.       <div class="row py-5 ">
  75.          <div class="section-title text-center">
  76.             <h2 class="pink">Pourquoi devenir partenaire Modixom ?</p>
  77.             </h2>
  78.          </div>
  79.       </div>
  80.       <div class="col-md-12 h-100 fs-5">
  81.          <div class="row">
  82.             <div class="card col-md-2 custom-col">
  83.                <center>
  84.                   <img class="card-img-top" style="width: 13rem; height: 13rem;" src="{{asset('assets/images/pro/trash.png')}}" alt="Card image cap"><br>
  85.                   <div class="card-body">
  86.                      <p class="card-text blue">Limiter le gaspillage alimentaire et non alimentaire en ayant une meilleure gestion des stocks et ainsi faire plus de profit</p>
  87.                   </div>
  88.                </center>
  89.             </div>
  90.             <div class="card col-md-2 custom-col">
  91.                <center>
  92.                   <img class="card-img-top" style="width: 13rem; height: 13rem;" src="{{asset('assets/images/pro/people.png')}}" alt="Card image cap"><br>
  93.                   <div class="card-body">
  94.                      <p class="card-text blue">Augmenter la fréquentation de votre commerce et le nombre de ventes </p>
  95.                   </div>
  96.                </center>
  97.             </div>
  98.             <div class="card col-md-2 custom-col">
  99.                <center>
  100.                   <img class="card-img-top" style="width: 13rem; height: 13rem;" src="{{asset('assets/images/pro/cash.png')}}" alt="Card image cap"><br>
  101.                   <div class="card-body">
  102.                      <p class="card-text blue">Réduire les frais de publicité ainsi que le gaspillage d’imprimés publicitaires</p>
  103.                   </div>
  104.                </center>
  105.             </div>
  106.             <div class="card col-md-2 custom-col">
  107.                <center>
  108.                   <img class="card-img-top" style="width: 13rem; height: 13rem;" src="{{asset('assets/images/pro/arrow.png')}}" alt="Card image cap"><br>
  109.                   <div class="card-body">
  110.                      <p class="card-text blue">Augmenter son nombre de prestations et minimiser les périodes creuses </p>
  111.                   </div>
  112.                </center>
  113.             </div>
  114.             <div class="card col-md-2 custom-col">
  115.                <center>
  116.                   <img class="card-img-top" style="width: 13rem; height: 13rem;" src="{{asset('assets/images/pro/other-index-img.png')}}" alt="Card image cap"><br>
  117.                   <div class="card-body">
  118.                      <p class="card-text blue">Se faire connaitre davantage </p>
  119.                   </div>
  120.                </center>
  121.             </div>
  122.          </div><br><br>
  123.       </div>
  124.    </div>
  125. </section>
  126. <section class="section-padding">
  127.    <div class="container section2-particulier pt-3">
  128.       <div class="row ">
  129.          <div class="section-title text-right">
  130.             <h2>Consulter les promotions du jour</h2>
  131.             <p class="theme-description pt-3 fs-4 blue" style="font-size:1.25rem!important;">Accès privilégié aux annonces des professionnels destinées uniquement aux professionnels <br>Accès également aux annonces dédiées aux particuliers</p><br>
  132.          </div>
  133.       </div>
  134.       <div class="row content-section2-particulier ">
  135.          <div class="col-12  col-md-4 d-flex flex-column align-items-center">
  136.             <img src="{{asset('assets/images/pro/pro1.png')}}" alt="">
  137.             <p class="theme-description pt-3 fs-4" style="font-size:1.25rem!important;">Indiquez votre position</p>
  138.          </div>
  139.          <div class="col-12  col-md-4  d-flex flex-column align-items-center">
  140.             <img src="{{asset('assets/images/pro/pro3.png')}}" alt="">
  141.             <p class="theme-description pt-3 fs-4" style="font-size:1.25rem!important;">Parcourez les promotions en fonction
  142.                des catégories ou des enseignes qui
  143.                vous intéressent</p>
  144.          </div>
  145.          <div class="col-12  col-md-4 d-flex flex-column align-items-center mb-sm-5">
  146.             <img src="{{asset('assets/images/pro/pro2.png')}}" alt="">
  147.             <p class="theme-description pt-3 fs-4 " style="font-size:1.25rem!important;">Rendez-vous chez l’annonceur
  148.                afin d'effectuer vos achats ou
  149.                faire appel à ses prestations
  150.                de services et ainsi bénéficier
  151.                de promotions</p>
  152.          </div>
  153.       </div>
  154.    </div>
  155. </section>
  156. <section class="section-padding bg-light">
  157.    <div class="container section3-particulier">
  158.       <div class="row py-5 ">
  159.          <div class="section-title text-center">
  160.             <h2 class="blue"><strong>Déposer une annonce</strong></h2>
  161.          </div>
  162.       </div>
  163.       <div class="row  fs-5">
  164.          <div class="col-md-5 col-12 d-none d-md-flex justify-content-center align-items-center">
  165.             <img src="{{asset('assets/images/pro/computer.png')}}" alt="">
  166.          </div>
  167.          <div class="col-md-7 col-12 h-100 ">
  168.             <ul>
  169.                <li class="py-3 mx-auto txt blue text-center">1</li>
  170.                <li class="py-3 mx-auto txt ju">Proposez vos invendus, vos produits ou votre prestation de service que vous souhaitez vendre à prix réduit, sur notre site internet ou notre application sous forme d'annonce. Vous pouvez soit programmer une annonce soit la diffuser le jour même à n’importe quel moment de la journée.</li>
  171.                <li class="py-3 mx-auto txt blue text-center">2</li>
  172.                <li class="py-3 mx-auto txt ju">Les utilisateurs découvrent vos annonces contenant vos promotions ainsi que votre établissement.</li><br>
  173.             </ul>
  174.          </div>
  175.       </div>
  176.    </div>
  177. </section>
  178. <section class="section-padding bg-light">
  179.    <div class="container section3-particulier">
  180.       <div class="row  fs-5">
  181.          <div class="col-md-5 col-12 d-none d-md-flex justify-content-center align-items-center">
  182.             <img src="{{asset('assets/images/pro/bag.png')}}" alt="">
  183.          </div>
  184.          <div class="col-md-7 col-12 h-100 ">
  185.             <ul>
  186.                <li class="py-3 mx-auto txt blue text-center">3</li>
  187.                <li class="py-3 mx-auto txt ju">Si votre annonce concerne un produit, les utilisateurs intéressés se rendront directement dans votre commerce afin d'effectuer leurs achats et ainsi bénéficier des offres qu'ils auront visualisé sur Modixom aux horaires indiqués dans votre annonce.</li>
  188.                <li class="py-3 mx-auto txt ju">Si votre annonce concerne une prestation de service, les utilisateurs ont la possibilité de vous contacter directement via les informations disponibles sur votre annonce.</li><br>
  189.             </ul>
  190.          </div>
  191.       </div>
  192.    </div>
  193. </section>
  194. <section class="section-padding bg-light">
  195.    <div class="container section3-particulier">
  196.       <div class="row  fs-5">
  197.          <div class="col-md-5 col-12 d-none d-md-flex justify-content-center align-items-center">
  198.             <img src="{{asset('assets/images/pro/calendar.png')}}" alt="">
  199.          </div>
  200.          <div class="col-md-7 col-12 h-100 ">
  201.             <ul>
  202.                <li class="py-3 mx-auto txt blue text-center">4</li>
  203.                <li class="py-3 mx-auto txt ju">Les utilisateurs ont la possibilité d'évaluer votre fiabilité ainsi que le rapport prix / produit de vos annonces mises en ligne.</li>
  204.             </ul>
  205.          </div>
  206.       </div>
  207.    </div><br><br>
  208. </section>
  209. <section class="section-padding">
  210.    <div class="container section3-particulier">
  211.       <div class="row py-5  ">
  212.          <div class="section-title text-center">
  213.             <h2 class="blue">Combien ça coûte ?</h2>
  214.             <div class="py-4 py-md-3 mx-auto" style="font-size:1.25rem!important;">L’application est <strong>gratuite</strong> et téléchargeable sur Apple Store et Google Play
  215.             </div><br>
  216.          </div><br>
  217.          <div class="section-title">
  218.             <h3 class="blue"><strong>Consulter les annonces</strong></h3>
  219.             <p class="theme-description pt-3 fs-4" style="font-size:1.25rem!important;">Si vous souhaitez acheter des produits il vous suffit de vous rendre directement chez le commerçant. Vous
  220.                trouverez ses coordonnées dans le descriptif de l’annonce.</p><br>
  221.             <p class="theme-description pt-3 fs-4" style="font-size:1.25rem!important;">Si vous souhaitez faire appel aux services d’un professionnel, vous pouvez directement le contacter via ses informations disponibles sur l'annonce.</p><br>
  222.          </div>
  223.       </div>
  224.    </div>
  225.    <div class="container">
  226.       <div class="row fs-5">
  227.          <div class="col-md-6 col-12 d-none d-md-flex justify-content-center">
  228.             <img src="{{asset('assets/images/pro/pro-pricing.png')}}" alt="">
  229.          </div>
  230.          <div class="col-md-6 col-12 h-100 ">
  231.             <h3 class="py-4 py-md-3 mx-auto blue" style="text-align: right"><strong>Déposer une annonce</strong></h3>
  232.             <ul>
  233.                <li class="py-4 py-md-3 mx-auto" style="text-align: right">Une annonce coûte un crédit soit <strong class="blue">1€ </strong></li>
  234.                <li class="py-4 py-md-3 mx-auto" style="text-align: right">Dans le cas où vous souhaitez mettre en avant votre annonce cela coûte 4 crédits de plus soit <strong class="blue">4€ supplémentaire</strong></li><br>
  235.             </ul>
  236.          </div>
  237.       </div>
  238.    </div><br><br>
  239. </section>
  240. <section class="section-padding telecharger-app bblue">
  241.    <div class="container">
  242.       <div class="row g-3 pb-3 ">
  243.          <h2 class="fs-2 fw-bold text-center">Télécharger l’application</h2>
  244.          <h3 class="fs-3 text-center">Profitez de promotions où que vous soyez !</h3>
  245.       </div>
  246.       <div class="row py-5">
  248.          <!-- App Store button -->
  249.          <div class="col-md-6 col-12  text-md-end text-center">
  250.             <a href="https://www.apple.com/fr/app-store/" target="_blank" class="market-btn apple-btn" role="button">
  251.                <span class="market-button-subtitle">Télécharger sur</span>
  252.                <span class="market-button-title">App Store</span>
  253.             </a>
  254.          </div>
  256.          <!-- Google Play button -->
  257.          <div class="col-md-6 col-12 text-md-start text-center">
  258.             <a href="https://play.google.com/store/games?gl=FR&utm_source=emea_Med&utm_medium=hasem&utm_content=Oct2020&utm_campaign=Evergreen&pcampaignid=MKT-EDR-emea-fr-1001280-Med-hasem-py-Evergreen-Oct2020-Text_Search_BKWS%7CONSEM_kwid_43700008792247580&gclid=CjwKCAiAl9efBhAkEiwA4Toril0SpGeAFHdzwhXUd_zX25ptzJLjDqUqg26pTEyl6Apf3UA1SsLrhhoCuAcQAvD_BwE&gclsrc=aw.ds&pli=1" target="_blank" class="market-btn google-btn" role="button">
  259.                <span class="market-button-subtitle">Télécharger sur</span>
  260.                <span class="market-button-title">Google Play</span>
  261.             </a>
  262.          </div>
  264.       </div>
  265.    </div>
  266. </section>
  267. <section class="section-padding">
  268.    <div class="container">
  269.       <div class="section-title row g-3 pb-3 ">
  270.          <h2 class="fs-2 fw-bold pink">Rejoignez nous</h2>
  271.       </div>
  272.       <div class="row py-3">
  274.          <div class="col-md-1"></div>
  275.          <div class="col-md-1 col-12">
  276.             <img src="{{asset('assets/images/linkedin.png')}}">
  277.          </div>
  278.          <div class="col-md-1 col-12">
  279.             <img src="{{asset('assets/images/instagram.png')}}">
  280.          </div>
  281.          <div class="col-md-1 col-12">
  282.             <img src="{{asset('assets/images/facebook.png')}}">
  283.          </div>
  284.       </div><br>
  285.    </div>
  286. </section>
  288. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  289. <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  290. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
  291. <script>
  292.    // Obtenez tous les éléments input de type texte
  293.    var inputs = document.querySelectorAll("input[type='text']");
  295.    // Pour chaque champ de saisie, ajouter un écouteur d'événement pour le focus
  296.    inputs.forEach(function(input) {
  297.       input.addEventListener("focus", () => {
  298.          // Supprime la bordure et l'outline lorsqu'un champ de saisie texte est en focus
  299.          this.style.border = "none";
  300.          this.style.outline = "none";
  301.       });
  302.    });
  306.     $(document).ready(function() {
  307.         $('.js-data-example-ajax').select2({
  308.             placeholder: 'Choisir une ville ou un code postal',
  309.             language: {
  310.                 inputTooShort: function() {
  311.                     return "Saisir minimum 3 caractères";
  312.                 },
  313.                 searching: function() {
  314.                     return "Recherche en cours...";
  315.                 },
  316.                 noResults: function() {
  317.                     return "Aucun résultat trouvé";
  318.                 }
  319.             },
  320.             minimumInputLength: 3,
  321.             ajax: {
  322.                 url: '/api/villes', // Utilisez l'URL de votre nouvelle API
  323.                 dataType: 'json',
  324.                 delay: 250,
  325.                 data: function(params) {
  326.                     return {
  327.                         q: params.term // search term
  328.                     };
  329.                 },
  330.                 processResults: function(data) {
  331.                     return {
  332.                         results: data.results
  333.                     };
  334.                 },
  335.                 cache: true
  336.             },
  337.             templateResult: function(city) {
  338.                 if (city.loading) return city.text;
  339.                 return $('<span>' + city.text + '</span>');
  340.             },
  341.             templateSelection: function(city) {
  342.                 return city.text || city.id;
  343.             }
  344.         });
  345.     });
  347. </script>
  348. {% endblock %}