feat(landing): Add team
This commit is contained in:
@@ -217,19 +217,28 @@ onMounted(() => {
|
||||
const navigationItems = computed<NavigationMenuItem[]>(() => [
|
||||
{
|
||||
label: t('nav.forWorksCouncils'),
|
||||
to: '#betriebsraete'
|
||||
to: '/#betriebsraete',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: t('nav.forCompanies'),
|
||||
to: '#unternehmen'
|
||||
to: '/#unternehmen',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: t('nav.features'),
|
||||
to: '#features'
|
||||
to: '/#features',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: t('nav.team'),
|
||||
to: '/team',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: t('nav.contact'),
|
||||
to: '#kontakt'
|
||||
to: '/#kontakt',
|
||||
active: false
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
BIN
landing/app/assets/img/Denis Lugowski.jpg
Normal file
BIN
landing/app/assets/img/Denis Lugowski.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
landing/app/assets/img/Raphael Lugowski.jpg
Normal file
BIN
landing/app/assets/img/Raphael Lugowski.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
163
landing/app/components/landing/TeamSection.vue
Normal file
163
landing/app/components/landing/TeamSection.vue
Normal 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>
|
||||
60
landing/app/pages/team.vue
Normal file
60
landing/app/pages/team.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="team-page">
|
||||
<LandingTeamSection />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// SEO Meta
|
||||
useSeoMeta({
|
||||
title: () => t('team.meta.title'),
|
||||
description: () => t('team.meta.description'),
|
||||
ogTitle: () => t('team.meta.title'),
|
||||
ogDescription: () => t('team.meta.description'),
|
||||
ogImage: '/og-image.png',
|
||||
ogType: 'website',
|
||||
twitterCard: 'summary_large_image'
|
||||
})
|
||||
|
||||
// Structured data for SEO
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
lang: () => locale.value
|
||||
},
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
innerHTML: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'AboutPage',
|
||||
name: t('team.meta.title'),
|
||||
description: t('team.meta.description'),
|
||||
mainEntity: {
|
||||
'@type': 'Organization',
|
||||
name: 'LegalConsentHub',
|
||||
member: [
|
||||
{
|
||||
'@type': 'Person',
|
||||
name: 'Raphael Lugowski',
|
||||
jobTitle: t('team.members.raphael.role')
|
||||
},
|
||||
{
|
||||
'@type': 'Person',
|
||||
name: 'Denis Lugowski',
|
||||
jobTitle: t('team.members.denis.role')
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.team-page {
|
||||
padding-top: 5rem; /* Header offset */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user