diff options
Diffstat (limited to 'app/confirmar/page.tsx')
| -rw-r--r-- | app/confirmar/page.tsx | 144 |
1 files changed, 78 insertions, 66 deletions
diff --git a/app/confirmar/page.tsx b/app/confirmar/page.tsx index 61c7773..a8b6f1c 100644 --- a/app/confirmar/page.tsx +++ b/app/confirmar/page.tsx @@ -63,77 +63,89 @@ export default function ConfirmPage() { }; return ( - <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa]"> - <div className="w-full max-w-md"> - <div className="mb-6 flex items-center justify-center"> - <div className="flex flex-col items-center"> - <div className="mb-2 text-center text-3xl font-bold text-[#004a93]"> - JUSTIÇA ELEITORAL - </div> - <div className="h-2 w-full bg-gradient-to-r from-[#009c3b] via-[#ffdf00] to-[#002776]"></div> + <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa] px-4 sm:px-6 lg:px-8"> + <div className="w-full max-w-md sm:max-w-lg lg:max-w-xl"> + <div className="mb-6 flex items-center justify-center"> + <div className="flex flex-col items-center"> + <div className="mb-2 text-center text-2xl font-bold text-[#004a93] sm:text-3xl lg:text-4xl"> + JUSTIÇA ELEITORAL ESTUDANTIL + </div> + <div className="h-2 w-full bg-gradient-to-r from-[#009c3b] via-[#ffdf00] to-[#002776]"></div> + </div> + </div> + + <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden"> + <CardHeader className="bg-[#004a93] text-center text-white"> + <CardTitle className="text-lg sm:text-xl lg:text-2xl"> + CONFIRME SEUS DADOS + </CardTitle> + <CardDescription className="text-gray-100 text-sm sm:text-base"> + Verifique se as informações estão corretas + </CardDescription> + </CardHeader> + <CardContent className="space-y-4 pt-6"> + <div className="rounded-lg border-2 border-[#004a93] bg-white p-4"> + <div className="grid grid-cols-2 gap-2"> + <div className="text-xs sm:text-sm font-medium text-[#004a93]"> + RM: + </div> + <div className="text-xs sm:text-sm font-bold text-[#004a93]"> + {rm} + </div> + + <div className="text-xs sm:text-sm font-medium text-[#004a93]"> + Nome: + </div> + <div className="text-xs sm:text-sm font-bold text-[#004a93]"> + {nome} + </div> + + <div className="text-xs sm:text-sm font-medium text-[#004a93]"> + CPF: + </div> + <div className="text-xs sm:text-sm font-bold text-[#004a93]"> + {maskCPF(cpf)} + </div> </div> </div> - <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden"> - <CardHeader className="bg-[#004a93] text-center text-white"> - <CardTitle className="text-2xl">CONFIRME SEUS DADOS</CardTitle> - <CardDescription className="text-gray-100"> - Verifique se as informações estão corretas - </CardDescription> - </CardHeader> - <CardContent className="space-y-4 pt-6"> - <div className="rounded-lg border-2 border-[#004a93] bg-white p-4"> - <div className="grid grid-cols-2 gap-2"> - <div className="text-sm font-medium text-[#004a93]">RM:</div> - <div className="text-sm font-bold text-[#004a93]">{rm}</div> - - <div className="text-sm font-medium text-[#004a93]">Nome:</div> - <div className="text-sm font-bold text-[#004a93]">{nome}</div> - - <div className="text-sm font-medium text-[#004a93]">CPF:</div> - <div className="text-sm font-bold text-[#004a93]"> - {maskCPF(cpf)} - </div> - </div> - </div> - - <div className="rounded-lg border-2 border-amber-500 bg-amber-50 p-4"> - <div className="flex items-start gap-2"> - <AlertTriangle className="h-5 w-5 flex-shrink-0 text-amber-500" /> - <div className="text-sm text-amber-800"> - <strong>ATENÇÃO:</strong> Verifique se seus dados estão - corretos. Caso as informações estejam incorretas, seu voto não - será computado. - </div> - </div> - </div> - - <div className="text-center text-sm font-bold text-[#004a93]"> - Estas informações estão corretas? - </div> - </CardContent> - <CardFooter className="flex justify-between gap-4 border-t border-[#004a93] bg-[#f8f8f8] py-3 rounded-b-lg"> - <Button - variant="outline" - onClick={handleCancel} - className="flex-1 border-2 border-[#004a93] text-[#004a93] hover:bg-[#e6f0fa] hover:text-[#003a73]" - > - CORRIGIR - </Button> - <Button - onClick={handleConfirm} - className="flex-1 bg-[#004a93] text-white hover:bg-[#003a73]" - > - CONFIRMAR - </Button> - </CardFooter> - </Card> - - <div className="mt-4 flex justify-center"> - <div className="text-center text-sm text-[#004a93]"> - © {new Date().getFullYear()} Justiça Eleitoral Estudantil + <div className="rounded-lg border-2 border-amber-500 bg-amber-50 p-4"> + <div className="flex items-start gap-2"> + <AlertTriangle className="h-4 w-4 sm:h-5 sm:w-5 flex-shrink-0 text-amber-500" /> + <div className="text-xs sm:text-sm text-amber-800"> + <strong>ATENÇÃO:</strong> Verifique se seus dados estão + corretos. Caso as informações estejam incorretas, seu voto não + será computado. + </div> </div> </div> + + <div className="text-center text-xs sm:text-sm font-bold text-[#004a93]"> + Estas informações estão corretas? + </div> + </CardContent> + <CardFooter className="flex flex-col sm:flex-row justify-between gap-4 border-t border-[#004a93] bg-[#f8f8f8] py-3 rounded-b-lg"> + <Button + variant="outline" + onClick={handleCancel} + className="flex-1 border-2 border-[#004a93] text-[#004a93] hover:bg-[#e6f0fa] hover:text-[#003a73]" + > + CORRIGIR + </Button> + <Button + onClick={handleConfirm} + className="flex-1 bg-[#004a93] text-white hover:bg-[#003a73]" + > + CONFIRMAR + </Button> + </CardFooter> + </Card> + + <div className="mt-4 flex justify-center"> + <div className="text-center text-xs sm:text-sm text-[#004a93]"> + © {new Date().getFullYear()} Justiça Eleitoral Estudantil + </div> + </div> </div> </div> ); |