merge

.eslintrc.json

@@ -11,7 +11,8 @@
     ],
     "parserOptions": {
         "ecmaVersion": "latest",
-        "sourceType": "module"
+        "sourceType": "module",
+        "project": "./tsconfig.json"
     },
     "plugins": [
         "react"

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;
+  }
+`

src/components/Buttons/AvaliarEmpresa.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { AvaliarEmpresaButton } from './AvaliarEmpresa.styled'
+
+const AvaliarEmpresa: React.FC = () => {
+  return (
+    <AvaliarEmpresaButton>
+      Avaliar Uma Empresa
+    </AvaliarEmpresaButton>
+  )
+}
+
+export default AvaliarEmpresa

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 (
-    <FooterContainer>
-      <FooterLogo src={logo} /> 
-      <FooterMsg>
-        Copyright 2023 Techrate. Todos os direitos reservados.
-      </FooterMsg>
-    </FooterContainer>
-  );
-};
+    <>
+      <FooterContainer>
+        <FooterLogo src={logo} />
+        <FooterContainerContactTerms>
+          <FooterContact>
+            <p>Contato</p>
+            <p>(00) 0000-0000</p>
+            <p>usuario@gmail.com</p>
+          </FooterContact>
+          <FooterTerms>
+            <p>Politica e privacidade</p>
+            <p>Termos de uso</p>
+          </FooterTerms>
+        </FooterContainerContactTerms>
+        <FooterSocials>
+          <img src={twitterIcon} alt=""/>
+          <img src={linkedinIcon} alt=""/>
+          <img src={facebookIcon} alt=""/>
+          <img src={instagramIcon} alt=""/>
+        </FooterSocials>
+      </FooterContainer>
+      <FooterMsgContainer>
+        <FooterMsg>
+          Copyright 2023 Techrate. Todos os direitos reservados.
+        </FooterMsg>
+      </FooterMsgContainer>
+    </>
+  )
+}

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;
+`

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 (
     <StyledHeader>
-      <StyledLogo>
-        <Logo src={logo} />
-      </StyledLogo>
+        <StyledLogo>
+          <Logo src={logo} />
+        </StyledLogo>
     </StyledHeader>
-  );
-};
+  )
+}
 
-export default Header;
+export default Header

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``

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;
+  }
+
+`

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;
+`