pichunt/app/pages/index.vue

<script setup lang="ts">
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' }
];

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">
        <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>
    </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">
      <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>

<style scoped></style>