Kamran Ahmed
3 years ago
parent
9c81d818ed
commit
f15e7a18b8
8 changed files with 86 additions and 214 deletions
@ -1,4 +1,5 @@ |
||||
{ |
||||
"semi": true, |
||||
"singleQuote": true |
||||
"singleQuote": true, |
||||
"tabWidth": 2 |
||||
} |
||||
@ -1,13 +0,0 @@ |
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type { NextApiRequest, NextApiResponse } from 'next' |
||||
|
||||
type Data = { |
||||
name: string |
||||
} |
||||
|
||||
export default function handler( |
||||
req: NextApiRequest, |
||||
res: NextApiResponse<Data> |
||||
) { |
||||
res.status(200).json({ name: 'John Doe' }) |
||||
} |
||||
@ -1,69 +1,78 @@ |
||||
import Head from 'next/head' |
||||
import Image from 'next/image' |
||||
import styles from '../styles/Home.module.css' |
||||
import { Box, Container, Divider, Heading, Image, Text, Flex, Link, Stack, Button, SimpleGrid } from '@chakra-ui/react'; |
||||
import { Head } from 'next/document'; |
||||
|
||||
export default function Home() { |
||||
return ( |
||||
<div className={styles.container}> |
||||
<Head> |
||||
<title>Create Next App</title> |
||||
<meta name="description" content="Generated by create next app" /> |
||||
<link rel="icon" href="/favicon.ico" /> |
||||
</Head> |
||||
<Box bg='teal.50' minH='100vh'> |
||||
<Box bg='black' p='20px 30px'> |
||||
<Container maxW='container.md'> |
||||
<Flex justifyContent='space-between'> |
||||
<Link d='flex' href='/'> |
||||
<Image h='45px' src='/logo.svg' /> |
||||
</Link> |
||||
<Stack shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50' fontSize='15px'> |
||||
<Link borderBottomWidth={0} borderBottomColor='gray.500' |
||||
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500} |
||||
href='#'>Read</Link> |
||||
<Link borderBottomWidth={0} borderBottomColor='gray.500' |
||||
_hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500} |
||||
href='#'>Watch</Link> |
||||
<Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px' |
||||
_hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }} |
||||
fontWeight={500} href={'#'}>Become a Member</Link> |
||||
</Stack> |
||||
</Flex> |
||||
</Container> |
||||
</Box> |
||||
<Box> |
||||
<Container maxW='container.md'> |
||||
<Box py='30px'> |
||||
<Heading fontSize='28px' mb='10px'>Hey there! 👋</Heading> |
||||
<Text fontSize='16px'> |
||||
<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> |
||||
</Box> |
||||
<SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} isInline spacing='20px'> |
||||
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl' |
||||
bg='blue.900' color='white' p='15px' rounded='10px'> |
||||
<Heading fontSize='22px' mb='5px'>Frontend</Heading> |
||||
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a frontend developer in 2021</Text> |
||||
</Link> |
||||
|
||||
<main className={styles.main}> |
||||
<h1 className={styles.title}> |
||||
Welcome to <a href="https://nextjs.org">Next.js!</a> |
||||
</h1> |
||||
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl' |
||||
bg='red.800' color='white' p='15px' rounded='10px'> |
||||
<Heading fontSize='22px' mb='5px'>Backend</Heading> |
||||
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a backend developer in 2021</Text> |
||||
</Link> |
||||
|
||||
<p className={styles.description}> |
||||
Get started by editing{' '} |
||||
<code className={styles.code}>pages/index.js</code> |
||||
</p> |
||||
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl' |
||||
bg='green.800' color='white' p='15px' rounded='10px'> |
||||
<Heading fontSize='22px' mb='5px'>DevOps</Heading> |
||||
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text> |
||||
</Link> |
||||
|
||||
<div className={styles.grid}> |
||||
<a href="https://nextjs.org/docs" className={styles.card}> |
||||
<h2>Documentation →</h2> |
||||
<p>Find in-depth information about Next.js features and API.</p> |
||||
</a> |
||||
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl' |
||||
bg='teal.800' color='white' p='15px' rounded='10px'> |
||||
<Heading fontSize='22px' mb='5px'>React</Heading> |
||||
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text> |
||||
</Link> |
||||
|
||||
<a href="https://nextjs.org/learn" className={styles.card}> |
||||
<h2>Learn →</h2> |
||||
<p>Learn about Next.js in an interactive course with quizzes!</p> |
||||
</a> |
||||
<Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl' |
||||
bg='gray.800' color='white' p='15px' rounded='10px'> |
||||
<Heading fontSize='22px' mb='5px'>DBA</Heading> |
||||
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text> |
||||
</Link> |
||||
|
||||
<a |
||||
href="https://github.com/vercel/next.js/tree/master/examples" |
||||
className={styles.card} |
||||
> |
||||
<h2>Examples →</h2> |
||||
<p>Discover and deploy boilerplate example Next.js projects.</p> |
||||
</a> |
||||
|
||||
<a |
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" |
||||
className={styles.card} |
||||
> |
||||
<h2>Deploy →</h2> |
||||
<p> |
||||
Instantly deploy your Next.js site to a public URL with Vercel. |
||||
</p> |
||||
</a> |
||||
</div> |
||||
</main> |
||||
|
||||
<footer className={styles.footer}> |
||||
<a |
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
Powered by{' '} |
||||
<span className={styles.logo}> |
||||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> |
||||
</span> |
||||
</a> |
||||
</footer> |
||||
</div> |
||||
) |
||||
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl' |
||||
bg='red.900' color='white' p='15px' rounded='10px'> |
||||
<Heading fontSize='22px' mb='5px'>Android</Heading> |
||||
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text> |
||||
</Link> |
||||
</SimpleGrid> |
||||
</Container> |
||||
</Box> |
||||
</Box> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,9 @@ |
||||
import { extendTheme } from '@chakra-ui/react'; |
||||
|
||||
export const roadmapTheme = extendTheme({ |
||||
colors: { |
||||
brand: { |
||||
bg: '#222222' |
||||
} |
||||
} |
||||
}); |
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -1,121 +0,0 @@ |
||||
.container { |
||||
min-height: 100vh; |
||||
padding: 0 0.5rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100vh; |
||||
} |
||||
|
||||
.main { |
||||
padding: 5rem 0; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.footer { |
||||
width: 100%; |
||||
height: 100px; |
||||
border-top: 1px solid #eaeaea; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.footer a { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.title a { |
||||
color: #0070f3; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.title a:hover, |
||||
.title a:focus, |
||||
.title a:active { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.title { |
||||
margin: 0; |
||||
line-height: 1.15; |
||||
font-size: 4rem; |
||||
} |
||||
|
||||
.title, |
||||
.description { |
||||
text-align: center; |
||||
} |
||||
|
||||
.description { |
||||
line-height: 1.5; |
||||
font-size: 1.5rem; |
||||
} |
||||
|
||||
.code { |
||||
background: #fafafa; |
||||
border-radius: 5px; |
||||
padding: 0.75rem; |
||||
font-size: 1.1rem; |
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, |
||||
Bitstream Vera Sans Mono, Courier New, monospace; |
||||
} |
||||
|
||||
.grid { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
max-width: 800px; |
||||
margin-top: 3rem; |
||||
} |
||||
|
||||
.card { |
||||
margin: 1rem; |
||||
padding: 1.5rem; |
||||
text-align: left; |
||||
color: inherit; |
||||
text-decoration: none; |
||||
border: 1px solid #eaeaea; |
||||
border-radius: 10px; |
||||
transition: color 0.15s ease, border-color 0.15s ease; |
||||
width: 45%; |
||||
} |
||||
|
||||
.card:hover, |
||||
.card:focus, |
||||
.card:active { |
||||
color: #0070f3; |
||||
border-color: #0070f3; |
||||
} |
||||
|
||||
.card h2 { |
||||
margin: 0 0 1rem 0; |
||||
font-size: 1.5rem; |
||||
} |
||||
|
||||
.card p { |
||||
margin: 0; |
||||
font-size: 1.25rem; |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.logo { |
||||
height: 1em; |
||||
margin-left: 0.5rem; |
||||
} |
||||
|
||||
@media (max-width: 600px) { |
||||
.grid { |
||||
width: 100%; |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
@ -1,16 +0,0 @@ |
||||
html, |
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, |
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; |
||||
} |
||||
|
||||
a { |
||||
color: inherit; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
Loading…
Reference in new issue