Added About Page

resources/js/components/Header.vue

@@ -66,7 +66,7 @@ const handleClickOutside = (e: Event) => {
 
     // Support composedPath for shadow DOM correctness
     const path = (e as MouseEvent).composedPath?.();
-    const clickedInside = path ? path.includes(dropdownRef.value) : dropdownRef.value.contains(e.target as Node);
+    const clickedInside = path ? path.includes(dropdownRef.value) : dropdownRef.value?.contains(e.target as Node);
 
     if (!clickedInside) {
         dropdownOpen.value = false;
@@ -116,11 +116,9 @@ const initMobileMenu = (): void => {
 
 <style scoped>
 .header {
-    min-height: 5dvh;
-    position: fixed;
+    flex-basis: 5%;
+    position: sticky;
     top: 0;
-    left: 0;
-    right: 0;
     z-index: 1000;
     background: rgba(8, 8, 23, 0.95);
     backdrop-filter: blur(10px);
@@ -302,6 +300,12 @@ const initMobileMenu = (): void => {
     transform: translateY(-8px) rotate(-45deg);
 }
 
+@media (max-width: 1366px) {
+    .nav-brand img {
+        transform: scale(1.2);
+    }
+}
+
 /* Mobile override (left intact — this preserves the mobile overlay you said you liked) */
 @media (max-width: 767px) {
     .nav-menu {
@@ -332,7 +336,6 @@ const initMobileMenu = (): void => {
     }
 
 
-
     .nav-menu.open {
         transform: translateY(0);
         opacity: 1;
@@ -354,6 +357,7 @@ const initMobileMenu = (): void => {
     }
 
     .nav-brand img {
+        transform: scale(1.5);
         display: block;
         margin-left: calc(10dvw / 2);
     }

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>

resources/js/components/dredgy/SectionTitle.vue

@@ -1,7 +1,7 @@
 
 <template>
     <h2 class="section-title">
-        <span>{{ title }}</span><br>
+        <span v-if="title">{{ title }}</span><br v-if="title">
         <GradientText v-if="gradient">{{ gradient }}</GradientText>
     </h2>
     <div class="section-divider"></div>
@@ -41,7 +41,7 @@ import GradientText from "@/components/dredgy/GradientText.vue";
 
 
 const props = defineProps<{
-    title: string
+    title?: string
     gradient?: string
     subtitle?: string
 }>()