110 lines
3.0 KiB
Vue
110 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'landing'
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const localePath = useLocalePath();
|
|
const steps = [
|
|
{ icon: 'login', key: 'step_register' },
|
|
{ icon: 'groups', key: 'step_team' },
|
|
{ icon: 'photo_camera', key: 'step_quests' },
|
|
{ icon: 'emoji_events', key: 'step_win' }
|
|
];
|
|
|
|
useHead({
|
|
title: t('layouts.default_tile'),
|
|
meta: [
|
|
{
|
|
property: 'og:title',
|
|
content: t('page.landing.hero_title')
|
|
},
|
|
{
|
|
property: 'og:description',
|
|
content: t('page.landing.hero_subtitle')
|
|
}
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<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">
|
|
<AuthState>
|
|
<template #default="{ loggedIn }">
|
|
<VaButton
|
|
v-if="!loggedIn"
|
|
size="large"
|
|
color="success"
|
|
:to="localePath('/register')"
|
|
>
|
|
{{ t('page.landing.get_started') }}
|
|
</VaButton>
|
|
</template>
|
|
</AuthState>
|
|
<VaButton
|
|
size="large"
|
|
preset="secondary"
|
|
border-color="#ffffff"
|
|
color="backgroundElement"
|
|
href="#how-it-works"
|
|
>
|
|
{{ t('page.landing.how_it_works') }}
|
|
</VaButton>
|
|
</div>
|
|
</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"
|
|
>
|
|
<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>
|
|
</section>
|
|
|
|
<section class="bg-background-element px-4 py-16">
|
|
<HuntList />
|
|
</section>
|
|
|
|
<footer class="px-4 py-8 text-center">
|
|
<NuxtLink :to="localePath('/impressum')" class="text-secondary">
|
|
{{ t('page.imprint.title') }}
|
|
</NuxtLink>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|