Redesign the login and register pages to match the Abrban landing.

Wrap both auth pages in a shared cinematic sky shell (calm blue sky, drifting
clouds, sun glow, frosted dark-glass panel) in Persian/RTL with the Abrban
brand, while leaving the existing auth store logic and dashboard routing intact.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/app/login/page.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import Link from 'next/link';
 import { useAuthStore } from '@/lib/store';
 import { toast } from 'react-toastify';
-import { Cloud } from 'lucide-react';
+import { LogIn, ArrowLeft } from 'lucide-react';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { AuthField } from '@/components/auth/AuthField';
 
 export default function LoginPage() {
   const [email, setEmail] = useState('');
@@ -19,78 +20,67 @@ export default function LoginPage() {
     setIsLoading(true);
     try {
       await login(email, password);
-      toast.success('Logged in successfully!');
+      toast.success('با موفقیت وارد شدی!');
       router.push('/dashboard');
     } catch (err: any) {
-      toast.error(err.response?.data?.message || 'Login failed');
+      toast.error(err.response?.data?.message || 'ورود ناموفق بود');
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-white to-primary-50 py-12 px-4">
+    <AuthShell
-      <div className="max-w-md w-full space-y-8 animate-slide-up">
+      icon={<LogIn className="h-7 w-7" />}
-        <div className="text-center">
+      title="خوش آمدی"
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-100 mb-4">
+      subtitle="به حساب ابربان خود وارد شو"
-            <Cloud className="w-8 h-8 text-primary-600" />
+      altPrompt="هنوز حساب نداری؟"
-          </div>
+      altHref="/register"
-          <h1 className="text-3xl font-bold text-gray-900 tracking-tight">Welcome back</h1>
+      altLabel="ثبت‌نام کن"
-          <p className="mt-2 text-gray-500">
+    >
-            Sign in to your CloudHost account
+      <form className="space-y-5" onSubmit={handleSubmit}>
-          </p>
+        <AuthField
-        </div>
+          id="email"
+          label="ایمیل"
+          type="email"
+          required
+          dir="ltr"
+          autoComplete="email"
+          placeholder="you@example.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
 
-        <form className="card space-y-5" onSubmit={handleSubmit}>
+        <AuthField
-          <div>
+          id="password"
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1.5">
+          label="رمز عبور"
-              Email address
+          type="password"
-            </label>
+          required
-            <input
+          dir="ltr"
-              id="email"
+          autoComplete="current-password"
-              type="email"
+          placeholder="••••••••"
-              required
+          value={password}
-              className="input-field"
+          onChange={(e) => setPassword(e.target.value)}
-              placeholder="you@example.com"
+        />
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
 
-          <div>
+        <button
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1.5">
+          type="submit"
-              Password
+          disabled={isLoading}
-            </label>
+          className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3.5 font-bold text-white shadow-lg shadow-primary-600/30 transition hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-60"
-            <input
+        >
-              id="password"
+          {isLoading ? (
-              type="password"
+            <>
-              required
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
-              className="input-field"
+              در حال ورود…
-              placeholder="••••••••"
+            </>
-              value={password}
+          ) : (
-              onChange={(e) => setPassword(e.target.value)}
+            <>
-            />
+              ورود
-          </div>
+              <ArrowLeft className="h-4 w-4" />
-
+            </>
-          <button type="submit" disabled={isLoading} className="btn-primary w-full">
+          )}
-            {isLoading ? (
+        </button>
-              <>
+      </form>
-                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
+    </AuthShell>
-                Signing in...
-              </>
-            ) : (
-              'Sign in'
-            )}
-          </button>
-
-          <p className="text-center text-sm text-gray-500">
-            Don&apos;t have an account?{' '}
-            <Link href="/register" className="text-primary-600 hover:text-primary-500 font-semibold">
-              Create one
-            </Link>
-          </p>
-        </form>
-      </div>
-    </div>
   );
 }

frontend/src/app/register/page.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import Link from 'next/link';
 import { useAuthStore } from '@/lib/store';
 import { toast } from 'react-toastify';
-import { Cloud } from 'lucide-react';
+import { UserPlus, ArrowLeft } from 'lucide-react';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { AuthField } from '@/components/auth/AuthField';
 
 export default function RegisterPage() {
   const [form, setForm] = useState({ email: '', password: '', firstName: '', lastName: '' });
@@ -18,98 +19,91 @@ export default function RegisterPage() {
     setIsLoading(true);
     try {
       await register(form);
-      toast.success('Account created successfully!');
+      toast.success('حساب با موفقیت ساخته شد!');
       router.push('/dashboard');
     } catch (err: any) {
-      toast.error(err.response?.data?.message || 'Registration failed');
+      toast.error(err.response?.data?.message || 'ثبت‌نام ناموفق بود');
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-white to-primary-50 py-12 px-4">
+    <AuthShell
-      <div className="max-w-md w-full space-y-8 animate-slide-up">
+      icon={<UserPlus className="h-7 w-7" />}
-        <div className="text-center">
+      title="ساخت حساب"
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-100 mb-4">
+      subtitle="در چند دقیقه اولین اپت را منتشر کن"
-            <Cloud className="w-8 h-8 text-primary-600" />
+      altPrompt="قبلاً حساب ساخته‌ای؟"
-          </div>
+      altHref="/login"
-          <h1 className="text-3xl font-bold text-gray-900 tracking-tight">Create your account</h1>
+      altLabel="وارد شو"
-          <p className="mt-2 text-gray-500">
+    >
-            Start deploying apps in minutes
+      <form className="space-y-5" onSubmit={handleSubmit}>
-          </p>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <AuthField
+            id="firstName"
+            label="نام"
+            type="text"
+            required
+            autoComplete="given-name"
+            placeholder="مثلاً علی"
+            value={form.firstName}
+            onChange={(e) => setForm({ ...form, firstName: e.target.value })}
+          />
+          <AuthField
+            id="lastName"
+            label="نام خانوادگی"
+            type="text"
+            required
+            autoComplete="family-name"
+            placeholder="مثلاً رضایی"
+            value={form.lastName}
+            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+          />
         </div>
 
-        <form className="card space-y-5" onSubmit={handleSubmit}>
+        <AuthField
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          id="email"
-            <div>
+          label="ایمیل"
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">First name</label>
+          type="email"
-              <input
+          required
-                type="text"
+          dir="ltr"
-                required
+          autoComplete="email"
-                className="input-field"
+          placeholder="you@example.com"
-                placeholder="John"
+          value={form.email}
-                value={form.firstName}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
-                onChange={(e) => setForm({ ...form, firstName: e.target.value })}
+        />
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Last name</label>
-              <input
-                type="text"
-                required
-                className="input-field"
-                placeholder="Doe"
-                value={form.lastName}
-                onChange={(e) => setForm({ ...form, lastName: e.target.value })}
-              />
-            </div>
-          </div>
 
-          <div>
+        <AuthField
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">Email address</label>
+          id="password"
-            <input
+          label="رمز عبور"
-              type="email"
+          type="password"
-              required
+          required
-              className="input-field"
+          minLength={8}
-              placeholder="you@example.com"
+          dir="ltr"
-              value={form.email}
+          autoComplete="new-password"
-              onChange={(e) => setForm({ ...form, email: e.target.value })}
+          placeholder="حداقل ۸ کاراکتر"
-            />
+          value={form.password}
-          </div>
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+        />
 
-          <div>
+        <button
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
+          type="submit"
-            <input
+          disabled={isLoading}
-              type="password"
+          className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3.5 font-bold text-white shadow-lg shadow-primary-600/30 transition hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-60"
-              required
+        >
-              minLength={8}
+          {isLoading ? (
-              className="input-field"
+            <>
-              placeholder="Min 8 characters"
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
-              value={form.password}
+              در حال ساخت حساب…
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
+            </>
-            />
+          ) : (
-          </div>
+            <>
-
+              ساخت حساب
-          <button type="submit" disabled={isLoading} className="btn-primary w-full">
+              <ArrowLeft className="h-4 w-4" />
-            {isLoading ? (
+            </>
-              <>
+          )}
-                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
+        </button>
-                Creating account...
+      </form>
-              </>
+    </AuthShell>
-            ) : (
-              'Create account'
-            )}
-          </button>
-
-          <p className="text-center text-sm text-gray-500">
-            Already have an account?{' '}
-            <Link href="/login" className="text-primary-600 hover:text-primary-500 font-semibold">
-              Sign in
-            </Link>
-          </p>
-        </form>
-      </div>
-    </div>
   );
 }

frontend/src/components/auth/AuthField.tsx

@@ -0,0 +1,21 @@
+import type { InputHTMLAttributes } from 'react';
+
+// A labeled input styled for the frosted dark-glass auth panel.
+export function AuthField({
+  label,
+  id,
+  ...props
+}: { label: string } & InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <div>
+      <label htmlFor={id} className="mb-1.5 block text-sm font-medium text-white/85">
+        {label}
+      </label>
+      <input
+        id={id}
+        {...props}
+        className="w-full rounded-xl border border-white/15 bg-white/10 px-4 py-3 text-white placeholder-white/45 outline-none backdrop-blur-md transition focus:border-primary-400 focus:bg-white/[0.16] focus:ring-2 focus:ring-primary-400/30"
+      />
+    </div>
+  );
+}

frontend/src/components/auth/AuthShell.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+import { Vazirmatn } from 'next/font/google';
+import Link from 'next/link';
+import { Logo } from '@/components/landing/Logo';
+
+const vazir = Vazirmatn({ subsets: ['arabic'], variable: '--font-vazir', display: 'swap' });
+
+// 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.
+export function AuthShell({
+  icon,
+  title,
+  subtitle,
+  children,
+  altPrompt,
+  altHref,
+  altLabel,
+}: {
+  icon: ReactNode;
+  title: string;
+  subtitle: string;
+  children: ReactNode;
+  altPrompt: string;
+  altHref: string;
+  altLabel: string;
+}) {
+  return (
+    <div
+      dir="rtl"
+      className={`${vazir.variable} font-vazir 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" />
+        <div className="abrban-float absolute left-[-6%] top-[20%] h-40 w-80 rounded-full bg-white/40 blur-3xl" />
+        <div
+          className="abrban-float absolute right-[-5%] top-[42%] h-44 w-96 rounded-full bg-white/30 blur-3xl"
+          style={{ animationDelay: '1.4s' }}
+        />
+        <div
+          className="abrban-float absolute bottom-[4%] left-[16%] h-40 w-[30rem] rounded-full bg-white/45 blur-3xl"
+          style={{ animationDelay: '0.7s' }}
+        />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_transparent_52%,_rgba(8,20,40,0.5)_100%)]" />
+        {/* Horizon: darken the lower area so the panel + footer link stay legible */}
+        <div className="absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t from-[rgba(7,16,38,0.82)] via-[rgba(8,18,42,0.38)] to-transparent" />
+      </div>
+
+      {/* 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">
+          <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>
+      </header>
+
+      {/* Form card */}
+      <main className="relative z-10 flex min-h-[calc(100vh-80px)] items-center justify-center px-4 pb-16">
+        <div className="w-full max-w-md">
+          <div className="mb-7 text-center">
+            <div className="mx-auto mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/12 text-white ring-1 ring-white/20 backdrop-blur-md">
+              {icon}
+            </div>
+            <h1 className="abrban-ink text-3xl font-black tracking-tight sm:text-4xl">{title}</h1>
+            <p className="abrban-ink mt-2 text-white/85">{subtitle}</p>
+          </div>
+
+          <div className="abrban-panel rounded-[1.75rem] p-6 sm:p-8">{children}</div>
+
+          <p className="abrban-ink mt-6 text-center text-sm text-white/90">
+            {altPrompt}{' '}
+            <Link href={altHref} className="font-bold text-primary-200 underline-offset-4 hover:text-white hover:underline">
+              {altLabel}
+            </Link>
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}