From dbf1f62ca81eafe13bf058ac94877f378c99114b Mon Sep 17 00:00:00 2001
From: zwlucas <lucas.oliveira1676@etec.sp.gov.br>
Date: Tue, 1 Apr 2025 09:18:15 -0300
Subject: responsive web

---
 app/confirmar/page.tsx | 144 +++++++++++++++++----------------
 app/layout.tsx         |   2 +-
 app/listagem/page.tsx  |   2 +-
 app/obrigado/page.tsx  | 138 ++++++++++++++++----------------
 app/page.tsx           | 210 ++++++++++++++++++++++++-------------------------
 app/votar/page.tsx     |  88 ++++++++++-----------
 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>
   );
 }
-- 
cgit v1.2.3