Added splash page
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import {Achievement, Airline, Continent, Region, User, UserAchievement} from "@/Types/types";
|
||||
import {Achievement, Airline, Alliance, Continent, Region, User, UserAchievement} from "@/Types/types";
|
||||
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
|
||||
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
||||
import {computed, defineAsyncComponent} from 'vue';
|
||||
@@ -21,9 +21,8 @@ const props = defineProps<{
|
||||
user: User
|
||||
loggedInUser: User | null
|
||||
followStatus: string
|
||||
flight_api_url: string
|
||||
regions: Region[]
|
||||
alliance: string | null
|
||||
alliance: Alliance | null
|
||||
airlines: Airline[]
|
||||
continents: Continent[]
|
||||
aircraft_families: Record<string, string[]>
|
||||
@@ -32,7 +31,7 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
|
||||
const { flights, flightsLoading } = useFlights(props.flight_api_url, true)
|
||||
const { flights, flightsLoading } = useFlights(`/internal/user/${props.user.name}/flights/departed`)
|
||||
|
||||
const AchievementDetail = defineAsyncComponent(
|
||||
() => import(`./Achievements/${props.achievement.internal_name}.vue`)
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
<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>
|
||||
@@ -21,13 +21,12 @@ const props = defineProps<{
|
||||
selectedFlightId?: number | null
|
||||
initialView?: ProfileView
|
||||
followStatus: string
|
||||
flight_api_url: string
|
||||
flightCount: number
|
||||
}>()
|
||||
|
||||
// ── Flights state ─────────────────────────────────────────────────────────────
|
||||
|
||||
const { flights, flightsLoading } = useFlights(props.flight_api_url)
|
||||
const { flights, flightsLoading } = useFlights(`/internal/user/${props.user.name}/flights`)
|
||||
const localSelectedFlightId = ref(props.selectedFlightId ?? null)
|
||||
|
||||
// ── Filter state ──────────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user