feat: migrate onboarding to i18n

packages/ui/src/onboarding/home.tsx

@@ -2,10 +2,13 @@ import { ArrowRightIcon, PopperFilledIcon } from "@lume/icons";
 import { onboardingAtom } from "@lume/utils";
 import { motion } from "framer-motion";
 import { useAtom } from "jotai";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 export function OnboardingHomeScreen() {
 	const navigate = useNavigate();
+
+	const [t] = useTranslation();
 	const [onboarding, setOnboarding] = useAtom(onboardingAtom);
 
 	return (
@@ -17,11 +20,9 @@ export function OnboardingHomeScreen() {
 		>
 			<PopperFilledIcon className="size-12 text-blue-500" />
 			<div className="text-center">
-				<p className="text-lg font-medium">
-					Your account was successfully created!
-				</p>
+				<p className="text-lg font-medium">{t("onboarding.home.title")}</p>
 				<p className="leading-tight text-neutral-600 dark:text-neutral-400">
-					For starters, let's set up your profile.
+					{t("onboarding.home.subtitle")}
 				</p>
 			</div>
 			<div className="mt-4 flex flex-col gap-2 items-center">
@@ -32,7 +33,7 @@ export function OnboardingHomeScreen() {
 					}
 					className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
 				>
-					Profile Settings
+					{t("onboarding.home.profileSettings")}
 					<ArrowRightIcon className="size-4" />
 				</button>
 				<button
@@ -40,7 +41,7 @@ export function OnboardingHomeScreen() {
 					onClick={() => setOnboarding({ open: false, newUser: false })}
 					className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
 				>
-					Skip
+					{t("global.skip")}
 				</button>
 			</div>
 		</motion.div>