start dynamizing inspirations page

src/components/inspirations/Header.vue

@@ -0,0 +1,57 @@
+<template>
+  <header
+    class="flex | text-center"
+    style="
+      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    "
+  >
+    <!-- $inspiration->cover()->url() -->
+    <h2 class="inspiration__title | font-serif | text-lg | new">
+      Shape of Nature
+    </h2>
+    <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
+    <time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
+      >Avril 2024</time
+    >
+    <!-- $inspiration->date() -->
+    <p class="inspiration__description">
+      Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
+      consequat porta mauris hendrerit malesuada viverra turpis.
+    </p>
+    <!-- $inspiration->description() -->
+  </header>
+</template>
+
+<style scoped>
+.inspiration > header {
+  --direction: column;
+  --justify: center;
+  --row-gap: var(--space-8);
+  clear: both;
+  height: 15rem; /* 240px */
+  background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
+    var(--image);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  margin-bottom: var(--space-16);
+  border-radius: var(--rounded-lg);
+}
+.inspiration__title.new::after {
+  content: "Nouveauté";
+  display: inline-block;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  border-radius: var(--rounded-sm);
+  background-color: var(--color-primary-10);
+  color: var(--color-primary-100);
+  margin-left: var(--space-16);
+  padding: var(--space-4) var(--space-12);
+  transform: translateY(-0.1em);
+}
+.inspiration__date,
+.inspiration__description {
+  color: var(--color-grey-700);
+}
+</style>

src/components/inspirations/Selector.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    id="inspiration-select"
+    class="flex"
+    style="
+      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    "
+  >
+    <label for="inspirations">Choisir une inspiration</label>
+    <select id="inspirations">
+      <option value="shape-of-nature" selected>Shape of Nature</option>
+      <option value="inspiration-slug">Inspiration Title</option>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+#inspiration-select {
+  --direction: column;
+  --items: flex-start;
+  --wrap: no-wrap;
+  --row-gap: 0;
+  position: relative;
+  float: right;
+  background: var(--color-background);
+  border-radius: var(--rounded-full);
+  height: 3.75rem;
+  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
+  margin-bottom: var(--space-16);
+}
+#inspiration-select::before {
+  content: "";
+  position: absolute;
+  left: var(--space-8);
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: var(--rounded-full);
+  background-image: var(--image);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+</style>