import { Box, Container, Heading, Link, SimpleGrid, Tag, 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 ( Hey there! 👋 roadmap.sh {' '} 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. Role Based Roadmaps {roadmaps.filter(roadmap => roadmap.type === 'role').map((roadmap: RoadmapType, counter: number) => ( ))} Tool Based Skill Trees {roadmaps.filter(roadmap => roadmap.type === 'tool').map((roadmap: RoadmapType, counter: number) => ( ))} Video Explanations {videos.map((video) => ( } /> ))} Visual Guides {guides.map((guide) => ( ))}