Auth 左右分栏布局

概述

一种将品牌叙事与表单功能左右分栏的 登录/注册页面布局方案。

其核心特征是：

• 左侧为品牌叙事区（巨型衬线标题 + 径向渐变聚光灯背景 + 胶片颗粒纹理）；
• 右侧为表单区（固定 520px 宽度 + Double-Bezel 毛玻璃卡片）；
• 移动端自动堆叠为单列，品牌区隐藏；
• 衬线体与无衬线体的对比排版强化”编辑感”。

结构

<div className="flex min-h-[100dvh]">
  {/* 左侧 — 品牌叙事区 */}
  <div className="hidden lg:flex lg:flex-1 lg:flex-col lg:justify-center lg:px-16">
    <h1 className="font-serif text-6xl sm:text-7xl lg:text-8xl
                   font-bold tracking-[-0.04em] leading-[0.92]">
      幕间
    </h1>
    <p className="tracking-[0.12em] uppercase font-light">
      AI Screenwriting
    </p>
  </div>

  {/* 右侧 — 表单区 */}
  <div className="flex flex-col justify-center px-6 py-12 lg:w-[520px] lg:px-12">
    {/* 表单内容 */}
  </div>
</div>

径向渐变背景（品牌区）

<div style={{
  background: "radial-gradient(ellipse 80% 70% at 30% 40%, hsl(40 33% 97%), hsl(38 28% 94%))"
}}>

参数：

• ellipse 80% 70%：椭圆形渐变，宽 80% 高 70%
• at 30% 40%：焦点偏左上方
• 从暖白 hsl(40 33% 97%) 渐变到略深的暖色 hsl(38 28% 94%)

效果：左上角最亮，向右下角渐暗，形成”聚光灯”效果。

胶片颗粒叠加（品牌区）

<div className="absolute inset-0 opacity-[0.035] pointer-events-none"
     aria-hidden="true"
     style={{ backgroundImage: "url(data:image/svg+xml,...)", /* 同 globals.css */ }} />

品牌区的颗粒透明度略高于全局（3.5% vs 3%），因为品牌区背景更”空”，需要更多纹理填充。

表单卡片（Double-Bezel）

<div className="glass-strong rounded-[2rem] shadow-[var(--shadow-float)]
                ring-1 ring-border/60 p-8">
  {/* 内部高光层 */}
  <div className="absolute inset-0 rounded-[2rem] ring-1 ring-inset ring-white/50"
       aria-hidden="true" />
  {/* 实际内容 */}
</div>

响应式

断点布局< lg (1024px)垂直堆叠，只显示表单区≥ lg左右分栏，左侧品牌区 flex-1，右侧固定 520px

品牌排版要点

• “幕间”：font-serif（系统衬线体）+ text-8xl + tracking-[-0.04em] + line-height: 0.92
• “AI Screenwriting”：tracking-[0.12em] + uppercase + font-light
• 大标题用衬线体，小标题/正文用无衬线体，形成对比

适用场景

• 登录/注册页面
• 需要”品牌叙事”的入场页面
• 左侧讲故事，右侧做转化的经典 SaaS 布局

‍