194 lines
5.1 KiB
Vue
194 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
|
|
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
|
|
import {Head, Link, usePage} from "@inertiajs/vue3";
|
|
import {useFlights} from "@/Composables/useFlights";
|
|
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
|
|
import {SharedProps} from "@/Types/types";
|
|
|
|
defineOptions({ layout: MainLayout });
|
|
const page = usePage<SharedProps>().props
|
|
const { flights, flightsLoading } = useFlights(`/internal/flights/most-recent`)
|
|
|
|
|
|
const features = [
|
|
{
|
|
icon: "✈️",
|
|
title: "Log every flight",
|
|
body: "Add flights manually in seconds, or import your history straight from MyFlightRadar24.",
|
|
},
|
|
{
|
|
icon: "🏆",
|
|
title: "Earn achievements",
|
|
body: "Unlock badges as you rack up airports, airlines, and miles.",
|
|
},
|
|
{
|
|
icon: "🗺️",
|
|
title: "Visualise your travels",
|
|
body: "See every route you've ever flown on one beautiful interactive map, a full departure board and all the graphs you could want.",
|
|
},
|
|
{
|
|
icon: "👥",
|
|
title: "Share with friends",
|
|
body: "Compare stats, routes, and bragging rights with people you know.",
|
|
},
|
|
];
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="splash-page">
|
|
<Head title="Welcome" />
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<GlassBox
|
|
class="welcomeBox"
|
|
title="Welcome to FlightsGoneBy - The Ultimate Flight Diary"
|
|
blurb="Log the flights you've taken, share them with friends, earn achievements, and get beautiful visualisations and full control of your data."
|
|
/>
|
|
<div class="hero-actions" v-if="!page.auth.user">
|
|
<Link :href="route('register')" class="btn btn-primary">Get started — it's free</Link>
|
|
<Link :href="route('login')" class="btn btn-secondary">Log in</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MAP AS BACKDROP -->
|
|
<section class="map-section">
|
|
<div class="map-caption">
|
|
<span class="caption-icon">🛫</span>
|
|
Flights Recently Logged By Our Community
|
|
</div>
|
|
<FlightMap v-if="!flightsLoading" :flights="flights" :showLegend="false" />
|
|
<div v-if="flightsLoading" class="loading-state">
|
|
<PlaneLoader />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section class="features-grid">
|
|
<GlassBox
|
|
v-for="feature in features"
|
|
:key="feature.title"
|
|
class="feature-card"
|
|
>
|
|
<span class="feature-icon">{{ feature.icon }}</span>
|
|
<h3>{{ feature.title }}</h3>
|
|
<p>{{ feature.body }}</p>
|
|
</GlassBox>
|
|
</section>
|
|
|
|
<!-- CLOSING CTA -->
|
|
<section class="cta-section" v-if="!page.auth.user">
|
|
<GlassBox class="cta-box">
|
|
<h2>Come join us today</h2>
|
|
<p>We'd love to have you be a part of our community.</p>
|
|
<Link :href="route('register')" class="btn btn-primary">Create your account</Link>
|
|
</GlassBox>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="sass" scoped>
|
|
.splash-page
|
|
width: 80%
|
|
max-width: 1100px
|
|
margin: 0 auto
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 4rem
|
|
padding-block: 2rem
|
|
|
|
.hero
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 1.5rem
|
|
text-align: center
|
|
|
|
.welcomeBox
|
|
width: 100%
|
|
|
|
.hero-actions
|
|
display: flex
|
|
gap: 1rem
|
|
|
|
.loading-state
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
min-height: 50dvh
|
|
|
|
|
|
.btn
|
|
padding: 0.75rem 1.75rem
|
|
font-weight: 600
|
|
text-decoration: none
|
|
transition: transform 0.15s ease
|
|
|
|
&:hover
|
|
transform: translateY(-2px)
|
|
|
|
.btn-primary
|
|
background: var(--accent, #3b82f6)
|
|
color: #fff
|
|
|
|
.btn-secondary
|
|
background: rgba(255, 255, 255, 0.1)
|
|
color: inherit
|
|
border: 1px solid rgba(255, 255, 255, 0.2)
|
|
|
|
.features-grid
|
|
display: grid
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
|
|
gap: 1em
|
|
|
|
.feature-card
|
|
text-align: center
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 0.5rem
|
|
margin: 0
|
|
width: 100%
|
|
box-sizing: border-box
|
|
|
|
.feature-icon
|
|
font-size: 2rem
|
|
|
|
.cta-section
|
|
display: flex
|
|
justify-content: center
|
|
gap: 1em
|
|
|
|
.cta-box
|
|
text-align: center
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 1rem
|
|
width: 100%
|
|
margin: 0
|
|
|
|
.map-section
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
.map-caption
|
|
position: absolute
|
|
top: 1rem
|
|
left: 1rem
|
|
z-index: 10
|
|
display: inline-flex
|
|
align-items: center
|
|
gap: 0.5rem
|
|
padding: 0.5rem 1rem
|
|
background: rgba(10, 15, 30, 0.65)
|
|
backdrop-filter: blur(8px)
|
|
border: 1px solid rgba(255, 255, 255, 0.12)
|
|
border-radius: 999px
|
|
font-size: 0.85rem
|
|
font-weight: 500
|
|
color: rgba(255, 255, 255, 0.9)
|
|
</style>
|