Add footer and privacy policy page

Author: LanesGood

src/components/page-footer.js

@@ -0,0 +1,54 @@
+import { Box, Container, Flex, Text } from '@chakra-ui/react'
+
+import NavLink from '../components/Link'
+
+const Links = [
+  { url: '/about', name: 'About' },
+  { url: '/guide', name: 'User guide' },
+  { url: '/developers', name: 'Developers' },
+  { url: '/privacy', name: 'Privacy Policy' },
+]
+
+export default function PageFooter() {
+  return (
+    <Box bg='brand.700' color='white' as='footer'>
+      <Container
+        color='white'
+        maxW='container.xl'
+        position='relative'
+        display='flex'
+        justifyContent={['center', null, 'space-between']}
+        flexDirection={['column', null, 'row']}
+      >
+        <Flex
+          as='nav'
+          alignItems={'center'}
+          gap={[0, null, 8]}
+          flexDirection={['column', null, 'row']}
+        >
+          <Text color='white' fontSize='xs' fontFamily='mono'>
+            osm_teams
+          </Text>
+          {Links.map((link) => (
+            <NavLink key={link.url} href={link.url} passHref color='white'>
+              <Text color='white' fontSize='xs' textTransform='uppercase'>
+                {link.name}
+              </Text>
+            </NavLink>
+          ))}
+        </Flex>
+        <Text
+          color='white'
+          fontSize='xs'
+          fontFamily='mono'
+          lineHeight='2rem'
+          textAlign='center'
+        >
+          <a href='https://developmentseed.org' style={{ color: 'white' }}>
+            &copy; Development Seed {new Date().getFullYear()}
+          </a>
+        </Text>
+      </Container>
+    </Box>
+  )
+}

src/pages/_app.js

@@ -13,6 +13,7 @@ import { SessionProvider } from 'next-auth/react'
 
 import theme from '../styles/theme'
 import PageHeader from '../components/page-header'
+import PageFooter from '../components/page-footer'
 import ErrorBoundary from '../components/error-boundary'
 const BASE_PATH = process.env.BASE_PATH || ''
 
@@ -31,7 +32,7 @@ export default function App({
         <Box
           display='grid'
           position='relative'
-          gridTemplateRows={'4rem 1fr'}
+          gridTemplateRows={'4rem 1fr auto'}
           minHeight='100vh'
           margin='0'
           padding='0'
@@ -40,6 +41,7 @@ export default function App({
           <ErrorBoundary>
             <Component {...pageProps} />
           </ErrorBoundary>
+          <PageFooter />
         </Box>
         <ToastContainer position='bottom-right' />
       </SessionProvider>