templates/page/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}bambboo - Connexion{% endblock %}
  5. {% block body %}
  6.     {{ encore_entry_link_tags('home') }}
  8.     {% set show_account_missing_client = (login_error_type|default(null) == 'account_missing_client') %}
  10.     {% if is_mobile|default(false) %}
  11.         <div class="container-fluid h-100 bg-register vh-100 d-flex flex-column position-relative" style="background: linear-gradient(to right, #004d40, #00251a);">
  12.             <div class="row flex-grow-1 d-flex align-items-center justify-content-center px-3 py-5">
  13.                 <div class="col-12 col-sm-10 col-md-8 col-lg-6 position-relative">
  14.                     <img src="/img/logo-bambboo-white.svg" class="logo-bambboo-mobile d-block mx-auto" style="width: 140px;height: auto;margin-bottom: 60px !important;">
  15.                     <div class="bg-white rounded-4 shadow-lg p-4 pt-3 position-relative d-flex flex-column">
  16.                         {% if show_request_access_form|default(false) %}
  17.                         <div class="mb-4">
  18.                             <a href="{{ path('home') }}" class="text-decoration-none text-dark">
  19.                                 ← Retour à la connexion
  20.                             </a>
  21.                         </div>
  22.                         {% set show_request_eligible = (request_access_eligible|default(null) == '1' and request_access_signin_url|default(null) is not null) %}
  23.                         {% if show_request_eligible %}
  24.                             <h1 class="fs-4 ubuntu-medium mb-2">Accès autorisé</h1>
  25.                             <div class="text-center py-4">
  26.                                 <div class="spinner-border text-success" role="status" aria-hidden="true"></div>
  27.                                 <p class="mt-3 mb-0 text-muted">Redirection…</p>
  28.                             </div>
  29.                             <script>
  30.                                 (function() {
  31.                                     var target = {{ request_access_signin_url|json_encode|raw }};
  32.                                     if (target) {
  33.                                         setTimeout(function() { window.location.href = target; }, 600);
  34.                                     }
  35.                                 })();
  36.                             </script>
  37.                         {% elseif request_access_eligible|default(null) == '0' %}
  38.                             <h1 class="fs-4 ubuntu-medium mb-2 border-bottom border-success border-2 pb-2" style="border-width: 2px !important;">Rejoindre Bambboo</h1>
  39.                             <div class="alert alert-warning border-0 border-start border-5 border-warning mb-3 py-3">
  40.                                 <div class="d-flex align-items-start">
  41.                                     <span class="rounded bg-primary text-white d-inline-flex align-items-center justify-content-center me-2 flex-shrink-0" style="width: 1.5rem; height: 1.5rem; font-size: 0.85rem; font-weight: bold;">i</span>
  42.                                     <div>
  43.                                         <p class="fw-bold mb-1 text-dark">Aucun compte n'existe avec cette adresse email.</p>
  44.                                         <p class="mb-0 text-dark">Rapprochez-vous de votre responsable RH pour obtenir votre lien d'inscription.</p>
  45.                                     </div>
  46.                                 </div>
  47.                             </div>
  48.                         {% else %}
  49.                             <h1 class="fs-4 ubuntu-medium mb-2 border-bottom border-success border-2 pb-2" style="border-width: 2px !important;">Rejoindre Bambboo</h1>
  50.                             <p class="text-dark mb-3">Entrez votre email professionnel pour recevoir votre lien d'inscription.</p>
  51.                             {% for message in app.flashes('error') %}
  52.                                 <div class="alert alert-danger">{{ message }}</div>
  53.                             {% endfor %}
  54.                             {{ form_start(request_access_form, { action: path('app_request_access') }) }}
  55.                                 <div class="mb-3">
  56.                                     {{ form_label(request_access_form.email) }}
  57.                                     {{ form_widget(request_access_form.email) }}
  58.                                     {{ form_errors(request_access_form.email) }}
  59.                                 </div>
  60.                                 <button type="submit" class="btn btn-success bg-clover w-100 py-2 ubuntu-medium">
  61.                                     Recevoir mon lien d'inscription
  62.                                     <i class="fa-solid fa-arrow-right ms-2"></i>
  63.                                 </button>
  64.                             {{ form_end(request_access_form) }}
  65.                             <div class="text-center mt-4">
  66.                                 <p class="text-muted small mb-1">Votre entreprise n'est pas encore sur Bambboo ?</p>
  67.                                 <a href="{{ path('contact') }}" class="text-clover text-decoration-underline ubuntu-medium">Contactez-nous</a>
  68.                             </div>
  69.                         {% endif %}
  70.                         {% else %}
  71.                         <h1 class="fs-1 ubuntu-medium text-dark mb-4 mt-1 text-center">Connectez-vous à votre espace bambboo</h1>
  73.                         {% if show_magic_link_confirmation|default(false) %}
  74.                         <div class="text-center">
  75.                             <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 64px; height: 64px; background-color: #E6FBF2;">
  76.                                 <i class="fa-solid fa-envelope fa-lg" style="color: #197E69;"></i>
  77.                             </div>
  78.                             <h2 class="fs-4 fw-bold text-dark mb-4">Consultez votre boite mail</h2>
  79.                             <div class="rounded-3 py-3 px-3 mb-3 text-center" style="background-color: #F8F9FA;">
  80.                                 <span class="text-dark">{{ magic_link_email|default('') }}</span>
  81.                             </div>
  82.                             <p class="text-dark mb-4">{% if magic_link_type|default('connexion') == 'inscription' %}Si votre entreprise utilise Bambboo, vous allez recevoir un email avec votre lien d'inscription dans quelques instants.{% else %}Si cette adresse correspond à un compte Bambboo, vous recevrez un lien de connexion.{% endif %} Pensez à vérifier vos spams.</p>
  83.                             <div class="d-grid gap-2 mb-3">
  84.                                 <a href="{{ path('home') }}" class="text-decoration-none text-dark">Retour</a>
  85.                             </div>
  86.                             <form method="post" action="{{ path('app_request_magic_link') }}" class="d-inline d-block mb-3">
  87.                                 <input type="hidden" name="email" value="{{ magic_link_email|e('html_attr') }}">
  88.                                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('request_magic_link') }}">
  89.                                 <button type="submit" class="btn btn-success w-100 py-2 ubuntu-medium" style="background-color: #197E69;">Renvoyer le lien</button>
  90.                             </form>
  91.                         </div>
  92.                         {% else %}
  93.                         {% if login_error_type|default(null) == 'account_missing_no_client' %}
  94.                             <div class="alert alert-danger">
  95.                                 <p class="mb-0"><strong>Aucun compte n'existe avec cette adresse email.</strong></p>
  96.                                 <p class="mb-0">Rapprochez-vous de votre responsable RH pour obtenir votre lien d'inscription.</p>
  97.                             </div>
  98.                         {% elseif login_error_type|default(null) == 'wrong_password' %}
  99.                             <div class="alert alert-danger">
  100.                                 <p class="mb-0">Identifiants incorrects</p>
  101.                             </div>
  102.                         {% elseif error %}
  103.                             <div class="alert alert-danger">
  104.                                 {% if error.messageKey == 'Invalid credentials.' or error.messageKey == 'Bad credentials.' or 'credentials' in error.messageKey|lower %}
  105.                                     Identifiants incorrects
  106.                                 {% else %}
  107.                                     {{ error.messageKey|trans(error.messageData, 'security') }}
  108.                                 {% endif %}
  109.                             </div>
  110.                         {% endif %}
  112.                         {% if show_create_account_info|default(false) %}
  113.                             <div class="alert alert-info">
  114.                                 Pour créer un compte, vous devez disposer d'un lien d'invitation (envoyé par votre recruteur ou votre entreprise).
  115.                             </div>
  116.                         {% endif %}
  118.                         {% for message in app.flashes('success') %}
  119.                             <div class="alert alert-success">
  120.                                 {{ message }}
  121.                                 <a href="{{ path('app_login') }}" class="btn btn-sm btn-outline-success ms-2">OK</a>
  122.                             </div>
  123.                         {% endfor %}
  125.                         {% if isInactive %}
  126.                             <div class="alert alert-danger">Votre compte est inactif.</div>
  127.                         {% endif %}
  129.                         {% if isRedirected %}
  130.                             <div class="alert alert-info" id="redirect-message">
  131.                                 <i class="fas fa-info-circle me-2"></i>
  132.                                 Votre session a expiré. Veuillez vous reconnecter pour continuer.
  133.                             </div>
  134.                         {% endif %}
  136.                         <form method="post" action="{{ path('app_request_magic_link') }}" class="text-start">
  137.                             <div class="mb-3">
  138.                                 <label for="email" class="form-label fs-14 ubuntu-medium">Adresse email</label>
  139.                                 <input type="email" class="form-control {{ login_error_type|default(null) == 'domain_not_partner' ? 'is-invalid' : '' }}" name="email" id="email" placeholder="votre@email.com" value="{{ prefilledEmail|default('') }}" required autofocus>
  140.                             </div>
  141.                             {% if login_error_type|default(null) == 'domain_not_partner' %}
  142.                             <div class="alert alert-warning d-flex align-items-start mb-3" role="alert">
  143.                                 <i class="fa-solid fa-circle-info me-2 mt-1" style="font-size: 1.1rem;"></i>
  144.                                 <div>
  145.                                     <p class="fw-bold mb-1">Impossible de vous connecter</p>
  146.                                     <p class="mb-0">Si vous pensez que votre entreprise utilise Bambboo, rapprochez-vous de votre <strong>responsable RH</strong> pour obtenir votre lien d'inscription.</p>
  147.                                 </div>
  148.                             </div>
  149.                             <div class="mb-3">
  150.                                 <p class="fw-bold mb-2 small">Quelques vérifications :</p>
  151.                                 <ul class="mb-0 ps-3 small text-dark">
  152.                                     <li>Avez-vous bien utilisé votre email professionnel ?</li>
  153.                                     <li>Votre entreprise est-elle partenaire Bambboo ?</li>
  154.                                     <li>Contactez <a href="mailto:support@bambboo.com" class="text-success text-decoration-none">support@bambboo.com</a> en cas de doute.</li>
  155.                                 </ul>
  156.                             </div>
  157.                             <div class="d-grid gap-2 mb-3">
  158.                                 <a href="{{ path('home') }}" class="btn btn-success py-2 ubuntu-medium" style="background-color: #197E69;">
  159.                                     <i class="fa-solid fa-arrow-left me-2"></i>Réessayer avec un autre email
  160.                                 </a>
  161.                             </div>
  162.                             {% else %}
  163.                             {% if show_account_missing_client %}
  164.                                 <div class="border border-secondary rounded-3 bg-light p-3 mb-3">
  165.                                     <p class="mb-2"><strong>Compte inexistant</strong></p>
  166.                                     {% if client_create_account_url|default(null) %}
  167.                                         <a href="{{ client_create_account_url }}" class="btn btn-success bg-clover px-4 py-2">Créer mon compte</a>
  168.                                     {% endif %}
  169.                                 </div>
  170.                             {% endif %}
  172.                             <input type="hidden" name="_csrf_token" value="{{ csrf_token('request_magic_link') }}">
  174.                             {% if not hide_login_actions|default(false) %}
  175.                                 <div class="d-grid gap-2 mt-4">
  176.                                     <button type="submit" class="btn btn-success bg-clover w-100 py-2 ubuntu-medium">
  177.                                         Recevoir mon lien de connexion
  178.                                         <i class="fa-solid fa-arrow-right ms-2"></i>
  179.                                     </button>
  180.                                 </div>
  181.                             {% endif %}
  182.                             {% endif %}
  183.                         </form>
  185.                         {% if not show_account_missing_client %}
  186.                             <div class="text-center mt-3">
  187.                                 <span class="fs-14 text-dark">Vous n'avez pas encore de compte ?</span>
  188.                                 <a href="{{ path('home', { show: 'demander-mon-acces' }) }}" class="text-clover text-decoration-underline ubuntu-medium ms-1">Demander mon accès</a>
  189.                             </div>
  190.                         {% endif %}
  191.                         {% endif %}
  192.                         {% endif %}
  193.                     </div>
  194.                 </div>
  195.             </div>
  196.             <div class="position-absolute bottom-0 start-0 end-0 d-flex justify-content-end align-items-center px-4 py-3">
  197.                 <a href="{{ path('contact') }}" class="text-white text-decoration-none d-flex align-items-center fs-16">
  198.                     <i class="fa-regular fa-circle-question me-2"></i>
  199.                     <span>Nous contacter</span>
  200.                 </a>
  201.             </div>
  202.         </div>
  203.     {% else %}
  204.         <div class="container-fluid h-100">
  205.             <div class="row full-height">
  206.                 <div class="col-12 col-md-4 bg-white d-flex flex-column align-items-center position-relative min-vh-100 pt-5 pb-2">
  207.                     <img src="/img/logo-bambboo.png" class="position-absolute top-0 start-0 mt-4 logo-bambboo-desktop" style="width: 150px; height: auto; z-index: 10; margin-left: 4rem;">
  208.                     <div class="col-md-10 text-start d-flex flex-column flex-grow-1" style="min-height: 0;">
  209.                         <div class="d-flex flex-column justify-content-center flex-grow-1" style="min-height: 0;">
  210.                             {% if show_request_access_form|default(false) %}
  211.                             <div class="mb-4">
  212.                                 <a href="{{ path('home') }}" class="text-decoration-none text-dark">
  213.                                     ← Retour à la connexion
  214.                                 </a>
  215.                             </div>
  216.                             {% set show_request_eligible_desktop = (request_access_eligible|default(null) == '1' and request_access_signin_url|default(null) is not null) %}
  217.                             {% if show_request_eligible_desktop %}
  218.                                 <h1 class="fs-4 ubuntu-medium mb-2">Accès autorisé</h1>
  219.                                 <div class="text-center py-4">
  220.                                     <div class="spinner-border text-success" role="status" aria-hidden="true"></div>
  221.                                     <p class="mt-3 mb-0 text-muted">Redirection…</p>
  222.                                 </div>
  223.                                 <script>
  224.                                     (function() {
  225.                                         var target = {{ request_access_signin_url|json_encode|raw }};
  226.                                         if (target) {
  227.                                             setTimeout(function() { window.location.href = target; }, 600);
  228.                                         }
  229.                                     })();
  230.                                 </script>
  231.                             {% elseif request_access_eligible|default(null) == '0' %}
  232.                                 <h1 class="fs-4 ubuntu-medium mb-2 border-bottom border-success border-2 pb-2" style="border-width: 2px !important;">Rejoindre Bambboo</h1>
  233.                                 <div class="alert alert-warning border-0 border-start border-5 border-warning mb-4 py-3">
  234.                                     <div class="d-flex align-items-start">
  235.                                         <span class="rounded bg-primary text-white d-inline-flex align-items-center justify-content-center me-2 flex-shrink-0" style="width: 1.5rem; height: 1.5rem; font-size: 0.85rem; font-weight: bold;">i</span>
  236.                                         <div>
  237.                                             <p class="fw-bold mb-1 text-dark">Aucun compte n'existe avec cette adresse email.</p>
  238.                                             <p class="mb-0 text-dark">Rapprochez-vous de votre responsable RH pour obtenir votre lien d'inscription.</p>
  239.                                         </div>
  240.                                     </div>
  241.                                 </div>
  242.                             {% else %}
  243.                                 <h1 class="fs-4 ubuntu-medium mb-2 border-bottom border-success border-2 pb-2" style="border-width: 2px !important;">Rejoindre Bambboo</h1>
  244.                                 <p class="text-dark mb-4">Entrez votre email professionnel pour recevoir votre lien d'inscription.</p>
  245.                                 {% for message in app.flashes('error') %}
  246.                                     <div class="alert alert-danger mb-4">{{ message }}</div>
  247.                                 {% endfor %}
  248.                                 {{ form_start(request_access_form, { action: path('app_request_access') }) }}
  249.                                     <div class="mb-4">
  250.                                         {{ form_label(request_access_form.email) }}
  251.                                         {{ form_widget(request_access_form.email) }}
  252.                                         {{ form_errors(request_access_form.email) }}
  253.                                     </div>
  254.                                     <button type="submit" class="btn btn-success bg-clover w-100 py-2 ubuntu-medium">
  255.                                         Recevoir mon lien d'inscription
  256.                                         <i class="fa-solid fa-arrow-right ms-2"></i>
  257.                                     </button>
  258.                                 {{ form_end(request_access_form) }}
  259.                                 <div class="text-center mt-4">
  260.                                     <p class="text-muted small mb-1">Votre entreprise n'est pas encore sur Bambboo ?</p>
  261.                                     <a href="{{ path('contact') }}" class="text-clover text-decoration-underline ubuntu-medium">Contactez-nous</a>
  262.                                 </div>
  263.                             {% endif %}
  264.                             {% else %}
  265.                             <div class="mb-5">
  266.                                 <div class="d-flex align-items-center">
  267.                                     <div class="flex-grow-1 fs-50 lh-65 ubuntu-light">Connectez-vous à votre espace bambboo</div>
  268.                                 </div>
  269.                             </div>
  271.                             {% if show_magic_link_confirmation|default(false) %}
  272.                             <div class="text-center">
  273.                                 <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 64px; height: 64px; background-color: #E6FBF2;">
  274.                                     <i class="fa-solid fa-envelope fa-lg" style="color: #197E69;"></i>
  275.                                 </div>
  276.                                 <h2 class="fs-4 fw-bold text-dark mb-4">Consultez votre boite mail</h2>
  277.                                 <div class="rounded-3 py-3 px-3 mb-3 text-center" style="background-color: #F8F9FA;">
  278.                                     <span class="text-dark">{{ magic_link_email|default('') }}</span>
  279.                                 </div>
  280.                                 <p class="text-dark mb-4">{% if magic_link_type|default('connexion') == 'inscription' %}Si votre entreprise utilise Bambboo, vous allez recevoir un email avec votre lien d'inscription dans quelques instants.{% else %}Si cette adresse correspond à un compte Bambboo, vous recevrez un lien de connexion.{% endif %} Pensez à vérifier vos spams.</p>
  281.                                 <div class="d-grid gap-2 mb-3">
  282.                                     <a href="{{ path('home') }}" class="text-decoration-none text-dark">Retour</a>
  283.                                 </div>
  284.                                 <form method="post" action="{{ path('app_request_magic_link') }}" class="d-inline d-block mb-3">
  285.                                     <input type="hidden" name="email" value="{{ magic_link_email|e('html_attr') }}">
  286.                                     <input type="hidden" name="_csrf_token" value="{{ csrf_token('request_magic_link') }}">
  287.                                     <button type="submit" class="btn btn-success w-100 py-2 ubuntu-medium" style="background-color: #197E69;">Renvoyer le lien</button>
  288.                                 </form>
  289.                             </div>
  290.                             {% else %}
  291.                             {% if login_error_type|default(null) == 'account_missing_no_client' %}
  292.                                 <div class="alert alert-danger mb-4">
  293.                                     <p class="mb-0"><strong>Aucun compte n'existe avec cette adresse email.</strong></p>
  294.                                     <p class="mb-0">Rapprochez-vous de votre responsable RH pour obtenir votre lien d'inscription.</p>
  295.                                 </div>
  296.                             {% elseif login_error_type|default(null) == 'wrong_password' %}
  297.                                 <div class="alert alert-danger mb-4">
  298.                                     <p class="mb-0">Identifiants incorrects</p>
  299.                                 </div>
  300.                             {% elseif error %}
  301.                                 <div class="alert alert-danger mb-4">
  302.                                     {% if error.messageKey == 'Invalid credentials.' or error.messageKey == 'Bad credentials.' or 'credentials' in error.messageKey|lower %}
  303.                                         Identifiants incorrects
  304.                                     {% else %}
  305.                                         {{ error.messageKey|trans(error.messageData, 'security') }}
  306.                                     {% endif %}
  307.                                 </div>
  308.                             {% endif %}
  310.                             {% if show_create_account_info|default(false) %}
  311.                                 <div class="alert alert-info mb-4">
  312.                                     Pour créer un compte, vous devez disposer d'un lien d'invitation (envoyé par votre recruteur ou votre entreprise).
  313.                                 </div>
  314.                             {% endif %}
  316.                             {% for message in app.flashes('success') %}
  317.                                 <div class="alert alert-success mb-4">
  318.                                     {{ message }}
  319.                                     <a href="{{ path('app_login') }}" class="btn btn-sm btn-outline-success ms-2">OK</a>
  320.                                 </div>
  321.                             {% endfor %}
  323.                             {% if isInactive %}
  324.                                 <div class="alert alert-danger mb-4">Votre compte est inactif.</div>
  325.                             {% endif %}
  327.                             {% if isRedirected %}
  328.                                 <div class="alert alert-info mb-4" id="redirect-message">
  329.                                     <i class="fas fa-info-circle me-2"></i>
  330.                                     Votre session a expiré. Veuillez vous reconnecter pour continuer.
  331.                                 </div>
  332.                             {% endif %}
  334.                             <form method="post" action="{{ path('app_request_magic_link') }}" class="text-start">
  335.                                 <div class="mb-4">
  336.                                     <label for="email-desktop" class="form-label">Adresse email</label>
  337.                                     <input type="email" class="form-control {{ login_error_type|default(null) == 'domain_not_partner' ? 'is-invalid' : '' }}" name="email" id="email-desktop" placeholder="votre@email.com" value="{{ prefilledEmail|default('') }}" required autofocus>
  338.                                 </div>
  339.                                 {% if login_error_type|default(null) == 'domain_not_partner' %}
  340.                                 <div class="alert alert-warning d-flex align-items-start mb-4" role="alert">
  341.                                     <i class="fa-solid fa-circle-info me-2 mt-1" style="font-size: 1.1rem;"></i>
  342.                                     <div>
  343.                                         <p class="fw-bold mb-1">Impossible de vous connecter</p>
  344.                                         <p class="mb-0">Si vous pensez que votre entreprise utilise Bambboo, rapprochez-vous de votre <strong>responsable RH</strong> pour obtenir votre lien d'inscription.</p>
  345.                                     </div>
  346.                                 </div>
  347.                                 <div class="mb-4">
  348.                                     <p class="fw-bold mb-2 small">Quelques vérifications :</p>
  349.                                     <ul class="mb-0 ps-3 small text-dark">
  350.                                         <li>Avez-vous bien utilisé votre email professionnel ?</li>
  351.                                         <li>Votre entreprise est-elle partenaire Bambboo ?</li>
  352.                                         <li>Contactez <a href="mailto:support@bambboo.com" class="text-success text-decoration-none">support@bambboo.com</a> en cas de doute.</li>
  353.                                     </ul>
  354.                                 </div>
  355.                                 <div class="d-grid gap-2 mb-4">
  356.                                     <a href="{{ path('home') }}" class="btn btn-success py-2 ubuntu-medium" style="background-color: #197E69;">
  357.                                         <i class="fa-solid fa-arrow-left me-2"></i>Réessayer avec un autre email
  358.                                     </a>
  359.                                 </div>
  360.                                 {% else %}
  361.                                 {% if show_account_missing_client %}
  362.                                     <div class="border border-secondary rounded-3 bg-light p-3 mb-4">
  363.                                         <p class="mb-2"><strong>Compte inexistant</strong></p>
  364.                                         {% if client_create_account_url|default(null) %}
  365.                                             <a href="{{ client_create_account_url }}" class="btn btn-success bg-clover px-4 py-2">Créer mon compte</a>
  366.                                         {% endif %}
  367.                                     </div>
  368.                                 {% endif %}
  370.                                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('request_magic_link') }}">
  372.                                 {% if not hide_login_actions|default(false) %}
  373.                                     <div class="d-grid gap-2 mt-4">
  374.                                         <button type="submit" class="btn btn-success bg-clover w-100 py-2 ubuntu-medium">
  375.                                             Recevoir mon lien de connexion
  376.                                             <i class="fa-solid fa-arrow-right ms-2"></i>
  377.                                         </button>
  378.                                     </div>
  379.                                 {% endif %}
  380.                                 {% endif %}
  381.                             </form>
  383.                             {% if not show_account_missing_client %}
  384.                                 <div class="text-center mt-3">
  385.                                     <span class="fs-14 text-dark">Vous n'avez pas encore de compte ?</span>
  386.                                     <a href="{{ path('home', { show: 'demander-mon-acces' }) }}" class="text-clover text-decoration-underline ubuntu-medium ms-1">Demander mon accès</a>
  387.                                 </div>
  388.                             {% endif %}
  389.                             {% endif %}
  390.                             {% endif %}
  391.                         </div>
  392.                     </div>
  393.                 </div>
  394.                 <div class="col-12 col-md-8 text-white d-flex align-items-center justify-content-center bg-register position-relative">
  395.                     <style>
  396.                         .testimony-card {
  397.                             background-color: rgba(255, 255, 255, 0.2);
  398.                             border-radius: 12px;
  399.                             padding: 16px;
  400.                             transition: all 0.3s ease;
  401.                             color: #ffffff;
  402.                             height: 100%;
  403.                             display: flex;
  404.                             flex-direction: column;
  405.                             position: relative;
  406.                             overflow: hidden;
  407.                             font-family: 'Ubuntu', sans-serif;
  408.                         }
  409.                         .testimony-card .quote-icon {
  410.                             position: absolute;
  411.                             bottom: 10px;
  412.                             right: 15px;
  413.                             font-size: 48px;
  414.                             opacity: 0.2;
  415.                             pointer-events: none;
  416.                         }
  417.                         .testimony-card:hover {
  418.                             background-color: rgba(255, 255, 255, 1);
  419.                             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  420.                             transform: translateY(-2px);
  421.                             color: #004d40;
  422.                         }
  423.                         .testimony-header {
  424.                             display: flex;
  425.                             align-items: center;
  426.                             justify-content: flex-start;
  427.                             margin: 0;
  428.                             padding: 0;
  429.                             opacity: 1 !important;
  430.                             position: relative;
  431.                             z-index: 1;
  432.                             isolation: isolate;
  433.                         }
  434.                         .testimony-name { font-size: 1.1rem; font-weight: 500; margin-bottom: 2px; }
  435.                         .testimony-title { font-size: 0.8rem; opacity: 0.75; margin-bottom: 0; }
  436.                         .testimony-content { flex-grow: 1; padding-bottom: 16px; }
  437.                         .testimony-card-right .testimony-content { padding-bottom: 5px; }
  438.                         .person-info { display: flex; justify-content: flex-end; align-items: center; }
  439.                         .company-logo {
  440.                             width: 90px; height: 90px; object-fit: contain; max-width: 100%;
  441.                             margin: 0; padding: 0; display: block;
  442.                             opacity: 1 !important; position: relative; z-index: 2; will-change: opacity;
  443.                         }
  444.                         .company-logo-white-bg {
  445.                             mix-blend-mode: multiply;
  446.                             filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  447.                             opacity: 1 !important;
  448.                         }
  449.                         .testimony-card:hover .company-logo-white-bg {
  450.                             mix-blend-mode: normal;
  451.                             filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  452.                             opacity: 1 !important;
  453.                         }
  454.                         .testimony-text { font-size: 0.95rem; line-height: 1.6; }
  455.                         .person-photo { width: 50px; height: 50px; object-fit: cover; }
  456.                         .person-name { font-size: 0.9rem; }
  457.                         @media (max-width: 1400px) {
  458.                             .company-logo { width: 75px; height: 75px; }
  459.                             .company-logo[style*="height: 60px"] { height: 50px !important; }
  460.                             .company-logo[style*="height: 70px"] { height: 60px !important; }
  461.                             .logo-bambboo-desktop { width: 130px !important; }
  462.                             .testimony-text { font-size: 0.85rem; }
  463.                             .testimony-name { font-size: 1rem; }
  464.                             .testimony-title { font-size: 0.75rem; }
  465.                             .person-name { font-size: 0.85rem; }
  466.                         }
  467.                     </style>
  468.                     <div class="container-fluid py-5 px-3">
  469.                         <div class="row g-5" style="display: flex;">
  470.                             <div class="col-12 col-lg-6 mb-0" style="display: flex; order: 2; padding-right: 4rem !important;">
  471.                                 <div class="testimony-card" style="width: 100%; display: flex; flex-direction: column;">
  472.                                     <div class="testimony-header">
  473.                                         <img src="https://app.bambboo.com/img/clients/13/68d3edcab816e144331922.png" alt="Logo Orial" class="company-logo">
  474.                                     </div>
  475.                                     <div class="testimony-content">
  476.                                         <div class="mb-2 pb-1">
  477.                                             <p class="testimony-text mb-4">"bambboo a généré un recrutement dès les 15 premiers jours. <strong>L'outil est top</strong>, et l'accompagnement des équipes bambboo est parfait !"</p>
  478.                                             <div class="person-info">
  479.                                                 <div class="text-end me-3">
  480.                                                     <p class="mb-0 ubuntu-medium person-name">Inès Gadouri</p>
  481.                                                     <p class="testimony-title">Directrice des Ressources Humaines</p>
  482.                                                 </div>
  483.                                                 <img src="/img/testimonies/ines-gadouri.jpg" class="rounded-circle person-photo" alt="Inès Gadouri">
  484.                                             </div>
  485.                                         </div>
  486.                                         <div class="mb-2 pb-1" style="margin-top: 2.5rem !important;">
  487.                                             <p class="testimony-text mb-4">"L'utilisation est <strong>hyper simple</strong>."</p>
  488.                                             <div class="person-info">
  489.                                                 <div class="text-end me-3">
  490.                                                     <p class="mb-0 ubuntu-medium person-name">Virginie Cichy</p>
  491.                                                     <p class="testimony-title">Assistante de Direction</p>
  492.                                                 </div>
  493.                                                 <img src="/img/testimonies/virginie-cichy.jpg" class="rounded-circle person-photo" alt="Virginie Cichy">
  494.                                             </div>
  495.                                         </div>
  496.                                         <div style="margin-top: 2.5rem !important;">
  497.                                             <p class="testimony-text mb-4">"J'ai été <strong>recrutée</strong> <strong>grâce à bambboo</strong>. L'expérience candidat est unique et vraiment réussie."</p>
  498.                                             <div class="person-info">
  499.                                                 <div class="text-end me-3">
  500.                                                     <p class="mb-0 ubuntu-medium person-name">Finardie ZABENGONO</p>
  501.                                                     <p class="testimony-title">Financial Accounting Analyst</p>
  502.                                                 </div>
  503.                                                 <img src="/img/testimonies/finardie-zabengono.jpg" class="rounded-circle person-photo" alt="Finardie ZABENGONO">
  504.                                             </div>
  505.                                         </div>
  506.                                         <div style="margin-top: 2.5rem !important;">
  507.                                             <p class="testimony-text mb-4">"<strong>Le matching est très efficace</strong> : bambboo déniche des profils vraiment pertinents."</p>
  508.                                             <div class="person-info">
  509.                                                 <div class="text-end me-3">
  510.                                                     <p class="mb-0 ubuntu-medium person-name">Pierre ALVIACH</p>
  511.                                                     <p class="testimony-title">Expert-comptable</p>
  512.                                                 </div>
  513.                                                 <img src="https://media.licdn.com/dms/image/v2/C5603AQE1bAG-TLW51A/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1584528267524?e=2147483647&v=beta&t=RBwTaKsIKq5MDy2QcRVV3xaxln-7UiKHdIIK_6n2wKg" class="rounded-circle person-photo" alt="Pierre ALVIACH">
  514.                                             </div>
  515.                                         </div>
  516.                                     </div>
  517.                                     <i class="fa-solid fa-quote-right quote-icon"></i>
  518.                                 </div>
  519.                             </div>
  520.                             <div class="col-12 col-lg-6" style="display: flex; flex-direction: column; order: 1; padding-left: 4rem !important;">
  521.                                 <div style="display: flex; flex-direction: column;">
  522.                                     <div class="mb-5">
  523.                                         <div class="testimony-card testimony-card-right" style="display: flex; flex-direction: column;">
  524.                                             <div class="testimony-header">
  525.                                                 <img src="https://app.bambboo.com/img/clients/2/69413bf072237450803776.svg" alt="Logo JobinLive" class="company-logo company-logo-white-bg" style="height: 60px; width: auto; margin-bottom: 0.5rem;">
  526.                                             </div>
  527.                                             <div class="testimony-content">
  528.                                                 <p class="testimony-text mb-3">"L'inscription se fait <strong>en moins d'une minute</strong>, et le reste de l'application est vraiment simple et facile à prendre en main."</p>
  529.                                                 <div class="person-info">
  530.                                                     <div class="text-end me-3">
  531.                                                         <p class="mb-0 ubuntu-medium person-name">Jim Evrard</p>
  532.                                                         <p class="testimony-title">Responsable Recrutement</p>
  533.                                                     </div>
  534.                                                     <img src="/img/testimonies/jim-evrard.jpg" class="rounded-circle person-photo" alt="Jim Evrard">
  535.                                                 </div>
  536.                                             </div>
  537.                                         </div>
  538.                                     </div>
  539.                                     <div class="mb-5">
  540.                                         <div class="testimony-card testimony-card-right" style="display: flex; flex-direction: column;">
  541.                                             <div class="testimony-header">
  542.                                                 <img src="https://app.bambboo.com/img/clients/6/6940355add6d4447963444.png" alt="Logo AssoConnect" class="company-logo company-logo-white-bg">
  543.                                             </div>
  544.                                             <div class="testimony-content">
  545.                                                 <p class="testimony-text mb-3">"<strong>Efficacité prouvée</strong> : bambboo a trouvé notre Product Designer Senior dans mon réseau en quelques semaines."</p>
  546.                                                 <div class="person-info">
  547.                                                     <div class="text-end me-3">
  548.                                                         <p class="mb-0 ubuntu-medium person-name">David Huin</p>
  549.                                                         <p class="testimony-title">Directeur Marketing</p>
  550.                                                     </div>
  551.                                                     <img src="/img/testimonies/david-huin.jpg" class="rounded-circle person-photo" alt="David Huin">
  552.                                                 </div>
  553.                                             </div>
  554.                                         </div>
  555.                                     </div>
  556.                                     <div>
  557.                                         <div class="testimony-card testimony-card-right" style="display: flex; flex-direction: column;">
  558.                                             <div class="testimony-header">
  559.                                                 <img src="https://app.bambboo.com/img/clients/3/69401b953e58b888653989.svg" alt="Logo HumainEA" class="company-logo" style="height: 70px; width: auto;">
  560.                                             </div>
  561.                                             <div class="testimony-content">
  562.                                                 <p class="testimony-text mb-3">"Lorsque je leur partage des offres d'emploi, tous mes contacts me répondent la même chose : <strong>Merci d'avoir pensé à moi !</strong>"</p>
  563.                                                 <div class="person-info">
  564.                                                     <div class="text-end me-3">
  565.                                                         <p class="mb-0 ubuntu-medium person-name">Natacha Cappelier</p>
  566.                                                         <p class="testimony-title">Directrice Générale adjointe</p>
  567.                                                     </div>
  568.                                                     <img src="/img/testimonies/natacha-cappelier.jpg" class="rounded-circle person-photo" alt="Natacha Cappelier">
  569.                                                 </div>
  570.                                             </div>
  571.                                         </div>
  572.                                     </div>
  573.                                 </div>
  574.                             </div>
  575.                         </div>
  576.                     </div>
  577.                 </div>
  578.             </div>
  579.         </div>
  580.     {% endif %}
  582.     <script>
  583.         (function() {
  584.             window.addEventListener('pageshow', function(event) {
  585.                 if (event.persisted) {
  586.                     location.reload();
  587.                 }
  588.             });
  589.         })();
  590.         document.addEventListener('DOMContentLoaded', function() {
  591.             document.querySelectorAll('form').forEach(function(form) {
  592.                 form.addEventListener('submit', function(e) {
  593.                     var btn = e.submitter || form.querySelector('button[type="submit"]');
  594.                     if (btn && !btn.disabled) {
  595.                         btn.disabled = true;
  596.                         btn.setAttribute('data-bb-original-html', btn.innerHTML);
  597.                         btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Chargement...';
  598.                     }
  599.                 });
  600.             });
  601.         });
  602.     </script>
  603. {% endblock %}