<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LJK8WZS35C"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LJK8WZS35C');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>{{ app_name }} - Professionnels de confiance à domicile</title>
<!-- Bootstrap 5 CSS + Icons + Google Fonts -->
{% block stylesheets %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/general-2.css') }}" >
{% block facebook_pixel %}
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
//fbq('init', '953311077185781');
fbq('init', '3997456210389249');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=3997456210389249&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
{% endblock facebook_pixel %}
<style>
* {
font-family: 'Inter', sans-serif;
}
body {
background-color: #ffffff;
}
/* Couleur principale #191C83 */
.bg-primary-custom {
background-color: #191C83;
}
.text-primary-custom {
color: #191C83;
}
.btn-primary-custom {
background-color: #191C83;
border-color: #191C83;
color: white;
}
.btn-primary-custom:hover {
background-color: #10135e;
border-color: #10135e;
color: white;
}
.btn-outline-primary-custom {
border-color: #191C83;
color: #191C83;
}
.btn-outline-primary-custom:hover {
background-color: #191C83;
color: white;
}
.hero-gradient {
background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.step-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-weight: 500;
color: #6c757d;
transition: all 0.2s;
}
.step .step-circle {
width: 48px;
height: 48px;
background-color: #e9ecef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.3rem;
color: #495057;
transition: all 0.2s;
}
.step.active .step-circle {
background-color: #191C83;
color: white;
box-shadow: 0 8px 20px rgba(25,28,131,0.2);
}
.step.completed .step-circle {
background-color: #198754;
color: white;
}
.step-label {
font-size: 0.85rem;
}
.card-service-icon {
font-size: 2.2rem;
color: #191C83;
background: #f0f2ff;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
margin-bottom: 1rem;
}
.testimonial-card {
transition: transform 0.2s;
border: none;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}
.testimonial-card:hover {
transform: translateY(-5px);
}
.footer-links a {
text-decoration: none;
color: #ccc;
transition: color 0.2s;
}
.footer-links a:hover {
color: white;
}
.navbar-nav .nav-link {
font-weight: 500;
color: #1f2937;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
color: #191C83;
}
@media (max-width: 768px) {
.step .step-circle {
width: 40px;
height: 40px;
font-size: 1rem;
}
.step-label {
font-size: 0.7rem;
}
}
</style>
{% endblock stylesheets %}
</head>
<body>
{% block header %}
<!-- Navigation principale -->
<nav class="navbar navbar-expand-lg bg-white py-3 shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold fs-4" href="{{ path('home') }}">
<img src="{{ asset('image/logo.jpeg') }}" class="img-fluid" style="max-height:96px; max-width: 96px;" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Basculer navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 gap-lg-3">
<li class="nav-item"><a class="nav-link active" href="{{ path('home') }}">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="{{ path('a_propos') }}">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="{{ path('nos_services') }}">Nos services</a></li>
{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
{% if is_granted('ROLE_MANAGER') %}
<li class="nav-item"><a class="nav-link btn btn" href="{{ path('management.index') }}">Administration</a></li>
{% endif %}
<li class="nav-item"><a class="nav-link" href="{{ path('app_logout') }}">Se déconnecter</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{{ path('registration_register') }}">Inscription</a></li>
<li class="nav-item"><a class="nav-link" href="{{ path('security_login') }}">Connexion</a></li>
{% endif %}
</ul>
<div class="d-flex">
<a href="{{ path('gestion_mes_entreprises') }}" class="btn btn-primary-custom rounded-pill px-4" style="font-size: 0.9rem;">Espace pro</a>
</div>
</div>
</div>
</nav>
{% endblock header %}
{% block body %}
{% endblock %}
{% block contenu_propre %}
{% endblock contenu_propre %}
<!-- Footer avec liens Inscription / Connexion fictifs -->
<footer class="bg-dark text-white pt-5 pb-4">
<div class="container">
<div class="row gy-4">
<div class="col-md-4">
<h5 class="fw-bold mb-3"><i class="bi bi-tools me-2"></i>{{ app_name }}</h5>
<p>Votre partenaire de confiance pour tous vos besoins à domicile. Simple, rapide et sécurisé.</p>
</div>
<div class="col-md-2">
<h5 class="fw-bold mb-3">Liens utiles</h5>
<ul class="list-unstyled footer-links">
<li><a href="{{ path('home') }}" class="text-white-50 text-decoration-none">Accueil</a></li>
<li class="mt-2"><a href="{{ path('a_propos') }}" class="text-white-50 text-decoration-none">À propos</a></li>
<li class="mt-2"><a href="{{ path('nos_services') }}" class="text-white-50 text-decoration-none">Nos services</a></li>
</ul>
</div>
<div class="col-md-3">
<h5 class="fw-bold mb-3">Compte</h5>
<ul class="list-unstyled footer-links">
<li><a href="{{ path('registration_register') }}" id="footerInscription" class="text-white-50 text-decoration-none">Inscription</a></li>
<li class="mt-2"><a href="{{ path('security_login') }}" id="footerConnexion" class="text-white-50 text-decoration-none">Connexion</a></li>
<li class="mt-2"><a href="{{ path('gestion_mes_entreprises') }}" class="text-white-50 text-decoration-none">Devenir prestataire</a></li>
</ul>
</div>
<div class="col-md-3">
<h5 class="fw-bold mb-3">Contact</h5>
<p class="text-white-50"><i class="bi bi-envelope"></i>info@myhelpplace.com</p>
<p class="text-white-50"><i class="bi bi-telephone"></i> (+225) 0100512121</p>
<p class="text-white-50">
<ul class="list-unstyled footer-links">
<li><a href="https://web.facebook.com/profile.php?id=61566618250303" target="_blank" rel="noopener noreferrer" id="footerInscription" class="text-white-50 text-decoration-none"><i class="bi bi-facebook"></i> Facebook</a></li>
<li class="mt-2"><a href="https://www.linkedin.com/in/helpplace-abidjan-799859377" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" id="footerConnexion" class="text-white-50 text-decoration-none"><i class="bi bi-linkedin"></i> LinkedIn</a></li>
<li class="mt-2"><a href="https://tiktok.com/@myhelpplace" target="_blank" rel="noopener noreferrer" aria-label="TikTok" class="text-white-50 text-decoration-none"><i class="bi bi-tiktok"></i> TikTok</a></li>
</ul>
</p>
</div>
</div>
<hr class="mt-4 opacity-25">
<div class="text-center text-white-50 small">© 2026 {{ app_name }} - Tous droits réservés</div>
</div>
</footer>
{% block javascripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
{% endblock javascripts %}
</body>
</html>