Added About Page

resources/js/components/dredgy/ButtonLink.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+import {Link} from "@inertiajs/vue3";
+defineProps({
+    href: String,
+})
+</script>
+
+<template>
+    <Link :href="href" style="display:block;width:100%;height:100%" >
+        <slot/>
+    </Link>
+</template>
+
+<style scoped>
+</style>

resources/js/components/dredgy/TourCard.vue

@@ -3,6 +3,8 @@ import {Tour} from "@/types";
 
 import { defineProps } from 'vue'
 import EdgyButton from "@/components/dredgy/EdgyButton.vue";
+import {Link} from "@inertiajs/vue3";
+import ButtonLink from "@/components/dredgy/ButtonLink.vue";
 const formatPrice = (price: number) => {
     return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price)
 }
@@ -33,12 +35,12 @@ const props = defineProps<{
             <h3 class="tour-title">{{tour.name}}</h3>
             <p class="tour-description" v-if="tour.short_description">{{tour.short_description}}</p>
             <div class="tour-details">
-                <div class="tour-detail">
+                <div  v-if="tour.tour_days?.length" class="tour-detail">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <circle cx="12" cy="12" r="10"></circle>
                         <polyline points="12,6 12,12 16,14"></polyline>
                     </svg>
-                    {{tour.length}} Days
+                    <span>{{ tour.tour_days?.length }} Days</span>
                 </div>
                 <div class="tour-detail">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -50,7 +52,9 @@ const props = defineProps<{
                     Maximum 6
                 </div>
             </div>
-            <EdgyButton classes="btn-primary btn-full">View Details</EdgyButton>
+            <EdgyButton classes="btn-primary btn-full">
+                <ButtonLink :href="'/adventures/'+tour.internal_name">Details</ButtonLink>
+            </EdgyButton>
         </div>
     </div>
 </template>

resources/js/components/home/About.vue

@@ -33,9 +33,9 @@
                                 <p>Dr Edgy was founded by two close friends who met travelling in North Korea. Both of us love adventure travel with a bit of luxury. One of us is even an actual doctor.</p>
                                 <p>You are in safe hands.</p>
                                 <EdgyButton classes="btn-primary">
-                                    <Link href="/about">
+                                    <ButtonLink href="/about">
                                     GET TO KNOW US
-                                    </Link>
+                                    </ButtonLink>
                                 </EdgyButton>
                             </div>
                         </div>
@@ -149,7 +149,7 @@ import { ref } from 'vue'
 import EdgyButton from "@/components/dredgy/EdgyButton.vue";
 import SectionContainer from "@/components/dredgy/SectionContainer.vue";
 import SectionTitle from "@/components/dredgy/SectionTitle.vue";
-import {Link} from "@inertiajs/vue3";
+import ButtonLink from "@/components/dredgy/ButtonLink.vue";
 
 const isVisible = ref(false)
 

resources/js/pages/AboutUs.vue

@@ -28,6 +28,7 @@ defineOptions({
                     or a punchy day tour, we’ll keep it flexible, intimate, and full of good stories.
                 </p>
         </Hero>
+
         <div class="about-decorations">
             <div class="about-decoration about-decoration-1"></div>
             <div class="about-decoration about-decoration-2"></div>
@@ -36,6 +37,7 @@ defineOptions({
 
         <!-- Why Choose Dr Edgy -->
         <SectionContainer class="section-block">
+            <br/><br/>
             <div v-show-on-intersect="'fade-up'" class="about-content">
                 <SectionTitle
                     title="Why"

resources/js/pages/TourNavigator.vue

@@ -0,0 +1,25 @@
+<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>

resources/js/types/index.d.ts

@@ -53,6 +53,20 @@ export interface Country {
     continent: Continent;
 }
 
+/*
+        'tour_id',
+        'description',
+        'content',
+        'image',
+ */
+export interface TourDay {
+    id: number
+    tour_id: number
+    description: string
+    content: string
+    image: string | null
+}
+
 export interface Tour {
     id: number
     name: string
@@ -61,5 +75,8 @@ export interface Tour {
     price: number
     level: string
     short_description: string
-    countries: ?Country[]
+    countries: Country[] | null
+    tour_days: TourDay[] | null
 }
+
+