review style of the job posting pages

components/JoinUs/MissionDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer>
     <div class="job-section">
-      <v-row class="mb-6">
+      <v-row class="mb-6 center-90">
         <v-col class="d-flex align-items-center">
           <v-btn
             to="/nous-rejoindre"
@@ -30,9 +30,9 @@
             description="Offre d'emploi"
           />
 
-          <LayoutUITitlePage>
+          <h3>
             {{ job.title }}
-          </LayoutUITitlePage>
+          </h3>
 
           <v-row class="details blue-content my-6">
             <v-col cols="12" md="6">
@@ -45,7 +45,7 @@
 
               <v-row>
                 <div>
-                  Location :
+                  Localisation :
                   <b>{{ job.postalCode }} {{ job.city }}</b>
                 </div>
               </v-row>
@@ -67,7 +67,7 @@
             </v-col>
           </v-row>
 
-          <v-row>
+          <v-row class="center-90">
             <p
               v-html="job.content"
               class="center-90 description mb-12"
@@ -75,10 +75,7 @@
           </v-row>
 
           <v-row class="d-flex justify-center align-center">
-            <v-btn
-              prepend-icon="fas fa-info"
-              class="btn-apply mb-12"
-            >
+            <v-btn class="btn-apply mb-12">
               Je postule
             </v-btn>
           </v-row>
@@ -146,9 +143,17 @@ const formatDate = (date: string) => {
 }
 
 .job-section {
-  margin: 32px 12%;
+  margin: 32px 0;
+
+  h3 {
+    font-size: 32px;
+    width: 100%;
+    text-align: center;
+    text-transform: uppercase;
+  }
 
   .details {
+    padding: 0 20%;
     background-color: var(--secondary-color);
     color: var(--on-secondary-color);
     height: 10rem;
@@ -176,11 +181,12 @@ const formatDate = (date: string) => {
   }
 
   .description {
-    color: var(--primary-color);
+    color: var(--on-neutral-color);
     text-align: justify;
-    font-size: 1.875rem;
+    font-size: 21px;
     font-weight: 500;
     line-height: 2.125rem;
+    padding: 12px 36px;
   }
 }
 
@@ -192,7 +198,7 @@ const formatDate = (date: string) => {
 
 .btn-apply {
   background: var(--secondary-color);
-  color: var(--neutral-color);
+  color: var(--on-secondary-color);
   display: flex;
   left: 0;
   padding: 25px 28px;

components/JoinUs/Missions.vue

@@ -36,12 +36,12 @@
         </v-btn>
       </div>
 
-      <v-row class="location-container">
+      <div class="location-container">
         <v-icon icon="fas fa-map-marker" />
         <div class="location">
           {{ job.city }}
         </div>
-      </v-row>
+      </div>
     </div>
 
     <v-row>

pages/nous-rejoindre/[id].vue

@@ -1,7 +1,13 @@
 <template>
   <!-- Balises meta: définies dans le component Details -->
+
+  <LayoutUITitlePage>
+    Nous rejoindre
+    <template #subtitle>Découvrez toutes les opportunités de carrière d’Opentalent</template>
+  </LayoutUITitlePage>
+
   <CommonBanner
-    imageSrc="/images/actu/pub.png"
+    imageSrc="/images/join/join.jpg"
     imageAlt="banner"
   />
 
@@ -9,3 +15,5 @@
 
   <LayoutFooterPrefooter />
 </template>
+<script setup lang="ts">
+</script>