add client brief page

src/components/inspirations/Header.vue

@@ -4,7 +4,7 @@
     :style="'--image: url(\'' + inspiration.cover + '\')'"
   >
     <h2
-      id="inspiration-title" 
+      id="inspiration-title"
       class="inspiration__title | font-serif | text-lg"
       :class="{ new: inspiration.new }"
     >

src/components/project/Header.vue

@@ -0,0 +1,12 @@
+<template>
+  <header class="flex | bg-white | rounded-2xl | p-8 mb-16">
+    <h1 class="font-serif | px-8">{{ title }}</h1>
+    <button class="btn | ml-auto">Demander un RDV</button>
+  </header>
+</template>
+
+<script setup>
+const { title } = defineProps({
+  title: String,
+});
+</script>

src/components/project/ProjectStep.vue

@@ -5,33 +5,46 @@
     data-status="done"
   >
     <h2 id="votre-brief-label">
-      <span data-icon="votre-brief">Votre brief</span>
+      <span data-icon="votre-brief">{{ step.text }}</span>
     </h2>
     <div class="cards | flow">
       <article class="card">
         <hgroup class="order-last">
-          <h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
+          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
         </hgroup>
         <div class="card__meta | flex">
-          <time class="card__date | text-grey-700" datetime="2024-06-12"
-            >12 juin 2024</time
-          >
+          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
+            dayjs(step.modified).format("DD MMMM YYYY")
+          }}</time>
         </div>
-        <figure class="card__images" data-count="13">
-          <img
-            src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
-            alt=""
-          />
-          <img
-            src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
-            alt=""
-          />
-          <img
-            src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
-            alt=""
-          />
-        </figure>
+        <router-link :to="'/' + step.uri">
+          <figure class="card__images" data-count="13">
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
+              alt=""
+            />
+            <img
+              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
+              alt=""
+            />
+          </figure>
+        </router-link>
       </article>
     </div>
   </section>
 </template>
+
+<script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+dayjs.locale("fr");
+
+const { step } = defineProps({
+  step: Object,
+});
+</script>