templates/application/whileresume/website/articles/list.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/website/layout-social.html.twig' %}
  3. {% macro cta_recruiter_candidate(locale) %}
  4.     <div class="articles-cta-inline">
  5.         <h2 class="articles-cta-title">
  6.             {% if locale == 'fr' %}Talents et entreprises se rencontrent ici.
  7.             {% else %}Where talent meets fast-growing companies.{% endif %}
  8.         </h2>
  10.         <div class="articles-cta-grid">
  11.             {# ── Recruteur ── #}
  12.             <div class="articles-cta-side">
  13.                 <div class="articles-cta-side-head">
  14.                     <span class="articles-cta-side-icon">
  15.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  16.                             <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
  17.                             <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  18.                         </svg>
  19.                     </span>
  20.                     <span class="articles-cta-side-label">{{ locale == 'fr' ? 'Recruteur' : 'Recruiter' }}</span>
  21.                 </div>
  22.                 <h3 class="articles-cta-side-heading">
  23.                     {% if locale == 'fr' %}Recrutez des profils d'exception, plus vite.{% else %}Hire exceptional talent, faster.{% endif %}
  24.                 </h3>
  25.                 <p class="articles-cta-side-text">
  26.                     {% if locale == 'fr' %}Accédez aux meilleurs talents du marché et connectez-vous directement à des candidats qualifiés en quête de leur prochain défi.{% else %}Get access to top market talent and connect directly with qualified candidates ready for their next challenge.{% endif %}
  27.                 </p>
  28.                 <a href="{{ path('whileresume_business_' ~ locale) }}" class="articles-cta-side-btn">
  29.                     {{ locale == 'fr' ? 'Je recrute' : "I'm recruiting" }}
  30.                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  31.                         <line x1="5" y1="12" x2="19" y2="12"/>
  32.                         <polyline points="12 5 19 12 12 19"/>
  33.                     </svg>
  34.                 </a>
  35.             </div>
  37.             {# ── Candidat ── #}
  38.             <div class="articles-cta-side">
  39.                 <div class="articles-cta-side-head">
  40.                     <span class="articles-cta-side-icon">
  41.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  42.                             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
  43.                             <circle cx="12" cy="7" r="4"/>
  44.                         </svg>
  45.                     </span>
  46.                     <span class="articles-cta-side-label">{{ locale == 'fr' ? 'Candidat' : 'Candidate' }}</span>
  47.                 </div>
  48.                 <h3 class="articles-cta-side-heading">
  49.                     {% if locale == 'fr' %}Trouvez le job qui vous ressemble.{% else %}Find the job that fits you.{% endif %}
  50.                 </h3>
  51.                 <p class="articles-cta-side-text">
  52.                     {% if locale == 'fr' %}On vous accompagne dans la recherche de votre poste idéal au sein des entreprises les plus prometteuses du marché.{% else %}We support you in finding your ideal position within the most promising companies on the market.{% endif %}
  53.                 </p>
  54.                 <a href="{% if app.request.locale == "en" %}{{ path('whileresume_homepage') }}{% else %}{{ path('locale_whileresume_homepage',{'_locale':app.request.locale}) }}{% endif %}#register" class="articles-cta-side-btn">
  55.                     {{ locale == 'fr' ? 'Je cherche un job' : "I'm looking for a job" }}
  56.                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  57.                         <line x1="5" y1="12" x2="19" y2="12"/>
  58.                         <polyline points="12 5 19 12 12 19"/>
  59.                     </svg>
  60.                 </a>
  61.             </div>
  62.         </div>
  63.     </div>
  64. {% endmacro %}
  66. {% import _self as ctaMacro %}
  68. {% block title %}{{ page.shortTitle }}{% endblock title %}
  69. {% block description %}{{ page.shortDescription }}{% endblock description %}
  70. {% block robots %}{{ page.robots }}{% endblock robots %}
  71. {% block meta_social %}{{ parent() }}{% include "/vitrine/components/socialmedia.html.twig" with { 'page':page,'social_type':'website' } %}{% endblock meta_social %}
  72. {% block canonical %}{% include "/vitrine/lexend/components/pages/canonical.html.twig" with {'page':page} %}{% endblock canonical %}
  74. {% block css %}
  75.     {{ parent() }}
  76.     <style>
  77.         /* ─── Page liste articles (mêmes patterns que /jobs) ─── */
  78.         .articles-dash{max-width:880px;margin:0 auto}
  79.         .articles-dash-header{margin-bottom:18px}
  80.         .articles-dash-title{font-size:24px;font-weight:800;color:#1E1B2E;line-height:1.2;letter-spacing:-0.02em;margin:0 0 6px}
  81.         @media(min-width:768px){.articles-dash-title{font-size:28px}}
  83.         /* Liste cards (style identique aux jobs-card) */
  84.         .articles-list{display:flex;flex-direction:column;gap:10px}
  85.         .articles-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04);display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s}
  86.         .articles-card:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,58,237,.1);color:inherit}
  87.         .articles-card-logo{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,#EDE9FE,#DDD6FE);display:flex;align-items:center;justify-content:center;color:var(--theme-color,#6C3AED);flex-shrink:0;overflow:hidden}
  88.         .articles-card-logo svg{width:24px;height:24px;opacity:.9}
  89.         .articles-card-info{flex:1;min-width:0}
  90.         .articles-card-title{font-size:14px;font-weight:700;color:#1E1B2E;line-height:1.3;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  91.         .articles-card-meta{font-size:12px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
  92.         .articles-card-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:#D1D5DB;flex-shrink:0}
  93.         .articles-card-badge{font-size:11px;font-weight:600;color:var(--theme-color,#6C3AED);background:#F5F3FF;padding:3px 9px;border-radius:100px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}
  94.         .articles-card-arrow{flex-shrink:0;color:#9CA3AF;transition:color .15s,transform .15s}
  95.         .articles-card:hover .articles-card-arrow{color:var(--theme-color,#6C3AED);transform:translateX(2px)}
  96.         .articles-card-arrow svg{width:18px;height:18px}
  98.         /* État vide */
  99.         .articles-empty{text-align:center;padding:40px 20px;background:#fff;border-radius:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04)}
  100.         .articles-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#F5F3FF;color:var(--theme-color,#6C3AED);margin-bottom:14px}
  101.         .articles-empty-icon svg{width:24px;height:24px}
  102.         .articles-empty-title{font-size:16px;font-weight:700;color:#1E1B2E;margin:0 0 6px}
  103.         .articles-empty-text{font-size:13px;color:#6B7280;margin:0}
  105.         /* Pagination */
  106.         .articles-pagination{margin-top:18px}
  108.         /* ═══ CTA inline (entre articles) ═══ */
  109.         .articles-cta-inline{
  110.             position:relative;
  111.             border-radius:18px;
  112.             padding:24px;
  113.             margin:6px 0;
  114.             background:linear-gradient(135deg,#6C3AED 0%,#8B5CF6 50%,#A78BFA 100%);
  115.             overflow:hidden;
  116.             box-shadow:0 10px 30px -8px rgba(108,58,237,.35);
  117.         }
  118.         .articles-cta-inline::before{
  119.             content:"";
  120.             position:absolute;
  121.             top:-40px;right:-40px;
  122.             width:180px;height:180px;
  123.             background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);
  124.             pointer-events:none;
  125.         }
  126.         .articles-cta-inline::after{
  127.             content:"";
  128.             position:absolute;
  129.             bottom:-60px;left:-60px;
  130.             width:200px;height:200px;
  131.             background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
  132.             pointer-events:none;
  133.         }
  134.         .articles-cta-eyebrow{
  135.             display:inline-flex;align-items:center;gap:6px;
  136.             font-size:11px;font-weight:700;
  137.             color:#fff;
  138.             text-transform:uppercase;letter-spacing:.1em;
  139.             background:rgba(255,255,255,.18);
  140.             padding:5px 12px;border-radius:100px;
  141.             margin-bottom:12px;
  142.             backdrop-filter:blur(10px);
  143.             -webkit-backdrop-filter:blur(10px);
  144.             position:relative;z-index:2;
  145.         }
  146.         .articles-cta-eyebrow svg{width:12px;height:12px}
  147.         .articles-cta-title{
  148.             font-size:20px;font-weight:800;
  149.             color:#fff;
  150.             line-height:1.25;letter-spacing:-0.01em;
  151.             margin:0 0 18px;
  152.             position:relative;z-index:2;
  153.         }
  154.         @media(min-width:768px){.articles-cta-title{font-size:24px}}
  156.         .articles-cta-grid{
  157.             display:grid;
  158.             grid-template-columns:1fr;
  159.             gap:12px;
  160.             position:relative;z-index:2;
  161.         }
  162.         @media(min-width:640px){.articles-cta-grid{grid-template-columns:1fr 1fr;gap:14px}}
  164.         .articles-cta-side{
  165.             background:rgba(255,255,255,.97);
  166.             border-radius:14px;
  167.             padding:18px;
  168.             display:flex;flex-direction:column;
  169.             transition:transform .2s,box-shadow .2s;
  170.         }
  171.         .articles-cta-side:hover{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(0,0,0,.18)}
  173.         .articles-cta-side-head{
  174.             display:flex;align-items:center;gap:10px;
  175.             margin-bottom:10px;
  176.         }
  177.         .articles-cta-side-icon{
  178.             width:38px;height:38px;border-radius:10px;
  179.             display:inline-flex;align-items:center;justify-content:center;
  180.             background:linear-gradient(135deg,#EDE9FE,#DDD6FE);
  181.             color:var(--theme-color,#6C3AED);
  182.             flex-shrink:0;
  183.         }
  184.         .articles-cta-side-icon svg{width:18px;height:18px}
  185.         .articles-cta-side-label{
  186.             font-size:11px;font-weight:700;
  187.             color:var(--theme-color,#6C3AED);
  188.             text-transform:uppercase;letter-spacing:.08em;
  189.             margin:0;
  190.         }
  191.         .articles-cta-side-heading{
  192.             font-size:15px;font-weight:700;
  193.             color:#1E1B2E;
  194.             line-height:1.3;
  195.             margin:0 0 8px;
  196.         }
  197.         .articles-cta-side-text{
  198.             font-size:13px;color:#6B7280;
  199.             line-height:1.5;
  200.             margin:0 0 14px;
  201.             flex:1;
  202.         }
  203.         .articles-cta-side-btn{
  204.             display:inline-flex;align-items:center;justify-content:center;gap:6px;
  205.             background:var(--theme-color,#6C3AED);
  206.             color:#fff;text-decoration:none;
  207.             padding:11px 16px;
  208.             border-radius:10px;
  209.             font-size:13px;font-weight:700;
  210.             letter-spacing:.01em;
  211.             transition:background .15s,transform .15s;
  212.         }
  213.         .articles-cta-side-btn:hover{
  214.             background:#5B21B6;color:#fff;
  215.             transform:translateX(2px);
  216.         }
  217.         .articles-cta-side-btn svg{width:14px;height:14px;transition:transform .15s}
  218.         .articles-cta-side-btn:hover svg{transform:translateX(2px)}
  219.     </style>
  220. {% endblock css %}
  222. {% block body %}
  223.     <div class="articles-dash">
  225.         {# ═══ Header ═══ #}
  226.         <div class="articles-dash-header">
  227.             <h1 class="articles-dash-title">{{ page.title }}</h1>
  228.         </div>
  230.         {# ═══ Liste articles ═══ #}
  231.         {% if pagination|length > 0 %}
  232.             <div class="articles-list">
  233.                 {% for article in pagination %}
  235.                     {# ── URL article ── #}
  236.                     {% set prefix = "" %}
  237.                     {% set urlArticle = path('blog_article',{'slug': article.slug})  %}
  238.                     {% if app.request.locale != default_locale %}
  239.                         {% set urlArticle = path('locale_blog_article',{'_locale':app.request.locale,'slug': article.slug})  %}
  240.                         {% set prefix = "/" ~ app.request.locale %}
  241.                     {% endif %}
  242.                     {% if article.pageslug3 is not empty %}
  243.                         {% set urlArticle = prefix ~ '/' ~ article.pageslug ~ '/' ~  article.pageslug2 ~ '/' ~ article.pageslug3  %}
  244.                     {% elseif article.pageslug2 is not empty %}
  245.                         {% set urlArticle = prefix ~ '/' ~ article.pageslug ~ '/' ~  article.pageslug2  %}
  246.                     {% elseif article.pageslug is not empty %}
  247.                         {% set urlArticle = prefix ~ '/' ~ article.pageslug  %}
  248.                     {% endif %}
  250.                     <a href="{{ urlArticle }}" class="articles-card">
  251.                         <div class="articles-card-logo">
  252.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  253.                                 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
  254.                                 <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  255.                             </svg>
  256.                         </div>
  258.                         <div class="articles-card-info">
  259.                             <h2 class="articles-card-title">{{ article.title }}</h2>
  260.                             <div class="articles-card-meta">
  261.                                 {#<span>{{ article.publishedAt|date("d M Y") }}</span> <span class="articles-card-meta-sep"></span>#}
  262.                                 {% if article.subtitle is not empty %}
  263.                                     <span>{{ article.subtitle|length > 60 ? article.subtitle|slice(0,60) ~ '…' : article.subtitle }}</span>
  264.                                 {% endif %}
  265.                             </div>
  266.                         </div>
  268.                         <span class="articles-card-badge">{{ "Je lis l'article"|translateLocale(arrayTranslate) }}</span>
  270.                         <span class="articles-card-arrow">
  271.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  272.                                 <polyline points="9 18 15 12 9 6"/>
  273.                             </svg>
  274.                         </span>
  275.                     </a>
  277.                     {# ═══ CTA inline après le 3e article ═══ #}
  278.                     {% if loop.index == 3 and getEnv("KERNEL_APPLICATION") == "whileresume" and app.request.locale in ['fr','en'] %}
  279.                         {% if app.user is null %}
  280.                         {{ ctaMacro.cta_recruiter_candidate(app.request.locale) }}
  281.                         {% endif %}
  282.                     {% endif %}
  283.                 {% endfor %}
  284.             </div>
  286.             {# Pagination #}
  287.             <div class="articles-pagination">
  288.                 {{ knp_pagination_render(pagination,'application/whileresume/website/pagination/pagination.html.twig') }}
  289.             </div>
  290.         {% else %}
  291.             <div class="articles-empty">
  292.                 <div class="articles-empty-icon">
  293.                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  294.                         <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
  295.                         <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  296.                     </svg>
  297.                 </div>
  298.                 <p class="articles-empty-title">{{ "Aucun article"|translateLocale(arrayTranslate) }}</p>
  299.             </div>
  300.         {% endif %}
  302.         {# ═══ CTA Recruteur / Candidat (en bas, si moins de 3 articles → fallback) ═══ #}
  303.         {% if pagination|length > 0 and pagination|length < 3 and getEnv("KERNEL_APPLICATION") == "whileresume" and app.request.locale in ['fr','en'] %}
  304.             {% if app.user is null %}
  305.             <div class="mt-3">
  306.                 {{ ctaMacro.cta_recruiter_candidate(app.request.locale) }}
  307.             </div>
  308.             {% endif %}
  309.         {% endif %}
  311.     </div>
  312. {% endblock body %}