templates/components/pricing.html.twig line 1

Open in your IDE?
  1. <section class="bg-gray-100 dark:bg-gray-900" id="pricing">
  2.   <div class="py-12 px-4 mx-auto max-w-screen-xl lg:py-20 lg:px-6">
  3.     <div class="mx-auto max-w-screen-md text-center mb-10 lg:mb-14">
  4.       <h2 class="mb-4 text-3xl sm:text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Choisissez le plan adapté à votre activité</h2>
  5.       <p class="mb-5 font-light text-gray-600 sm:text-lg dark:text-gray-300">MatchMeuble met en relation particuliers et monteurs. Commencez gratuitement pour découvrir les annonces, et passez en Pro pour booster votre visibilité, gagner du temps et décrocher plus de missions.</p>
  6.     </div>
  7.     <div class="space-y-8 lg:grid lg:grid-cols-2 sm:gap-6 xl:gap-10 lg:space-y-0">
  8.       <!-- Gratuit -->
  9.       <div class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
  10.         <h3 class="mb-2 text-2xl font-semibold">Gratuit</h3>
  11.         <p class="font-light text-gray-500 sm:text-base dark:text-gray-400">Parfait pour démarrer et tester les fonctionnalités essentielles.</p>
  12.         <div class="flex justify-center items-baseline my-7">
  13.           <span class="mr-2 text-5xl font-extrabold">0€</span>
  14.           <span class="text-gray-500 dark:text-gray-400">/ mois</span>
  15.         </div>
  16.         <ul role="list" class="mb-8 space-y-4 text-left">
  17.           <li class="flex items-center space-x-3">
  18.             <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg>
  19.             <span>Parcourir toutes les annonces</span>
  20.           </li>
  21.           <li class="flex items-center space-x-3">
  22.             <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg>
  23.             <span>Favoris et suivi d’annonces</span>
  24.           </li>
  25.           <li class="flex items-center space-x-3">
  26.             <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg>
  27.             <span>Messagerie intégrée</span>
  28.           </li>
  29.           <li class="flex items-center space-x-3">
  30.             <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg>
  31.             <span>Sans engagement</span>
  32.           </li>
  33.         </ul>
  34.         <a href="{{ path('app_annonces') }}" class="text-blue-600 border border-blue-600 hover:bg-blue-600 hover:text-white font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-blue-600 dark:hover:bg-blue-700 dark:hover:text-white">Découvrir les annonces</a>
  35.       </div>
  37.       <!-- Pro (statique si aucun plan n'est fourni) -->
  38.       {% set hasPlans = (plans is defined and plans) %}
  39.       {% if hasPlans %}
  40.         {% for plan in plans %}
  41.           <div class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
  42.             <h3 class="mb-2 text-2xl font-semibold">{{ plan.name|default('Pro') }}</h3>
  43.             <p class="font-light text-gray-500 sm:text-base dark:text-gray-400">Idéal pour les professionnels avec des besoins avancés et un support prioritaire.</p>
  44.             <div class="flex justify-center items-baseline my-7">
  45.               <span class="mr-2 text-5xl font-extrabold">{{ ((plan.price|default(0)) / 100)|number_format(2, ',', ' ') }}€</span>
  46.               <span class="text-gray-500 dark:text-gray-400">/ mois</span>
  47.             </div>
  48.             <ul role="list" class="mb-8 space-y-4 text-left">
  49.               <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Mise en avant des annonces</span></li>
  50.               <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Badge Pro & visibilité accrue</span></li>
  51.               <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Alertes personnalisées</span></li>
  52.               <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Support prioritaire</span></li>
  53.             </ul>
  54.             <a href="{{ plan.paymentLink|default(path('app_register')) }}" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700">Passer en Pro</a>
  55.           </div>
  56.         {% endfor %}
  57.       {% else %}
  58.         <div class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
  59.           <h3 class="mb-2 text-2xl font-semibold">Pro</h3>
  60.           <p class="font-light text-gray-500 sm:text-base dark:text-gray-400">Idéal pour les professionnels: mise en avant, badge Pro, alertes et support.</p>
  61.           <div class="flex justify-center items-baseline my-7">
  62.             <span class="mr-2 text-5xl font-extrabold">Sur devis</span>
  63.           </div>
  64.           <ul role="list" class="mb-8 space-y-4 text-left">
  65.             <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Mise en avant des annonces</span></li>
  66.             <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Badge Pro & visibilité accrue</span></li>
  67.             <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Alertes personnalisées</span></li>
  68.             <li class="flex items-center space-x-3"><svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z" clip-rule="evenodd"/></svg><span>Support prioritaire</span></li>
  69.           </ul>
  70.           <a href="{{ path('app_register') }}" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700">Créer un compte</a>
  71.         </div>
  72.       {% endif %}
  73.     </div>
  74.   </div>
  75. </section>