bf9e72064b
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>
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useActionState } from 'react';
|
|
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-primary-700 focus:outline-none focus:ring-1 focus:ring-primary-700';
|
|
|
|
export default function SignupPage() {
|
|
const [error, formAction, pending] = useActionState(signup, null);
|
|
return (
|
|
<AuthShell
|
|
photo="/despues-bano.webp"
|
|
photoAlt="Baño reformado"
|
|
caption="Empieza a recibir leads en minutos."
|
|
captionSub="14 días gratis, sin tarjeta. Configura tu catálogo y comparte tu funnel."
|
|
>
|
|
<form action={formAction} className="flex flex-col gap-4">
|
|
<div>
|
|
<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>
|
|
</div>
|
|
|
|
<input name="nombre" placeholder="Tu nombre" required autoComplete="name" className={inputClass} />
|
|
<input
|
|
name="empresa"
|
|
placeholder="Nombre de tu empresa"
|
|
required
|
|
autoComplete="organization"
|
|
className={inputClass}
|
|
/>
|
|
<input
|
|
name="email"
|
|
type="email"
|
|
placeholder="Email"
|
|
required
|
|
autoComplete="email"
|
|
className={inputClass}
|
|
/>
|
|
<input name="provincia" placeholder="Provincia" required className={inputClass} />
|
|
<input
|
|
name="password"
|
|
type="password"
|
|
placeholder="Contraseña (mín. 8)"
|
|
required
|
|
autoComplete="new-password"
|
|
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-[#2f5c46]" /> Quiero
|
|
recibir novedades de Reformix
|
|
</label>
|
|
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
|
|
<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-primary-700 hover:underline">
|
|
Entrar
|
|
</Link>
|
|
</p>
|
|
</form>
|
|
</AuthShell>
|
|
);
|
|
}
|