yaerguossite/src/routes/collaborators/+page.svelte

<script lang="ts">
  import { fade, slide } from 'svelte/transition';
  import { onMount } from 'svelte';

  let mounted = false;
  onMount(() => {
    mounted = true;
  });

  const collaborators = [
    {
      name: "spitkov",
      role: "Web Developer",
      description: "Lead web developer responsible for the new YNS CLI and GUI interfaces. Specializes in creating intuitive and efficient user experiences.",
      image: "/spitkov.png",
      skills: ["Web Development", "UI/UX Design", "CLI Development"],
      links: {
        github: "https://github.com/spitkov",
        discord: "spitkov"
      }
    },
    {
      name: "maybe.asdf",
      role: "Project Lead",
      description: "Project founder and lead architect of yaerguOS. Oversees the overall direction and development of the distribution.",
      image: "/maybe.png",
      skills: ["System Architecture", "Linux Development", "Project Management"],
      links: {
        discord: "maybe.asdf"
      }
    }
  ];
</script>

<div class="min-h-screen py-24 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    {#if mounted}
      <div in:fade={{ duration: 800 }} class="text-center mb-16">
        <h1 class="text-5xl sm:text-6xl font-khand mb-6 text-transparent bg-gradient-to-r from-white to-white/80 bg-clip-text">
          Meet Our Team
        </h1>
        <p class="text-lg text-white/80 max-w-2xl mx-auto">
          The talented individuals behind yaerguOS, working together to create a modern and efficient Linux distribution.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        {#each collaborators as collaborator, index}
          <div 
            class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1"
            in:fade={{ duration: 800, delay: 200 + index * 100 }}
          >
            <div class="flex items-start gap-6">
              <div class="w-32 h-32 rounded-xl bg-gradient-to-br from-hero-top to-text-primary/30 p-2 shadow-lg flex-shrink-0 overflow-hidden transition-transform duration-300 group-hover:scale-105">
                <img 
                  src={collaborator.image} 
                  alt={collaborator.name}
                  class="w-full h-full object-cover rounded-lg"
                />
              </div>

              <div class="flex-1">
                <h3 class="text-2xl font-khand text-transparent bg-gradient-to-r from-white to-white/90 bg-clip-text mb-1">
                  {collaborator.name}
                </h3>
                <p class="text-blue-400 font-khand mb-3">{collaborator.role}</p>
                <p class="text-white/70 text-sm mb-4">{collaborator.description}</p>
                
                <div class="mb-4">
                  <h4 class="text-white/60 text-sm mb-2">Expertise</h4>
                  <div class="flex flex-wrap gap-2">
                    {#each collaborator.skills as skill}
                      <span class="px-2 py-1 bg-white/10 rounded-full text-xs text-white/80">
                        {skill}
                      </span>
                    {/each}
                  </div>
                </div>

                <div class="flex gap-4">
                  {#if collaborator.links.github}
                    <a 
                      href={collaborator.links.github}
                      target="_blank"
                      rel="noopener noreferrer"
                      class="text-white/60 hover:text-white transition-colors duration-200"
                    >
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                      </svg>
                    </a>
                  {/if}
                  {#if collaborator.links.discord}
                    <div class="text-white/60 flex items-center gap-2">
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3847-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
                      </svg>
                      <span class="text-sm">{collaborator.links.discord}</span>
                    </div>
                  {/if}
                </div>
              </div>
            </div>
          </div>
        {/each}
      </div>

      <div class="mt-16 text-center">
        <p class="text-white/60 mb-4">Want to contribute to yaerguOS?</p>
        <a
          href="https://discord.com"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 hover:text-blue-300 rounded-lg transition-all duration-200 group"
        >
          Join Our Community
          <svg
            class="w-4 h-4 transform transition-transform group-hover:translate-x-1"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>
      </div>
    {/if}
  </div>
</div>

<style>
  :global(html) {
    scroll-behavior: smooth;
  }
</style>