ultimate-dominion · ECWireless · Jun 4, 2024 · May 30, 2024 · May 30, 2024 · May 31, 2024
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -32,6 +32,7 @@
     "framer-motion": "^11.2.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "rxjs": "7.5.5",
     "viem": "2.9.20",

diff --git a/packages/client/public/images/raidguild.webp b/packages/client/public/images/raidguild.webp
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,7 +1,20 @@
+import { Box } from '@chakra-ui/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
 import AppRoutes from './Routes';
 
-export const App: React.FC = () => {
-  return <AppRoutes />;
+export const App = (): JSX.Element => {
+  return (
+    <Router>
+      <Box px={{ base: 8, sm: 12, md: 20 }}>
+        <Header />
+        <AppRoutes />
+        <Footer />
+      </Box>
+    </Router>
+  );
 };
 
 export default App;
diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -1,18 +1,16 @@
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import { CharacterCreation } from './components/CharacterCreation';
 import { Welcome } from './pages/Welcome';
 import { World } from './pages/World';
 
 const AppRoutes: React.FC = () => {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Welcome />} />
-        <Route path="/world" element={<World />} />
-        <Route path="/character-creation" element={<CharacterCreation />} />
-      </Routes>
-    </Router>
+    <Routes>
+      <Route path="/" element={<Welcome />} />
+      <Route path="/world" element={<World />} />
+      <Route path="/character-creation" element={<CharacterCreation />} />
+    </Routes>
   );
 };
 

diff --git a/packages/client/src/components/Footer.tsx b/packages/client/src/components/Footer.tsx
@@ -0,0 +1,103 @@
+import { Grid, GridItem, HStack, Link, Stack, VStack } from '@chakra-ui/react';
+import { FaDiscord, FaTwitter } from 'react-icons/fa';
+
+export const Footer = (): JSX.Element => {
+  return (
+    <HStack alignItems="center" h="150px">
+      <Grid
+        alignItems="center"
+        templateColumns="repeat(4, 1fr)"
+        h="90px"
+        w="100%"
+      >
+        <GridItem colSpan={{ base: 3, sm: 2, md: 3 }}>
+          <HStack spacing={{ base: 4, md: 10 }}>
+            <Stack
+              direction={{ base: 'column', md: 'row' }}
+              spacing={{ base: 4, md: 10 }}
+            >
+              <Link
+                alignSelf="start"
+                borderBottom="2px solid"
+                borderColor="lightgrey"
+                fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+                pb={1}
+                _hover={{
+                  borderColor: 'grey',
+                  textDecoration: 'none',
+                }}
+              >
+                About
+              </Link>
+              <Link
+                alignSelf="start"
+                borderBottom="2px solid"
+                borderColor="lightgrey"
+                fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+                pb={1}
+                _hover={{
+                  borderColor: 'grey',
+                  textDecoration: 'none',
+                }}
+              >
+                Guild Info
+              </Link>
+            </Stack>
+            <Stack
+              direction={{ base: 'column', md: 'row' }}
+              spacing={{ base: 4, md: 10 }}
+            >
+              <Link
+                alignSelf="start"
+                borderBottom="2px solid"
+                borderColor="lightgrey"
+                fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+                pb={1}
+                _hover={{
+                  borderColor: 'grey',
+                  textDecoration: 'none',
+                }}
+              >
+                Map Info
+              </Link>
+              <Link
+                alignSelf="start"
+                borderBottom="2px solid"
+                borderColor="lightgrey"
+                fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+                pb={1}
+                _hover={{
+                  borderColor: 'grey',
+                  textDecoration: 'none',
+                }}
+              >
+                Create Map
+              </Link>
+            </Stack>
+          </HStack>
+        </GridItem>
+        <GridItem colSpan={{ base: 1, sm: 2, md: 1 }} h="100%">
+          <VStack
+            alignItems="end"
+            h="100%"
+            justifyContent={{ base: 'start', md: 'center' }}
+          >
+            <Stack
+              alignItems="center"
+              direction={{ base: 'column', sm: 'row' }}
+              spacing={{ base: 3, md: 10 }}
+            >
+              <Link>
+                <FaDiscord />
+              </Link>
+              <Link>
+                <FaTwitter />
+              </Link>
+              <Link fontWeight={700}>T&C</Link>
+            </Stack>
+          </VStack>
+        </GridItem>
+      </Grid>
+    </HStack>
+  );
+};
diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
@@ -0,0 +1,22 @@
+import { Box, Heading, Stack } from '@chakra-ui/react';
+import { useLocation } from 'react-router-dom';
+
+const PAGES_WITHOUT_HEADER = ['/'];
+
+export const Header = (): JSX.Element => {
+  const { pathname } = useLocation();
+
+  if (PAGES_WITHOUT_HEADER.includes(pathname)) {
+    return <Box />;
+  }
+
+  return (
+    <Box>
+      <Stack backgroundColor="lightgray" direction="row" padding="10px">
+        <Heading as="h1" margin="10px" w="50%">
+          Ultimate Dominion
+        </Heading>
+      </Stack>
+    </Box>
+  );
+};
diff --git a/packages/client/src/pages/Welcome.tsx b/packages/client/src/pages/Welcome.tsx
@@ -20,9 +20,7 @@ export const Welcome = (): JSX.Element => {
         mt={{ base: 20, sm: 32 }}
         spacing={{ base: 12, sm: 20 }}
       >
-        <Heading px={4} textAlign="center">
-          Welcome to Ultimate Dominion
-        </Heading>
+        <Heading textAlign="center">Welcome to Ultimate Dominion</Heading>
         <VStack spacing={6} textAlign="center">
           <Text size={{ base: 'xs', sm: 'sm', md: 'md' }}>
             As you awaken, your eyes flutter open to the stark, eerie ambiance

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml