diff --git a/src/components/Footer.js b/src/components/Footer.js
index 3b78382..b8347c1 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -2,7 +2,7 @@ import React from 'react'
import styled from 'styled-components'
const ContainerFooter = styled.div`
-height: 10vh;
+height: 50px;
position: fixed;
bottom: 0;
background-color: #2B2D2F;
diff --git a/src/components/Home.js b/src/components/Home.js
index ea253a0..915a24f 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -7,7 +7,7 @@ const AreaHome = styled.div`
width: 100vw;
height: 38vh;
display: grid;
- grid-template-columns: 1fr 4fr 2fr 3fr;
+ grid-template-columns: 0.5fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr ;
grid-gap: 0px 0px;
`
@@ -18,6 +18,7 @@ const H2 = styled.h2`
display: grid;
grid-column: 2/3;
font-weight: lighter;
+ align-items: center;
`
const H4 = styled.h4`
@@ -26,26 +27,31 @@ const H4 = styled.h4`
font-family: 'helvetica';
display: grid;
grid-column: 2/4;
- grid-row: 2/3;
+ grid-row: 2/4;
+
`
const ButtonHeader = styled.button`
- height: 40px;
- width: 200px;
- background-color: black;
- color: #FFF;
+ height: 80px;
+ width: 400px;
+ font-size: 1.2em;
+ font-weight: bold;
+ align-items: center;
+ background-color: #FF7F50;
+ color: #2B2D2F;
border: none;
- border-radius: 10px;
+ border-radius: 5px;
cursor: pointer;
outline:none;
:hover{
- background-color: #FFEA52;
- color: #474117;
+ background-color: #F83F2C;
+ color: #FFF;
}
display: grid;
- grid-column: 4/4;
- grid-row: 2/2;
+ grid-column: 4/5;
+ grid-row: 1/3;
padding: 4px;
+ align-self: center;
`
class Home extends React.Component {
@@ -60,15 +66,15 @@ class Home extends React.Component {
return (
- O jeito mais esperto de contratar um serviço
+ O jeito mais esperto de contratar um serviço!
Fale o que precisa, receba orçamentos e escolha o melhor.
- QUERO UM PROFISSIONAL AGORA
+ QUERO UM PROFISSIONAL AGORA!
Você é profissional?
- Venha, faça seu anúncio gratuito e amplie seus negócios e sua atuação no mercado
- CADASTRAR MEUS SERVIÇOS
+ Venha, faça seu anúncio gratuito e amplie seus negócios e sua atuação no mercado.
+ CADASTRAR MEUS SERVIÇOS!
)
diff --git a/src/components/servicos/CardServico.js b/src/components/servicos/CardServico.js
index 855ac3d..13a835c 100644
--- a/src/components/servicos/CardServico.js
+++ b/src/components/servicos/CardServico.js
@@ -7,7 +7,7 @@ const ContainerCard = styled.div`
border: 1px solid #b2aeae;
padding: 16px;
width: 90%;
-height: 50vh;
+height: 100%;
margin: 0 auto;
display: grid;
grid-row: repeat(7, 1fr);
@@ -16,11 +16,16 @@ grid-row: repeat(7, 1fr);
const H2Card = styled.h2`
margin: 0;
padding: 0;
+padding-bottom: 10px;
+border-bottom: 1px solid black;
+text-align: center;
`
const H3Card = styled.h3`
margin: 0;
padding: 0;
+padding-bottom: 15px;
+padding-top: 8px;
font-size: 16px;
font-weight: 600;
`
@@ -32,8 +37,8 @@ const ButtonCr = styled.button`
width: 200px;
background-color: ${props => props.cor};
color: ${props => props.texto};
- border: none;
- border-radius: 10px;
+ border: ${props => props.border};
+ border-radius: ${props => props.borderRadius};
cursor: pointer;
outline:none;
:hover{
@@ -99,7 +104,7 @@ class CardServico extends React.Component {
{this.props.lista.map((servico) => {
- const renderizaBotao = servico.taken === true ? "Descandidatar-me" : "Candidatar-me"
+ const renderizaBotao = servico.taken === true ? "DESCANDIDATAR-ME" : "CANDIDATAR-ME"
if (servico.taken) {
return (
@@ -111,7 +116,7 @@ class CardServico extends React.Component {
Pagamento: {servico.paymentMethods.map((metodo) => {
return (`${metodo}; `)
})}
- this.onClickDescandidatar(servico.id)}> {renderizaBotao}
+ this.onClickDescandidatar(servico.id)}> {renderizaBotao}
)
} else {
@@ -124,7 +129,7 @@ class CardServico extends React.Component {
Pagamento: {servico.paymentMethods.map((metodo) => {
return (`${metodo}; `)
})}
- this.onClickCandidatar(servico.id)}> {renderizaBotao}
+ this.onClickCandidatar(servico.id)}> {renderizaBotao}
)
}