karti
9db53cb36f
Replace the stacked sign-in card with a responsive public shell, a local monochrome compute field, restrained grain and reduced-motion-safe drift. Share the anonymous header with Learn so public navigation stays consistent, and carry the corrected spacing through registration and profile setup.
38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
/**
|
|
* Public auth composition: generated compute field, grain and real form UI.
|
|
*
|
|
* The artwork is decoration only. Auth copy and controls stay in the normal
|
|
* document flow, so a missing image changes the mood rather than the task.
|
|
*/
|
|
import type { ReactNode } from 'react';
|
|
import { PublicHeader } from './PublicHeader';
|
|
|
|
export function AuthShell({ children, onSignIn }: { children: ReactNode; onSignIn?: () => void }) {
|
|
return (
|
|
<div className="auth-shell relative isolate flex min-h-dvh min-w-0 flex-col overflow-hidden bg-bg text-fg">
|
|
<PublicHeader current="sign-in" onSignIn={onSignIn} />
|
|
<main className="relative grid min-w-0 flex-1 lg:grid-cols-[minmax(0,1.08fr)_minmax(30rem,0.92fr)]">
|
|
<div
|
|
className="auth-visual pointer-events-none absolute inset-0 lg:relative lg:inset-auto"
|
|
aria-hidden
|
|
>
|
|
<div className="auth-field-motion absolute -inset-[4%]">
|
|
<img
|
|
src="/images/pig-compute-field.webp"
|
|
alt=""
|
|
className="size-full object-cover object-[46%_50%]"
|
|
decoding="async"
|
|
fetchPriority="high"
|
|
/>
|
|
</div>
|
|
<div className="auth-visual-vignette absolute inset-0" />
|
|
</div>
|
|
|
|
<section className="relative z-10 flex min-w-0 items-center justify-center px-4 py-6 sm:px-8 sm:py-10 lg:border-l lg:border-border/70 lg:bg-bg/90 lg:px-12 xl:px-16">
|
|
<div className="w-full min-w-0 max-w-lg">{children}</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|