abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add i18n foundation (fa-IR/en-US) and localize landing + auth.

Browse Source 
Introduce path-prefixed locale routing under app/[lang] with a middleware
that detects locale from cookie/Accept-Language (default fa-IR) and
redirects. Add fa-IR (source of truth) and en-US dictionaries, a server
getDictionary, a client I18nProvider/useT, locale-aware Link + router
helpers, and a language switcher. The root [lang] layout sets html
lang/dir and the per-locale font (Peyda for fa, Inter for en).

Landing sections and the login/register/auth shell now read all copy from
the dictionaries; dashboard localization follows in a later commit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
2026-06-11 12:05:03 +03:30
parent 2b16846f67
commit 34993d417f
48 changed files with 785 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/auth/AuthShell.tsx
+19 -14
View File
@@ -1,11 +1,15 @@
'use client';
import type { ReactNode } from 'react';
import Link from 'next/link';
import { peyda } from '@/app/fonts';
import { Link } from '@/i18n/Link';
import { useT } from '@/i18n/I18nProvider';
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
import { Logo } from '@/components/landing/Logo';
// Cinematic auth shell that echoes the Abrban landing: a calm blue sky (the
// "clear sky" finale), soft drifting clouds, a warm sun glow, the brand logo,
// and the form inside a frosted dark-glass panel. Persian / RTL.
// and the form inside a frosted dark-glass panel. Direction is inherited from
// the locale-aware root layout.
export function AuthShell({
icon,
title,
@@ -23,11 +27,9 @@ export function AuthShell({
altHref: string;
altLabel: string;
}) {
const t = useT();
return (
<div
dir="rtl"
className={`${peyda.variable} font-peyda relative min-h-screen w-full overflow-hidden bg-gradient-to-b from-[#1b6fd0] via-[#589add] to-[#cfe6f7] text-white`}
>
<div className="relative min-h-screen w-full overflow-hidden bg-gradient-to-b from-[#1b6fd0] via-[#589add] to-[#cfe6f7] text-white">
{/* Sky atmosphere: warm sun glow, drifting clouds, soft vignette */}
<div className="pointer-events-none absolute inset-0 overflow-hidden">
<div className="absolute right-[10%] top-[-10%] h-80 w-80 rounded-full bg-[radial-gradient(circle,_rgba(255,244,214,0.9),_rgba(255,236,190,0.28)_45%,_transparent_70%)] blur-2xl" />
@@ -47,15 +49,18 @@ export function AuthShell({
{/* Header */}
<header className="relative z-10 mx-auto flex max-w-5xl items-center justify-between px-6 py-5">
<Link href="/" aria-label="ابربان" className="transition hover:opacity-90">
<Link href="/" aria-label={t.common.appName} className="transition hover:opacity-90">
<Logo className="abrban-ink" />
</Link>
<Link
href="/"
className="rounded-lg px-3 py-2 text-sm font-medium text-white/85 transition hover:text-white"
>
بازگشت به خانه
</Link>
<div className="flex items-center gap-1">
<LanguageSwitcher className="text-white/85 hover:text-white" />
<Link
href="/"
className="rounded-lg px-3 py-2 text-sm font-medium text-white/85 transition hover:text-white"
>
{t.auth.backHome}
</Link>
</div>
</header>
{/* Form card */}