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

Open in your IDE?
  1. {# =========================================================
  2.    FOOTER WhileResume — thème Sociala (v2)
  3.    - Fond #F9FAFD
  4.    - 5 colonnes : Brand+Stores | Outils | Entreprises | Blog | Suivez-nous
  5.    - Favicon en petit à côté du copyright
  6.    - Responsive : 1 col mobile → 2 cols sm → 5 cols lg
  7.    - Compatible theme-dark Sociala
  8.    ========================================================= #}
  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.     }
  19.     .theme-dark .whr-footer {
  20.         background: #2a2a3c;
  21.         color: #e9e9ef;
  22.     }
  24.     /* Stores (en haut de la col d'action) */
  25.     .whr-footer .whr-stores {
  26.         display: flex;
  27.         flex-direction: column;
  28.         gap: 8px;
  29.         margin-bottom: 18px;
  30.     }
  31.     .whr-footer .whr-store-link {
  32.         display: inline-flex;
  33.         align-items: center;
  34.         gap: 10px;
  35.         padding: 8px 14px;
  36.         background: #111;
  37.         color: #fff !important;
  38.         border-radius: 10px;
  39.         font-size: 12px;
  40.         font-weight: 600;
  41.         text-decoration: none !important;
  42.         line-height: 1.2;
  43.         transition: transform .15s ease, background .2s ease;
  44.         max-width: 170px;
  45.     }
  46.     .whr-footer .whr-store-link:hover {
  47.         background: #2c2c46;
  48.         transform: translateY(-1px);
  49.     }
  50.     .whr-footer .whr-store-link small {
  51.         display: block;
  52.         font-weight: 400;
  53.         font-size: 10px;
  54.         opacity: .7;
  55.     }
  56.     .whr-footer .whr-store-link strong { font-size: 13px; display: block; }
  58.     /* Colonnes de liens */
  59.     .whr-footer .whr-foot-col h4 {
  60.         font-size: 13px;
  61.         font-weight: 700;
  62.         margin: 0 0 14px 0;
  63.         color: inherit;
  64.         text-transform: uppercase;
  65.         letter-spacing: .3px;
  66.     }
  67.     .whr-footer .whr-foot-col ul,
  68.     .whr-footer .whr-foot-col p {
  69.         list-style: none;
  70.         padding: 0;
  71.         margin: 0;
  72.         font-size: 13px;
  73.     }
  74.     .whr-footer .whr-foot-col ul li { margin-bottom: 10px; }
  75.     .whr-footer .whr-foot-col a {
  76.         color: inherit;
  77.         opacity: .75;
  78.         text-decoration: none;
  79.         transition: opacity .2s ease, color .2s ease;
  80.     }
  81.     .whr-footer .whr-foot-col a:hover { opacity: 1; color: var(--theme-color, #6C3AED); }
  83.     /* Liens d'action de la col 1 (avec icônes) */
  84.     .whr-footer .whr-foot-action-links {
  85.         list-style: none;
  86.         padding: 0;
  87.         margin: 0;
  88.     }
  89.     .whr-footer .whr-foot-action-links li {
  90.         margin-bottom: 8px;
  91.     }
  92.     .whr-footer .whr-foot-action-links a {
  93.         display: inline-flex;
  94.         align-items: center;
  95.         gap: 8px;
  96.         font-size: 13px;
  97.         color: inherit;
  98.         opacity: .75;
  99.         text-decoration: none;
  100.         transition: opacity .2s ease, color .2s ease;
  101.     }
  102.     .whr-footer .whr-foot-action-links a:hover {
  103.         opacity: 1;
  104.         color: var(--theme-color, #6C3AED);
  105.     }
  106.     .whr-footer .whr-foot-action-links a i {
  107.         font-size: 14px;
  108.         opacity: .7;
  109.         width: 16px;
  110.         text-align: center;
  111.     }
  113.     /* Réseaux sociaux dans la 5e colonne */
  114.     .whr-footer .whr-foot-social {
  115.         display: flex;
  116.         flex-wrap: wrap;
  117.         gap: 8px;
  118.         list-style: none;
  119.         padding: 0;
  120.         margin: 0;
  121.     }
  122.     .whr-footer .whr-foot-social a {
  123.         width: 36px; height: 36px;
  124.         border-radius: 10px;
  125.         background: #fff;
  126.         display: inline-flex;
  127.         align-items: center;
  128.         justify-content: center;
  129.         color: #2c2c46;
  130.         text-decoration: none !important;
  131.         transition: background .2s ease, color .2s ease, transform .15s ease;
  132.         box-shadow: 0 1px 2px rgba(0,0,0,.04);
  133.     }
  134.     .whr-footer .whr-foot-social a:hover {
  135.         background: var(--theme-color, #6C3AED);
  136.         color: #fff;
  137.         transform: translateY(-2px);
  138.     }
  139.     .theme-dark .whr-footer .whr-foot-social a {
  140.         background: #34344a;
  141.         color: #fff;
  142.         box-shadow: none;
  143.     }
  144.     .whr-footer .whr-foot-social i { font-size: 16px; }
  146.     /* Grille principale : 1 col → 2 cols → 5 cols */
  147.     .whr-footer .whr-foot-grid {
  148.         display: grid;
  149.         gap: 28px;
  150.         grid-template-columns: 1fr;
  151.     }
  152.     @media (min-width: 576px) {
  153.         .whr-footer .whr-foot-grid { grid-template-columns: 1fr 1fr; }
  154.     }
  155.     @media (min-width: 992px) {
  156.         .whr-footer .whr-foot-grid {
  157.             grid-template-columns: repeat(5, 1fr);
  158.             gap: 32px;
  159.         }
  160.     }
  162.     /* Bottom bar */
  163.     .whr-footer .whr-foot-bottom {
  164.         margin-top: 32px;
  165.         padding-top: 20px;
  166.         border-top: 1px solid rgba(0,0,0,.08);
  167.         display: flex;
  168.         flex-direction: column;
  169.         gap: 14px;
  170.         align-items: center;
  171.         text-align: center;
  172.     }
  173.     .theme-dark .whr-footer .whr-foot-bottom { border-top-color: rgba(255,255,255,.1); }
  175.     @media (min-width: 768px) {
  176.         .whr-footer .whr-foot-bottom {
  177.             flex-direction: row;
  178.             justify-content: space-between;
  179.             text-align: left;
  180.         }
  181.     }
  183.     .whr-footer .whr-foot-copy {
  184.         display: inline-flex;
  185.         align-items: center;
  186.         gap: 8px;
  187.         font-size: 12px;
  188.         opacity: .7;
  189.         margin: 0;
  190.     }
  191.     .whr-footer .whr-foot-copy img.whr-favicon {
  192.         width: 18px;
  193.         height: 18px;
  194.         border-radius: 4px;
  195.         flex-shrink: 0;
  196.     }
  198.     .whr-footer .whr-foot-legal {
  199.         display: flex;
  200.         flex-wrap: wrap;
  201.         gap: 6px 16px;
  202.         justify-content: center;
  203.         font-size: 12px;
  204.     }
  205.     .whr-footer .whr-foot-legal a {
  206.         color: inherit;
  207.         opacity: .75;
  208.         text-decoration: none;
  209.     }
  210.     .whr-footer .whr-foot-legal a:hover { opacity: 1; }
  211.     .whr-footer .whr-foot-legal .whr-admin-link { color: #e74c3c !important; opacity: 1; }
  213.     /* Sociala : footer dans .middle-sidebar-left */
  214.     .middle-sidebar-left .whr-footer { width: 100%; }
  216.     /* Padding réduit sur mobile */
  217.     @media (max-width: 575.98px) {
  218.         .whr-footer { padding: 24px 18px 20px; }
  219.     }
  220. </style>
  222. <footer class="whr-footer" role="contentinfo">
  224.     {# === Grille principale 5 colonnes === #}
  225.     <div class="whr-foot-grid">
  227.         {# --- Col 1 : Stores + liens d'action (varie selon connexion) --- #}
  228.         {% if app.request.locale == 'fr' %}
  229.             {% set _ios = ios_fr %}
  230.             {% set _android = android_fr %}
  231.         {% else %}
  232.             {% set _ios = ios_us %}
  233.             {% set _android = android_us %}
  234.         {% endif %}
  236.         <div class="whr-foot-col whr-foot-col-action">
  237.             {% if connectUser %}
  238.                 <h4>{{ 'layout.footer.my_account'|trans({}, 'whr-public')|default('Mon compte') }}</h4>
  239.             {% else %}
  240.                 <h4>{{ 'layout.footer.start_here'|trans({}, 'whr-public')|default('Commencer ici') }}</h4>
  241.             {% endif %}
  243.             {# Stores en haut #}
  244.             <div class="whr-stores">
  245.                 {% if _ios %}
  246.                     <a href="{{ _ios }}" class="whr-store-link" target="_blank" rel="noopener" aria-label="App Store">
  247.                         <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
  248.                             <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"/>
  249.                         </svg>
  250.                         <span>
  251.                             <small>{{ 'layout.download_on'|trans({}, 'whr-public')|default('Télécharger sur') }}</small>
  252.                             <strong>App Store</strong>
  253.                         </span>
  254.                     </a>
  255.                 {% endif %}
  256.                 {% if _android %}
  257.                     <a href="{{ _android }}" class="whr-store-link" target="_blank" rel="noopener" aria-label="Google Play">
  258.                         <svg width="18" height="18" viewBox="0 0 512 512" aria-hidden="true">
  259.                             <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"/>
  260.                             <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"/>
  261.                             <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"/>
  262.                             <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"/>
  263.                         </svg>
  264.                         <span>
  265.                             <small>{{ 'layout.available_on'|trans({}, 'whr-public')|default('Disponible sur') }}</small>
  266.                             <strong>Google Play</strong>
  267.                         </span>
  268.                     </a>
  269.                 {% endif %}
  270.             </div>
  272.             {# Liens texte en dessous des stores #}
  273.             <ul class="whr-foot-action-links">
  274.                 {% if connectUser %}
  275.                     {# === Connecté : Profil / Paramètres / Déconnexion === #}
  276.                     {% if isCandidateUser %}
  277.                         <li>
  278.                             <a href="{% if app.request.locale == 'en' %}{{ path('cvs_gestion_candidates_profile_profile') }}{% else %}{{ path('locale_cvs_gestion_candidates_profile_profile', {'_locale': app.request.locale}) }}{% endif %}">
  279.                                 <i class="feather-user"></i>
  280.                                 {{ 'layout.footer.my_profile'|trans({}, 'whr-public')|default('Mon profil') }}
  281.                             </a>
  282.                         </li>
  283.                     {% else %}
  284.                         <li>
  285.                             <a href="{% if app.request.locale == 'en' %}{{ path('cvs_gestion_enterprises_profile_profile') }}{% else %}{{ path('locale_cvs_gestion_enterprises_profile_profile', {'_locale': app.request.locale}) }}{% endif %}">
  286.                                 <i class="feather-user"></i>
  287.                                 {{ 'layout.footer.my_profile'|trans({}, 'whr-public')|default('Mon profil') }}
  288.                             </a>
  289.                         </li>
  290.                         <li>
  291.                             <a href="{% if app.request.locale == 'en' %}{{ path('cvs_gestion_enterprises_settings') }}{% else %}{{ path('locale_cvs_gestion_enterprises_settings', {'_locale': app.request.locale}) }}{% endif %}">
  292.                                 <i class="feather-settings"></i>
  293.                                 {{ 'layout.footer.settings'|trans({}, 'whr-public')|default('Paramètres') }}
  294.                             </a>
  295.                         </li>
  296.                     {% endif %}
  297.                     <li>
  298.                         <a href="{{ path('app_logout') }}">
  299.                             <i class="feather-log-out"></i>
  300.                             {{ 'layout.footer.logout'|trans({}, 'whr-public')|default('Déconnexion') }}
  301.                         </a>
  302.                     </li>
  303.                 {% else %}
  304.                     {# === Non connecté : Inscription candidat / Créateur de CV / Inscription pro === #}
  305.                     <li>
  306.                         <a href="#">
  307.                             <i class="feather-user-plus"></i>
  308.                             {{ 'layout.footer.candidate_signup'|trans({}, 'whr-public')|default('Inscription candidat') }}
  309.                         </a>
  310.                     </li>
  311.                     <li>
  312.                         <a href="#">
  313.                             <i class="feather-file-text"></i>
  314.                             {{ 'layout.footer.cv_builder'|trans({}, 'whr-public')|default('Créateur de CV') }}
  315.                         </a>
  316.                     </li>
  317.                     <li>
  318.                         <a href="#">
  319.                             <i class="feather-briefcase"></i>
  320.                             {{ 'layout.footer.pro_signup'|trans({}, 'whr-public')|default('Inscription professionnel') }}
  321.                         </a>
  322.                     </li>
  323.                 {% endif %}
  324.             </ul>
  325.         </div>
  327.         {# --- Col 2 : Outils --- #}
  328.         <div class="whr-foot-col">
  329.             <h4>{{ "Outils"|translateLocale(arrayTranslate) }}</h4>
  330.             {% if app.request.locale == 'fr' %}
  331.                 {{ footer_html_col1_fr|raw }}
  332.             {% else %}
  333.                 {{ footer_html_col1_en|raw }}
  334.             {% endif %}
  335.         </div>
  337.         {# --- Col 3 : Entreprises --- #}
  338.         <div class="whr-foot-col">
  339.             <h4>{{ "Entreprises"|translateLocale(arrayTranslate) }}</h4>
  340.             {% if app.request.locale == 'fr' %}
  341.                 {{ footer_html_col2_fr|raw }}
  342.             {% else %}
  343.                 {{ footer_html_col2_en|raw }}
  344.             {% endif %}
  345.         </div>
  347.         {# --- Col 4 : Blog --- #}
  348.         <div class="whr-foot-col">
  349.             <h4>{{ "Blog"|translateLocale(arrayTranslate) }}</h4>
  350.             {% if app.request.locale == 'fr' %}
  351.                 {{ footer_html_col3_fr|raw }}
  352.             {% else %}
  353.                 {{ footer_html_col3_en|raw }}
  354.             {% endif %}
  355.         </div>
  357.         {# --- Col 5 : Suivez-nous --- #}
  358.         <div class="whr-foot-col">
  359.             <h4>{{ 'layout.follow_us'|trans({}, 'whr-public')|default('Suivez-nous') }}</h4>
  360.             <ul class="whr-foot-social">
  361.                 {% if facebook %}
  362.                     <li><a href="{{ facebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="feather-facebook"></i></a></li>
  363.                 {% endif %}
  364.                 {% if twitter %}
  365.                     <li><a href="{{ twitter }}" target="_blank" rel="noopener" aria-label="X / Twitter"><i class="feather-twitter"></i></a></li>
  366.                 {% endif %}
  367.                 {% if instagram %}
  368.                     <li><a href="{{ instagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="feather-instagram"></i></a></li>
  369.                 {% endif %}
  370.                 {% if linkedin %}
  371.                     <li><a href="{{ linkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="feather-linkedin"></i></a></li>
  372.                 {% endif %}
  373.                 {% if youtube %}
  374.                     <li><a href="{{ youtube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="feather-youtube"></i></a></li>
  375.                 {% endif %}
  376.             </ul>
  377.         </div>
  378.     </div>
  380.     {# === Bas de footer : copyright (avec favicon) + legal === #}
  381.     <div class="whr-foot-bottom">
  382.         <p class="whr-foot-copy">
  383.             {% if favicon %}
  384.                 <img src="{{ favicon }}" alt="" class="whr-favicon" />
  385.             {% endif %}
  386.             <span>&copy; {{ "now"|date('Y') }} {{ websitename }}. {{ 'layout.rights_reserved'|trans({}, 'whr-public')|default('Tous droits réservés.') }}</span>
  387.         </p>
  389.         <div class="whr-foot-legal">
  390.             {% set menuFooter = getMenuWebsiteLocaleArray(app.request.locale, "footer", connectUser) %}
  391.             {% if menuFooter is not empty %}
  392.                 {% for m in menuFooter %}
  393.                     <a href="{{ m.link }}"
  394.                        aria-label="{{ m.title }}"
  395.                        title="{{ m.title }}"
  396.                        {% if m.targetBlank == 1 %}target="_blank" rel="noreferrer"{% endif %}>
  397.                         {{ m.title }}
  398.                     </a>
  399.                 {% endfor %}
  400.             {% endif %}
  401.             {% if app.user is not null %}
  402.                 {% if is_granted("ROLE_SUPER_ADMIN") %}
  403.                     <a href="{{ path('backoffice_dashboard') }}" class="whr-admin-link" title="Administration">
  404.                         <i class="feather-settings"></i> Administration
  405.                     </a>
  406.                 {% endif %}
  407.             {% endif %}
  408.         </div>
  409.     </div>
  411. </footer>