diff options
Diffstat (limited to 'app/page.tsx')
| -rw-r--r-- | app/page.tsx | 210 |
1 files changed, 105 insertions, 105 deletions
diff --git a/app/page.tsx b/app/page.tsx index 56ac851..eb00949 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -112,117 +112,117 @@ export default function Home() { }; return ( - <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa]"> + <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"> - <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> + <div className="mb-6 flex items-center justify-center"> + <div className="flex flex-col items-center"> + <div className="mb-2 text-center text-2xl sm:text-3xl font-bold text-[#004a93]"> + 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-xl sm:text-2xl">ELEIÇÕES ESTUDANTIS</CardTitle> + <CardDescription className="text-gray-100"> + Identificação do Eleitor + </CardDescription> + </CardHeader> + <CardContent className="pt-6"> + <form onSubmit={handleSubmit} className="space-y-4"> + <div className="space-y-2"> + <label + htmlFor="rm" + className="text-sm font-medium text-[#004a93]" + > + Digite seu RM: + </label> + <Input + id="rm" + type="text" + value={rm} + onChange={(e) => { + setRm(e.target.value); + if (errors.rm) { + setErrors((prev) => ({ ...prev, rm: undefined })); + } + }} + placeholder="Digite os 5 dígitos do seu RM" + className="border-2 border-[#004a93]" + maxLength={5} + /> + {errors.rm && ( + <p className="text-sm text-red-500">{errors.rm}</p> + )} + </div> - <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden"> - <CardHeader className="bg-[#004a93] text-center text-white"> - <CardTitle className="text-2xl">ELEIÇÕES ESTUDANTIS</CardTitle> - <CardDescription className="text-gray-100"> - Identificação do Eleitor - </CardDescription> - </CardHeader> - <CardContent className="pt-6"> - <form onSubmit={handleSubmit} className="space-y-4"> - <div className="space-y-2"> - <label - htmlFor="rm" - className="text-sm font-medium text-[#004a93]" - > - Digite seu RM: - </label> - <Input - id="rm" - type="text" - value={rm} - onChange={(e) => { - setRm(e.target.value); - if (errors.rm) { - setErrors((prev) => ({ ...prev, rm: undefined })); - } - }} - placeholder="Digite os 5 dígitos do seu RM" - className="border-2 border-[#004a93]" - maxLength={5} - /> - {errors.rm && ( - <p className="text-sm text-red-500">{errors.rm}</p> - )} - </div> - - <div className="space-y-2"> - <label - htmlFor="nome" - className="text-sm font-medium text-[#004a93]" - > - Digite seu nome completo: - </label> - <Input - id="nome" - type="text" - value={nome} - onChange={(e) => { - setNome(e.target.value); - if (errors.nome) { - setErrors((prev) => ({ ...prev, nome: undefined })); - } - }} - placeholder="Digite seu nome completo" - className="border-2 border-[#004a93]" - /> - {errors.nome && ( - <p className="text-sm text-red-500">{errors.nome}</p> - )} - </div> - - <div className="space-y-2"> - <label - htmlFor="cpf" - className="text-sm font-medium text-[#004a93]" - > - Digite seu CPF: - </label> - <Input - id="cpf" - type="text" - value={cpf} - onChange={handleCPFChange} - placeholder="Digite seu CPF" - className="border-2 border-[#004a93]" - maxLength={14} - /> - {errors.cpf && ( - <p className="text-sm text-red-500">{errors.cpf}</p> - )} - </div> - - <Button - type="submit" - className="w-full bg-[#004a93] text-white hover:bg-[#003a73]" - > - CONFIRMAR - </Button> - </form> - </CardContent> - <CardFooter className="flex justify-center border-t border-[#004a93] bg-[#f8f8f8] py-3 text-sm text-[#004a93] rounded-b-lg"> - Seu voto é secreto e seguro. - </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="space-y-2"> + <label + htmlFor="nome" + className="text-sm font-medium text-[#004a93]" + > + Digite seu nome completo: + </label> + <Input + id="nome" + type="text" + value={nome} + onChange={(e) => { + setNome(e.target.value); + if (errors.nome) { + setErrors((prev) => ({ ...prev, nome: undefined })); + } + }} + placeholder="Digite seu nome completo" + className="border-2 border-[#004a93]" + /> + {errors.nome && ( + <p className="text-sm text-red-500">{errors.nome}</p> + )} </div> + + <div className="space-y-2"> + <label + htmlFor="cpf" + className="text-sm font-medium text-[#004a93]" + > + Digite seu CPF: + </label> + <Input + id="cpf" + type="text" + value={cpf} + onChange={handleCPFChange} + placeholder="Digite seu CPF" + className="border-2 border-[#004a93]" + maxLength={14} + /> + {errors.cpf && ( + <p className="text-sm text-red-500">{errors.cpf}</p> + )} + </div> + + <Button + type="submit" + className="w-full bg-[#004a93] text-white hover:bg-[#003a73]" + > + CONFIRMAR + </Button> + </form> + </CardContent> + <CardFooter className="flex justify-center border-t border-[#004a93] bg-[#f8f8f8] py-3 text-sm text-[#004a93] rounded-b-lg"> + Seu voto é secreto e seguro. + </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> </div> + </div> </div> ); } |