finish physical sample step

src/components/project/cards/PhysicalSample.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="card | physical-sample">
+    <header
+      class="text-center rounded-lg py-32"
+      :style="'--cover: url(' + step.cover + ')'"
+    >
+      <h3 class="text-lg font-serif">
+        <router-link :to="'/' + step.uri" class="link-full">{{
+          step.title
+        }}</router-link>
+      </h3>
+      <time class="font-medium text-sm py-8" :datetime="step.date">{{
+        step.date
+      }}</time>
+      <p>{{ step.description }}</p>
+    </header>
+    <img
+      :src="step.files[0].url"
+      alt=""
+      loading="lazy"
+      class="rounded-lg mt-16"
+    />
+  </div>
+</template>
+<script setup>
+const { step } = defineProps({ step: Object });
+</script>