117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ClipboardCheck, Sparkles, Globe, ArrowRight } from "lucide-react";
|
|
|
|
import {
|
|
TenantWelcomeLayout,
|
|
WelcomeStepCard,
|
|
OnboardingCTAList,
|
|
useOnboardingProgress,
|
|
} from "..";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ADMIN_EVENT_CREATE_PATH, ADMIN_EVENTS_PATH, ADMIN_HOME_PATH } from "../../constants";
|
|
|
|
export default function WelcomeEventSetupPage() {
|
|
const navigate = useNavigate();
|
|
const { markStep } = useOnboardingProgress();
|
|
const { t } = useTranslation("onboarding");
|
|
|
|
React.useEffect(() => {
|
|
markStep({ lastStep: "event-setup" });
|
|
}, [markStep]);
|
|
|
|
return (
|
|
<TenantWelcomeLayout
|
|
eyebrow={t("eventSetup.layout.eyebrow")}
|
|
title={t("eventSetup.layout.title")}
|
|
subtitle={t("eventSetup.layout.subtitle")}
|
|
>
|
|
<WelcomeStepCard
|
|
step={4}
|
|
totalSteps={4}
|
|
title={t("eventSetup.step.title")}
|
|
description={t("eventSetup.step.description")}
|
|
icon={ClipboardCheck}
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
{[
|
|
{
|
|
id: "story",
|
|
title: t("eventSetup.tiles.story.title"),
|
|
copy: t("eventSetup.tiles.story.copy"),
|
|
icon: Sparkles,
|
|
},
|
|
{
|
|
id: "team",
|
|
title: t("eventSetup.tiles.team.title"),
|
|
copy: t("eventSetup.tiles.team.copy"),
|
|
icon: Globe,
|
|
},
|
|
{
|
|
id: "launch",
|
|
title: t("eventSetup.tiles.launch.title"),
|
|
copy: t("eventSetup.tiles.launch.copy"),
|
|
icon: ArrowRight,
|
|
},
|
|
].map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="flex flex-col gap-3 rounded-2xl border border-brand-rose-soft bg-brand-card p-5 shadow-brand-primary"
|
|
>
|
|
<span className="flex size-10 items-center justify-center rounded-full bg-brand-rose-soft text-brand-rose shadow-inner">
|
|
<item.icon className="size-5" />
|
|
</span>
|
|
<h3 className="text-lg font-semibold text-brand-slate">{item.title}</h3>
|
|
<p className="text-sm text-brand-navy/80">{item.copy}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-6 flex flex-col items-start gap-3 rounded-3xl border border-brand-rose-soft bg-brand-sky-soft/40 p-6 text-brand-navy">
|
|
<h4 className="text-lg font-semibold text-brand-rose">{t("eventSetup.cta.heading")}</h4>
|
|
<p className="text-sm text-brand-navy/80">{t("eventSetup.cta.description")}</p>
|
|
<Button
|
|
size="lg"
|
|
className="mt-2 rounded-full bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
|
|
onClick={() => {
|
|
markStep({ lastStep: "event-create-intent" });
|
|
navigate(ADMIN_EVENT_CREATE_PATH);
|
|
}}
|
|
>
|
|
{t("eventSetup.cta.button")}
|
|
<ArrowRight className="ml-2 size-4" />
|
|
</Button>
|
|
</div>
|
|
</WelcomeStepCard>
|
|
|
|
<OnboardingCTAList
|
|
actions={[
|
|
{
|
|
id: "back",
|
|
label: t("eventSetup.actions.back.label"),
|
|
description: t("eventSetup.actions.back.description"),
|
|
buttonLabel: t("eventSetup.actions.back.button"),
|
|
onClick: () => navigate(-1),
|
|
variant: "secondary",
|
|
},
|
|
{
|
|
id: "dashboard",
|
|
label: t("eventSetup.actions.dashboard.label"),
|
|
description: t("eventSetup.actions.dashboard.description"),
|
|
buttonLabel: t("eventSetup.actions.dashboard.button"),
|
|
onClick: () => navigate(ADMIN_HOME_PATH),
|
|
},
|
|
{
|
|
id: "events",
|
|
label: t("eventSetup.actions.events.label"),
|
|
description: t("eventSetup.actions.events.description"),
|
|
buttonLabel: t("eventSetup.actions.events.button"),
|
|
onClick: () => navigate(ADMIN_EVENTS_PATH),
|
|
},
|
|
]}
|
|
/>
|
|
</TenantWelcomeLayout>
|
|
);
|
|
}
|