├── .gitignore
├── README.md
├── debug.log
├── package.json
├── public
├── favicon.ico
├── images
│ ├── comuni-k.gif
│ ├── mayCode.png
│ ├── svg-1.svg
│ ├── svg-2.svg
│ └── svg-3.svg
└── index.html
├── src
├── App.css
├── App.tsx
├── components
│ ├── Footer
│ │ ├── FooterElements.js
│ │ └── index.js
│ ├── HeroSection
│ │ ├── HeroElements.js
│ │ └── index.js
│ ├── InfoSection
│ │ ├── Data.js
│ │ ├── InfoElements.js
│ │ └── index.js
│ ├── NavBar
│ │ ├── NavbarElements.js
│ │ └── index.js
│ ├── ScrollToTop.js
│ ├── Services
│ │ ├── ServicesElements.js
│ │ └── index.js
│ └── Sidebar
│ │ ├── SidebarElements.js
│ │ └── index.js
├── icons
│ ├── svg-4.svg
│ ├── svg-5.svg
│ └── svg-6.svg
├── index.tsx
├── pages
│ └── index.js
├── react-app-env.d.ts
└── videos
│ ├── videoY.mp4
│ └── yellow.mp4
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Comuni-K
2 |
3 |
4 |
5 |
6 |
8 |
9 |
10 |
11 | “A chave para transformação é a continuidade. Continue a codar!”
12 |
13 | Deploy aqui!
16 |
17 |
37 |
38 |
45 | Na Expansion Week da Rocketseat foi lançado um desafio: codar uma landing page do zero!
46 | E o tema para essa landing page era a escolha de uma soft skill como um produto. Eu escolhi a comunicação. Acredito que essa seja a principal skill para qualquer pessoa que queira evoluir, não só no âmbito profissional como também no pessoal.
47 |
48 |
49 |
50 |
65 |
--------------------------------------------------------------------------------
/debug.log:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MorenaNobre/Week/31e0acd5c1d953069a50c13383bc9a52765f049c/debug.log
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-website",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.4",
7 | "@testing-library/react": "^11.1.0",
8 | "@testing-library/user-event": "^12.1.10",
9 | "@types/jest": "^26.0.15",
10 | "@types/node": "^12.0.0",
11 | "@types/react": "^16.9.53",
12 | "@types/react-dom": "^16.9.8",
13 | "netlify-cli": "^2.68.7",
14 | "react": "^17.0.1",
15 | "react-dom": "^17.0.1",
16 | "react-icons": "^3.11.0",
17 | "react-router-dom": "^5.2.0",
18 | "react-scripts": "4.0.0",
19 | "react-scroll": "^1.8.1",
20 | "styled-components": "^5.2.1",
21 | "typescript": "^4.0.3",
22 | "web-vitals": "^0.2.4"
23 | },
24 | "scripts": {
25 | "start": "react-scripts start",
26 | "build": "react-scripts build",
27 | "test": "react-scripts test",
28 | "eject": "react-scripts eject"
29 | },
30 | "eslintConfig": {
31 | "extends": [
32 | "react-app",
33 | "react-app/jest"
34 | ]
35 | },
36 | "browserslist": {
37 | "production": [
38 | ">0.2%",
39 | "not dead",
40 | "not op_mini all"
41 | ],
42 | "development": [
43 | "last 1 chrome version",
44 | "last 1 firefox version",
45 | "last 1 safari version"
46 | ]
47 | },
48 | "devDependencies": {
49 | "@types/react-router-dom": "^5.1.6"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MorenaNobre/Week/31e0acd5c1d953069a50c13383bc9a52765f049c/public/favicon.ico
--------------------------------------------------------------------------------
/public/images/comuni-k.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MorenaNobre/Week/31e0acd5c1d953069a50c13383bc9a52765f049c/public/images/comuni-k.gif
--------------------------------------------------------------------------------
/public/images/mayCode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MorenaNobre/Week/31e0acd5c1d953069a50c13383bc9a52765f049c/public/images/mayCode.png
--------------------------------------------------------------------------------
/public/images/svg-1.svg:
--------------------------------------------------------------------------------
1 | Comuni-K
13 |
14 |
15 | You need to enable JavaScript to run this app.
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | font-family: 'Encode Sans Expanded', sans-serif;
6 | }
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./App.css";
3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
4 | import Home from "./pages";
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
12 |
13 | );
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/components/Footer/FooterElements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import { Link } from 'react-router-dom'
3 |
4 | export const FooterContainer = styled.footer`
5 | background-color: #101522;
6 | `
7 |
8 | export const FooterWrap = styled.div`
9 | padding: 48px 24px;
10 | display: flex;
11 | flex-direction: column;
12 | justify-content: center;
13 | align-items: center;
14 | max-width: 1100px;
15 | margin: 0 auto;
16 | `
17 |
18 | export const FooterLinksContainer = styled.div`
19 | display: flex;
20 | justify-content: center;
21 |
22 | @media screen and (max-width: 820px) {
23 | padding-top: 32px;
24 | }
25 | `
26 |
27 | export const FooterLinksWrapper = styled.div`
28 | display: flex;
29 |
30 | @media screen and (max-width: 820px) {
31 | flex-direction: column;
32 | }
33 | `
34 |
35 | export const FooterLinkItems = styled.div`
36 | display: flex;
37 | flex-direction: column;
38 | align-items: flex-start;
39 | margin: 16px;
40 | text-align: center;
41 | width: 268px;
42 | box-sizing: border-box;
43 | color: #fff;
44 |
45 | @media screen and (max-width: 420px) {
46 | margin: 0;
47 | padding: 10px;
48 | width: 100%;
49 | }
50 | `
51 |
52 | export const FooterLinkTitle = styled.h1`
53 | font-size: 16px;
54 | margin-bottom: 16px;
55 | color: #F5EC3E;
56 | `
57 |
58 | export const FooterLink = styled(Link)`
59 | color: #fff;
60 | text-decoration: none;
61 | margin-bottom: 0.5rem;
62 | font-size: 14px;
63 |
64 | &:hover {
65 | color: #F5EC3E;
66 | transition: 0.3s ease-out;
67 | }
68 | `
69 |
70 | export const SocialMedia = styled.section`
71 | max-width: 1000px;
72 | width: 100%;
73 | `
74 |
75 | export const SocialMediaWrap = styled.div`
76 | display: flex;
77 | justify-content: space-between;
78 | align-items: center;
79 | max-width: 1100px;
80 | margin: 40px auto 0 auto;
81 |
82 | @media screen and (max-width: 820px) {
83 | flex-direction: column;
84 | }
85 | `
86 |
87 | export const SocialLogo = styled(Link)`
88 | color: #F5EC3E;
89 | justify-self: start;
90 | cursor: pointer;
91 | text-decoration: none;
92 | font-size: 1.5rem;
93 | display: flex;
94 | align-items: center;
95 | margin-bottom: 16px;
96 | font-weight: 600;
97 | `
98 |
99 | export const WebsiteRigths = styled.small`
100 | color: #fff;
101 | margin-bottom: 16px;
102 | `
103 |
104 | export const SocialIcons = styled.div`
105 | display: flex;
106 | justify-content: space-between;
107 | align-items: center;
108 | width: 240px;
109 | `
110 |
111 | export const SocialIconLink = styled.a`
112 | color: #fff;
113 | font-size: 24px;
114 |
115 | &:hover {
116 | color:#F5EC3E;
117 | }
118 | `
--------------------------------------------------------------------------------
/src/components/Footer/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { animateScroll as scroll } from "react-scroll";
3 | import { FaInstagram, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";
4 | import {
5 | FooterContainer,
6 | FooterWrap,
7 | FooterLinksContainer,
8 | FooterLinksWrapper,
9 | FooterLinkItems,
10 | FooterLinkTitle,
11 | FooterLink,
12 | SocialMedia,
13 | SocialMediaWrap,
14 | SocialLogo,
15 | WebsiteRigths,
16 | SocialIcons,
17 | SocialIconLink,
18 | } from "./FooterElements";
19 |
20 | const Footer = () => {
21 | const toggleHome = () => {
22 | scroll.scrollToTop();
23 | };
24 |
25 | return (
26 |
27 |
28 |
29 |
30 |
31 | Links Úteis
32 |
36 | Comunicação Verbal
37 |
38 |
42 | Comunicação Escrita
43 |
44 |
48 | Comunicação Corporal
49 |
50 |
51 |
52 | Comunicadores
53 |
57 | Thaíssa Candella
58 |
59 |
63 | Dorly Neto
64 |
65 |
69 | Filipe Deschamps
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | Comuni-k
78 |
79 |
80 | Comuni-k © {new Date().getFullYear()} Todos direitos reservados.
81 |
82 |
83 |
88 |
90 |
95 |
97 |
102 |
104 |
109 |
111 |
112 |
113 |
114 |
115 |
116 | );
117 | };
118 |
119 | export default Footer;
120 |
--------------------------------------------------------------------------------
/src/components/HeroSection/HeroElements.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const HeroContainer = styled.div`
4 | background: #0c0c0c;
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | padding: 0 30px;
9 | height: 800px;
10 | position: relative;
11 | z-index: 1;
12 | `;
13 |
14 | export const HeroBg = styled.div`
15 | position: absolute;
16 | top: 0;
17 | right: 0;
18 | bottom: 0;
19 | left: 0;
20 | width: 100%;
21 | height: 100%;
22 | overflow: hidden;
23 | `;
24 |
25 | export const VideoBg = styled.video`
26 | width: 100%;
27 | height: 100%;
28 | -o-object-fit: cover;
29 | object-fit: cover;
30 | background: #232a34;
31 | `;
32 |
33 | export const HeroContent = styled.div`
34 | z-index: 3;
35 | height: 100%;
36 | width: 100%;
37 | position: absolute;
38 | /* padding: 24px 24px; */
39 | display: flex;
40 | flex-direction: column;
41 | align-items: center;
42 | justify-content: center;
43 | background-color: rgba(0, 0, 0, 0.6);
44 | `;
45 |
46 | export const HeroH1 = styled.h1`
47 | color: #fff;
48 | font-size: 48px;
49 | text-align: center;
50 |
51 | @media screen and (max-widht: 768px) {
52 | font-size: 40px;
53 | }
54 |
55 | @media screen and (max-widht: 480px) {
56 | font-size: 32px;
57 | }
58 | `;
59 |
60 | export const HeroP = styled.p`
61 | margin-top: 24px;
62 | color: #fff;
63 | font-size: 24px;
64 | text-align: center;
65 | max-width: 600px;
66 |
67 | @media screen and (max-widht: 768px) {
68 | font-size: 24px;
69 | }
70 |
71 | @media screen and (max-widht: 480px) {
72 | font-size: 18px;
73 | }
74 | `;
75 |
--------------------------------------------------------------------------------
/src/components/HeroSection/index.js:
--------------------------------------------------------------------------------
1 | import Video from "../../videos/videoY.mp4";
2 | import {
3 | HeroContainer,
4 | HeroBg,
5 | VideoBg,
6 | HeroContent,
7 | HeroH1,
8 | HeroP,
9 | } from "./HeroElements";
10 |
11 | const HeroSection = () => {
12 | return (
13 |
14 |
15 |
17 |
18 | Comunicação
19 |
20 | As soft skills se referem às competências comportamentais e são tão importantes quanto as habilidades técnicas. A comunicação é uma delas!
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | export default HeroSection;
28 |
--------------------------------------------------------------------------------
/src/components/InfoSection/Data.js:
--------------------------------------------------------------------------------
1 | export const homeObjOne = {
2 | id: "about",
3 | lightBg: false,
4 | lightText: true,
5 | lightTextDesc: true,
6 | topLine: "Bons Relacionamentos",
7 | headline: "Criando conexões",
8 | description:
9 | "Uma boa comunicação evita erros e mal entendidos, o que ajuda a manter o fluxo do trabalho. Lembrando que se comunicar não envolve somente saber como e quando se expressar, mas também saber ouvir. Uma boa comunicação facilita a criação e manutenção de bons relacionamentos.",
10 | imgStart: false,
11 | img: "/images/svg-1.svg",
12 | alt: "imagem",
13 | dark: true,
14 | primary: true,
15 | darkText: false,
16 | };
17 |
18 | export const homeObjTwo = {
19 | id: "discover",
20 | lightBg: true,
21 | lightText: false,
22 | lightTextDesc: false,
23 | topLine: "Além do veículo",
24 | headline: "Clareza",
25 | description:
26 | "Não é só o veículo que usamos para nos comunicar que conta, mas também a forma, o conteúdo e a linguagem que utilizamos para isso.",
27 | imgStart: true,
28 | img: "/images/svg-2.svg",
29 | alt: "lorem",
30 | dark: false,
31 | primary: false,
32 | darkText: true,
33 | };
34 |
35 | export const homeObjThree = {
36 | id: "signup",
37 | lightBg: true,
38 | lightText: false,
39 | lightTextDesc: false,
40 | topLine: "Valor",
41 | headline: "O poder da comunicação",
42 | description:
43 | "As pessoas que se utilizam da comunicação assertiva são capazes de mostrar o seu ponto de vista respeitando a opinião do outros. Conseguem diferenciar situações favoráveis das desfavoráveis e recusar-se a fazer algo que não estão de acordo.",
44 | imgStart: false,
45 | img: "/images/svg-3.svg",
46 | alt: "lorem",
47 | dark: false,
48 | primary: false,
49 | darkText: true,
50 | };
--------------------------------------------------------------------------------
/src/components/InfoSection/InfoElements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const InfoContainer = styled.div`
4 | /* color: #fff; */
5 | background: ${({lightBg}) => (lightBg ? '#f9f9f9' : '#010606')};
6 |
7 | @media screen and (max-width: 768px) {
8 | padding: 100px 0;
9 | }
10 | `
11 |
12 | export const InfoWrapper = styled.div`
13 | display: grid;
14 | z-index: 1;
15 | height: 860px;
16 | width: 100%;
17 | max-width: 1100px;
18 | margin-right: auto;
19 | margin-left: auto;
20 | padding: 0 24px;
21 | justify-content: center;
22 | `
23 |
24 | export const InfoRow = styled.div`
25 | display: grid;
26 | grid-auto-columns: minmax(auto, 1fr);
27 | align-items: center;
28 | grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
29 |
30 | @media screen and (max-width: 768px) {
31 | grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
32 | }
33 | `
34 |
35 | export const Column1 = styled.div`
36 | margin-top: 15px;
37 | padding: 0 15px;
38 | grid-area: col1;
39 | `
40 |
41 | export const Column2 = styled.div`
42 | margin-top: 15px;
43 | padding: 0 15px;
44 | grid-area: col2;
45 | `
46 |
47 | export const TextWrapper = styled.div`
48 | max-width: 540px;
49 | padding-top: 0;
50 | padding-bottom: 60px;
51 | `
52 |
53 | export const TopLine = styled.p`
54 | color: #F5EC3E;
55 | font-size: 16px;
56 | line-height: 16px;
57 | font-weight: 700;
58 | letter-spacing: 1.4px;
59 | text-transform: uppercase;
60 | margin-bottom: 16px;
61 | `
62 |
63 | export const Heading = styled.h1`
64 | margin-bottom: 24px;
65 | font-size: 48px;
66 | line-height: 1.3;
67 | font-weight: 600;
68 | color: ${({ lightText }) => (lightText ? '#f7f8fa' : '#101522')};
69 |
70 | @media screen and (max-width: 480px) {
71 | font-size: 32px;
72 | }
73 | `
74 |
75 | export const Subtitle = styled.p`
76 | max-width: 440px;
77 | margin-bottom: 35px;
78 | font-size: 18px;
79 | line-height: 24px;
80 | color: ${({lightTextDesc}) => (lightTextDesc ? '#fff' : '#101522')};
81 | `
82 |
83 | export const ImgWrap = styled.div`
84 | max-width: 555px;
85 | height: 100%;
86 | `
87 |
88 | export const Img = styled.img`
89 | width: 100%;
90 | margin: 0 0 10px 0;
91 | padding-right: 0;
92 | `
--------------------------------------------------------------------------------
/src/components/InfoSection/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | InfoContainer,
4 | InfoWrapper,
5 | InfoRow,
6 | Column1,
7 | Column2,
8 | TextWrapper,
9 | TopLine,
10 | Heading,
11 | Subtitle,
12 | ImgWrap,
13 | Img,
14 | } from "./InfoElements";
15 |
16 | const InfoSection = ({
17 | lightBg,
18 | id,
19 | imgStart,
20 | topLine,
21 | lightText,
22 | headline,
23 | lightTextDesc,
24 | description,
25 | img,
26 | alt,
27 | }) => {
28 | return (
29 | <>
30 |
31 |
32 |
33 |
34 |
35 | {topLine}
36 | {headline}
37 | {description}
38 |
39 |
40 |
41 |
42 |
44 |
45 |
46 |
47 |
48 |
49 | );
50 | };
51 |
52 | export default InfoSection;
--------------------------------------------------------------------------------
/src/components/NavBar/NavbarElements.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { Link as LinkR } from "react-router-dom";
3 | import { Link as LinkS } from "react-scroll";
4 |
5 | export const Nav = styled.nav`
6 | background: ${({scrollNav}) => (scrollNav ? '#010606' : 'transparent')};
7 | height: 80px;
8 | margin-top: -80px;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | font-size: 1rem;
13 | position: sticky;
14 | top: 0;
15 | z-index: 10;
16 |
17 | @media screen and (max-width: 960px) {
18 | transition: 0.8s all ease;
19 | }
20 | `;
21 |
22 | export const NavbarContainer = styled.div`
23 | display: flex;
24 | justify-content: space-between;
25 | height: 80px;
26 | z-index: 1;
27 | width: 100%;
28 | padding: 0 24px;
29 | max-width: 1100px;
30 | `;
31 |
32 | export const NavLogo = styled(LinkR)`
33 | color: #F5EC3E;
34 | justify-self: flex-start;
35 | cursor: pointer;
36 | font-size: 1.5rem;
37 | display: flex;
38 | align-items: center;
39 | margin-left: 24px;
40 | font-weight: bold;
41 | text-decoration: none;
42 | `;
43 |
44 | export const MobileIcon = styled.div`
45 | display: none;
46 |
47 | @media screen and (max-width: 768px) {
48 | display: block;
49 | position: absolute;
50 | top: 0;
51 | right: 0;
52 | transform: translate(-100%, 60%);
53 | font-size: 1.8rem;
54 | cursor: pointer;
55 | color: #fff;
56 | }
57 | `;
58 |
59 | export const NavMenu = styled.ul`
60 | display: flex;
61 | align-items: center;
62 | list-style: none;
63 | text-align: center;
64 | margin-right: -22px;
65 |
66 | @media screen and (max-width: 768px) {
67 | display: none;
68 | }
69 | `;
70 |
71 | export const NavItem = styled.li`
72 | height: 80px;
73 | `;
74 |
75 | export const NavLinks = styled(LinkS)`
76 | color: #fff;
77 | display: flex;
78 | align-items: center;
79 | text-decoration: none;
80 | padding: 0 1rem;
81 | height: 100%;
82 | cursor: pointer;
83 |
84 | &:hover {
85 | color: #F5EC3E;
86 | }
87 |
88 | &.active {
89 | border-bottom: 3px solid #F5EC3E;
90 | }
91 | `;
--------------------------------------------------------------------------------
/src/components/NavBar/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { FaBars } from "react-icons/fa";
3 | import { IconContext } from "react-icons/lib";
4 | import { animateScroll as scroll } from "react-scroll";
5 | import {
6 | Nav,
7 | NavbarContainer,
8 | NavLogo,
9 | MobileIcon,
10 | NavMenu,
11 | NavItem,
12 | NavLinks,
13 | } from "./NavbarElements";
14 |
15 | const Navbar = ({ toggle }) => {
16 | const [scrollNav, setScrollNav] = useState(false);
17 |
18 | const changeNav = () => {
19 | if (window.scrollY >= 80) {
20 | setScrollNav(true);
21 | } else {
22 | setScrollNav(false);
23 | }
24 | };
25 |
26 | useEffect(() => {
27 | window.addEventListener("scroll", changeNav);
28 | }, []);
29 |
30 | const toggleHome = () => {
31 | scroll.scrollToTop();
32 | };
33 |
34 | return (
35 | <>
36 |
37 |
38 |
39 |
40 | Comuni-K
41 |
42 |
43 |
45 |
46 |
47 |
55 | Conexão
56 |
57 |
58 |
59 |
67 | Clareza
68 |
69 |
70 |
71 |
79 | Tipos de Comunicação
80 |
81 |
82 |
83 |
91 | Poder
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | );
100 | };
101 |
102 | export default Navbar;
103 |
--------------------------------------------------------------------------------
/src/components/ScrollToTop.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useLocation } from "react-router-dom";
3 |
4 | export default function ScrollToTop() {
5 | const { pathname } = useLocation();
6 |
7 | useEffect(() => {
8 | window.scrollTo(0, 0);
9 | }, [pathname]);
10 |
11 | return null;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Services/ServicesElements.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const ServicesContainer = styled.div`
4 | height: 800px;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | background: #010606;
10 |
11 | @media screen and (max-width: 768px) {
12 | height: 1100px;
13 | }
14 |
15 | @media screen and (max-width: 480px) {
16 | height: 1300px;
17 | }
18 | `
19 |
20 | export const ServicesH1 = styled.h1`
21 | font-size: 2.5rem;
22 | color: #F5EC3E;
23 | margin-bottom: 64px;
24 |
25 | @media screen and (max-width: 480px) {
26 | font-size: 2rem;
27 | text-align: center;
28 | }
29 | `
30 |
31 | export const ServicesWrapper = styled.div`
32 | max-width: 1000px;
33 | margin: 0 auto;
34 | display: grid;
35 | grid-template-columns: 1fr 1fr 1fr;
36 | align-items: center;
37 | grid-gap: 24px;
38 | padding: 0 50px;
39 |
40 | @media screen and (max-width: 1000px) {
41 | grid-template-columns: 1fr 1fr;
42 | }
43 |
44 | @media screen and (max-width: 768px) {
45 | grid-template-columns: 1fr;
46 | padding: 0 20px;
47 | }
48 | `
49 |
50 | export const ServicesCard = styled.div`
51 | background: #fff;
52 | display: flex;
53 | flex-direction: column;
54 | justify-content: flex-start;
55 | align-items: center;
56 | border-radius: 10px;
57 | max-height: 740px;
58 | padding: 30px;
59 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
60 | transition: all 0.2s ease-in-out;
61 |
62 | &:hover {
63 | transform: scale(1.02);
64 | transition: all 0.2s ease-in-out;
65 | cursor: pointer;
66 | }
67 | `
68 |
69 | export const ServicesIcon = styled.img`
70 | height: 160px;
71 | width:160px;
72 | margin-bottom: 10px;
73 | `
74 |
75 | export const ServicesH2 = styled.h2`
76 | font-size: 1rem;
77 | margin-bottom: 10px;
78 | `
79 |
80 | export const ServicesP = styled.p`
81 | font-size: 1rem;
82 | text-align: center;
83 | `
--------------------------------------------------------------------------------
/src/components/Services/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Icon1 from '../../icons/svg-5.svg'
3 | import Icon2 from '../../icons/svg-4.svg'
4 | import Icon3 from '../../icons/svg-6.svg'
5 | import {
6 | ServicesContainer,
7 | ServicesH1,
8 | ServicesWrapper,
9 | ServicesCard,
10 | ServicesIcon,
11 | ServicesH2,
12 | ServicesP,
13 | } from "./ServicesElements";
14 |
15 | const Services = () => {
16 | return (
17 |
18 | Tipos de Comunicação
19 |
20 |
21 | Verbal
23 |
24 | Comunicar-se com boa entonação, ritmo e pronúncia clara.
25 |
26 |
27 |
28 | Escrita
30 |
31 | Redigir um texto claro, ou um email expondo ideias de forma assertiva.
32 |
33 |
34 |
35 | Corporal
37 |
38 | Sintonia entre comunicação verbal e corporal, se fazer entender.
39 |
40 |
41 |
42 |
43 | );
44 | };
45 |
46 | export default Services;
47 |
--------------------------------------------------------------------------------
/src/components/Sidebar/SidebarElements.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { FaTimes } from "react-icons/fa";
3 | import { Link as LinkR } from "react-router-dom";
4 | import { Link as LinkS } from "react-scroll";
5 |
6 | export const SidebarContainer = styled.aside`
7 | position: fixed;
8 | z-index: 999;
9 | width: 100%;
10 | height: 100%;
11 | background: #101522;
12 | display: grid;
13 | align-items: center;
14 | top: 0;
15 | left: 0;
16 | transition: 0.3s ease-in-out;
17 | opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
18 | top: ${({ isOpen }) => (isOpen ? "0" : "-100%")};
19 | `;
20 |
21 | export const CloseIcon = styled(FaTimes)`
22 | color: #F5EC3E;
23 | `;
24 |
25 | export const Icon = styled.div`
26 | position: absolute;
27 | top: 1.2rem;
28 | right: 1.5rem;
29 | background: transparent;
30 | font-size: 2rem;
31 | cursor: pointer;
32 | outline: none;
33 | `;
34 |
35 | export const SidebarWrapper = styled.div`
36 | color: #fff;
37 | `;
38 |
39 | export const SidebarMenu = styled.ul`
40 | display: grid;
41 | grid-template-columns: 1fr;
42 | grid-template-rows: repeat(6, 80px);
43 | text-align: center;
44 |
45 | @media screen and (max-width: 480px) {
46 | grid-template-rows: repeat(6, 60px);
47 | }
48 | `;
49 |
50 | export const SidebarLink = styled(LinkS)`
51 | display: flex;
52 | align-items: center;
53 | justify-content: center;
54 | font-size: 1.5rem;
55 | text-decoration: none;
56 | list-style: none;
57 | transition: 0.2s ease-in-out;
58 | color: #F5EC3E;
59 | cursor: pointer;
60 |
61 | &:hover {
62 | color: #fff;
63 | transition: 0.2s ease-in-out;
64 | }
65 | `;
66 |
67 | export const SideBtnWrap = styled.div`
68 | display: flex;
69 | justify-content: center;
70 | `;
71 |
72 | export const SidebarRoute = styled(LinkR)`
73 | border-radius: 50px;
74 | background: #A2A959;
75 | white-space: nowrap;
76 | padding: 16px 64px;
77 | color: #fff;
78 | font-size: 16px;
79 | outline: none;
80 | border: none;
81 | cursor: pointer;
82 | transition: all 0.2s ease-in-out;
83 | text-decoration: none;
84 |
85 | &:hover {
86 | transition: all 0.2s ease-in-out;
87 | background: #fff;
88 | color: #010606;
89 | }
90 | `
--------------------------------------------------------------------------------
/src/components/Sidebar/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | SidebarContainer,
4 | Icon,
5 | CloseIcon,
6 | SidebarWrapper,
7 | SidebarMenu,
8 | SidebarLink,
9 | } from "./SidebarElements";
10 |
11 | const Sidebar = ({ isOpen, toggle }) => {
12 | return (
13 |
14 |
15 |
17 |
18 |
19 | Conexão
20 | Clareza
21 | Tipos de Comunicação
22 | Poder
23 |
24 |
25 |
26 | );
27 | };
28 |
29 | export default Sidebar;
--------------------------------------------------------------------------------
/src/icons/svg-4.svg:
--------------------------------------------------------------------------------
1 | code typing online discussion things_to_say
7 | ,
9 | document.getElementById('root')
10 | );
11 |
--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Sidebar from "../components/Sidebar";
3 | import Navbar from "../components/NavBar";
4 | import HeroSection from "../components/HeroSection";
5 | import InfoSection from "../components/InfoSection";
6 | import {
7 | homeObjOne,
8 | homeObjTwo,
9 | homeObjThree,
10 | } from "../components/InfoSection/Data";
11 | import Services from "../components/Services";
12 | import Footer from "../components/Footer";
13 |
14 | const Home = () => {
15 | const [isOpen, setIsOpen] = useState(false);
16 |
17 | const toggle = () => {
18 | setIsOpen(!isOpen);
19 | };
20 |
21 | return (
22 | <>
23 | 
7 |
8 |
9 | 
38 | 
66 |