added page footer

frontend/src/App.css

@@ -6,3 +6,7 @@ body,
   height: 100%;
   margin: 0;
 }
+
+body.success-bg {
+  background: linear-gradient(135deg, #0f172a, #111827);
+}

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>
   );
 }
 

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>
+  );
+};

frontend/src/components/TextField.tsx

@@ -0,0 +1,31 @@
+import type { TextFieldProps } from "../config/interfaces.config";
+import { FormControl, FormLabel, Input } from "@mui/joy";
+
+export const TextField = ({
+  label,
+  type = "text",
+  required,
+  errors,
+  value,
+  onBlur,
+  onChange,
+  slotProps,
+  afterInput,
+}: TextFieldProps) => (
+  <FormControl required={required}>
+    <FormLabel>{label}</FormLabel>
+    <Input
+      value={value ?? ""}
+      onBlur={onBlur}
+      onChange={(e) => onChange(e.target.value)}
+      type={type}
+      variant="soft"
+      sx={{ borderRadius: "10px" }}
+      slotProps={slotProps}
+    />
+    {afterInput}
+    {errors[0] ? (
+      <span className="text-red-500 text-sm">{errors[0]}</span>
+    ) : null}
+  </FormControl>
+);

frontend/src/config/interfaces.config.ts

@@ -1,5 +1,6 @@
 import z from "zod";
 import validator from "validator";
+import type { ReactNode } from "react";
 
 export interface FormData {
   firstName: string;
@@ -23,6 +24,18 @@ export interface Message {
   text: string;
 }
 
+export type TextFieldProps = {
+  label: string;
+  type?: "text" | "email" | "tel" | "number";
+  required?: boolean;
+  errors: string[];
+  onBlur: () => void;
+  onChange: (value: string) => void;
+  value: string | number | null | undefined;
+  slotProps?: { input?: Record<string, unknown> };
+  afterInput?: ReactNode;
+};
+
 export const createFormSchema = (
   t: (key: string) => string,
   invoice: boolean,

frontend/src/pages/MainForm.tsx

@@ -28,6 +28,7 @@ import { useForm } from "@tanstack/react-form";
 import { changeTranslation } from "../utils/uxFncs";
 import { createFormSchema } from "../config/interfaces.config";
 import type { ZodObject, ZodRawShape } from "zod";
+import { TextField } from "../components/TextField";
 
 const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
 const PAYMENT_LABELS: Record<string, string> = {
@@ -183,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"
@@ -252,100 +253,64 @@ export const MainForm = () => {
                 name="firstName"
                 validators={makeFieldValidator("firstName")}
               >
-                {(field) => {
-                  const errors = getErrors(field);
-                  return (
-                    <FormControl required>
-                      <FormLabel>{t("first-name")}</FormLabel>
-                      <Input
-                        value={field.state.value ?? ""}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        variant="soft"
-                        sx={{ borderRadius: "10px" }}
-                      />
-                      {errors.length > 0 && (
-                        <span className="text-red-500 text-sm">
-                          {errors[0]}
-                        </span>
-                      )}
-                    </FormControl>
-                  );
-                }}
+                {(field) => (
+                  <TextField
+                    label={t("first-name")}
+                    required
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={field.handleChange}
+                    errors={getErrors(field)}
+                  />
+                )}
               </Field>
 
               <Field
                 name="lastName"
                 validators={makeFieldValidator("lastName")}
               >
-                {(field) => {
-                  const errors = getErrors(field);
-                  return (
-                    <FormControl required>
-                      <FormLabel>{t("last-name")}</FormLabel>
-                      <Input
-                        value={field.state.value ?? ""}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        variant="soft"
-                        sx={{ borderRadius: "10px" }}
-                      />
-                      {errors.length > 0 && (
-                        <span className="text-red-500 text-sm">
-                          {errors[0]}
-                        </span>
-                      )}
-                    </FormControl>
-                  );
-                }}
+                {(field) => (
+                  <TextField
+                    label={t("last-name")}
+                    required
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={field.handleChange}
+                    errors={getErrors(field)}
+                  />
+                )}
               </Field>
             </div>
 
             <Field name="email" validators={makeFieldValidator("email")}>
-              {(field) => {
-                const errors = getErrors(field);
-                return (
-                  <FormControl required>
-                    <FormLabel>{t("email")}</FormLabel>
-                    <Input
-                      value={field.state.value ?? ""}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      variant="soft"
-                      type="email"
-                      sx={{ borderRadius: "10px" }}
-                    />
-                    {errors.length > 0 && (
-                      <span className="text-red-500 text-sm">{errors[0]}</span>
-                    )}
-                  </FormControl>
-                );
-              }}
+              {(field) => (
+                <TextField
+                  label={t("email")}
+                  type="email"
+                  required
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={field.handleChange}
+                  errors={getErrors(field)}
+                />
+              )}
             </Field>
 
             <Field
               name="phoneNumber"
               validators={makeFieldValidator("phoneNumber")}
             >
-              {(field) => {
-                const errors = getErrors(field);
-                return (
-                  <FormControl required>
-                    <FormLabel>{t("phone-number")}</FormLabel>
-                    <Input
-                      value={field.state.value ?? ""}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      variant="soft"
-                      type="tel"
-                      sx={{ borderRadius: "10px" }}
-                    />
-                    {errors.length > 0 && (
-                      <span className="text-red-500 text-sm">{errors[0]}</span>
-                    )}
-                  </FormControl>
-                );
-              }}
+              {(field) => (
+                <TextField
+                  label={t("phone-number")}
+                  type="tel"
+                  required
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={field.handleChange}
+                  errors={getErrors(field)}
+                />
+              )}
             </Field>
 
             {/* Tickets + Invoice toggle */}
@@ -414,26 +379,16 @@ export const MainForm = () => {
                   name="companyName"
                   validators={makeFieldValidator("companyName")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("company-name")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("company-name")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <div className="grid grid-cols-2 gap-3">
@@ -441,156 +396,96 @@ export const MainForm = () => {
                     name="cmpFirstName"
                     validators={makeFieldValidator("cmpFirstName")}
                   >
-                    {(field) => {
-                      const errors = getErrors(field);
-                      return (
-                        <FormControl required>
-                          <FormLabel>{t("first-name")}</FormLabel>
-                          <Input
-                            value={field.state.value ?? ""}
-                            onBlur={field.handleBlur}
-                            onChange={(e) => field.handleChange(e.target.value)}
-                            variant="soft"
-                            sx={{ borderRadius: "10px" }}
-                          />
-                          {errors.length > 0 && (
-                            <span className="text-red-500 text-sm">
-                              {errors[0]}
-                            </span>
-                          )}
-                        </FormControl>
-                      );
-                    }}
+                    {(field) => (
+                      <TextField
+                        label={t("first-name")}
+                        required
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={field.handleChange}
+                        errors={getErrors(field)}
+                      />
+                    )}
                   </Field>
 
                   <Field
                     name="cpmLastName"
                     validators={makeFieldValidator("cpmLastName")}
                   >
-                    {(field) => {
-                      const errors = getErrors(field);
-                      return (
-                        <FormControl required>
-                          <FormLabel>{t("last-name")}</FormLabel>
-                          <Input
-                            value={field.state.value ?? ""}
-                            onBlur={field.handleBlur}
-                            onChange={(e) => field.handleChange(e.target.value)}
-                            variant="soft"
-                            sx={{ borderRadius: "10px" }}
-                          />
-                          {errors.length > 0 && (
-                            <span className="text-red-500 text-sm">
-                              {errors[0]}
-                            </span>
-                          )}
-                        </FormControl>
-                      );
-                    }}
+                    {(field) => (
+                      <TextField
+                        label={t("last-name")}
+                        required
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={field.handleChange}
+                        errors={getErrors(field)}
+                      />
+                    )}
                   </Field>
                 </div>
 
                 <Field name="street" validators={makeFieldValidator("street")}>
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("street")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("street")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <Field
                   name="postalCode"
                   validators={makeFieldValidator("postalCode")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("postal-code")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("postal-code")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <Field
                   name="cpmPhoneNumber"
                   validators={makeFieldValidator("cpmPhoneNumber")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("phone-number")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          type="tel"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("phone-number")}
+                      type="tel"
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <Field
                   name="cpmEmail"
                   validators={makeFieldValidator("cpmEmail")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("email")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          type="email"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("email")}
+                      type="email"
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
               </div>
             )}

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={{

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: "
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -33,6 +33,7 @@
     "set-username-headline": "No user selected",
     "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!"
+    "email-error": "You have to enter a valid E-Mail adress!",
+    "phone-error": "You have to enter a vaild phone number!",
+    "footer-headline": "This system was fully designed and developed by Theis Gaedigk. - Portfolio: "
 }