dev

app/components/ContactSpecifique.vue

@@ -0,0 +1,88 @@
+<template>
+  <section class="contact_spe_cont">
+      <DsHeading as="h1" tone="default" textcase="uppercase">
+        {{titre}}
+      </DsHeading>
+      <div class="confetti"></div>
+      <div class="contact_spe_descripion">
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--nom">{{ nom }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--poste">{{ poste }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ numero }}</div>
+          <div class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ mail }}</div>
+      </div>
+  </section>
+</template>
+
+<script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+
+  defineProps({
+    titre: {
+      type: String,
+      required: true
+    },    
+    nom: {
+      type: String,
+      required: true
+    },
+    poste: {
+      type: String,
+      required: true
+    },
+    numero: {
+      type: String,
+      required: true
+    },
+    mail: {
+      type: String,
+      required: true
+    }
+  })
+</script>
+
+<style lang="scss">
+
+  .contact_spe_cont {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      @media (max-width: 599px) {
+          padding-left: 10px;
+          padding-right: 10px;
+      }
+
+      font-family: var(--font-roboto);
+
+      margin-top: 30px;
+
+      h1 {
+        text-align: center;
+      }
+
+      .contact_spe_descripion {
+        max-width: 370px;
+        .contact_spe_descripion_item {
+          padding-bottom: 10px;
+          &--nom {
+            font-weight: var(--fw-semibold);
+          }
+          &--poste {
+            font-weight: var(--fw-light);
+          }
+        }
+      }
+
+
+  }
+  .confetti {
+    height: 20px;
+    width: 50px;
+    margin-top: 15px;
+    margin-bottom: 30px;
+    background-color: var(--c-brand_rouge);
+    transform: rotate(20deg);
+  }
+
+
+</style>