feat(landing): add landing page layout and content
This commit is contained in:
+197
-107
@@ -2,129 +2,219 @@
|
||||
import { useI18nKey } from '~/composables/useI18nKey';
|
||||
import { fullDate } from '~~/server/utils/date';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'landing'
|
||||
});
|
||||
|
||||
const { loggedIn } = useUserSession();
|
||||
const { data, pending, refresh } = await useFetch('/api/home');
|
||||
const { t, d } = useI18n();
|
||||
const localePath = useLocalePath();
|
||||
const { tKey, tSluggy } = useI18nKey();
|
||||
watch(loggedIn, () => refresh());
|
||||
|
||||
const steps = [
|
||||
{ icon: 'login', key: 'step_register' },
|
||||
{ icon: 'groups', key: 'step_team' },
|
||||
{ icon: 'photo_camera', key: 'step_quests' },
|
||||
{ icon: 'emoji_events', key: 'step_win' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-primary mb-3 text-3xl">{{ t('hello') }}</h1>
|
||||
<VaButton icon="refresh" :disabled="pending" @click="refresh">{{
|
||||
t('layouts.refresh')
|
||||
}}</VaButton>
|
||||
|
||||
<div v-if="data">
|
||||
<div v-if="data.own !== null">
|
||||
<h2 class="my-4 text-2xl font-bold">
|
||||
{{ t('page.home.joined_hunts') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
v-for="hunt in data.own"
|
||||
:key="hunt.id"
|
||||
stripe
|
||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||
>
|
||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||
|
||||
<ClickableImage
|
||||
v-if="hunt.picture"
|
||||
:src="hunt.picture?.url"
|
||||
:title="tKey(hunt, 'name').value"
|
||||
/>
|
||||
<VaCardContent>
|
||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>{{ t('page.home.n_teams_joined', hunt._count.teams) }}</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.own.length <= 0">
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
|
||||
<VaCardContent>{{
|
||||
t('page.home.click_hunt_below_to_join')
|
||||
}}</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<section
|
||||
class="from-primary to-info flex flex-col items-center gap-6 bg-gradient-to-br px-4 py-16 text-center text-white"
|
||||
>
|
||||
<VaIcon name="photo_camera" size="64px" />
|
||||
<h1 class="max-w-3xl text-4xl font-bold md:text-5xl">
|
||||
{{ t('page.landing.hero_title') }}
|
||||
</h1>
|
||||
<p class="max-w-2xl text-lg opacity-90">
|
||||
{{ t('page.landing.hero_subtitle') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<VaButton
|
||||
class="mt-6"
|
||||
color="info"
|
||||
icon="login"
|
||||
:to="localePath(`/login`)"
|
||||
>{{ t('page.home.login_first') }}</VaButton
|
||||
v-if="!loggedIn"
|
||||
size="large"
|
||||
color="success"
|
||||
:to="localePath('/register')"
|
||||
>
|
||||
{{ t('page.landing.get_started') }}
|
||||
</VaButton>
|
||||
<VaButton
|
||||
size="large"
|
||||
preset="secondary"
|
||||
border-color="#ffffff"
|
||||
color="backgroundElement"
|
||||
href="#how-it-works"
|
||||
>
|
||||
{{ t('page.landing.how_it_works') }}
|
||||
</VaButton>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<VaDivider />
|
||||
<h2 class="my-4 text-2xl font-bold">
|
||||
{{ t('page.home.open_to_join') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
v-for="hunt in data.others"
|
||||
:key="hunt.id"
|
||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||
</section>
|
||||
|
||||
<section id="how-it-works" class="mx-auto max-w-5xl px-4 py-16">
|
||||
<h2 class="mb-12 text-center text-3xl font-bold">
|
||||
{{ t('page.landing.how_it_works') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.key"
|
||||
class="flex flex-col items-center gap-4 text-center"
|
||||
>
|
||||
<div
|
||||
class="bg-primary flex h-16 w-16 items-center justify-center rounded-full text-white"
|
||||
>
|
||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||
<ClickableImage
|
||||
v-if="hunt.picture"
|
||||
:src="hunt.picture?.url"
|
||||
:title="tKey(hunt, 'name').value"
|
||||
/>
|
||||
<VaCardContent>
|
||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>{{ t('page.home.n_teams_joined', hunt._count.teams) }}</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.others.length <= 0">
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
|
||||
<VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
|
||||
</VaCard>
|
||||
<VaIcon :name="step.icon" size="32px" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-primary mb-1 text-sm font-bold">
|
||||
{{ t('page.landing.step_number', index + 1) }}
|
||||
</p>
|
||||
<h3 class="mb-2 text-lg font-bold">
|
||||
{{ t(`page.landing.${step.key}_title`) }}
|
||||
</h3>
|
||||
<p class="text-secondary text-sm">
|
||||
{{ t(`page.landing.${step.key}_text`) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-background-element px-4 py-16">
|
||||
<div class="mx-auto max-w-6xl">
|
||||
<VaButton
|
||||
icon="refresh"
|
||||
:disabled="pending"
|
||||
class="mb-6"
|
||||
@click="refresh"
|
||||
>{{ t('layouts.refresh') }}</VaButton
|
||||
>
|
||||
|
||||
<div v-if="data">
|
||||
<div v-if="data.own !== null">
|
||||
<h2 class="mb-6 text-2xl font-bold">
|
||||
{{ t('page.home.joined_hunts') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
v-for="hunt in data.own"
|
||||
:key="hunt.id"
|
||||
stripe
|
||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||
>
|
||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||
|
||||
<ClickableImage
|
||||
v-if="hunt.picture"
|
||||
:src="hunt.picture?.url"
|
||||
:title="tKey(hunt, 'name').value"
|
||||
/>
|
||||
<VaCardContent>
|
||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
||||
</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.own.length <= 0">
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
|
||||
<VaCardContent>{{
|
||||
t('page.home.click_hunt_below_to_join')
|
||||
}}</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center">
|
||||
<p class="text-secondary mb-4">
|
||||
{{ t('page.landing.login_to_see_hunts') }}
|
||||
</p>
|
||||
<VaButton color="info" icon="login" :to="localePath(`/login`)">{{
|
||||
t('page.home.login_first')
|
||||
}}</VaButton>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<VaDivider />
|
||||
<h2 class="mb-6 mt-8 text-2xl font-bold">
|
||||
{{ t('page.home.open_to_join') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
v-for="hunt in data.others"
|
||||
:key="hunt.id"
|
||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||
>
|
||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||
<ClickableImage
|
||||
v-if="hunt.picture"
|
||||
:src="hunt.picture?.url"
|
||||
:title="tKey(hunt, 'name').value"
|
||||
/>
|
||||
<VaCardContent>
|
||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
||||
</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.others.length <= 0">
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
|
||||
<VaCardContent>{{
|
||||
t('page.home.new_hunts_soon')
|
||||
}}</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="px-4 py-8 text-center">
|
||||
<NuxtLink :to="localePath('/impressum')" class="text-secondary">
|
||||
{{ t('page.imprint.title') }}
|
||||
</NuxtLink>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user