überarbeitung des event-admins fortgesetzt
This commit is contained in:
Codex Agent
@@ -1,172 +0,0 @@
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Sparkles, Users, Camera, CalendarDays, ChevronRight, CreditCard, UserPlus, Palette } from "lucide-react";
|
||||
|
||||
import {
|
||||
TenantWelcomeLayout,
|
||||
WelcomeHero,
|
||||
OnboardingHighlightsGrid,
|
||||
OnboardingCTAList,
|
||||
useOnboardingProgress,
|
||||
} from "..";
|
||||
import { ADMIN_WELCOME_PACKAGES_PATH, ADMIN_EVENTS_PATH } from "../../constants";
|
||||
import { ChecklistRow, FrostedSurface } from "../../components/tenant";
|
||||
|
||||
export default function WelcomeLandingPage() {
|
||||
const navigate = useNavigate();
|
||||
const { markStep, progress } = useOnboardingProgress();
|
||||
const { t } = useTranslation("onboarding");
|
||||
|
||||
React.useEffect(() => {
|
||||
markStep({ welcomeSeen: true, lastStep: "landing" });
|
||||
}, [markStep]);
|
||||
|
||||
const progressStatus = React.useMemo(
|
||||
() => ({
|
||||
complete: t("landingProgress.status.complete"),
|
||||
pending: t("landingProgress.status.pending"),
|
||||
}),
|
||||
[t]
|
||||
);
|
||||
|
||||
const progressSteps = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
key: "package",
|
||||
icon: <CreditCard className="h-5 w-5" />,
|
||||
label: t("landingProgress.steps.package.title"),
|
||||
hint: t("landingProgress.steps.package.hint"),
|
||||
completed: progress.packageSelected,
|
||||
},
|
||||
{
|
||||
key: "invite",
|
||||
icon: <UserPlus className="h-5 w-5" />,
|
||||
label: t("landingProgress.steps.invite.title"),
|
||||
hint: t("landingProgress.steps.invite.hint"),
|
||||
completed: progress.inviteCreated,
|
||||
},
|
||||
{
|
||||
key: "branding",
|
||||
icon: <Palette className="h-5 w-5" />,
|
||||
label: t("landingProgress.steps.branding.title"),
|
||||
hint: t("landingProgress.steps.branding.hint"),
|
||||
completed: progress.brandingConfigured,
|
||||
},
|
||||
],
|
||||
[progress.packageSelected, progress.inviteCreated, progress.brandingConfigured, t]
|
||||
);
|
||||
|
||||
return (
|
||||
<TenantWelcomeLayout
|
||||
eyebrow={t("layout.eyebrow")}
|
||||
title={t("layout.title")}
|
||||
subtitle={t("layout.subtitle")}
|
||||
footer={
|
||||
<>
|
||||
<span className="text-brand-navy/80">{t("layout.alreadyFamiliar")}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 text-sm font-semibold text-brand-rose hover:text-[var(--brand-rose-strong)]"
|
||||
onClick={() => navigate(ADMIN_EVENTS_PATH)}
|
||||
>
|
||||
{t("layout.jumpToDashboard")}
|
||||
<ChevronRight className="size-4" />
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<WelcomeHero
|
||||
eyebrow={t("hero.eyebrow")}
|
||||
title={t("hero.title")}
|
||||
scriptTitle={t("hero.scriptTitle")}
|
||||
description={t("hero.description")}
|
||||
actions={[
|
||||
{
|
||||
label: t("hero.primary.label"),
|
||||
onClick: () => navigate(ADMIN_WELCOME_PACKAGES_PATH),
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
label: t("hero.secondary.label"),
|
||||
onClick: () => navigate(ADMIN_EVENTS_PATH),
|
||||
icon: CalendarDays,
|
||||
variant: "outline",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<FrostedSurface className="space-y-4 rounded-3xl border border-white/20 p-6 text-slate-900 shadow-md shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100">
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-300 dark:text-rose-200">
|
||||
{t("landingProgress.eyebrow")}
|
||||
</p>
|
||||
<h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
|
||||
{t("landingProgress.title")}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||||
{t("landingProgress.description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
{progressSteps.map((step) => (
|
||||
<ChecklistRow
|
||||
key={step.key}
|
||||
icon={step.icon}
|
||||
label={step.label}
|
||||
hint={step.hint}
|
||||
completed={step.completed}
|
||||
status={progressStatus}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</FrostedSurface>
|
||||
|
||||
<OnboardingHighlightsGrid
|
||||
items={[
|
||||
{
|
||||
id: "gallery",
|
||||
icon: Camera,
|
||||
title: t("highlights.gallery.title"),
|
||||
description: t("highlights.gallery.description"),
|
||||
badge: t("highlights.gallery.badge"),
|
||||
},
|
||||
{
|
||||
id: "team",
|
||||
icon: Users,
|
||||
title: t("highlights.team.title"),
|
||||
description: t("highlights.team.description"),
|
||||
},
|
||||
{
|
||||
id: "story",
|
||||
icon: Sparkles,
|
||||
title: t("highlights.story.title"),
|
||||
description: t("highlights.story.description"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<OnboardingCTAList
|
||||
actions={[
|
||||
{
|
||||
id: "choose-package",
|
||||
label: t("ctaList.choosePackage.label"),
|
||||
description: t("ctaList.choosePackage.description"),
|
||||
onClick: () => navigate(ADMIN_WELCOME_PACKAGES_PATH),
|
||||
icon: Sparkles,
|
||||
buttonLabel: t("ctaList.choosePackage.button"),
|
||||
},
|
||||
{
|
||||
id: "create-event",
|
||||
label: t("ctaList.createEvent.label"),
|
||||
description: t("ctaList.createEvent.description"),
|
||||
onClick: () => navigate(ADMIN_EVENTS_PATH),
|
||||
icon: CalendarDays,
|
||||
buttonLabel: t("ctaList.createEvent.button"),
|
||||
variant: "secondary",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</TenantWelcomeLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user