flfeders/FEDEO
2
1
Fork 0
Code Issues 96 Pull Requests Actions Packages Projects 22 Releases Wiki Activity

KI-AGENT: Kontaktformular und Datenschutzseite ergänzt

Browse Source
This commit is contained in:
florianfederspiel
2026-05-22 15:03:56 +02:00
parent 0bd0120ec2
commit 76764eb4c3
8 changed files with 590 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
website/app/assets/css/main.css
View File

@@ -676,21 +676,25 @@ footer {
padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem;
}
.contact-page,
.audience-page {
margin: 0 auto;
max-width: 1180px;
padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem;
}
.contact-heading,
.audience-heading {
max-width: 58rem;
margin-bottom: 2.5rem;
}
.contact-heading h1,
.audience-heading h1 {
max-width: 12ch;
}
.contact-heading p,
.audience-heading p {
color: #51605c;
font-size: 1.08rem;
@@ -698,6 +702,103 @@ footer {
max-width: 46rem;
}
.contact-form {
background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(23, 33, 31, 0.1);
border-radius: 0.5rem;
display: grid;
gap: 1rem;
max-width: 820px;
padding: clamp(1.25rem, 4vw, 2rem);
}
.form-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-form label {
color: #17211f;
display: grid;
font-size: 0.95rem;
font-weight: 800;
gap: 0.45rem;
}
.contact-form input,
.contact-form textarea {
background: #ffffff;
border: 1px solid rgba(23, 33, 31, 0.14);
border-radius: 0.45rem;
color: #17211f;
font: inherit;
font-weight: 500;
min-height: 3rem;
padding: 0.8rem 0.9rem;
width: 100%;
}
.contact-form textarea {
line-height: 1.55;
min-height: 12rem;
resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 0.2rem rgba(105, 195, 80, 0.18);
outline: none;
}
.honeypot {
display: none;
}
.check-row {
align-items: start;
display: flex;
font-weight: 500;
gap: 0.7rem;
line-height: 1.55;
}
.check-row input {
flex: 0 0 auto;
margin-top: 0.25rem;
min-height: auto;
width: auto;
}
.check-row a,
.form-status.error {
color: var(--accent-dark);
font-weight: 800;
}
.form-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.form-actions button {
border: 0;
cursor: pointer;
}
.form-actions button:disabled {
cursor: wait;
opacity: 0.72;
}
.form-status {
color: #51605c;
margin: 0;
}
.audience-grid {
display: grid;
gap: 1rem;
@@ -771,6 +872,10 @@ footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.privacy-grid article {
align-content: start;
}
.legal-grid article {
background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(23, 33, 31, 0.1);
@@ -842,6 +947,7 @@ footer p {
.highlights,
.feature-grid,
.form-grid,
.audience-grid,
.audience-fit,
.matrix-layout,
@@ -886,6 +992,7 @@ footer p {
font-size: 3rem;
}
.contact-heading h1,
.audience-heading h1 {
font-size: 2.55rem;
max-width: none;

105
website/app/pages/datenschutz.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<main>
<header class="site-header">
<NuxtLink class="brand" to="/" aria-label="FEDEO Startseite">
<img src="/Logo.png" alt="FEDEO" />
</NuxtLink>
<nav aria-label="Hauptnavigation">
<NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
<NuxtLink to="/#funktionen">Funktionen</NuxtLink>
<NuxtLink to="/#open-source">Open Source</NuxtLink>
<NuxtLink to="/#selfhost">Selfhost</NuxtLink>
<NuxtLink to="/#matrix">Matrix</NuxtLink>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<a class="login-link" href="https://app.fedeo.de">Einloggen</a>
</nav>
</header>
<section class="legal-page">
<div class="legal-heading">
<p class="eyebrow">Federspiel Technology</p>
<h1>Datenschutzerklärung</h1>
<p>Stand: 22. Mai 2026</p>
</div>
<div class="legal-grid privacy-grid">
<article>
<h2>Verantwortlicher</h2>
<p>
Federspiel Technology UG (haftungsbeschränkt)<br>
Am Schwarzen Brack 14<br>
26452 Sande<br>
Deutschland
</p>
<p>
E-Mail: <a href="mailto:f.federspiel@federspiel.tech">f.federspiel@federspiel.tech</a>
</p>
</article>
<article>
<h2>Aufruf der Webseite</h2>
<p>
Beim Besuch dieser Webseite werden technisch notwendige Zugriffsdaten verarbeitet, damit die Seite ausgeliefert, gesichert und betrieben werden kann. Dazu können IP-Adresse, Datum, Uhrzeit, angeforderte Seite, Browserinformationen und Serverstatus gehören.
</p>
<p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO.</p>
</article>
<article>
<h2>Kontaktformular</h2>
<p>
Wenn du das Kontaktformular nutzt, verarbeiten wir deinen Namen, deine E-Mail-Adresse, optional dein Unternehmen und deine Nachricht, um deine Anfrage zu beantworten.
</p>
<p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, bei allgemeinen Anfragen zusätzlich Art. 6 Abs. 1 lit. f DSGVO.</p>
</article>
<article>
<h2>E-Mail-Versand</h2>
<p>
Die Angaben aus dem Kontaktformular werden serverseitig per SMTP an die hinterlegte Kontaktadresse übermittelt. Die SMTP-Zugangsdaten werden ausschließlich als Umgebungsvariablen verarbeitet und nicht im Quellcode gespeichert.
</p>
</article>
<article>
<h2>Speicherdauer</h2>
<p>
Kontaktanfragen werden nur so lange aufbewahrt, wie es für die Bearbeitung und gesetzliche Aufbewahrungspflichten erforderlich ist. Server-Logdaten werden nach Maßgabe der technischen und sicherheitsbezogenen Erfordernisse gelöscht.
</p>
</article>
<article>
<h2>Empfänger</h2>
<p>
Eine Weitergabe personenbezogener Daten erfolgt nur, wenn sie für Betrieb, Sicherheit, Kommunikation oder gesetzliche Pflichten erforderlich ist.
</p>
</article>
<article>
<h2>Deine Rechte</h2>
<p>
Du hast nach Maßgabe der DSGVO Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch. Außerdem kannst du dich bei einer Datenschutzaufsichtsbehörde beschweren.
</p>
</article>
<article>
<h2>Pflichtangaben</h2>
<p>
Die Nutzung des Kontaktformulars ist freiwillig. Ohne die erforderlichen Angaben können wir deine Anfrage jedoch nicht beantworten.
</p>
</article>
</div>
</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>

5
website/app/pages/impressum.vue
View File

@@ -11,7 +11,7 @@
<NuxtLink to="/#open-source">Open Source</NuxtLink>
<NuxtLink to="/#selfhost">Selfhost</NuxtLink>
<NuxtLink to="/#matrix">Matrix</NuxtLink>
<NuxtLink to="/#kontakt">Kontakt</NuxtLink>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<a class="login-link" href="https://app.fedeo.de">Einloggen</a>
</nav>
</header>
@@ -99,8 +99,9 @@
<img src="/Logo.png" alt="FEDEO" />
<div>
<NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<NuxtLink to="/impressum">Impressum</NuxtLink>
<a href="https://federspiel.tech/datenschutz">Datenschutz</a>
<NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
<a href="https://app.fedeo.de">Einloggen</a>
</div>
<p>Copyright © 2026 Federspiel Technology UG haftungsbeschränkt.</p>

9
website/app/pages/index.vue
View File

@@ -11,7 +11,7 @@
<a href="#open-source">Open Source</a>
<a href="#selfhost">Selfhost</a>
<a href="#matrix">Matrix</a>
<a href="#kontakt">Kontakt</a>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<a class="login-link" href="https://app.fedeo.de">Einloggen</a>
</nav>
</header>
@@ -24,7 +24,7 @@
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>
<NuxtLink class="primary-action" to="/kontakt">Demo anfragen</NuxtLink>
<a class="secondary-action" href="#funktionen">Funktionen ansehen</a>
</div>
</div>
@@ -215,15 +215,16 @@
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>
<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>
<a href="https://federspiel.tech/datenschutz">Datenschutz</a>
<NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
<a href="https://app.fedeo.de">Einloggen</a>
</div>
<p>Copyright © 2026 Federspiel Technology UG haftungsbeschränkt.</p>

124
website/app/pages/kontakt.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<main>
<header class="site-header">
<NuxtLink class="brand" to="/" aria-label="FEDEO Startseite">
<img src="/Logo.png" alt="FEDEO" />
</NuxtLink>
<nav aria-label="Hauptnavigation">
<NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
<NuxtLink to="/#funktionen">Funktionen</NuxtLink>
<NuxtLink to="/#open-source">Open Source</NuxtLink>
<NuxtLink to="/#selfhost">Selfhost</NuxtLink>
<NuxtLink to="/#matrix">Matrix</NuxtLink>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<a class="login-link" href="https://app.fedeo.de">Einloggen</a>
</nav>
</header>
<section class="contact-page">
<div class="contact-heading">
<p class="eyebrow">Kontakt</p>
<h1>Sprich mit uns über FEDEO.</h1>
<p>
Ob Demo, Selfhosting, Integrationen oder ein konkreter Ablauf im Betrieb: Schreib uns kurz, worum es geht.
</p>
</div>
<form class="contact-form" @submit.prevent="submitForm">
<div class="form-grid">
<label>
Name
<input v-model="form.name" name="name" autocomplete="name" required>
</label>
<label>
E-Mail
<input v-model="form.email" name="email" autocomplete="email" required type="email">
</label>
</div>
<label>
Unternehmen
<input v-model="form.company" name="company" autocomplete="organization">
</label>
<label class="honeypot">
Website
<input v-model="form.website" name="website" tabindex="-1" autocomplete="off">
</label>
<label>
Nachricht
<textarea v-model="form.message" name="message" required rows="8"></textarea>
</label>
<label class="check-row">
<input v-model="form.privacy" type="checkbox" required>
<span>
Ich habe die <NuxtLink to="/datenschutz">Datenschutzerklärung</NuxtLink> gelesen und bin mit der Verarbeitung meiner Angaben zur Kontaktaufnahme einverstanden.
</span>
</label>
<div class="form-actions">
<button class="primary-action" :disabled="pending" type="submit">
{{ pending ? 'Wird gesendet' : 'Anfrage senden' }}
</button>
<p v-if="statusMessage" :class="['form-status', statusType]">{{ statusMessage }}</p>
</div>
</form>
</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 form = reactive({
company: '',
email: '',
message: '',
name: '',
privacy: false,
website: ''
})
const pending = ref(false)
const statusMessage = ref('')
const statusType = ref<'error' | 'success'>('success')
const submitForm = async () => {
pending.value = true
statusMessage.value = ''
try {
await $fetch('/api/contact', {
body: form,
method: 'POST'
})
form.company = ''
form.email = ''
form.message = ''
form.name = ''
form.privacy = false
form.website = ''
statusType.value = 'success'
statusMessage.value = 'Danke, deine Nachricht wurde gesendet.'
} catch (error: any) {
statusType.value = 'error'
statusMessage.value = error?.statusMessage || 'Die Nachricht konnte gerade nicht gesendet werden.'
} finally {
pending.value = false
}
}
</script>

7
website/app/pages/zielgruppen.vue
View File

@@ -11,7 +11,7 @@
<NuxtLink to="/#open-source">Open Source</NuxtLink>
<NuxtLink to="/#selfhost">Selfhost</NuxtLink>
<NuxtLink to="/#matrix">Matrix</NuxtLink>
<NuxtLink to="/#kontakt">Kontakt</NuxtLink>
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
<a class="login-link" href="https://app.fedeo.de">Einloggen</a>
</nav>
</header>
@@ -56,15 +56,16 @@
<h2>Nicht sicher, ob FEDEO zu deinem Betrieb passt?</h2>
<p>In einer Demo lässt sich schnell prüfen, welche Abläufe FEDEO direkt abdecken kann.</p>
</div>
<a class="primary-action" href="https://fedeo.de/kontakt">Demo anfragen</a>
<NuxtLink class="primary-action" to="/kontakt">Demo anfragen</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>
<a href="https://federspiel.tech/datenschutz">Datenschutz</a>
<NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
<a href="https://app.fedeo.de">Einloggen</a>
</div>
<p>Copyright © 2026 Federspiel Technology UG haftungsbeschränkt.</p>