style(WIP): auth ui clean up.

apps/edr-freight-web/backoffice/src/components/auth/AuthShell.tsx

@@ -0,0 +1,139 @@
+import type { ReactNode } from "react";
+import { ArrowUpRight, ChevronDown, Globe } from "lucide-react";
+
+const LOGIN_IMAGE = "/assets/login.png";
+const EDR_LOGO = "/assets/logo.svg";
+
+const LeftPanelDecor = () => (
+  <div
+    className="pointer-events-none absolute inset-0 overflow-hidden"
+    aria-hidden
+  >
+    <svg
+      className="absolute -bottom-24 -left-24 h-[420px] w-[420px] text-white/[0.07]"
+      viewBox="0 0 400 400"
+      fill="none"
+    >
+      {[0, 1, 2, 3, 4, 5].map((ring) => (
+        <circle
+          key={ring}
+          cx="200"
+          cy="200"
+          r={60 + ring * 36}
+          stroke="currentColor"
+          strokeWidth="1"
+        />
+      ))}
+    </svg>
+    <div className="absolute right-0 top-0 h-40 w-40 rounded-full bg-white/[0.06] blur-2xl" />
+  </div>
+);
+
+const RightPanelDecor = () => (
+  <div
+    className="pointer-events-none absolute inset-0 overflow-hidden"
+    aria-hidden
+  >
+    <div className="absolute -right-16 -top-20 h-56 w-56 rounded-full bg-primary/[0.06] blur-3xl" />
+    <div className="absolute -bottom-12 left-1/4 h-40 w-40 rounded-full bg-primary/[0.04] blur-2xl" />
+    <svg
+      className="absolute inset-0 h-full w-full text-gray-200/40"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <pattern
+          id="auth-grid"
+          width="28"
+          height="28"
+          patternUnits="userSpaceOnUse"
+        >
+          <circle cx="1" cy="1" r="0.75" fill="currentColor" />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#auth-grid)" />
+    </svg>
+  </div>
+);
+
+export interface AuthShellProps {
+  children: ReactNode;
+  /** Tagline shown in the highlighted card over the left image panel. */
+  tagline?: string;
+  taglineBody?: string;
+}
+
+const LeftPanel = ({
+  tagline,
+  taglineBody,
+}: Pick<AuthShellProps, "tagline" | "taglineBody">) => (
+  <div className="relative hidden shrink-0 flex-col overflow-hidden rounded-2xl shadow-[0_8px_32px_rgba(15,23,42,0.1)] lg:flex lg:h-auto lg:min-h-0 lg:flex-1 lg:basis-1/2 lg:rounded-[28px]">
+    <img
+      src={LOGIN_IMAGE}
+      alt="Ethio Djibouti Railway"
+      className="absolute inset-0 h-full w-full object-cover object-center"
+    />
+    <div className="absolute inset-0 bg-gradient-to-br from-[#0a2e1a]/92 via-[#0f4a2a]/55 to-[#1a5c34]/45" />
+    <LeftPanelDecor />
+
+    <div className="relative z-10 flex shrink-0 items-center justify-between px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
+      <img
+        src={EDR_LOGO}
+        alt="EDR Freight"
+        className="h-7 w-auto brightness-0 invert sm:h-9"
+      />
+    </div>
+
+    <div className="relative z-10 mt-auto hidden px-8 pb-8 lg:block">
+      <div className="max-w-md rounded-2xl border border-white/15 bg-black/30 p-5 backdrop-blur-md">
+        <div className="mb-2 flex items-center gap-2">
+          <div className="h-2 w-2 shrink-0 rounded-full bg-primary" />
+          <span className="text-sm font-semibold text-white">
+            {tagline ?? "Empower Your Freight Operations"}
+          </span>
+        </div>
+        <p className="text-sm leading-relaxed text-white/85">
+          {taglineBody ??
+            "Sign in to manage bookings, track cargo, and run logistics operations on the Ethio Djibouti Railway freight platform."}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const LanguageSelector = () => (
+  <div className="flex cursor-pointer items-center gap-1.5 rounded-full border border-gray-200/80 bg-white px-3 py-1.5 text-sm text-gray-600 shadow-sm">
+    <Globe className="h-4 w-4 text-gray-500" />
+    <span>Eng</span>
+    <ChevronDown className="h-4 w-4 text-gray-400" />
+  </div>
+);
+
+export default function AuthShell({
+  children,
+  tagline,
+  taglineBody,
+}: AuthShellProps) {
+  return (
+    <div className="flex h-[100dvh] overflow-hidden bg-[#e8eaef] px-4 py-3 antialiased sm:px-6 sm:py-4 md:px-[70px]">
+      <div className="flex h-full min-h-0 w-full flex-col gap-3 lg:flex-row lg:gap-4">
+        <LeftPanel tagline={tagline} taglineBody={taglineBody} />
+
+        <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-white shadow-[0_8px_32px_rgba(15,23,42,0.08)] lg:basis-1/2 lg:rounded-[28px]">
+          <RightPanelDecor />
+
+          <div className="relative z-10 flex shrink-0 justify-end px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
+            <LanguageSelector />
+          </div>
+
+          <div className="relative z-10 min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <div className="flex min-h-full justify-center px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
+              <div className="my-auto w-full max-w-xl rounded-3xl px-5 py-6 sm:px-7 sm:py-8 lg:px-9 lg:py-9">
+                {children}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}