feat(website): create footer component

semaphore-protocol · Oct 20, 2023 · 026dbde · 026dbde
1 parent 7ca4fb9
commit 026dbde
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 9 deletions.
diff --git a/apps/website/public/semaphore-icon.svg b/apps/website/public/semaphore-icon.svg
diff --git a/apps/website/src/components/Container.tsx b/apps/website/src/components/Container.tsx
@@ -1,11 +1,13 @@
 import { Container as _Container, ContainerProps } from "@chakra-ui/react"
+import Footer from "./Footer"
 import Navbar from "./Navbar"
 
 export default function Container({ children }: ContainerProps) {
     return (
         <_Container maxW="1440px" px="20">
             <Navbar />
             {children}
+            <Footer />
         </_Container>
     )
 }
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
@@ -0,0 +1,59 @@
+import { Divider, Heading, HStack, Image, Link, Text, VStack } from "@chakra-ui/react"
+import IconArrowUpRight from "../icons/IconArrowUpRight"
+import IconDiscord from "../icons/IconDiscord"
+
+export default function Footer() {
+    return (
+        <VStack py="7" justify="space-between" h="611px" pt="28" pb="10">
+            <Image htmlWidth="79px" src="./semaphore-icon.svg" alt="Semaphore logo" />
+            <HStack fontSize="18px" spacing="10">
+                <Link href="/projects">
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Projects
+                    </Heading>
+                </Link>
+                <Link href="/learn">
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Learn
+                    </Heading>
+                </Link>
+                <Link href="/build">
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Build
+                    </Heading>
+                </Link>
+                <Link href="https://docs.semaphore.pse.dev" isExternal>
+                    <HStack spacing="3">
+                        <Heading fontSize="18px" fontWeight="normal">
+                            Documentation
+                        </Heading>
+                        <IconArrowUpRight width="10px" mb={1} />
+                    </HStack>
+                </Link>
+                <Link href="https://github.com/semaphore-protocol" isExternal>
+                    <HStack spacing="3">
+                        <Heading fontSize="18px" fontWeight="normal">
+                            Github
+                        </Heading>
+                        <IconArrowUpRight width="10px" mb={1} />
+                    </HStack>
+                </Link>
+            </HStack>
+
+            <Divider />
+
+            <Link href="https://semaphore.pse.dev/discord" isExternal>
+                <HStack>
+                    <IconDiscord width="24px" />
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Discord
+                    </Heading>
+                </HStack>
+            </Link>
+
+            <Text fontSize="14px" color="text.500">
+                Copyright © 2023 Ethereum Foundation
+            </Text>
+        </VStack>
+    )
+}
diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { HStack, Image, Link } from "@chakra-ui/react"
+import { Heading, HStack, Image, Link } from "@chakra-ui/react"
 import { usePathname } from "next/navigation"
 import IconArrowUpRight from "../icons/IconArrowUpRight"
 
@@ -16,29 +16,43 @@ export default function Navbar() {
                     variant="navlink"
                     borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
                 >
-                    Projects
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Projects
+                    </Heading>
                 </Link>
                 <Link
                     href="/learn"
                     variant="navlink"
                     borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
                 >
-                    Learn
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Learn
+                    </Heading>
                 </Link>
                 <Link
                     href="/build"
                     variant="navlink"
                     borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
                 >
-                    Build
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Build
+                    </Heading>
                 </Link>
                 <Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
-                    Documentation
-                    <IconArrowUpRight width="10px" ml={3} mb={1} />
+                    <HStack spacing="3">
+                        <Heading fontSize="18px" fontWeight="normal">
+                            Documentation
+                        </Heading>
+                        <IconArrowUpRight width="10px" mb={1} />
+                    </HStack>
                 </Link>
                 <Link href="https://github.com/semaphore-protocol" variant="navlink" isExternal>
-                    Github
-                    <IconArrowUpRight width="10px" ml={3} mb={1} />
+                    <HStack spacing="3">
+                        <Heading fontSize="18px" fontWeight="normal">
+                            Github
+                        </Heading>
+                        <IconArrowUpRight width="10px" mb={1} />
+                    </HStack>
                 </Link>
             </HStack>
         </HStack>

diff --git a/apps/website/src/styles/index.ts b/apps/website/src/styles/index.ts
@@ -9,7 +9,7 @@ const outfit = Outfit({ subsets: ["latin"] })
 const config = {
     fonts: {
         heading: outfit.style.fontFamily,
-        body: outfit.style.fontFamily
+        body: "DM Sans, sans-serif"
     },
     colors,
     styles,