gremiumhub/landing/app/components/landing/TeamSection.vue

<template>
  <section class="relative min-h-screen py-20 lg:py-28 overflow-hidden hero-gradient-light">
    <!-- Animated gradient orbs (same as homepage HeroSection) -->
    <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 (same as homepage) -->
      <div class="absolute inset-0 grid-pattern opacity-30" />
    </div>

    <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-linear-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-linear-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@gremiumhub.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>