templates/application/whileresume/application/jobs/new_fr.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/lexend/layout.html.twig' %}
  3. {% block title %}Postez votre Offre d'Emploi{% endblock title %}
  4. {% block description %}{% endblock description %}
  5. {% block robots %}index,follow{% endblock robots %}
  7. {% block body %}
  9.     <style>
  10.         /* ==================== SYSTÈME DE GRILLE COMPLET ==================== */
  12.         /* Container */
  13.         .container {
  14.             width: 100%;
  15.             padding-right: 15px;
  16.             padding-left: 15px;
  17.             margin-right: auto;
  18.             margin-left: auto;
  19.         }
  21.         @media (min-width: 576px) {
  22.             .container { max-width: 540px; }
  23.         }
  25.         @media (min-width: 768px) {
  26.             .container { max-width: 720px; }
  27.         }
  29.         @media (min-width: 992px) {
  30.             .container { max-width: 960px; }
  31.         }
  33.         @media (min-width: 1200px) {
  34.             .container { max-width: 1140px; }
  35.         }
  37.         @media (min-width: 1400px) {
  38.             .container { max-width: 1320px; }
  39.         }
  41.         /* Container fluide */
  42.         .container-fluid {
  43.             width: 100%;
  44.             padding-right: 15px;
  45.             padding-left: 15px;
  46.             margin-right: auto;
  47.             margin-left: auto;
  48.         }
  50.         /* Row */
  51.         .row {
  52.             display: flex;
  53.             flex-wrap: wrap;
  54.             margin-left: -15px;
  55.             margin-right: -15px;
  56.         }
  58.         /* Colonnes de base */
  59.         [class*="col-"] {
  60.             position: relative;
  61.             width: 100%;
  62.             padding-left: 15px;
  63.             padding-right: 15px;
  64.         }
  66.         /* ==================== COLONNES PAR DÉFAUT (Mobile) ==================== */
  67.         .col {
  68.             flex-basis: 0;
  69.             flex-grow: 1;
  70.             max-width: 100%;
  71.         }
  73.         .col-auto {
  74.             flex: 0 0 auto;
  75.             width: auto;
  76.             max-width: 100%;
  77.         }
  79.         .col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  80.         .col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  81.         .col-3 { flex: 0 0 25%; max-width: 25%; }
  82.         .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  83.         .col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  84.         .col-6 { flex: 0 0 50%; max-width: 50%; }
  85.         .col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  86.         .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  87.         .col-9 { flex: 0 0 75%; max-width: 75%; }
  88.         .col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  89.         .col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  90.         .col-12 { flex: 0 0 100%; max-width: 100%; }
  92.         /* ==================== SMALL (≥576px) ==================== */
  93.         @media (min-width: 576px) {
  94.             .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  95.             .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  96.             .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  97.             .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  98.             .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  99.             .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  100.             .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  101.             .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  102.             .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  103.             .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  104.             .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  105.             .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  106.             .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  107.             .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  108.         }
  110.         /* ==================== MEDIUM (≥768px) ==================== */
  111.         @media (min-width: 768px) {
  112.             .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  113.             .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  114.             .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  115.             .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  116.             .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  117.             .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  118.             .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  119.             .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  120.             .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  121.             .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  122.             .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  123.             .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  124.             .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  125.             .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  126.         }
  128.         /* ==================== LARGE (≥992px) ==================== */
  129.         @media (min-width: 992px) {
  130.             .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  131.             .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  132.             .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  133.             .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  134.             .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  135.             .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  136.             .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  137.             .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  138.             .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  139.             .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  140.             .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  141.             .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  142.             .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  143.             .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  144.         }
  146.         /* ==================== EXTRA LARGE (≥1200px) ==================== */
  147.         @media (min-width: 1200px) {
  148.             .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  149.             .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  150.             .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  151.             .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  152.             .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  153.             .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  154.             .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  155.             .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  156.             .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  157.             .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  158.             .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  159.             .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  160.             .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  161.             .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  162.         }
  164.         /* ==================== EXTRA EXTRA LARGE (≥1400px) ==================== */
  165.         @media (min-width: 1400px) {
  166.             .col-xxl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  167.             .col-xxl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  168.             .col-xxl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  169.             .col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  170.             .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  171.             .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  172.             .col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  173.             .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  174.             .col-xxl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  175.             .col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  176.             .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  177.             .col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  178.             .col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  179.             .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
  180.         }
  182.         /* ==================== UTILITAIRES DE GRILLE ==================== */
  184.         /* Alignement horizontal */
  185.         .row.justify-start { justify-content: flex-start; }
  186.         .row.justify-center { justify-content: center; }
  187.         .row.justify-end { justify-content: flex-end; }
  188.         .row.justify-between { justify-content: space-between; }
  189.         .row.justify-around { justify-content: space-around; }
  190.         .row.justify-evenly { justify-content: space-evenly; }
  192.         /* Alignement vertical */
  193.         .row.align-start { align-items: flex-start; }
  194.         .row.align-center { align-items: center; }
  195.         .row.align-end { align-items: flex-end; }
  196.         .row.align-stretch { align-items: stretch; }
  197.         .row.align-baseline { align-items: baseline; }
  199.         /* Pas de gutters */
  200.         .row.no-gutters {
  201.             margin-left: 0;
  202.             margin-right: 0;
  203.         }
  205.         .row.no-gutters > [class*="col-"] {
  206.             padding-left: 0;
  207.             padding-right: 0;
  208.         }
  210.         /* ==================== UTILITAIRES FORMULAIRE ==================== */
  211.         .form-group {
  212.             margin-bottom: 1rem;
  213.         }
  215.         .form-label {
  216.             display: block;
  217.             margin-bottom: 0.5rem;
  218.             font-weight: 500;
  219.         }
  221.         .bordered-section {
  222.             border: 1px solid #dee2e6;
  223.             border-radius: 0.25rem;
  224.             padding: 1rem;
  225.             margin-bottom: 1rem;
  226.         }
  227.     </style>
  229.     <div id="hero_header" class="hero-header section panel overflow-hidden">
  230.         <div class="position-absolute top-0 start-0 end-0 h-screen bg-secondary dark:bg-gray-300 dark:bg-opacity-15 rounded-bottom-2 lg:rounded-bottom-5"></div>
  231.         <div class="section-outer panel py-8 lg:py-9 xl:py-10">
  232.             <div class="container">
  233.                 <div class="section-inner panel">
  234.                     <div class="d-none xl:d-block">
  235.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 5%; left: 5%" data-anime="translateY: [0, 10]; easing: linear; loop: true; direction: alternate; delay: 0;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  236.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 20%; left: 10%" data-anime="translateY: [0, 15]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  237.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 35%; left: 0%" data-anime="translateY: [0, 5]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  238.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 5%; right: 5%" data-anime="translateY: [0, 10]; easing: linear; loop: true; direction: alternate; delay: 0;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  239.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 20%; right: 10%" data-anime="translateY: [0, 15]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  240.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 35%; right: 0%" data-anime="translateY: [0, 5]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  241.                     </div>
  242.                     <div class="row child-cols-12 justify-center items-center g-8">
  243.                         <div class="lg:col-12">
  244.                             <div class="panel vstack gap-4 lg:gap-8">
  245.                                 <div class="panel vstack justify-center items-center gap-2 px-2 pt-4 text-center">
  247.                                     <h1 class="h2 md:h1 lg:display-5 m-0">Poster votre <span class="text-primary dark:text-tertiary">offre d'emploi</span> <br /> dans la tech</h1>
  249.                                     <p class="fs-6 xl:fs-4 xl:px-10 dark:text-white text-opacity-70">
  250.                                         Vous recrutez dans la tech ? <span class="text-primary dark:text-tertiary">Postez votre offre gratuitement</span> et connectez-vous aux meilleurs talents. Formulaire simple et rapide. Bénéficiez avec votre accès business d'un matching intelligent par IA. Accès direct aux profils tech qualifiés qui correspondent exactement à vos besoins. <span class="text-primary dark:text-tertiary">Recrutez plus vite, recrutez mieux.</span>
  251.                                     </p>
  253.                                     <div class="vstack md:hstack justify-center">
  254.                                         <a href="#form" class="btn btn-md btn-primary dark:border-tertiary dark:text-tertiary dark:hover:bg-tertiary dark:hover:text-primary-700 border-2 px-3 w-auto" style="margin-top:10px;">Poster gratuitement <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  255.                                     </div>
  257.                                 </div>
  258.                                 <div class="hero-scroll-scene panel max-w-850px mx-auto">
  259.                                     <div class="panel border shadow-lg rounded-1-5 p-1 bg-white dark:bg-gray-800 overflow-hidden">
  260.                                         <img class="rounded-default" src="/uploads/home.jpg" alt="Hero image">
  261.                                     </div>
  262.                                     <div class="hero-ten-01 position-absolute w-150px xl:w-250px d-none lg:d-block" style="top: 20%">
  263.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  264.                                     </div>
  265.                                     <div class="hero-ten-02 position-absolute w-200px xl:w-300px d-none lg:d-block"  style="bottom: 20%">
  266.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  267.                                     </div>
  268.                                     <div class="hero-ten-03 position-absolute w-150px d-none lg:d-block" style="top: 10%">
  269.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  270.                                     </div>
  271.                                 </div>
  273.                             </div>
  274.                         </div>
  275.                     </div>
  276.                 </div>
  277.             </div>
  278.         </div>
  279.     </div>
  281.     <div class="container mx-auto max-w-4xl py-12" id="form">
  283.         {{ form_start(form) }}
  285.         <div class="card mb-4" style="background-color:#F9FAFB; border:0;">
  286.             <div class="card-header" style="padding:20px;">
  287.                 <h3 class="h5">Job Information</h3>
  288.             </div>
  289.             <div class="card-body">
  290.                 <div class="row">
  291.                     <div class="col-md-12">
  292.                         <div class="form-group mb-3">
  293.                             {{ form_label(form.jobTitle) }}
  294.                             {{ form_widget(form.jobTitle) }}
  295.                         </div>
  296.                     </div>
  298.                     <div class="col-md-6">
  299.                         <div class="form-group mb-3">
  300.                             {{ form_label(form.category) }}
  301.                             {{ form_widget(form.category) }}
  302.                         </div>
  303.                     </div>
  305.                     <div class="col-md-6">
  306.                         <div class="form-group mb-3">
  307.                             {{ form_label(form.employmentType) }}
  308.                             {{ form_widget(form.employmentType) }}
  309.                         </div>
  310.                     </div>
  312.                     <div class="col-md-6">
  313.                         <div class="form-group mb-3">
  314.                             {{ form_label(form.experienceLevel) }}
  315.                             {{ form_widget(form.experienceLevel) }}
  316.                         </div>
  317.                     </div>
  319.                     <div class="col-md-6">
  320.                         <div class="form-group mb-3">
  321.                             {{ form_label(form.remoteWork) }}
  322.                             {{ form_widget(form.remoteWork) }}
  323.                         </div>
  324.                     </div>
  325.                 </div>
  326.             </div>
  327.         </div>
  329.         <div class="card mb-4" style="background-color:#FBF5FF; border:0;">
  330.             <div class="card-header" style="padding:20px;">
  331.                 <h3 class="h5">Company Information</h3>
  332.             </div>
  333.             <div class="card-body">
  334.                 <div class="row">
  335.                     <div class="col-md-6">
  336.                         <div class="form-group mb-3">
  337.                             {{ form_label(form.companyName) }}
  338.                             {{ form_widget(form.companyName) }}
  339.                         </div>
  340.                     </div>
  342.                     <div class="col-md-6">
  343.                         <div class="form-group mb-3">
  344.                             {{ form_label(form.companySize) }}
  345.                             {{ form_widget(form.companySize) }}
  346.                         </div>
  347.                     </div>
  349.                     <div class="col-md-6">
  350.                         <div class="form-group mb-3">
  351.                             {{ form_label(form.address) }}
  352.                             {{ form_widget(form.address) }}
  353.                         </div>
  354.                     </div>
  356.                     <div class="col-md-6">
  357.                         <div class="form-group mb-3">
  358.                             {{ form_label(form.website) }}
  359.                             {{ form_widget(form.website) }}
  360.                         </div>
  361.                     </div>
  363.                     <div class="col-md-12">
  364.                         <div class="form-group mb-3">
  365.                             {{ form_label(form.companyDescription) }}
  366.                             {{ form_widget(form.companyDescription) }}
  367.                         </div>
  368.                     </div>
  369.                 </div>
  370.             </div>
  371.         </div>
  373.         <div class="card mb-4" style="background-color:#F0FDF4; border:0;">
  374.             <div class="card-header" style="padding:20px;">
  375.                 <h3 class="h5">Required Skills &amp; Qualifications</h3>
  376.             </div>
  377.             <div class="card-body">
  378.                 <div class="row">
  379.                     <div class="col-md-12">
  380.                         <div class="form-group mb-3">
  381.                             {{ form_label(form.requiredSkills) }}
  382.                             {{ form_widget(form.requiredSkills) }}
  383.                             <div class="form-text">Add skills separated by commas</div>
  384.                         </div>
  385.                     </div>
  387.                     <div class="col-md-12">
  388.                         <div class="form-group mb-3">
  389.                             {{ form_label(form.niceToHaveSkills) }}
  390.                             {{ form_widget(form.niceToHaveSkills) }}
  391.                         </div>
  392.                     </div>
  393.                 </div>
  394.             </div>
  395.         </div>
  397.         <div class="card mb-4" style="background-color:#FFFCE8; border:0;">
  398.             <div class="card-header" style="padding:20px;">
  399.                 <h3 class="h5">Job Description</h3>
  400.             </div>
  401.             <div class="card-body">
  402.                 <div class="row">
  403.                     <div class="col-md-12">
  404.                         <div class="form-group mb-3">
  405.                             {{ form_label(form.jobSummary) }}
  406.                             {{ form_widget(form.jobSummary) }}
  407.                         </div>
  408.                     </div>
  410.                     <div class="col-md-12">
  411.                         <div class="form-group mb-3">
  412.                             {{ form_label(form.keyResponsabilities) }}
  413.                             {{ form_widget(form.keyResponsabilities) }}
  414.                         </div>
  415.                     </div>
  417.                     <div class="col-md-12">
  418.                         <div class="form-group mb-3">
  419.                             {{ form_label(form.requirements) }}
  420.                             {{ form_widget(form.requirements) }}
  421.                         </div>
  422.                     </div>
  423.                 </div>
  424.             </div>
  425.         </div>
  427.         <div class="card mb-4" style="background-color:#FFF8ED; border:0;">
  428.             <div class="card-header" style="padding:20px;">
  429.                 <h3 class="h5">Compensation &amp; Benefits</h3>
  430.             </div>
  431.             <div class="card-body">
  432.                 <div class="row">
  433.                     <div class="col-md-3">
  434.                         <div class="form-group mb-3">
  435.                             <label class="form-label">Salary Min</label>
  436.                             <div class="input-group">
  437.                                 {{ form_widget(form.salaryMin, {'attr': {'placeholder': 'Min'}}) }}
  438.                             </div>
  439.                         </div>
  440.                     </div>
  442.                     <div class="col-md-3">
  443.                         <div class="form-group mb-3">
  444.                             <label class="form-label">Salary Max</label>
  445.                             <div class="input-group">
  446.                                 {{ form_widget(form.salaryMax, {'attr': {'placeholder': 'Max'}}) }}
  447.                             </div>
  448.                         </div>
  449.                     </div>
  451.                     <div class="col-md-3">
  452.                         <div class="form-group mb-3">
  453.                             <label class="form-label">Devise</label>
  454.                             <div class="input-group">
  455.                                 {{ form_widget(form.devise) }}
  456.                             </div>
  457.                         </div>
  458.                     </div>
  460.                     <div class="col-md-3">
  461.                         <div class="form-group mb-3">
  462.                             <label class="form-label">Period</label>
  463.                             {{ form_widget(form.salaryPeriod) }}
  464.                         </div>
  465.                     </div>
  467.                     <div class="col-md-12">
  468.                         <div class="form-group mb-3">
  469.                             {{ form_label(form.benefits) }}
  470.                             {{ form_widget(form.benefits) }}
  471.                         </div>
  472.                     </div>
  473.                 </div>
  474.             </div>
  475.         </div>
  477.         <div class="card mb-4" style="background-color:#EFF6FF; border:0;">
  478.             <div class="card-header" style="padding:20px;">
  479.                 <h3 class="h5">Contact Information</h3>
  480.             </div>
  481.             <div class="card-body">
  482.                 <div class="row">
  483.                     <div class="col-md-6">
  484.                         <div class="form-group mb-3">
  485.                             {{ form_label(form.contactEmail) }}
  486.                             {{ form_widget(form.contactEmail) }}
  487.                         </div>
  488.                     </div>
  490.                     <div class="col-md-6">
  491.                         <div class="form-group mb-3">
  492.                             {{ form_label(form.contactName) }}
  493.                             {{ form_widget(form.contactName) }}
  494.                         </div>
  495.                     </div>
  497.                     <div class="col-md-12">
  498.                         <div class="form-group mb-3">
  499.                             {{ form_label(form.contactURL) }}
  500.                             {{ form_widget(form.contactURL) }}
  501.                         </div>
  502.                     </div>
  503.                 </div>
  504.             </div>
  505.         </div>
  507.         <div class="text-center pt-4">
  509.             <button type="submit" class="btn btn-primary btn-lg px-5">
  510.                 Post Job Now - $0
  511.             </button>
  513.             <div class="text-muted small mt-3">
  514.                 <p class="mb-1">
  515.                     By posting a job, you agree to our <a href="/terms" class="text-primary hover:underline">Terms of Service</a>
  516.                     and <a href="/privacy" class="text-primary hover:underline">Privacy Policy</a>
  517.                 </p>
  518.             </div>
  519.         </div>
  521.         {{ form_rest(form) }}
  523.         {{ form_end(form) }}
  524.     </div>
  526. {% endblock body %}