118 lines
4.5 KiB
TypeScript
118 lines
4.5 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";
|
|
import { FrostedSurface } from "../../components/tenant";
|
|
|
|
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) => (
|
|
<FrostedSurface
|
|
key={item.id}
|
|
className="flex flex-col gap-3 border border-white/20 p-5 text-slate-900 shadow-md shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100"
|
|
>
|
|
<span className="flex size-10 items-center justify-center rounded-full bg-rose-100/80 text-rose-500 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-200">
|
|
<item.icon className="size-5" />
|
|
</span>
|
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{item.title}</h3>
|
|
<p className="text-sm text-slate-600 dark:text-slate-400">{item.copy}</p>
|
|
</FrostedSurface>
|
|
))}
|
|
</div>
|
|
|
|
<FrostedSurface className="mt-6 flex flex-col items-start gap-3 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">
|
|
<h4 className="text-lg font-semibold text-rose-400 dark:text-rose-200">{t("eventSetup.cta.heading")}</h4>
|
|
<p className="text-sm text-slate-600 dark:text-slate-400">{t("eventSetup.cta.description")}</p>
|
|
<Button
|
|
size="lg"
|
|
className="mt-2 rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-lg shadow-rose-300/30 hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]"
|
|
onClick={() => {
|
|
markStep({ lastStep: "event-create-intent" });
|
|
navigate(ADMIN_EVENT_CREATE_PATH);
|
|
}}
|
|
>
|
|
{t("eventSetup.cta.button")}
|
|
<ArrowRight className="ml-2 size-4" />
|
|
</Button>
|
|
</FrostedSurface>
|
|
</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>
|
|
);
|
|
}
|