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 ( - - - } /> - } /> - - +
+ +
+ + } /> + } /> + +
+
+ +
); } diff --git a/frontend/src/assets/Portfolio-QR-Code.png b/frontend/src/assets/Portfolio-QR-Code.png new file mode 100644 index 0000000..f3feb29 Binary files /dev/null and b/frontend/src/assets/Portfolio-QR-Code.png differ 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 ( + + ); +}; 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 = () => { -
+
{ 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 ( -
+