SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/body' (#22) from feature/body into development

Browse Source 
Reviewed-on: #22
This commit is contained in:
Savio Carvalho Moraes 2023-01-20 16:45:39 +00:00
commit 995eb7cde3
32 changed files with 340 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/AccordionBody/AccordionBody.tsx
View File

@ -7,21 +7,33 @@ import styles from "./accordionBody.module.scss";
const AccordionBody = () => {
return (
<Tab.Container id="list-group-tabs" defaultActiveKey="#link1">
<Row>
<Col sm={4}>
<Row className="fileiraItens">
<Col sm={4} className="indexLista">
<ListGroup className="accList">
<ListGroup.Item variant="dark" action href="#link1">
Sobre
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link2">
Forma de Pagamento
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link3">
Entrega
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link4">
Troca e Devolução
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link5">
Segurança e Privacidade
</ListGroup.Item>
<ListGroup.Item variant="dark" action href="#link6">
Contato
</ListGroup.Item>
</ListGroup>
</Col>
<Col sm={8}>
<Col sm={8} className="conteudoLista">
<Tab.Content>
<Tab.Pane eventKey="#link1">
<div>
<div className="conteudo">
<h2>Sobre</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
@ -31,26 +43,90 @@ const AccordionBody = () => {
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link2">
<div className="conteudo">
<h2>Forma de Pagamento</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link3">
<div className="conteudo">
<h2>Entrega</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link4">
<div className="conteudo">
<h2>Troca e Devolução</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link5">
<div className="conteudo">
<h2>Segurança e Privacidade</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</Tab.Pane>
<Tab.Pane className="contato-item" eventKey="#link6">
<FormInput></FormInput>
</Tab.Pane>
</Tab.Content>

2
src/components/Address/address.module.scss
View File

@ -12,9 +12,11 @@
margin: 0 0 0 0;
align-items: center;
@media screen and (min-width: 2500px) {
display: flex;
width: 467px;
height: 47px;
font-size: 20px;
line-height: 23px;
align-items: center;
}
}

38
src/components/Caminhos/Caminhos.tsx
View File

@ -7,27 +7,23 @@ import React, { useState } from "react";
const Caminhos = (prop: { titulo: string }) => {
return (
<>
<nav>
<ul className={styles["caminhos-itens"]}>
<li className={styles["caminhos-item"]}>
<Link to="/">
<img
className={styles["home_img"]}
src={homeImg}
alt="Home image"
/>
</Link>
</li>
<li className={styles["caminhos-item"]}>
<p>&gt;</p>
</li>
<li className={styles["caminhos-item"]}>
<p>{prop.titulo}</p>
</li>
</ul>
</nav>
<Outlet />
<ul className={styles["caminhos-itens"]}>
<li className={styles["caminhos-item"]}>
<Link to="/">
<img
className={styles["home_img"]}
src={homeImg}
alt="Home image"
/>
</Link>
</li>
<li className={styles["caminhos-item"]}>
<p>&gt;</p>
</li>
<li className={styles["caminhos-item"]}>
<p>{prop.titulo}</p>
</li>
</ul>
</>
);
};

7
src/components/Caminhos/caminhos.module.scss
View File

@ -5,13 +5,18 @@
align-items: baseline;
margin: 30px 0 0 100px;
p {
display: flex;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #c4c4c4;
@media screen and (min-width: 2500px) {
align-items: center;
}
@media screen and (min-width: 2500px) {
align-items: flex-start;
p {
font-size: 24px;
}
}

2
src/components/Cart/cart.module.scss
View File

@ -12,6 +12,6 @@
height: 28px;
@media screen and (min-width: 2500px) {
width: 54.68px;
height: 38.91px;
height: 54.68px;
}
}

1
src/components/Enter/enter.module.scss
View File

@ -6,6 +6,7 @@
font-size: 14px;
color: #ffffff;
text-decoration: none;
@media screen and (min-width: 2500px) {
width: 105px;
height: 33px;

19
src/components/FormInput/FormInput.tsx
View File

@ -29,17 +29,7 @@ const FormInput = () => {
tel: "",
instagram: "",
termos: false,
}; /*
const formik = useFormik({
initialValues: {
nome: "",
email: "",
cpf: "",
nascimento: "",
tel: "",
instagram: "",
termos: false,
},*/
};
validationSchema: Yup.object({
nome: Yup.string()
.required("*Campo Obrigatório")
@ -57,12 +47,7 @@ const FormInput = () => {
tel: Yup.string().required("*Campo Obrigatório"),
instagram: Yup.string().required("*Campo Obrigatório"),
termos: Yup.boolean().required("*").isTrue(),
}); /*
onSubmit: function (values) {
alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}.
Age: ${values.nascimento},${values.tel},${values.instagram}`);
},
});*/
});
const validacao = Yup.object().shape({
nome: Yup.string()
.required("*Campo Obrigatório")

7
src/components/FormInput/formInput.module.scss
View File

@ -17,6 +17,11 @@
@media screen and (min-width: 2500px) {
font-size: 48px;
}
@media screen and (max-width: 1024px) {
display: flex;
align-items: center;
justify-content: center;
}
}
.form-wrapper form {
width: 100%;
@ -93,6 +98,8 @@
}
#check {
display: flex;
align-items: center;
font-size: 15px;
border: 1px solid #000000;
border-radius: 3px;

2
src/components/NavigationBar/NavigationBar.tsx
View File

@ -59,7 +59,7 @@ const NavigationBar = () => {
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/cursos">
<Link className="nav-link" to="/saiba">
SAIBA MAIS
</Link>
</li>

3
src/components/Newsletter/newsletter.module.scss
View File

@ -14,6 +14,8 @@
margin: 16px 0 16px 0;
@media screen and (min-width: 2500px) {
font-size: 36px;
width: 922px;
height: 109.24px;
}
}
.newsForm-wrapper {
@ -42,6 +44,7 @@
@media screen and (min-width: 2500px) {
width: 636px;
height: 59px;
margin-top: 8px;
}
}
.newsForm-btn {

4
src/components/Payments/payments.module.scss
View File

@ -12,6 +12,10 @@
width: 70px;
height: 40.25px;
}
@media screen and (max-width: 1024px) {
width: 30px;
height: 17px;
}
}
}

11
src/components/Router/Router.tsx
View File

@ -5,15 +5,7 @@ import { Home } from "../../pages/Home";
import { Teste } from "../../pages/Teste";
import { Cursos } from "../../pages/Cursos";
import { Institucionais } from "../../pages/Institucionais";
/*
import Home from "./Home";
import Sobre from "./Sobre";
import Usuario from "./Usuario";
<Route component={Home} path="/" exact />
<Route component={Sobre} path="/sobre" />
<Route component={Usuario} path="/usuario" />
*/
import { Saiba } from "../../pages/Saiba";
const RoutesUrl = () => {
return (
<Routes>
@ -23,6 +15,7 @@ const RoutesUrl = () => {
path="/institucionais"
element={<Institucionais titulo="Institucional" />}
/>
<Route path="/saiba" element={<Saiba titulo="Saiba mais" />} />
</Routes>
);
};

32
src/components/ScrollPage/ScrollPage.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import setaImg from "../Whatsapp/assets/image/seta.png";
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
const ScrollPage = () => {
let mybutton = document.getElementById("myBtn") as HTMLElement;
function scrollFunction() {
if (
document.body.scrollTop > 80 ||
document.documentElement.scrollTop > 80
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
window.onscroll = function () {
scrollFunction();
};
return (
<button onClick={() => topFunction()} id="myBtn" title="Ir para topo">
<img src={setaImg} alt="seta" />
</button>
);
};
export { ScrollPage };

7
src/components/SearchBox/searchBox.module.scss
View File

@ -10,14 +10,15 @@
gap: 10px;
width: 264px;
height: 32px;
font-size: 28px;
background: #ffffff;
font-size: 14px;
border: 2px solid #f2f2f2;
border-radius: 5px;
@media screen and (min-width: 2500px) {
width: 515.62px;
height: 57px;
font-size: 28px;
}
@media screen and (max-width: 1024px) {
width: 992px;
@ -45,6 +46,8 @@
&::placeholder {
font-size: 28px;
}
right: 54px;
top: 10px;
}
@media screen and (max-width: 1024px) {
right: 30px;

4
src/components/Socials/socials.module.scss
View File

@ -23,6 +23,10 @@
img {
width: 35px;
height: 35px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 70px;
}
}
}
@media screen and (max-width: 1024px) {

BIN
src/components/Whatsapp/assets/image/seta.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

2
src/index.tsx
View File

@ -9,12 +9,14 @@ import { RoutesUrl } from "./components/Router/Router";
import { Header } from "./sectors/Header/Header";
import { Footer } from "./sectors/Footer/Footer";
import { Newsletter } from "./components/Newsletter/Newsletter";
import { ContactWhat } from "./sectors/ContactWhat/ContactWhat";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<BrowserRouter>
<ContactWhat></ContactWhat>
<Header></Header>
<RoutesUrl></RoutesUrl>

10
src/pages/Home.tsx
View File

@ -1,8 +1,12 @@
import React from "react";
import { Header } from "../sectors/Header/Header";
import { Footer } from "../sectors/Footer/Footer";
import { HomeBody } from "../sectors/Body/HomeBody";
const Home = (prop: { titulo: string }) => {
return <div></div>;
return (
<div>
<HomeBody></HomeBody>
</div>
);
};
export { Home };

13
src/pages/Saiba.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import { SaibaBody } from "../sectors/Body/SaibaBody";
import { Caminhos } from "../components/Caminhos/Caminhos";
const Saiba = (prop: { titulo: string }) => {
return (
<div>
<Caminhos titulo={prop.titulo}></Caminhos>
<SaibaBody></SaibaBody>
</div>
);
};
export { Saiba };

4
src/sectors/Body/CursosBody.tsx
View File

@ -2,8 +2,8 @@ import React from "react";
const CursosBody = () => {
return (
<div>
<h2>Cursos</h2>;
<div className="body-wrapper">
<h2 className="body-title">CURSOS</h2>;
</div>
);
};

11
src/sectors/Body/HomeBody.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const HomeBody = () => {
return (
<div className="body-wrapper">
<h2 className="body-title">BEM-VINDO</h2>
</div>
);
};
export { HomeBody };

4
src/sectors/Body/InstitucionaisBody.tsx
View File

@ -2,8 +2,8 @@ import React from "react";
import { AccordionBody } from "../../components/AccordionBody/AccordionBody";
const InstitucionaisBody = () => {
return (
<div className="institucional-wrapper">
<h2 className="institucional-title">INSTITUCIONAL</h2>
<div className="body-wrapper">
<h2 className="body-title">INSTITUCIONAL</h2>
<AccordionBody></AccordionBody>
</div>
);

11
src/sectors/Body/SaibaBody.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const SaibaBody = () => {
return (
<div className="body-wrapper">
<h2 className="body-title">SAIBA MAIS</h2>
</div>
);
};
export { SaibaBody };

13
src/sectors/ContactWhat/ContactWhat.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import { Whatsapp } from "../../components/Whatsapp/Whatsapp";
import { ScrollPage } from "../../components/ScrollPage/ScrollPage";
const ContactWhat = () => {
return (
<div className="scroll-wrapper">
<Whatsapp></Whatsapp>
<ScrollPage></ScrollPage>
</div>
);
};
export { ContactWhat };

1
src/sectors/Footer/TopFooter/TopFooter.tsx
View File

@ -17,7 +17,6 @@ const TopFooter = () => {
<div className="top_footer_socials">
<Socials></Socials>
<Whatsapp></Whatsapp>
</div>
</div>
<div className="top_footerMob_wrapper">

1
src/styles/main.scss
View File

@ -12,3 +12,4 @@
@import "partials/accordionBody.scss";
@import "partials/footer.scss";
@import "partials/bottom_footer.scss";
@import "partials/scroll.scss";

49
src/styles/partials/accordionBody.scss
View File

@ -18,3 +18,52 @@
.contato-item {
width: 100%;
}
@media screen and (max-width: 1025px) {
.fileiraItens {
flex-direction: column;
}
.conteudoLista {
width: 100%;
margin-top: 30px;
}
.indexLista {
width: 100%;
}
.conteudo {
h2 {
display: flex;
justify-content: center;
}
}
}
.conteudo {
h2 {
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: #292929;
@media screen and (min-width: 2500px) {
font-size: 48px;
line-height: 56px;
}
}
p {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: #7d7d7d;
@media screen and (min-width: 2500px) {
font-size: 26px;
line-height: 30px;
}
@media screen and (max-width: 1024px) {
text-align: justify;
}
}
}

10
src/styles/partials/body.scss
View File

@ -1,15 +1,21 @@
.institucional-wrapper {
.body-wrapper {
width: 100%;
display: flex;
flex-direction: column;
margin: 80px 0 80px 0;
padding: 0 100px 0 100px;
@media screen and (max-width: 1025px) {
padding: 0 16px 0 16px;
}
}
.institucional-title {
.body-title {
font-family: "Roboto";
font-weight: 400;
font-size: 24px;
line-height: 28.13px;
display: flex;
justify-content: center;
margin-bottom: 80px;
@media screen and (min-width: 2500px) {
font-size: 48px;
line-height: 56.25px;

11
src/styles/partials/bottom_footer.scss
View File

@ -6,20 +6,29 @@
margin: 0 auto;
padding: 20px 100px;
justify-content: space-between;
align-items: center;
@media screen and (max-width: 1024px) {
align-items: flex-start;
}
}
.bottom_footer_itens {
display: flex;
flex-direction: row;
align-items: center;
@media screen and (min-width: 2500px) {
}
}
.pagamentos {
display: flex;
flex-direction: row;
align-items: center;
p {
color: white;
@media screen and (min-width: 2500px) {
font-size: 50px;
}
}
gap: 5px;
}

5
src/styles/partials/navigation.scss
View File

@ -56,3 +56,8 @@
height: 585px;
}
}
@media screen and (min-width: 2500px) {
.navbar-nav {
gap: 55px;
}
}

21
src/styles/partials/scroll.scss Normal file
View File

@ -0,0 +1,21 @@
.scroll-wrapper {
display: flex; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
flex-direction: column;
gap: 5px;
}
#myBtn {
border: none; /* Remove borders */
outline: none; /* Remove outline */
cursor: pointer; /* Add a mouse pointer on hover */
background-color: transparent;
@media screen and (min-width: 2500px) {
img {
width: 66px;
}
}
}

2
src/styles/partials/top_footer.scss
View File

@ -31,6 +31,8 @@
.acc_btn {
&::after {
background-image: url("../../components/AccordionFooter/assets/image/mais.png");
width: 30px;
background-size: 14px;
}
font-family: "Roboto";
font-style: normal;