From ef9318b5a353446aa4fd58ae2ca577281e1d6669 Mon Sep 17 00:00:00 2001
From: Josh <josh.dredge@outlook.com>
Date: Fri, 19 Sep 2025 00:33:32 +1000
Subject: [PATCH] Added About Page

---
 resources/js/components/Header.vue            |  16 +-
 .../TourNavigator/TourQuickFacts.vue          |  77 ++++++++++
 .../js/components/dredgy/SectionTitle.vue     |   4 +-
 resources/js/layouts/AppLayout.vue            |  32 +++-
 resources/js/pages/TourDay.vue                | 137 ++++++++++++++++++
 resources/js/pages/TourNavigator.vue          |  25 ----
 resources/js/pages/TourOverview.vue           |  36 +++++
 resources/js/pages/TourOverviewSection.vue    |  97 +++++++++++++
 resources/js/types/index.d.ts                 |   7 +-
 routes/web.php                                |   6 +-
 10 files changed, 395 insertions(+), 42 deletions(-)
 create mode 100644 resources/js/components/TourNavigator/TourQuickFacts.vue
 create mode 100644 resources/js/pages/TourDay.vue
 delete mode 100644 resources/js/pages/TourNavigator.vue
 create mode 100644 resources/js/pages/TourOverview.vue
 create mode 100644 resources/js/pages/TourOverviewSection.vue

diff --git a/resources/js/components/Header.vue b/resources/js/components/Header.vue
index b1d5e8a..7d8e334 100644
--- a/resources/js/components/Header.vue
+++ b/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);
     }
diff --git a/resources/js/components/TourNavigator/TourQuickFacts.vue b/resources/js/components/TourNavigator/TourQuickFacts.vue
new file mode 100644
index 0000000..b9cd11d
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/dredgy/SectionTitle.vue b/resources/js/components/dredgy/SectionTitle.vue
index 767c675..568842b 100644
--- a/resources/js/components/dredgy/SectionTitle.vue
+++ b/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
 }>()
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 95f98f6..23df63e 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -81,6 +81,16 @@ withDefaults(defineProps<Props>(), {
     --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+
+.glass {
+    background-color: color-mix(in srgb, var(--card) 35%, transparent);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px); /* Safari */
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background-clip: padding-box;
+}
+
+
 /* Reset and Base Styles */
 * {
     margin: 0;
@@ -110,7 +120,7 @@ body::-webkit-scrollbar {
 }
 
 html{
-    overflow:auto;
+    overflow:visible;
 }
 
 body {
@@ -121,13 +131,25 @@ body {
     overflow-x: hidden;
     display:flex;
     flex-direction: column;
-
+    min-height: 100svh; /* ensure the page fills the viewport height */
+}
+html, body, #app {
+    min-height: 100svh; /* fill viewport */
+    display: flex;
+    flex-direction: column;
 }
 
+
+/* Make main fill remaining space and arrange its children vertically */
 main{
-    margin-top: 5dvh;
-    min-height: 90dvh;
-    flex-direction: column;
+    display: flex;          /* added */
+    flex-direction: column; /* keep */
     flex: 1;
+    gap: 2em;/* keep */
+}
+
+/* Push the Footer (last child in main) to the bottom if content is short */
+main > :last-child {
+    margin-top: auto;
 }
 </style>
diff --git a/resources/js/pages/TourDay.vue b/resources/js/pages/TourDay.vue
new file mode 100644
index 0000000..81cbdbe
--- /dev/null
+++ b/resources/js/pages/TourDay.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import SectionContainer from "@/components/dredgy/SectionContainer.vue";
+import SectionTitle from "@/components/dredgy/SectionTitle.vue";
+import EdgyButton from "@/components/dredgy/EdgyButton.vue";
+import ButtonLink from "@/components/dredgy/ButtonLink.vue";
+import { computed } from "vue";
+import type { TourDay } from "@/types";
+
+interface Props {
+    day: TourDay
+    dayNumber?: number
+    previousHref?: string | null
+    nextHref?: string | null
+}
+const props = defineProps<Props>();
+
+const hasPrev = computed(() => !!props.previousHref);
+const hasNext = computed(() => !!props.nextHref);
+</script>
+
+<template>
+    <section class="tour-day" id="tour-day">
+        <div class="tour-decorations">
+            <div class="tour-decoration tour-decoration-1"></div>
+            <div class="tour-decoration tour-decoration-2"></div>
+            <div class="tour-decoration tour-decoration-3"></div>
+        </div>
+
+        <SectionContainer>
+            <div v-show-on-intersect="'fade-up'" class="tour-content">
+                <SectionTitle
+                    :title="'Day ' + (dayNumber ?? '')"
+                    gradient="Overview"
+                    :subtitle="day.description"
+                />
+
+                <div class="tour-card chamfer">
+                    <div class="tour-media chamfer" v-show-on-intersect="{type:'slide-right'}">
+                        <img
+                            v-if="day.image"
+                            :src="day.image"
+                            :alt="`Day ${dayNumber ?? ''} image`"
+                            loading="lazy"
+                        />
+                        <div v-else class="tour-media__placeholder">
+                            <span>No image available</span>
+                        </div>
+                    </div>
+
+                    <div class="tour-body" v-show-on-intersect="{type:'slide-left'}">
+                        <div class="tour-description" v-html="day.content || day.description" />
+
+                        <footer class="tour-actions">
+                            <template v-if="hasPrev">
+                                <EdgyButton classes="btn-secondary chamfer" aria-label="Previous">
+                                    <ButtonLink :href="previousHref!">‹ Previous</ButtonLink>
+                                </EdgyButton>
+                            </template>
+                            <template v-else>
+                                <EdgyButton classes="btn-secondary chamfer" aria-label="Previous" @click="$emit('previous')">
+                                    ‹ Previous
+                                </EdgyButton>
+                            </template>
+
+                            <div class="spacer" />
+
+                            <template v-if="hasNext">
+                                <EdgyButton classes="btn-primary chamfer" aria-label="Next">
+                                    <ButtonLink :href="nextHref!">Next ›</ButtonLink>
+                                </EdgyButton>
+                            </template>
+                            <template v-else>
+                                <EdgyButton classes="btn-primary chamfer" aria-label="Next" @click="$emit('next')">
+                                    Next ›
+                                </EdgyButton>
+                            </template>
+                        </footer>
+                    </div>
+                </div>
+            </div>
+        </SectionContainer>
+    </section>
+</template>
+
+<style scoped>
+.tour-day {
+    position: relative;
+    padding: 5rem 0;
+    background: var(--background);
+    overflow: hidden;
+}
+.tour-decorations {
+    position: absolute; inset: 0; pointer-events: none;
+}
+.tour-decoration {
+    position: absolute; opacity: 0.05;
+    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
+}
+.tour-decoration-1 { top: 2rem; right: 2rem; width: 100px; height: 100px; background: var(--gradient-adventure); }
+.tour-decoration-2 { bottom: 3rem; left: 3rem; width: 80px; height: 80px; background: var(--gradient-accent); }
+.tour-decoration-3 { top: 50%; right: 5rem; width: 6px; height: 100px; background: var(--gradient-adventure); }
+
+.tour-card {
+    display: flex;
+    gap: 1.5rem;
+    background: var(--card);
+    color: var(--foreground);
+    border: 1px solid color-mix(in oklab, var(--foreground), transparent 85%);
+    padding: 1.25rem;
+    min-height: min(60dvh, 680px);
+}
+.chamfer {
+    --cut: 20px;
+    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
+}
+.tour-media {
+    flex: 0 1 44%;
+    background: color-mix(in oklab, var(--card), black 4%);
+    border: 1px solid color-mix(in oklab, var(--foreground), transparent 88%);
+    display: grid; place-items: center; min-height: 260px;
+}
+.tour-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.tour-media__placeholder { color: var(--muted-foreground); font-size: 0.95rem; padding: 1rem; }
+.tour-body { flex: 1 1 56%; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
+.tour-description { color: var(--muted-foreground); font-size: 1.08rem; line-height: 1.7; }
+.tour-actions { margin-top: auto; display: flex; align-items: center; gap: 0.75rem; }
+.spacer { flex: 1; }
+
+@media (max-width: 1023px) {
+    .tour-card { flex-direction: column; }
+    .tour-media { min-height: 220px; }
+}
+@media (max-width: 767px) {
+    .tour-day { padding: 3rem 0; }
+    .tour-card { padding: 1rem; }
+}
+</style>
diff --git a/resources/js/pages/TourNavigator.vue b/resources/js/pages/TourNavigator.vue
deleted file mode 100644
index 50e307b..0000000
--- a/resources/js/pages/TourNavigator.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import {Tour} from "@/types";
-import {usePage} from "@inertiajs/vue3";
-import AppLayout from "@/layouts/AppLayout.vue";
-
-interface Properties {
-    tour: Tour
-}
-
-const { tour } = usePage().props as unknown as Properties
-defineOptions({
-    layout: AppLayout
-})
-
-</script>
-
-<template>
-    <section style="padding-top:20dvh;height: 100dvh">
-        {{tour.short_description}}
-    </section>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/pages/TourOverview.vue b/resources/js/pages/TourOverview.vue
new file mode 100644
index 0000000..ea36e31
--- /dev/null
+++ b/resources/js/pages/TourOverview.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { usePage } from "@inertiajs/vue3";
+import AppLayout from "@/layouts/AppLayout.vue";
+import TourOverviewSection from "./TourOverviewSection.vue";
+import type { Tour } from "@/types";
+import TourQuickFacts from "@/components/TourNavigator/TourQuickFacts.vue";
+import SectionTitle from "@/components/dredgy/SectionTitle.vue";
+
+interface Properties {
+  tour: Tour;
+  nextHref?: string | null;
+}
+
+const { tour, nextHref } = usePage().props as unknown as Properties;
+
+defineOptions({
+  layout: AppLayout,
+});
+</script>
+
+<template>
+    <section class="tour-overview-section">
+        <SectionTitle
+            title=""
+            :gradient="tour.name"
+            :subtitle="tour.short_description ?? ''"
+        />
+    </section>
+    <TourOverviewSection :tour="tour" />
+</template>
+
+<style scoped>
+    .tour-overview-section{
+        margin-top: 10dvh;
+    }
+</style>
diff --git a/resources/js/pages/TourOverviewSection.vue b/resources/js/pages/TourOverviewSection.vue
new file mode 100644
index 0000000..8f2085c
--- /dev/null
+++ b/resources/js/pages/TourOverviewSection.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import SectionContainer from "@/components/dredgy/SectionContainer.vue";
+import SectionTitle from "@/components/dredgy/SectionTitle.vue";
+import GradientText from "@/components/dredgy/GradientText.vue";
+import EdgyButton from "@/components/dredgy/EdgyButton.vue";
+import ButtonLink from "@/components/dredgy/ButtonLink.vue";
+import TourQuickFacts from "@/components/TourNavigator/TourQuickFacts.vue";
+import type { Tour } from "@/types";
+
+interface Props {
+  tour: Tour;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <section class="tour-overview">
+    <SectionContainer>
+      <div
+        class="relative chamfer bg-neutral-900/70 border border-neutral-700/60 shadow-xl shadow-black/30 backdrop-blur-sm"
+      >
+        <!-- Banner with overlapping title -->
+        <div class="relative">
+          <div class="aspect-[16/7] md:aspect-[16/6] lg:aspect-[16/5] overflow-hidden">
+            <img
+              :src="`/img/tours/${props.tour.internal_name}.jpg`"
+              :alt="tour.name + 'Banner'"
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </div>
+
+          <!-- Overlapping H1 with glass background (no rounded, chamfered) -->
+          <div class="absolute left-6 md:left-8 -bottom-8">
+            <div
+                class="chamfer border border-white/10 glass shadow-lg shadow-black/30 px-4 md:px-5 py-2.5"
+            >
+              <h1 style="padding:0.5em" class="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight">
+                <GradientText>About this Adventure</GradientText>
+              </h1>
+            </div>
+          </div>
+        </div>
+
+        <!-- Content area: flex columns, fixed height, right column flush with edge -->
+        <div>
+          <div class="flex gap-6 h-[560px] md:h-[600px] lg:h-[640px]">
+            <!-- Main description (wider column) -->
+            <div class="flex-1 pl-6 md:pl-8">
+              <div class="text-neutral-200 leading-relaxed h-full overflow-auto pr-1 pt-14 ">
+                <div
+                  v-html="props.tour.long_description || 'No long description available'"
+                ></div>
+              </div>
+            </div>
+
+            <!-- Quick facts (narrower right column, flush right, chamfer top-left only) -->
+            <aside class="w-80 md:w-88 lg:w-96 h-full">
+              <div
+                class="h-full chamfer-tl bg-neutral-900/40 backdrop-blur-sm ring-1 ring-neutral-700/50"
+              >
+                <TourQuickFacts :tour="props.tour" />
+              </div>
+            </aside>
+          </div>
+        </div>
+      </div>
+    </SectionContainer>
+  </section>
+</template>
+
+<style scoped>
+.chamfer {
+  --cut: 20px;
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--cut)) 0,
+    100% var(--cut),
+    100% 100%,
+    var(--cut) 100%,
+    0 calc(100% - var(--cut))
+  );
+}
+
+/* Only the top-left corner chamfered (for the right column box) */
+.chamfer-tl {
+  --cut: 20px;
+  clip-path: polygon(
+    var(--cut) 0,
+    100% 0,
+    100% 100%,
+    0 100%,
+    0 0
+  );
+}
+</style>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 06b2253..e2e7667 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -75,8 +75,11 @@ export interface Tour {
     price: number
     level: string
     short_description: string
-    countries: Country[] | null
-    tour_days: TourDay[] | null
+    long_description?: string
+    countries?: Country[]
+    tour_days?: TourDay[]
+    min_people?: number
+    max_people?: number
 }
 
 
diff --git a/routes/web.php b/routes/web.php
index d07c827..3b12073 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -16,8 +16,10 @@ Route::get('/about', function () {
 })->name('about');
 
 Route::get('/adventures/{tour}', function ($tour) {
-    return Inertia::render('TourNavigator',[
-        'tour' => Tour::where('internal_name', $tour)->with('countries.continent')->first(),
+    return Inertia::render('TourOverview',[
+        'tour' => Tour::where('internal_name', $tour)
+            ->with('tour_days')
+            ->with('countries.continent')->first(),
     ]);
 })->name('tour');