feat: site institucional completo com design system - Implementa\u00e7\u00e3o do site institucional da Aggios com design system completo incluindo gradientes, tipografia, componentes e se\u00e7\u00f5es de recursos, pre\u00e7os e CTA
This commit is contained in:
Erik Silva
250
front-end-dash.aggios.app/app/(auth)/recuperar-senha/page.tsx
Normal file
250
front-end-dash.aggios.app/app/(auth)/recuperar-senha/page.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Button, Input } from "@/components/ui";
|
||||
import toast, { Toaster } from 'react-hot-toast';
|
||||
|
||||
export default function RecuperarSenhaPage() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [emailSent, setEmailSent] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validações básicas
|
||||
if (!email) {
|
||||
toast.error('Por favor, insira seu email');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
toast.error('Por favor, insira um email válido');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simular envio de email
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
setEmailSent(true);
|
||||
toast.success('Email de recuperação enviado com sucesso!');
|
||||
} catch (error) {
|
||||
toast.error('Erro ao enviar email. Tente novamente.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
toastOptions={{
|
||||
duration: 5000,
|
||||
style: {
|
||||
background: '#FFFFFF',
|
||||
color: '#000000',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #E5E5E5',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
error: {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
background: '#ff3a05',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
icon: '✓',
|
||||
style: {
|
||||
background: '#10B981',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<div className="flex min-h-screen">
|
||||
{/* Lado Esquerdo - Formulário */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo mobile */}
|
||||
<div className="lg:hidden text-center mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080]">
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!emailSent ? (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[28px] font-bold text-[#000000]">
|
||||
Recuperar senha
|
||||
</h2>
|
||||
<p className="text-[14px] text-[#7D7D7D] mt-2">
|
||||
Digite seu email e enviaremos um link para redefinir sua senha
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
leftIcon="ri-mail-line"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Enviar link de recuperação
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Back to login */}
|
||||
<div className="mt-6 text-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
||||
>
|
||||
<i className="ri-arrow-left-line" />
|
||||
Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Success Message */}
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 rounded-full bg-[#10B981]/10 flex items-center justify-center mx-auto mb-6">
|
||||
<i className="ri-mail-check-line text-4xl text-[#10B981]" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-[28px] font-bold text-[#000000] mb-4">
|
||||
Email enviado!
|
||||
</h2>
|
||||
|
||||
<p className="text-[14px] text-[#7D7D7D] mb-2">
|
||||
Enviamos um link de recuperação para:
|
||||
</p>
|
||||
|
||||
<p className="text-[16px] font-semibold text-[#000000] mb-6">
|
||||
{email}
|
||||
</p>
|
||||
|
||||
<div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
|
||||
<div className="flex gap-4">
|
||||
<i className="ri-information-line text-[#0EA5E9] text-xl mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[#000000] mb-1">
|
||||
Verifique sua caixa de entrada
|
||||
</h4>
|
||||
<p className="text-xs text-[#7D7D7D]">
|
||||
Clique no link que enviamos para redefinir sua senha.
|
||||
Se não receber em alguns minutos, verifique sua pasta de spam.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mb-4"
|
||||
onClick={() => setEmailSent(false)}
|
||||
>
|
||||
Enviar novamente
|
||||
</Button>
|
||||
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
||||
>
|
||||
<i className="ri-arrow-left-line" />
|
||||
Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'linear-gradient(90deg, #FF3A05, #FF0080)' }}>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
||||
<i className="ri-lock-password-line text-4xl" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Protegemos seus dados com os mais altos padrões de segurança.
|
||||
Seu link de recuperação é único e expira em 24 horas.
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-4 text-left">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-shield-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Criptografia de ponta</h4>
|
||||
<p className="text-white/70 text-sm">Seus dados são protegidos com tecnologia de última geração</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-time-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Link temporário</h4>
|
||||
<p className="text-white/70 text-sm">O link expira em 24h para sua segurança</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-customer-service-2-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Suporte disponível</h4>
|
||||
<p className="text-white/70 text-sm">Nossa equipe está pronta para ajudar caso precise</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Círculos decorativos */}
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user