feat(landing): Add landing Nuxt page
This commit is contained in:
222
landing/app/app.vue
Normal file
222
landing/app/app.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<UApp>
|
||||
<!-- Skip link for accessibility -->
|
||||
<a href="#main-content" class="skip-link"> Zum Hauptinhalt springen </a>
|
||||
|
||||
<NuxtRouteAnnouncer />
|
||||
|
||||
<!-- Header with transparent background and blur on scroll -->
|
||||
<UHeader
|
||||
:title="'LegalConsentHub'"
|
||||
:ui="{
|
||||
root: [
|
||||
'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
|
||||
isScrolled
|
||||
? 'bg-white/90 dark:bg-gray-950/90 backdrop-blur-xl shadow-sm border-b border-gray-200/50 dark:border-gray-800/50'
|
||||
: 'bg-transparent border-transparent'
|
||||
].join(' ')
|
||||
}"
|
||||
>
|
||||
<template #title>
|
||||
<NuxtLink to="/" class="flex items-center gap-3 group">
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-primary-500/25 group-hover:shadow-primary-500/40 transition-shadow"
|
||||
>
|
||||
<UIcon name="i-lucide-scale" class="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span
|
||||
class="font-heading text-xl font-bold bg-gradient-to-r from-primary-600 to-cyan-600 bg-clip-text text-transparent"
|
||||
>
|
||||
LegalConsentHub
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<UNavigationMenu
|
||||
:items="navigationItems"
|
||||
:ui="{
|
||||
link: 'text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors'
|
||||
}"
|
||||
/>
|
||||
|
||||
<template #right>
|
||||
<UColorModeButton
|
||||
:ui="{
|
||||
base: 'text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400'
|
||||
}"
|
||||
/>
|
||||
<UButton
|
||||
to="#newsletter"
|
||||
class="btn-gradient px-5 py-2.5 rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
|
||||
>
|
||||
<span>Informiert bleiben</span>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<UNavigationMenu
|
||||
:items="navigationItems"
|
||||
orientation="vertical"
|
||||
class="-mx-2.5"
|
||||
:ui="{
|
||||
link: 'text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 font-medium'
|
||||
}"
|
||||
/>
|
||||
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-800">
|
||||
<UButton to="#newsletter" size="lg" block class="btn-gradient rounded-xl font-semibold">
|
||||
Informiert bleiben
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UHeader>
|
||||
|
||||
<!-- Main Content -->
|
||||
<UMain id="main-content">
|
||||
<NuxtPage />
|
||||
</UMain>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 lg:gap-12">
|
||||
<!-- Brand column -->
|
||||
<div class="md:col-span-2">
|
||||
<NuxtLink to="/" class="flex items-center gap-3 mb-4">
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center"
|
||||
>
|
||||
<UIcon name="i-lucide-scale" class="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span class="font-heading text-xl font-bold text-gray-900 dark:text-white"> LegalConsentHub </span>
|
||||
</NuxtLink>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-sm mb-6">
|
||||
Digitale Mitbestimmung für IT- und KI-Systeme. Strukturierte Prozesse, revisionssichere Dokumentation.
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<UButton
|
||||
icon="i-lucide-linkedin"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
to="https://linkedin.com"
|
||||
target="_blank"
|
||||
aria-label="LinkedIn"
|
||||
class="hover:text-primary-600 dark:hover:text-primary-400"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-mail"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
to="mailto:info@legalconsenthub.de"
|
||||
aria-label="E-Mail"
|
||||
class="hover:text-primary-600 dark:hover:text-primary-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links column -->
|
||||
<div>
|
||||
<h4 class="font-heading font-bold text-gray-900 dark:text-white mb-4">Navigation</h4>
|
||||
<ul class="space-y-3">
|
||||
<li v-for="item in navigationItems" :key="item.label">
|
||||
<NuxtLink
|
||||
:to="item.to"
|
||||
class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal column -->
|
||||
<div>
|
||||
<h4 class="font-heading font-bold text-gray-900 dark:text-white mb-4">Rechtliches</h4>
|
||||
<ul class="space-y-3">
|
||||
<li v-for="item in footerLinks" :key="item.label">
|
||||
<NuxtLink
|
||||
:to="item.to"
|
||||
class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
© {{ new Date().getFullYear() }} LegalConsentHub. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-server" class="w-4 h-4" />
|
||||
<span>Hosted in Germany</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-lucide-shield-check" class="w-4 h-4" />
|
||||
<span>DSGVO-konform</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { NavigationMenuItem } from '@nuxt/ui'
|
||||
|
||||
// Track scroll position for header styling
|
||||
const isScrolled = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
const handleScroll = () => {
|
||||
isScrolled.value = window.scrollY > 50
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true })
|
||||
handleScroll() // Check initial position
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
})
|
||||
|
||||
const navigationItems = computed<NavigationMenuItem[]>(() => [
|
||||
{
|
||||
label: 'Für Betriebsräte',
|
||||
to: '#betriebsraete'
|
||||
},
|
||||
{
|
||||
label: 'Für Unternehmen',
|
||||
to: '#unternehmen'
|
||||
},
|
||||
{
|
||||
label: 'Features',
|
||||
to: '#features'
|
||||
},
|
||||
{
|
||||
label: 'Kontakt',
|
||||
to: '#kontakt'
|
||||
}
|
||||
])
|
||||
|
||||
const footerLinks = computed<NavigationMenuItem[]>(() => [
|
||||
{
|
||||
label: 'Impressum',
|
||||
to: '/impressum'
|
||||
},
|
||||
{
|
||||
label: 'Datenschutz',
|
||||
to: '/datenschutz'
|
||||
},
|
||||
{
|
||||
label: 'AGB',
|
||||
to: '/agb'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
Reference in New Issue
Block a user