responsive web

1 files changed, 70 insertions, 68 deletions

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