111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Sparkles, Users, Camera, CalendarDays, ChevronRight } from "lucide-react";
|
|
|
|
import {
|
|
TenantWelcomeLayout,
|
|
WelcomeHero,
|
|
OnboardingHighlightsGrid,
|
|
OnboardingCTAList,
|
|
useOnboardingProgress,
|
|
} from "..";
|
|
import { ADMIN_WELCOME_PACKAGES_PATH, ADMIN_EVENTS_PATH } from "../../constants";
|
|
|
|
export default function WelcomeLandingPage() {
|
|
const navigate = useNavigate();
|
|
const { markStep } = useOnboardingProgress();
|
|
const { t } = useTranslation("onboarding");
|
|
|
|
React.useEffect(() => {
|
|
markStep({ welcomeSeen: true, lastStep: "landing" });
|
|
}, [markStep]);
|
|
|
|
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",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<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>
|
|
);
|
|
}
|