world-game/src/views/About.svelte

<script>
  import { fade } from 'svelte/transition'

  let { data } = $props()

  const intro = $derived(data?.intro || {})
  const mission = $derived(data?.mission || {})
  const manifesto = $derived(data?.manifesto || {})
  const team = $derived(data?.team || {})
</script>

<div class="about" transition:fade>
  <section class="about__intro">
    <h1>{intro.title || data?.title}</h1>
    {#if intro.text}
      <p class="about__intro-text">{@html intro.text}</p>
    {/if}
  </section>

  {#if mission.text}
    <section class="about__section">
      <h2>{mission.title}</h2>
      <div class="about__section-content">
        {@html mission.text}
      </div>
    </section>
  {/if}

  {#if manifesto.text}
    <section class="about__section">
      <h2>{manifesto.title}</h2>
      <div class="about__section-content">
        {@html manifesto.text}
      </div>
    </section>
  {/if}

  {#if team.members && team.members.length > 0}
    <section class="about__team">
      <h2>{team.title}</h2>

      <div class="about__team-grid">
        {#each team.members as member}
          <article class="team-card">
            {#if member.photo}
              <div class="team-card__photo">
                <img src={member.photo} alt={member.name} />
              </div>
            {/if}

            <div class="team-card__info">
              <h3>{member.name}</h3>
              <p class="team-card__role">{member.role}</p>

              {#if member.bio}
                <p class="team-card__bio">{member.bio}</p>
              {/if}
            </div>
          </article>
        {/each}
      </div>
    </section>
  {/if}
</div>

<style>
  .about {
    min-height: 100vh;
    padding: 8rem 2rem 4rem;
    color: #fff;
  }

  .about__intro {
    max-width: 1200px;
    margin: 0 auto 6rem;
    text-align: center;
  }

  .about__intro h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: 2rem;
  }

  .about__intro-text {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    opacity: 0.9;
    max-width: 900px;
    margin: 0 auto;
  }

  .about__section {
    max-width: 1200px;
    margin: 4rem auto;
  }

  .about__section h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 2rem;
    color: #04fea0;
  }

  .about__section-content {
    line-height: 1.8;
    opacity: 0.9;
  }

  .about__team {
    max-width: 1400px;
    margin: 6rem auto 0;
  }

  .about__team h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 3rem;
    text-align: center;
    color: #04fea0;
  }

  .about__team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }

  .team-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s, border-color 0.3s;
  }

  .team-card:hover {
    transform: translateY(-5px);
    border-color: #04fea0;
  }

  .team-card__photo {
    margin-bottom: 1.5rem;
  }

  .team-card__photo img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
  }

  .team-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .team-card__role {
    color: #04fea0;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .team-card__bio {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
  }

  @media (max-width: 768px) {
    .about {
      padding: 6rem 1rem 3rem;
    }

    .about__team-grid {
      grid-template-columns: 1fr;
    }
  }
</style>