Many tweaks to booking form.

src/components/boat/BoatPreviewComponent.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-card v-for="boat in boats" :key="boat.id" flat class="mobile-card">
+    <q-card-section>
+      <q-img :src="boat.imgsrc" :fit="'scale-down'">
+        <div class="row absolute-top">
+          <div class="col text-h5 text-left">{{ boat.name }}</div>
+          <div class="col text-right">{{ boat.class }}</div>
+        </div>
+      </q-img>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-actions align="evenly">
+      <q-btn flat>Info</q-btn>
+      <q-btn flat>Book</q-btn>
+      <q-btn flat>Check-Out</q-btn>
+      <q-btn flat>Check-In</q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { Boat } from 'src/stores/boat';
+
+defineProps({
+  boats: Array<Boat>,
+});
+</script>