From a6232e84bb0c2f6a08b3727498da9cab5c7df523 Mon Sep 17 00:00:00 2001
From: Igor <github@bolado.dev>
Date: Sun, 17 Nov 2024 21:36:47 +0100
Subject: [PATCH 1/4] Add maxLength attribute to build name input for better
 user input control

---
 frontend/src/pages/build/builder.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/build/builder.jsx b/frontend/src/pages/build/builder.jsx
index 4d16889..b41db21 100644
--- a/frontend/src/pages/build/builder.jsx
+++ b/frontend/src/pages/build/builder.jsx
@@ -246,6 +246,7 @@ function Builder() {
               type="text"
               value={build.name}
               placeholder="Enter build name"
+              maxLength={25}
               onChange={(e) =>
                 setBuild((prev) => ({ ...prev, name: e.target.value }))
               }

From 8187bd50e3c9a1f9f6529964ff2e2a88c2467dd4 Mon Sep 17 00:00:00 2001
From: Igor <github@bolado.dev>
Date: Mon, 18 Nov 2024 21:12:23 +0100
Subject: [PATCH 2/4] Rename GlobalHeader to GlobalHeaderAndFooter and add
 GlobalFooter component for enhanced layout

---
 ...lobal-header.jsx => global-components.jsx} | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)
 rename frontend/src/components/{global-header.jsx => global-components.jsx} (88%)

diff --git a/frontend/src/components/global-header.jsx b/frontend/src/components/global-components.jsx
similarity index 88%
rename from frontend/src/components/global-header.jsx
rename to frontend/src/components/global-components.jsx
index 0ed4f0a..f76b4ca 100644
--- a/frontend/src/components/global-header.jsx
+++ b/frontend/src/components/global-components.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Link, Outlet, useLoaderData } from "react-router-dom";
 
-const GlobalHeader = () => {
+const GlobalHeaderAndFooter = () => {
   // get loader data from the router
   const logged = useLoaderData();
   return (
@@ -23,11 +23,12 @@ const GlobalHeader = () => {
         )}
       </header>
       <Outlet />
+      <GlobalFooter />
     </>
   );
 };
 
-export default GlobalHeader;
+export default GlobalHeaderAndFooter;
 
 // discord button
 const DiscordButton = () => {
@@ -71,3 +72,20 @@ const ProfileButton = () => {
     </svg>
   );
 };
+
+const GlobalFooter = () => {
+  return (
+    <footer className="p-3 bg-slate-500/10">
+      <p className="text-center text-sm text-gray-500">
+        Made with ❤️ by{" "}
+        <a href="https://github.com/bolado" className="text-blue-500">
+          bolado
+        </a>{" "}
+        -{" "}
+        <a href="buymeacoffee.com/bolado" className="text-blue-500">
+          Buy me a coffee ☕
+        </a>
+      </p>
+    </footer>
+  );
+};

From cfc150ca5162c6ac43d49ff2385a1b680e34caf1 Mon Sep 17 00:00:00 2001
From: Igor <github@bolado.dev>
Date: Mon, 18 Nov 2024 21:12:43 +0100
Subject: [PATCH 3/4] Refactor layout by replacing GlobalHeader with
 GlobalHeaderAndFooter and enhance App component with a background video for
 improved user experience

---
 frontend/src/index.jsx     |  4 ++--
 frontend/src/pages/App.jsx | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 70a59dc..78b5e63 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -12,13 +12,13 @@ import reportWebVitals from "./reportWebVitals";
 import ErrorPage from "./pages/error-page";
 import Builder from "./pages/build/builder";
 import Callback from "./pages/Callback";
-import GlobalHeader from "./components/global-header";
+import GlobalHeaderAndFooter from "./components/global-components";
 import { hasTokenCookie } from "./utils/queries";
 import Profile from "./pages/profile";
 
 const router = createBrowserRouter([
   {
-    element: <GlobalHeader />,
+    element: <GlobalHeaderAndFooter />,
     loader: async () => {
       return hasTokenCookie();
     },
diff --git a/frontend/src/pages/App.jsx b/frontend/src/pages/App.jsx
index 47a55c4..e02d490 100644
--- a/frontend/src/pages/App.jsx
+++ b/frontend/src/pages/App.jsx
@@ -3,7 +3,15 @@ import ButtonPrimary from "../components/button-primary";
 
 function App() {
   return (
-    <div className="flex items-center	justify-center flex-col gap-4 min-h-[100vh]">
+    <div className="flex items-center	justify-center flex-col gap-4 min-h-[calc(100vh-theme(spacing.24))]">
+      <video
+        className="max-w-[2560px] h-screen fixed left-1/2 top-0 -translate-x-1/2 object-cover -z-10"
+        src="https://hive-fn.qpyou.cn/webdev/smon/20231103_124021_SX6QW4yK1o.mp4"
+        muted
+        playsInline
+        autoPlay
+        loop
+      />
       <img
         src={`https://cdn.streamelements.com/infinity/summoners/logo_lost_centuria.png`}
         className="max-w-[50vh] h-auto"

From b6dc8b86e1cb87f2dba3934807ca8956bd88ff12 Mon Sep 17 00:00:00 2001
From: Igor <github@bolado.dev>
Date: Mon, 18 Nov 2024 21:14:18 +0100
Subject: [PATCH 4/4] Update link in GlobalHeaderAndFooter to point to the home
 page for improved navigation

---
 frontend/src/components/global-components.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/global-components.jsx b/frontend/src/components/global-components.jsx
index f76b4ca..3a8e910 100644
--- a/frontend/src/components/global-components.jsx
+++ b/frontend/src/components/global-components.jsx
@@ -7,7 +7,7 @@ const GlobalHeaderAndFooter = () => {
   return (
     <>
       <header className="flex justify-between items-center p-3 bg-slate-500/10">
-        <a href="/build/new">
+        <a href="/">
           <h1 className="cinzel text-xl text-bold">
             SW:Lost Centuria Rune Builder
           </h1>