templates/Accueil/ServiceClient_5sur5.html.twig line 1

Open in your IDE?
  1. {% extends "Accueil/layoutAccueil.html.twig" %}
  3. {% block title %}Service Client — 5sur5 Séjour{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <style>
  8.     .service-page {
  9.         background: #F9FAFB;
  10.         min-height: 100vh;
  11.         padding: 60px 24px 80px;
  12.     }
  13.     
  14.     .service-container {
  15.         max-width: 900px;
  16.         margin: 0 auto;
  17.     }
  18.     
  19.     .service-header {
  20.         text-align: center;
  21.         margin-bottom: 48px;
  22.     }
  23.     
  24.     .service-icon {
  25.         width: 80px;
  26.         height: 80px;
  27.         border-radius: 20px;
  28.         background: linear-gradient(135deg, #41A2AA 0%, #359BA3 100%);
  29.         display: inline-flex;
  30.         align-items: center;
  31.         justify-content: center;
  32.         margin-bottom: 20px;
  33.     }
  34.     
  35.     .service-icon i {
  36.         font-size: 36px;
  37.         color: white;
  38.     }
  39.     
  40.     .service-title {
  41.         font-size: 36px;
  42.         font-weight: 700;
  43.         color: #1A1A1A;
  44.         margin: 0 0 12px;
  45.     }
  46.     
  47.     .service-subtitle {
  48.         font-size: 18px;
  49.         color: #6B7280;
  50.         max-width: 500px;
  51.         margin: 0 auto;
  52.     }
  53.     
  54.     /* Contact Cards Grid */
  55.     .contact-grid {
  56.         display: grid;
  57.         grid-template-columns: repeat(3, 1fr);
  58.         gap: 24px;
  59.         margin-bottom: 48px;
  60.     }
  61.     
  62.     .contact-card {
  63.         background: white;
  64.         border-radius: 16px;
  65.         padding: 32px 24px;
  66.         text-align: center;
  67.         transition: all 0.2s ease;
  68.         border: 1px solid #E5E7EB;
  69.     }
  70.     
  71.     .contact-card:hover {
  72.         border-color: #41A2AA;
  73.         transform: translateY(-4px);
  74.         box-shadow: 0 12px 32px rgba(65, 162, 170, 0.15);
  75.     }
  76.     
  77.     .contact-card-icon {
  78.         width: 56px;
  79.         height: 56px;
  80.         border-radius: 14px;
  81.         background: rgba(65, 162, 170, 0.1);
  82.         display: inline-flex;
  83.         align-items: center;
  84.         justify-content: center;
  85.         margin-bottom: 16px;
  86.     }
  87.     
  88.     .contact-card-icon i {
  89.         font-size: 24px;
  90.         color: #41A2AA;
  91.     }
  92.     
  93.     .contact-card-title {
  94.         font-size: 16px;
  95.         font-weight: 600;
  96.         color: #1A1A1A;
  97.         margin: 0 0 8px;
  98.     }
  99.     
  100.     .contact-card-value {
  101.         font-size: 15px;
  102.         color: #41A2AA;
  103.         text-decoration: none;
  104.         display: block;
  105.     }
  106.     
  107.     .contact-card-value:hover {
  108.         text-decoration: underline;
  109.     }
  110.     
  111.     .contact-card-hint {
  112.         font-size: 13px;
  113.         color: #9CA3AF;
  114.         margin-top: 8px;
  115.     }
  116.     
  117.     /* FAQ Section */
  118.     .faq-section {
  119.         background: white;
  120.         border-radius: 16px;
  121.         padding: 40px;
  122.         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  123.     }
  124.     
  125.     .faq-title {
  126.         font-size: 22px;
  127.         font-weight: 600;
  128.         color: #1A1A1A;
  129.         margin: 0 0 24px;
  130.         display: flex;
  131.         align-items: center;
  132.         gap: 12px;
  133.     }
  134.     
  135.     .faq-title i {
  136.         color: #41A2AA;
  137.     }
  138.     
  139.     .faq-item {
  140.         border-bottom: 1px solid #E5E7EB;
  141.         padding: 20px 0;
  142.     }
  143.     
  144.     .faq-item:last-child {
  145.         border-bottom: none;
  146.     }
  147.     
  148.     .faq-question {
  149.         font-size: 16px;
  150.         font-weight: 600;
  151.         color: #1A1A1A;
  152.         margin: 0 0 8px;
  153.         cursor: pointer;
  154.         display: flex;
  155.         align-items: center;
  156.         justify-content: space-between;
  157.     }
  158.     
  159.     .faq-question i {
  160.         color: #41A2AA;
  161.         transition: transform 0.2s ease;
  162.     }
  163.     
  164.     .faq-answer {
  165.         font-size: 15px;
  166.         color: #6B7280;
  167.         line-height: 1.7;
  168.         margin: 0;
  169.     }
  170.     
  171.     /* CTA Section */
  172.     .cta-section {
  173.         margin-top: 48px;
  174.         text-align: center;
  175.         padding: 40px;
  176.         background: linear-gradient(135deg, rgba(65, 162, 170, 0.08) 0%, rgba(245, 96, 64, 0.05) 100%);
  177.         border-radius: 16px;
  178.     }
  179.     
  180.     .cta-title {
  181.         font-size: 20px;
  182.         font-weight: 600;
  183.         color: #1A1A1A;
  184.         margin: 0 0 12px;
  185.     }
  186.     
  187.     .cta-text {
  188.         font-size: 15px;
  189.         color: #6B7280;
  190.         margin: 0 0 20px;
  191.     }
  192.     
  193.     .cta-btn {
  194.         display: inline-flex;
  195.         align-items: center;
  196.         gap: 8px;
  197.         background: #41A2AA;
  198.         color: white;
  199.         padding: 14px 28px;
  200.         border-radius: 10px;
  201.         font-weight: 600;
  202.         font-size: 15px;
  203.         text-decoration: none;
  204.         transition: all 0.2s ease;
  205.     }
  206.     
  207.     .cta-btn:hover {
  208.         background: #359BA3;
  209.         color: white;
  210.         transform: translateY(-2px);
  211.         box-shadow: 0 8px 20px rgba(65, 162, 170, 0.3);
  212.     }
  213.     
  214.     @media (max-width: 768px) {
  215.         .service-page {
  216.             padding: 40px 16px 60px;
  217.         }
  218.         
  219.         .service-title {
  220.             font-size: 28px;
  221.         }
  222.         
  223.         .contact-grid {
  224.             grid-template-columns: 1fr;
  225.         }
  226.         
  227.         .faq-section {
  228.             padding: 24px;
  229.         }
  230.     }
  231. </style>
  232. {% endblock %}
  234. {% block Content %}
  235. <div class="service-page">
  236.     <div class="service-container">
  237.         
  238.         <div class="service-header">
  239.             <div class="service-icon">
  240.                 <i class="bi bi-headset"></i>
  241.             </div>
  242.             <h1 class="service-title">Service Client</h1>
  243.             <p class="service-subtitle">Notre équipe est à votre écoute pour vous accompagner</p>
  244.         </div>
  245.         
  246.         <!-- Contact Cards -->
  247.         <div class="contact-grid">
  248.             <div class="contact-card">
  249.                 <div class="contact-card-icon">
  250.                     <i class="bi bi-telephone"></i>
  251.                 </div>
  252.                 <h3 class="contact-card-title">Par téléphone</h3>
  253.                 <a href="tel:0536282930" class="contact-card-value">05 36 28 29 30</a>
  254.                 <p class="contact-card-hint">Lun-Ven : 9h-18h</p>
  255.             </div>
  256.             
  257.             <div class="contact-card">
  258.                 <div class="contact-card-icon">
  259.                     <i class="bi bi-envelope"></i>
  260.                 </div>
  261.                 <h3 class="contact-card-title">Par email</h3>
  262.                 <a href="mailto:contact@5sur5sejour.com" class="contact-card-value">contact@5sur5sejour.com</a>
  263.                 <p class="contact-card-hint">Réponse sous 24h</p>
  264.             </div>
  265.             
  266.             <div class="contact-card">
  267.                 <div class="contact-card-icon">
  268.                     <i class="bi bi-geo-alt"></i>
  269.                 </div>
  270.                 <h3 class="contact-card-title">Par courrier</h3>
  271.                 <span class="contact-card-value">TRUST CONSEILS</span>
  272.                 <p class="contact-card-hint">199 Av. F. de Pressensé<br>69200 Vénissieux</p>
  273.             </div>
  274.         </div>
  275.         
  276.         <!-- FAQ Section -->
  277.         <div class="faq-section">
  278.             <h2 class="faq-title">
  279.                 <i class="bi bi-question-circle"></i>
  280.                 Questions fréquentes
  281.             </h2>
  282.             
  283.             <div class="faq-item">
  284.                 <h3 class="faq-question">
  285.                     Comment accéder aux photos du séjour de mon enfant ?
  286.                     <i class="bi bi-chevron-down"></i>
  287.                 </h3>
  288.                 <p class="faq-answer">
  289.                     Connectez-vous avec le code séjour fourni par l'accompagnateur. Vous aurez accès à toutes les photos et messages partagés pendant le séjour.
  290.                 </p>
  291.             </div>
  292.             
  293.             <div class="faq-item">
  294.                 <h3 class="faq-question">
  295.                     Quels sont les délais de livraison des albums ?
  296.                     <i class="bi bi-chevron-down"></i>
  297.                 </h3>
  298.                 <p class="faq-answer">
  299.                     Les albums sont fabriqués sous 5-7 jours ouvrés, puis expédiés en 2-3 jours. Comptez environ 10 jours au total pour recevoir votre commande.
  300.                 </p>
  301.             </div>
  302.             
  303.             <div class="faq-item">
  304.                 <h3 class="faq-question">
  305.                     Comment créer un compte accompagnateur ?
  306.                     <i class="bi bi-chevron-down"></i>
  307.                 </h3>
  308.                 <p class="faq-answer">
  309.                     Cliquez sur "Accompagnateur" en haut de la page, puis "Créer un compte". Remplissez le formulaire avec les informations de votre séjour pour obtenir votre code unique.
  310.                 </p>
  311.             </div>
  312.             
  313.             <div class="faq-item">
  314.                 <h3 class="faq-question">
  315.                     Les photos sont-elles sécurisées ?
  316.                     <i class="bi bi-chevron-down"></i>
  317.                 </h3>
  318.                 <p class="faq-answer">
  319.                     Oui, toutes les données sont hébergées en France et sécurisées. L'accès aux photos est réservé aux personnes ayant le code séjour. Les photos sont supprimées 2 mois après la fin du séjour.
  320.                 </p>
  321.             </div>
  322.             
  323.             <div class="faq-item">
  324.                 <h3 class="faq-question">
  325.                     Puis-je modifier ma commande après validation ?
  326.                     <i class="bi bi-chevron-down"></i>
  327.                 </h3>
  328.                 <p class="faq-answer">
  329.                     Contactez-nous rapidement par téléphone au 05 36 28 29 30. Nous pourrons modifier votre commande si elle n'est pas encore partie en production.
  330.                 </p>
  331.             </div>
  332.         </div>
  333.         
  334.         <!-- CTA Section -->
  335.         <div class="cta-section">
  336.             <h3 class="cta-title">Vous n'avez pas trouvé votre réponse ?</h3>
  337.             <p class="cta-text">Consultez notre centre d'aide complet ou contactez-nous directement</p>
  338.             <a href="{{ path('Besoindaide_5sur5') }}" class="cta-btn">
  339.                 <i class="bi bi-question-circle"></i>
  340.                 Centre d'aide
  341.             </a>
  342.         </div>
  343.         
  344.     </div>
  345. </div>
  346. {% endblock %}