{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<style>
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("{{ asset('image/prestataires/hero-image.jpeg') }}");
/* Set a specific height */
height: 1000px;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</style>
{% endblock stylesheets %}
{% block body %}
<!-- Section Hero avec formulaire multi-étapes -->
<div class="hero-image">
<section class="hero-gradient py-5" style="background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("{{ asset('image/prestataires/hero-image.jpeg') }}");">
<div class="container py-4">
<div class="row align-items-center g-5">
<div class="col-lg-12">
<div class=" border-0 shadow-lg rounded-4 p-4">
<div class="">
<h1 class="display-4 fw-bold mb-3" style="color: #fff;">Trouvez rapidement un <span class="border-bottom border-4" style="border-color: #FFC107 !important;">professionnel de confiance</span> à domicile</h1>
<form id="form" action="{{ path('entreprise_entreprise_d_une_categorie') }}">
<!-- Formulaire étape 1 -->
<div id="step1Content" class="step-content">
<div class="mb-4">
<div class="row g-3 mt-1">
<div class="col-12">
<select class="form-control" name="categorie" id="categorieEntreprise">
<option value="">Quel service recherchez-vous ?</option>
{% for categorieEntreprise in categorieEntreprises %}
<option value="{{ categorieEntreprise.nom }}" {#data-value="{{ categorieEntreprise.nom }}" #}>{{ categorieEntreprise.nom }}</option>
{% endfor %}
</select>
</div>
<span id="urlNouveauDevis" hidden>{{ path('nouveau_devis', {'fromABoutique': true, 'boutique': 0}) }}</span>
</div>
</div>
<div class="d-grid">
<span id="nextStep1" class="btn btn-primary-custom rounded-pill py-2" disabled>Continuer</span>
</div>
</div>
<!-- Formulaire étape 2 : contact -->
<div id="step2Content" class="step-content" style="display: none;">
<div id="contenuListeEntreprise">
</div>
<div class="d-flex justify-content-between">
<span id="prevStep2" class="btn btn-outline-secondary rounded-pill px-4">Retour</span>
<span id="submitRequestBtn" class="btn btn-primary-custom rounded-pill px-4">Envoyer la demande</span>
</div>
</div>
<!-- Message de confirmation -->
<div id="confirmationMessage" class="alert alert-success mt-3 d-none" role="alert">
✅ Demande envoyée ! Un professionnel vous contactera rapidement.
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section> {# section hero #}
<!-- Section "Comment ça marche ?" -->
<section class="py-5 bg-white">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold" style="color:#191C83;">Comment ça marche ?</h2>
<p class="text-secondary">4 étapes simples pour trouver le bon professionnel</p>
</div>
<div class="row g-4 text-center">
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 p-3">
<div class="card-body">
<div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 70px; height: 70px; background-color: #eef2ff !important;">
<i class="bi bi-search fs-1" style="color:#191C83;"></i>
</div>
<h5 class="fw-bold">1. Recherchez</h5>
<p class="text-muted">Trouvez les meilleurs prestataires près de chez vous, filtrés par compétences.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 p-3">
<div class="card-body">
<div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 70px; height: 70px; background-color: #eef2ff !important;">
<i class="bi bi-bar-chart-steps fs-1" style="color:#191C83;"></i>
</div>
<h5 class="fw-bold">2. Comparez</h5>
<p class="text-muted">Consultez les avis, tarifs et disponibilités pour faire le bon choix.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 p-3">
<div class="card-body">
<div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 70px; height: 70px; background-color: #eef2ff !important;">
<i class="bi bi-chat-dots fs-1" style="color:#191C83;"></i>
</div>
<h5 class="fw-bold">3. Contactez</h5>
<p class="text-muted">Choisissez et contactez directement les techniciens certifiés.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 p-3">
<div class="card-body">
<div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 70px; height: 70px; background-color: #eef2ff !important;">
<i class="bi bi-star fs-1" style="color:#191C83;"></i>
</div>
<h5 class="fw-bold">4. Evaluez</h5>
<p class="text-muted">Evaluez les prestataires pour créer plus de confiance.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section Nos services avec icônes gratuites -->
<section id="services" class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold" style="color:#191C83;">Nos Services</h2>
<p class="text-secondary">Des prestations de qualité pour tous vos besoins</p>
</div>
<div class="row g-4">
<div class="col-sm-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm rounded-4 text-center p-3">
<div class="card-service-icon mx-auto"><i class="bi bi-droplet fs-1"></i></div>
<h5 class="fw-bold">Plomberie</h5>
<p class="text-muted">Débouchage, fuites, installation sanitaire</p>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm rounded-4 text-center p-3">
<div class="card-service-icon mx-auto"><i class="bi bi-lightning-charge fs-1"></i></div>
<h5 class="fw-bold">Électricité</h5>
<p class="text-muted">Câblage, tableau électrique, dépannage</p>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm rounded-4 text-center p-3">
<div class="card-service-icon mx-auto"><i class="bi bi-brush fs-1"></i></div>
<h5 class="fw-bold">Ménage</h5>
<p class="text-muted">Nettoyage régulier ou ponctuel</p>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm rounded-4 text-center p-3">
<div class="card-service-icon mx-auto"><i class="bi bi-snow2 fs-1"></i></div>
<h5 class="fw-bold">Climatisation</h5>
<p class="text-muted">Installation, entretien, recharge gaz</p>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm rounded-4 text-center p-3">
<div class="card-service-icon mx-auto"><i class="bi bi-flower1 fs-1"></i></div>
<h5 class="fw-bold">Jardinage</h5>
<p class="text-muted">Tonte, taille, entretien espaces verts</p>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm rounded-4 text-center p-3">
<div class="card-service-icon mx-auto"><i class="bi bi-house-gear fs-1"></i></div>
<h5 class="fw-bold">Bricolage</h5>
<p class="text-muted">Petits travaux, montage meubles</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section Témoignages / Ils nous font confiance -->
<section class="py-5 bg-white">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold" style="color:#191C83;">Ils nous font confiance</h2>
<p class="text-secondary">Des clients satisfaits partagent leur expérience</p>
</div>
<div class="row g-4">
{% for avisUtilisateur in avisUtilisateurs %}
<div class="col-md-4">
<div class="card testimonial-card h-100 border-0 shadow rounded-4 p-3">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
<i class="bi bi-person-circle fs-2 me-2" style="color:#191C83;"></i>
<h5 class="mb-0 fw-bold">{{ avisUtilisateur.user.nom }}</h5>
</div>
<div class="mb-2 text-warning">
{% for i in range(1, 5) %}
{% if i <= avisUtilisateur.valeurAvis %}
<i class="bi bi-star-fill"></i>
{% else %}
<i class="bi bi-star"></i>
{% endif %}
{% endfor %}
</div>
<p class="card-text">{{ avisUtilisateur.contenu }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- Section À propos -->
<section id="about" class="py-5 bg-light">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<img src="https://picsum.photos/id/20/600/400" alt="Equipe de professionnels" class="img-fluid rounded-4 shadow-lg" style="object-fit: cover;">
</div>
<div class="col-lg-6">
<h2 class="fw-bold" style="color:#191C83;">À propos de {{ app_name }}</h2>
<p class="lead mt-3">Leader de la mise en relation entre particuliers et artisans de confiance.</p>
<p>Nous sélectionnons rigoureusement chaque prestataire pour garantir qualité, réactivité et transparence des prix. Que ce soit pour une urgence (plomberie, électricité) ou un service régulier (ménage, jardinage), notre plateforme vous connecte aux meilleurs experts près de chez vous.</p>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<h1 class="text-center">En vedette</h1>
<hr/>
<br/>
</div>
</div>
{% for boutique in boutiquesVedettes %}
<div class="row align-items-center">
<div class="col-md-12">
<div class="assie-card">
<p>
<h4>
{{ boutique.nom }}
</h4>
{% for i in range(1, 5) %}
{% if i <= boutique.moyenneAvis %}
<i class="bi bi-star-fill jaune-or text-warning"></i>
{% else %}
<i class="bi bi-star jaune-or"></i>
{% endif %}
{% endfor %}
{% if boutique.adresse !='' %}, {{ boutique.adresse }} {% endif %}
</p>
<hr/>
</label>
<a target="_blank" href="{{ path('afficher_entreprise', {'slug': boutique.slug}) }}" class="btn btn-primary">Voir plus</a>
</div>
</div>
</div>
<br/> <br/>
{% endfor %}
</div>
</section>
{% endblock body%}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript" src="{{ asset('js/step.js') }}"></script>
{# fin formulaire plusieurs étape #}
{% endblock javascripts %}