Skip to content

Commit

Permalink
TopBar adjusts and responsive task start
Browse files Browse the repository at this point in the history
  • Loading branch information
Molekulah committed Oct 13, 2021
1 parent 6f9dbeb commit 22bea81
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 47 deletions.
1 change: 1 addition & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const ContainedButton = styled(Button)({
height: "55px",
textTransform: "none",
});

const CardBox = styled(Box)({
display: "flex",
alignItems: "center",
Expand Down
5 changes: 2 additions & 3 deletions src/Components/TopBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ const TopBar = ({ ContainedButton, ButtonTypography }) => {
position: "sticky",
top: 0,
backgroundColor: "#fff",
height: "75px",
margin: "15px -300px 50px -100px",
height: "90px",
}}
>
<Stack
Expand All @@ -24,7 +23,7 @@ const TopBar = ({ ContainedButton, ButtonTypography }) => {
alignItems="center"
sx={{
paddingTop: "10px",
margin: "10px 200px 20px 75px",
height: "75px",
}}
>
<Stack direction="row">
Expand Down
133 changes: 89 additions & 44 deletions src/Page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const Page = ({
return (
<>
<Grid container spacing={2}>
<Grid item xs={6}>
<Grid item xg={6} md={6} xs={12}>
<Box
sx={{
display: "flex",
Expand All @@ -52,15 +52,17 @@ const Page = ({
centralize todos os atendimentos em um único lugar e tenha visão
clara de toda a comunicação com os seus clientes.
</TextTypography>
<ContainedButton variant="contained" color="primary">
<ButtonTypography href="https://app.whaticket.com/signup">
Contrate agora
</ButtonTypography>
<ContainedButton
href="https://app.whaticket.com/signup"
variant="contained"
color="primary"
>
<ButtonTypography>Contrate agora</ButtonTypography>
</ContainedButton>
</Stack>
</Box>
</Grid>
<Grid item xs={6}>
<Grid item xg={6} md={6} xs={12}>
<Box
sx={{
display: "flex",
Expand All @@ -75,7 +77,7 @@ const Page = ({
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid item xs={6} sx={{ paddingBottom: "150px" }}>
<Grid item xg={6} md={6} xs={12} sx={{ paddingBottom: "150px" }}>
<Box
sx={{
display: "flex",
Expand All @@ -99,7 +101,7 @@ const Page = ({
</Stack>
</Box>
</Grid>
<Grid item xs={6}>
<Grid item xg={6} md={6} xs={12}>
<Box
sx={{
display: "flex",
Expand All @@ -116,7 +118,7 @@ const Page = ({
</Grid>
</Grid>
<Grid container spacing={10} sx={{ paddingBottom: "200px" }}>
<Grid item xs={4}>
<Grid item xg={4} md={4} xs={12}>
<Box
sx={{
display: "flex",
Expand All @@ -139,7 +141,7 @@ const Page = ({
</TextTypography>
</Stack>
</Grid>
<Grid item xs={4}>
<Grid item xg={4} md={4} xs={12}>
<Box
sx={{
display: "flex",
Expand All @@ -158,7 +160,7 @@ const Page = ({
</TextTypography>
</Stack>
</Grid>
<Grid item xs={4}>
<Grid item xg={4} md={4} xs={12}>
<Box
sx={{
display: "flex",
Expand All @@ -181,7 +183,7 @@ const Page = ({
</Stack>
</Grid>

<Grid item xs={4}>
<Grid item xg={4} md={4} xs={12}>
<CardBox>
<Stack direction="column" spacing={2}>
<CardSubtitleTypography>
Expand All @@ -195,7 +197,7 @@ const Page = ({
</Stack>
</CardBox>
</Grid>
<Grid item xs={4}>
<Grid item xg={4} md={4} xs={12}>
<CardBox>
<Stack direction="column" spacing={2}>
<CardSubtitleTypography>
Expand All @@ -210,7 +212,7 @@ const Page = ({
</Stack>
</CardBox>
</Grid>
<Grid item xs={4}>
<Grid item xg={4} md={4} xs={12}>
<CardBox>
<Stack direction="column" spacing={2}>
<CardSubtitleTypography>
Expand Down Expand Up @@ -252,7 +254,7 @@ const Page = ({
</Grid>

<Grid container spacing={2} sx={{ paddingBottom: "200px" }}>
<Grid item xs={6}>
<Grid item xg={6} md={6} xs={12}>
<SubtitleTypography>
Interface amigável para sua equipe trabalhar sem complicação
</SubtitleTypography>
Expand All @@ -265,7 +267,9 @@ const Page = ({
</Grid>
<Grid
item
xs={6}
xg={6}
md={6}
xs={12}
sx={{
display: "flex",
alignItems: "center",
Expand All @@ -280,7 +284,7 @@ const Page = ({
<img src={whaticketPrint} alt=""></img>
</Box>

<Grid container spacing={2}>
<Stack direction="column">
<Box
sx={{
letterSpacing: "0.025em",
Expand All @@ -305,16 +309,21 @@ const Page = ({
fontSize: "20px",
fontWeight: "400",
lineHeight: "27px",
width: "450px",
marginLeft: "auto",
marginRight: "auto",
}}
>
Crie um plano personalizado de acordo com a sua necessidade. Todos
os recursos estão disponíveis em todos os planos. Não importa o
tamanho da sua empresa, estamos aqui para te ajudar a modernizar o
seu atendimento.
</TextTypography>
</TextTypography>{" "}
</Box>

<Grid item xs={4} sx={{ zIndex: "20" }}>
</Stack>
<br />
<Grid container spacing={2}>
<Grid item xg={4} md={4} xs={12} sx={{ zIndex: "20" }}>
<Card sx={{ maxWidth: 345, borderRadius: "20px 20px 20px 20px" }}>
<Box
sx={{
Expand Down Expand Up @@ -354,41 +363,53 @@ const Page = ({

<PriceListStack direction="row">
<img src={lightBlueCheck} alt=""></img>
<TextTypography>Versão de código aberto</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Versão de código aberto
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightBlueCheck} alt=""></img>
<TextTypography>Instalação por sua conta</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Instalação por sua conta
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightBlueCheck} alt=""></img>
<TextTypography>Sem atualizações constantes</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Sem atualizações constantes
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightBlueCheck} alt=""></img>
<TextTypography>Sem suporte oficial</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Sem suporte oficial
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightBlueCheck} alt=""></img>
<TextTypography>Comunidade no GitHub</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Comunidade no GitHub
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightBlueCheck} alt=""></img>
<TextTypography>Funcionalidades básicas</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Funcionalidades básicas
</TextTypography>
</PriceListStack>

<ContainedButton
sx={{ marginTop: "25px" }}
variant="contained"
href="aaaaaaaaaaaaaaaaaaaaa"
href="https://github.com/canove/whaticket"
color="success"
>
<ButtonTypography> GitHub </ButtonTypography>
</ContainedButton>
</CardContent>
</Card>
</Grid>
<Grid item xs={4} sx={{ zIndex: "20" }}>
<Grid item xg={4} md={4} xs={12} sx={{ zIndex: "20" }}>
<Card
sx={{
maxWidth: 345,
Expand Down Expand Up @@ -444,33 +465,45 @@ const Page = ({

<PriceListStack direction="row">
<img src={lightGreenCheck} alt=""></img>
<TextTypography>Ativação imediata</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Ativação imediata
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightGreenCheck} alt=""></img>
<TextTypography>3 usuários simultâneos</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
3 usuários simultâneos
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightGreenCheck} alt=""></img>
<TextTypography>1 conexão com whatsapp</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
1 conexão com whatsapp
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightGreenCheck} alt=""></img>
<TextTypography>Chatbot multinível ilimitado</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Chatbot multinível ilimitado
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightGreenCheck} alt=""></img>
<TextTypography>Respostas rápidas</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Respostas rápidas
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={lightGreenCheck} alt=""></img>
<TextTypography>Relatórios</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Relatórios
</TextTypography>
</PriceListStack>

<ContainedButton
sx={{ marginTop: "25px", textAlign: "center" }}
variant="contained"
href="aaaaaaaaaaaaaaaaaaaaa"
href="https://app.whaticket.com/signup"
color="warning"
>
<ButtonTypography sx={{ color: "#fff" }}>
Expand All @@ -481,7 +514,7 @@ const Page = ({
</CardContent>
</Card>
</Grid>
<Grid item xs={4} sx={{ zIndex: "20" }}>
<Grid item xg={4} md={4} xs={12} sx={{ zIndex: "20" }}>
<Card sx={{ maxWidth: 345, borderRadius: "20px 20px 20px 20px" }}>
<Box
sx={{
Expand Down Expand Up @@ -521,33 +554,45 @@ const Page = ({

<PriceListStack direction="row">
<img src={darkCheck} alt=""></img>
<TextTypography>Ativação imediata</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Ativação imediata
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={darkCheck} alt=""></img>
<TextTypography>8 usuários simultâneos</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
8 usuários simultâneos
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={darkCheck} alt=""></img>
<TextTypography>2 conexões com Whatsapp</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
2 conexões com Whatsapp
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={darkCheck} alt=""></img>
<TextTypography>Chatbot multinível ilimitado</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Chatbot multinível ilimitado
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={darkCheck} alt=""></img>
<TextTypography>Respostas rápidas</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Respostas rápidas
</TextTypography>
</PriceListStack>
<PriceListStack direction="row">
<img src={darkCheck} alt=""></img>
<TextTypography>Relatórios</TextTypography>
<TextTypography sx={{ marginRight: "auto" }}>
Relatórios
</TextTypography>
</PriceListStack>

<ContainedButton
sx={{ marginTop: "10px" }}
sx={{ marginTop: "25px" }}
variant="contained"
href="aaaaaaaaaaaaaaaaaaaaa"
href="https://app.whaticket.com/signup"
color="danger"
>
<ButtonTypography
Expand Down

0 comments on commit 22bea81

Please sign in to comment.