responsive web

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>
   );