<template>
    <Hero
        image="/img/hero.jpg"
        title-line-one="Travel."
        title-line-two="On the Edge."
        subtitle-line-one="We don't go wherever is trendy."
        subtitle-line-two="We set the trends."
    >
        <EdgyButton classes="btn-secondary">View Adventures</EdgyButton>
    </Hero>
    <About />
    <FeaturedTours :featured-tours="featured_tours" />
</template>

<style>

</style>

<script setup lang="ts">
import {usePage} from "@inertiajs/vue3";
import {Tour} from "@/types";

interface Properties {
    featured_tours: Tour[]
}

const { featured_tours } = usePage().props as unknown as Properties

import AppLayout from '../layouts/AppLayout.vue'
import Hero from "@/components/home/Hero.vue";
import About from "@/components/home/About.vue";
import FeaturedTours from "@/components/home/FeaturedTours.vue";
import EdgyButton from "@/components/dredgy/EdgyButton.vue";
import GradientText from "@/components/dredgy/GradientText.vue";

defineOptions({
    layout: AppLayout
})

</script>
