164 lines
6.6 KiB
Vue
164 lines
6.6 KiB
Vue
<template>
|
|
<section class="relative min-h-screen flex items-center justify-center overflow-hidden hero-gradient-light">
|
|
<!-- Animated gradient orbs -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<!-- Large teal orb -->
|
|
<div
|
|
class="gradient-orb gradient-orb-teal w-[600px] h-[600px] -top-40 -left-40 animate-orb-float"
|
|
style="animation-delay: 0s"
|
|
/>
|
|
<!-- Violet orb -->
|
|
<div
|
|
class="gradient-orb gradient-orb-violet w-[500px] h-[500px] top-1/4 -right-32 animate-orb-float"
|
|
style="animation-delay: 3s"
|
|
/>
|
|
<!-- Cyan orb -->
|
|
<div
|
|
class="gradient-orb gradient-orb-cyan w-[400px] h-[400px] bottom-0 left-1/4 animate-orb-float"
|
|
style="animation-delay: 6s"
|
|
/>
|
|
<!-- Small accent orb -->
|
|
<div
|
|
class="gradient-orb gradient-orb-violet w-[200px] h-[200px] top-1/2 left-10 animate-orb-float opacity-40"
|
|
style="animation-delay: 9s"
|
|
/>
|
|
|
|
<!-- Grid pattern overlay -->
|
|
<div class="absolute inset-0 grid-pattern opacity-30" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
|
|
<div class="text-center max-w-4xl mx-auto">
|
|
<!-- Badge -->
|
|
<div class="animate-fade-in-up mb-8">
|
|
<span
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm font-medium text-gray-700 dark:text-gray-200"
|
|
>
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-400 opacity-75" />
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary-500" />
|
|
</span>
|
|
{{ $t('hero.badge') }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Title with gradient text -->
|
|
<h1 class="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight mb-6">
|
|
<span class="animate-fade-in-up block text-gray-900 dark:text-white" style="animation-delay: 100ms">
|
|
{{ $t('hero.title1') }}
|
|
</span>
|
|
<span class="animate-fade-in-up block gradient-text" style="animation-delay: 200ms">
|
|
{{ $t('hero.title2') }}
|
|
</span>
|
|
</h1>
|
|
|
|
<!-- Description -->
|
|
<p
|
|
class="animate-fade-in-up text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-10"
|
|
style="animation-delay: 300ms"
|
|
>
|
|
{{ $t('hero.description') }}
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-wrap justify-center gap-4 animate-fade-in-up" style="animation-delay: 400ms">
|
|
<UButton
|
|
size="xl"
|
|
to="/kontakt"
|
|
trailing-icon="i-lucide-arrow-right"
|
|
class="btn-gradient px-8 py-4 text-lg font-semibold rounded-xl shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 transition-all"
|
|
>
|
|
<span>{{ $t('hero.cta.requestDemo') }}</span>
|
|
</UButton>
|
|
<UButton
|
|
size="xl"
|
|
to="#features"
|
|
variant="outline"
|
|
class="btn-outline-gradient px-8 py-4 text-lg font-semibold rounded-xl"
|
|
>
|
|
{{ $t('hero.cta.discoverFeatures') }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating product preview cards -->
|
|
<div class="mt-16 lg:mt-24 relative animate-scale-in" style="animation-delay: 600ms">
|
|
<!-- Mobile layout: Main card first, then status cards side-by-side -->
|
|
<div class="flex flex-col items-center gap-6 lg:hidden px-2">
|
|
<!-- Main Card (Microsoft 365) -->
|
|
<div class="w-full max-w-sm">
|
|
<LandingHeroMainCard />
|
|
</div>
|
|
|
|
<!-- Status cards wrapper - side-by-side on mobile with overflow protection -->
|
|
<div class="flex flex-row gap-3 w-full max-w-sm overflow-hidden">
|
|
<LandingHeroStatusCardRisk compact />
|
|
<LandingHeroStatusCardCompleted compact />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop layout: 3 cards in a row with tilted side cards -->
|
|
<div class="hidden lg:flex flex-row items-center justify-center gap-8">
|
|
<!-- Left card - tilted (Risk Assessment) -->
|
|
<div class="card-3d w-full max-w-xs -mr-8 mt-12">
|
|
<div class="card-3d-inner transform -rotate-6 hover:rotate-0 transition-transform duration-500">
|
|
<LandingHeroStatusCardRisk />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center card - main (Microsoft 365) -->
|
|
<div class="w-full max-w-md z-10">
|
|
<LandingHeroMainCard />
|
|
</div>
|
|
|
|
<!-- Right card - tilted (Completed) -->
|
|
<div class="card-3d w-full max-w-xs -ml-8 mt-12">
|
|
<div class="card-3d-inner transform rotate-6 hover:rotate-0 transition-transform duration-500">
|
|
<LandingHeroStatusCardCompleted />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating notification - positioned above all cards with higher z-index -->
|
|
<div
|
|
class="absolute top-0 right-8 lg:right-16 xl:right-24 z-20 animate-float-slow hidden lg:block"
|
|
style="animation-delay: 1s"
|
|
>
|
|
<div class="glass rounded-xl px-4 py-3 shadow-lg flex items-center gap-3">
|
|
<div
|
|
class="w-8 h-8 rounded-full bg-linear-to-br from-success-400 to-success-500 flex items-center justify-center"
|
|
>
|
|
<UIcon name="i-lucide-sparkles" class="w-4 h-4 text-white" />
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $t('hero.cards.bvCreated') }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('hero.cards.readyForSignature') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator - stable wrapper for click target, animated inner element -->
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20">
|
|
<a href="#betriebsraete" class="block" :aria-label="$t('hero.scrollDown')" @click.prevent="scrollToSection">
|
|
<div
|
|
class="animate-bounce flex items-center justify-center w-12 h-12 rounded-full glass text-gray-600 dark:text-gray-300 hover:bg-white/80 dark:hover:bg-gray-800/80 transition-colors"
|
|
>
|
|
<UIcon name="i-lucide-chevron-down" class="w-6 h-6" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const scrollToSection = () => {
|
|
const target = document.querySelector('#betriebsraete')
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
}
|
|
}
|
|
</script>
|