Added banner

components/Banner/Banner.js

@@ -0,0 +1,26 @@
+import { Box, HStack, Stack, Text, useColorModeValue } from '@chakra-ui/react'
+import * as React from 'react'
+import { BannerLink } from './BannerLink'
+
+export const Banner = () => (
+    <Box as="section" pt="8" pb="12" height={50}>
+        <Stack
+            direction={{ base: 'column', sm: 'row' }}
+            justifyContent="center"
+            alignItems="center"
+            py="3"
+            px={{ base: '3', md: '6', lg: '8' }}
+            color="white"
+            bg={useColorModeValue('blue.600', 'blue.400')}
+        >
+            <HStack spacing="3">
+                <Text fontWeight="medium" marginEnd="2">
+                    Cath's dashboard is still in testing phase. It is not stated to release soon.
+                </Text>
+            </HStack>
+            <BannerLink w={{ base: 'full', sm: 'auto' }} flexShrink={0}>
+                Learn More
+            </BannerLink>
+        </Stack>
+    </Box>
+)

components/Banner/BannerLink.js

@@ -0,0 +1,19 @@
+import { chakra } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const BannerLink = (props) => (
+    <chakra.a
+        {...props}
+        href="https://github.com/night0721/cath.gq"
+        px="4"
+        py="1.5"
+        textAlign="center"
+        borderWidth="1px"
+        borderColor="whiteAlpha.400"
+        fontWeight="medium"
+        rounded="base"
+        _hover={{
+            bg: 'whiteAlpha.200',
+        }}
+    />
+)

pages/_app.js

@@ -5,6 +5,7 @@ import { ChakraProvider } from "@chakra-ui/react"
 import Header from '../components/Nav/Header'
 import theme from '../chakra_config/theme'
 import { ColorModeScript } from "@chakra-ui/react"
+import { Banner } from '../components/Banner/Banner'
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -16,6 +17,7 @@ function MyApp({ Component, pageProps }) {
         </Head>
         <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Header/>
+        <Banner/>
         <div className='page-container'>
           <Component {...pageProps} />
         </div>