diff --git a/changelog.d/fixes/7125-onboarding-tiers-layout.md b/changelog.d/fixes/7125-onboarding-tiers-layout.md new file mode 100644 index 0000000000..8bb9f718eb --- /dev/null +++ b/changelog.d/fixes/7125-onboarding-tiers-layout.md @@ -0,0 +1 @@ +- **fix(dashboard):** align onboarding tier descriptions and localize the tier step header and flow copy ([#7125](https://github.com/diegosouzapw/OmniRoute/pull/7125)) — thanks @Wibias diff --git a/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx b/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx index d2cc88ad13..ded42fdf0d 100644 --- a/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx +++ b/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx @@ -5,7 +5,8 @@ import { useTranslations } from "next-intl"; import Image from "next/image"; export function TierFlowDiagram() { - const t = useTranslations("onboarding"); + const t = useTranslations("onboarding.tier"); + const tOnboarding = useTranslations("onboarding"); const { resolvedTheme } = useTheme(); const src = resolvedTheme === "dark" ? "/images/tier-flow-dark.svg" : "/images/tier-flow-light.svg"; @@ -14,15 +15,14 @@ export function TierFlowDiagram() {
{t("tierFlowDiagramAlt")} -

- Requests flow through your subscription quotas first, then pay-per-token cheap providers, - then free-tier providers — automatic, zero-config. +

+ {t("flowCaption")}

); diff --git a/src/app/(dashboard)/dashboard/onboarding/page.tsx b/src/app/(dashboard)/dashboard/onboarding/page.tsx index a1cbf3544e..de8b44e3cf 100644 --- a/src/app/(dashboard)/dashboard/onboarding/page.tsx +++ b/src/app/(dashboard)/dashboard/onboarding/page.tsx @@ -274,7 +274,12 @@ export default function OnboardingWizard() { > {currentStep.icon} -

{currentStep.title}

+

{currentStep.title}

+ {currentStep.id === "tiers" && ( +

+ {t("tier.subtitle")} +

+ )} {/* Step Content */} @@ -283,7 +288,7 @@ export default function OnboardingWizard() { {currentStep.id === "welcome" && (

{t("welcomeDesc")}

-
+
{[ { icon: "swap_horiz", label: t("multiProvider") }, { icon: "monitoring", label: t("usageTracking") }, @@ -291,12 +296,14 @@ export default function OnboardingWizard() { ].map((f) => (
- - {f.icon} - - {f.label} +
+ + {f.icon} + + {f.label} +
))}
diff --git a/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx b/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx index 02f0d3d286..c09276df3d 100644 --- a/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx +++ b/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx @@ -19,7 +19,7 @@ function TierCard({ number, colorClass, label, description, examples }: TierCard {number} {label}
-

{description}

+

{description}