draft: footer

packages/web/src/App.css

@@ -1,5 +1,9 @@
 .App {
   text-align: center;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 60px;
 }
 
 .App-logo {
@@ -39,10 +43,6 @@
 
 html, body, #root {
   height: 100%;
-  overflow-y: auto;
-}
-
-body {
   margin: 0;
   padding: 0;
 }

packages/web/src/App.jsx

@@ -6,6 +6,7 @@ import Login from "./components/Login/Login";
 import Home from "./components/Home/Home";
 import UpdatePage from "./components/UpdatePage/UpdatePage";
 import Playground from "./components/Playground/Playground";
+import Footer from "./components/Footer/Footer";
 
 import "leaflet/dist/leaflet.css";
 import { AuthContextProvider } from "./context/AuthContext";
@@ -25,14 +26,17 @@ function App() {
 
   return (
     <div className="App">
-      <Routes>
-        <Route path="/update" element={<UpdatePage />} />
-        <Route path="/about" element={<AboutPage />} />
-        <Route path="/" element={<Home />} />
-        <Route path="/:id" element={<Home />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/playground" element={<Playground />} />
-      </Routes>
+      <div className="content-wrapper">
+        <Routes>
+          <Route path="/update" element={<UpdatePage />} />
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="/" element={<Home />} />
+          <Route path="/:id" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/playground" element={<Playground />} />
+        </Routes>
+        <Footer />
+      </div>
     </div>
   );
 }

packages/web/src/components/Footer/Footer.css

@@ -0,0 +1,46 @@
+.footer {
+  padding: 1rem 0;
+  width: 100%;
+  border-top: 1px solid #e7e7e7;
+}
+
+.footer-light {
+  background-color: #f8f9fa;
+  color: #343a40;
+}
+
+.footer-dark {
+  background-color: #282c34;
+  color: #ffffff;
+  border-top-color: #404040;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.footer-light .footer-links a {
+  color: #6c757d;
+}
+
+.footer-light .footer-links a:hover {
+  color: #343a40;
+}
+
+.footer-dark .footer-links a {
+  color: #a0a0a0;
+}
+
+.footer-dark .footer-links a:hover {
+  color: #ffffff;
+} 

packages/web/src/components/Footer/Footer.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box, Container, Text, HStack, Link, useColorModeValue } from '@chakra-ui/react';
+
+const Footer = () => {
+  const bgColor = useColorModeValue('gray.50', 'gray.900');
+  const borderColor = useColorModeValue('gray.200', 'gray.700');
+  const textColor = useColorModeValue('gray.600', 'gray.400');
+  const hoverColor = useColorModeValue('gray.800', 'white');
+
+  return (
+    <Box
+      as="footer"
+      bg={bgColor}
+      borderTop="1px"
+      borderColor={borderColor}
+      py={4}
+      position="fixed"
+      bottom={0}
+      width="100%"
+      zIndex={2}
+    >
+      <Container
+        maxW="container.xl"
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Text color={textColor}>
+          © {new Date().getFullYear()} ZotnFound. All rights reserved.
+        </Text>
+        <HStack spacing={6}>
+          <Link
+            href="/about"
+            color={textColor}
+            _hover={{ color: hoverColor, textDecoration: 'none' }}
+          >
+            About
+          </Link>
+          <Link
+            href="https://github.com/icssc/ZotNFound"
+            isExternal
+            color={textColor}
+            _hover={{ color: hoverColor, textDecoration: 'none' }}
+          >
+            GitHub
+          </Link>
+        </HStack>
+      </Container>
+    </Box>
+  );
+};
+
+export default Footer;