CRM High Beauty — Login com foto dos fundadores (mockup @pixel)

Especificação — @pixel para @ENG

Login premium com foto real dos fundadores

Layout

<1024px: empilhado — foto hero no topo (clamp(260px,42vh,420px)) + selo HB sobreposto (-34px) + conteúdo atual abaixo, sem mudança.
>=1024px: split-screen flex — foto flex:1 1 56% à esquerda, form flex:1 1 44%; min-width:440px à direita, ambos esticados à altura cheia da tela via align-self:stretch.
Divisória: border-left:1px solid var(--border) na coluna do form (mesma cor de borda dos cards).

Imagem

object-fit:cover sempre; object-position muda por breakpoint (rosto/torso sempre visível).
Mobile: 50% 40% · Desktop: 50% 36%
LCP candidate — fetchpriority="high", sem loading="lazy".
6 larguras WebP (480→2400) via srcset + sizes — ver bloco de código abaixo.

Integração visual (scrim)

Mobile: gradiente vertical dissolve a foto direto no --bg-base do tema ativo (sem borda dura).
Desktop: vinheta sutil topo/base (--scrim 40%→0%→55%) + fade horizontal de 12% na emenda com a coluna do form.
Nenhum overlay é opaco o bastante pra "lavar" a foto — o dourado da escadaria continua vivo nos dois temas.

`.bg-glow`

Em telas >=1024px o glow ambiente (3 radiais gold/burgundy/plum) fica restrito à coluna do form — embaixo da foto ele é desperdiçado (opaca). Abaixo de 1024px continua fixed cobrindo a página inteira, igual está hoje.

Selo HB flutuante (mobile)

Só no padrão empilhado: badge 64px sai do fluxo normal (margin-top:-34px) e sobrepõe a borda inferior da foto, com border:3px solid rgb(var(--bg-base)) criando o "recorte" — mesmo efeito de avatar sobre capa. Some no desktop (o badge padrão da coluna do form já resolve a identidade).

O que NÃO muda

Monograma, eyebrow, headline "Bem-vindo de volta", subheadline, painel do form (inputs, Turnstile, botão, "esqueci senha") e o texto de rodapé continuam pixel-idênticos ao que já está em produção — só o container/posicionamento mudou pra caber a foto.

Tokens usados (zero valor novo — 100% de `app/globals.css`)

Assets — onde ficam e como referenciar

public/login/fundadores-480w.webp   (480×720   —  ~43 KB)
public/login/fundadores-768w.webp   (768×1152  —  ~77 KB)
public/login/fundadores-1024w.webp  (1024×1536 — ~112 KB)
public/login/fundadores-1440w.webp  (1440×2160 — ~172 KB)
public/login/fundadores-1920w.webp  (1920×2880 — ~314 KB)
public/login/fundadores-2400w.webp  (2400×3600 — ~555 KB)

<img
  src="/login/fundadores-1024w.webp"
  srcSet="/login/fundadores-480w.webp 480w, /login/fundadores-768w.webp 768w,
          /login/fundadores-1024w.webp 1024w, /login/fundadores-1440w.webp 1440w,
          /login/fundadores-1920w.webp 1920w, /login/fundadores-2400w.webp 2400w"
  sizes="(min-width: 1024px) 56vw, 100vw"
  alt="Maykon e Gleison, fundadores da High Beauty, em escadaria de mármore iluminada em dourado"
  fetchPriority="high"
/>

next.config.mjs não tem images{} configurado (edge runtime do Cloudflare Pages não roda o otimizador padrão do next/image) — por isso os 6 tamanhos já vêm pré-gerados. <img> puro funciona sem precisar tocar em config nenhuma; se preferirem next/image, precisa unoptimized ou loader custom Cloudflare.

Bem-vindo de volta