templates/application/whileresume/application/jobs/new_en.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 css %}
  8.     <style>
  9.         /* ==================== SYSTÈME DE GRILLE COMPLET ==================== */
  11.         /* Container */
  12.         .container {
  13.             width: 100%;
  14.             padding-right: 15px;
  15.             padding-left: 15px;
  16.             margin-right: auto;
  17.             margin-left: auto;
  18.         }
  20.         @media (min-width: 576px) {
  21.             .container { max-width: 540px; }
  22.         }
  24.         @media (min-width: 768px) {
  25.             .container { max-width: 720px; }
  26.         }
  28.         @media (min-width: 992px) {
  29.             .container { max-width: 960px; }
  30.         }
  32.         @media (min-width: 1200px) {
  33.             .container { max-width: 1140px; }
  34.         }
  36.         @media (min-width: 1400px) {
  37.             .container { max-width: 1320px; }
  38.         }
  40.         /* Container fluide */
  41.         .container-fluid {
  42.             width: 100%;
  43.             padding-right: 15px;
  44.             padding-left: 15px;
  45.             margin-right: auto;
  46.             margin-left: auto;
  47.         }
  49.         /* Row */
  50.         .row {
  51.             display: flex;
  52.             flex-wrap: wrap;
  53.             margin-left: -15px;
  54.             margin-right: -15px;
  55.         }
  57.         /* Colonnes de base */
  58.         [class*="col-"] {
  59.             position: relative;
  60.             width: 100%;
  61.             padding-left: 15px;
  62.             padding-right: 15px;
  63.         }
  65.         /* ==================== COLONNES PAR DÉFAUT (Mobile) ==================== */
  66.         .col {
  67.             flex-basis: 0;
  68.             flex-grow: 1;
  69.             max-width: 100%;
  70.         }
  72.         .col-auto {
  73.             flex: 0 0 auto;
  74.             width: auto;
  75.             max-width: 100%;
  76.         }
  78.         .col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  79.         .col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  80.         .col-3 { flex: 0 0 25%; max-width: 25%; }
  81.         .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  82.         .col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  83.         .col-6 { flex: 0 0 50%; max-width: 50%; }
  84.         .col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  85.         .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  86.         .col-9 { flex: 0 0 75%; max-width: 75%; }
  87.         .col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  88.         .col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  89.         .col-12 { flex: 0 0 100%; max-width: 100%; }
  91.         /* ==================== SMALL (≥576px) ==================== */
  92.         @media (min-width: 576px) {
  93.             .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  94.             .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  95.             .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  96.             .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  97.             .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  98.             .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  99.             .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  100.             .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  101.             .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  102.             .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  103.             .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  104.             .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  105.             .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  106.             .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  107.         }
  109.         /* ==================== MEDIUM (≥768px) ==================== */
  110.         @media (min-width: 768px) {
  111.             .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  112.             .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  113.             .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  114.             .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  115.             .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  116.             .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  117.             .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  118.             .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  119.             .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  120.             .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  121.             .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  122.             .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  123.             .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  124.             .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  125.         }
  127.         /* ==================== LARGE (≥992px) ==================== */
  128.         @media (min-width: 992px) {
  129.             .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  130.             .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  131.             .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  132.             .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  133.             .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  134.             .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  135.             .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  136.             .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  137.             .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  138.             .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  139.             .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  140.             .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  141.             .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  142.             .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  143.         }
  145.         /* ==================== EXTRA LARGE (≥1200px) ==================== */
  146.         @media (min-width: 1200px) {
  147.             .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  148.             .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  149.             .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  150.             .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  151.             .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  152.             .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  153.             .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  154.             .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  155.             .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  156.             .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  157.             .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  158.             .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  159.             .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  160.             .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  161.         }
  163.         /* ==================== EXTRA EXTRA LARGE (≥1400px) ==================== */
  164.         @media (min-width: 1400px) {
  165.             .col-xxl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  166.             .col-xxl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  167.             .col-xxl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  168.             .col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  169.             .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  170.             .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  171.             .col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  172.             .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  173.             .col-xxl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  174.             .col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  175.             .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  176.             .col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  177.             .col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  178.             .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
  179.         }
  181.         /* ==================== UTILITAIRES DE GRILLE ==================== */
  183.         /* Alignement horizontal */
  184.         .row.justify-start { justify-content: flex-start; }
  185.         .row.justify-center { justify-content: center; }
  186.         .row.justify-end { justify-content: flex-end; }
  187.         .row.justify-between { justify-content: space-between; }
  188.         .row.justify-around { justify-content: space-around; }
  189.         .row.justify-evenly { justify-content: space-evenly; }
  191.         /* Alignement vertical */
  192.         .row.align-start { align-items: flex-start; }
  193.         .row.align-center { align-items: center; }
  194.         .row.align-end { align-items: flex-end; }
  195.         .row.align-stretch { align-items: stretch; }
  196.         .row.align-baseline { align-items: baseline; }
  198.         /* Pas de gutters */
  199.         .row.no-gutters {
  200.             margin-left: 0;
  201.             margin-right: 0;
  202.         }
  204.         .row.no-gutters > [class*="col-"] {
  205.             padding-left: 0;
  206.             padding-right: 0;
  207.         }
  209.         /* ==================== UTILITAIRES FORMULAIRE ==================== */
  210.         .form-group {
  211.             margin-bottom: 1rem;
  212.         }
  214.         .form-label {
  215.             display: block;
  216.             margin-bottom: 0.5rem;
  217.             font-weight: 500;
  218.         }
  220.         .bordered-section {
  221.             border: 1px solid #dee2e6;
  222.             border-radius: 0.25rem;
  223.             padding: 1rem;
  224.             margin-bottom: 1rem;
  225.         }
  226.     </style>
  227. {% endblock css %}
  229. {% block body %}
  231.     <div id="hero_header" class="hero-header section panel overflow-hidden">
  232.         <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>
  233.         <div class="section-outer panel py-8 lg:py-9 xl:py-10">
  234.             <div class="container">
  235.                 <div class="section-inner panel">
  236.                     <div class="d-none xl:d-block">
  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: 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>
  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: 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>
  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: 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>
  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: 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>
  241.                         <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>
  242.                         <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>
  243.                     </div>
  244.                     <div class="row child-cols-12 justify-center items-center g-8">
  245.                         <div class="lg:col-12">
  246.                             <div class="panel vstack gap-4 lg:gap-8">
  247.                                 <div class="panel vstack justify-center items-center gap-2 px-2 pt-4 text-center">
  249.                                     <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>
  251.                                     <p class="fs-6 xl:fs-4 xl:px-10 dark:text-white text-opacity-70">
  252.                                         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>
  253.                                     </p>
  255.                                     <div class="vstack md:hstack justify-center">
  256.                                         <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>
  257.                                     </div>
  259.                                 </div>
  260.                                 <div class="hero-scroll-scene panel max-w-850px mx-auto">
  261.                                     <div class="panel border shadow-lg rounded-1-5 p-1 bg-white dark:bg-gray-800 overflow-hidden">
  262.                                         <img class="rounded-default" src="/uploads/home.jpg" alt="Hero image">
  263.                                     </div>
  264.                                     <div class="hero-ten-01 position-absolute w-150px xl:w-250px d-none lg:d-block" style="top: 20%">
  265.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  266.                                     </div>
  267.                                     <div class="hero-ten-02 position-absolute w-200px xl:w-300px d-none lg:d-block"  style="bottom: 20%">
  268.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  269.                                     </div>
  270.                                     <div class="hero-ten-03 position-absolute w-150px d-none lg:d-block" style="top: 10%">
  271.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  272.                                     </div>
  273.                                 </div>
  275.                             </div>
  276.                         </div>
  277.                     </div>
  278.                 </div>
  279.             </div>
  280.         </div>
  281.     </div>
  283.     <div class="container mx-auto max-w-4xl py-12" id="form">
  285.         {{ form_start(form) }}
  287.         <div class="card mb-4" style="background-color:#F9FAFB; border:0;">
  288.             <div class="card-header" style="padding:20px;">
  289.                 <h3 class="h5">Job Information</h3>
  290.             </div>
  291.             <div class="card-body">
  292.                 <div class="row">
  293.                     <div class="col-md-12">
  294.                         <div class="form-group mb-3">
  295.                             {{ form_label(form.jobTitle) }}
  296.                             {{ form_widget(form.jobTitle) }}
  297.                         </div>
  298.                     </div>
  300.                     <div class="col-md-6">
  301.                         <div class="form-group mb-3">
  302.                             {{ form_label(form.category) }}
  303.                             {{ form_widget(form.category) }}
  304.                         </div>
  305.                     </div>
  307.                     <div class="col-md-6">
  308.                         <div class="form-group mb-3">
  309.                             {{ form_label(form.employmentType) }}
  310.                             {{ form_widget(form.employmentType) }}
  311.                         </div>
  312.                     </div>
  314.                     <div class="col-md-6">
  315.                         <div class="form-group mb-3">
  316.                             {{ form_label(form.experienceLevel) }}
  317.                             {{ form_widget(form.experienceLevel) }}
  318.                         </div>
  319.                     </div>
  321.                     <div class="col-md-6">
  322.                         <div class="form-group mb-3">
  323.                             {{ form_label(form.remoteWork) }}
  324.                             {{ form_widget(form.remoteWork) }}
  325.                         </div>
  326.                     </div>
  327.                 </div>
  328.             </div>
  329.         </div>
  331.         <div class="card mb-4" style="background-color:#FBF5FF; border:0;">
  332.             <div class="card-header" style="padding:20px;">
  333.                 <h3 class="h5">Company Information</h3>
  334.             </div>
  335.             <div class="card-body">
  336.                 <div class="row">
  337.                     <div class="col-md-6">
  338.                         <div class="form-group mb-3">
  339.                             {{ form_label(form.companyName) }}
  340.                             {{ form_widget(form.companyName) }}
  341.                         </div>
  342.                     </div>
  344.                     <div class="col-md-6">
  345.                         <div class="form-group mb-3">
  346.                             {{ form_label(form.companySize) }}
  347.                             {{ form_widget(form.companySize) }}
  348.                         </div>
  349.                     </div>
  351.                     <div class="col-md-6">
  352.                         <div class="form-group mb-3">
  353.                             {{ form_label(form.address) }}
  354.                             {{ form_widget(form.address) }}
  355.                         </div>
  356.                     </div>
  358.                     <div class="col-md-6">
  359.                         <div class="form-group mb-3">
  360.                             {{ form_label(form.website) }}
  361.                             {{ form_widget(form.website) }}
  362.                         </div>
  363.                     </div>
  365.                     <div class="col-md-12">
  366.                         <div class="form-group mb-3">
  367.                             {{ form_label(form.companyDescription) }}
  368.                             {{ form_widget(form.companyDescription) }}
  369.                         </div>
  370.                     </div>
  371.                 </div>
  372.             </div>
  373.         </div>
  375.         <div class="card mb-4" style="background-color:#F0FDF4; border:0;">
  376.             <div class="card-header" style="padding:20px;">
  377.                 <h3 class="h5">Required Skills &amp; Qualifications</h3>
  378.             </div>
  379.             <div class="card-body">
  380.                 <div class="row">
  381.                     <div class="col-md-12">
  382.                         <div class="form-group mb-3">
  383.                             {{ form_label(form.requiredSkills) }}
  384.                             {{ form_widget(form.requiredSkills) }}
  385.                             <div class="form-text">Add skills separated by commas</div>
  386.                         </div>
  387.                     </div>
  389.                     <div class="col-md-12">
  390.                         <div class="form-group mb-3">
  391.                             {{ form_label(form.niceToHaveSkills) }}
  392.                             {{ form_widget(form.niceToHaveSkills) }}
  393.                         </div>
  394.                     </div>
  395.                 </div>
  396.             </div>
  397.         </div>
  399.         <div class="card mb-4" style="background-color:#FFFCE8; border:0;">
  400.             <div class="card-header" style="padding:20px;">
  401.                 <h3 class="h5">Job Description</h3>
  402.             </div>
  403.             <div class="card-body">
  404.                 <div class="row">
  405.                     <div class="col-md-12">
  406.                         <div class="form-group mb-3">
  407.                             {{ form_label(form.jobSummary) }}
  408.                             {{ form_widget(form.jobSummary) }}
  409.                         </div>
  410.                     </div>
  412.                     <div class="col-md-12">
  413.                         <div class="form-group mb-3">
  414.                             {{ form_label(form.keyResponsabilities) }}
  415.                             {{ form_widget(form.keyResponsabilities) }}
  416.                         </div>
  417.                     </div>
  419.                     <div class="col-md-12">
  420.                         <div class="form-group mb-3">
  421.                             {{ form_label(form.requirements) }}
  422.                             {{ form_widget(form.requirements) }}
  423.                         </div>
  424.                     </div>
  425.                 </div>
  426.             </div>
  427.         </div>
  429.         <div class="card mb-4" style="background-color:#FFF8ED; border:0;">
  430.             <div class="card-header" style="padding:20px;">
  431.                 <h3 class="h5">Compensation &amp; Benefits</h3>
  432.             </div>
  433.             <div class="card-body">
  434.                 <div class="row">
  435.                     <div class="col-md-3">
  436.                         <div class="form-group mb-3">
  437.                             <label class="form-label">Salary Min</label>
  438.                             <div class="input-group">
  439.                                 {{ form_widget(form.salaryMin, {'attr': {'placeholder': 'Min'}}) }}
  440.                             </div>
  441.                         </div>
  442.                     </div>
  444.                     <div class="col-md-3">
  445.                         <div class="form-group mb-3">
  446.                             <label class="form-label">Salary Max</label>
  447.                             <div class="input-group">
  448.                                 {{ form_widget(form.salaryMax, {'attr': {'placeholder': 'Max'}}) }}
  449.                             </div>
  450.                         </div>
  451.                     </div>
  453.                     <div class="col-md-3">
  454.                         <div class="form-group mb-3">
  455.                             <label class="form-label">Devise</label>
  456.                             <div class="input-group">
  457.                                 {{ form_widget(form.devise) }}
  458.                             </div>
  459.                         </div>
  460.                     </div>
  462.                     <div class="col-md-3">
  463.                         <div class="form-group mb-3">
  464.                             <label class="form-label">Period</label>
  465.                             {{ form_widget(form.salaryPeriod) }}
  466.                         </div>
  467.                     </div>
  469.                     <div class="col-md-12">
  470.                         <div class="form-group mb-3">
  471.                             {{ form_label(form.benefits) }}
  472.                             {{ form_widget(form.benefits) }}
  473.                         </div>
  474.                     </div>
  475.                 </div>
  476.             </div>
  477.         </div>
  479.         <div class="card mb-4" style="background-color:#EFF6FF; border:0;">
  480.             <div class="card-header" style="padding:20px;">
  481.                 <h3 class="h5">Contact Information</h3>
  482.             </div>
  483.             <div class="card-body">
  484.                 <div class="row">
  485.                     <div class="col-md-6">
  486.                         <div class="form-group mb-3">
  487.                             {{ form_label(form.contactEmail) }}
  488.                             {{ form_widget(form.contactEmail) }}
  489.                         </div>
  490.                     </div>
  492.                     <div class="col-md-6">
  493.                         <div class="form-group mb-3">
  494.                             {{ form_label(form.contactName) }}
  495.                             {{ form_widget(form.contactName) }}
  496.                         </div>
  497.                     </div>
  499.                     <div class="col-md-12">
  500.                         <div class="form-group mb-3">
  501.                             {{ form_label(form.contactURL) }}
  502.                             {{ form_widget(form.contactURL) }}
  503.                         </div>
  504.                     </div>
  505.                 </div>
  506.             </div>
  507.         </div>
  509.         <div class="text-center pt-4">
  511.             <button type="submit" class="btn btn-primary btn-lg px-5">
  512.                 Post Job Now - $0
  513.             </button>
  515.             <div class="text-muted small mt-3">
  516.                 <p class="mb-1">
  517.                     By posting a job, you agree to our <a href="/terms" class="text-primary hover:underline">Terms of Service</a>
  518.                     and <a href="/privacy" class="text-primary hover:underline">Privacy Policy</a>
  519.                 </p>
  520.             </div>
  521.         </div>
  523.         {{ form_rest(form) }}
  525.         {{ form_end(form) }}
  526.     </div>
  528. {% endblock body %}