aboutsummaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/confirmar/page.tsx144
-rw-r--r--app/layout.tsx2
-rw-r--r--app/listagem/page.tsx2
-rw-r--r--app/obrigado/page.tsx138
-rw-r--r--app/page.tsx210
-rw-r--r--app/votar/page.tsx88
6 files changed, 299 insertions, 285 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>
);
diff --git a/app/layout.tsx b/app/layout.tsx
index cc5ccbe..7923b04 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,7 +9,7 @@ const roboto = Roboto({
});
export const metadata: Metadata = {
- title: "Justiça Eleitoral - Sistema de Votação",
+ title: "Justiça Eleitoral Estudantil",
description: "Eleições Estudantis",
};
diff --git a/app/listagem/page.tsx b/app/listagem/page.tsx
index 10f0bcc..c15cdf0 100644
--- a/app/listagem/page.tsx
+++ b/app/listagem/page.tsx
@@ -57,7 +57,7 @@ export default function ListVotes() {
<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
+ JUSTIÇA ELEITORAL ESTUDANTIL
</div>
<div className="h-2 w-full bg-gradient-to-r from-[#009c3b] via-[#ffdf00] to-[#002776]"></div>
</div>
diff --git a/app/obrigado/page.tsx b/app/obrigado/page.tsx
index 718e122..7234012 100644
--- a/app/obrigado/page.tsx
+++ b/app/obrigado/page.tsx
@@ -92,77 +92,79 @@ export default function ObrigadoPage() {
}, [rm, name, cpf, option]);
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>
+ <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] text-center shadow-lg overflow-hidden">
- <CardHeader
- className={`${
- saveStatus === "error" ? "bg-red-600" : "bg-[#004a93]"
- } text-white`}
- >
- <div className="mx-auto mb-4 rounded-full bg-white p-2">
- {saveStatus === "loading" ? (
- <div className="h-16 w-16 animate-spin rounded-full border-4 border-[#004a93] border-t-transparent"></div>
- ) : saveStatus === "success" ? (
- <CheckCircle2 className="h-16 w-16 text-[#009c3b]" />
- ) : (
- <AlertTriangle className="h-16 w-16 text-red-600" />
- )}
- </div>
- <CardTitle className="text-2xl">
- {saveStatus === "loading"
- ? "PROCESSANDO SEU VOTO..."
- : saveStatus === "success"
- ? "VOTO REGISTRADO COM SUCESSO!"
- : "ERRO AO REGISTRAR VOTO"}
- </CardTitle>
- <CardDescription className="text-gray-100">
- {saveStatus === "success" ? "FIM" : ""}
- </CardDescription>
- </CardHeader>
- <CardContent className="pt-6 pb-6 rounded-b-lg">
- {saveStatus === "loading" ? (
- <p className="text-[#004a93]">
- Aguarde enquanto registramos seu voto...
- </p>
- ) : saveStatus === "success" ? (
- <>
- <p className="text-lg font-bold text-[#004a93]">
- Você votou em:{" "}
- <span className="text-[#009c3b]">{option}</span>
- </p>
- <p className="mt-4 text-[#004a93]">
- Obrigado por participar das eleições.
- </p>
- <p className="mt-4 text-sm text-[#004a93]">
- Retornando à tela inicial em {countdown} segundos...
- </p>
- </>
- ) : (
- <>
- <p className="text-lg font-bold text-red-600">{errorMessage}</p>
- <p className="mt-4 text-sm text-[#004a93]">
- Retornando à tela inicial em {countdown} segundos...
- </p>
- </>
- )}
- </CardContent>
- </Card>
-
- <div className="mt-4 flex justify-center">
- <div className="text-center text-sm text-[#004a93]">
- © {new Date().getFullYear()} Justiça Eleitoral Estudantil
- </div>
+ <Card className="border-2 border-[#004a93] text-center shadow-lg overflow-hidden">
+ <CardHeader
+ className={`${
+ saveStatus === "error" ? "bg-red-600" : "bg-[#004a93]"
+ } text-white`}
+ >
+ <div className="mx-auto mb-4 rounded-full bg-white p-2">
+ {saveStatus === "loading" ? (
+ <div className="h-12 w-12 sm:h-16 sm:w-16 animate-spin rounded-full border-4 border-[#004a93] border-t-transparent"></div>
+ ) : saveStatus === "success" ? (
+ <CheckCircle2 className="h-12 w-12 sm:h-16 sm:w-16 text-[#009c3b]" />
+ ) : (
+ <AlertTriangle className="h-12 w-12 sm:h-16 sm:w-16 text-red-600" />
+ )}
</div>
+ <CardTitle className="text-lg sm:text-2xl">
+ {saveStatus === "loading"
+ ? "PROCESSANDO SEU VOTO..."
+ : saveStatus === "success"
+ ? "VOTO REGISTRADO COM SUCESSO!"
+ : "ERRO AO REGISTRAR VOTO"}
+ </CardTitle>
+ <CardDescription className="text-gray-100">
+ {saveStatus === "success" ? "FIM" : ""}
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="pt-6 pb-6 rounded-b-lg">
+ {saveStatus === "loading" ? (
+ <p className="text-[#004a93] text-sm sm:text-base">
+ Aguarde enquanto registramos seu voto...
+ </p>
+ ) : saveStatus === "success" ? (
+ <>
+ <p className="text-base sm:text-lg font-bold text-[#004a93]">
+ Você votou em:{" "}
+ <span className="text-[#009c3b]">{option}</span>
+ </p>
+ <p className="mt-4 text-sm sm:text-base text-[#004a93]">
+ Obrigado por participar das eleições.
+ </p>
+ <p className="mt-4 text-xs sm:text-sm text-[#004a93]">
+ Retornando à tela inicial em {countdown} segundos...
+ </p>
+ </>
+ ) : (
+ <>
+ <p className="text-base sm:text-lg font-bold text-red-600">
+ {errorMessage}
+ </p>
+ <p className="mt-4 text-xs sm:text-sm text-[#004a93]">
+ Retornando à tela inicial em {countdown} segundos...
+ </p>
+ </>
+ )}
+ </CardContent>
+ </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>
);
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>
);
}
diff --git a/app/votar/page.tsx b/app/votar/page.tsx
index 436c167..5ca0cb4 100644
--- a/app/votar/page.tsx
+++ b/app/votar/page.tsx
@@ -46,55 +46,55 @@ export default function VotarPage() {
};
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>
+ <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f5fa] p-4">
+ <div className="w-full max-w-md md:max-w-2xl">
+ <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] md:text-3xl">
+ 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-2xl">SEU VOTO PARA</CardTitle>
- <CardDescription className="text-gray-100">
- CHAPA DO GREMIO ESTUDANTIL
- </CardDescription>
- </CardHeader>
- <CardContent className="space-y-6 p-6 rounded-b-lg">
- <div className="grid grid-cols-2 gap-6">
- <Button
- onClick={() => handleVote("SIE")}
- className="flex h-40 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-xl font-bold text-[#004a93] hover:bg-[#e6f0fa]"
- variant="outline"
- >
- <div className="mb-2 text-4xl">1</div>
- SIE
- </Button>
- <Button
- onClick={() => handleVote("Liderança Jovem")}
- className="flex h-40 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-xl font-bold text-[#004a93] hover:bg-[#e6f0fa]"
- variant="outline"
- >
- <div className="mb-2 text-4xl">2</div>
- Liderança Jovem
- </Button>
- </div>
- <div className="mt-4 text-center text-sm text-[#004a93]">
- Toque no quadro correspondente para VOTAR
- </div>
- </CardContent>
- </Card>
+ <Card className="border-2 border-[#004a93] shadow-lg overflow-hidden">
+ <CardHeader className="bg-[#004a93] text-center text-white">
+ <CardTitle className="text-xl md:text-2xl">SEU VOTO PARA</CardTitle>
+ <CardDescription className="text-gray-100">
+ CHAPA DO GREMIO ESTUDANTIL
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-6 p-4 md:p-6 rounded-b-lg">
+ <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+ <Button
+ onClick={() => handleVote("SIE")}
+ className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl"
+ variant="outline"
+ >
+ <div className="mb-2 text-3xl md:text-4xl">1</div>
+ SIE
+ </Button>
+ <Button
+ onClick={() => handleVote("Liderança Jovem")}
+ className="flex h-32 flex-col items-center justify-center border-2 border-[#004a93] bg-white p-4 text-lg font-bold text-[#004a93] hover:bg-[#e6f0fa] md:h-40 md:text-xl"
+ variant="outline"
+ >
+ <div className="mb-2 text-3xl md:text-4xl">2</div>
+ Liderança Jovem
+ </Button>
+ </div>
+ <div className="mt-4 text-center text-sm text-[#004a93] md:text-base">
+ Toque no quadro correspondente para VOTAR
+ </div>
+ </CardContent>
+ </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 className="mt-4 flex justify-center">
+ <div className="text-center text-sm text-[#004a93] md:text-base">
+ © {new Date().getFullYear()} Justiça Eleitoral Estudantil
</div>
</div>
+ </div>
</div>
);
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-24 08:25:21 +0000