templates/Accueil/_footer_premium.html.twig line 1

Open in your IDE?
  1. {#
  2. /**
  3.  * Footer Premium - Espace Accueil (Public)
  4.  * Design moderne, minimaliste, charte 5sur5
  5.  */
  6. #}
  7. <footer class="premium-footer-accueil">
  8.     <div class="footer-container">
  9.         <!-- Section Principale -->
  10.         <div class="footer-main">
  11.             <!-- Logo et Description -->
  12.             <div class="footer-brand">
  13.                 <div class="footer-logo">
  14.                     <img src="{{ asset('Accueil/imagesAccueil/logoHeader.svg') }}" alt="5sur5 Séjour" />
  15.                     <span>5sur5 Séjour</span>
  16.                 </div>
  17.                 <p class="footer-tagline">
  18.                     Nous partageons les aventures et imprimons les souvenirs !
  19.                 </p>
  20.                 <div class="footer-social">
  21.                     <a href="https://www.instagram.com/5sur5sejour/" target="_blank" aria-label="Instagram">
  22.                         <i class="bi bi-instagram"></i>
  23.                     </a>
  24.                     <a href="https://www.facebook.com/5sur5sejour" target="_blank" aria-label="Facebook">
  25.                         <i class="bi bi-facebook"></i>
  26.                     </a>
  27.                     <a href="https://www.linkedin.com/company/5sur5sejour" target="_blank" aria-label="LinkedIn">
  28.                         <i class="bi bi-linkedin"></i>
  29.                     </a>
  30.                 </div>
  31.             </div>
  33.             <!-- Services -->
  34.             <div class="footer-links">
  35.                 <h4>Services</h4>
  36.                 <ul>
  37.                     <li>
  38.                         <a href="{{ path('boite_vocale') }}">
  39.                             <i class="bi bi-mic-fill"></i> Boîte vocale
  40.                         </a>
  41.                     </li>
  42.                     <li>
  43.                         <a href="{{ path('commande_groupee_accueil') }}">
  44.                             <i class="bi bi-people-fill"></i> Commande groupée
  45.                         </a>
  46.                     </li>
  47.                     <li>
  48.                         <a href="{{ path('pack_annuel_partenaires') }}">
  49.                             <i class="bi bi-briefcase-fill"></i> Devenir partenaire
  50.                         </a>
  51.                     </li>
  52.                     <li>
  53.                         <a href="{{ path('Besoindaide_5sur5_accueil') }}">
  54.                             <i class="bi bi-question-circle-fill"></i> Besoin d'aide
  55.                         </a>
  56.                     </li>
  57.                 </ul>
  58.             </div>
  60.             <!-- Informations -->
  61.             <div class="footer-links">
  62.                 <h4>Informations</h4>
  63.                 <ul>
  64.                     <li>
  65.                         <a href="{{ path('Mentionlegale_5sur5') }}">
  66.                             <i class="bi bi-file-text"></i> Mentions légales
  67.                         </a>
  68.                     </li>
  69.                     <li>
  70.                         <a href="{{ path('Conditons_generales_5sur5') }}">
  71.                             <i class="bi bi-file-earmark-text"></i> Conditions générales
  72.                         </a>
  73.                     </li>
  74.                     <li>
  75.                         <a href="{{ path('Politique_Confidentialite_5sur5') }}">
  76.                             <i class="bi bi-shield-check"></i> Politique de confidentialité
  77.                         </a>
  78.                     </li>
  79.                     <li>
  80.                         <a href="{{ path('ServiceClient_5sur5') }}">
  81.                             <i class="bi bi-headset"></i> Service client
  82.                         </a>
  83.                     </li>
  84.                 </ul>
  85.             </div>
  87.             <!-- Contact -->
  88.             <div class="footer-contact">
  89.                 <h4>Contact</h4>
  90.                 <div class="contact-item">
  91.                     <i class="bi bi-building"></i>
  92.                     <div>
  93.                         <strong>Trust Conseils</strong><br>
  94.                         199 Avenue Francis de Pressensé<br>
  95.                         69200 Vénissieux
  96.                     </div>
  97.                 </div>
  98.                 <div class="contact-item">
  99.                     <i class="bi bi-telephone-fill"></i>
  100.                     <a href="tel:0536282930">05 36 28 29 30</a>
  101.                 </div>
  102.                 <div class="contact-item">
  103.                     <i class="bi bi-envelope-fill"></i>
  104.                     <a href="mailto:contact@5sur5sejour.com">contact@5sur5sejour.com</a>
  105.                 </div>
  106.                 <div class="footer-payment">
  107.                     <span>Paiement sécurisé</span>
  108.                     <div class="payment-icons">
  109.                         <i class="bi bi-credit-card-fill"></i>
  110.                         <i class="bi bi-paypal"></i>
  111.                         <i class="bi bi-shield-lock-fill"></i>
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.         </div>
  117.         <!-- Copyright -->
  118.         <div class="footer-bottom">
  119.             <p>&copy; {{ "now"|date("Y") }} Trust Conseils - 5sur5 Séjour. Tous droits réservés.</p>
  120.             <p class="footer-france">
  121.                 <i class="bi bi-geo-alt-fill"></i> Données hébergées en France 🇫🇷
  122.             </p>
  123.         </div>
  124.     </div>
  125. </footer>
  127. <style>
  128.     .premium-footer-accueil {
  129.         background: linear-gradient(135deg, #41A2AA 0%, #359BA3 100%);
  130.         color: white;
  131.         padding: 60px 0 0 0;
  132.         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  133.     }
  135.     .footer-container {
  136.         max-width: 1200px;
  137.         margin: 0 auto;
  138.         padding: 0 24px;
  139.     }
  141.     .footer-main {
  142.         display: grid;
  143.         grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  144.         gap: 40px;
  145.         padding-bottom: 40px;
  146.         border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  147.     }
  149.     /* Brand Section */
  150.     .footer-brand {
  151.         display: flex;
  152.         flex-direction: column;
  153.         gap: 16px;
  154.     }
  156.     .footer-logo {
  157.         display: flex;
  158.         align-items: center;
  159.         gap: 12px;
  160.     }
  162.     .footer-logo img {
  163.         height: 48px;
  164.         background: white;
  165.         border-radius: 12px;
  166.         padding: 8px;
  167.     }
  169.     .footer-logo span {
  170.         font-size: 20px;
  171.         font-weight: 700;
  172.         letter-spacing: -0.5px;
  173.     }
  175.     .footer-tagline {
  176.         font-size: 15px;
  177.         line-height: 1.6;
  178.         opacity: 0.9;
  179.         margin: 0;
  180.     }
  182.     .footer-social {
  183.         display: flex;
  184.         gap: 12px;
  185.         margin-top: 8px;
  186.     }
  188.     .footer-social a {
  189.         width: 40px;
  190.         height: 40px;
  191.         border-radius: 10px;
  192.         background: rgba(255, 255, 255, 0.15);
  193.         display: flex;
  194.         align-items: center;
  195.         justify-content: center;
  196.         color: white;
  197.         font-size: 18px;
  198.         text-decoration: none;
  199.         transition: all 0.2s ease;
  200.     }
  202.     .footer-social a:hover {
  203.         background: white;
  204.         color: #41A2AA;
  205.         transform: translateY(-2px);
  206.     }
  208.     /* Links Sections */
  209.     .footer-links h4,
  210.     .footer-contact h4 {
  211.         font-size: 14px;
  212.         font-weight: 600;
  213.         text-transform: uppercase;
  214.         letter-spacing: 1px;
  215.         margin: 0 0 20px 0;
  216.         opacity: 0.8;
  217.     }
  219.     .footer-links ul {
  220.         list-style: none;
  221.         padding: 0;
  222.         margin: 0;
  223.         display: flex;
  224.         flex-direction: column;
  225.         gap: 12px;
  226.     }
  228.     .footer-links li a {
  229.         display: flex;
  230.         align-items: center;
  231.         gap: 10px;
  232.         color: white;
  233.         text-decoration: none;
  234.         font-size: 14px;
  235.         transition: all 0.2s ease;
  236.         opacity: 0.9;
  237.     }
  239.     .footer-links li a:hover {
  240.         opacity: 1;
  241.         transform: translateX(4px);
  242.     }
  244.     .footer-links li a i {
  245.         font-size: 14px;
  246.         opacity: 0.7;
  247.     }
  249.     /* Contact Section */
  250.     .footer-contact {
  251.         display: flex;
  252.         flex-direction: column;
  253.         gap: 16px;
  254.     }
  256.     .contact-item {
  257.         display: flex;
  258.         align-items: flex-start;
  259.         gap: 12px;
  260.         font-size: 14px;
  261.         line-height: 1.5;
  262.     }
  264.     .contact-item i {
  265.         font-size: 16px;
  266.         opacity: 0.8;
  267.         margin-top: 2px;
  268.     }
  270.     .contact-item a {
  271.         color: white;
  272.         text-decoration: none;
  273.         transition: opacity 0.2s ease;
  274.     }
  276.     .contact-item a:hover {
  277.         opacity: 0.8;
  278.         text-decoration: underline;
  279.     }
  281.     .footer-payment {
  282.         margin-top: 16px;
  283.         padding-top: 16px;
  284.         border-top: 1px solid rgba(255, 255, 255, 0.15);
  285.     }
  287.     .footer-payment span {
  288.         font-size: 12px;
  289.         text-transform: uppercase;
  290.         letter-spacing: 0.5px;
  291.         opacity: 0.7;
  292.         display: block;
  293.         margin-bottom: 8px;
  294.     }
  296.     .payment-icons {
  297.         display: flex;
  298.         gap: 12px;
  299.     }
  301.     .payment-icons i {
  302.         font-size: 24px;
  303.         opacity: 0.8;
  304.     }
  306.     /* Bottom Section */
  307.     .footer-bottom {
  308.         padding: 24px 0;
  309.         display: flex;
  310.         justify-content: space-between;
  311.         align-items: center;
  312.         font-size: 13px;
  313.         opacity: 0.8;
  314.     }
  316.     .footer-bottom p {
  317.         margin: 0;
  318.     }
  320.     .footer-france {
  321.         display: flex;
  322.         align-items: center;
  323.         gap: 6px;
  324.     }
  326.     /* Responsive */
  327.     @media (max-width: 992px) {
  328.         .footer-main {
  329.             grid-template-columns: 1fr 1fr;
  330.             gap: 32px;
  331.         }
  333.         .footer-brand {
  334.             grid-column: span 2;
  335.         }
  336.     }
  338.     @media (max-width: 576px) {
  339.         .premium-footer-accueil {
  340.             padding: 40px 0 0 0;
  341.         }
  343.         .footer-main {
  344.             grid-template-columns: 1fr;
  345.             gap: 32px;
  346.         }
  348.         .footer-brand {
  349.             grid-column: span 1;
  350.             text-align: center;
  351.             align-items: center;
  352.         }
  354.         .footer-logo {
  355.             flex-direction: column;
  356.             gap: 8px;
  357.         }
  359.         .footer-social {
  360.             justify-content: center;
  361.         }
  363.         .footer-links,
  364.         .footer-contact {
  365.             text-align: center;
  366.         }
  368.         .footer-links ul {
  369.             align-items: center;
  370.         }
  372.         .footer-links li a:hover {
  373.             transform: none;
  374.         }
  376.         .contact-item {
  377.             justify-content: center;
  378.             text-align: left;
  379.         }
  381.         .footer-payment {
  382.             text-align: center;
  383.         }
  385.         .payment-icons {
  386.             justify-content: center;
  387.         }
  389.         .footer-bottom {
  390.             flex-direction: column;
  391.             gap: 12px;
  392.             text-align: center;
  393.         }
  394.     }
  395. </style>