feat(landing): add landing page layout and content

2026-07-31 01:32:00 +02:00
parent 24632742ef
commit e664cf3b96
5 changed files with 295 additions and 108 deletions
@@ -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>