feat(components): add footer

CHANGELOG.md

@@ -38,7 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Features
-
+- [#62](https://github.com/alleslabs/celatone-frontend/pull/62) Add footer
 - [#59](https://github.com/alleslabs/celatone-frontend/pull/58) Wireup code name,description, and cta section
 - [#53](https://github.com/alleslabs/celatone-frontend/pull/53) Show contract description in contract details page
 - [#58](https://github.com/alleslabs/celatone-frontend/pull/58) Wireup top section in contract details page

src/lib/layout/Footer.tsx

@@ -0,0 +1,90 @@
+import { Flex, Text, Icon, Button } from "@chakra-ui/react";
+// import Image from "next/image";
+import Link from "next/link";
+import { BiUserVoice } from "react-icons/bi";
+import { BsMedium, BsGithub, BsTwitter, BsTelegram } from "react-icons/bs";
+import { IoSparklesSharp } from "react-icons/io5";
+
+const Footer = () => {
+  return (
+    <Flex
+      as="footer"
+      align="center"
+      justifyContent="space-between"
+      px={12}
+      py={4}
+      mx={1}
+    >
+      <Flex direction="row" gap={1} align="center">
+        <Link href="https://github.com/alleslabs" target="_blank">
+          <Button variant="ghost" size="xs">
+            <Icon as={BsGithub} width="16px" height="16px" color="gray.600" />
+          </Button>
+        </Link>
+        <Link href="https://twitter.com/celatone_" target="_blank">
+          <Button variant="ghost" size="xs">
+            <Icon as={BsTwitter} width="16px" height="16px" color="gray.600" />
+          </Button>
+        </Link>
+        <Link href="https://medium.com/alles-labs" target="_blank">
+          <Button variant="ghost" size="xs">
+            <Icon as={BsMedium} width="16px" height="16px" color="gray.600" />
+          </Button>
+        </Link>
+        <Link href="https://t.me/celatone" target="_blank">
+          <Button variant="ghost" size="xs">
+            <Icon as={BsTelegram} width="16px" height="16px" color="gray.600" />
+          </Button>
+        </Link>
+        <Link href="https://alleslabs.canny.io/celatone" target="_blank">
+          <Button variant="ghost" size="xs">
+            <Flex gap={1} align="center">
+              <Icon
+                as={BiUserVoice}
+                width="18px"
+                height="18px"
+                color="gray.600"
+              />
+              <Text variant="body3" color="gray.600">
+                Feedback
+              </Text>
+            </Flex>
+          </Button>
+        </Link>
+      </Flex>
+      <Flex />
+      <Flex direction="column" alignItems="end" minW="60px">
+        <Button
+          variant="ghost"
+          size="xs"
+          sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
+        >
+          <Link href="https://twitter.com/alleslabs">
+            <Flex
+              gap={1}
+              align="center"
+              sx={{ _hover: { "> svg": { opacity: "100" } } }}
+            >
+              <Icon
+                as={IoSparklesSharp}
+                width="16px"
+                height="16px"
+                color="gray.600"
+                opacity="0"
+                transition="all .25s ease-in-out"
+              />
+              <Text variant="body3" color="gray.600">
+                Made by
+              </Text>
+              <Text variant="body3" color="primary.main">
+                Alles Labs
+              </Text>
+            </Flex>
+          </Link>
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Footer;

src/lib/layout/Header.tsx

@@ -26,6 +26,7 @@ const Header = () => {
       align="center"
       justifyContent="space-between"
       px={6}
+      mb={1}
     >
       <Link href="/">
         <Image

src/lib/layout/index.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 
 import { scrollTop } from "lib/utils/scrollTop";
 
+import Footer from "./Footer";
 import Header from "./Header";
 import Navbar from "./Navbar";
 
@@ -18,25 +19,25 @@ const Layout = ({ children }: LayoutProps) => {
   useEffect(() => {
     scrollTop();
   }, [router.asPath]);
-
   return (
     <Grid
       templateAreas={`"header header"
-    "nav main"`}
+    "nav main" `}
       gridTemplateRows="70px 1fr"
       gridTemplateColumns="224px 1fr"
       h="100vh"
       overflowX="hidden"
       bg="background.main"
     >
-      <GridItem bg="#212121" area="header">
+      <GridItem bg="#212121" area="header" mb="1">
         <Header />
       </GridItem>
-      <GridItem bg="#212121" area="nav" mt="1">
+      <GridItem bg="#212121" area="nav">
         <Navbar />
       </GridItem>
       <GridItem area="main" overflowY="auto" id="content">
-        {children}
+        <div style={{ minHeight: `calc(100vh - 140px)` }}>{children}</div>
+        <Footer />
       </GridItem>
     </Grid>
   );

src/lib/pages/home/index.tsx

@@ -6,7 +6,7 @@ import { RecentActivities } from "./components/RecentActivities";
 
 const Home = () => {
   return (
-    <Box m="1">
+    <Box mx="1">
       <QuickMenu />
       <RecentActivities />
       {/* <PastTransaction /> */}