feat: add version footer and fix router PE-5161

src/App.tsx

@@ -3,13 +3,13 @@ import { GiftForm } from "./GiftForm";
 import { RouterPage } from "./components/RouterPage";
 import { useErrorMessage } from "./hooks/useErrorMessage";
 
-import { HashRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
 function App() {
   const [errorMessage, setErrorMessage] = useErrorMessage();
 
   const router = (
-    <Router basename="/turbo-app">
+    <Router basename={`${import.meta.env.BASE_URL}`}>
       <Routes>
         <Route
           path="/gift"

src/components/RouterPage.css

@@ -0,0 +1,18 @@
+#version-footer {
+  font-family: "Wavehaus-Bold";
+  font-size: 14px;
+  letter-spacing: 0.82px;
+  padding-top: 4rem;
+
+  @media (min-width: 800px) {
+    font-size: 16px;
+  }
+
+  @media (min-width: 1200px) {
+    font-size: 18px;
+  }
+
+  justify-self: flex-end;
+  align-self: flex-end;
+  text-align: right;
+}

src/components/RouterPage.tsx

@@ -1,4 +1,5 @@
 import { LogoHeader } from "./LogoHeader";
+import "./RouterPage.css";
 
 interface RouterPageProps {
   page: JSX.Element;
@@ -10,6 +11,7 @@ export function RouterPage({ page, errorMessage }: RouterPageProps) {
     <>
       <LogoHeader errorMessage={errorMessage} />
       {page}
+      <span id="version-footer">v{import.meta.env.PACKAGE_VERSION}</span>
     </>
   );
 }