src/lib/components/about/About.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { uiStore } from '../../stores/ui';
  import gsap from 'gsap';

  onMount(() => {
    gsap.fromTo('.about-container',
      { opacity: 0, scale: 0.95 },
      { opacity: 1, scale: 1, duration: 0.3, ease: 'power2.out' }
    );
  });

  function handleClose() {
    uiStore.hideAbout();
  }
</script>

<div class="about-container">
  <div class="about-content">
    <button class="close-button" on:click={handleClose} aria-label="Close">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 8.707l3.646 3.647.708-.708L8.707 8l3.647-3.646-.708-.708L8 7.293 4.354 3.646l-.708.708L7.293 8l-3.647 3.646.708.708L8 8.707z"/>
      </svg>
    </button>

    <div class="about-header">
      <h1>
        <span class="app-icon">🥕</span>
        VibeGame
      </h1>
      <p class="tagline">A 3D game engine designed for vibe coding</p>
    </div>

    <div class="about-body">
      <p class="description">
        AI-assisted game development with declarative HTML-like syntax, ECS architecture, and built-in physics/rendering.
        Create 3D games with real-time feedback and scale from prototypes to complex projects.
      </p>

      <div class="features-grid">
        <div class="feature">
          <strong>Declarative</strong>
          <span>HTML-like tags</span>
        </div>
        <div class="feature">
          <strong>ECS</strong>
          <span>Clean architecture</span>
        </div>
        <div class="feature">
          <strong>Physics</strong>
          <span>Rapier built-in</span>
        </div>
        <div class="feature">
          <strong>Rendering</strong>
          <span>Three.js powered</span>
        </div>
        <div class="feature">
          <strong>Live Edit</strong>
          <span>Real-time feedback</span>
        </div>
        <div class="feature">
          <strong>AI-Ready</strong>
          <span>LangGraph.js</span>
        </div>
      </div>

      <div class="quick-start">
        <h3>Quick Start</h3>
        <pre><code>&lt;world canvas="#game-canvas" sky="#87ceeb"&gt;
  &lt;!-- Ground --&gt;
  &lt;static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"&gt;&lt;/static-part&gt;

  &lt;!-- Ball --&gt;
  &lt;dynamic-part pos="-2 4 -3" shape="sphere" size="1" color="#ff4500"&gt;&lt;/dynamic-part&gt;
&lt;/world&gt;

&lt;canvas id="game-canvas"&gt;&lt;/canvas&gt;

&lt;script type="module"&gt;
  import * as GAME from 'vibegame';
  GAME.run();
&lt;/script&gt;</code></pre>
      </div>

      <div class="links">
        <a href="https://github.com/dylanebert/VibeGame" target="_blank" rel="noopener noreferrer" class="link">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
          </svg>
          GitHub
        </a>
        <a href="https://www.npmjs.com/package/vibegame" target="_blank" rel="noopener noreferrer" class="link">
          NPM
        </a>
        <a href="https://huggingface.co/spaces/dylanebert/VibeGame" target="_blank" rel="noopener noreferrer" class="link">
          Demo
        </a>
        <a href="https://jsfiddle.net/zhLtd6e2/6/" target="_blank" rel="noopener noreferrer" class="link">
          JSFiddle
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  .about-container {
    width: 100%;
    height: calc(100vh - 40px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0B0A09 0%, #0F0E0C 100%);
    padding: 1rem;
  }

  .about-content {
    position: relative;
    max-width: 860px;
    width: 100%;
    background: rgba(15, 14, 12, 0.95);
    border: 1px solid rgba(139, 115, 85, 0.2);
    border-radius: 0.75rem;
    padding: 2.5rem;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  .close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: rgba(251, 248, 244, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .close-button:hover {
    color: rgba(251, 248, 244, 0.9);
    background: rgba(139, 115, 85, 0.1);
  }

  .about-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(139, 115, 85, 0.15);
  }

  .about-header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    color: rgba(251, 248, 244, 0.95);
    margin: 0 0 0.25rem 0;
  }

  .app-icon {
    font-size: 1.75rem;
  }

  .tagline {
    font-size: 1rem;
    color: rgba(251, 248, 244, 0.7);
    margin: 0;
  }

  .about-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(251, 248, 244, 0.8);
    margin: 0;
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .feature {
    background: rgba(139, 115, 85, 0.06);
    border: 1px solid rgba(139, 115, 85, 0.12);
    border-radius: 0.375rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: all 0.2s;
  }

  .feature:hover {
    background: rgba(139, 115, 85, 0.1);
    border-color: rgba(124, 152, 133, 0.2);
  }

  .feature strong {
    font-size: 0.875rem;
    color: rgba(251, 248, 244, 0.9);
    font-weight: 600;
  }

  .feature span {
    font-size: 0.75rem;
    color: rgba(251, 248, 244, 0.65);
  }

  .quick-start {
    background: rgba(15, 14, 12, 0.6);
    border: 1px solid rgba(139, 115, 85, 0.15);
    border-radius: 0.375rem;
    padding: 1rem;
  }

  .quick-start h3 {
    font-size: 1rem;
    color: rgba(251, 248, 244, 0.9);
    margin: 0 0 0.75rem 0;
    font-weight: 600;
  }

  .quick-start pre {
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.875rem;
    border-radius: 0.375rem;
    overflow-x: auto;
  }

  .quick-start code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.8125rem;
    color: #7C9885;
    line-height: 1.5;
    white-space: pre;
  }

  .links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: rgba(139, 115, 85, 0.08);
    border: 1px solid rgba(139, 115, 85, 0.2);
    border-radius: 0.375rem;
    color: rgba(251, 248, 244, 0.85);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
  }

  .link:hover {
    background: rgba(124, 152, 133, 0.15);
    border-color: rgba(124, 152, 133, 0.3);
    color: rgba(251, 248, 244, 0.95);
    transform: translateY(-1px);
  }

  .link svg {
    width: 14px;
    height: 14px;
  }

  /* Scrollbar */
  .about-content::-webkit-scrollbar {
    width: 6px;
  }

  .about-content::-webkit-scrollbar-track {
    background: rgba(139, 115, 85, 0.05);
    border-radius: 3px;
  }

  .about-content::-webkit-scrollbar-thumb {
    background: rgba(139, 115, 85, 0.2);
    border-radius: 3px;
  }

  .about-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 115, 85, 0.3);
  }

  @media (max-width: 600px) {
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>