page contact

components/Contact/Banner.vue

@@ -0,0 +1,329 @@
+<template>
+  <LayoutContainer>
+    <LayoutUITitlePage
+      title="Besoin d'aide ?"
+      subtitle="Notre équipe est là pour vous. contactez-nous!. "
+    />
+    <v-row>
+      <v-col cols="12" style="position: relative">
+        <img
+          src="/images/formation/banner.jpg"
+          alt="line"
+          class="cover-image"
+        />
+      </v-col>
+    </v-row>
+    <div class="container-contact">
+      <v-form ref="form" v-model="valid" lazy-validation>
+        <v-container>
+          <h4 class="title-h4">Veuillez remplir le formulaire ci-dessous</h4>
+
+          <h6 class="infos">Vos coordonnées</h6>
+
+          <!-- Gender selection in one row -->
+          <v-row>
+            <v-col cols="12">
+              <v-radio-group v-model="gender" row mandatory inline>
+                <v-radio label="Madame" value="Madame"></v-radio>
+                <v-radio label="Monsieur" value="Monsieur"></v-radio>
+              </v-radio-group>
+            </v-col>
+          </v-row>
+
+          <!-- Name and Surname on the same line -->
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="name"
+                :rules="nameRules"
+                label="Nom*"
+                required
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="surname"
+                :rules="surnameRules"
+                label="Prénom*"
+                required
+              ></v-text-field>
+            </v-col>
+          </v-row>
+
+          <!-- Postal code and city on the same line -->
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="postalCode"
+                label="Code postal"
+                type="number"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field v-model="city" label="Ville"></v-text-field>
+            </v-col>
+          </v-row>
+
+          <!-- Email and phone on the same line -->
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="email"
+                :rules="emailRules"
+                label="Email*"
+                required
+                type="email"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="phone"
+                label="Téléphone"
+                type="tel"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+
+          <!-- Structure name on its own line -->
+          <v-row>
+            <v-col cols="12">
+              <v-text-field
+                v-model="structureName"
+                :rules="structureNameRules"
+                label="Nom de la structure*"
+                required
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <h6 class="infos">Votre demande concerne</h6>
+
+          <!-- Request type and product concerned on the same line -->
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-select
+                v-model="requestType"
+                :items="requestTypes"
+                label="Votre demande concerne"
+                outlined
+                dense
+              ></v-select>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="concernedProduct"
+                label="Le produit concerné"
+                outlined
+                dense
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <h6 class="infos">Votre message</h6>
+
+          <!-- Message on its own line -->
+          <v-row>
+            <v-col cols="12">
+              <v-textarea
+                v-model="message"
+                :rules="messageRules"
+                label="Votre message*"
+                required
+                outlined
+                dense
+                maxlength="400"
+              ></v-textarea>
+            </v-col>
+          </v-row>
+
+          <!-- Policy and  checkboxes -->
+          <v-row>
+            <v-col cols="12">
+              <v-checkbox
+                v-model="privacyPolicy"
+                :rules="[(v) => !!v || 'You must accept the privacy policy']"
+                label="J'ai pris connaissance de la politique de confidentialité et j'accepte le traitement de mes données personnelles par Opentalent."
+              ></v-checkbox>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+              <v-checkbox
+                v-model="newsletterSubscription"
+                label="Je souhaite recevoir des communications d'Opentalent par email (promotions, informations logiciel…). Je pourrai me désinscrire à tout moment."
+              ></v-checkbox>
+            </v-col>
+          </v-row>
+
+          <!-- Submit Button -->
+          <v-row>
+            <v-col cols="12">
+              <v-btn :disabled="!valid" color="primary" @click="submitForm"
+                >Envoyer</v-btn
+              >
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-form>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { ref, reactive, computed, toRefs } from "vue";
+
+const name = ref("");
+const surname = ref("");
+const email = ref("");
+const structureName = ref("");
+const message = ref("");
+const privacyPolicy = ref(false);
+const gender = ref(null);
+const postalCode = ref(null);
+const city = ref("");
+const phone = ref(null);
+const requestType = ref(null);
+const concernedProduct = ref("");
+const newsletterSubscription = ref(false);
+
+const validateName = (name) => !!name || "Name is required";
+const validateSurname = (surname) => !!surname || "Surname is required";
+const validateEmail = (email) =>
+  (!!email && /.+@.+\..+/.test(email)) || "E-mail must be valid";
+const validateStructureName = (structureName) =>
+  !!structureName || "Structure name is required";
+const validateMessage = (message) =>
+  (!!message && message.length <= 400) ||
+  "Message cannot exceed 400 characters";
+
+const valid = computed(() => {
+  return (
+    validateName(name.value) === true &&
+    validateSurname(surname.value) === true &&
+    validateEmail(email.value) === true &&
+    validateStructureName(structureName.value) === true &&
+    validateMessage(message.value) === true &&
+    privacyPolicy.value === true
+  );
+});
+
+const requestTypes = [
+  "Demande d'information",
+  "Demande de devis",
+  "Demande de démonstration",
+  "Demande d'option supplémentaire",
+  "Autre",
+];
+
+const formData = reactive({
+  gender: null,
+  postalCode: null,
+  city: "",
+  phone: null,
+  requestType: null,
+  concernedProduct: "",
+  newsletterSubscription, 
+});
+
+// Methods
+const submitForm = () => {
+  if (valid.value) {
+    console.log("Form submission goes here.");
+  } else {
+    console.log("Validation failed!");
+  }
+};
+
+const formDataRefs = toRefs(formData);
+const formRefs = {
+  ...formDataRefs,
+  name, 
+  surname, 
+  email, 
+  structureName,
+  message,
+  privacyPolicy,
+  valid, 
+};
+</script>
+
+<style scoped>
+.infos {
+  font-size: 20px;
+  color: #000000;
+  margin-bottom: 1rem;
+}
+
+.container-contact {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+.title-h4 {
+  font-size: 40px;
+  line-height: 95px;
+  color: #000000;
+  margin-bottom: 1rem;
+  /** gris moins opaque */
+  color: rgba(0, 0, 0, 0.3);
+}
+.image-text {
+  position: absolute;
+  top: 40px;
+  left: 20px;
+  font-family: "Barlow";
+  color: white;
+  font-size: 3rem;
+  width: 30rem;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 40px;
+}
+
+:deep().subtitle {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: 0.1rem;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+}
+
+.formation {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 90px;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  margin-bottom: 1rem;
+}
+
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.cover-image {
+  width: 100%;
+  height: 15rem;
+  object-fit: cover;
+  object-position: center 30%;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+</style>

components/Webinaire/Banner.vue

@@ -8,9 +8,6 @@
           alt="line"
           class="cover-image"
         />
-        <div class="image-text mt-12">
-          Et si vous passiez rapidement à la vitesse supérieure...
-        </div>
       </v-col>
     </v-row>
 

package.json

@@ -30,6 +30,8 @@
     "@syncfusion/ej2-vue-calendars": "^20.4.54",
     "@turf/turf": "^6.5.0",
     "@vue-leaflet/vue-leaflet": "^0.9.0",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.2.2",
     "axios": "^1.3.4",
     "core-js": "^3.15.1",

pages/nous-contacter.vue

@@ -0,0 +1,8 @@
+<template>
+  <LayoutNavigation />
+  <ContactBanner />
+</template>
+
+<script setup></script>
+
+<style scoped></style>

yarn.lock

@@ -3567,6 +3567,20 @@
     "@vue/compiler-dom" "^3.0.1"
     "@vue/server-renderer" "^3.0.1"
 
+"@vuelidate/core@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.3.tgz#40468c5ed15b72bde880a026b0699c2f0f1ecede"
+  integrity sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==
+  dependencies:
+    vue-demi "^0.13.11"
+
+"@vuelidate/validators@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.4.tgz#0a88a7b2b18f15fd9c384095593f369a6f7384e9"
+  integrity sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==
+  dependencies:
+    vue-demi "^0.13.11"
+
 "@vuepic/vue-datepicker@^4.2.2":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@vuepic/vue-datepicker/-/vue-datepicker-4.2.2.tgz#1d68d8c9c07a6f41c25d979209075ad14bde8a67"