style: auth clean up

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

@@ -1,32 +1,86 @@
 import type { ReactNode } from "react";
-import { ArrowUpRight, ChevronDown, Globe } from "lucide-react";
+import { Box, Image, Stack, Text, Title } from "@mantine/core";
+import { ChevronDown, Globe } from "lucide-react";
 
-const LOGIN_IMAGE = "/assets/login.png";
+const EDR_IMAGE = "/assets/edr_image.png";
 const EDR_LOGO = "/assets/logo.svg";
 
-const LeftPanelDecor = () => (
-  <div
-    className="pointer-events-none absolute inset-0 overflow-hidden"
-    aria-hidden
+/** Muted deep-green brand wash for the left panel. */
+const LEFT_PANEL_BG =
+  "linear-gradient(158deg, #2E6B55 0%, #21503F 46%, #16352A 100%)";
+
+/** Radial opacity mask: image fully opaque at its center, fading to nothing at the edges. */
+const IMAGE_FADE_MASK =
+  "linear-gradient(-90deg, #000 95%, #0009 97%, #0000 100%), linear-gradient(0deg, #000 80%, #0001 100%)";
+
+export interface AuthShellProps {
+  children: ReactNode;
+  /** Headline shown in the top-left of the green panel. */
+  tagline?: string;
+  taglineBody?: string;
+}
+
+const LeftPanel = ({
+  tagline,
+  taglineBody,
+}: Pick<AuthShellProps, "tagline" | "taglineBody">) => (
+  <Box
+    className="relative hidden shrink-0 overflow-hidden rounded-2xl shadow-[0_8px_32px_rgba(15,23,42,0.12)] lg:flex lg:h-auto lg:min-h-0 lg:flex-1 lg:basis-1/2 lg:rounded-[28px]"
+    style={{ background: LEFT_PANEL_BG }}
   >
-    <svg
-      className="absolute -bottom-24 -left-24 h-[420px] w-[420px] text-white/[0.07]"
-      viewBox="0 0 400 400"
-      fill="none"
+    {/* Top-left: logo, title, description — stacked, left aligned. */}
+    <Stack
+      gap="xl"
+      className="relative z-10 p-8 lg:p-10"
+      style={{ maxWidth: 520 }}
     >
-      {[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>
+      <Image
+        src={EDR_LOGO}
+        alt="EDR Freight"
+        h={40}
+        w="auto"
+        fit="contain"
+        style={{ filter: "brightness(0) invert(1)", alignSelf: "flex-start" }}
+      />
+
+      <Stack gap="sm">
+        <Title
+          order={1}
+          c="white"
+          fz={38}
+          fw={800}
+          lh={1.08}
+          style={{ letterSpacing: "-0.02em" }}
+        >
+          {tagline ?? "Ethiopian Djibouti Railway"}
+        </Title>
+        <Text fz="md" lh={1.6} c="rgba(255,255,255,0.82)" maw={440}>
+          {taglineBody ??
+            "Manage bookings, track cargo, and run day-to-day logistics for the Ethio–Djibouti Railway from a single backoffice."}
+        </Text>
+      </Stack>
+    </Stack>
+
+    {/* Bottom-right: brand image with a center-to-edge opacity fade, no color tint. */}
+    <Image
+      src={EDR_IMAGE}
+      alt=""
+      aria-hidden
+      fit="cover"
+      pos="absolute"
+      right={0}
+      bottom={0}
+      w="80%"
+      h="60%"
+      style={{
+        WebkitMaskImage: IMAGE_FADE_MASK,
+        maskImage: IMAGE_FADE_MASK,
+        pointerEvents: "none",
+        opacity: 0.9,
+        maskComposite: "intersect",
+      }}
+    />
+  </Box>
 );
 
 const RightPanelDecor = () => (
@@ -55,51 +109,6 @@ const RightPanelDecor = () => (
   </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" />
@@ -126,7 +135,7 @@ export default function AuthShell({
           </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="flex min-h-full justify-center">
               <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>