feat: conversion landing page with automated screenshots
This commit is contained in:
Jonas Miederer
parent
85c5a8381c
commit
82f7ff8b02
8 changed files with 362 additions and 35 deletions
|
|
@ -1,71 +1,280 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import { Button, Card, Grid, Group, Text, Title } from "@mantine/core";
|
||||
import {
|
||||
Accordion,
|
||||
Anchor,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
List,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Timeline,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconCheck,
|
||||
IconClipboardCheck,
|
||||
IconFileText,
|
||||
IconInbox,
|
||||
IconKey,
|
||||
IconLock,
|
||||
IconServer,
|
||||
IconSparkles,
|
||||
IconUserCheck,
|
||||
} from "@tabler/icons-react";
|
||||
import { useAuth } from "../auth";
|
||||
|
||||
const actions = [
|
||||
const CTA_LABEL = "Zugang anfragen";
|
||||
|
||||
const facts = [
|
||||
{ icon: <IconServer size={20} />, text: "Gehostet in Deutschland" },
|
||||
{ icon: <IconKey size={20} />, text: "Login ohne Passwort" },
|
||||
{ icon: <IconClipboardCheck size={20} />, text: "Jeder Schritt protokolliert" },
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
to: "/access",
|
||||
icon: <IconKey size={28} />,
|
||||
title: "Zugang anfragen",
|
||||
text: "Neu hier? Fordern Sie Ihren persönlichen Zugang an.",
|
||||
icon: <IconFileText size={28} />,
|
||||
title: "In eigenen Worten",
|
||||
text: "Mitarbeitende beschreiben Anliegen wie gewohnt — das System führt in verständlichen Schritten durch den Vorgang.",
|
||||
},
|
||||
{
|
||||
to: "/app/workflows",
|
||||
icon: <IconSparkles size={28} />,
|
||||
title: "Workflows",
|
||||
text: "Vorgänge über Formulare starten und verfolgen.",
|
||||
title: "Regeln automatisch geprüft",
|
||||
text: "Schwellen, Zuständigkeiten und Abläufe prüft die Software selbst. Routine läuft durch, ohne dass jemand klicken muss.",
|
||||
},
|
||||
{
|
||||
to: "/app/tasks",
|
||||
icon: <IconInbox size={28} />,
|
||||
title: "Aufgaben",
|
||||
text: "Eigene Läufe und offene Freigaben im Blick.",
|
||||
icon: <IconUserCheck size={28} />,
|
||||
title: "Mensch nur wo nötig",
|
||||
text: "Echte Entscheidungen landen mit allen Fakten bei der zuständigen Person — Freigabe oder Ablehnung inklusive Notiz.",
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: "Zugang anfragen & anmelden",
|
||||
text: "Anfrage stellen, per E-Mail-Link einloggen — ganz ohne Passwort.",
|
||||
},
|
||||
{
|
||||
title: "Formular ausfüllen & starten",
|
||||
text: "Vorgang wählen, Angaben machen, starten. Der Ablauf folgt automatisch.",
|
||||
},
|
||||
{
|
||||
title: "Ergebnis & Protokoll",
|
||||
text: "Antwort erhalten, Freigaben erteilen — jeder Schritt bleibt nachvollziehbar.",
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: "Was kostet Kirche Einfach?",
|
||||
a: "Das Preismodell steht noch nicht fest. Stellen Sie eine Zugangsfrage — wir melden uns mit allen Details.",
|
||||
},
|
||||
{
|
||||
q: "Was muss bei uns installiert werden?",
|
||||
a: "Nichts. Kirche Einfach läuft im Browser — auf Büro-PC, Tablet oder Smartphone.",
|
||||
},
|
||||
{
|
||||
q: "Wo liegen unsere Daten?",
|
||||
a: "Auf Servern in Deutschland. Es gibt keine externen Aufrufe an Drittdienste.",
|
||||
},
|
||||
{
|
||||
q: "Wer sieht welche Daten?",
|
||||
a: "Jede Gemeinde arbeitet in ihrem eigenen Mandanten. Innerhalb davon steuern Rollen (Mitglied, Verwaltung), wer was sieht und entscheidet.",
|
||||
},
|
||||
{
|
||||
q: "Brauchen wir Passwörter?",
|
||||
a: "Nein. Die Anmeldung läuft über einen persönlichen Link per E-Mail — gültig für eine Sitzung, nichts zu merken, nichts zu vergessen.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function StartPage() {
|
||||
const { me } = useAuth();
|
||||
return (
|
||||
<div>
|
||||
<Card withBorder padding="xl" mb="lg">
|
||||
<Group gap="sm" mb="xs">
|
||||
<IconClipboardCheck size={32} />
|
||||
<Title order={2}>Willkommen</Title>
|
||||
</Group>
|
||||
<Text>
|
||||
Kirche Einfach unterstützt die Verwaltung Ihrer Gemeinde: Vorgänge
|
||||
starten, Freigaben erteilen, Zugänge verwalten.
|
||||
<Stack gap="xl">
|
||||
{/* Hero */}
|
||||
<Card withBorder padding="xl" radius="lg">
|
||||
<Badge mb="sm">Für Pfarrbüros und Kirchengemeinden</Badge>
|
||||
<Title order={1} mb="sm">
|
||||
Weniger Verwaltung. Mehr Zeit für Menschen.
|
||||
</Title>
|
||||
<Text size="lg" c="dimmed" mb="lg" maw={640}>
|
||||
Kirche Einfach führt Mitarbeitende in eigenen Worten durch Vorgänge,
|
||||
prüft Regeln automatisch und fragt Menschen nur, wo Urteil nötig
|
||||
ist — lückenlos protokolliert.
|
||||
</Text>
|
||||
<Group>
|
||||
<Button component={Link} to="/access" size="lg">
|
||||
{CTA_LABEL}
|
||||
</Button>
|
||||
<Button component={Link} to="/login" size="lg" variant="light">
|
||||
Zum Login
|
||||
</Button>
|
||||
</Group>
|
||||
{me && (
|
||||
<Text mt="sm">
|
||||
<Text mt="md">
|
||||
Angemeldet als <strong>{me.email}</strong> ({me.tenant_id}).
|
||||
</Text>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Facts */}
|
||||
<Group gap="lg">
|
||||
{facts.map((f) => (
|
||||
<Group key={f.text} gap="xs">
|
||||
<ThemeIcon variant="light" size="lg">
|
||||
{f.icon}
|
||||
</ThemeIcon>
|
||||
<Text size="sm" fw={500}>
|
||||
{f.text}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Group>
|
||||
|
||||
{/* Benefits */}
|
||||
<Grid>
|
||||
{actions.map((a) => (
|
||||
<Grid.Col key={a.to} span={{ base: 12, sm: 4 }}>
|
||||
{benefits.map((b) => (
|
||||
<Grid.Col key={b.title} span={{ base: 12, sm: 4 }}>
|
||||
<Card withBorder padding="lg" h="100%">
|
||||
{a.icon}
|
||||
<Title order={4} mt="sm">
|
||||
{a.title}
|
||||
<ThemeIcon size={48} radius="md" variant="light" mb="sm">
|
||||
{b.icon}
|
||||
</ThemeIcon>
|
||||
<Title order={4} mb="xs">
|
||||
{b.title}
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed" mt="xs" mb="md">
|
||||
{a.text}
|
||||
<Text size="sm" c="dimmed">
|
||||
{b.text}
|
||||
</Text>
|
||||
<Button component={Link} to={a.to} variant="light" fullWidth>
|
||||
Öffnen
|
||||
</Button>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Product visual */}
|
||||
<Card withBorder padding="lg" radius="lg">
|
||||
<Title order={3} mb="xs">
|
||||
So sieht die Arbeit aus
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
Formulare entstehen automatisch aus den Vorgängen — hier das
|
||||
Aufnahmeformular mit allen Feldtypen.
|
||||
</Text>
|
||||
<Image
|
||||
src="/screenshots/workflows-light.png"
|
||||
alt="Workflow-Formular in Kirche Einfach"
|
||||
radius="md"
|
||||
bd="1px solid var(--mantine-color-default-border)"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Steps */}
|
||||
<Card withBorder padding="lg" radius="lg">
|
||||
<Title order={3} mb="md">
|
||||
In drei Schritten dabei
|
||||
</Title>
|
||||
<Timeline bulletSize={28}>
|
||||
{steps.map((s, i) => (
|
||||
<Timeline.Item
|
||||
key={s.title}
|
||||
bullet={i + 1}
|
||||
title={s.title}
|
||||
>
|
||||
<Text size="sm" c="dimmed">
|
||||
{s.text}
|
||||
</Text>
|
||||
</Timeline.Item>
|
||||
))}
|
||||
</Timeline>
|
||||
</Card>
|
||||
|
||||
{/* Trust */}
|
||||
<Card withBorder padding="lg" radius="lg">
|
||||
<Title order={3} mb="md">
|
||||
Darauf können Sie sich verlassen
|
||||
</Title>
|
||||
<List
|
||||
spacing="sm"
|
||||
icon={
|
||||
<ThemeIcon size={24} radius="xl" variant="light">
|
||||
<IconCheck size={14} />
|
||||
</ThemeIcon>
|
||||
}
|
||||
>
|
||||
<List.Item>
|
||||
<strong>Datenhoheit:</strong> Betrieb auf Servern in Deutschland,
|
||||
ohne Aufrufe an Drittdienste.
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<strong>Klare Zuständigkeit:</strong> Rollen und Mandanten trennen,
|
||||
wer sieht und wer entscheidet.
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<strong>Sicher ohne Passwort:</strong> Einmal-Links per E-Mail
|
||||
statt vergessener Kennwörter.
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<strong>Nachvollziehbar:</strong> Läufe, Entscheidungen und Notizen
|
||||
bleiben protokolliert.
|
||||
</List.Item>
|
||||
</List>
|
||||
</Card>
|
||||
|
||||
{/* FAQ */}
|
||||
<div>
|
||||
<Title order={3} mb="md">
|
||||
Häufige Fragen
|
||||
</Title>
|
||||
<Accordion variant="separated">
|
||||
{faqs.map((f) => (
|
||||
<Accordion.Item key={f.q} value={f.q}>
|
||||
<Accordion.Control>{f.q}</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Text size="sm">{f.a}</Text>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
{/* Final CTA */}
|
||||
<Card withBorder padding="xl" radius="lg">
|
||||
<Group gap="sm" mb="xs">
|
||||
<IconInbox size={28} />
|
||||
<Title order={3}>Bereit für weniger Papierkram?</Title>
|
||||
</Group>
|
||||
<Text c="dimmed" mb="md">
|
||||
Stellen Sie eine Zugangsfrage — wir melden uns mit den nächsten
|
||||
Schritten.
|
||||
</Text>
|
||||
<Button component={Link} to="/access" size="lg">
|
||||
{CTA_LABEL}
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
{/* Footer mini (Kontakt/Impressum liefert der Betreiber) */}
|
||||
<Group gap="md" mt="md">
|
||||
<Text size="xs" c="dimmed">
|
||||
Kirche Einfach
|
||||
</Text>
|
||||
<Anchor component={Link} to="/access" size="xs">
|
||||
Zugang
|
||||
</Anchor>
|
||||
<Anchor component={Link} to="/login" size="xs">
|
||||
Login
|
||||
</Anchor>
|
||||
<Text size="xs" c="dimmed">
|
||||
{/* TODO Betreiber: Kontakt und Impressum ergänzen */}
|
||||
Kontakt & Impressum folgen
|
||||
</Text>
|
||||
<ThemeIcon size="sm" variant="transparent" aria-label="Sicherer Zugang">
|
||||
<IconLock size={14} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue