Redesign homepage

components/footer.tsx

@@ -33,7 +33,7 @@ function NavigationLinks() {
 
 export function Footer() {
   return (
-    <Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
+    <Box bg='brand.hero' p={['25px 0', '25px 0', '40px 0']}>
       <Container maxW='container.md'>
         <NavigationLinks />
 

components/global-header.tsx

@@ -72,7 +72,7 @@ function MobileMenuLinks() {
                top={0}
                bg='gray.900'
                spacing='12px'
-               zIndex={1}
+               zIndex={999}
         >
           <Link href='/roadmaps'>Roadmaps</Link>
           <Link href='/guides'>Guides</Link>
@@ -86,9 +86,15 @@ function MobileMenuLinks() {
   );
 }
 
-export function GlobalHeader() {
+type GlobalHeaderProps = {
+  variant?: 'transparent' | 'solid'
+};
+
+export function GlobalHeader(props: GlobalHeaderProps) {
+  const { variant = 'solid' } = props;
+
   return (
-    <Box bg='gray.900' p='20px 0'>
+    <Box bg={variant === 'solid' ? 'gray.900' : 'transparent'} p='20px 0'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>

components/opensource-banner.tsx

@@ -2,7 +2,7 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 
 export function OpensourceBanner() {
   return (
-    <Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
+    <Box bg='white' borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['60px', '60px', '90px']} textAlign='center'>
       <Container maxW='container.md'>
         <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
         <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;

components/page-wrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+type PageWrapperProps = {
+  children: React.ReactNode;
+}
+
+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'>
+      { children }
+    </Box>
+  );
+}

components/roadmap/home-roadmap-item.tsx

@@ -31,10 +31,11 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
     <Box
       as={Link}
       href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
+      _hover={{ textDecoration: 'none', transform: 'scale(1.02)', opacity: '1 !important' }}
       flex={1}
       shadow='2xl'
-      bg={bgColorList[colorIndex] ?? bgColorList[0]}
+      className={'home-roadmap-item'}
+      bg={'rgba(255,255,255,.05)'}
       color='white'
       p='15px'
       rounded='10px'
@@ -60,9 +61,9 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
           bottom={0}
           rounded='10px'
         >
-          <Text color='white' bg='yellow.900' zIndex={1} fontWeight={600} p={'5px 10px'}
+          <Text color='white' bg='purple.700' zIndex={1} fontWeight={600} p={'5px 10px'}
                 rounded='10px'>Upcoming</Text>
-          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
+          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.3} />
         </Flex>
       )}
     </Box>

components/updates-banner.tsx

@@ -3,8 +3,11 @@ import siteConfig from '../content/site.json';
 
 export function UpdatesBanner() {
   return (
-    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
-         bg='gray.800'>
+    <Box borderTopWidth={1}
+         pt={['40px', '40px', '70px']}
+         pb={['40px', '45px', '80px']}
+         textAlign='left'
+         bg='brand.footer'>
       <Container maxW='container.md'>
         <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
           Informed</Heading>