Files
FEDEO/website/app/pages/index.vue

292 lines
10 KiB
Vue

<template>
<main>
<header class="site-header">
<a class="brand" href="#start" aria-label="FEDEO Startseite">
<img src="/Logo.png" alt="FEDEO" />
</a>
<nav aria-label="Hauptnavigation">
<a href="#funktionen">Funktionen</a>
<a href="#open-source">Open Source</a>
<a href="#selfhost">Selfhost</a>
<a href="#matrix">Matrix</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="selfhost" class="script-section">
<div>
<p class="eyebrow">Selfhosting</p>
<h2>FEDEO auf deinem Server starten.</h2>
<p>
Der Installer prüft die Basisumgebung, richtet Docker bei Bedarf ein, lädt FEDEO und startet danach den geführten Selfhost-Assistenten.
</p>
</div>
<div class="code-window" aria-label="FEDEO Selfhost Installationsbefehl">
<div class="code-window-toolbar">
<span></span>
<span></span>
<span></span>
<strong>Terminal</strong>
</div>
<pre><code>{{ installCommand }}</code></pre>
</div>
</section>
<section id="matrix" class="matrix-section">
<div class="section-heading">
<p class="eyebrow">Tief integriert</p>
<h2>Matrix als Kommunikationsschicht für FEDEO.</h2>
<p>
FEDEO verbindet Chat, Räume, Anrufe und Videokonferenzen mit Projekten, Vorgängen, Kontakten und Berechtigungen. Matrix läuft dabei nicht daneben, sondern wird durch FEDEO provisioniert, verknüpft und betrieben.
</p>
</div>
<div class="matrix-layout">
<div class="matrix-stack">
<article v-for="item in matrixStack" :key="item.title">
<span>{{ item.tag }}</span>
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</article>
</div>
<div class="matrix-diagram" aria-label="Matrix Stack Architektur">
<div>FEDEO Web & App</div>
<span></span>
<div>FEDEO Backend<br><small>SSO, Rechte, Objektkontext</small></div>
<span></span>
<div>Matrix Homeserver<br><small>Synapse, Räume, Events</small></div>
<span></span>
<div>LiveKit, coturn, Element<br><small>Anrufe, Video, Gäste</small></div>
</div>
</div>
<div class="federation-panel">
<div>
<p class="eyebrow">Föderation</p>
<h3>FEDEO-Instanzen können kontrolliert miteinander sprechen.</h3>
</div>
<p>
Für sensible Unternehmenskommunikation bleibt die Föderation standardmäßig steuerbar: geschlossen für interne Installationen, per Allowlist für Partner und Kunden oder bewusst geöffnet für öffentliche Matrix-Szenarien.
</p>
</div>
</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="/Logo.png" alt="FEDEO" />
<div>
<NuxtLink to="/impressum">Impressum</NuxtLink>
<a href="https://federspiel.tech/datenschutz">Datenschutz</a>
<a href="https://app.fedeo.de">Einloggen</a>
</div>
<p>Copyright © 2026 Federspiel Technology 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 Matrix-Räume 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.'
}
]
const matrixStack = [
{
tag: 'Chat',
title: 'Projekt- und Vorgangsräume',
description: 'Matrix-Räume werden aus FEDEO-Kontexten wie Projekten, Tickets, Teams und Kontakten heraus genutzt.'
},
{
tag: 'Identität',
title: 'FEDEO bleibt führend',
description: 'Nutzer, Rollen und Raumzugriffe werden aus FEDEO heraus provisioniert und bei Änderungen synchronisiert.'
},
{
tag: 'Audio & Video',
title: 'MatrixRTC mit LiveKit',
description: 'Gruppenanrufe, Videokonferenzen und Bildschirmfreigaben laufen über MatrixRTC, LiveKit und coturn.'
},
{
tag: 'Betrieb',
title: 'Selfhost-ready Stack',
description: 'Synapse, PostgreSQL, Redis, .well-known, Element und TURN/STUN sind im Selfhost-Stack vorbereitet.'
},
{
tag: 'Föderation',
title: 'Instanzübergreifende Zusammenarbeit',
description: 'Mehrere FEDEO- oder Matrix-Instanzen können über freigegebene Domains föderieren, ohne die lokale Kontrolle über Nutzer und Räume aufzugeben.'
}
]
const installCommand = 'curl -fsSL https://git.federspiel.tech/flfeders/FEDEO/raw/branch/dev/scripts/selfhost-install.sh | bash -s -- --simple --start'
</script>