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>
2026-06-09 16:31:42 +03:30
parent dfacfdc6cf
commit c8f079dbc1
5 changed files with 240 additions and 149 deletions
@@ -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>
+  );
+}