From f15e7a18b856260ab1ee2386c4d2dde0fe1ac044 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sun, 1 Aug 2021 18:37:32 +0200 Subject: [PATCH] Add homepage UI --- .prettierrc | 3 +- pages/_app.tsx | 5 +- pages/api/hello.ts | 13 ----- pages/index.tsx | 129 ++++++++++++++++++++++------------------- pages/theme.ts | 9 +++ public/logo.svg | 4 ++ styles/Home.module.css | 121 -------------------------------------- styles/globals.css | 16 ----- 8 files changed, 86 insertions(+), 214 deletions(-) delete mode 100644 pages/api/hello.ts create mode 100644 pages/theme.ts create mode 100644 public/logo.svg delete mode 100644 styles/Home.module.css delete mode 100644 styles/globals.css diff --git a/.prettierrc b/.prettierrc index a048bb88b..02ff4340e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "semi": true, - "singleQuote": true + "singleQuote": true, + "tabWidth": 2 } \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index f97f63dfa..fea3b5fbc 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,11 +1,10 @@ import type { AppProps } from 'next/app'; import { ChakraProvider } from '@chakra-ui/react'; - -import '../styles/globals.css'; +import { roadmapTheme } from './theme'; function MyApp({ Component, pageProps }: AppProps) { return ( - + ); diff --git a/pages/api/hello.ts b/pages/api/hello.ts deleted file mode 100644 index f8bcc7e5c..000000000 --- a/pages/api/hello.ts +++ /dev/null @@ -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 -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/index.tsx b/pages/index.tsx index 08145bba9..48e2f77c6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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 ( -
- - Create Next App - - - + + + + + + + + + Read + Watch + Become a Member + + + + + + + + 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. + + + + + Frontend + Step by step guide to becoming a frontend developer in 2021 + -
-

- Welcome to Next.js! -

+ + Backend + Step by step guide to becoming a backend developer in 2021 + -

- Get started by editing{' '} - pages/index.js -

+ + DevOps + Step by step guide for DevOps or Operations role in 2021 + - -
- - -
- ) + + Android + Step by step guide for DevOps or Operations role in 2021 + + + + + + ); } diff --git a/pages/theme.ts b/pages/theme.ts new file mode 100644 index 000000000..9df73a2e0 --- /dev/null +++ b/pages/theme.ts @@ -0,0 +1,9 @@ +import { extendTheme } from '@chakra-ui/react'; + +export const roadmapTheme = extendTheme({ + colors: { + brand: { + bg: '#222222' + } + } +}); \ No newline at end of file diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 000000000..8f414efe5 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 35454bb74..000000000 --- a/styles/Home.module.css +++ /dev/null @@ -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; - } -} diff --git a/styles/globals.css b/styles/globals.css deleted file mode 100644 index e5e2dcc23..000000000 --- a/styles/globals.css +++ /dev/null @@ -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; -}