templates/home/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'baseFront.html.twig' %}
  3. {% block title %}Hello HomeController!{% endblock %}
  5. {% block body %}
  6. <style>
  7.         /* ========================================
  8.            BEANSTALK - Style inspiré d'Addixo
  9.            ======================================== */
  11.         /* Variables CSS */
  12.         :root {
  13.             /* Couleurs principales - Style Addixo */
  14.             --primary-blue: #003d7a;
  15.             --primary-blue-dark: #002855;
  16.             --primary-blue-light: #0066cc;
  17.             --secondary-blue: #2563eb;
  18.             --accent-green: #10b981;
  19.             --accent-orange: #f59e0b;
  21.             /* Couleurs neutres */
  22.             --text-primary: #1a1a1a;
  23.             --text-secondary: #4a4a4a;
  24.             --text-light: #6b7280;
  25.             --bg-white: #ffffff;
  26.             --bg-light: #f8f9fa;
  27.             --bg-gray: #f3f4f6;
  28.             --border-color: #e5e7eb;
  30.             /* Typographie */
  31.             --font-primary: 'Roboto', sans-serif;
  32.             --font-secondary: 'Open Sans', sans-serif;
  34.             /* Espacements */
  35.             --spacing-xs: 0.5rem;
  36.             --spacing-sm: 1rem;
  37.             --spacing-md: 1.5rem;
  38.             --spacing-lg: 2rem;
  39.             --spacing-xl: 3rem;
  40.             --spacing-xxl: 5rem;
  42.             /* Transitions */
  43.             --transition: all 0.3s ease;
  44.             --transition-fast: all 0.2s ease;
  46.             /* Ombres */
  47.             --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  48.             --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
  49.             --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
  50.             --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
  51.         }
  53.         /* Reset et Base */
  54.         * {
  55.             margin: 0;
  56.             padding: 0;
  57.             box-sizing: border-box;
  58.         }
  60.         html {
  61.             scroll-behavior: smooth;
  62.         }
  64.         body {
  65.             font-family: var(--font-secondary);
  66.             font-size: 16px;
  67.             
  68.             color: var(--text-primary);
  69.             background-color: var(--bg-white);
  70.             overflow-x: hidden;
  71.         }
  73.         
  75.         /* Typography */
  76.         h1, h2, h3, h4, h5, h6 {
  77.             font-family: var(--font-primary);
  78.             font-weight: 700;
  79.             line-height: 1.2;
  80.             margin-bottom: 1rem;
  81.         }
  83.         h1 { font-size: 3rem; }
  84.         h2 { font-size: 2.5rem; }
  85.         h3 { font-size: 1.875rem; }
  87.         p {
  88.             margin-bottom: 1rem;
  89.             color: var(--text-secondary);
  90.         }
  92.         a {
  93.             text-decoration: none;
  94.             color: inherit;
  95.             transition: var(--transition);
  96.         }
  98.         
  100.         
  102.         /* Contact Form */
  103.         .contact-form-wrapper {
  104.             background: white;
  105.             padding: 2rem;
  106.             border-radius: 8px;
  107.             box-shadow: var(--shadow-md);
  108.         }
  110.         .form-header {
  111.             margin-bottom: 2rem;
  112.         }
  114.         .form-header h3 {
  115.             color: #6b7280;
  116.             margin-bottom: 0.5rem;
  117.         }
  119.         .form-header p {
  120.             color: var(--text-light);
  121.             font-size: 0.9rem;
  122.         }
  124.         .form-row {
  125.             display: grid;
  126.             grid-template-columns: 1fr 1fr;
  127.             gap: 1rem;
  128.             margin-bottom: 1rem;
  129.         }
  131.         .form-group {
  132.             margin-bottom: 1rem;
  133.         }
  135.         .form-group label {
  136.             display: block;
  137.             margin-bottom: 0.5rem;
  138.             color: var(--text-primary);
  139.             font-weight: 500;
  140.         }
  142.         .form-group input,
  143.         .form-group select,
  144.         .form-group textarea {
  145.             width: 100%;
  146.             padding: 0.75rem;
  147.             border: 1px solid var(--border-color);
  148.             border-radius: 4px;
  149.             font-family: inherit;
  150.             transition: var(--transition);
  151.             background: white;
  152.         }
  154.         .form-group select {
  155.             cursor: pointer;
  156.             appearance: none;
  157.             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  158.             background-repeat: no-repeat;
  159.             background-position: right 0.75rem center;
  160.             background-size: 1.5em 1.5em;
  161.             padding-right: 2.5rem;
  162.         }
  164.         .form-group select optgroup {
  165.             font-weight: 600;
  166.             color: var(--primary-blue);
  167.         }
  169.         .form-group select option {
  170.             padding: 0.5rem;
  171.             color: var(--text-primary);
  172.         }
  174.         .form-group textarea {
  175.             resize: vertical;
  176.             min-height: 120px;
  177.         }
  179.         .form-group input:focus,
  180.         .form-group select:focus,
  181.         .form-group textarea:focus {
  182.             outline: none;
  183.             border-color: var(--primary-blue);
  184.             box-shadow: 0 0 0 3px rgba(0, 61, 122, 0.1);
  185.         }
  187.         .checkbox-group {
  188.             display: flex;
  189.             align-items: start;
  190.             gap: 0.5rem;
  191.         }
  193.         .checkbox-group input[type="checkbox"] {
  194.             width: auto;
  195.             margin-top: 0.25rem;
  196.         }
  198.         .checkbox-group label {
  199.             margin-bottom: 0;
  200.         }
  202.         .checkbox-group a {
  203.             color: var(--primary-blue);
  204.             text-decoration: underline;
  205.         }
  207.         .btn-submit {
  208.             width: 100%;
  209.             padding: 1rem;
  210.             background: #6b7280;
  211.             color: white;
  212.             border: none;
  213.             border-radius: 4px;
  214.             font-size: 1rem;
  215.             font-weight: 600;
  216.             cursor: pointer;
  217.             transition: var(--transition);
  218.             display: flex;
  219.             align-items: center;
  220.             justify-content: center;
  221.             gap: 0.5rem;
  222.         }
  224.         .btn-submit:hover {
  225.             background: #6b7280;
  226.             transform: translateY(-2px);
  227.         }
  229.         /* Footer */
  230.         .footer {
  231.             background: var(--text-primary);
  232.             color: white;
  233.             padding: 3rem 0 1rem;
  234.         }
  236.         .footer-top {
  237.             display: grid;
  238.             grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  239.             gap: 2rem;
  240.             margin-bottom: 2rem;
  241.         }
  243.         .footer-column h4 {
  244.             margin-bottom: 1rem;
  245.             color: white;
  246.         }
  248.         .footer-logo {
  249.             margin-bottom: 1rem;
  250.         }
  252.         .footer-logo .logo-text {
  253.             font-family: var(--font-primary);
  254.             font-size: 1.5rem;
  255.             font-weight: 900;
  256.             color: white;
  257.             letter-spacing: 1px;
  258.             line-height: 1;
  259.         }
  261.         .footer-logo .logo-tagline {
  262.             font-size: 0.65rem;
  263.             color: rgba(255, 255, 255, 0.7);
  264.             text-transform: uppercase;
  265.             letter-spacing: 2px;
  266.             margin-top: 2px;
  267.             line-height: 1;
  268.         }
  270.         .footer-description {
  271.             color: rgba(255, 255, 255, 0.7);
  272.             font-size: 0.9rem;
  273.             margin-bottom: 1rem;
  274.         }
  276.         .footer-social {
  277.             display: flex;
  278.             gap: 0.5rem;
  279.         }
  281.         .footer-social a {
  282.             width: 35px;
  283.             height: 35px;
  284.             background: rgba(255, 255, 255, 0.1);
  285.             border-radius: 50%;
  286.             display: flex;
  287.             align-items: center;
  288.             justify-content: center;
  289.             transition: var(--transition);
  290.         }
  292.         .footer-social a:hover {
  293.             background: var(--primary-blue);
  294.         }
  296.         .footer-links {
  297.             list-style: none;
  298.         }
  300.         .footer-links li {
  301.             margin-bottom: 0.5rem;
  302.         }
  304.         .footer-links a {
  305.             color: rgba(255, 255, 255, 0.7);
  306.             font-size: 0.9rem;
  307.             transition: var(--transition);
  308.         }
  310.         .footer-links a:hover {
  311.             color: white;
  312.             padding-left: 5px;
  313.         }
  315.         .footer-bottom {
  316.             padding-top: 2rem;
  317.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  318.         }
  320.         .footer-bottom-content {
  321.             display: flex;
  322.             justify-content: space-between;
  323.             align-items: center;
  324.         }
  326.         .copyright {
  327.             color: rgba(255, 255, 255, 0.7);
  328.             font-size: 0.9rem;
  329.         }
  331.         .footer-legal {
  332.             display: flex;
  333.             gap: 1.5rem;
  334.         }
  336.         .footer-legal a {
  337.             color: rgba(255, 255, 255, 0.7);
  338.             font-size: 0.9rem;
  339.         }
  341.         .footer-legal a:hover {
  342.             color: white;
  343.         }
  345.         /* Back to Top */
  346.         .back-to-top {
  347.             position: fixed;
  348.             bottom: 30px;
  349.             right: 30px;
  350.             width: 50px;
  351.             height: 50px;
  352.             background: var(--primary-blue);
  353.             color: white;
  354.             border: none;
  355.             border-radius: 50%;
  356.             display: flex;
  357.             align-items: center;
  358.             justify-content: center;
  359.             cursor: pointer;
  360.             font-size: 1.2rem;
  361.             opacity: 0;
  362.             visibility: hidden;
  363.             transition: var(--transition);
  364.             box-shadow: var(--shadow-lg);
  365.         }
  367.         .back-to-top.visible {
  368.             opacity: 1;
  369.             visibility: visible;
  370.         }
  372.         .back-to-top:hover {
  373.             background: var(--primary-blue-dark);
  374.             transform: translateY(-5px);
  375.         }
  377.         /* Mobile Sidebar */
  378.         .mobile-sidebar {
  379.             position: fixed;
  380.             top: 0;
  381.             left: -320px;
  382.             width: 320px;
  383.             height: 100vh;
  384.             background: white;
  385.             z-index: 2000;
  386.             transition: left 0.3s ease;
  387.             overflow-y: auto;
  388.             box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
  389.         }
  391.         .mobile-sidebar.active {
  392.             left: 0;
  393.         }
  395.         .mobile-overlay {
  396.             position: fixed;
  397.             top: 0;
  398.             left: 0;
  399.             width: 100%;
  400.             height: 100%;
  401.             background: rgba(0, 0, 0, 0.5);
  402.             z-index: 1999;
  403.             opacity: 0;
  404.             visibility: hidden;
  405.             transition: all 0.3s ease;
  406.         }
  408.         .mobile-overlay.active {
  409.             opacity: 1;
  410.             visibility: visible;
  411.         }
  413.         .sidebar-header {
  414.             display: flex;
  415.             justify-content: space-between;
  416.             align-items: center;
  417.             padding: 1.5rem;
  418.             border-bottom: 1px solid var(--border-color);
  419.         }
  421.         .sidebar-logo .logo-text {
  422.             font-family: var(--font-primary);
  423.             font-size: 1.5rem;
  424.             font-weight: 900;
  425.             color: var(--primary-blue);
  426.             letter-spacing: 1px;
  427.         }
  429.         .sidebar-logo .logo-tagline {
  430.             font-size: 0.65rem;
  431.             color: var(--text-light);
  432.             text-transform: uppercase;
  433.             letter-spacing: 2px;
  434.             margin-top: 2px;
  435.         }
  437.         .sidebar-close {
  438.             background: none;
  439.             border: none;
  440.             font-size: 1.5rem;
  441.             color: var(--text-primary);
  442.             cursor: pointer;
  443.             padding: 0.5rem;
  444.             transition: var(--transition);
  445.         }
  447.         .sidebar-close:hover {
  448.             color: var(--primary-blue);
  449.             transform: rotate(90deg);
  450.         }
  452.         .sidebar-nav {
  453.             padding: 1.5rem 0;
  454.         }
  456.         .sidebar-menu {
  457.             list-style: none;
  458.             padding: 0;
  459.             margin: 0;
  460.         }
  462.         .sidebar-menu > li {
  463.             border-bottom: 1px solid var(--border-color);
  464.         }
  466.         .sidebar-link {
  467.             display: flex;
  468.             justify-content: space-between;
  469.             align-items: center;
  470.             padding: 1rem 1.5rem;
  471.             color: var(--text-primary);
  472.             font-size: 1rem;
  473.             font-weight: 500;
  474.             transition: var(--transition);
  475.         }
  477.         .sidebar-link:hover {
  478.             color: var(--primary-blue);
  479.             background: var(--bg-light);
  480.             padding-left: 2rem;
  481.         }
  483.         .sidebar-dropdown .dropdown-toggle i {
  484.             transition: var(--transition);
  485.         }
  487.         .sidebar-dropdown.active .dropdown-toggle i {
  488.             transform: rotate(180deg);
  489.         }
  491.         .sidebar-submenu {
  492.             list-style: none;
  493.             padding: 0;
  494.             background: var(--bg-gray);
  495.             display: none;
  496.         }
  498.         .sidebar-dropdown.active .sidebar-submenu {
  499.             display: block;
  500.         }
  502.         .sidebar-submenu li {
  503.             border-bottom: 1px solid var(--border-color);
  504.         }
  506.         .sidebar-submenu li:last-child {
  507.             border-bottom: none;
  508.         }
  510.         .sidebar-submenu a {
  511.             display: block;
  512.             padding: 0.75rem 1.5rem 0.75rem 3rem;
  513.             color: var(--text-secondary);
  514.             font-size: 0.9rem;
  515.             transition: var(--transition);
  516.         }
  518.         .sidebar-submenu a:hover {
  519.             color: var(--primary-blue);
  520.             background: white;
  521.             padding-left: 3.5rem;
  522.         }
  524.         .sidebar-cta {
  525.             padding: 1.5rem;
  526.             margin-top: 1rem;
  527.         }
  529.         .btn-sidebar-cta {
  530.             display: block;
  531.             width: 100%;
  532.             padding: 0.75rem;
  533.             background: var(--primary-blue);
  534.             color: white;
  535.             text-align: center;
  536.             border-radius: 4px;
  537.             font-weight: 600;
  538.             transition: var(--transition);
  539.         }
  541.         .btn-sidebar-cta:hover {
  542.             background: var(--primary-blue-dark);
  543.             transform: translateY(-2px);
  544.         }
  546.         /* Hide main nav on mobile when sidebar is used */
  547.         @media (max-width: 768px) {
  548.             .main-nav {
  549.                 display: none !important;
  550.             }
  552.             body.sidebar-open {
  553.                 overflow: hidden;
  554.             }
  555.         }
  557.         /* Responsive */
  558.         @media (max-width: 768px) {
  559.             .mobile-menu-toggle {
  560.                 display: flex;
  561.             }
  563.             .btn-header {
  564.                 display: none;
  565.             }
  567.             h1 { font-size: 2rem; }
  568.             h2 { font-size: 1.75rem; }
  569.             h3 { font-size: 1.5rem; }
  571.             .slide-title {
  572.                 font-size: 2rem;
  573.             }
  575.             .slide-description {
  576.                 font-size: 1rem;
  577.             }
  579.             .slide-buttons {
  580.                 flex-direction: column;
  581.                 align-items: center;
  582.             }
  584.             .products-grid,
  585.             .news-grid {
  586.                 grid-template-columns: 1fr;
  587.             }
  589.             .service-row,
  590.             .service-row.reverse {
  591.                 grid-template-columns: 1fr;
  592.                 direction: ltr;
  593.             }
  595.             .contact-wrapper {
  596.                 grid-template-columns: 1fr;
  597.             }
  599.             .form-row {
  600.                 grid-template-columns: 1fr;
  601.             }
  603.             .footer-top {
  604.                 grid-template-columns: 1fr;
  605.                 text-align: center;
  606.             }
  608.             .footer-bottom-content {
  609.                 flex-direction: column;
  610.                 gap: 1rem;
  611.                 text-align: center;
  612.             }
  614.             .footer-legal {
  615.                 flex-wrap: wrap;
  616.                 justify-content: center;
  617.             }
  619.             .footer-social {
  620.                 justify-content: center;
  621.             }
  622.         }
  624.         @media (max-width: 480px) {
  625.             .container {
  626.                 padding: 0 15px;
  627.             }
  629.             section {
  630.                 padding: 3rem 0;
  631.             }
  632.         }
  633.     </style>
  634. <main>
  635.         <div class="container px-1 ">
  636.             
  637.                 <h1>Contact </h1>
  638.                 </div>
  639.                 <!-- Contact information -->
  640.                 <div class="row">
  641.                 <div class="col-lg-2"></div>
  642.                 <div class="col-lg-8">
  643.         <div class="row mt-5">
  644.             <div class="col-md-12 mx-auto">
  645.                 <div class="card border-info mb-3">
  646.                     <div class="card-header text-center">Contact us</div>
  647.                     <div class="card-body text-center text-info">
  648.                         <form name="contactForm" id='contact_form_contact' class="form-border" method="post" enctype="multipart/form-data">
  649.                     <div class="form-header">
  650.                         <h3>Send us a message</h3>
  651.                         <p>Our organizing team will respond within 24 business hours.</p>
  652.                     </div>
  654.                     <div class="form-row">
  655.                         <div class="form-group" style="text-align: left;">
  656.                             <label>First Name *</label>
  657.                             <input type="text" name="prenom" id="prenom" placeholder="First Name" required>
  658.                         </div>
  659.                         <div class="form-group"style="text-align: left;">
  660.                             <label>Last Name *</label>
  661.                             <input type="text"  name="nom" id="nom"  placeholder="Last Name" required>
  662.                         </div>
  663.                     </div>
  665.                     <div class="form-row">
  666.                         <div class="form-group" style="text-align: left;">
  667.                             <label>Professional email *</label>
  668.                             <input type="email"  name="email" id="email"  placeholder="l.firstname@company.com" required>
  669.                         </div>
  670.                         <div class="form-group" style="text-align: left;">
  671.                             <label>Phone</label>
  672.                             <input type="tel"  name="tel" id="tel"  placeholder="+33 6 12 34 56 78">
  673.                         </div>
  674.                     </div>
  676.                     <div class="form-row">
  677.                         <div class="form-group" style="text-align: left;">
  678.                             <label>Company/Organization *</label>
  679.                             <input type="text"  name="entreprise" id="entreprise"  placeholder="Name of your company/organization" required>
  680.                         </div>
  681.                         <div class="form-group" style="text-align: left;">
  682.                             <label>Function/Position</label>
  683.                             <input type="text"  name="poste" id="poste"  placeholder="HR Director, CTO, etc.">
  684.                         </div>
  685.                     </div>
  686.                     
  688.                     <div class="form-group" style="text-align: left;">
  689.                         <label>Message *</label>
  690.                         <textarea  name="message" id="message"  rows="5" placeholder="Your message..." required></textarea>
  691.                     </div>
  693.                     <div class="form-group checkbox-group">
  694.                         <input type="checkbox" id="newsletter" name="newsletter">
  695.                         <label for="newsletter">I would like to receive news from RFMI</label>
  696.                     </div>
  698.                     <!-- reCAPTCHA v3 
  699.                     <div  id="captcha" class="g-recaptcha" data-sitekey="6LdaTAksAAAAAG8ngUY4zva_9J1FOEgXaYSnwkx1"
  701.                           data-callback="recaptchaCallback"></div>
  702.                     <br>-->
  704.                     <button type="submit" class="btn-submit" id='send_message'   onclick="addContact()">
  706.                         Send message <i class="fas fa-paper-plane"></i>
  707.                     </button>
  708.                     <!-- <button type="submit" class="btn-submit" id='send_message' disabled  onclick="addContact()">
  710.                         Envoyer le message <i class="fas fa-paper-plane"></i>
  711.                     </button>-->
  716.                 </form>
  717.                     </div>
  718.                 </div>
  719.                 </div>
  720.                 </div>
  721.                 </div>
  722.                 </div>
  723.                  <script>
  724.     function addContact() {
  725.         event.preventDefault(); // Empêche la soumission classique du formulaire
  727.         // Vérifiez si tous les champs requis sont remplis
  728.         const nom = document.getElementById('nom').value.trim();
  729.         const prenom = document.getElementById('prenom').value.trim();
  730.         const email = document.getElementById('email').value.trim();
  731.         // const titre = document.getElementById('titre').value.trim();
  732.         const message = document.getElementById('message').value.trim();
  733.         const tel = document.getElementById('tel').value.trim();
  734.         const entreprise = document.getElementById('entreprise').value.trim();
  735.         const poste = document.getElementById('poste').value.trim();
  736.         //const sujet = document.getElementById('sujet').value.trim();
  739.         var formData = new FormData(document.getElementById('contact_form_contact'));
  741.         fetch("{{ path('app_contact_new') }}", {
  742.             method: "POST",
  743.             body: formData
  744.         })
  745.             .then(response => response.json())
  746.             .then(data => {
  747.                 console.log("Success:", data);
  748.                 if (data.success) {
  749.                     document.getElementById('contact_form_contact').reset();
  750.                         Swal.fire({
  751.                             title: 'Merci pour votre message !',
  752.                             text: 'Nous vous répondrons dans les plus brefs délais.',
  753.                             icon: 'success',
  754.                             confirmButtonText: 'OK'
  755.                         });
  756.                 } else {
  757.                     console.log("Success:", data);
  758.                     Swal.fire('Erreur!', 'Un problème est survenu lors de l\'envoi.', 'error');
  759.                 }
  760.             })
  761.             .catch((error) => {
  762.                 console.error('Error:', error);
  763.                 Swal.fire('Erreur!', 'Un problème est survenu lors de l\'envoi.', 'error');
  764.             });
  765.     }
  766.     </script>
  767.     <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  768. <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  769. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  770.                 </div>
  771.                 
  772.                 </main>
  775. {% endblock %}