FEDEO/website/app/pages/index.vue

<template>
  <main>
    <header class="site-header">
      <a class="brand" href="#start" aria-label="FEDEO Startseite">
        <img src="/fedeo-logo.png" alt="FEDEO" />
      </a>

      <nav aria-label="Hauptnavigation">
        <a href="#funktionen">Funktionen</a>
        <a href="#open-source">Open Source</a>
        <a href="#kontakt">Kontakt</a>
        <a class="login-link" href="https://app.fedeo.de">Einloggen</a>
      </nav>
    </header>

    <section id="start" class="hero-section">
      <div class="hero-copy">
        <p class="eyebrow">Open-Source Unternehmenssoftware</p>
        <h1>Platz für dein Unternehmen.</h1>
        <p class="hero-text">
          FEDEO bündelt Projekte, Zeiten, Buchhaltung, Kommunikation, Geräte und Warenflüsse in einer Oberfläche, die den Arbeitsalltag kleiner und mittlerer Teams spürbar ruhiger macht.
        </p>
        <div class="hero-actions">
          <a class="primary-action" href="#kontakt">Demo anfragen</a>
          <a class="secondary-action" href="#funktionen">Funktionen ansehen</a>
        </div>
      </div>

      <div class="product-preview" aria-label="FEDEO Oberfläche">
        <div class="preview-toolbar">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="preview-grid">
          <aside>
            <strong>FEDEO</strong>
            <span>Dashboard</span>
            <span>Projekte</span>
            <span>Zeiterfassung</span>
            <span>Buchhaltung</span>
            <span>Kommunikation</span>
          </aside>
          <div class="preview-content">
            <div class="metric-row">
              <div>
                <small>Offene Aufgaben</small>
                <strong>18</strong>
              </div>
              <div>
                <small>Rapporte heute</small>
                <strong>42</strong>
              </div>
              <div>
                <small>Geräte online</small>
                <strong>9</strong>
              </div>
            </div>
            <div class="timeline">
              <span style="--width: 82%"></span>
              <span style="--width: 64%"></span>
              <span style="--width: 48%"></span>
            </div>
            <div class="work-card">
              <strong>Projekt Nordhalle</strong>
              <p>Personal, Material und Zeiten sind auf dem aktuellen Stand.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="highlights" aria-label="Die wichtigsten Punkte">
      <article>
        <span>01</span>
        <h2>Einfache Bedienung</h2>
        <p>Schnelle Abläufe, klare Masken und kurze Wege für Teams, die mitten im Betrieb arbeiten.</p>
      </article>
      <article>
        <span>02</span>
        <h2>Cloud oder selbst gehostet</h2>
        <p>FEDEO kann bequem betrieben werden und bleibt offen für eigene Infrastruktur.</p>
      </article>
      <article>
        <span>03</span>
        <h2>Ganzheitlich</h2>
        <p>Von Kundenkontakt bis Inventar greifen die Arbeitsbereiche ineinander.</p>
      </article>
    </section>

    <section id="funktionen" class="section">
      <div class="section-heading">
        <p class="eyebrow">Aktuelle Funktionen</p>
        <h2>Alles, was im Betrieb zusammengehört, an einem Ort.</h2>
        <p>
          Die neue Webseite zeigt FEDEO als modularen Werkzeugkasten für Organisation, kaufmännische Abläufe und tägliche Teamarbeit.
        </p>
      </div>

      <div class="feature-grid">
        <article v-for="feature in features" :key="feature.title">
          <span>{{ feature.tag }}</span>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </article>
      </div>
    </section>

    <section class="workflow-section">
      <div>
        <p class="eyebrow">Vom Auftrag bis zur Auswertung</p>
        <h2>FEDEO verbindet Büro, Lager und Einsatzorte.</h2>
      </div>
      <ol>
        <li>Kontakte, Objekte und Projekte zentral anlegen</li>
        <li>Teams, Fahrzeuge und Material auf der Plantafel planen</li>
        <li>Arbeitszeiten, Rapporte und Aufgaben laufend erfassen</li>
        <li>Belege, Auswertungen und Kommunikation sauber weiterführen</li>
      </ol>
    </section>

    <section id="open-source" class="open-source-section">
      <div>
        <p class="eyebrow">Open Source</p>
        <h2>Offen, nachvollziehbar und anpassbar.</h2>
        <p>
          FEDEO wird als Open-Source-Software entwickelt. Das schafft Transparenz, erleichtert eigene Anpassungen und macht die Lösung unabhängig von geschlossenen Plattformversprechen.
        </p>
      </div>
      <a class="secondary-action" href="https://git.federspiel.tech/flfeders/FEDEO">Repository ansehen</a>
    </section>

    <section id="kontakt" class="contact-section">
      <div>
        <p class="eyebrow">Jetzt anfragen</p>
        <h2>Bereit für mehr Ruhe im Betrieb?</h2>
        <p>
          Frag eine Demo an und wir zeigen dir, wie FEDEO zu deinen Abläufen passt.
        </p>
      </div>
      <a class="primary-action" href="https://fedeo.de/kontakt">Kontakt aufnehmen</a>
    </section>

    <footer>
      <img src="/fedeo-logo.png" alt="FEDEO" />
      <div>
        <a href="https://fedeo.de/impressum">Impressum</a>
        <a href="https://fedeo.de/datenschutz">Datenschutz</a>
        <a href="https://app.fedeo.de">Einloggen</a>
      </div>
      <p>Copyright © 2026 Federspiel Software UG haftungsbeschränkt.</p>
    </footer>
  </main>
</template>

<script setup lang="ts">
const features = [
  {
    tag: 'Projekte',
    title: 'Projekte und Objekte',
    description: 'Aufträge, Dokumentation und projektunabhängige Objektinformationen bleiben nachvollziehbar verbunden.'
  },
  {
    tag: 'Team',
    title: 'Plantafel und Zeiterfassung',
    description: 'Mitarbeitende, Ressourcen, Fahrzeuge, Arbeitszeiten und Rapportzeiten lassen sich durchgängig planen und erfassen.'
  },
  {
    tag: 'Büro',
    title: 'Aufgaben und Kommunikation',
    description: 'Aufgaben, interne Nachrichten und betriebliche Abstimmung laufen dort zusammen, wo die Arbeit entsteht.'
  },
  {
    tag: 'Warenfluss',
    title: 'Lager und Inventar',
    description: 'Bestände, Ein- und Ausgänge, Inventar und regelmäßige Überprüfungen bleiben im Blick.'
  },
  {
    tag: 'Kaufmännisch',
    title: 'Buchhaltung und Bankportal',
    description: 'Belege, offene Posten, Exporte und Bankabläufe unterstützen den kaufmännischen Alltag.'
  },
  {
    tag: 'Geräte',
    title: 'Geräteintegration',
    description: 'Bürogeräte, Drucker und angebundene Hardware werden in digitale Prozesse eingebunden.'
  },
  {
    tag: 'Kontakte',
    title: 'Kunden und Lieferanten',
    description: 'Kontakte, Ansprechpartner und Stammdaten sind zentral erreichbar und für Folgeprozesse nutzbar.'
  },
  {
    tag: 'Mobil',
    title: 'Web und App',
    description: 'FEDEO ist für Arbeit am Schreibtisch und für mobile Abläufe im Einsatz vorbereitet.'
  }
]
</script>