denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(landing): Add team

Browse Source
This commit is contained in:
Denis Lugowski
2026-01-10 18:04:29 +01:00
parent e306ea33a6
commit 3e4f7db052
7 changed files with 298 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
landing/app/components/landing/TeamSection.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<section class="relative py-20 lg:py-28 overflow-hidden">
<!-- Background gradient -->
<div class="absolute inset-0 hero-gradient-light" />
<!-- Animated gradient orbs -->
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<div class="gradient-orb gradient-orb-teal w-[500px] h-[500px] -top-20 -left-40 animate-orb-float opacity-40" />
<div
class="gradient-orb gradient-orb-violet w-[400px] h-[400px] top-1/3 -right-32 animate-orb-float opacity-30"
style="animation-delay: -5s"
/>
<div
class="gradient-orb gradient-orb-cyan w-[350px] h-[350px] bottom-0 left-1/4 animate-orb-float opacity-35"
style="animation-delay: -10s"
/>
</div>
<!-- Grid pattern overlay -->
<div class="absolute inset-0 dots-pattern opacity-30" aria-hidden="true" />
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section header -->
<div class="text-center mb-16 lg:mb-20">
<span
class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300 text-sm font-medium mb-6 animate-fade-in-up"
>
<UIcon name="i-lucide-users" class="w-4 h-4" />
{{ $t('team.badge') }}
</span>
<h1
class="font-heading text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6 animate-fade-in-up delay-100"
>
{{ $t('team.title') }}
<span class="gradient-text-teal">{{ $t('team.titleHighlight') }}</span>
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto animate-fade-in-up delay-200">
{{ $t('team.description') }}
</p>
</div>
<!-- Team members grid -->
<div class="grid md:grid-cols-2 gap-8 lg:gap-12 max-w-5xl mx-auto">
<!-- Raphael Lugowski -->
<article class="group glass rounded-3xl p-8 lg:p-10 card-hover-lift animate-fade-in-up delay-300">
<div class="flex flex-col items-center text-center">
<!-- Profile image with gradient border -->
<div class="relative mb-6">
<div
class="absolute -inset-1 rounded-full bg-gradient-to-br from-primary-500 via-cyan-500 to-accent-500 opacity-75 group-hover:opacity-100 blur-sm transition-opacity"
aria-hidden="true"
/>
<div
class="relative w-40 h-40 lg:w-48 lg:h-48 rounded-full overflow-hidden border-4 border-white dark:border-gray-800"
>
<img
src="~/assets/img/Raphael%20Lugowski.jpg"
:alt="$t('team.members.raphael.imageAlt')"
class="w-full h-full object-cover"
loading="lazy"
/>
</div>
</div>
<!-- Name and role -->
<h2 class="font-heading text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-2">
{{ $t('team.members.raphael.name') }}
</h2>
<p class="text-primary-600 dark:text-primary-400 font-medium mb-4">
{{ $t('team.members.raphael.role') }}
</p>
<!-- LinkedIn link -->
<a
href="https://www.linkedin.com/in/raphael-lugowski/"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400 transition-colors mb-6"
:aria-label="$t('team.members.raphael.linkedinLabel')"
>
<UIcon name="i-lucide-linkedin" class="w-5 h-5" />
<span class="text-sm">LinkedIn</span>
</a>
<!-- Description -->
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
{{ $t('team.members.raphael.description') }}
</p>
</div>
</article>
<!-- Denis Lugowski -->
<article class="group glass rounded-3xl p-8 lg:p-10 card-hover-lift animate-fade-in-up delay-400">
<div class="flex flex-col items-center text-center">
<!-- Profile image with gradient border -->
<div class="relative mb-6">
<div
class="absolute -inset-1 rounded-full bg-gradient-to-br from-primary-500 via-cyan-500 to-accent-500 opacity-75 group-hover:opacity-100 blur-sm transition-opacity"
aria-hidden="true"
/>
<div
class="relative w-40 h-40 lg:w-48 lg:h-48 rounded-full overflow-hidden border-4 border-white dark:border-gray-800"
>
<img
src="~/assets/img/Denis Lugowski.jpg"
:alt="$t('team.members.denis.imageAlt')"
class="w-full h-full object-cover"
loading="lazy"
/>
</div>
</div>
<!-- Name and role -->
<h2 class="font-heading text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-2">
{{ $t('team.members.denis.name') }}
</h2>
<p class="text-primary-600 dark:text-primary-400 font-medium mb-4">
{{ $t('team.members.denis.role') }}
</p>
<!-- LinkedIn link -->
<a
href="https://www.linkedin.com/in/denis-lugowski/"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400 transition-colors mb-6"
:aria-label="$t('team.members.denis.linkedinLabel')"
>
<UIcon name="i-lucide-linkedin" class="w-5 h-5" />
<span class="text-sm">LinkedIn</span>
</a>
<!-- Description -->
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
{{ $t('team.members.denis.description') }}
</p>
</div>
</article>
</div>
<!-- CTA section -->
<div class="mt-16 lg:mt-20 text-center animate-fade-in-up delay-500">
<p class="text-gray-600 dark:text-gray-300 mb-6">
{{ $t('team.cta.text') }}
</p>
<UButton
to="mailto:info@legalconsenthub.de"
size="xl"
class="btn-gradient px-8 py-4 rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
>
<span>{{ $t('team.cta.button') }}</span>
<UIcon name="i-lucide-mail" class="w-5 h-5 ml-2" />
</UButton>
</div>
</div>
</section>
</template>
<script setup lang="ts">
// Component uses $t() from i18n auto-import
</script>