project blueprint - optional steps working

src/components/Projects.vue

@@ -33,7 +33,7 @@
 </template>
 <script setup>
 import Tabs from "./Tabs.vue";
-import Project from "./Project.vue";
+import Project from "./project/Project.vue";
 import { useProjectsStore } from "../stores/projects";
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";

src/components/project/ProjectStep.vue

@@ -0,0 +1,37 @@
+<template>
+  <section
+    class="flex-1"
+    aria-labelledby="votre-brief-label"
+    data-status="done"
+  >
+    <h2 id="votre-brief-label">
+      <span data-icon="votre-brief">Votre brief</span>
+    </h2>
+    <div class="cards | flow">
+      <article class="card">
+        <hgroup class="order-last">
+          <h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
+        </hgroup>
+        <div class="card__meta | flex">
+          <time class="card__date | text-grey-700" datetime="2024-06-12"
+            >12 juin 2024</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>
+      </article>
+    </div>
+  </section>
+</template>