diff --git a/.eslintrc.json b/.eslintrc.json index 4adeb9c..1ce6e35 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -11,7 +11,8 @@ ], "parserOptions": { "ecmaVersion": "latest", - "sourceType": "module" + "sourceType": "module", + "project": "./tsconfig.json" }, "plugins": [ "react" diff --git a/src/assets/bxl-facebook.svg b/src/assets/bxl-facebook.svg new file mode 100644 index 0000000..9e0f30b --- /dev/null +++ b/src/assets/bxl-facebook.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/bxl-instagram.svg b/src/assets/bxl-instagram.svg new file mode 100644 index 0000000..3e087a7 --- /dev/null +++ b/src/assets/bxl-instagram.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/bxl-linkedin.svg b/src/assets/bxl-linkedin.svg new file mode 100644 index 0000000..712e22d --- /dev/null +++ b/src/assets/bxl-linkedin.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/bxl-twitter.svg b/src/assets/bxl-twitter.svg new file mode 100644 index 0000000..5aeef31 --- /dev/null +++ b/src/assets/bxl-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Buttons/AvaliarEmpresa.styled.ts b/src/components/Buttons/AvaliarEmpresa.styled.ts new file mode 100644 index 0000000..b345742 --- /dev/null +++ b/src/components/Buttons/AvaliarEmpresa.styled.ts @@ -0,0 +1,37 @@ +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 new file mode 100644 index 0000000..17d2852 --- /dev/null +++ b/src/components/Buttons/AvaliarEmpresa.tsx @@ -0,0 +1,12 @@ +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 d640d37..32a4efa 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,13 +1,47 @@ -import { FooterContainer, FooterLogo, FooterMsg } from "./style"; -import logo from "../../assets/Logo.png"; +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' export const Footer: React.FC = () => { return ( - - - - Copyright 2023 Techrate. Todos os direitos reservados. - - - ); -}; + <> + + + + +

Contato

+

(00) 0000-0000

+

usuario@gmail.com

+ + +

Politica e privacidade

+

Termos de uso

+ + + + + + + + + + + + Copyright 2023 Techrate. Todos os direitos reservados. + + + + ) +} diff --git a/src/components/Footer/style.ts b/src/components/Footer/style.ts index 23bb829..3d8e3a3 100644 --- a/src/components/Footer/style.ts +++ b/src/components/Footer/style.ts @@ -1,35 +1,82 @@ -import styled from "styled-components"; +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; + } + -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 FooterLogo = styled.img +export const FooterMsgContainer = styled.div` + padding-top: 40px; + text-align: center; + margin-inline: auto; ` -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 FooterMsg = styled.span +export const FooterContact = styled.div` + p { + margin-top: 12px; + } ` -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 548fed7..d8db227 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,15 +1,14 @@ -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 0f68ad6..39af472 100644 --- a/src/components/Header/style.ts +++ b/src/components/Header/style.ts @@ -1,15 +1,20 @@ -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; - height: 50px; - margin-left: 100px; -`; + margin-left: 112px; + padding: 16px 0; + @media (min-width: ${props => props.theme.breakpoints.tablet}) { + margin-left: 20px; + } -export const Logo = styled.img``; + @media (min-width: ${props => props.theme.breakpoints.desktop}) { + margin-left: 112px; + } +` + +export const Logo = styled.img`` diff --git a/src/components/styles/Flex.styled.ts b/src/components/styles/Flex.styled.ts new file mode 100644 index 0000000..5d3cd75 --- /dev/null +++ b/src/components/styles/Flex.styled.ts @@ -0,0 +1,14 @@ +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 new file mode 100644 index 0000000..a6a6c4b --- /dev/null +++ b/src/components/styles/Wrapper.styled.ts @@ -0,0 +1,7 @@ +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 f6aa0e3..9c5cf1a 100644 --- a/src/pages/Home/Avaliar/style.ts +++ b/src/pages/Home/Avaliar/style.ts @@ -1,99 +1,128 @@ -import styled from "styled-components"; +import styled from 'styled-components' +import background from '../../../assets/homeBackground-branco.png' export const AvaliarSection = styled.section` - display: flex; - justify-content: center; - align-items: center; width: 100%; - height: 50vh; - padding: 0 100px; - @media (max-width: ${(props) => props.theme.breakpoints.tablet}) { - padding: 20px; + margin-top: 80px; + @media (min-width: ${(props) => props.theme.breakpoints.tablet}) { + } -`; +` export const AvaliarCard = styled.div` - width: 1376px; - height: 415px; - background-color: #013a37; - border-radius: 8px; - - display: flex; - justify-content: center; - align-items: flex-start; - flex-direction: column; + margin-inline: 20px; + padding-top: 34px; + padding-inline: 24px; position: relative; - padding: 0 100px; - width: 100%; - - &::after { + + &::before { content: ""; - position: absolute; top: 0; - left: 0; right: 0; bottom: 0; - background-image: url("src/assets/homeBackground-branco.png"); - background-size: cover; + left: 0; + position: absolute; opacity: 0.3; + z-index: 0; + background-image: url(${background}); + background-size: cover; } - @media (max-width: ${(props) => props.theme.breakpoints.tablet}) { - height: 388px; - padding:0px 50px; + + + @media (min-width: ${(props) => props.theme.breakpoints.desktop}) { + padding-inline: 80px; + padding-top: 72px; + padding-bottom: 72px; + margin-inline: 112px; } -`; +` export const AvaliarCardTitle = styled.h1` - width: 412px; - font-family: "Poppins"; - font-style: normal; - 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}; - z-index: 5; - display: flex; - align-items: center; - margin-bottom: 30px; color: #ffffff; -`; -export const AvaliarCardSubtitle = styled.p` - font-family: "Poppins"; + font-family: Poppins; + font-size: 32px; 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}; + font-weight: 700; + line-height: 130%; + + @media (min-width: ${(props) => props.theme.breakpoints.tablet}) { + width: 412px; + } - z-index: 5; - display: flex; - align-items: center; + @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; + } +` +export const AvaliarCardSubtitle = styled.p` + font-family: Poppins; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + margin-top: 24px; color: #ffffff; -`; + + @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}; + } +` export const AvaliarButton = styled.button` - font-weight: medium; - font-size: 22px; - letter-spacing: 0px; - line-height: 100%; - padding: 24px 32px; - width: 329px; - text-transform: uppercase; + padding: 12px 20px; + width: 220px; 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: 5; - &:hover { - background-color: ${(props) => props.theme.colors.secondary.dark}; + 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; } -`; +` diff --git a/src/pages/Home/Inicio/HeroSection.styled.ts b/src/pages/Home/Inicio/HeroSection.styled.ts new file mode 100644 index 0000000..c8c12a6 --- /dev/null +++ b/src/pages/Home/Inicio/HeroSection.styled.ts @@ -0,0 +1,114 @@ +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 new file mode 100644 index 0000000..43979e2 --- /dev/null +++ b/src/pages/Home/Inicio/HeroSection.tsx @@ -0,0 +1,49 @@ +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 deleted file mode 100644 index b5dc28a..0000000 --- a/src/pages/Home/Inicio/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -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 deleted file mode 100644 index 86165b7..0000000 --- a/src/pages/Home/Inicio/style.ts +++ /dev/null @@ -1,63 +0,0 @@ -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 aad3473..dddbda4 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 -

Magazine Luiza

+

Magalu

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

5°

empresa -

Magazine Luiza

+

Magalu

 @@ -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 3101268..2d557f1 100644 --- a/src/pages/Home/Reputacao/style.ts +++ b/src/pages/Home/Reputacao/style.ts @@ -1,42 +1,38 @@ -import styled from "styled-components"; +import styled from 'styled-components' export const ReputacaoSection = styled.section` display: flex; - 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; + 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; } -`; +` -export const ReputacaoCards = styled.div` - display: flex; - justify-content: center; - align-items: center; - gap: 40px; +export const ReputacaoText = styled.div` + max-width: 388px; + margin-bottom: 40px; @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { - gap: 5px; + font-size: ${(props) => props.theme.typography.desktop.subtitle2.fontSize}; + max-width: 350px; } -`; + @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; @@ -44,128 +40,157 @@ 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; + } +` - @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { - height: 460px; - width: 255px; - gap: 0px; - padding:10px; +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; } -`; +` export const ReputacaoCardTitle = styled.h2` 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}; - - display: flex; - align-items: center; - letter-spacing: 0.15px; - margin-bottom: 20px; + 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; -`; + + @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 + } +` export const ReputacaoCardListaEmpresas = styled.div` display: flex; justify-content: center; - align-items: center; + align-items: flex-start; 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; - padding: 17px 158.13px 17px 17px; - gap: 15.4px; - width: 283px; - height: 78px; + gap: 9px; + padding: 10px 0 10px 10px; + width: 100%; background: #ffffff; border-radius: 6px; img { box-sizing: border-box; - width: 44px; - height: 44px; - border: 2px solid ${(props) => props.theme.colors.grey.light_active}; + width: 26px; + height: 26px; + border: 1px 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 { + p:first-child { font-style: normal; - 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}; + 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}; } cursor: pointer; - @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; + @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; } - - img{ - width:34px; - height:34px; + p:last-child { + font-family: Nunito; + font-size: 25px; + font-style: normal; + font-weight: 700; + line-height: 150%; /* 37.5px */ + letter-spacing: 0.15px; } } -`; -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.desktop.headline2.fontSize}; - line-height: ${(props) => props.theme.typography.desktop.headline2.height}; + font-size: ${(props) => props.theme.typography.mobile.headline2.fontSize}; + line-height: ${(props) => props.theme.typography.mobile.headline2.height}; letter-spacing: ${(props) => - props.theme.typography.desktop.headline2.spacing}; + props.theme.typography.mobile.headline2.spacing}; + padding-bottom: 16px; color: ${(props) => props.theme.colors.secondary.normal}; - @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + @media screen and (min-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.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}; + 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}; color: ${(props) => props.theme.colors.grey.darker}; - @media screen and (max-width: ${(props) => props.theme.breakpoints.tablet}) { + @media screen and (min-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/style.ts b/src/pages/Home/Sobre/About.styled.ts similarity index 54% rename from src/pages/Home/Sobre/style.ts rename to src/pages/Home/Sobre/About.styled.ts index e2af9c9..28982aa 100644 --- a/src/pages/Home/Sobre/style.ts +++ b/src/pages/Home/Sobre/About.styled.ts @@ -1,64 +1,82 @@ -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%; - height: 818px; -`; + border-radius: 0px 0px 100px 0px; + height: 700px; + z-index: -1; +` + 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; - align-items: flex-start; - padding: 80px 112px; - gap: 64px; + gap: 20px; - position: absolute; - width: 65%; - left: 0px; - top: 0px; + @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { + max-width: 400px; + } - 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; + @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { + max-width: 500px; } -`; +` 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 (max-width: ${(props) => props.theme.breakpoints.tablet}) { - width: 25%; + @media screen and (min-width: ${(props) => props.theme.breakpoints.tablet}) { + } -`; +` export const BoxImage = styled.img` position: absolute; - 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; + + 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; } -`; +` export const SobreBoxMainTitle = styled.h1` color: #ffffff; - font-family: "Poppins"; font-style: normal; font-weight: ${(props) => @@ -67,17 +85,9 @@ 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}; @@ -85,7 +95,11 @@ 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; @@ -101,7 +115,11 @@ export const SobreBoxMainButton = styled.button` color: white; margin-top: 60px; cursor: pointer; - &:hover { - background-color: ${(props) => props.theme.colors.secondary.dark}; + // &:hover { + // background-color: ${(props) => props.theme.colors.secondary.dark}; + // } + + @media screen and (min-width: ${(props) => props.theme.breakpoints.desktop}) { + margin-top: 64px; } -`; +` diff --git a/src/pages/Home/Sobre/index.tsx b/src/pages/Home/Sobre/About.tsx similarity index 88% rename from src/pages/Home/Sobre/index.tsx rename to src/pages/Home/Sobre/About.tsx index e4d2f04..716370b 100644 --- a/src/pages/Home/Sobre/index.tsx +++ b/src/pages/Home/Sobre/About.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, -} from "./style"; + SobreSection, OverlayBg +} from './About.styled' import teamImage from '../../../assets/successful-happy-business-team.png' @@ -16,6 +16,7 @@ const Sobre: React.FC = () => { return ( <> + Sobre nós @@ -43,16 +44,15 @@ const Sobre: React.FC = () => { ouvi-los. - Enviar E-mail + Enviar E-mail - ); -}; + ) +} -export default Sobre; +export default Sobre diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 9de11cc..aae79ae 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,21 +1,22 @@ -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"; +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' const Home: React.FC = () => { return ( <>
- +