Confirm Page and fonts added

martinsvinicius · Nov 15, 2020 · 53bd043 · 53bd043
1 parent 6e33b32
commit 53bd043
Show file tree

Hide file tree

Showing 20 changed files with 270 additions and 23 deletions.
diff --git a/debug.log b/debug.log
diff --git a/package.json b/package.json
@@ -12,8 +12,10 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.4",
+    "leaflet": "^1.7.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-leaflet": "^3.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "styled-components": "^5.2.1",
@@ -43,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.5.19"
   }
 }
diff --git a/src/Components/Input/styles.ts b/src/Components/Input/styles.ts
@@ -12,7 +12,6 @@ export const Container = styled.input<InputProps>`
   background: ${(props) => props.backgroundColor ? props.backgroundColor : "#FFFFFF"};
   padding: 1.4em;
   font-size: 14px;
-  color: #BABABA;
   font-weight: normal;
 
   :hover {

diff --git a/src/assets/fonts/uber/UberMove-Bold.TTF b/src/assets/fonts/uber/UberMove-Bold.TTF
diff --git a/src/assets/fonts/uber/UberMove-Light.ttf b/src/assets/fonts/uber/UberMove-Light.ttf
diff --git a/src/assets/fonts/uber/UberMove-Medium.TTF b/src/assets/fonts/uber/UberMove-Medium.TTF
diff --git a/src/assets/fonts/uber/UberMove-Regular.TTF b/src/assets/fonts/uber/UberMove-Regular.TTF
diff --git a/src/assets/fonts/uber/UberMoveText-Bold.ttf b/src/assets/fonts/uber/UberMoveText-Bold.ttf
diff --git a/src/assets/fonts/uber/UberMoveText-Light.TTF b/src/assets/fonts/uber/UberMoveText-Light.TTF
diff --git a/src/assets/fonts/uber/UberMoveText-Medium.ttf b/src/assets/fonts/uber/UberMoveText-Medium.ttf
diff --git a/src/assets/fonts/uber/UberMoveText-Regular.ttf b/src/assets/fonts/uber/UberMoveText-Regular.ttf
diff --git a/src/assets/images/confirm-background.png b/src/assets/images/confirm-background.png
diff --git a/src/assets/images/illustration-driver.svg b/src/assets/images/illustration-driver.svg
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
@@ -1,3 +1,8 @@
+@font-face {
+  font-family: Uber-Regular;
+  src: url('../fonts/uber/UberMove-Regular.TTF');
+}
+
 :root {
   font-size: 60%;
 }
@@ -9,11 +14,11 @@
 }
 
 body, input, button, textarea, select {
-  font-family: Arial, sans-serif;
+  font-family: Uber-Regular, Arial, sans-serif;
   font-weight: 500;
   font-size: 1.6rem;
 }
 
 body {
   background: #ebf2f5;
-}
+}
diff --git a/src/pages/Confirm/index.tsx b/src/pages/Confirm/index.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { Link } from 'react-router-dom';
+
+import Button from "../../Components/Button";
+
+import Logo from "../../assets/images/logoUberCare.svg";
+import nextIcon from "../../assets/images/next.svg";
+import driver from '../../assets/images/illustration-driver.svg';
+
+import { Container, Content, Image, Form } from "./styles";
+
+const Confirm: React.FC = () => {
+  return (
+    <Container>
+      <Content>
+        <Link to="/">
+          <img className="logoImage" src={Logo} alt="UberCare Logo" />
+        </Link>
+        <div className="flex">
+          <div className="info">
+            <p>
+              Cadastro Completo<br/>com sucesso!
+            </p>
+            <span>Em breve a nossa equipe entrará em contato com você para prosseguir com o Cadastro.</span>
+          </div>
+          <div className="form">
+            <Form>
+              <img src={driver} alt=""/>
+
+              <div className="btn">
+                <Button
+                  to="/"
+                  text="Continuar"
+                  iconURL={nextIcon}
+                  iconALT="Próximo"
+                />
+              </div>
+            </Form>
+          </div>
+        </div>
+      </Content>
+      <Image />
+    </Container>
+  );
+};
+
+export default Confirm;
diff --git a/src/pages/Confirm/styles.ts b/src/pages/Confirm/styles.ts
@@ -0,0 +1,63 @@
+import styled from "styled-components";
+
+import confirmBackground from "../../assets/images/confirm-background.png";
+
+export const Container = styled.div`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const Content = styled.div`
+  background: #fff;
+  height: 100%;
+
+  .logoImage {
+    margin: 6em 11.5em 0 11.5em;
+  }
+
+  .flex {
+    display: flex;
+    padding: 3.5em;
+    margin: 0 8em;
+    margin-top: 3em;
+    align-items: center;
+    justify-content: space-between;
+
+    .info {
+      font-weight: 400;
+      font-size: 48px;
+      width: 50%;
+
+      span {
+        margin-top: 1em;
+        font-size: 18px;
+        line-height: 1.7em;
+        display: block;
+      }
+    }
+  }
+`;
+
+export const Form = styled.form`
+  background: #F8F8F8;
+  border-top: 1em #EBEBEB solid;
+  width: 450px;
+  margin-bottom: -23em;
+  position: relative;
+  height: 500px;
+
+  
+
+  .btn {
+    margin-top: 2.5em;
+    padding: 2.5em;
+  }
+`;
+
+export const Image = styled.div`
+  background: #fff url(${confirmBackground}) no-repeat center;
+  background-size: cover;
+  height: 100%;
+`;
diff --git a/src/pages/Hospital/index.tsx b/src/pages/Hospital/index.tsx
@@ -1,39 +1,72 @@
 import React from "react";
 
 import Input from "../../Components/Input";
-import Button from '../../Components/Button';
+import Button from "../../Components/Button";
 
 import Logo from "../../assets/images/logoUberCare.svg";
-import nextIcon from '../../assets/images/next.svg';
+import nextIcon from "../../assets/images/next.svg";
 
 import { Container, Content, Image, Form } from "./styles";
+import { Link } from "react-router-dom";
 
 const Hospital: React.FC = () => {
   return (
     <Container>
       <Content>
-        <img className="logoImage" src={Logo} alt="UberCare Logo" />
+        <Link to="/">
+          <img className="logoImage" src={Logo} alt="UberCare Logo" />
+        </Link>
         <div className="flex">
           <div className="info">
             <p>
-              Receba pacientes <br/> de forma rápida e <br/> segura
+              Receba pacientes <br /> de forma rápida e <br /> segura
             </p>
           </div>
           <div className="form">
             <Form>
               <p>Cadastre-se agora</p>
 
               <div className="inputs">
-                <Input placeholder="Nome do Hospital" type="email" required={true} autoComplete="none" />
-                <Input placeholder="Responsável" type="text" required={true} autoComplete="none" />
+                <Input
+                  placeholder="Nome do Hospital"
+                  type="email"
+                  required={true}
+                  autoComplete="none"
+                />
+                <Input
+                  placeholder="Responsável"
+                  type="text"
+                  required={true}
+                  autoComplete="none"
+                />
                 <span className="divisor"></span>
-                <Input placeholder="Cidade" type="text" required={true} autoComplete="none" />
-                <Input placeholder="Endereço" type="text" required={true} autoComplete="none" />
-                <Input placeholder="Contato" type="text" required={true} autoComplete="none" />
+                <Input
+                  placeholder="Cidade"
+                  type="text"
+                  required={true}
+                  autoComplete="none"
+                />
+                <Input
+                  placeholder="Endereço"
+                  type="text"
+                  required={true}
+                  autoComplete="none"
+                />
+                <Input
+                  placeholder="Contato"
+                  type="text"
+                  required={true}
+                  autoComplete="none"
+                />
               </div>
 
               <div className="btn">
-                <Button to="/" text="Avançar" iconURL={nextIcon} iconALT="Próximo" />
+                <Button
+                  to="/"
+                  text="Avançar"
+                  iconURL={nextIcon}
+                  iconALT="Próximo"
+                />
               </div>
             </Form>
           </div>

diff --git a/src/pages/UberCare/index.tsx b/src/pages/UberCare/index.tsx
@@ -1,18 +1,21 @@
 import React from "react";
+import { Link } from 'react-router-dom';
 
 import Input from "../../Components/Input";
-import Button from '../../Components/Button';
+import Button from "../../Components/Button";
 
 import Logo from "../../assets/images/logoUberCare.svg";
-import nextIcon from '../../assets/images/next.svg';
+import nextIcon from "../../assets/images/next.svg";
 
 import { Container, Content, Image, Form } from "./styles";
 
 const UberCare: React.FC = () => {
   return (
     <Container>
       <Content>
-        <img className="logoImage" src={Logo} alt="UberCare Logo" />
+        <Link to="/">
+          <img className="logoImage" src={Logo} alt="UberCare Logo" />
+        </Link>
         <div className="flex">
           <div className="info">
             <p>
@@ -24,17 +27,47 @@ const UberCare: React.FC = () => {
               <p>Cadastre-se agora</p>
 
               <div className="inputs">
-                <Input placeholder="E-mail" type="email" required={true} autoComplete="none" />
+                <Input
+                  placeholder="E-mail"
+                  type="email"
+                  required={true}
+                  autoComplete="none"
+                />
                 <span className="divisor"></span>
-                <Input placeholder="Nome completo" type="text" required={true} autoComplete="none" />
-                <Input placeholder="Telefone" type="text" required={true} autoComplete="none" />
-                <Input placeholder="Criar Senha" type="password" required={true} min={6} />
+                <Input
+                  placeholder="Nome completo"
+                  type="text"
+                  required={true}
+                  autoComplete="none"
+                />
+                <Input
+                  placeholder="Telefone"
+                  type="text"
+                  required={true}
+                  autoComplete="none"
+                />
+                <Input
+                  placeholder="Criar Senha"
+                  type="password"
+                  required={true}
+                  min={6}
+                />
                 <span className="divisor"></span>
-                <Input placeholder="Cidade" type="text" required={true} autoComplete="none" />
+                <Input
+                  placeholder="Cidade"
+                  type="text"
+                  required={true}
+                  autoComplete="none"
+                />
               </div>
 
               <div className="btn">
-                <Button to="/" text="Avançar" iconURL={nextIcon} iconALT="Próximo" />
+                <Button
+                  to="/confirm"
+                  text="Avançar"
+                  iconURL={nextIcon}
+                  iconALT="Próximo"
+                />
               </div>
             </Form>
           </div>

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -4,6 +4,7 @@ import { Route, BrowserRouter, Switch } from 'react-router-dom';
 import Landing from './pages/Landing';
 import UberCare from './pages/UberCare';
 import Hospital from './pages/Hospital';
+import Confirm from './pages/Confirm';
 
 function Routes() {
   return (
@@ -12,9 +13,10 @@ function Routes() {
         <Route path="/" exact component={Landing} />
         <Route path="/ubercare" component={UberCare} />
         <Route path="/hospital" component={Hospital} />
+        <Route path="/confirm" component={Confirm} />
       </Switch>
     </BrowserRouter>
   );
 }
 
-export default Routes;
+export default Routes;