Adicionando Readme.md

brunobach · Aug 4, 2020 · dd8db38 · dd8db38
1 parent bd17067
commit dd8db38
Show file tree

Hide file tree

Showing 16 changed files with 582 additions and 169 deletions.
diff --git a/web/package.json b/web/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "web",
+  "name": "proffy-nlw",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -12,6 +12,7 @@
     "@types/react-dom": "^16.9.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "typescript": "~3.7.2"
   },
@@ -35,5 +36,24 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "description": "Proffy é uma plataforma de estudos online, onde será possível conectar aluno-professor. Poderão ser agendados horários para estudos junto ao calendário disponibilizado pelo professor.",
+  "main": "index.tsx",
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brunobach/Proffy.git"
+  },
+  "keywords": [
+    "nlw"
+  ],
+  "author": "Bruno Bach",
+  "Linkedin": "https://www.linkedin.com/in/bruno-bach/",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/brunobach/Proffy/issues"
+  },
+  "homepage": "https://github.com/brunobach/Proffy#readme"
 }
diff --git a/web/public/index.html b/web/public/index.html
@@ -3,12 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+
     <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&family=Poppins&display=swap" rel="stylesheet">
-    <title>React App</title>
+
+    <title>Proffy</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>Você precisa habilitar o javascript para visualizar a pagina.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/web/public/robots.txt b/web/public/robots.txt
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import './assets/styles/global.css'
-
-import Landing from './pages/Landing'
+import './assets/styles/global.css';
+import Routes from './routes';
 
 function App() {
   return (
-   <Landing />
+    <Routes />
   );
 }
 

diff --git a/web/src/assets/styles/global.css b/web/src/assets/styles/global.css
@@ -1,61 +1,62 @@
 :root {
-    --color-background: #F0F0F7;
-    --color-primary-lighter: #9871F5;
-    --color-primary-light: #916BEA;
-    --color-primary: #8257E5;
-    --color-primary-dark: #774DD6;
-    --color-primary-darker: #6842C2;
-    --color-secundary: #04D361;
-    --color-secundary-dark: #04BF58;
-    --color-title-in-primary: #FFFFFF;
-    --color-text-in-primary: #D4C2FF;
-    --color-text-title: #32264D;
-    --color-text-complement: #9C98A6;
-    --color-text-base: #6A6180;
-    --color-line-in-white: #E6E6F0;
-    --color-input-background: #F8F8FC;
-    --color-button-text: #FFFFFF;
-    --color-box-base: #FFFFFF;
-    --color-box-footer: #FAFAFC;
-  
-    font-size: 60%;
+  --color-background: #F0F0F7;
+  --color-primary-lighter: #9871F5;
+  --color-primary-light: #916BEA;
+  --color-primary: #8257E5;
+  --color-primary-dark: #774DD6;
+  --color-primary-darker: #6842C2;
+  --color-secundary: #04D361;
+  --color-secundary-dark: #04BF58;
+  --color-title-in-primary: #FFFFFF;
+  --color-text-in-primary: #D4C2FF;
+  --color-text-title: #32264D;
+  --color-text-complement: #9C98A6;
+  --color-text-base: #6A6180;
+  --color-line-in-white: #E6E6F0;
+  --color-input-background: #F8F8FC;
+  --color-button-text: #FFFFFF;
+  --color-box-base: #FFFFFF;
+  --color-box-footer: #FAFAFC;
+
+  font-size: 60%;
 }
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
 }
 
-html, body #root {
-    height: 100vh;
+html, body, #root {
+  height: 100vh;
 }
 
 body {
-    background: var(--color-background);
+  background: var(--color-background);
 }
 
 #root {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 body,
 input,
 button,
 textarea {
-    font: 500 1.6rem Poppins;
+  font: 500 1.6rem Poppins;
+  color: var(--color-text-base);
 }
 
 .container {
-    width: 90vw;
-    max-width: 700px;
+  width: 90vw;
+  max-width: 700px;
 }
 
-@media (min-width: 700px){
-    :root {
-        font-size: 62.5%;
-    }
+@media (min-width: 700px) {
+  :root {
+    font-size: 62.5%;
+  }
 }
diff --git a/web/src/components/PageHeader/index.tsx b/web/src/components/PageHeader/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import logoImg from '../../assets/images/logo.svg';
+import backIcon from '../../assets/images/icons/back.svg';
+
+import './styles.css'
+
+interface PageHeaderProps {
+  title: string;
+}
+
+const PageHeader: React.FC<PageHeaderProps> = ({title, children}) => {
+  return (
+    <header className="page-header">
+      <div className="top-bar-container">
+        <Link to="/">
+          <img src={backIcon} alt="Voltar"/>
+        </Link>
+        <img src={logoImg} alt="Proffy Logo"/>
+      </div>
+
+      <div className="header-content">
+        <strong>{title}</strong>
+
+        {children}
+      </div>
+    </header>
+  );
+}
+
+export default PageHeader;
diff --git a/web/src/components/PageHeader/styles.css b/web/src/components/PageHeader/styles.css
@@ -0,0 +1,66 @@
+.page-header {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-primary);
+}
+
+.page-header .top-bar-container {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--color-text-in-primary);
+  padding: 1.6rem 0;
+}
+
+.page-header .top-bar-container a {
+  height: 3.2rem;
+  transition: opacity 0.2s;
+}
+
+.page-header .top-bar-container a:hover {
+  opacity: 0.6;
+}
+
+.page-header .top-bar-container > img {
+  height: 1.6rem;
+}
+
+.page-header .header-content {
+  width: 90%;
+  margin: 0 auto;
+  position: relative;
+  margin: 3.2rem auto;
+}
+
+.page-header .header-content strong {
+  font: 700 3.6rem Archivo;
+  line-height: 4.2rem;
+  color: var(--color-title-in-primary);
+}
+
+@media (min-width: 700px) {
+  .page-header {
+    height: 340px;
+  }
+
+  .page-header .top-bar-container {
+    max-width: 1100px;
+  }
+
+  .page-header .header-content {
+    flex: 1;
+    max-width: 740px;
+    margin: 0 auto;
+    padding-bottom: 48px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .page-header .header-content strong{
+    max-width: 350px;
+  }
+}
diff --git a/web/src/components/TeacherItem/index.tsx b/web/src/components/TeacherItem/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './styles.css';
+
+import whatsappIcon from '../../assets/images/icons/whatsapp.svg';
+
+function TeacherItem() {
+  return (
+    <article className="teacher-item">
+      <header>
+        <img src="https://avatars0.githubusercontent.com/u/42494225?s=460&u=9ac9e5fdec30c7dea8afefd9917ee12cc356bad4&v=4" alt="Bruno Bach"/>
+        <div>
+          <strong>Bruno Bach</strong>
+          <span>Matemática</span>
+        </div>
+      </header>
+      <p>
+        Aulas de Matemática bem estruturadas e expositiva.
+        <br /> <br />
+        Estude para o ENEM e Vestibulares no Melhor Cursinho com o Melhor Preço. Pague em até 12x. ENEM com a melhor preparação. Parcelas por menos de R$ 15 reais. 
+      </p>
+
+      <footer>
+        <p>
+          Preço/hora
+          <strong>R$ 15,00</strong>
+        </p>
+        <button type="button">
+          <img src={whatsappIcon} alt="Whatsapp"/>
+          Entrar em Contato
+        </button>
+      </footer>
+    </article>
+  );
+}
+
+export default TeacherItem;