81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
import { AdminLayout } from '../components/AdminLayout';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
export default function FaqPage() {
|
||
const { t } = useTranslation('dashboard');
|
||
|
||
const entries = [
|
||
{
|
||
question: t('faq.events.question', 'Wie arbeite ich mit Events?'),
|
||
answer: t(
|
||
'faq.events.answer',
|
||
'Wähle dein aktives Event, passe Aufgaben an und lade Gäste über die Einladungsseite ein. Weitere Dokumentation folgt bald.'
|
||
),
|
||
},
|
||
{
|
||
question: t('faq.uploads.question', 'Wie moderiere ich Uploads?'),
|
||
answer: t(
|
||
'faq.uploads.answer',
|
||
'Sobald Fotos eintreffen, findest du sie in der Galerie-Ansicht deines Events. Von dort kannst du sie freigeben oder zurückweisen.'
|
||
),
|
||
},
|
||
{
|
||
question: t('faq.support.question', 'Wo erhalte ich Support?'),
|
||
answer: t(
|
||
'faq.support.answer',
|
||
'Dieses FAQ dient als Platzhalter. Bitte nutze vorerst den bekannten Support-Kanal, bis die Wissensdatenbank veröffentlicht wird.'
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<AdminLayout
|
||
title={t('faq.title', 'FAQ & Hilfe')}
|
||
subtitle={t('faq.subtitle', 'Antworten und Hinweise rund um den Tenant Admin.')}
|
||
>
|
||
<Card className="border-slate-200 bg-white/90 shadow-sm dark:border-white/10 dark:bg-white/5">
|
||
<CardHeader>
|
||
<CardTitle>{t('faq.intro.title', 'Was dich erwartet')}</CardTitle>
|
||
<CardDescription>
|
||
{t(
|
||
'faq.intro.description',
|
||
'Wir sammeln aktuell Feedback und erweitern dieses Hilfe-Center Schritt für Schritt.'
|
||
)}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{entries.map((entry) => (
|
||
<div key={entry.question} className="rounded-2xl border border-slate-200/80 p-4 dark:border-white/10">
|
||
<p className="text-sm font-semibold text-slate-900 dark:text-white">{entry.question}</p>
|
||
<p className="mt-2 text-sm text-slate-600 dark:text-slate-300">{entry.answer}</p>
|
||
</div>
|
||
))}
|
||
<div className="rounded-2xl bg-rose-50/70 p-4 text-sm text-rose-900 dark:bg-rose-200/10 dark:text-rose-100">
|
||
<p className="font-semibold">
|
||
{t('faq.cta.needHelp', 'Fehlt dir etwas?')}
|
||
</p>
|
||
<p className="mt-1 text-sm">
|
||
{t(
|
||
'faq.cta.description',
|
||
'Schreib uns dein Feedback direkt aus dem Admin oder per Support-Mail – wir erweitern dieses FAQ mit deinen Themen.'
|
||
)}
|
||
</p>
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
className="mt-3 rounded-full"
|
||
onClick={() => window.open('mailto:hello@fotospiel.app', '_blank')}
|
||
>
|
||
{t('faq.cta.contact', 'Support kontaktieren')}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</AdminLayout>
|
||
);
|
||
}
|