Alinear panel y auth con la identidad B2B "Architectural Warmth"

Sustituye la paleta negra/azul B2C del panel del reformista por el verde
de marca, neutros cálidos y titulares en Instrument Serif de la landing B2B.
Añade tokens --color-primary-*, --color-stone-50 y --font-display al @theme.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Carlos Narro
2026-06-01 20:01:57 +02:00
parent 15f2d67970
commit bf9e72064b
15 changed files with 54 additions and 45 deletions

View File

@@ -6,7 +6,7 @@ import { signup } from './actions';
import AuthShell from '@/components/auth/AuthShell';
const inputClass =
'rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-900';
'rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-primary-700 focus:outline-none focus:ring-1 focus:ring-primary-700';
export default function SignupPage() {
const [error, formAction, pending] = useActionState(signup, null);
@@ -19,7 +19,7 @@ export default function SignupPage() {
>
<form action={formAction} className="flex flex-col gap-4">
<div>
<h1 className="text-2xl font-black tracking-tight text-black">Empieza gratis 14 días</h1>
<h1 className="font-display text-3xl tracking-tight text-black">Empieza gratis 14 días</h1>
<p className="mt-1 text-sm text-gray-500">
Sin tarjeta. Configura tu catálogo y recibe leads.
</p>
@@ -51,19 +51,19 @@ export default function SignupPage() {
className={inputClass}
/>
<label className="flex items-center gap-2 text-xs text-gray-500">
<input name="optInMarketing" type="checkbox" className="h-4 w-4 accent-black" /> Quiero
<input name="optInMarketing" type="checkbox" className="h-4 w-4 accent-[#2f5c46]" /> Quiero
recibir novedades de Reformix
</label>
{error && <p className="text-sm text-red-600">{error}</p>}
<button type="submit" disabled={pending} className="btn btn-primary w-full disabled:opacity-60">
<button type="submit" disabled={pending} className="btn bg-primary-700 text-white hover:bg-primary-900 w-full disabled:opacity-60">
{pending ? 'Creando cuenta…' : 'Crear cuenta'}
</button>
<p className="text-center text-sm text-gray-500">
¿Ya tienes cuenta?{' '}
<Link href="/login" className="font-semibold text-black hover:underline">
<Link href="/login" className="font-semibold text-primary-700 hover:underline">
Entrar
</Link>
</p>