2 files changed, 144 insertions, 0 deletions
diff --git a/app/confirmar/loading.tsx b/app/confirmar/loading.tsx
new file mode 100644
index 0000000..cec067b
--- /dev/null
+++ b/app/confirmar/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/app/confirmar/page.tsx b/app/confirmar/page.tsx
new file mode 100644
index 0000000..61c7773
--- /dev/null
+++ b/app/confirmar/page.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { AlertTriangle } from "lucide-react";
+
+export default function ConfirmPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const rm = searchParams.get("rm") || "";
+  const nome = searchParams.get("nome") || "";
+  const cpf = searchParams.get("cpf") || "";
+
+  useEffect(() => {
+    if (!rm || !nome || !cpf) {
+      router.push("/");
+      return;
+    }
+  }, [rm, nome, cpf, router]);
+
+  const handleConfirm = () => {
+    router.push(`/votar?rm=${rm}&nome=${encodeURIComponent(nome)}&cpf=${cpf}`);
+  };
+
+  const handleCancel = () => {
+    router.push("/");
+  };
+
+  const formatCPFDisplay = (cpf: string) => {
+    if (cpf.includes(".") || cpf.includes("-")) return cpf;
+
+    const cpfClean = cpf.replace(/\D/g, "");
+
+    if (cpfClean.length === 11) {
+      return `${cpfClean.substring(0, 3)}.${cpfClean.substring(
+        3,
+        6
+      )}.${cpfClean.substring(6, 9)}-${cpfClean.substring(9, 11)}`;
+    }
+
+    return cpf;
+  };
+
+  const maskCPF = (cpf: string) => {
+    const formatted = formatCPFDisplay(cpf);
+    const parts = formatted.split(".");
+    if (parts.length === 3) {
+      const lastPart = parts[2].split("-");
+      if (lastPart.length === 2) {
+        return `${parts[0]}.${parts[1]}.${"***"}-${lastPart[1]}`;
+      }
+    }
+    return formatted;
+  };
+
+  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>
+
+        <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>
+        </div>
+      </div>
+    </div>
+  );
+}