Refactor layout by replacing GlobalHeader with GlobalHeaderAndFooter …

…and enhance App component with a background video for improved user experience
Bolado · Nov 18, 2024 · cfc150c · cfc150c
1 parent 8187bd5
commit cfc150c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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"