Update banner colors

components/page-wrapper.tsx

@@ -9,7 +9,7 @@ export function PageWrapper(props: PageWrapperProps) {
   const { children } = props;
 
   return (
-    <Box bgColor='brand.hero' bgImage='url(/bg.png)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
+    <Box bgColor='brand.bg' bgImage='url(/bg.jpg)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
       { children }
     </Box>
   );

components/updates-banner.tsx

@@ -1,40 +1,77 @@
-import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Link,
+  Text,
+} from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 
 export function UpdatesBanner() {
   return (
-    <Box borderTopWidth={1}
+    <Box
+      borderTopWidth={1}
       pt={['40px', '40px', '70px']}
       pb={['40px', '45px', '80px']}
-         textAlign='left'
+      textAlign="left"
-         bg='brand.footer'>
+      bg="brand.footer"
-      <Container maxW='container.md'>
+    >
-        <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
+      <Container maxW="container.md">
-          Informed</Heading>
+        <Heading
-        <Text color='gray.400' lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>Subscribe yourself to get
+          color={'gray.100'}
-          updates, new
+          fontSize={['25px', '25px', '35px']}
-          guides, videos and roadmaps in your inbox.</Text>
+          mb={['5px', '5px', '15px']}
+        >
+          Stay Informed
+        </Heading>
+        <Text
+          color="gray.400"
+          lineHeight="26px"
+          fontSize={['15px', '15px', '16px']}
+          mb="20px"
+        >
+          Subscribe yourself to get updates, new guides, videos and roadmaps in
+          your inbox.
+        </Text>
 
         <Flex flexDirection={['column', 'column', 'row']}>
           <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
-            <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
+            <Button
-                    variant='outline' borderWidth={2}
+              as={Link}
-                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
+              href="/signup"
+              width={['full', 'auto']}
+              fontSize={['14px', '14px', '16px']}
+              variant="outline"
+              borderWidth={2}
+              colorScheme="green"
+              _hover={{ color: 'green.200', textDecoration: 'none' }}
+            >
               Subscribe to Updates
             </Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
+            <Text color="gray.500" fontSize="13px" mt="5px">
+              Free subscription for updates
+            </Text>
           </Box>
           <Box>
-            <Button as={Link}
+            <Button
+              as={Link}
               href={siteConfig.url.sponsor}
-                    target='_blank'
+              target="_blank"
               width={['full', 'auto']}
               fontSize={['14px', '14px', '16px']}
               _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
-                    colorScheme='yellow'>Updates & Paid Content</Button>
+              colorScheme="yellow"
-            <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
+            >
-                                                                                                             fontWeight={600}>5$
+              Updates & Paid Content
-              per month</Text></Text>
+            </Button>
+            <Text color="gray.500" fontSize="13px" mt="5px">
+              Support the project by paying as little as{' '}
+              <Text as="span" fontWeight={600}>
+                5$ per month
+              </Text>
+            </Text>
           </Box>
         </Flex>
       </Container>

styles/theme.ts

@@ -3,9 +3,9 @@ import { extendTheme } from '@chakra-ui/react';
 export const roadmapTheme = extendTheme({
   colors: {
     brand: {
-      bg: '#222222',
+      bg: '#06020d',
-      hero: '#161616',
+      hero: '#06020d',
-      footer: '#1c1c1c'
+      footer: '#0d041e'
     }
   }
 });