import { Box, Container, Heading, Link, SimpleGrid, Text, useMediaQuery } from '@chakra-ui/react'; import { GlobalHeader } from '../components/global-header'; import { Footer } from '../components/footer'; import { UpdatesBanner } from '../components/updates-banner'; import { OpensourceBanner } from '../components/opensource-banner'; import { DimmedMore } from '../components/dimmed-more'; import { LinksListItem } from '../components/links-list-item'; import { VideoIcon } from '../components/icons/video-icon'; import { LinksList } from '../components/links-list'; import { HomeRoadmapItem } from '../components/roadmap/home-roadmap-item'; import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap'; import { getAllGuides, GuideType } from '../lib/guide'; 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[]; guides: GuideType[]; videos: VideoType[]; } export default function Home(props: HomeProps) { const { roadmaps, guides, videos } = props; return ( <PageWrapper> <GlobalHeader variant={'transparent'} /> <Helmet title='Developer Roadmaps' /> <Box> <Container maxW='container.md' pb='90px'> <Box py={['23px', '23px', '35px']} color='gray.200' > <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 to help guide the developers in picking up the path and guide their learnings. </Text> <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'} href={siteConfig.url.youtube} onClick={() => event({ category: 'Subscription', action: 'Clicked the YouTube link', label: 'YouTube link on home' })} target='_blank' fontWeight={600}>YouTube channel</Link> which we hope you are going to love.</Text> </Box> <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} sx={{ // Don't change the opacity on mobile devices '@media (hover: none)': { '&:hover': { '.home-roadmap-item': { opacity: 1 } } } }} _hover={{ '& .home-roadmap-item': { opacity: '0.5'} }} > {roadmaps.map((roadmap: RoadmapType, counter: number) => ( <HomeRoadmapItem isUpcoming={roadmap.isUpcoming} url={`/${roadmap.id}`} key={roadmap.id} colorIndex={counter} title={roadmap.featuredTitle} isCommunity={roadmap.isCommunity} subtitle={roadmap.featuredDescription} /> ))} </SimpleGrid> </Container> </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> </Box> <LinksList> {videos.map(video => ( <LinksListItem target={'_blank'} key={video.id} href={video.youtubeLink!} badgeText={video.isPro ? 'PRO' : ''} hideSubtitleOnMobile title={video.title} subtitle={video.duration} icon={ <VideoIcon style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} /> } /> ))} <DimmedMore href='/watch' text={'View all Videos'} /> </LinksList> </Container> </Box> <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> </Box> <LinksList> {guides.map(guide => ( <LinksListItem key={guide.id} href={`/guides/${guide.id}`} title={guide.title} badgeText={guide.isPro ? 'PRO' : ''} subtitle={guide.formattedUpdatedAt!} /> ))} <DimmedMore href={'/guides'} text='View all Guides' /> </LinksList> </Container> </Box> <OpensourceBanner /> <UpdatesBanner /> <Footer /> </PageWrapper> ); } export async function getStaticProps() { return { props: { roadmaps: getFeaturedRoadmaps(), guides: getAllGuides(10), videos: getAllVideos(10) } }; }