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'
+    <Box borderTopWidth={1}
-         bg='gray.800'>
+         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>

pages/_app.tsx

@@ -15,7 +15,6 @@ const GlobalStyles = css`
     element receives focus via the mouse,
     but it will still show up on keyboard focus.
   */
-
   .js-focus-visible :focus:not([data-focus-visible-added]) {
     outline: none;
     box-shadow: none;

pages/index.tsx

@@ -14,6 +14,7 @@ import { getAllVideos, VideoType } from '../lib/video';
 import siteConfig from '../content/site.json';
 import Helmet from '../components/helmet';
 import { event } from '../lib/gtag';
+import { PageWrapper } from '../components/page-wrapper';
 
 type HomeProps = {
   roadmaps: RoadmapType[];
@@ -25,13 +26,13 @@ export default function Home(props: HomeProps) {
   const { roadmaps, guides, videos } = props;
 
   return (
-    <Box bg='white' minH='100vh'>
+    <PageWrapper>
-      <GlobalHeader />
+      <GlobalHeader variant={'transparent'} />
       <Helmet title='Developer Roadmaps' />
       <Box>
-        <Container maxW='container.md'>
+        <Container maxW='container.md' pb='90px'>
-          <Box py={['23px', '23px', '35px']}>
+          <Box py={['23px', '23px', '35px']} color='gray.200' >
-            <Heading fontSize={['22px', '22px', '28px']} mb={['8px', '8px', '15px']}>Hey there! 👋</Heading>
+            <Heading color='gray.50' fontSize={['22px', '22px', '28px']} mb={['8px', '8px', '15px']}>Hey there! 👋</Heading>
             <Text fontSize={['14px', '14px', '16px']} mb='10px'>
               <Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and
               other educational content
@@ -49,7 +50,11 @@ export default function Home(props: HomeProps) {
                                                                            fontWeight={600}>YouTube
               channel</Link> which we hope you are going to love.</Text>
           </Box>
-          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
+          <SimpleGrid
+            columns={[1, 2, 3]}
+            spacing={['10px', '10px', '15px']}
+            _hover={{ '& .home-roadmap-item': { opacity: '0.5'} }}
+          >
             {roadmaps.map((roadmap: RoadmapType, counter: number) => (
               <HomeRoadmapItem
                 isUpcoming={roadmap.isUpcoming}
@@ -65,7 +70,7 @@ export default function Home(props: HomeProps) {
         </Container>
       </Box>
 
-      <Box>
+      <Box bg='white'>
         <Container maxW='container.md'>
           <Box  pt='60px' mb={['10px', '15px', '20px']}>
             <Heading color='green.500' fontSize={['20px', '20px', '25px']} mb='5px'>Video Explanations</Heading>
@@ -98,7 +103,7 @@ export default function Home(props: HomeProps) {
         </Container>
       </Box>
 
-      <Box mb='80px'>
+      <Box pb='80px' bg='white'>
         <Container maxW='container.md' position='relative'>
           <Box pt='40px' mb='20px'>
             <Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
@@ -122,7 +127,7 @@ export default function Home(props: HomeProps) {
       <OpensourceBanner />
       <UpdatesBanner />
       <Footer />
-    </Box>
+    </PageWrapper>
   );
 }
 

styles/theme.ts

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