feat: update SuccessPage with countdown and return button; localize return button text

frontend/src/pages/SuccessPage.tsx

@@ -1,4 +1,4 @@
-import { Box, Paper, Typography, Chip } from "@mui/material";
+import { Box, Paper, Typography, Chip, Button } from "@mui/material";
 import { useEffect, useState } from "react";
 import { CircleCheck } from "lucide-react";
 import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ export const SuccessPage = () => {
   const [tickets, setNumberOfTickets] = useState<number>(0);
   const [animate, setAnimate] = useState(false);
   const { t } = useTranslation();
+  const [seconds, setSeconds] = useState(30);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
@@ -20,6 +21,17 @@ export const SuccessPage = () => {
     setTimeout(() => setAnimate(true), 100);
   }, []);
 
+  useEffect(() => {
+    if (seconds === 0) {
+      window.location.href = "/";
+      return;
+    }
+
+    const timer = setTimeout(() => setSeconds(seconds - 1), 1000);
+
+    return () => clearTimeout(timer);
+  }, [seconds]);
+
   return (
     <Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4">
       <Paper
@@ -132,6 +144,30 @@ export const SuccessPage = () => {
           </Box>
         )}
 
+        {/* Return button */}
+        <Box
+          sx={{
+            mb: 3,
+            transition: "all 0.5s ease-in-out 0.4s",
+            transform: animate ? "translateY(0)" : "translateY(20px)",
+            opacity: animate ? 1 : 0,
+          }}
+        >
+          <Button
+            href="/"
+            variant="contained"
+            color="primary"
+            sx={{
+              fontWeight: "bold",
+              fontSize: "1.25rem",
+              py: 3,
+              px: 2,
+            }}
+          >
+            {seconds + " " + t("return-to-homepage")}
+          </Button>
+        </Box>
+
         {/* Additional Info */}
         <Box
           sx={{