templates/application/whileresume/website/components/footer.html.twig line 7

Open in your IDE?
  1. {% set _locale = app.request.locale %}
  2. {% set _isFr = _locale == 'fr' %}
  4. {# Données dynamiques #}
  5. {% set footerArticles = getFooterArticles(_locale, 5) %}
  6. {% set footerLandingJobs = getFooterFeaturedLandingJobs(_locale, 5) %}
  7. {% set footerJobsCities = getFooterJobsCities(_locale, 6) %}
  8. {% set footerEnterprisesCities = getFooterEnterprisesCities(_locale, 6) %}
  10. <style>
  11.     /* ---------- Footer WhileResume ---------- */
  12.     .whr-footer {
  13.         margin-top: 32px;
  14.         padding: 36px 24px 24px;
  15.         background: #F9FAFD;
  16.         border-radius: 16px;
  17.         color: #2c2c46;
  18.         /* Pleine largeur quand le footer est en dehors de .middle-sidebar-left */
  19.         width: auto;
  20.         max-width: none;
  21.         margin-left: 16px;
  22.         margin-right: 16px;
  23.     }
  24.     .theme-dark .whr-footer {
  25.         background: #2a2a3c;
  26.         color: #e9e9ef;
  27.     }
  29.     /* Si le footer reste dans .middle-sidebar-left (fallback ancien layout) */
  30.     .middle-sidebar-left .whr-footer {
  31.         width: 100%;
  32.         margin-left: 0;
  33.         margin-right: 0;
  34.     }
  36.     /* Stores en haut de la col 1 */
  37.     .whr-footer .whr-stores {
  38.         display: flex;
  39.         flex-direction: column;
  40.         gap: 8px;
  41.         margin-bottom: 18px;
  42.     }
  43.     .whr-footer .whr-store-link {
  44.         display: inline-flex;
  45.         align-items: center;
  46.         gap: 10px;
  47.         padding: 8px 14px;
  48.         background: #111;
  49.         color: #fff !important;
  50.         border-radius: 10px;
  51.         font-size: 12px;
  52.         font-weight: 600;
  53.         text-decoration: none !important;
  54.         line-height: 1.2;
  55.         transition: transform .15s ease, background .2s ease;
  56.         max-width: 170px;
  57.     }
  58.     .whr-footer .whr-store-link:hover {
  59.         background: #2c2c46;
  60.         transform: translateY(-1px);
  61.     }
  62.     .whr-footer .whr-store-link small {
  63.         display: block;
  64.         font-weight: 400;
  65.         font-size: 10px;
  66.         opacity: .7;
  67.     }
  68.     .whr-footer .whr-store-link strong { font-size: 13px; display: block; }
  70.     /* Colonnes */
  71.     .whr-footer .whr-foot-col h4 {
  72.         font-size: 13px;
  73.         font-weight: 700;
  74.         margin: 0 0 14px 0;
  75.         color: inherit;
  76.         text-transform: uppercase;
  77.         letter-spacing: .3px;
  78.     }
  79.     .whr-footer .whr-foot-col ul {
  80.         list-style: none;
  81.         padding: 0;
  82.         margin: 0;
  83.         font-size: 13px;
  84.     }
  85.     .whr-footer .whr-foot-col ul li { margin-bottom: 10px; }
  86.     .whr-footer .whr-foot-col a {
  87.         color: inherit;
  88.         opacity: .75;
  89.         text-decoration: none;
  90.         transition: opacity .2s ease, color .2s ease;
  91.     }
  92.     .whr-footer .whr-foot-col a:hover { opacity: 1; color: var(--theme-color, #6C3AED); }
  93.     .whr-footer .whr-foot-empty {
  94.         font-size: 12px;
  95.         opacity: .5;
  96.         font-style: italic;
  97.     }
  99.     /* Liste avec icônes (col 1) */
  100.     .whr-footer .whr-foot-action-links a {
  101.         display: inline-flex;
  102.         align-items: center;
  103.         gap: 8px;
  104.     }
  105.     .whr-footer .whr-foot-action-links a i {
  106.         font-size: 14px;
  107.         opacity: .7;
  108.         width: 16px;
  109.         text-align: center;
  110.     }
  112.     /* Mini-icône ville pour cols 3 et 4 */
  113.     .whr-footer .whr-foot-col .whr-city-link {
  114.         display: inline-flex;
  115.         align-items: center;
  116.         gap: 6px;
  117.     }
  118.     .whr-footer .whr-foot-col .whr-city-link .whr-city-icon {
  119.         font-size: 14px;
  120.         line-height: 1;
  121.         display: inline-block;
  122.         width: 18px;
  123.         text-align: center;
  124.         opacity: .85;
  125.     }
  127.     /* Grille principale : 1 col → 2 cols → 5 cols */
  128.     .whr-footer .whr-foot-grid {
  129.         display: grid;
  130.         gap: 28px;
  131.         grid-template-columns: 1fr;
  132.     }
  133.     @media (min-width: 576px) {
  134.         .whr-footer .whr-foot-grid { grid-template-columns: 1fr 1fr; }
  135.     }
  137.     @media (min-width: 992px) {
  138.         .whr-footer .whr-foot-grid {
  139.             grid-template-columns: repeat(5, 1fr);
  140.             gap: 32px;
  141.         }
  142.     }
  144.     /* Bottom bar */
  145.     .whr-footer .whr-foot-bottom {
  146.         margin-top: 32px;
  147.         padding-top: 20px;
  148.         border-top: 1px solid rgba(0,0,0,.08);
  149.         display: flex;
  150.         flex-direction: column;
  151.         gap: 14px;
  152.         align-items: center;
  153.         text-align: center;
  154.     }
  155.     .theme-dark .whr-footer .whr-foot-bottom { border-top-color: rgba(255,255,255,.1); }
  157.     @media (min-width: 768px) {
  158.         .whr-footer .whr-foot-bottom {
  159.             flex-direction: row;
  160.             justify-content: space-between;
  161.             text-align: left;
  162.         }
  163.     }
  165.     .whr-footer .whr-foot-copy {
  166.         display: inline-flex;
  167.         align-items: center;
  168.         gap: 8px;
  169.         font-size: 12px;
  170.         opacity: .7;
  171.         margin: 0;
  172.     }
  173.     .whr-footer .whr-foot-copy img.whr-favicon {
  174.         width: 18px;
  175.         height: 18px;
  176.         border-radius: 4px;
  177.         flex-shrink: 0;
  178.     }
  180.     .whr-footer .whr-foot-legal {
  181.         display: flex;
  182.         flex-wrap: wrap;
  183.         gap: 6px 16px;
  184.         justify-content: center;
  185.         font-size: 12px;
  186.     }
  187.     .whr-footer .whr-foot-legal a {
  188.         color: inherit;
  189.         opacity: .75;
  190.         text-decoration: none;
  191.     }
  192.     .whr-footer .whr-foot-legal a:hover { opacity: 1; }
  193.     .whr-footer .whr-foot-legal .whr-admin-link { color: #e74c3c !important; opacity: 1; }
  195.     .whr-footer .whr-foot-social {
  196.         display: flex;
  197.         flex-wrap: wrap;
  198.         gap: 6px;
  199.         list-style: none;
  200.         padding: 0;
  201.         margin: 0;
  202.     }
  203.     .whr-footer .whr-foot-social a {
  204.         width: 32px; height: 32px;
  205.         border-radius: 8px;
  206.         background: #fff;
  207.         display: inline-flex;
  208.         align-items: center;
  209.         justify-content: center;
  210.         color: #2c2c46;
  211.         text-decoration: none !important;
  212.         transition: background .2s ease, color .2s ease, transform .15s ease;
  213.         box-shadow: 0 1px 2px rgba(0,0,0,.04);
  214.     }
  215.     .whr-footer .whr-foot-social a:hover {
  216.         background: var(--theme-color, #6C3AED);
  217.         color: #fff;
  218.         transform: translateY(-1px);
  219.     }
  220.     .theme-dark .whr-footer .whr-foot-social a {
  221.         background: #34344a;
  222.         color: #fff;
  223.         box-shadow: none;
  224.     }
  225.     .whr-footer .whr-foot-social i { font-size: 14px; }
  227.     @media (max-width: 575.98px) {
  228.         .whr-footer {
  229.             padding: 24px 18px 20px;
  230.             margin-left: 8px;
  231.             margin-right: 8px;
  232.         }
  233.     }
  234. </style>
  236. <footer class="whr-footer" role="contentinfo">
  238.     {# === Grille principale 5 colonnes === #}
  239.     <div class="whr-foot-grid">
  241.         {# ===== Col 1 : Mon compte / Commencer ici ===== #}
  242.         {% if _isFr %}
  243.             {% set _ios = ios_fr %}
  244.             {% set _android = android_fr %}
  245.         {% else %}
  246.             {% set _ios = ios_us %}
  247.             {% set _android = android_us %}
  248.         {% endif %}
  250.         <div class="whr-foot-col whr-foot-col-action">
  251.             {% if connectUser %}
  252.                 <h4>{{ 'layout.footer.my_account'|trans({}, 'whr-public')|default('Mon compte') }}</h4>
  253.             {% else %}
  254.                 <h4>{{ 'layout.footer.start_here'|trans({}, 'whr-public')|default('Commencer ici') }}</h4>
  255.             {% endif %}
  257.             <div class="whr-stores">
  258.                 {% if _ios %}
  259.                     <a href="{{ _ios }}" class="whr-store-link" target="_blank" rel="noopener" aria-label="App Store">
  260.                         <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
  261.                             <path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/>
  262.                         </svg>
  263.                         <span>
  264.                             <small>{{ 'layout.download_on'|trans({}, 'whr-public')|default('Télécharger sur') }}</small>
  265.                             <strong>App Store</strong>
  266.                         </span>
  267.                     </a>
  268.                 {% endif %}
  269.                 {% if _android %}
  270.                     <a href="{{ _android }}" class="whr-store-link" target="_blank" rel="noopener" aria-label="Google Play">
  271.                         <svg width="18" height="18" viewBox="0 0 512 512" aria-hidden="true">
  272.                             <path style="fill:#3A9BC8;" d="M225.656,256.052L14.016,485.451l-6.442,7.052c-4.005-5.919-6.704-12.972-7.313-20.806C0.087,470.305,0,468.91,0,467.518V44.499c0-9.488,2.873-18.02,7.574-24.987L225.656,256.052z"/>
  273.                             <path style="fill:#9BCD83;" d="M320.811,152.8l-95.155,103.253L7.574,19.512C19.936,1.405,45.183-6.342,66.6,6.02L320.811,152.8z"/>
  274.                             <path style="fill:#EEB84C;" d="M455.056,257.27c-0.348,14.453-7.748,28.904-22.113,37.174l-112.132,64.771l-95.155-103.163L320.811,152.8l70.518,40.745l41.614,24.026C448.178,226.366,455.579,241.861,455.056,257.27z"/>
  275.                             <path style="fill:#B43F70;" d="M7.591,492.492c12.368,18.116,37.599,25.838,58.976,13.496L320.775,359.22l-95.156-103.209L7.591,492.492z"/>
  276.                         </svg>
  277.                         <span>
  278.                             <small>{{ 'layout.available_on'|trans({}, 'whr-public')|default('Disponible sur') }}</small>
  279.                             <strong>Google Play</strong>
  280.                         </span>
  281.                     </a>
  282.                 {% endif %}
  283.             </div>
  285.             <ul class="whr-foot-action-links">
  286.                 <li>
  287.                     <a href="{{ path('whileresume_homepage') }}">
  288.                         <i class="feather-flag"></i>
  289.                         English
  290.                     </a>
  291.                 </li>
  292.                 <li>
  293.                     <a href="{{ path('locale_whileresume_homepage',{'_locale':'fr'}) }}">
  294.                         <i class="feather-flag"></i>
  295.                         Français
  296.                     </a>
  297.                 </li>
  298.             </ul>
  299.         </div>
  301.         {# ===== Col 2 : Articles récents (featured) ===== #}
  302.         <div class="whr-foot-col">
  303.             <h4>{{ 'layout.footer.latest_articles'|trans({}, 'whr-public')|default('Articles récents') }}</h4>
  304.             {% if footerArticles is not empty %}
  305.                 <ul>
  306.                     {% for article in footerArticles %}
  307.                         <li>
  308.                             <a href="{% if _isFr %}{{ path('locale_cvs_website_article', {'_locale': _locale, 'slug': article.slug}) }}{% else %}{{ path('cvs_website_article', {'slug': article.slug}) }}{% endif %}"
  309.                                title="{{ article.title }}">
  310.                                 {{ article.shortTitle ?: cleanSubstr(article.title, 45) }}
  311.                             </a>
  312.                         </li>
  313.                     {% endfor %}
  314.                 </ul>
  315.             {% else %}
  316.                 <p class="whr-foot-empty">{{ 'layout.footer.coming_soon'|trans({}, 'whr-public')|default('Bientôt disponible') }}</p>
  317.             {% endif %}
  318.         </div>
  320.         {# ===== Col 3 : Emplois par ville ===== #}
  321.         <div class="whr-foot-col">
  322.             <h4>{{ 'layout.footer.jobs_by_city'|trans({}, 'whr-public')|default('Emplois par ville') }}</h4>
  323.             {% if footerJobsCities is not empty %}
  324.                 <ul>
  325.                     {% for city in footerJobsCities %}
  326.                         <li>
  327.                             <a class="whr-city-link"
  328.                                href="{% if _isFr %}{{ path('locale_cvs_application_jobs_filter', {'_locale': _locale, 'slug': city.slug}) }}{% else %}{{ path('cvs_application_jobs_filter', {'slug': city.slug}) }}{% endif %}"
  329.                                title="{{ city.shortTitle ?: city.label }}">
  330.                                 {% if city.icon %}
  331.                                     <span class="whr-city-icon">{{ city.icon }}</span>
  332.                                 {% else %}
  333.                                     <i class="feather-map-pin whr-city-icon"></i>
  334.                                 {% endif %}
  335.                                 <span>{{ city.label }}</span>
  336.                             </a>
  337.                         </li>
  338.                     {% endfor %}
  339.                 </ul>
  340.             {% else %}
  341.                 <p class="whr-foot-empty">{{ 'layout.footer.coming_soon'|trans({}, 'whr-public')|default('Bientôt disponible') }}</p>
  342.             {% endif %}
  343.         </div>
  345.         {# ===== Col 4 : Entreprises par ville ===== #}
  346.         <div class="whr-foot-col">
  347.             <h4>{{ 'layout.footer.companies_by_city'|trans({}, 'whr-public')|default('Entreprises par ville') }}</h4>
  348.             {% if footerEnterprisesCities is not empty %}
  349.                 <ul>
  350.                     {% for city in footerEnterprisesCities %}
  351.                         <li>
  352.                             <a class="whr-city-link"
  353.                                href="{% if _isFr %}{{ path('locale_cvs_application_companies_filter', {'_locale': _locale, 'slug': city.slug}) }}{% else %}{{ path('cvs_application_companies_filter', {'slug': city.slug}) }}{% endif %}"
  354.                                title="{{ city.shortTitle ?: city.label }}">
  355.                                 {% if city.icon %}
  356.                                     <span class="whr-city-icon">{{ city.icon }}</span>
  357.                                 {% else %}
  358.                                     <i class="feather-map-pin whr-city-icon"></i>
  359.                                 {% endif %}
  360.                                 <span>{{ city.label }}</span>
  361.                             </a>
  362.                         </li>
  363.                     {% endfor %}
  364.                 </ul>
  365.             {% else %}
  366.                 <p class="whr-foot-empty">{{ 'layout.footer.coming_soon'|trans({}, 'whr-public')|default('Bientôt disponible') }}</p>
  367.             {% endif %}
  368.         </div>
  370.         {# ===== Col 5 : Pages SEO (LandingJobs featured) =====
  371.              ⚠️ Route 'cvs_application_landing_jobs_show' non trouvée dans tes
  372.              routes.yml (peut-être dans whileresume_resume.yml ?). Adapte si besoin. #}
  373.         <div class="whr-foot-col">
  374.             <h4>{{ 'layout.footer.featured_pages'|trans({}, 'whr-public')|default('À découvrir') }}</h4>
  375.             {% if footerLandingJobs is not empty %}
  376.                 <ul>
  377.                     {% for landing in footerLandingJobs %}
  378.                         <li>
  379.                             <a href="{% if _isFr %}{{ path('locale_whileresume_homepage_landing', {'_locale': _locale, 'slug': landing.slug}) }}{% else %}{{ path('whileresume_homepage_landing', {'slug': landing.slug}) }}{% endif %}">
  380.                                 {{ landing.title }}
  381.                             </a>
  382.                         </li>
  383.                     {% endfor %}
  384.                 </ul>
  385.             {% endif %}
  386.         </div>
  387.     </div>
  389.     {# === Bas du footer === #}
  390.     <div class="whr-foot-bottom">
  391.         <p class="whr-foot-copy">
  392.             {% if favicon %}
  393.                 <img src="{{ favicon }}" alt="" class="whr-favicon" />
  394.             {% endif %}
  395.             <span>&copy; {{ "now"|date('Y') }} {{ websitename }}. {{ 'layout.rights_reserved'|trans({}, 'whr-public')|default('Tous droits réservés.') }}</span>
  396.         </p>
  398.         <div class="whr-foot-legal">
  399.             {% set menuFooter = getMenuWebsiteLocaleArray(_locale, "footer", connectUser) %}
  400.             {% if menuFooter is not empty %}
  401.                 {% for m in menuFooter %}
  402.                     <a href="{{ m.link }}"
  403.                        aria-label="{{ m.title }}"
  404.                        title="{{ m.title }}"
  405.                        {% if m.targetBlank == 1 %}target="_blank" rel="noreferrer"{% endif %}>
  406.                         {{ m.title }}
  407.                     </a>
  408.                 {% endfor %}
  409.             {% endif %}
  410.             {% if app.user is not null and is_granted("ROLE_SUPER_ADMIN") %}
  411.                 <a href="{{ path('backoffice_dashboard') }}" class="whr-admin-link" title="Administration">
  412.                     <i class="feather-settings"></i> Administration
  413.                 </a>
  414.             {% endif %}
  415.         </div>
  417.         <ul class="whr-foot-social">
  418.             {% if facebook %}
  419.                 <li><a href="{{ facebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="feather-facebook"></i></a></li>
  420.             {% endif %}
  421.             {% if twitter %}
  422.                 <li><a href="{{ twitter }}" target="_blank" rel="noopener" aria-label="X / Twitter"><i class="feather-twitter"></i></a></li>
  423.             {% endif %}
  424.             {% if instagram %}
  425.                 <li><a href="{{ instagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="feather-instagram"></i></a></li>
  426.             {% endif %}
  427.             {% if linkedin %}
  428.                 <li><a href="{{ linkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="feather-linkedin"></i></a></li>
  429.             {% endif %}
  430.             {% if youtube %}
  431.                 <li><a href="{{ youtube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="feather-youtube"></i></a></li>
  432.             {% endif %}
  433.         </ul>
  434.     </div>
  436. </footer>