luizfelipe9627/desafio-react-e-typescript-luiz-felipe
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: criado os textos da nav do institucional. #11

Merged
luizfelipe9627 merged 1 commits from feature/institucional into development 2023-01-17 03:16:24 +00:00
Conversation 0 Commits 1 Files Changed 19 +373 -88
19 changed files with 373 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
package-lock.json generated
View File

@ -18,6 +18,7 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"typescript": "^4.9.4",
@ -3066,6 +3067,14 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -14059,6 +14068,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
"dependencies": {
"@remix-run/router": "1.2.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
"dependencies": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -18999,6 +19038,11 @@
"source-map": "^0.7.3"
}
},
"@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -26832,6 +26876,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
"requires": {
"@remix-run/router": "1.2.1"
}
},
"react-router-dom": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
"requires": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.2"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"typescript": "^4.9.4",

2
public/index.html
View File

@ -8,7 +8,7 @@
<meta name="description" content="Desafio 5 - M3 Academy" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>Desafio React e TypeScript</title>
<title>M3 Academy - Desafio 5</title>
</head>
<body>

71
src/components/Header/Menu.module.scss
View File

@ -1,71 +0,0 @@
@import "../../styles/utils/variables.scss";
.menu {
display: none;
@media (max-width: 1024px) {
display: flex;
}
.menu-header-opacity {
width: 100vw;
min-height: 100%;
opacity: 2;
position: absolute;
top: 0;
left: 0;
background-color: #454545b2;
z-index: 999;
.menu-header {
position: absolute;
background-color: $black;
width: 90.5%;
@media (min-width: 280px) and (max-width: 1024px) {
width: 95.3%;
}
.menu-header-wrapper {
padding: 31px 16px;
display: flex;
justify-content: space-between;
align-items: center;
div {
a {
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-transform: uppercase;
color: $white;
text-decoration: none;
}
}
}
}
.menu-nav {
height: 585px;
background-color: $white;
padding: 31px 16px;
ul {
list-style: none;
li {
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-transform: uppercase;
color: $primary-500;
&:nth-child(2) {
margin: 12px 0;
}
}
}
}
}
}

4
src/components/footer/FooterBottom.module.scss
View File

@ -55,6 +55,10 @@
width: 30px;
}
@media (min-width: 280px) and (max-width: 300px) {
width: 24.5px;
}
@media (min-width: 2500px) {
width: 70px;
}

83
src/components/section/ContentContato.module.scss Normal file
View File

@ -0,0 +1,83 @@
@import "../../styles/utils/variables.scss";
.contentContato {
width: 100%;
h2 {
font-size: 24px;
font-weight: 700;
line-height: 28px;
}
form {
.infosForm {
flex-direction: column;
label {
font-size: 14px;
font-weight: 400;
line-height: 16px;
color: $black;
}
input {
min-width: 100%;
height: 46px;
border-radius: 25px;
padding: 15px 20px;
margin: 12px 0;
outline: none;
border: 1px solid #100d0e;
&::placeholder {
font-size: 14px;
font-weight: 400;
line-height: 16px;
color: #b9b7b7;
}
}
}
.checkboxForm {
display: flex;
justify-content: center;
margin-bottom: 12px;
label {
display: flex;
align-items: flex-end;
margin-right: 5px;
p {
text-decoration: underline;
color: #100d0e;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
span {
color: $primary-900;
margin-right: 3px;
}
}
input {
width: 18px;
}
}
button {
width: 100%;
height: 52px;
border-radius: 25px;
background-color: $black;
color: $white;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
}
}

47
src/components/section/ContentContato.tsx Normal file
View File

@ -0,0 +1,47 @@
// Bibliotecas
import React from "react";
// Estilos
import styleContentContato from "./ContentContato.module.scss";
const ContentContato = () => {
return (
<div className={styleContentContato["contentContato"]}>
<h2>Preencha o formulário</h2>
<form>
<div className={styleContentContato["infosForm"]}>
<label htmlFor="nome">Nome</label>
<input type="text" id="nome" placeholder="Seu nome completo"/>
<label htmlFor="email">E-mail</label>
<input type="email" id="email" placeholder="Seu e-mail"/>
<label htmlFor="cpf">CPF</label>
<input type="text" id="cpf" placeholder="000.000.000-00"/>
<label htmlFor="nascimento">Data de Nascimento</label>
<input type="text" id="nascimento" placeholder="00.00.0000"/>
<label htmlFor="telefone">Telefone</label>
<input type="text" id="telefone" placeholder="(00) 00000-0000"/>
<label htmlFor="instagram">Instagram</label>
<input type="text" id="instagram" placeholder="@seuuser"/>
</div>
<div className={styleContentContato["checkboxForm"]}>
<label htmlFor="termos">
<span>*</span>
<p>Declaro que li e aceito</p>
</label>
<input type="checkbox" id="termos" />
</div>
<button>Cadastre-se</button>
</form>
</div>
);
};
export { ContentContato };

29
src/components/section/ContentEntrega.tsx Normal file
View File

@ -0,0 +1,29 @@
// Bibliotecas
import React from "react";
// Estilos
//import styleContentEntrega from "./ContentEntrega.module.scss";
const ContentEntrega = () => {
return (
<div>
<h2>Forma de Pagamento</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, alias,
hic consequuntur tenetur optio dicta explicabo quos voluptate laudantium
dolorum sed blanditiis aspernatur itaque aut adipisci rem. Dolores,
laborum rerum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
accusamus magnam a aliquid nam. Nemo magnam corporis soluta repellat
eveniet illo laboriosam tempore mollitia, adipisci, dolores repellendus
accusamus maxime perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore provident facere dolore consequuntur eum neque reiciendis voluptatem commodi porro, voluptatibus dolorem praesentium qui enim sapiente labore. Repellat sunt pariatur neque.
</p>
</div>
);
};
export { ContentEntrega };

2
src/components/section/ContentAbout.module.scss → src/components/section/ContentInstitucional.module.scss
View File

@ -1,6 +1,6 @@
@import "../../styles/utils/variables.scss";
.contentAbout {
.contentInstitucional {
h2 {
margin: 12px 0;
font-size: 24px;

31
src/components/section/ContentInstitucional.tsx Normal file
View File

@ -0,0 +1,31 @@
// Bibliotecas
import React from "react";
import { Routes, Route } from "react-router-dom";
// Estilos
import styleContentInstitucional from "./ContentInstitucional.module.scss";
import { ContentPagamento } from "./ContentPagamento";
import { ContentEntrega } from "./ContentEntrega";
import { ContentTroca } from "./ContentTroca";
import { ContentSeguranca } from "./ContentSeguranca";
import { ContentContato } from "./ContentContato";
import { ContentSobre } from "./ContentSobre";
const ContentInstitucional = () => {
return (
<div className={styleContentInstitucional["contentInstitucional"]}>
<Routes>
<Route path="/" element={<ContentSobre />} />
<Route path="/sobre" element={<ContentSobre />} />
<Route path="/forma-de-pagamento" element={<ContentPagamento />} />
<Route path="/entrega" element={<ContentEntrega />} />
<Route path="/troca-e-devolucao" element={<ContentTroca />} />
<Route path="/seguranca-e-privacidade" element={<ContentSeguranca />} />
<Route path="/contato" element={<ContentContato />} />
</Routes>
</div>
);
};
export { ContentInstitucional };

28
src/components/section/ContentPagamento.tsx Normal file
View File

@ -0,0 +1,28 @@
// Bibliotecas
import React from "react";
// Estilos
//import styleContentPagamento from "./ContentPagamento.module.scss";
const ContentPagamento = () => {
return (
<div>
<h2>Forma de Pagamento</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making it
over 2000 years old.
</p>
</div>
);
};
export { ContentPagamento };

25
src/components/section/ContentSeguranca.tsx Normal file
View File

@ -0,0 +1,25 @@
// Bibliotecas
import React from "react";
// Estilos
//import styleContentSeguranca from "./ContentSeguranca.module.scss";
const ContentSeguranca = () => {
return (
<div>
<h2>Segurança e Privacidade</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit voluptatibus perferendis nihil necessitatibus iusto! Deserunt vero eaque reiciendis dolores ducimus? Aliquid totam repellendus impedit cumque velit quasi temporibus perspiciatis tenetur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate nisi officiis porro! Ipsum voluptatem deserunt repudiandae minima sunt reiciendis veniam minus animi repellat provident soluta error, voluptate tempora harum consequatur.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae natus, nemo a ipsa eveniet assumenda iure ducimus suscipit libero, distinctio neque, consequatur quasi incidunt accusamus ad ipsam necessitatibus dignissimos vero.
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt non eum minus officiis qui earum aperiam reprehenderit odit officia architecto blanditiis, ad corporis a natus voluptatem harum laudantium hic illum. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum quo cupiditate beatae expedita sapiente totam illo repellendus tempora delectus, aspernatur, earum aut natus dolor ducimus eaque excepturi ab debitis dolore!</p>
</div>
);
};
export { ContentSeguranca };

9
src/components/section/ContentAbout.tsx → src/components/section/ContentSobre.tsx
View File

@ -1,12 +1,9 @@
// Bibliotecas
import React from "react";
// Estilos
import styleContent from "./ContentAbout.module.scss";
const ContentAbout = () => {
const ContentSobre = () => {
return (
<div className={styleContent["contentAbout"]}>
<div>
<h2>Sobre</h2>
<p>
@ -42,4 +39,4 @@ const ContentAbout = () => {
);
};
export { ContentAbout };
export { ContentSobre };

36
src/components/section/ContentTroca.tsx Normal file
View File

@ -0,0 +1,36 @@
// Bibliotecas
import React from "react";
// Estilos
//import styleContentTroca from "./ContentTroca.module.scss";
const ContentTroca = () => {
return (
<div>
<h2>Troca e Devolução</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla excepturi
quisquam eos non, ipsum nobis est cum minus beatae illo molestias
similique corporis dignissimos maiores, accusantium mollitia temporibus
libero sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dolorem
assumenda molestias beatae ducimus nobis ipsum, distinctio cumque, harum
nisi odio earum voluptate deleniti sapiente quod ullam ab repellendus
temporibus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
recusandae, accusantium voluptates expedita ullam nostrum exercitationem
incidunt! Voluptates ducimus maiores soluta consectetur ipsa rem
consequatur quasi fugit odio. Labore, quos. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium, optio? Odit ratione rerum veniam temporibus quis necessitatibus, provident soluta deleniti repudiandae? Delectus tempora nostrum impedit officia perferendis odio vero rem.
</p>
</div>
);
};
export { ContentTroca };

8
src/components/section/NavInstitucional.module.scss
View File

@ -1,7 +1,6 @@
@import "../../styles/utils/variables.scss";
.navInstitucional {
border-right: 1px solid $black;
margin-right: 30px;
@media (max-width: 1024px) {
@ -11,6 +10,13 @@
ul {
list-style: none;
border-right: 1px solid #000;
height: 285px;
@media (max-width: 1024px) {
height: auto;
border-right: none;
}
li {
padding: 10px 16px;

7
src/components/section/NavInstitucional.tsx
View File

@ -4,6 +4,13 @@ import React from "react";
// Estilos
import styleNavInstitucional from "./NavInstitucional.module.scss";
import { ContentPagamento } from "./ContentPagamento";
import { ContentEntrega } from "./ContentEntrega";
import { ContentTroca } from "./ContentTroca";
import { ContentSeguranca } from "./ContentSeguranca";
import { ContentContato } from "./ContentContato";
import { ContentSobre } from "./ContentSobre";
const NavInstitucional = () => {
return (
<nav className={styleNavInstitucional["navInstitucional"]}>

8
src/index.tsx
View File

@ -5,8 +5,14 @@ import "./styles/utils/all.scss";
import { Home } from "./pages/Home";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(<Home />);
root.render(
<BrowserRouter>
<Home />
</BrowserRouter>
);

5
src/pages/Home.tsx
View File

@ -5,17 +5,12 @@ import { Header } from "./Header";
import { Section } from "./Section";
import { Footer } from "./Footer";
function Home() {
return (
<body>
<Header />
<Section />
<Footer />
<ButtonsGlobal />
</body>
);

4
src/pages/Section.tsx
View File

@ -5,7 +5,7 @@ import React from "react";
import { Breadcrumb } from "../components/section/Breadcrumb";
import { TitleInstitucional } from "../components/section/TitleInstitucional";
import { NavInstitucional } from "../components/section/NavInstitucional";
import { ContentAbout } from "../components/section/ContentAbout";
import { ContentInstitucional } from "../components/section/ContentInstitucional";
// Estilos
import styleSection from "../components/section/Section.module.scss";
@ -18,7 +18,7 @@ const Section = () => {
<section className={styleSection["section"]}>
<NavInstitucional />
<ContentAbout />
<ContentInstitucional />
</section>
</main>
);