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/page.tsx | 210 +++++++++++++++++++++++++++++------------------------------
 1 file changed, 105 insertions(+), 105 deletions(-)

(limited to 'app/page.tsx')

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>
   );
 }
-- 
cgit v1.2.3