Blocks
Login Form
Formulário de login centrado — email, password, esqueci senha, social auth opcional.
Form login simples — email + senha, link recovery, divisor “ou”, social provider.
<form class="flex w-full max-w-sm flex-col gap-5 rounded-2xl border border-border bg-card p-8">
<header class="flex flex-col gap-1">
<h1 class="text-2xl font-bold tracking-tight text-foreground">Entrar</h1>
<p class="text-sm text-muted-foreground">Acesse sua conta Sinapse.</p>
</header>
<label class="itps-field">
<span class="itps-field__label">E-mail</span>
<input type="email" class="itps-input" placeholder="[email protected]" required />
</label>
<label class="itps-field">
<div class="flex items-baseline justify-between">
<span class="itps-field__label">Senha</span>
<a href="/recuperar" class="text-xs text-brand hover:underline">Esqueci</a>
</div>
<input type="password" class="itps-input" placeholder="••••••••" required />
</label>
<button type="submit" class="itps-btn itps-btn--primary">Entrar</button>
<p class="text-center text-sm text-muted-foreground">
Não tem conta? <a href="/registro" class="text-brand hover:underline">Criar agora</a>
</p>
</form>
<form class="flex w-full max-w-sm flex-col gap-5 rounded-2xl border border-border bg-card p-8">
<header class="flex flex-col gap-1">
<h1 class="text-2xl font-bold tracking-tight text-foreground">Entrar</h1>
<p class="text-sm text-muted-foreground">Acesse sua conta Sinapse.</p>
</header>
<label class="itps-field">
<span class="itps-field__label">E-mail</span>
<input type="email" class="itps-input" placeholder="[email protected]" required />
</label>
<label class="itps-field">
<div class="flex items-baseline justify-between">
<span class="itps-field__label">Senha</span>
<a href="/recuperar" class="text-xs text-brand hover:underline">Esqueci</a>
</div>
<input type="password" class="itps-input" placeholder="••••••••" required />
</label>
<button type="submit" class="itps-btn itps-btn--primary">Entrar</button>
<p class="text-center text-sm text-muted-foreground">
Não tem conta? <a href="/registro" class="text-brand hover:underline">Criar agora</a>
</p>
</form><form class="flex w-full max-w-sm flex-col gap-5 rounded-2xl border border-border bg-card p-8">
<header class="flex flex-col gap-1">
<h1 class="text-2xl font-bold tracking-tight text-foreground">Entrar</h1>
<p class="text-sm text-muted-foreground">Acesse sua conta Sinapse.</p>
</header>
<label class="itps-field">
<span class="itps-field__label">E-mail</span>
<input type="email" class="itps-input" placeholder="[email protected]" required />
</label>
<label class="itps-field">
<div class="flex items-baseline justify-between">
<span class="itps-field__label">Senha</span>
<a href="/recuperar" class="text-xs text-brand hover:underline">Esqueci</a>
</div>
<input type="password" class="itps-input" placeholder="••••••••" required />
</label>
<button type="submit" class="itps-btn itps-btn--primary">Entrar</button>
<p class="text-center text-sm text-muted-foreground">
Não tem conta? <a href="/registro" class="text-brand hover:underline">Criar agora</a>
</p>
</form>
<form class="flex w-full max-w-sm flex-col gap-5 rounded-2xl border border-border bg-card p-8">
<header class="flex flex-col gap-1">
<h1 class="text-2xl font-bold tracking-tight text-foreground">Entrar</h1>
<p class="text-sm text-muted-foreground">Acesse sua conta Sinapse.</p>
</header>
<label class="itps-field">
<span class="itps-field__label">E-mail</span>
<input type="email" class="itps-input" placeholder="[email protected]" required />
</label>
<label class="itps-field">
<div class="flex items-baseline justify-between">
<span class="itps-field__label">Senha</span>
<a href="/recuperar" class="text-xs text-brand hover:underline">Esqueci</a>
</div>
<input type="password" class="itps-input" placeholder="••••••••" required />
</label>
<button type="submit" class="itps-btn itps-btn--primary">Entrar</button>
<p class="text-center text-sm text-muted-foreground">
Não tem conta? <a href="/registro" class="text-brand hover:underline">Criar agora</a>
</p>
</form>