closes #178 links to nav

components/layout/FooterContent.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex } from "@chakra-ui/react";
-import { Trans } from "@lingui/macro";
 import { DiscordIcon } from "lib/assets/icons";
 import { useMyTheme } from "lib/useMyTheme";
 import Link from "next/link";
 import { FaGithub } from "react-icons/fa";
+import { FiInfo } from "react-icons/fi";
 
 const FooterContent: React.FC = () => {
   const { themeColorHex: themeColor } = useMyTheme();
@@ -19,21 +19,12 @@ const FooterContent: React.FC = () => {
       bg={themeColor}
       color="black"
     >
-      <Flex flexDirection="column" fontSize="1.2rem">
-        <Box my="1em">
-          <Link href="/about">
-            <a>
-              <Trans>About</Trans>
-            </a>
-          </Link>
-        </Box>
-        <Link href="/links">
+      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
+        <Link href="/about">
           <a>
-            <Trans>External links</Trans>
+            <Box as={FiInfo} size="50px" m="1em" />
           </a>
         </Link>
-      </Flex>
-      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
         <a href="https://discord.gg/sendou">
           <DiscordIcon h="50px" w="50px" m="1em" />
         </a>

components/layout/IconNavBar.tsx

@@ -71,6 +71,7 @@ export const navIcons: {
       { code: "plus/faq", displayName: t`FAQ` },
     ],
   },
+  { code: "links", displayName: t`External links`, menuItems: [] },
 ];
 
 const IconNavBar = () => {

pages/index.tsx

@@ -71,6 +71,12 @@ const Home = () => {
             and FAQ.
           </Trans>
         </PageInfoSection>
+        <PageInfoSection location="links" title={t`External links`}>
+          <Trans>
+            There are a lot of useful Splatoon resouces. This page collects them
+            together.
+          </Trans>
+        </PageInfoSection>
       </Container>
       <Box textAlign="center" mt={24} fontSize="sm" color={gray}>
         <Trans>