Added About Page

resources/js/components/TourNavigator/TourQuickFacts.vue

@@ -0,0 +1,77 @@
+<template>
+  <aside class="tour-aside chamfer" v-show-on-intersect="{type:'fade-up'}">
+    <h3 class="aside-title">Quick Facts</h3>
+    <ul class="facts">
+      <li v-if="tour.tour_days?.length > 0">
+        <span class="label">Length</span>
+        <span class="value">{{ tour.tour_days?.length }} days</span>
+      </li>
+      <li v-if="tour.level">
+        <span class="label">Fitness</span>
+        <span class="value">{{ tour.level }}</span>
+      </li>
+      <li v-if="true">
+        <span class="label">Price</span>
+        <span class="value">{{ Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' }).format(tour.price) }}</span>
+      </li>
+      <li v-if="tour.min_people || tour.max_people">
+        <span class="label">Group Size</span>
+        <span class="value">
+          {{ tour.min_people ?? '?' }}–{{ tour.max_people ?? '?' }} people
+        </span>
+      </li>
+      <li v-if="Array.isArray(tour.countries) && tour.countries.length">
+        <span class="label">Countries</span>
+        <span class="value">
+          {{ tour.countries?.map((c:any)=>c.name ?? c).join(', ') }}
+        </span>
+      </li>
+    </ul>
+      <h3 class="aside-title">Upcoming Departures</h3>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import type { Tour } from "@/types";
+
+defineProps<{ tour: Tour }>();
+</script>
+
+<style scoped>
+.tour-aside {
+  background: var(--card);
+  color: var(--foreground);
+  border: 1px solid color-mix(in oklab, var(--foreground), transparent 85%);
+  padding: 1.25rem;
+  height: 100%;
+}
+.aside-title {
+  margin: 1rem 0 1rem 0;
+  font-size: 1rem;
+  color: var(--foreground);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.facts {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+.facts li {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 1rem;
+  padding: 0.5rem 0.25rem;
+  border-bottom: 1px dashed color-mix(in oklab, var(--foreground), transparent 90%);
+}
+.facts .label {
+  color: var(--muted-foreground);
+}
+.facts .value {
+  color: var(--foreground);
+  font-weight: 600;
+}
+</style>