├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── README.md
├── babel.config.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── prettier.config.js
├── public
    ├── _redirects
    ├── background.webp
    ├── favicon.ico
    ├── github-banner.jpg
    └── logo.webp
├── src
    ├── components
    │   ├── Anchor
    │   │   └── index.ts
    │   ├── Footer
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── Header
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   └── PageContainer
    │   │   ├── index.tsx
    │   │   └── styles.ts
    ├── pages
    │   ├── _app.tsx
    │   ├── _document.tsx
    │   └── index.tsx
    └── styles
    │   ├── global.ts
    │   ├── pages
    │       └── Home.ts
    │   ├── styled.d.ts
    │   └── theme.ts
├── tsconfig.json
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | charset = utf-8
 7 | end_of_line = lf
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | /*.js


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es2020": true,
 5 |     "node": true,
 6 |     "jest": true
 7 |   },
 8 |   "extends": [
 9 |     "plugin:react/recommended",
10 |     "standard",
11 |     "plugin:@typescript-eslint/recommended",
12 |     "prettier/@typescript-eslint",
13 |     "prettier/standard",
14 |     "prettier/react"
15 |   ],
16 |   "parser": "@typescript-eslint/parser",
17 |   "parserOptions": {
18 |     "ecmaFeatures": {
19 |       "jsx": true
20 |     },
21 |     "ecmaVersion": 12,
22 |     "sourceType": "module"
23 |   },
24 |   "plugins": [
25 |     "react",
26 |     "@typescript-eslint",
27 |     "prettier"
28 |   ],
29 |   "rules": {
30 |     "prettier/prettier": "error",
31 |     "space-before-function-paren": "off",
32 |     "react/prop-types": "off"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # web-opensources-courses
2 | 
3 | > Cursos gratuito de TI para toda comunidade, vamos democratizar nossos conhecimentos para contruir um futuro melhor juntos.
4 | 
5 | Criado por [Odenir Gomes](https://github.com/odenirdev).
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["next/babel"],
3 |   plugins: [
4 |     ["styled-components", { "ssr": true }],
5 |     "inline-react-svg"
6 |   ]
7 | };
8 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | /// <reference types="next-images" />
4 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withImages = require('next-images')
2 | 
3 | module.exports = withImages({
4 |   esModule: true,
5 | })
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web-opensources-courses",
 3 |   "description": "Cursos gratuito de TI para toda comunidade, vamos democratizar nossos conhecimentos para contruir um futuro melhor juntos",
 4 |   "version": "1.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "next dev",
 8 |     "build": "next build",
 9 |     "start": "next start"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.26.1",
13 |     "next": "9.5.2",
14 |     "next-images": "^1.4.1",
15 |     "react": "16.13.1",
16 |     "react-dom": "16.13.1",
17 |     "react-icons": "^4.3.1",
18 |     "styled-components": "^5.1.1"
19 |   },
20 |   "devDependencies": {
21 |     "@netlify/plugin-nextjs": "^4.3.0",
22 |     "@types/node": "^14.6.0",
23 |     "@types/react": "^16.9.46",
24 |     "@types/styled-components": "^5.1.2",
25 |     "@typescript-eslint/eslint-plugin": "^3.9.1",
26 |     "@typescript-eslint/parser": "^3.9.1",
27 |     "babel-plugin-inline-react-svg": "^1.1.1",
28 |     "eslint": "^7.7.0",
29 |     "eslint-config-prettier": "^6.11.0",
30 |     "eslint-config-standard": "^14.1.1",
31 |     "eslint-plugin-import": "^2.22.0",
32 |     "eslint-plugin-node": "^11.1.0",
33 |     "eslint-plugin-prettier": "^3.1.4",
34 |     "eslint-plugin-promise": "^4.2.1",
35 |     "eslint-plugin-react": "^7.20.6",
36 |     "eslint-plugin-standard": "^4.0.1",
37 |     "prettier": "^2.1.0",
38 |     "typescript": "^4.0.2"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: false,
3 |   singleQuote: true,
4 |   arrowParens: 'avoid',
5 |   trailingComma: 'none',
6 |   endOfLine: 'auto'
7 | };


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
2 | 


--------------------------------------------------------------------------------
/public/background.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensource-university/web/7adf908febd6d3c693d99ca69e614b442584e712/public/background.webp


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensource-university/web/7adf908febd6d3c693d99ca69e614b442584e712/public/favicon.ico


--------------------------------------------------------------------------------
/public/github-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensource-university/web/7adf908febd6d3c693d99ca69e614b442584e712/public/github-banner.jpg


--------------------------------------------------------------------------------
/public/logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensource-university/web/7adf908febd6d3c693d99ca69e614b442584e712/public/logo.webp


--------------------------------------------------------------------------------
/src/components/Anchor/index.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const Anchor = styled.a`
 4 |   min-height: 42px;
 5 |   padding: 0.5rem 2rem;
 6 |   background: linear-gradient(98deg, #42a539 80%, #56c5ff 100%);
 7 | 
 8 |   display: flex;
 9 |   align-items: center;
10 | 
11 |   color: var(--white);
12 |   text-transform: uppercase;
13 |   font: 700 2rem var(--font);
14 | 
15 |   text-decoration: none;
16 | 
17 |   border-radius: 4px;
18 | 
19 |   cursor: pointer;
20 | `
21 | 


--------------------------------------------------------------------------------
/src/components/Footer/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import { FiChevronUp } from 'react-icons/fi'
 3 | import axios from 'axios'
 4 | 
 5 | import { Anchor } from '../Anchor'
 6 | 
 7 | import * as S from './styles'
 8 | 
 9 | interface Contributor {
10 |   src: string
11 |   avatar: string
12 | }
13 | 
14 | export const Footer: React.FC = () => {
15 |   const [contributors, setContributors] = useState<Contributor[]>([])
16 | 
17 |   const parseContributor = (value: any) => {
18 |     return {
19 |       avatar: value.avatar_url,
20 |       src: value.html_url
21 |     }
22 |   }
23 | 
24 |   useEffect(() => {
25 |     ;(async () => {
26 |       const response = await axios.get(
27 |         'https://api.github.com/repos/opensource-courses/courses/contributors'
28 |       )
29 |       const serializedContributors = response.data.map(value =>
30 |         parseContributor(value)
31 |       )
32 | 
33 |       setContributors(serializedContributors)
34 |     })()
35 |   }, [])
36 | 
37 |   return (
38 |     <S.Container>
39 |       <S.Grid>
40 |         <a href="#">
41 |           <img src="/logo.webp" className="logo" />
42 |         </a>
43 | 
44 |         <S.ContributorsList>
45 |           {contributors.map((contributor, index) => (
46 |             <a
47 |               key={index}
48 |               href={contributor.src}
49 |               target="_blank"
50 |               rel="noreferrer"
51 |             >
52 |               <S.Contributor src={contributor.avatar} />
53 |             </a>
54 |           ))}
55 |         </S.ContributorsList>
56 | 
57 |         <p>MIT License (c) 2022 Opensource Courses</p>
58 | 
59 |         <Anchor className="gotoTop" href="#header">
60 |           <FiChevronUp />
61 |         </Anchor>
62 |       </S.Grid>
63 |     </S.Container>
64 |   )
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/Footer/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const Container = styled.div`
 4 |   display: flex;
 5 |   align-items: center;
 6 | 
 7 |   position: relative;
 8 | 
 9 |   min-height: var(--footer-height);
10 | 
11 |   backdrop-filter: blur(3px);
12 |   box-shadow: 0 0 5px #000;
13 | 
14 |   a {
15 |     color: var(--secundary);
16 |   }
17 | 
18 |   .logo {
19 |     height: 3.5rem;
20 |   }
21 | 
22 |   .gotoTop {
23 |     transform: translateY(-50%);
24 | 
25 |     position: absolute;
26 |     right: 2rem;
27 |     top: 0;
28 | 
29 |     width: 42px;
30 |     height: 42px;
31 | 
32 |     color: var(--white);
33 |     background: var(--primary);
34 |     padding: 0;
35 | 
36 |     display: flex;
37 |     justify-content: center;
38 |     align-items: center;
39 |   }
40 | 
41 |   p {
42 |     font-size: 1rem;
43 |     text-align: center;
44 | 
45 |     @media (max-width: 768px) {
46 |       margin: 2rem 0;
47 |       font-size: 1.3rem;
48 |     }
49 |   }
50 | `
51 | 
52 | export const Grid = styled.div`
53 |   width: 100%;
54 |   max-width: 1080px;
55 | 
56 |   margin: 0 auto;
57 |   padding: 0 2rem;
58 | 
59 |   display: flex;
60 |   justify-content: space-between;
61 |   align-items: center;
62 | 
63 |   @media (max-width: 768px) {
64 |     flex-direction: column;
65 |     padding: 2rem;
66 | 
67 |     .logo {
68 |       height: 64px;
69 | 
70 |       margin-bottom: 2rem;
71 |     }
72 |   }
73 | `
74 | 
75 | export const ContributorsList = styled.div`
76 |   display: flex;
77 |   flex-wrap: wrap;
78 |   justify-content: center;
79 | 
80 |   img {
81 |     margin: 0.2rem;
82 |   }
83 | `
84 | 
85 | export const Contributor = styled.img`
86 |   object-fit: contain;
87 | 
88 |   width: 42px;
89 |   height: 42px;
90 | 
91 |   border-radius: 21px;
92 | `
93 | 


--------------------------------------------------------------------------------
/src/components/Header/index.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import React from 'react'
 3 | 
 4 | import { Container, Grid } from './styles'
 5 | 
 6 | export const Header: React.FC = () => {
 7 |   return (
 8 |     <Container id="header">
 9 |       <Grid>
10 |         <a href="#" className="logo">
11 |           <img src="/logo.webp" alt="OpenSource Courses" />
12 |         </a>
13 | 
14 |         <ul>
15 |           <li>
16 |             <a href="#spotlight">Ínicio</a>
17 |           </li>
18 |           <li>
19 |             <a href="#benefits">Vantagens</a>
20 |           </li>
21 |           <li>
22 |             <a
23 |               href="https://blog-opensourcecourses.notion.site/Open-source-Courses-1e3bde73c5eb416e903b21172f37cf90"
24 |               target="_blank"
25 |               rel="noreferrer"
26 |             >
27 |               🏗️ Plataforma
28 |             </a>
29 |           </li>
30 |           <li>
31 |             <a href="#tutorial">Github</a>
32 |           </li>
33 |         </ul>
34 |       </Grid>
35 |     </Container>
36 |   )
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/Header/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const Container = styled.header`
 4 |   width: 100%;
 5 | 
 6 |   backdrop-filter: blur(3px);
 7 |   box-shadow: 0 0 5px #000;
 8 | 
 9 |   display: flex;
10 |   align-items: center;
11 |   justify-content: center;
12 | 
13 |   min-height: var(--header-height);
14 | 
15 |   img {
16 |     width: 100%;
17 |     max-width: 4rem;
18 |     height: auto;
19 | 
20 |     @media (max-width: 768px) {
21 |       max-width: 6rem;
22 |     }
23 |   }
24 | `
25 | 
26 | export const Grid = styled.div`
27 |   width: 100%;
28 |   max-width: 1080px;
29 | 
30 |   padding: 0 2rem;
31 | 
32 |   position: relative;
33 | 
34 |   display: flex;
35 |   align-items: center;
36 |   justify-content: center;
37 | 
38 |   @media (max-width: 768px) {
39 |     padding: 2rem;
40 |     flex-direction: column;
41 |   }
42 | 
43 |   .logo {
44 |     position: absolute;
45 |     left: 2rem;
46 | 
47 |     @media (max-width: 768px) {
48 |       position: initial;
49 |       margin: 0 0 2rem;
50 |     }
51 |   }
52 | 
53 |   ul {
54 |     li {
55 |       display: inline;
56 | 
57 |       margin-right: 1rem;
58 | 
59 |       a {
60 |         font-size: 1.2rem;
61 |         text-transform: uppercase;
62 |         font-weight: 700;
63 | 
64 |         text-decoration: none;
65 |         color: var(--white);
66 |       }
67 |     }
68 |   }
69 | `
70 | 


--------------------------------------------------------------------------------
/src/components/PageContainer/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { Header } from '../Header'
 4 | import { Footer } from '../Footer'
 5 | 
 6 | import { Container, Main } from './styles'
 7 | 
 8 | export const PageContainer: React.FC = ({ children }) => {
 9 |   return (
10 |     <Container>
11 |       <Header />
12 |       <Main>{children}</Main>
13 |       <Footer />
14 |     </Container>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/PageContainer/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const Container = styled.div`
 4 |   background: url('/background.webp');
 5 |   background-attachment: fixed;
 6 |   background-size: 100%;
 7 | 
 8 |   @media (max-width: 992px) {
 9 |     background-size: cover;
10 |   }
11 | `
12 | 
13 | export const Main = styled.main``
14 | 


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { AppProps } from 'next/app'
 3 | import { ThemeProvider } from 'styled-components'
 4 | 
 5 | import GlobalStyle from '../styles/global'
 6 | import { theme } from '../styles/theme'
 7 | 
 8 | const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
 9 |   return (
10 |     <ThemeProvider theme={theme}>
11 |       <Component {...pageProps} />
12 |       <GlobalStyle />
13 |     </ThemeProvider>
14 |   )
15 | }
16 | 
17 | export default MyApp
18 | 


--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Document, {
 3 |   DocumentInitialProps,
 4 |   DocumentContext,
 5 |   Html,
 6 |   Head,
 7 |   Main,
 8 |   NextScript
 9 | } from 'next/document'
10 | import { ServerStyleSheet } from 'styled-components'
11 | 
12 | export default class MyDocument extends Document {
13 |   static async getInitialProps(
14 |     ctx: DocumentContext
15 |   ): Promise<DocumentInitialProps> {
16 |     const sheet = new ServerStyleSheet()
17 |     const originalRenderPage = ctx.renderPage
18 | 
19 |     try {
20 |       ctx.renderPage = () =>
21 |         originalRenderPage({
22 |           enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
23 |         })
24 | 
25 |       const initialProps = await Document.getInitialProps(ctx)
26 |       return {
27 |         ...initialProps,
28 |         styles: (
29 |           <>
30 |             {initialProps.styles}
31 |             {sheet.getStyleElement()}
32 |           </>
33 |         )
34 |       }
35 |     } finally {
36 |       sheet.seal()
37 |     }
38 |   }
39 | 
40 |   render(): JSX.Element {
41 |     return (
42 |       <Html lang="pt">
43 |         <Head>
44 |           <meta charSet="utf-8" />
45 | 
46 |           <title>OpenSource Courses</title>
47 | 
48 |           <link rel="icon" type="image/x-icon" href="/favicon.ico" />
49 |           <link
50 |             href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
51 |             rel="stylesheet"
52 |           />
53 |         </Head>
54 |         <body>
55 |           <Main />
56 |           <NextScript />
57 |         </body>
58 |       </Html>
59 |     )
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Head from 'next/head'
 3 | import { FiCheckCircle } from 'react-icons/fi'
 4 | 
 5 | import { Anchor } from '../components/Anchor'
 6 | import { PageContainer } from '../components/PageContainer'
 7 | 
 8 | import {
 9 |   Container,
10 |   Header,
11 |   BenefitsArticle,
12 |   TutorialArticle,
13 |   ContainerOfTutorials,
14 |   TutorialContainer
15 | } from '../styles/pages/Home'
16 | 
17 | const Home: React.FC = () => {
18 |   return (
19 |     <PageContainer>
20 |       <Head>
21 |         <title>Página Principal</title>
22 |       </Head>
23 |       <Container>
24 |         <Header id="spotlight">
25 |           <h1>OpenSource Courses</h1>
26 | 
27 |           <p>
28 |             Cursos gratuitos de TI para toda comunidade, vamos democratizar
29 |             nossos conhecimentos para construir um futuro melhor juntos.
30 |           </p>
31 | 
32 |           <Anchor href="#benefits">Vamos juntos! ✊🏾</Anchor>
33 |         </Header>
34 |         <BenefitsArticle id="benefits">
35 |           <h1>Vantagens</h1>
36 |           <ul>
37 |             <li>
38 |               <FiCheckCircle /> Cursos gratuitos
39 |             </li>
40 |             <li>
41 |               <FiCheckCircle /> Cursos em constante evolução
42 |             </li>
43 |             <li>
44 |               <FiCheckCircle /> Para todos os níveis de programadores
45 |             </li>
46 |             <li>
47 |               <FiCheckCircle /> Aprenda e contribua com a comunidade opensource
48 |             </li>
49 |             <li>
50 |               <FiCheckCircle /> Melhore suas habilidades com git e markdown
51 |             </li>
52 |           </ul>
53 | 
54 |           <Anchor href="#tutorial">Partiu! 🚀</Anchor>
55 |         </BenefitsArticle>
56 |         <TutorialArticle id="tutorial">
57 |           <h1>Contribuindo com o futuro de desenvolvedores</h1>
58 |           <ContainerOfTutorials>
59 |             <TutorialContainer>
60 |               <h2>Para aprender</h2>
61 |               <ol>
62 |                 <li>Acessar nosso repositório</li>
63 |                 <li>#NeverStopLearn</li>
64 |               </ol>
65 |             </TutorialContainer>
66 |             <TutorialContainer>
67 |               <h2>Para Contribuir</h2>
68 |               <ol>
69 |                 <li>Acessar nosso repositório</li>
70 |                 <li>Realizar um fork do repositório</li>
71 |                 <li>Contribuir com seu PR</li>
72 |                 <li>#BuildTheFuture</li>
73 |               </ol>
74 |             </TutorialContainer>
75 |           </ContainerOfTutorials>
76 |           <Anchor
77 |             href="https://github.com/odenirdev/opensources-courses"
78 |             target="_black"
79 |           >
80 |             Acessar Repositório 📦
81 |           </Anchor>
82 |         </TutorialArticle>
83 |       </Container>
84 |     </PageContainer>
85 |   )
86 | }
87 | 
88 | export default Home
89 | 


--------------------------------------------------------------------------------
/src/styles/global.ts:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from 'styled-components'
 2 | 
 3 | export default createGlobalStyle`
 4 | :root {
 5 |   --font: ${props => props.theme.font};
 6 | 
 7 |   --primary: ${props => props.theme.colors.primary};
 8 |   --secundary: ${props => props.theme.colors.secundary};
 9 | 
10 |   --white: ${props => props.theme.colors.white};
11 |   --black: ${props => props.theme.colors.black};
12 | 
13 |   --header-height: 12vh;
14 |   --footer-height: 14vh;
15 | 
16 |   font: 400 16px Roboto, sans-serif;
17 | 
18 |   @media (max-width: 768px) {
19 |     font-size: 10px;
20 |   }
21 | }
22 | 
23 |   * {
24 |     margin: 0;
25 |     padding: 0;
26 |     box-sizing: border-box;
27 |     outline: 0;
28 |   }
29 | 
30 |   html {
31 |     scroll-behavior: smooth;
32 |   }
33 | 
34 |   body, #__next {
35 |     width: 100%;
36 |     min-height: 100vh;
37 |   }
38 | 
39 |   body {
40 |     background: ${props => props.theme.colors.background};
41 |     color: ${props => props.theme.colors.text};
42 |   }
43 | 
44 |   h1 {
45 |     background: -webkit-linear-gradient(0deg, #42A539 30%, #56C5FF 100%);
46 |     -webkit-background-clip: text;
47 |     -webkit-text-fill-color: transparent;
48 |     font-size: 5rem;
49 |     font-variant: small-caps;
50 |   }
51 | 
52 |   h2 {
53 |     font-size: 3rem;
54 |     font-variant: small-caps;
55 |   }
56 | 
57 |   p {
58 |     font: 400 1.7rem var(--font);
59 |   }
60 | 
61 |   ul {
62 |     list-style: none;
63 |   }
64 | 
65 |   ul, ol {
66 |     font: 400 1.7rem var(--font);
67 |     padding-left: 1.8em;
68 | 
69 |   }
70 | 
71 | 
72 | `
73 | 


--------------------------------------------------------------------------------
/src/styles/pages/Home.ts:
--------------------------------------------------------------------------------
  1 | import styled from 'styled-components'
  2 | 
  3 | export const Container = styled.div`
  4 |   width: 100%;
  5 |   min-height: 100vh;
  6 | 
  7 |   padding: 0 2.5rem;
  8 | `
  9 | 
 10 | export const Header = styled.header`
 11 |   width: 100%;
 12 |   max-width: 640px;
 13 |   min-height: calc(100vh - var(--header-height));
 14 | 
 15 |   margin: 0 auto;
 16 | 
 17 |   display: flex;
 18 |   justify-content: center;
 19 |   align-items: center;
 20 |   flex-direction: column;
 21 | 
 22 |   h1 {
 23 |     margin: 0 0 2rem;
 24 |   }
 25 | 
 26 |   p {
 27 |     margin-bottom: 5rem;
 28 |   }
 29 | `
 30 | 
 31 | export const Article = styled.article`
 32 |   width: 100%;
 33 |   max-width: 640px;
 34 |   min-height: 100vh;
 35 | 
 36 |   margin: 0 auto;
 37 | 
 38 |   display: flex;
 39 |   justify-content: center;
 40 |   align-items: center;
 41 |   flex-direction: column;
 42 | 
 43 |   ul {
 44 |     list-style: none;
 45 | 
 46 |     li {
 47 |       margin-bottom: 1rem;
 48 |     }
 49 |   }
 50 | `
 51 | export const BenefitsArticle = styled(Article)`
 52 |   h1 {
 53 |     margin-bottom: 3rem;
 54 |   }
 55 | 
 56 |   ul {
 57 |     margin-bottom: 3rem;
 58 | 
 59 |     li {
 60 |       svg {
 61 |         color: var(--primary);
 62 |       }
 63 |     }
 64 |   }
 65 | `
 66 | 
 67 | export const TutorialArticle = styled(Article)`
 68 |   display: flex;
 69 |   max-width: 900px;
 70 | 
 71 |   min-height: calc(100vh - var(--footer-height));
 72 | 
 73 |   h1 {
 74 |     width: 100%;
 75 |     font-size: 4rem;
 76 |     line-height: 3rem;
 77 |     margin-bottom: 6rem;
 78 | 
 79 |     @media (max-width: 576px) {
 80 |       font-size: 2.8rem;
 81 |     }
 82 |   }
 83 | 
 84 |   a {
 85 |     @media (max-width: 576px) {
 86 |       font-size: 1.8rem;
 87 |     }
 88 |   }
 89 | 
 90 |   h2 {
 91 |     @media (max-width: 576px) {
 92 |       font-size: 2.2rem;
 93 |     }
 94 |   }
 95 | `
 96 | 
 97 | export const ContainerOfTutorials = styled.div`
 98 |   display: flex;
 99 | 
100 |   margin-bottom: 4rem;
101 | 
102 |   @media (max-width: 576px) {
103 |     flex-direction: column;
104 | 
105 |     ol {
106 |       margin-bottom: 2rem;
107 |     }
108 |   }
109 | `
110 | 
111 | export const TutorialContainer = styled.div`
112 |   margin-right: 2rem;
113 | 
114 |   h2 {
115 |     margin-bottom: 1rem;
116 |   }
117 | 
118 |   ol {
119 |     li {
120 |       margin-bottom: 0.5rem;
121 |     }
122 |   }
123 | 
124 |   &:last-child {
125 |     margin-right: 0;
126 |   }
127 | `
128 | 


--------------------------------------------------------------------------------
/src/styles/styled.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint @typescript-eslint/no-empty-interface: "off" */
 2 | 
 3 | import 'styled-components'
 4 | 
 5 | import { theme } from './theme'
 6 | 
 7 | export type Theme = typeof theme
 8 | 
 9 | declare module 'styled-components' {
10 |   export interface DefaultTheme extends Theme {}
11 | }
12 | 


--------------------------------------------------------------------------------
/src/styles/theme.ts:
--------------------------------------------------------------------------------
 1 | export const theme = {
 2 |   font: 'Roboto, sans-serif',
 3 |   colors: {
 4 |     background: '#181818',
 5 |     text: '#e1e1e6',
 6 |     primary: '#42A539',
 7 |     secundary: '#56C5FF',
 8 |     white: '#e1e1e6',
 9 |     black: '#181818'
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve"
20 |   },
21 |   "include": [
22 |     "next-env.d.ts",
23 |     "**/*.ts",
24 |     "**/*.tsx"
25 |   ],
26 |   "exclude": [
27 |     "node_modules"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------