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

(limited to 'app/votar')

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