frontend/src/views/About.vue

<template>
  <div class="about">
    <!-- About Header -->
    <div class="about-header">
      <h1 class="saap-heading-1">SAAP Platform</h1>
      <p class="saap-body-large text-saap-gray-600">
        satware AI Autonomous Agent Platform
      </p>
      <div class="version-badge">
        <span class="saap-mono text-saap-primary-600 font-semibold">v1.0.0</span>
      </div>
    </div>

    <!-- Platform Information -->
    <div class="about-sections space-y-8">
      
      <!-- Overview -->
      <div class="section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">Platform Overview</h2>
        <div class="content-grid">
          <div>
            <p class="saap-body mb-4">
              SAAP ist eine lokale autonome Multi-Agent-Plattform für den sicheren, 
              skalierbaren und ressourceneffizienten Betrieb spezialisierter KI-Agenten.
            </p>
            <p class="saap-body mb-4">
              Entwickelt als Master-Thesis-Projekt von <strong>Hanan Wandji Danga</strong> 
              an der Hochschule Worms in Kooperation mit <strong>satware AG</strong>.
            </p>
          </div>
          <div class="features-list">
            <h3 class="saap-heading-3 mb-3">Key Features</h3>
            <ul class="saap-body space-y-2">
              <li class="feature-item">✅ On-Premise Deployment</li>
              <li class="feature-item">✅ Multi-Agent Orchestration</li>
              <li class="feature-item">✅ Real-time Communication</li>
              <li class="feature-item">✅ DSGVO Compliance</li>
              <li class="feature-item">✅ Scalable Architecture</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Technical Architecture -->
      <div class="section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">Technical Architecture</h2>
        <div class="tech-stack">
          <div class="tech-category">
            <h3 class="tech-title">Backend</h3>
            <div class="tech-items">
              <span class="tech-badge">Python</span>
              <span class="tech-badge">FastAPI</span>
              <span class="tech-badge">SQLAlchemy</span>
              <span class="tech-badge">Redis</span>
            </div>
          </div>
          <div class="tech-category">
            <h3 class="tech-title">Frontend</h3>
            <div class="tech-items">
              <span class="tech-badge">Vue.js 3</span>
              <span class="tech-badge">Pinia</span>
              <span class="tech-badge">TailwindCSS</span>
              <span class="tech-badge">WebSocket</span>
            </div>
          </div>
          <div class="tech-category">
            <h3 class="tech-title">AI/ML</h3>
            <div class="tech-items">
              <span class="tech-badge">colossus Server</span>
              <span class="tech-badge">Mistral AI</span>
              <span class="tech-badge">LangChain</span>
              <span class="tech-badge">PyTorch</span>
            </div>
          </div>
          <div class="tech-category">
            <h3 class="tech-title">Infrastructure</h3>
            <div class="tech-items">
              <span class="tech-badge">Docker</span>
              <span class="tech-badge">PostgreSQL</span>
              <span class="tech-badge">Nginx</span>
              <span class="tech-badge">GitLab CI/CD</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Available Agents -->
      <div class="section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">Available AI Agents</h2>
        <div class="agents-info">
          <div class="agent-info">
            <div class="agent-avatar bg-agent-jane">J</div>
            <div>
              <h3 class="agent-name">Jane Alesi</h3>
              <p class="agent-desc">Lead AI Architect & Coordinator</p>
            </div>
          </div>
          <div class="agent-info">
            <div class="agent-avatar bg-agent-john">J</div>
            <div>
              <h3 class="agent-name">John Alesi</h3>
              <p class="agent-desc">Software Development Expert</p>
            </div>
          </div>
          <div class="agent-info">
            <div class="agent-avatar bg-agent-lara">L</div>
            <div>
              <h3 class="agent-name">Lara Alesi</h3>
              <p class="agent-desc">Medical AI Assistant</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Project Information -->
      <div class="section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">Project Information</h2>
        <div class="project-info">
          <div class="info-item">
            <span class="info-label">Student</span>
            <span class="info-value">Hanan Wandji Danga</span>
          </div>
          <div class="info-item">
            <span class="info-label">University</span>
            <span class="info-value">Hochschule Worms</span>
          </div>
          <div class="info-item">
            <span class="info-label">Supervisor</span>
            <span class="info-value">Prof. Dr. Jens Kohler</span>
          </div>
          <div class="info-item">
            <span class="info-label">Industry Partner</span>
            <span class="info-value">satware AG</span>
          </div>
          <div class="info-item">
            <span class="info-label">Repository</span>
            <a 
              href="https://gitlab.satware.com/hanan/le-chantier" 
              class="info-link"
              target="_blank"
            >
              gitlab.satware.com/hanan/le-chantier
            </a>
          </div>
        </div>
      </div>

      <!-- System Status -->
      <div class="section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">System Status</h2>
        <div class="status-grid">
          <div class="status-item">
            <span class="status-label">Backend API</span>
            <span class="status-value status-active">Active</span>
          </div>
          <div class="status-item">
            <span class="status-label">WebSocket</span>
            <span class="status-value status-active">Connected</span>
          </div>
          <div class="status-item">
            <span class="status-label">Database</span>
            <span class="status-value status-active">Healthy</span>
          </div>
          <div class="status-item">
            <span class="status-label">colossus Server</span>
            <span class="status-value status-active">Available</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Static content component - no complex logic needed
</script>

<style scoped>
.about {
  @apply space-y-8;
}

.about-header {
  @apply text-center space-y-4 pb-8;
}

.version-badge {
  @apply inline-flex px-3 py-1 bg-saap-primary-100 rounded-full;
}

.about-sections {
  @apply space-y-8;
}

.section {
  @apply space-y-4;
}

.content-grid {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.features-list ul {
  @apply list-none;
}

.feature-item {
  @apply flex items-center;
}

/* Tech Stack */
.tech-stack {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.tech-category {
  @apply space-y-3;
}

.tech-title {
  @apply text-lg font-semibold text-saap-gray-800;
}

.tech-items {
  @apply flex flex-wrap gap-2;
}

.tech-badge {
  @apply inline-flex px-3 py-1 bg-saap-gray-100 text-saap-gray-700;
  @apply text-sm rounded-full font-medium;
}

/* Agents */
.agents-info {
  @apply grid grid-cols-1 md:grid-cols-3 gap-4;
}

.agent-info {
  @apply flex items-center space-x-3;
}

.agent-avatar {
  @apply w-10 h-10 rounded-lg flex items-center justify-center;
  @apply text-white font-bold text-sm;
}

.agent-name {
  @apply font-semibold text-saap-gray-900;
}

.agent-desc {
  @apply text-sm text-saap-gray-600;
}

/* Project Info */
.project-info {
  @apply space-y-3;
}

.info-item {
  @apply flex justify-between items-center py-2 border-b border-saap-gray-100;
}

.info-label {
  @apply font-medium text-saap-gray-700;
}

.info-value {
  @apply text-saap-gray-900;
}

.info-link {
  @apply text-saap-primary-600 hover:text-saap-primary-700;
  @apply underline transition-colors;
}

/* Status */
.status-grid {
  @apply grid grid-cols-2 md:grid-cols-4 gap-4;
}

.status-item {
  @apply flex flex-col items-center text-center space-y-1;
}

.status-label {
  @apply text-sm text-saap-gray-600;
}

.status-value {
  @apply font-semibold;
}

.status-active {
  @apply text-saap-secondary-600;
}

.status-inactive {
  @apply text-saap-gray-500;
}

.status-error {
  @apply text-red-600;
}
</style>