223 lines
7.2 KiB
Vue
223 lines
7.2 KiB
Vue
<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>
|