From 1f11a4ecabf99c1d9ee859e981481ac1f510c0b2 Mon Sep 17 00:00:00 2001
From: Theis <theis.gaedigk@icloud.com>
Date: Sun, 24 May 2026 13:50:41 +0200
Subject: [PATCH] added page footer

---
 frontend/src/App.css                       |   4 ++
 frontend/src/App.tsx                       |  18 ++++++---
 frontend/src/assets/Portfolio-QR-Code.png  | Bin 0 -> 4277 bytes
 frontend/src/components/PageFooter.tsx     |  42 +++++++++++++++++++++
 frontend/src/pages/MainForm.tsx            |   2 +-
 frontend/src/pages/SuccessPage.tsx         |   7 +++-
 frontend/src/utils/i18n/locales/de/de.json |   3 +-
 frontend/src/utils/i18n/locales/en/en.json |   3 +-
 8 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/assets/Portfolio-QR-Code.png
 create mode 100644 frontend/src/components/PageFooter.tsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7b53bf9..33d3253 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -6,3 +6,7 @@ body,
   height: 100%;
   margin: 0;
 }
+
+body.success-bg {
+  background: linear-gradient(135deg, #0f172a, #111827);
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b14f593..ece00e3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,15 +2,21 @@ import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { MainForm } from "./pages/MainForm";
 import { SuccessPage } from "./pages/SuccessPage";
+import { PageFooter } from "./components/PageFooter";
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<MainForm />} />
-        <Route path="/success" element={<SuccessPage />} />
-      </Routes>
-    </BrowserRouter>
+    <div className="min-h-screen flex flex-col">
+      <BrowserRouter>
+        <main className="flex-1 flex">
+          <Routes>
+            <Route path="/" element={<MainForm />} />
+            <Route path="/success" element={<SuccessPage />} />
+          </Routes>
+        </main>
+      </BrowserRouter>
+      <PageFooter />
+    </div>
   );
 }
 
diff --git a/frontend/src/assets/Portfolio-QR-Code.png b/frontend/src/assets/Portfolio-QR-Code.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3feb298f55d08eaa3a92f4ae28025e46a72399a
GIT binary patch
literal 4277
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
B>m&dG

literal 0
HcmV?d00001

diff --git a/frontend/src/components/PageFooter.tsx b/frontend/src/components/PageFooter.tsx
new file mode 100644
index 0000000..27af4be
--- /dev/null
+++ b/frontend/src/components/PageFooter.tsx
@@ -0,0 +1,42 @@
+import { Link, Sheet, Typography } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import qrCode from "../assets/Portfolio-QR-Code.png";
+
+export const PageFooter = () => {
+  const { t } = useTranslation();
+
+  return (
+    <footer className="w-full mt-auto px-3 pb-3">
+      <Sheet
+        variant="soft"
+        className="mx-auto w-full max-w-3xl rounded-2xl border border-slate-200/70 bg-white/80 backdrop-blur"
+      >
+        <div className="flex flex-col gap-2 p-2.5 sm:p-3">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <Typography
+              level="title-sm"
+              className="text-slate-800 tracking-wide"
+            >
+              {t("footer-headline")}
+              <Link
+                href="https://portfolio-theis.de/"
+                target="_blank"
+                rel="noreferrer"
+                className="ml-2 inline-flex items-center text-slate-700 underline decoration-slate-300 underline-offset-4 hover:text-slate-900"
+              >
+                portfolio-theis.de
+              </Link>
+            </Typography>
+            <Typography level="body-sm" className="text-slate-500">
+              <img
+                src={qrCode}
+                alt="https://portfolio-theis.de/"
+                className="h-20 w-20 rounded-md border border-slate-200 object-contain"
+              />
+            </Typography>
+          </div>
+        </div>
+      </Sheet>
+    </footer>
+  );
+};
diff --git a/frontend/src/pages/MainForm.tsx b/frontend/src/pages/MainForm.tsx
index 2c86891..36a5df2 100644
--- a/frontend/src/pages/MainForm.tsx
+++ b/frontend/src/pages/MainForm.tsx
@@ -184,7 +184,7 @@ export const MainForm = () => {
 
       <QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
 
-      <div className="min-h-screen w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
+      <div className="flex-1 w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
         <Sheet
           variant="plain"
           className="w-full"
diff --git a/frontend/src/pages/SuccessPage.tsx b/frontend/src/pages/SuccessPage.tsx
index c991964..87ada96 100644
--- a/frontend/src/pages/SuccessPage.tsx
+++ b/frontend/src/pages/SuccessPage.tsx
@@ -16,6 +16,11 @@ export const SuccessPage = () => {
     setTickets(parseInt(params.get("tickets") ?? "0", 10));
     // Small delay so the CSS transition actually plays
     setTimeout(() => setAnimate(true), 100);
+
+    document.body.classList.add("success-bg");
+    return () => {
+      document.body.classList.remove("success-bg");
+    };
   }, []);
 
   useEffect(() => {
@@ -36,7 +41,7 @@ export const SuccessPage = () => {
   });
 
   return (
-    <div className="min-h-screen w-full flex items-center justify-center bg-linear-to-br from-slate-800 to-slate-900 p-4">
+    <div className="flex-1 w-full flex items-center justify-center p-4">
       <Sheet
         variant="plain"
         sx={{
diff --git a/frontend/src/utils/i18n/locales/de/de.json b/frontend/src/utils/i18n/locales/de/de.json
index 185e529..605df4c 100644
--- a/frontend/src/utils/i18n/locales/de/de.json
+++ b/frontend/src/utils/i18n/locales/de/de.json
@@ -33,5 +33,6 @@
     "set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen.",
     "name-error": "Sie müssen einen Namen eingeben!",
     "email-error": "Sie müssen eine gültige E-Mail Adresse eingeben!",
-    "phone-error": "Sie müssen eine gültige Telefonnummer eingeben!"
+    "phone-error": "Sie müssen eine gültige Telefonnummer eingeben!",
+    "footer-headline": "Dieses System wurde vollständig konzipiert und entwickelt von Theis Gaedigk. - Portfolio: "
 }
\ No newline at end of file
diff --git a/frontend/src/utils/i18n/locales/en/en.json b/frontend/src/utils/i18n/locales/en/en.json
index 24f669e..8c2e961 100644
--- a/frontend/src/utils/i18n/locales/en/en.json
+++ b/frontend/src/utils/i18n/locales/en/en.json
@@ -34,5 +34,6 @@
     "set-username-text": "To start the ticket sale, you must select a user first from the top left.",
     "name-error": "You have to enter a name!",
     "email-error": "You have to enter a valid E-Mail adress!",
-    "phone-error": "You have to enter a vaild phone number!"
+    "phone-error": "You have to enter a vaild phone number!",
+    "footer-headline": "This system was fully designed and developed by Theis Gaedigk. - Portfolio: "
 }
\ No newline at end of file