feat(landing): add landing page layout and content

app/components/admin/QuestModal.vue

@@ -340,7 +340,7 @@ async function deleteImage() {
             :src="currentPicture.url"
             alt="Quest picture"
             class="h-24 w-32 rounded object-cover"
-          />
+          >
           <VaButton
             color="danger"
             preset="secondary"

app/lang/de.json

@@ -151,6 +151,22 @@
       "head": "PicHunt Impressum",
       "title": "Impressum"
     },
+    "landing": {
+      "get_started": "Jetzt loslegen",
+      "hero_subtitle": "Die Foto-Schnitzeljagd für deine Gruppe. Tritt einer Hunt bei, verbünde dich mit Freunden, löse Quests mit deiner Kamera und kämpfe um den ersten Platz!",
+      "hero_title": "Verwandle deine Stadt in einen Spielplatz",
+      "how_it_works": "So funktioniert es",
+      "login_to_see_hunts": "Melde dich an, um deine beigetretenen Hunts zu sehen und neuen beizutreten!",
+      "step_number": "Schritt {n}",
+      "step_register_text": "Erstelle in Sekunden ein kostenloses Konto und erhalte Zugang zu allen Hunts.",
+      "step_register_title": "Registrieren",
+      "step_team_text": "Gründe ein Team mit Freunden oder tritt einem bestehenden Team mit einem Einladungscode bei.",
+      "step_team_title": "Team gründen",
+      "step_quests_text": "Erkunde die Quests, mache kreative Fotos und reiche deine Antworten ein.",
+      "step_quests_title": "Quests erfüllen",
+      "step_win_text": "Sammle Punkte, klettere die Rangliste hinauf und feiere in der Showcase.",
+      "step_win_title": "Punkte gewinnen"
+    },
     "pictures": {
       "filter_quest": "Filtere Bilder nach Quests",
       "filter_team": "Filtere Bilder nach Teams",

app/lang/en.json

@@ -151,6 +151,22 @@
       "head": "PicHunt Imprint",
       "title": "Imprint"
     },
+    "landing": {
+      "get_started": "Get started",
+      "hero_subtitle": "The photo scavenger hunt for your group. Join a hunt, team up with friends, solve quests with your camera and compete for the top spot!",
+      "hero_title": "Turn your city into a playground",
+      "how_it_works": "How it works",
+      "login_to_see_hunts": "Login to see your joined hunts and join new ones!",
+      "step_number": "Step {n}",
+      "step_register_text": "Create a free account in seconds and get access to all hunts.",
+      "step_register_title": "Register",
+      "step_team_text": "Team up with friends or join an existing team with an invite code.",
+      "step_team_title": "Form a team",
+      "step_quests_text": "Explore the quests, take creative photos and submit your answers.",
+      "step_quests_title": "Complete quests",
+      "step_win_text": "Collect points, climb the leaderboard and celebrate in the showcase.",
+      "step_win_title": "Win points"
+    },
     "pictures": {
       "filter_quest": "Filter pictures by quests",
       "filter_team": "Filter pictures by teams",

app/layouts/landing.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const { loggedIn, clear } = useUserSession();
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const route = useRoute();
+const switchLocalePath = useSwitchLocalePath();
+</script>
+
+<template>
+  <VaLayout :top="{ fixed: true, order: 2 }">
+    <template #top>
+      <VaNavbar shadowed>
+        <template #left>
+          <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
+            <VaIcon name="photo_camera" color="primary" size="28px" />
+            <span class="text-xl font-bold">PicHunt</span>
+          </NuxtLink>
+        </template>
+        <template #right>
+          <div class="flex items-center gap-2">
+            <template v-if="loggedIn">
+              <VaButtonGroup preset="secondary" border-color="primary" round>
+                <VaButton
+                  color="info"
+                  :to="localePath('/profile')"
+                  icon="account_circle"
+                />
+                <VaButton icon="logout" @click="clear" />
+              </VaButtonGroup>
+            </template>
+            <template v-else>
+              <VaButton
+                preset="secondary"
+                :to="localePath(`/login?to=${route.path}`)"
+              >
+                {{ t('auth.login') }}
+              </VaButton>
+              <VaButton :to="localePath('/register')">
+                {{ t('auth.register') }}
+              </VaButton>
+            </template>
+            <VaButton
+              color="primary"
+              :to="switchLocalePath(locale === 'en' ? 'de' : 'en')"
+              icon="language"
+            />
+          </div>
+        </template>
+      </VaNavbar>
+    </template>
+
+    <template #content>
+      <main>
+        <Suspense>
+          <slot />
+        </Suspense>
+      </main>
+    </template>
+  </VaLayout>
+</template>
+<style>
+html {
+  scroll-behavior: smooth;
+}
+</style>

app/pages/index.vue

@@ -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>
+    <section
-    <VaButton icon="refresh" :disabled="pending" @click="refresh">{{
+      class="from-primary to-info flex flex-col items-center gap-6 bg-gradient-to-br px-4 py-16 text-center text-white"
-      t('layouts.refresh')
+    >
-    }}</VaButton>
+      <VaIcon name="photo_camera" size="64px" />
-
+      <h1 class="max-w-3xl text-4xl font-bold md:text-5xl">
-    <div v-if="data">
+        {{ t('page.landing.hero_title') }}
-      <div v-if="data.own !== null">
+      </h1>
-        <h2 class="my-4 text-2xl font-bold">
+      <p class="max-w-2xl text-lg opacity-90">
-          {{ t('page.home.joined_hunts') }}
+        {{ t('page.landing.hero_subtitle') }}
-        </h2>
+      </p>
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div class="flex flex-wrap justify-center gap-4">
-          <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>
         <VaButton
-          class="mt-6"
+          v-if="!loggedIn"
-          color="info"
+          size="large"
-          icon="login"
+          color="success"
-          :to="localePath(`/login`)"
+          :to="localePath('/register')"
-          >{{ t('page.home.login_first') }}</VaButton
         >
+          {{ 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">
+    </section>
-        <VaDivider />
+
-        <h2 class="my-4 text-2xl font-bold">
+    <section id="how-it-works" class="mx-auto max-w-5xl px-4 py-16">
-          {{ t('page.home.open_to_join') }}
+      <h2 class="mb-12 text-center text-3xl font-bold">
-        </h2>
+        {{ t('page.landing.how_it_works') }}
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      </h2>
-          <VaCard
+      <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
-            v-for="hunt in data.others"
+        <div
-            :key="hunt.id"
+          v-for="(step, index) in steps"
-            :to="localePath(`/hunt/${tSluggy(hunt).value}`)"
+          :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>
+            <VaIcon :name="step.icon" size="32px" />
-            <ClickableImage
+          </div>
-              v-if="hunt.picture"
+          <div>
-              :src="hunt.picture?.url"
+            <p class="text-primary mb-1 text-sm font-bold">
-              :title="tKey(hunt, 'name').value"
+              {{ t('page.landing.step_number', index + 1) }}
-            />
+            </p>
-            <VaCardContent>
+            <h3 class="mb-2 text-lg font-bold">
-              <h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
+              {{ t(`page.landing.${step.key}_title`) }}
-              <p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
+            </h3>
-              <VaDivider />
+            <p class="text-secondary text-sm">
-              <div class="flex flex-col gap-2">
+              {{ t(`page.landing.${step.key}_text`) }}
-                <p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
+            </p>
-                <p v-if="hunt.start">
+          </div>
-                  {{
-                    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>
+    </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>