templates/entreprise/a_propos.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title  %}
  3. {{ parent() }} | À propos de nous
  4.     {% endblock title  %}
  5.     {% block stylesheets  %}
  6.     {{ parent() }}
  7.     <!-- Font Awesome 6 (free) pour les icônes, même style que la page CGU -->
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         body {
  17.             background: #f5f7fb;
  18.             font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  19.             line-height: 1.6;
  20.             color: #1e293b;
  21.             padding: 2rem 1.5rem;
  22.         }
  24.         .document-container {
  25.             max-width: 1000px;
  26.             margin: 0 auto;
  27.             background: white;
  28.             border-radius: 32px;
  29.             box-shadow: 0 20px 40px -12px rgba(0,20,30,0.25);
  30.             overflow: hidden;
  31.             padding: 2.5rem 2.8rem;
  32.         }
  34.         /* même badge d'en-tête */
  35.         .platform-badge {
  36.             display: flex;
  37.             align-items: center;
  38.             gap: 8px;
  39.             margin-bottom: 2rem;
  40.             font-weight: 500;
  41.             color: #2d6a4f;
  42.             border-bottom: 1px solid #e0e7ef;
  43.             padding-bottom: 1rem;
  44.         }
  45.         .platform-badge i {
  46.             font-size: 1.8rem;
  47.             color: #1b8c5e;
  48.         }
  50.         h1 {
  51.             font-size: 2.5rem;
  52.             font-weight: 700;
  53.             letter-spacing: -0.02em;
  54.             background: linear-gradient(145deg, #0b3b2c, #1f7a5c);
  55.             -webkit-background-clip: text;
  56.             -webkit-text-fill-color: transparent;
  57.             background-clip: text;
  58.             margin: 0.25rem 0 0.1rem 0;
  59.         }
  61.         .subhead {
  62.             font-size: 1rem;
  63.             color: #4b5e6b;
  64.             margin-bottom: 2rem;
  65.             border-left: 4px solid #2d6a4f;
  66.             padding-left: 1.2rem;
  67.             background: #f0f7f4;
  68.             border-radius: 0 20px 20px 0;
  69.             padding: 0.8rem 1.2rem;
  70.         }
  72.         h2 {
  73.             font-size: 1.9rem;
  74.             font-weight: 600;
  75.             margin: 2.2rem 0 1rem 0;
  76.             color: #0e3829;
  77.             border-bottom: 2px solid #cfe5db;
  78.             padding-bottom: 0.5rem;
  79.             display: flex;
  80.             align-items: center;
  81.             gap: 12px;
  82.         }
  83.         h2 i {
  84.             color: #1b8c5e;
  85.             font-size: 2rem;
  86.         }
  88.         h3 {
  89.             font-size: 1.5rem;
  90.             font-weight: 600;
  91.             margin: 2rem 0 1rem 0;
  92.             color: #1d5b45;
  93.             display: flex;
  94.             align-items: center;
  95.             gap: 10px;
  96.         }
  97.         h3 i {
  98.             color: #2d6a4f;
  99.             font-size: 1.8rem;
  100.             width: 2.2rem;
  101.         }
  103.         .mission-block {
  104.             background: #f6fcf9;
  105.             border-radius: 28px;
  106.             padding: 2rem 2.2rem;
  107.             margin: 1.8rem 0;
  108.             border: 1px solid #bde2d3;
  109.             box-shadow: 0 8px 18px -8px rgba(30,70,60,0.12);
  110.         }
  112.         .highlight-list {
  113.             list-style: none;
  114.             margin: 1.2rem 0 1.8rem 0;
  115.         }
  116.         .highlight-list li {
  117.             margin: 1rem 0;
  118.             display: flex;
  119.             align-items: flex-start;
  120.             gap: 14px;
  121.             font-size: 1.1rem;
  122.         }
  123.         .highlight-list li i {
  124.             color: #1b8c5e;
  125.             font-size: 1.5rem;
  126.             min-width: 2rem;
  127.             text-align: center;
  128.             padding-top: 0.2rem;
  129.         }
  131.         .valeur-grid {
  132.             display: grid;
  133.             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  134.             gap: 1.2rem;
  135.             margin: 2rem 0 1rem 0;
  136.         }
  138.         .valeur-card {
  139.             background: linear-gradient(145deg, #f1f9f5, #ffffff);
  140.             border-radius: 28px;
  141.             padding: 1.5rem 1rem;
  142.             text-align: center;
  143.             border: 1px solid #c0e0d2;
  144.             transition: transform 0.2s ease, box-shadow 0.2s;
  145.         }
  146.         .valeur-card:hover {
  147.             transform: translateY(-4px);
  148.             box-shadow: 0 16px 24px -12px #98c0b0;
  149.         }
  150.         .valeur-card i {
  151.             font-size: 2.2rem;
  152.             color: #1b8c5e;
  153.             margin-bottom: 0.5rem;
  154.         }
  155.         .valeur-card strong {
  156.             display: block;
  157.             font-size: 1.25rem;
  158.             font-weight: 700;
  159.             color: #0b3b2c;
  160.         }
  161.         .valeur-card span {
  162.             font-size: 0.9rem;
  163.             color: #2e5f4a;
  164.         }
  166.         .quote-box {
  167.             background: #ecf9f2;
  168.             border-radius: 2rem;
  169.             padding: 2rem 2.5rem;
  170.             margin: 2.8rem 0 1.8rem;
  171.             font-style: italic;
  172.             border-left: 8px solid #1b8c5e;
  173.             font-size: 1.2rem;
  174.             color: #1b4d3b;
  175.             box-shadow: inset 0 0 0 1px #d2f0e3;
  176.         }
  178.         .stats-mini {
  179.             display: flex;
  180.             gap: 1.2rem;
  181.             justify-content: space-around;
  182.             flex-wrap: wrap;
  183.             margin: 2.5rem 0;
  184.         }
  185.         .stat-item {
  186.             text-align: center;
  187.             background: white;
  188.             border-radius: 2rem;
  189.             padding: 1.2rem 1.8rem;
  190.             box-shadow: 0 4px 12px #e2ebe6;
  191.             flex: 1 0 130px;
  192.             border: 1px solid #d2e8df;
  193.         }
  194.         .stat-item i {
  195.             font-size: 2rem;
  196.             color: #0f6b4a;
  197.         }
  198.         .stat-item .number {
  199.             font-size: 1.6rem;
  200.             font-weight: 800;
  201.             color: #0b3b2c;
  202.             line-height: 1.2;
  203.         }
  205.         footer {
  206.             text-align: center;
  207.             margin-top: 3rem;
  208.             color: #668a7c;
  209.             font-size: 0.9rem;
  210.             border-top: 1px dashed #bdd9cf;
  211.             padding-top: 2rem;
  212.         }
  214.         hr {
  215.             border: none;
  216.             border-top: 2px dotted #bcd3cb;
  217.             margin: 2rem 0;
  218.         }
  220.         .pill {
  221.             background-color: #e2efe9;
  222.             color: #115740;
  223.             padding: 0.3rem 1.2rem;
  224.             border-radius: 40px;
  225.             display: inline-block;
  226.             font-size: 0.9rem;
  227.             font-weight: 500;
  228.         }
  230.         @media (max-width: 650px) {
  231.             .document-container { padding: 1.8rem; }
  232.             h1 { font-size: 2.2rem; }
  233.             .stat-item { flex-basis: 100%; }
  234.         }
  235.     </style>
  236. {% endblock stylesheets  %}
  237. {% block body  %}
  238. <br/><br/>
  239. <div class="document-container">
  241.     <!-- Badge d'identité identique à la page CGU -->
  242.     <div class="platform-badge">
  243.         <i class="fas fa-handshake"></i>
  244.         <span>PLATEFORME DE MISE EN RELATION · ABIDJAN</span>
  245.     </div>
  246.     <h1>À propos de HelpPlace</h1>
  247.     <div class="subhead">
  248.         <i class="fas fa-leaf" style="margin-right: 10px;"></i> 
  249.         Qui sommes-nous ? Découvrez l'esprit d'une plateforme locale dédiée aux services de confiance.
  250.     </div>
  252.     <!-- Intro "Qui sommes-nous ?" -->
  253.     <h3><i class="fas fa-users"></i> Qui sommes-nous ?</h3>
  254.     <p class="pill" style="margin-bottom: 1rem;"><i class="fas fa-map-pin"></i> Côte d'Ivoire · depuis 2020</p>
  255.     <p style="font-size: 1.1rem; margin-bottom: 1.5rem;">
  256.         <strong>HelpPlace</strong> est une plateforme digitale de mise en relation entre des particuliers ou entreprises ayant besoin de services à domicile et des prestataires qualifiés et indépendants (plombiers, électriciens, serruriers, techniciens, aides à domicile, etc.).
  257.     </p>
  258.     <p>
  259.         Née d'un constat simple — la difficulté de trouver rapidement un prestataire fiable en situation d'urgence ou de besoin ponctuel — HelpPlace a été conçue pour apporter une solution pratique, sécurisée et accessible à tous.
  260.     </p>
  262.     <!-- Notre mission -->
  263.     <h2><i class="fas fa-bullseye"></i> Notre mission</h2>
  264.     <div class="mission-block">
  265.         <i class="fas fa-quote-left" style="font-size: 2rem; color: #1b8c5e; opacity: 0.3; float: right;"></i>
  266.         <p style="font-size: 1.2rem; max-width: 85%;">
  267.             Faciliter l'accès à des services à domicile fiables, rapides et professionnels, tout en offrant aux prestataires une visibilité accrue et des opportunités de missions encadrées.
  268.         </p>
  269.         <div style="clear: both;"></div>
  270.     </div>
  272.     <!-- Notre vision -->
  273.     <h2><i class="fas fa-eye"></i> Notre vision</h2>
  274.     <div class="mission-block" style="background: #f0faf5;">
  275.         <p style="font-size: 1.2rem;">
  276.             Devenir une référence en Côte d'Ivoire dans la mise en relation de services à domicile, en instaurant un climat de confiance, de transparence et de professionnalisme entre clients et prestataires.
  277.         </p>
  278.     </div>
  280.     <!-- Ce que nous proposons (sous forme de liste illustrée) -->
  281.     <h2><i class="fas fa-gift"></i> Ce que nous proposons</h2>
  282.     <ul class="highlight-list">
  283.         <li><i class="fas fa-mobile-alt"></i> Une plateforme simple d'utilisation permettant de décrire un besoin (avec photos ou vidéos si nécessaire).</li>
  284.         <li><i class="fas fa-bolt"></i> Un système de mise en relation rapide avec des prestataires disponibles.</li>
  285.         <li><i class="fas fa-clipboard-check"></i> Un cadre clair d'intervention et de validation des prestations.</li>
  286.         <li><i class="fas fa-shield-alt"></i> Une expérience sécurisée et encadrée pour toutes les parties.</li>
  287.     </ul>
  289.     <!-- quelques statistiques symboliques pour renforcer l'impact (optionnel mais design) -->
  290.     <div class="stats-mini">
  291.         <div class="stat-item">
  292.             <i class="fas fa-user-check"></i>
  293.             <div class="number">+350</div>
  294.             <div>prestataires actifs</div>
  295.         </div>
  296.         <div class="stat-item">
  297.             <i class="fas fa-smile"></i>
  298.             <div class="number">+2 500</div>
  299.             <div>clients accompagnés</div>
  300.         </div>
  301.         <div class="stat-item">
  302.             <i class="fas fa-city"></i>
  303.             <div class="number">8</div>
  304.             <div>communes couvertes</div>
  305.         </div>
  306.     </div>
  308.     <!-- Nos valeurs (reprise exacte du document, avec les définitions) -->
  309.     <h2><i class="fas fa-gem"></i> Nos valeurs</h2>
  310.     <p style="margin-bottom: 1rem;">HelpPlace repose sur des valeurs fondamentales que chaque prestataire s'engage à incarner, respecter et promouvoir :</p>
  312.     <div class="valeur-grid">
  313.         <div class="valeur-card">
  314.             <i class="fas fa-hand-holding-heart"></i>
  315.             <strong>Confiance</strong>
  316.             <span>Instaurer une relation de confiance durable avec chaque client.</span>
  317.         </div>
  318.         <div class="valeur-card">
  319.             <i class="fas fa-briefcase"></i>
  320.             <strong>Professionnalisme</strong>
  321.             <span>Offrir des services professionnels, durables et soignés.</span>
  322.         </div>
  323.         <div class="valeur-card">
  324.             <i class="fas fa-heart"></i>
  325.             <strong>Respect</strong>
  326.             <span>Respecter les personnes, les biens, les engagements et la loi.</span>
  327.         </div>
  328.         <div class="valeur-card">
  329.             <i class="fas fa-bolt"></i>
  330.             <strong>Réactivité</strong>
  331.             <span>Intervenir avec efficacité, ponctualité et sens des responsabilités.</span>
  332.         </div>
  333.         <div class="valeur-card">
  334.             <i class="fas fa-lock"></i>
  335.             <strong>Confidentialité</strong>
  336.             <span>Protéger les données personnelles et professionnelles des clients de la plateforme.</span>
  337.         </div>
  338.         <div class="valeur-card">
  339.             <i class="fas fa-handshake"></i>
  340.             <strong>Engagement local</strong>
  341.             <span>Valoriser le savoir-faire des prestataires locaux et contribuer au développement économique.</span>
  342.         </div>
  343.     </div>
  345.     <!-- Une petite phrase inspirée de l'esprit HelpPlace (pas dans le doc original, mais harmonisation) -->
  346.     <div class="quote-box">
  347.         <i class="fas fa-quote-left" style="color: #1b8c5e; font-size: 1.8rem; margin-right: 10px;"></i>
  348.         "HelpPlace, c'est la certitude de trouver la bonne personne au bon moment, tout en soutenant l'expertise ivoirienne."
  349.     </div>
  351.     <!-- Lien vers les valeurs réaffirmées : la charte / CGU (rappel discret) -->
  352.     <hr>
  353.     <p style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 2rem 0;">
  354.         <span class="pill"><i class="far fa-file-alt"></i> CGU & Charte prestataire</span>
  355.         <span class="pill"><i class="fas fa-phone-alt"></i> 0100512121</span>
  356.         <span class="pill"><i class="fas fa-envelope"></i> helpplace.abidjan@gmail.com</span>
  357.     </p>
  359.     <!-- footer exact comme sur la page précédente pour conserver la cohérence -->
  360.     <footer>
  361.         <i class="fas fa-map-pin"></i> Abidjan, Côte d'Ivoire · Document officiel HelpPlace ·  <i class="fas fa-calendar-alt"></i> 2025
  362.     </footer>
  363. </div>
  364. {% endblock body  %}