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

349 lines
13 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">
<NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
<a href="#funktionen">Funktionen</a>
<a href="#open-source">Open Source</a>
<a href="#selfhost">Selfhost</a>
<a href="#matrix">Matrix</a>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<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">
<NuxtLink class="primary-action" to="/kontakt">Demo anfragen</NuxtLink>
<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>
<details>
<summary>Mehr Details</summary>
<ul>
<li v-for="detail in feature.details" :key="detail">{{ detail }}</li>
</ul>
</details>
</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 class="audience-teaser">
<div>
<p class="eyebrow">Für wen</p>
<h2>Gemacht für Teams, bei denen Büro und Einsatzort zusammenarbeiten müssen.</h2>
</div>
<NuxtLink class="secondary-action" to="/zielgruppen">Zielgruppen ansehen</NuxtLink>
</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>FEDEO Kommunikation<br><small>Räume, Gäste, Föderation</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>
<NuxtLink class="primary-action" to="/kontakt">Kontakt aufnehmen</NuxtLink>
</section>
<footer>
<img src="/Logo.png" alt="FEDEO" />
<div>
<NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<NuxtLink to="/impressum">Impressum</NuxtLink>
<NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
<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.',
details: [
'Projektakten mit Aufgaben, Dokumenten und Zeitbezug',
'Objekte als dauerhafte Wissensbasis unabhängig vom einzelnen Auftrag',
'Saubere Historie für wiederkehrende Arbeiten und Ansprechpartner'
]
},
{
tag: 'Team',
title: 'Plantafel und Zeiterfassung',
description: 'Mitarbeitende, Ressourcen, Fahrzeuge, Arbeitszeiten und Rapportzeiten lassen sich durchgängig planen und erfassen.',
details: [
'Planung von Teams, Fahrzeugen und Ressourcen',
'Arbeits- und Rapportzeiten direkt im Projektkontext',
'Auswertbare Zeiten für Abrechnung, Nachkalkulation und Überblick'
]
},
{
tag: 'Büro',
title: 'Aufgaben und Kommunikation',
description: 'Aufgaben, interne Nachrichten und Matrix-Räume laufen dort zusammen, wo die Arbeit entsteht.',
details: [
'Aufgaben mit Bezug zu Projekten, Vorgängen und Teams',
'Matrix-Räume für projektnahe Abstimmung',
'Benachrichtigungen und Lesestatus für laufende Arbeit'
]
},
{
tag: 'Warenfluss',
title: 'Lager und Inventar',
description: 'Bestände, Ein- und Ausgänge, Inventar und regelmäßige Überprüfungen bleiben im Blick.',
details: [
'Bestandsbewegungen für Material und Waren',
'Inventar mit Zuordnung zu Standorten oder Projekten',
'Überprüfungen und Nachweise für Geräte und Ausstattung'
]
},
{
tag: 'Kaufmännisch',
title: 'Buchhaltung und Bankportal',
description: 'Belege, offene Posten, Exporte und Bankabläufe unterstützen den kaufmännischen Alltag.',
details: [
'Belege und offene Posten im täglichen Überblick',
'Bankportal für Zahlungseingänge und Zuordnung',
'Exporte für Steuerberatung und nachgelagerte Systeme'
]
},
{
tag: 'Geräte',
title: 'Geräteintegration',
description: 'Bürogeräte, Drucker und angebundene Hardware werden in digitale Prozesse eingebunden.',
details: [
'Anbindung von Druckern, Etiketten und Spezialhardware',
'Gerätebezogene Workflows direkt aus FEDEO heraus',
'Grundlage für Automatisierung in Büro, Lager und Einsatzort'
]
},
{
tag: 'Kontakte',
title: 'Kunden und Lieferanten',
description: 'Kontakte, Ansprechpartner und Stammdaten sind zentral erreichbar und für Folgeprozesse nutzbar.',
details: [
'Zentrale Stammdaten für Kunden, Lieferanten und Ansprechpartner',
'Verknüpfung mit Projekten, Objekten und Belegen',
'Weniger doppelte Pflege durch durchgängige Datennutzung'
]
},
{
tag: 'Mobil',
title: 'Web und App',
description: 'FEDEO ist für Arbeit am Schreibtisch und für mobile Abläufe im Einsatz vorbereitet.',
details: [
'Weboberfläche für Büro und Verwaltung',
'Mobile App für Kommunikation und Arbeit unterwegs',
'Selfhost- und Cloud-Betrieb mit gemeinsamen Prozessen'
]
}
]
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: 'Kommunikation',
title: 'Chat, Gäste und Räume',
description: 'Teamräume, externe Gäste und projektnahe Abstimmung bleiben direkt mit FEDEO-Kontexten verbunden.'
},
{
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>