abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): bring the landing's cloud sky into login/register

Browse Source 
Replace AuthShell's deep-blue grid backdrop with AuthSky — the same bright
pale-blue gradient (weather stop 0) and the same vendored cloud puff
(/cloud.png) as the landing, as lightweight drifting CSS sprites so no
three.js lands on the auth routes. The form keeps the shared frosted-glass
panel, so login/register now read as one world with the public landing.
Cloud drift respects prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
2026-06-22 17:44:37 +03:30
parent c379a2389a
commit 7275c29460
3 changed files with 116 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/auth/AuthShell.tsx
+8 -19
View File
@@ -5,11 +5,12 @@ import { Link } from '@/i18n/Link';
import { useT } from '@/i18n/I18nProvider';
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
import { Logo } from '@/components/landing/Logo';
import { AuthSky } from './AuthSky';
// Auth shell that carries the Abrban brand into a calmer, more premium key: a
// deep blue gradient, a faint infrastructure grid, soft brand-blue glows and a
// vignette — no fluffy clouds — with the form inside the same frosted dark-glass
// panel used across the landing. Direction is inherited from the root layout.
// Auth shell that carries the Abrban brand straight from the landing: the same
// bright, cloud-filled sky (see AuthSky) sits behind the form, which lives in the
// same frosted dark-glass panel — so login/register read as one world with the
// public landing. Direction is inherited from the root layout.
export function AuthShell({
title,
subtitle,
@@ -27,21 +28,9 @@ export function AuthShell({
}) {
const t = useT();
return (
<div className="relative min-h-screen w-full overflow-hidden bg-[#081427] text-white">
{/* Background atmosphere */}
<div className="pointer-events-none absolute inset-0">
{/* Deep brand gradient */}
<div className="absolute inset-0 bg-[radial-gradient(125%_120%_at_50%_-10%,#1f5aa0_0%,#0e2c57_45%,#081427_100%)]" />
{/* Fine infrastructure grid, faded toward the edges */}
<div className="absolute inset-0 opacity-[0.16] [background-image:linear-gradient(rgba(255,255,255,0.10)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.10)_1px,transparent_1px)] [background-size:54px_54px] [mask-image:radial-gradient(ellipse_at_center,black_45%,transparent_92%)] [-webkit-mask-image:radial-gradient(ellipse_at_center,black_45%,transparent_92%)]" />
{/* Soft brand-blue glows */}
<div className="absolute right-[-8%] top-[-12%] h-[30rem] w-[30rem] rounded-full bg-[radial-gradient(circle,_rgba(59,130,246,0.40),_transparent_70%)] blur-3xl" />
<div className="absolute bottom-[-14%] left-[-10%] h-[28rem] w-[28rem] rounded-full bg-[radial-gradient(circle,_rgba(37,99,235,0.34),_transparent_70%)] blur-3xl" />
{/* Crisp hairline along the very top */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/25 to-transparent" />
{/* Vignette to focus the centre */}
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_transparent_55%,_rgba(4,10,22,0.55)_100%)]" />
</div>
<div className="relative min-h-screen w-full overflow-hidden bg-[#9fb4d4] text-white">
{/* Bright cloud-filled sky backdrop, shared with the landing */}
<AuthSky />
{/* Header */}
<header className="relative z-10 mx-auto flex max-w-5xl items-center justify-between px-6 py-5">