{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }} | À propos de nous
{% endblock title %}
{% block stylesheets %}
{{ parent() }}
<!-- Font Awesome 6 (free) pour les icônes, même style que la page CGU -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f5f7fb;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #1e293b;
padding: 2rem 1.5rem;
}
.document-container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 32px;
box-shadow: 0 20px 40px -12px rgba(0,20,30,0.25);
overflow: hidden;
padding: 2.5rem 2.8rem;
}
/* même badge d'en-tête */
.platform-badge {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2rem;
font-weight: 500;
color: #2d6a4f;
border-bottom: 1px solid #e0e7ef;
padding-bottom: 1rem;
}
.platform-badge i {
font-size: 1.8rem;
color: #1b8c5e;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(145deg, #0b3b2c, #1f7a5c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0.25rem 0 0.1rem 0;
}
.subhead {
font-size: 1rem;
color: #4b5e6b;
margin-bottom: 2rem;
border-left: 4px solid #2d6a4f;
padding-left: 1.2rem;
background: #f0f7f4;
border-radius: 0 20px 20px 0;
padding: 0.8rem 1.2rem;
}
h2 {
font-size: 1.9rem;
font-weight: 600;
margin: 2.2rem 0 1rem 0;
color: #0e3829;
border-bottom: 2px solid #cfe5db;
padding-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 12px;
}
h2 i {
color: #1b8c5e;
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 2rem 0 1rem 0;
color: #1d5b45;
display: flex;
align-items: center;
gap: 10px;
}
h3 i {
color: #2d6a4f;
font-size: 1.8rem;
width: 2.2rem;
}
.mission-block {
background: #f6fcf9;
border-radius: 28px;
padding: 2rem 2.2rem;
margin: 1.8rem 0;
border: 1px solid #bde2d3;
box-shadow: 0 8px 18px -8px rgba(30,70,60,0.12);
}
.highlight-list {
list-style: none;
margin: 1.2rem 0 1.8rem 0;
}
.highlight-list li {
margin: 1rem 0;
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 1.1rem;
}
.highlight-list li i {
color: #1b8c5e;
font-size: 1.5rem;
min-width: 2rem;
text-align: center;
padding-top: 0.2rem;
}
.valeur-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.2rem;
margin: 2rem 0 1rem 0;
}
.valeur-card {
background: linear-gradient(145deg, #f1f9f5, #ffffff);
border-radius: 28px;
padding: 1.5rem 1rem;
text-align: center;
border: 1px solid #c0e0d2;
transition: transform 0.2s ease, box-shadow 0.2s;
}
.valeur-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 24px -12px #98c0b0;
}
.valeur-card i {
font-size: 2.2rem;
color: #1b8c5e;
margin-bottom: 0.5rem;
}
.valeur-card strong {
display: block;
font-size: 1.25rem;
font-weight: 700;
color: #0b3b2c;
}
.valeur-card span {
font-size: 0.9rem;
color: #2e5f4a;
}
.quote-box {
background: #ecf9f2;
border-radius: 2rem;
padding: 2rem 2.5rem;
margin: 2.8rem 0 1.8rem;
font-style: italic;
border-left: 8px solid #1b8c5e;
font-size: 1.2rem;
color: #1b4d3b;
box-shadow: inset 0 0 0 1px #d2f0e3;
}
.stats-mini {
display: flex;
gap: 1.2rem;
justify-content: space-around;
flex-wrap: wrap;
margin: 2.5rem 0;
}
.stat-item {
text-align: center;
background: white;
border-radius: 2rem;
padding: 1.2rem 1.8rem;
box-shadow: 0 4px 12px #e2ebe6;
flex: 1 0 130px;
border: 1px solid #d2e8df;
}
.stat-item i {
font-size: 2rem;
color: #0f6b4a;
}
.stat-item .number {
font-size: 1.6rem;
font-weight: 800;
color: #0b3b2c;
line-height: 1.2;
}
footer {
text-align: center;
margin-top: 3rem;
color: #668a7c;
font-size: 0.9rem;
border-top: 1px dashed #bdd9cf;
padding-top: 2rem;
}
hr {
border: none;
border-top: 2px dotted #bcd3cb;
margin: 2rem 0;
}
.pill {
background-color: #e2efe9;
color: #115740;
padding: 0.3rem 1.2rem;
border-radius: 40px;
display: inline-block;
font-size: 0.9rem;
font-weight: 500;
}
@media (max-width: 650px) {
.document-container { padding: 1.8rem; }
h1 { font-size: 2.2rem; }
.stat-item { flex-basis: 100%; }
}
</style>
{% endblock stylesheets %}
{% block body %}
<br/><br/>
<div class="document-container">
<!-- Badge d'identité identique à la page CGU -->
<div class="platform-badge">
<i class="fas fa-handshake"></i>
<span>PLATEFORME DE MISE EN RELATION · ABIDJAN</span>
</div>
<h1>À propos de HelpPlace</h1>
<div class="subhead">
<i class="fas fa-leaf" style="margin-right: 10px;"></i>
Qui sommes-nous ? Découvrez l'esprit d'une plateforme locale dédiée aux services de confiance.
</div>
<!-- Intro "Qui sommes-nous ?" -->
<h3><i class="fas fa-users"></i> Qui sommes-nous ?</h3>
<p class="pill" style="margin-bottom: 1rem;"><i class="fas fa-map-pin"></i> Côte d'Ivoire · depuis 2020</p>
<p style="font-size: 1.1rem; margin-bottom: 1.5rem;">
<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.).
</p>
<p>
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.
</p>
<!-- Notre mission -->
<h2><i class="fas fa-bullseye"></i> Notre mission</h2>
<div class="mission-block">
<i class="fas fa-quote-left" style="font-size: 2rem; color: #1b8c5e; opacity: 0.3; float: right;"></i>
<p style="font-size: 1.2rem; max-width: 85%;">
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.
</p>
<div style="clear: both;"></div>
</div>
<!-- Notre vision -->
<h2><i class="fas fa-eye"></i> Notre vision</h2>
<div class="mission-block" style="background: #f0faf5;">
<p style="font-size: 1.2rem;">
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.
</p>
</div>
<!-- Ce que nous proposons (sous forme de liste illustrée) -->
<h2><i class="fas fa-gift"></i> Ce que nous proposons</h2>
<ul class="highlight-list">
<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>
<li><i class="fas fa-bolt"></i> Un système de mise en relation rapide avec des prestataires disponibles.</li>
<li><i class="fas fa-clipboard-check"></i> Un cadre clair d'intervention et de validation des prestations.</li>
<li><i class="fas fa-shield-alt"></i> Une expérience sécurisée et encadrée pour toutes les parties.</li>
</ul>
<!-- quelques statistiques symboliques pour renforcer l'impact (optionnel mais design) -->
<div class="stats-mini">
<div class="stat-item">
<i class="fas fa-user-check"></i>
<div class="number">+350</div>
<div>prestataires actifs</div>
</div>
<div class="stat-item">
<i class="fas fa-smile"></i>
<div class="number">+2 500</div>
<div>clients accompagnés</div>
</div>
<div class="stat-item">
<i class="fas fa-city"></i>
<div class="number">8</div>
<div>communes couvertes</div>
</div>
</div>
<!-- Nos valeurs (reprise exacte du document, avec les définitions) -->
<h2><i class="fas fa-gem"></i> Nos valeurs</h2>
<p style="margin-bottom: 1rem;">HelpPlace repose sur des valeurs fondamentales que chaque prestataire s'engage à incarner, respecter et promouvoir :</p>
<div class="valeur-grid">
<div class="valeur-card">
<i class="fas fa-hand-holding-heart"></i>
<strong>Confiance</strong>
<span>Instaurer une relation de confiance durable avec chaque client.</span>
</div>
<div class="valeur-card">
<i class="fas fa-briefcase"></i>
<strong>Professionnalisme</strong>
<span>Offrir des services professionnels, durables et soignés.</span>
</div>
<div class="valeur-card">
<i class="fas fa-heart"></i>
<strong>Respect</strong>
<span>Respecter les personnes, les biens, les engagements et la loi.</span>
</div>
<div class="valeur-card">
<i class="fas fa-bolt"></i>
<strong>Réactivité</strong>
<span>Intervenir avec efficacité, ponctualité et sens des responsabilités.</span>
</div>
<div class="valeur-card">
<i class="fas fa-lock"></i>
<strong>Confidentialité</strong>
<span>Protéger les données personnelles et professionnelles des clients de la plateforme.</span>
</div>
<div class="valeur-card">
<i class="fas fa-handshake"></i>
<strong>Engagement local</strong>
<span>Valoriser le savoir-faire des prestataires locaux et contribuer au développement économique.</span>
</div>
</div>
<!-- Une petite phrase inspirée de l'esprit HelpPlace (pas dans le doc original, mais harmonisation) -->
<div class="quote-box">
<i class="fas fa-quote-left" style="color: #1b8c5e; font-size: 1.8rem; margin-right: 10px;"></i>
"HelpPlace, c'est la certitude de trouver la bonne personne au bon moment, tout en soutenant l'expertise ivoirienne."
</div>
<!-- Lien vers les valeurs réaffirmées : la charte / CGU (rappel discret) -->
<hr>
<p style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 2rem 0;">
<span class="pill"><i class="far fa-file-alt"></i> CGU & Charte prestataire</span>
<span class="pill"><i class="fas fa-phone-alt"></i> 0100512121</span>
<span class="pill"><i class="fas fa-envelope"></i> helpplace.abidjan@gmail.com</span>
</p>
<!-- footer exact comme sur la page précédente pour conserver la cohérence -->
<footer>
<i class="fas fa-map-pin"></i> Abidjan, Côte d'Ivoire · Document officiel HelpPlace · <i class="fas fa-calendar-alt"></i> 2025
</footer>
</div>
{% endblock body %}