From bdfdbb106cba47ba923c48d6b5918fcb7b3651ef Mon Sep 17 00:00:00 2001 From: Luiz Bello <88148849+luizpbello@users.noreply.github.com> Date: Fri, 14 Jul 2023 15:37:08 -0300 Subject: [PATCH 1/3] Revert "Merge from development" --- .eslintrc.json | 3 +- src/assets/bxl-facebook.svg | 5 - src/assets/bxl-instagram.svg | 7 - src/assets/bxl-linkedin.svg | 6 - src/assets/bxl-twitter.svg | 3 - .../Buttons/AvaliarEmpresa.styled.ts | 37 -- src/components/Buttons/AvaliarEmpresa.tsx | 12 - src/components/Footer/index.tsx | 54 +-- src/components/Footer/style.ts | 85 ++--- src/components/Header/Header.tsx | 15 +- src/components/Header/style.ts | 21 +- src/components/styles/Flex.styled.ts | 14 - src/components/styles/Wrapper.styled.ts | 7 - src/pages/Home/Avaliar/style.ts | 165 ++++----- src/pages/Home/Inicio/HeroSection.styled.ts | 114 ------- src/pages/Home/Inicio/HeroSection.tsx | 49 --- src/pages/Home/Inicio/index.tsx | 42 +++ src/pages/Home/Inicio/style.ts | 63 ++++ src/pages/Home/Reputacao/index.tsx | 28 +- src/pages/Home/Reputacao/style.ts | 229 ++++++------- src/pages/Home/Sobre/{About.tsx => index.tsx} | 18 +- .../Home/Sobre/{About.styled.ts => style.ts} | 124 +++---- src/pages/Home/index.tsx | 21 +- src/themes/themes.ts | 321 ++++++++---------- 24 files changed, 555 insertions(+), 888 deletions(-) delete mode 100644 src/assets/bxl-facebook.svg delete mode 100644 src/assets/bxl-instagram.svg delete mode 100644 src/assets/bxl-linkedin.svg delete mode 100644 src/assets/bxl-twitter.svg delete mode 100644 src/components/Buttons/AvaliarEmpresa.styled.ts delete mode 100644 src/components/Buttons/AvaliarEmpresa.tsx delete mode 100644 src/components/styles/Flex.styled.ts delete mode 100644 src/components/styles/Wrapper.styled.ts delete mode 100644 src/pages/Home/Inicio/HeroSection.styled.ts delete mode 100644 src/pages/Home/Inicio/HeroSection.tsx create mode 100644 src/pages/Home/Inicio/index.tsx create mode 100644 src/pages/Home/Inicio/style.ts rename src/pages/Home/Sobre/{About.tsx => index.tsx} (88%) rename src/pages/Home/Sobre/{About.styled.ts => style.ts} (54%) diff --git a/.eslintrc.json b/.eslintrc.json index 1ce6e35..4adeb9c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -11,8 +11,7 @@ ], "parserOptions": { "ecmaVersion": "latest", - "sourceType": "module", - "project": "./tsconfig.json" + "sourceType": "module" }, "plugins": [ "react" diff --git a/src/assets/bxl-facebook.svg b/src/assets/bxl-facebook.svg deleted file mode 100644 index 9e0f30b..0000000 --- a/src/assets/bxl-facebook.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/bxl-instagram.svg b/src/assets/bxl-instagram.svg deleted file mode 100644 index 3e087a7..0000000 --- a/src/assets/bxl-instagram.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/assets/bxl-linkedin.svg b/src/assets/bxl-linkedin.svg deleted file mode 100644 index 712e22d..0000000 --- a/src/assets/bxl-linkedin.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/bxl-twitter.svg b/src/assets/bxl-twitter.svg deleted file mode 100644 index 5aeef31..0000000 --- a/src/assets/bxl-twitter.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Buttons/AvaliarEmpresa.styled.ts b/src/components/Buttons/AvaliarEmpresa.styled.ts deleted file mode 100644 index b345742..0000000 --- a/src/components/Buttons/AvaliarEmpresa.styled.ts +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components' - -export const AvaliarEmpresaButton = styled.button` - all: unset; - width: 222px; - border-radius: 8px; - text-align: center; - color: white; - font-size: 16px; - line-height: 16px; - font-weight: 500; - background: #013a37; - text-transform: uppercase; - padding: 12px 0; - cursor: pointer; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - width: 276px; - font-size: 20px; - line-height: 20px; - padding: 16px 0; - } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - all: unset; - border-radius: 8px; - text-align: center; - color: white; - width: 320px; - font-size: 24px; - line-height: 16px; - font-weight: 500; - background: #013a37; - text-transform: uppercase; - padding: 24px 6px; - } -` diff --git a/src/components/Buttons/AvaliarEmpresa.tsx b/src/components/Buttons/AvaliarEmpresa.tsx deleted file mode 100644 index 17d2852..0000000 --- a/src/components/Buttons/AvaliarEmpresa.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { AvaliarEmpresaButton } from './AvaliarEmpresa.styled' - -const AvaliarEmpresa: React.FC = () => { - return ( - - Avaliar Uma Empresa - - ) -} - -export default AvaliarEmpresa diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 32a4efa..d640d37 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,47 +1,13 @@ -import React from 'react' -import { - FooterContact, - FooterContainer, - FooterContainerContactTerms, - FooterLogo, - FooterMsg, FooterMsgContainer, - FooterSocials, - FooterTerms -} from './style' -import logo from '../../assets/Logo.png' -import facebookIcon from '../../assets/bxl-facebook.svg' -import instagramIcon from '../../assets/bxl-instagram.svg' -import linkedinIcon from '../../assets/bxl-linkedin.svg' -import twitterIcon from '../../assets/bxl-twitter.svg' +import { FooterContainer, FooterLogo, FooterMsg } from "./style"; +import logo from "../../assets/Logo.png"; export const Footer: React.FC = () => { return ( - <> - - - - -

Contato

-

(00) 0000-0000

-

usuario@gmail.com

- - -

Politica e privacidade

-

Termos de uso

- - - - - - - - - - - - Copyright 2023 Techrate. Todos os direitos reservados. - - - - ) -} + + + + Copyright 2023 Techrate. Todos os direitos reservados. + + + ); +}; diff --git a/src/components/Footer/style.ts b/src/components/Footer/style.ts index 3d8e3a3..23bb829 100644 --- a/src/components/Footer/style.ts +++ b/src/components/Footer/style.ts @@ -1,82 +1,35 @@ -import styled from 'styled-components' - -export const FooterContainer = styled.footer` - margin-top: 80px; - margin-inline: 20px; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - display: flex; - } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - margin-inline: 112px; - } - +import styled from "styled-components"; +export const FooterContainer = styled.footer ` +display:flex; +justify-content:space-around; +width:100%; +height:120px; +padding:20px 0px; +margin-top:60px; +@media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + margin-top:50px; + height:90px; +} -export const FooterLogo = styled.img` - width: 160px; - height: 50px; - object-fit: cover; - margin-bottom: 12px; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - margin-right: 24px; - } -` -export const FooterMsg = styled.span` - width: 90%; - color: ${(props) => props.theme.colors.grey.dark}; - font-family: Poppins; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 150%; /* 21px */ ` -export const FooterMsgContainer = styled.div` - padding-top: 40px; - text-align: center; - margin-inline: auto; +export const FooterLogo = styled.img ` +width: 160px; + height: 50px; + margin-left: 100px; -export const FooterSocials = styled.div` - display: flex; - gap: 24px; - margin-top: 32px; - margin-bottom: 40px; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - margin-left: 50px; - margin-top: 12px; - align-self: flex-start; - } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - margin-left: 424px; - margin-top: 12px; - align-self: flex-start; - } ` -export const FooterContact = styled.div` - p { - margin-top: 12px; - } +export const FooterMsg = styled.span ` +color: ${(props) => props.theme.colors.grey.dark}; +font-size: ${(props) => props.theme.typography.headline6} -export const FooterTerms = styled.div` - p { - margin-top: 12px; - } ` -export const FooterContainerContactTerms = styled.div` - display: flex; - flex-wrap: wrap; - gap: 53px; -` diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index d8db227..548fed7 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,14 +1,15 @@ -import { StyledHeader, StyledLogo, Logo } from './style' +import { StyledHeader, StyledLogo, Logo } from "./style"; import logo from '../../assets/Logo.png' const Header: React.FC = () => { + return ( - - - + + + - ) -} + ); +}; -export default Header +export default Header; diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts index 39af472..0f68ad6 100644 --- a/src/components/Header/style.ts +++ b/src/components/Header/style.ts @@ -1,20 +1,15 @@ -import styled from 'styled-components' +import styled from "styled-components"; export const StyledHeader = styled.div` + display: flex; width: 100%; -` + height: 60px; +`; export const StyledLogo = styled.div` width: 160px; - margin-left: 112px; - padding: 16px 0; - @media (min-width: ${props => props.theme.breakpoints.tablet}) { - margin-left: 20px; - } + height: 50px; + margin-left: 100px; +`; - @media (min-width: ${props => props.theme.breakpoints.desktop}) { - margin-left: 112px; - } -` - -export const Logo = styled.img`` +export const Logo = styled.img``; diff --git a/src/components/styles/Flex.styled.ts b/src/components/styles/Flex.styled.ts deleted file mode 100644 index 5d3cd75..0000000 --- a/src/components/styles/Flex.styled.ts +++ /dev/null @@ -1,14 +0,0 @@ -import styled from 'styled-components' - -export const Flex = styled.div` - display: flex; - align-items: center; - & > div { - flex: 1; - } - - @media(min-width: 1600px) { - gap: 311px; - } - -` diff --git a/src/components/styles/Wrapper.styled.ts b/src/components/styles/Wrapper.styled.ts deleted file mode 100644 index a6a6c4b..0000000 --- a/src/components/styles/Wrapper.styled.ts +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components' - -export const Wrapper = styled.div` - width: calc(100% - 14rem); - max-width: 30rem; - margin-inline: auto; -` diff --git a/src/pages/Home/Avaliar/style.ts b/src/pages/Home/Avaliar/style.ts index 9c5cf1a..f6aa0e3 100644 --- a/src/pages/Home/Avaliar/style.ts +++ b/src/pages/Home/Avaliar/style.ts @@ -1,128 +1,99 @@ -import styled from 'styled-components' -import background from '../../../assets/homeBackground-branco.png' +import styled from "styled-components"; export const AvaliarSection = styled.section` + display: flex; + justify-content: center; + align-items: center; width: 100%; - margin-top: 80px; - @media (min-width: ${(props) => props.theme.breakpoints.tablet}) { - + height: 50vh; + padding: 0 100px; + @media (max-width: ${(props) => props.theme.breakpoints.tablet}) { + padding: 20px; } -` +`; export const AvaliarCard = styled.div` + width: 1376px; + height: 415px; + background-color: #013a37; + border-radius: 8px; - margin-inline: 20px; - padding-top: 34px; - padding-inline: 24px; + + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; position: relative; - - &::before { + padding: 0 100px; + width: 100%; + + &::after { content: ""; + position: absolute; top: 0; + left: 0; right: 0; bottom: 0; - left: 0; - position: absolute; - opacity: 0.3; - z-index: 0; - background-image: url(${background}); + background-image: url("src/assets/homeBackground-branco.png"); background-size: cover; + opacity: 0.3; } - - - @media (min-width: ${(props) => props.theme.breakpoints.desktop}) { - padding-inline: 80px; - padding-top: 72px; - padding-bottom: 72px; - margin-inline: 112px; + @media (max-width: ${(props) => props.theme.breakpoints.tablet}) { + height: 388px; + padding:0px 50px; } -` +`; export const AvaliarCardTitle = styled.h1` - - color: #ffffff; - font-family: Poppins; - font-size: 32px; + width: 412px; + font-family: "Poppins"; font-style: normal; - font-weight: 700; - line-height: 130%; - - @media (min-width: ${(props) => props.theme.breakpoints.tablet}) { - width: 412px; - } + font-weight: ${(props) => + props.theme.typography.desktop.headline2.fontWeight}; + font-size: ${(props) => props.theme.typography.desktop.headline2.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.headline2.height}; + letter-spacing: ${(props) => + props.theme.typography.desktop.headline2.spacing}; - @media (min-width: ${(props) => props.theme.breakpoints.desktop}) { - font-family: Poppins; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: 130%; - letter-spacing: -0.96px; - } -` + z-index: 5; + display: flex; + align-items: center; + margin-bottom: 30px; + color: #ffffff; +`; export const AvaliarCardSubtitle = styled.p` - font-family: Poppins; - font-size: 16px; + font-family: "Poppins"; font-style: normal; - font-weight: 400; - line-height: 150%; - margin-top: 24px; - color: #ffffff; + font-weight: ${(props) => + props.theme.typography.desktop.subtitle1.fontWeight}; + font-size: ${(props) => props.theme.typography.desktop.subtitle1.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.subtitle1.height}; + letter-spacing: ${(props) => + props.theme.typography.desktop.subtitle1.spacing}; - @media (min-width: ${(props) => props.theme.breakpoints.tablet}) { - font-family: Poppins; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 150%;h - } - - @media (min-width: ${(props) => props.theme.breakpoints.desktop}) { - font-family: "Poppins"; - font-style: normal; - font-weight: ${(props) => props.theme.typography.desktop.subtitle1.fontWeight}; - font-size: ${(props) => props.theme.typography.desktop.subtitle1.fontSize}; - line-height: ${(props) => props.theme.typography.desktop.subtitle1.height}; - letter-spacing: ${(props) => props.theme.typography.desktop.subtitle1.spacing}; - } -` + z-index: 5; + display: flex; + align-items: center; + color: #ffffff; +`; export const AvaliarButton = styled.button` - padding: 12px 20px; - width: 220px; + font-weight: medium; + font-size: 22px; + letter-spacing: 0px; + line-height: 100%; + padding: 24px 32px; + width: 329px; + text-transform: uppercase; background-color: transparent; border: 1px solid white; border-radius: 8px; - margin-top: 24px; - margin-bottom: 35px; color: white; + margin-top: 60px; cursor: pointer; - z-index: 1; - position: relative; - font-family: Poppins; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 100%; - text-transform: uppercase; - // &:hover { - // background-color: ${(props) => props.theme.colors.secondary.dark}; - // } - - @media (min-width: ${(props) => props.theme.breakpoints.tablet}) { - padding: 16px 24px; - width: 276px; - font-family: Poppins; - font-size: 20px; - font-style: normal; - font-weight: 500; - line-height: 100%; /* 20px */ - text-transform: uppercase; - } - - @media (min-width: ${(props) => props.theme.breakpoints.desktop}) { - padding: 24px 24px; - margin-bottom: 0; + z-index: 5; + &:hover { + background-color: ${(props) => props.theme.colors.secondary.dark}; } -` +`; diff --git a/src/pages/Home/Inicio/HeroSection.styled.ts b/src/pages/Home/Inicio/HeroSection.styled.ts deleted file mode 100644 index c8c12a6..0000000 --- a/src/pages/Home/Inicio/HeroSection.styled.ts +++ /dev/null @@ -1,114 +0,0 @@ -import styled from 'styled-components' -import background from '../../../assets/homeBackground.png' - -export const MainSection = styled.section` - display: grid; - place-items: center; - justify-content: flex-start; - padding: 40px 24px; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - height: 100%; - padding: 40px 24px; - } - - @media screen and (min-width:${(props) => props.theme.breakpoints.desktop}) { - padding: 80px 112px; - width: 100%; - - } -` - -export const Call = styled.div` - display: flex; - flex-direction: column; - justify-content: Center; - gap: 20px; - - @media screen and (min-width: ${props => props.theme.breakpoints.tablet}) { - width: 386px; - } - - @media screen and (min-width: ${props => props.theme.breakpoints.desktop}) { - width: 550px; - } -` - -export const CallTitle = styled.span` - font-size: ${props => props.theme.typography.mobile.headline1.fontSize}; - color: ${(props) => props.theme.colors.secondary.normal}; - font-weight: ${(props) => props.theme.typography.mobile.headline1.fontWeight}; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: 130%; - letter-spacing: -0.96px; - padding-top: 16px; - } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - font-size: ${(props) => props.theme.typography.desktop.headline1.fontSize}; - line-height: ${(props) => props.theme.typography.desktop.headline1.height}; - } -` - -export const CallSubTitle = styled.span` - max-width: 384px; - font-weight: ${props => props.theme.typography.mobile.headline7.fontWeight}; - font-size: ${props => props.theme.typography.mobile.headline7.fontSize}; - line-height: ${props => props.theme.typography.mobile.headline7.lineHeight}; - - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - width: 110%; - font-weight: ${props => props.theme.typography.tablet.headline1.fontWeight}; - font-size: ${props => props.theme.typography.tablet.headline1.fontSize}; - line-height: ${props => props.theme.typography.tablet.headline1.lineHeight}; - } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - max-width: 100%; - color: ${(props) => props.theme.colors.grey.darker}; - font-size: ${(props) => props.theme.typography.desktop.subtitle1.fontSize}; - line-height: ${(props) => props.theme.typography.desktop.subtitle1.height}; - font-weight: ${(props) => - props.theme.typography.desktop.subtitle1.fontWeight}; - } -` - -export const HeroImage = styled.img` - display: none; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - display: block; - width: 400px; - height: 238px; - } - - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - width: 614px; - height: 400px; - object-fit: cover; - } -` - -export const Hero = styled.div` - position: relative; - &::before { - content: ""; - top: 0; - left: 0; - right: 0; - bottom: 0; - position: absolute; - opacity: 0.4; - background-image: url(${background}); - background-repeat: no-repeat; - background-size: cover; - z-index: -1; - } - -` diff --git a/src/pages/Home/Inicio/HeroSection.tsx b/src/pages/Home/Inicio/HeroSection.tsx deleted file mode 100644 index 43979e2..0000000 --- a/src/pages/Home/Inicio/HeroSection.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useContext } from 'react' -import { ThemeContext } from 'styled-components' -import { - Call, - CallSubTitle, - CallTitle, Hero, - HeroImage, - MainSection - -} from './HeroSection.styled' -import ButtonGlobal from '../../../components/Buttons/ButtonGlobal' -import heroImage from '../../../assets/newHeroSection.png' -import { Flex } from '../../../components/styles/Flex.styled' -import AvaliarEmpresa from '../../../components/Buttons/AvaliarEmpresa' - -const HeroSection: React.FC = () => { - const theme = useContext(ThemeContext) - - return ( - - - - - Techrate - - Aqui você descobre se o match com aquela empresa é real! - - - {/* */} - - - - - - ) -} - -export default HeroSection diff --git a/src/pages/Home/Inicio/index.tsx b/src/pages/Home/Inicio/index.tsx new file mode 100644 index 0000000..b5dc28a --- /dev/null +++ b/src/pages/Home/Inicio/index.tsx @@ -0,0 +1,42 @@ +import React, { useContext } from "react"; +import { ThemeContext } from "styled-components"; +import { + Call, + CallSubTitle, + CallTitle, + HeroImage, + MainSection, + +} from "./style"; +import ButtonGlobal from "../../../components/Buttons/ButtonGlobal"; +import heroImage from "../../../assets/newHeroSection.png"; + +const Inicio: React.FC = () => { + const theme = useContext(ThemeContext); + + return ( + + + Techrate + + Aqui você descobre se o match com aquela empresa é real! + + + + + + ); +}; + +export default Inicio; diff --git a/src/pages/Home/Inicio/style.ts b/src/pages/Home/Inicio/style.ts new file mode 100644 index 0000000..86165b7 --- /dev/null +++ b/src/pages/Home/Inicio/style.ts @@ -0,0 +1,63 @@ +import styled from "styled-components"; +import background from "../../../assets/homeBackground.png"; + +export const MainSection = styled.section` + display: flex; + justify-content: space-around; + place-items: center; + padding: 0 100px; + position: relative; + width: 100%; + height: 80vh; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + background-image: url(${background}); + background-size: cover; + opacity: 0.4; + } + + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + gap: 20px; + } +`; + +export const Call = styled.div` + display: flex; + flex-direction: column; + justify-content: Center; + gap: 20px; +`; + +export const CallTitle = styled.span` + color: ${(props) => props.theme.colors.secondary.normal}; + font-size: ${(props) => props.theme.typography.desktop.headline1.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.headline1.height}; + font-weight: ${(props) => + props.theme.typography.desktop.headline1.fontWeight}; +`; + +export const CallSubTitle = styled.span` + width: 100%; + color: ${(props) => props.theme.colors.grey.darker}; + font-size: ${(props) => props.theme.typography.desktop.subtitle1.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.subtitle1.height}; + font-weight: ${(props) => + props.theme.typography.desktop.subtitle1.fontWeight}; +`; + +export const HeroImage = styled.img` + width: 614px; + height: 400px; + + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + width: 400px; + height: 238px; + } +`; diff --git a/src/pages/Home/Reputacao/index.tsx b/src/pages/Home/Reputacao/index.tsx index dddbda4..aad3473 100644 --- a/src/pages/Home/Reputacao/index.tsx +++ b/src/pages/Home/Reputacao/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { ReputacaoCard, ReputacaoCardEmpresa, @@ -8,18 +8,18 @@ import { ReputacaoSection, ReputacaoText, ReputacaoTextSubTitle, - ReputacaoTextTitle -} from './style' -import empresa1 from '../../../assets/logo_ifood.png' -import empresa2 from '../../../assets/logo_tim.png' -import empresa3 from '../../../assets/logo_perfectpay.png' -import empresa4 from '../../../assets/logo_shopee.png' -import empresa5 from '../../../assets/logo_magazine-luiza.png' + ReputacaoTextTitle, +} from "./style"; +import empresa1 from "../../../assets/logo_ifood.png"; +import empresa2 from "../../../assets/logo_tim.png"; +import empresa3 from "../../../assets/logo_perfectpay.png"; +import empresa4 from "../../../assets/logo_shopee.png"; +import empresa5 from "../../../assets/logo_magazine-luiza.png"; const Reputacao: React.FC = () => { return ( <> - + @@ -49,7 +49,7 @@ const Reputacao: React.FC = () => {

5°

empresa -

Magalu

+

Magazine Luiza

 @@ -81,7 +81,7 @@ const Reputacao: React.FC = () => {

5°

empresa -

Magalu

+

Magazine Luiza

 @@ -97,7 +97,7 @@ const Reputacao: React.FC = () => { - ) -} + ); +}; -export default Reputacao +export default Reputacao; diff --git a/src/pages/Home/Reputacao/style.ts b/src/pages/Home/Reputacao/style.ts index 2d557f1..3101268 100644 --- a/src/pages/Home/Reputacao/style.ts +++ b/src/pages/Home/Reputacao/style.ts @@ -1,38 +1,42 @@ -import styled from 'styled-components' +import styled from "styled-components"; export const ReputacaoSection = styled.section` display: flex; - flex-direction: column-reverse; - margin-top: 40px; - margin-left: 20px; - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - flex-direction: row; - gap: 24px; - } - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - margin-left: 112px; - margin-top: 80px; - gap: 76px; + justify-content: space-around; + align-items: flex-start; + padding: 0 100px; + width: 100%; + height: 790px; + margin-top:70px; + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + padding: 30px 5px; + height: 600px; + margin-top:0px; } -` +`; -export const ReputacaoText = styled.div` - max-width: 388px; - margin-bottom: 40px; +export const ReputacaoCards = styled.div` + display: flex; + justify-content: center; + align-items: center; + gap: 40px; @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - font-size: ${(props) => props.theme.typography.desktop.subtitle2.fontSize}; - max-width: 350px; + gap: 5px; } - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - font-size: ${(props) => props.theme.typography.desktop.subtitle2.fontSize}; - max-width: 658px; - } -` +`; export const ReputacaoCard = styled.div` + box-sizing: border-box; display: flex; - width: 200px; flex-direction: column; + align-items: center; + padding: 16px; + gap: 16px; + width: 315px; + height: 590px; + + border: 1px solid #d8d8d8; + backdrop-filter: blur(5px); border-radius: 8px; &.melhores { background: #009c4f; @@ -40,157 +44,128 @@ export const ReputacaoCard = styled.div` &.piores { background: ${(props) => props.theme.colors.grey.normal}; } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - width: 315px; - } -` -export const ReputacaoCards = styled.div` - display: flex; - max-width: 393px; - gap: 14px; - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - max-width: 654px; + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + height: 460px; + width: 255px; + gap: 0px; + padding:10px; } -` +`; export const ReputacaoCardTitle = styled.h2` font-style: normal; - font-weight: ${(props) => props.theme.typography.mobile.headline8.fontWeight}; - font-size: ${(props) => props.theme.typography.mobile.headline8.fontSize}; - line-height: ${(props) => props.theme.typography.mobile.headline8.height}; - max-width: 170px; - padding: 12px 10px; - color: #ffffff; + font-weight: ${(props) => + props.theme.typography.desktop.subtitle1.fontWeight}; + font-size: ${(props) => props.theme.typography.desktop.subtitle1.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.subtitle1.height}; + letter-spacing: ${(props) => + props.theme.typography.desktop.subtitle1.spacing}; - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - max-width: 283px; - font-family: Montserrat; - font-size: 20px; - font-style: normal; - font-weight: 700; - line-height: 160%; /* 32px */ - letter-spacing: 0.15px; - padding: 16px 20px - } -` + display: flex; + align-items: center; + letter-spacing: 0.15px; + margin-bottom: 20px; + color: #ffffff; +`; export const ReputacaoCardListaEmpresas = styled.div` display: flex; justify-content: center; - align-items: flex-start; + align-items: center; flex-direction: column; - margin-inline: 10px; - padding-bottom: 10px; gap: 15px; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - margin-inline: 16px; - } -` +`; export const ReputacaoCardEmpresa = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 9px; - padding: 10px 0 10px 10px; - width: 100%; + padding: 17px 158.13px 17px 17px; + gap: 15.4px; + width: 283px; + height: 78px; background: #ffffff; border-radius: 6px; img { box-sizing: border-box; - width: 26px; - height: 26px; - border: 1px solid ${(props) => props.theme.colors.grey.light_active}; + width: 44px; + height: 44px; + border: 2px solid ${(props) => props.theme.colors.grey.light_active}; border-radius: 22px; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - width: 44px; - height: 44px; - } } - p:first-child { + p { font-style: normal; - font-weight: ${(props) => props.theme.typography.mobile.body3.fontWeight}; - font-size: ${(props) => props.theme.typography.mobile.body1.fontSize}; - line-height: ${(props) => props.theme.typography.mobile.body3.lineHeight}; - font-family: ${props => props.theme.typography.mobile.body3.fontFamily}; - color: ${(props) => props.theme.colors.secondary.normal}; - } - - p:last-child { - font-style: normal; - font-weight: ${(props) => props.theme.typography.mobile.headline5.fontWeight}; - font-size: ${(props) => props.theme.typography.mobile.headline5.fontSize}; - line-height: ${(props) => props.theme.typography.mobile.headline5.lineHeight}; - font-family: Nunito; - letter-spacing: 0.9px; - color: ${(props) => props.theme.colors.grey.soft_dark}; + font-weight: ${(props) => props.theme.typography.desktop.body1.fontWeight}; + font-size: ${(props) => props.theme.typography.desktop.body1.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.body1.height}; + letter-spacing: ${(props) => props.theme.typography.desktop.body1.spacing}; + + display: flex; + align-items: center; + letter-spacing: 0.15px; + + color: ${(props) => props.theme.colors.grey.darker}; } cursor: pointer; - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - gap: 15px; - padding: 17px 0 17px 17px; - p:first-child { - font-family: Nunito; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 150%; /* 24px */ - letter-spacing: 0.15px; + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + height: 56px; + width:70%; + + p{ + font-size: ${(props) => props.theme.typography.desktop.body2.fontSize}; + letter-spacing: 0px; } - p:last-child { - font-family: Nunito; - font-size: 25px; - font-style: normal; - font-weight: 700; - line-height: 150%; /* 37.5px */ - letter-spacing: 0.15px; + + img{ + width:34px; + height:34px; } } -` +`; +export const ReputacaoText = styled.div` + width: 512px; + display: flex; + flex-direction: column; + align-self: flex-start; + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + width:100%; + padding:10px; + } +`; export const ReputacaoTextTitle = styled.h1` font-family: "Poppins"; font-style: normal; font-weight: ${(props) => props.theme.typography.desktop.headline2.fontWeight}; - font-size: ${(props) => props.theme.typography.mobile.headline2.fontSize}; - line-height: ${(props) => props.theme.typography.mobile.headline2.height}; + font-size: ${(props) => props.theme.typography.desktop.headline2.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.headline2.height}; letter-spacing: ${(props) => - props.theme.typography.mobile.headline2.spacing}; - padding-bottom: 16px; + props.theme.typography.desktop.headline2.spacing}; color: ${(props) => props.theme.colors.secondary.normal}; - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { font-size: ${(props) => props.theme.typography.desktop.headline4.fontSize}; } - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - width: 512px; - padding-bottom: 24px; - font-size: ${(props) => props.theme.typography.desktop.headline2.fontSize}; - - } -` +`; export const ReputacaoTextSubTitle = styled.p` font-family: "Poppins"; font-style: normal; - font-weight: ${(props) => props.theme.typography.mobile.headline7.fontWeight}; - font-size: ${(props) => props.theme.typography.mobile.headline7.fontSize}; - line-height: ${(props) => props.theme.typography.mobile.headline7.height}; + font-weight: ${(props) => + props.theme.typography.desktop.subtitle1.fontWeight}; + font-size: ${(props) => props.theme.typography.desktop.subtitle1.fontSize}; + line-height: ${(props) => props.theme.typography.desktop.subtitle1.height}; + letter-spacing: ${(props) => + props.theme.typography.desktop.subtitle1.spacing}; color: ${(props) => props.theme.colors.grey.darker}; - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { font-size: ${(props) => props.theme.typography.desktop.subtitle2.fontSize}; + } - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - font-weight: 600; - font-size: ${(props) => props.theme.typography.desktop.subtitle1.fontSize}; - } -` +`; diff --git a/src/pages/Home/Sobre/About.tsx b/src/pages/Home/Sobre/index.tsx similarity index 88% rename from src/pages/Home/Sobre/About.tsx rename to src/pages/Home/Sobre/index.tsx index 716370b..e4d2f04 100644 --- a/src/pages/Home/Sobre/About.tsx +++ b/src/pages/Home/Sobre/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { BoxImage, SobreBoxMain, @@ -7,8 +7,8 @@ import { SobreBoxMainText, SobreBoxMainTitle, BoxSecondary, - SobreSection, OverlayBg -} from './About.styled' + SobreSection, +} from "./style"; import teamImage from '../../../assets/successful-happy-business-team.png' @@ -16,7 +16,6 @@ const Sobre: React.FC = () => { return ( <> - Sobre nós @@ -44,15 +43,16 @@ const Sobre: React.FC = () => { ouvi-los. - Enviar E-mail + Enviar E-mail - ) -} + ); +}; -export default Sobre +export default Sobre; diff --git a/src/pages/Home/Sobre/About.styled.ts b/src/pages/Home/Sobre/style.ts similarity index 54% rename from src/pages/Home/Sobre/About.styled.ts rename to src/pages/Home/Sobre/style.ts index 28982aa..e2af9c9 100644 --- a/src/pages/Home/Sobre/About.styled.ts +++ b/src/pages/Home/Sobre/style.ts @@ -1,82 +1,64 @@ -import styled from 'styled-components' +import styled from "styled-components"; export const SobreSection = styled.section` position: relative; -` - -export const OverlayBg = styled.div` - background-color: #6AEDAB; - position: absolute; - top: 0; width: 100%; - border-radius: 0px 0px 100px 0px; - height: 700px; - z-index: -1; -` - + height: 818px; +`; export const SobreBoxMain = styled.div` - width: 100%; - padding-top: 40px; - padding-left: 20px; - padding-bottom: 40px; - background: ${(props) => props.theme.colors.secondary.normal}; - border-radius: 0px 0px 100px 0px; - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - width: 62.5%; - } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - padding-left: 112px; - padding-top: 80px; - padding-bottom: 80px; - } -` - -export const SobreBoxMainText = styled.div` - max-width: 388px; display: flex; flex-direction: column; - gap: 20px; + align-items: flex-start; + padding: 80px 112px; + gap: 64px; - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - max-width: 400px; - } + position: absolute; + width: 65%; + left: 0px; + top: 0px; - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - max-width: 500px; + background: ${(props) => props.theme.colors.secondary.normal}; + border-radius: 0px 0px 100px 0px; + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + width: 75%; + padding: 40px 10px; } -` +`; export const BoxSecondary = styled.div` + position: absolute; + width: 35%; + height: 700px; + right: 0; + top: 0; + background: ${(props) => props.theme.colors.primary.normal}; + border-radius: 0px 0px 100px 0px; - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + width: 25%; } -` +`; export const BoxImage = styled.img` position: absolute; - - display: none; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - width: 350px; - display: block; - right: 0; - top: 30%; - margin-right: 20px; - } - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - width: 600px; - display: block; - right: 0; - top: 20%; - margin-right: 290px; + width: 600px; + height: 510.12px; + left: 650px; + top: calc(50% - 610.12px / 2 + 0.06px); + background: grey; + border-radius: 100px 8px; + + @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + width: 250px; + height: 217px; + top: calc(45% - 350.12px / 2 + 0.06px); + left:505px; } -` +`; export const SobreBoxMainTitle = styled.h1` color: #ffffff; + font-family: "Poppins"; font-style: normal; font-weight: ${(props) => @@ -85,9 +67,17 @@ export const SobreBoxMainTitle = styled.h1` line-height: ${(props) => props.theme.typography.desktop.headline2.height}; letter-spacing: ${(props) => props.theme.typography.desktop.headline2.spacing}; -` +`; + +export const SobreBoxMainText = styled.p` + width: 500px; + display: flex; + flex-direction: column; + gap: 20px; +`; export const SobreBoxMainParagraph = styled.p` + width: 500px; font-family: "Poppins"; font-style: normal; font-weight: ${(props) => props.theme.typography.desktop.body2.fontWeight}; @@ -95,11 +85,7 @@ export const SobreBoxMainParagraph = styled.p` line-height: ${(props) => props.theme.typography.desktop.body2.height}; letter-spacing: ${(props) => props.theme.typography.desktop.body2.spacing}; color: #ffffff; - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - - } -` +`; export const SobreBoxMainButton = styled.button` font-weight: medium; @@ -115,11 +101,7 @@ export const SobreBoxMainButton = styled.button` color: white; margin-top: 60px; cursor: pointer; - // &:hover { - // background-color: ${(props) => props.theme.colors.secondary.dark}; - // } - - @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { - margin-top: 64px; + &:hover { + background-color: ${(props) => props.theme.colors.secondary.dark}; } -` +`; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index aae79ae..9de11cc 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,22 +1,21 @@ -import React from 'react' -import { Footer } from '../../components/Footer' -import Header from '../../components/Header/Header' -import Avaliar from './Avaliar' -import HeroSection from './Inicio/HeroSection' -import Reputacao from './Reputacao' -import Sobre from './Sobre/About' +import { Footer } from "../../components/Footer"; +import Header from "../../components/Header/Header"; +import Avaliar from "./Avaliar"; +import Inicio from "./Inicio"; +import Reputacao from "./Reputacao"; +import Sobre from "./Sobre"; const Home: React.FC = () => { return ( <>
- +