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

fix: Corrige alinha mente e responsividade dos conteudos dentro do main #12

Merged
emmanuelvitor merged 1 commits from feature/responsiveArticle into development 2023-01-16 19:26:31 +00:00
Conversation 0 Commits 1 Files Changed 19 +161 -197
19 changed files with 161 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/BreadCrumb/BreadCreumb.tsx
View File

@ -12,21 +12,20 @@ export const BreadCrumb = () => {
const routeName = pathname.split("/")[1]
return (
<nav >
{pathname !== "/" && (
<ul className={styles.breadNav}>
<li>
<Link to="/">
<ul className={styles["breadNav"]}>
<li className={styles["navItem"]}>
<Link to="/institucional/sobre">
<img src={homeIcon} alt="Icone de home" />
</Link>
</li>
<li className={styles.navItem}>
<li className={styles["navItem"]}>
<img src={arrowRight} alt="Icone de seta para a direita" />
<span className={styles.routeName}>
<span className={styles["routeName"]}>
{routeName}
</span>
</li>

31
src/components/BreadCrumb/BreadCrumb.module.scss
View File

@ -2,8 +2,21 @@
display: flex;
gap: 12px;
align-items: center;
margin: 0 7.8125%;
margin: 0 100px;
padding: 30px 16px;
@media (max-width:1024px) {
margin: 0 16px;
}
a {
img {
@media (min-width:2500px) {
min-width: 31.25px;
min-height: 31.25px;
}
}
}
}
.navItem {
@ -11,6 +24,14 @@
gap: 12px;
align-items: center;
img {
@media (min-width:2500px) {
width: 100%;
height: 100%;
min-width: 8.9px;
min-height: 15.62px;
}
}
}
.routeName {
@ -24,4 +45,12 @@
color: #C4C4C4;
text-transform: uppercase;
@media (min-width:2500px) {
font-size: 24px;
line-height: 28px;
}
}

6
src/components/Footer/Accordion/styles/Accordion.module.scss
View File

@ -22,7 +22,9 @@ h5 {
justify-content: space-between;
width: 100%;
max-width: 707px;
height: 139px;
height: 100%;
// max-height: 139px;
@media (min-width:2500px) {
@ -84,7 +86,7 @@ h5 {
.accordion__body {
display: flex;
flex-direction: column;
max-height: 140px;
// max-height: 140px;
margin-top: 12px;
gap: 6px;
height: 125px;

1
src/components/Footer/Footer.tsx
View File

@ -13,6 +13,7 @@ export const Footer = () => {
<AccordionFooter />
<SocialMedia />
</div>
<Rodape />
</div >

2
src/components/Footer/NewsLetter/Newsletter.module.scss
View File

@ -70,7 +70,7 @@
&__input {
width: 100%;
max-width: 340px;
// max-width: 340px;
height: 42px;
border-radius: 4px;
border: 1px solid #E5E5E5;

2
src/components/Footer/Rodape/Rodape.module.scss
View File

@ -14,7 +14,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 7.8125%;
margin: 0 100px;
@media (max-width: 1024px) {
flex-direction: column;

3
src/components/Footer/Rodape/Rodape.tsx
View File

@ -18,6 +18,9 @@ import { DevelopedBy } from './DevelopedBy';
export const Rodape = () => {
return (
<footer className={styleRodape["footer"]}>
{/*
<Rodape />
*/}
<div className={styleRodape["footer__wrapper"]}>
<div className={styleRodape["footer__address"]}>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing

10
src/components/Footer/SocialMedia/SocialMedia.tsx
View File

@ -15,23 +15,23 @@ export const SocialMedia = () => {
<div className={styleSocialMedia["wrapper"]}>
<div className={styleSocialMedia["wrapper__social__media"]}>
<IconLink link={""}
<IconLink link={"/"}
sourceImg={facebook}
altText="Logo da rede social "
/>
<IconLink link={""}
<IconLink link={"/"}
sourceImg={instagram}
altText="Logo da rede social "
/>
<IconLink link={""}
<IconLink link={"/"}
sourceImg={twitter}
altText="Logo da rede social "
/>
<IconLink link={""}
<IconLink link={"/"}
sourceImg={youtube}
altText="Logo da rede social "
/>
<IconLink link={""}
<IconLink link={"/"}
sourceImg={linkedin}
altText="Logo da rede social "
/>

2
src/components/Header/HeaderDesk/HeaderBottom.tsx
View File

@ -13,7 +13,7 @@ export const HeaderBottom = () => {
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
Saiba Mais
</Link>
<Link className={styleHeader["list__items__link"]} to="/institucional">
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
Institucional
</Link>
</nav>

9
src/components/Header/HeaderDesk/HeaderTop.tsx
View File

@ -4,14 +4,15 @@ import search from "../assets/svgs/search.svg";
import cart from "../assets/svgs/cart.svg";
import styleHeader from '../styles/Header.module.scss';
import { Link } from "react-router-dom";
export const HeaderTop = () => {
return (
<div className={styleHeader["header__top"]}>
<div className={styleHeader["container__header__top"]}>
<div className={styleHeader["container__logo"]}>
<Link to="/institucional/sobre" className={styleHeader["container__logo"]}>
< img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
</div>
</Link>
<form className={styleHeader["container__search"]}>
<input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
<a className={styleHeader["container__search__link"]} href="/">
@ -23,9 +24,9 @@ export const HeaderTop = () => {
<a href="/">Entrar</a>
</span>
<span className={styleHeader["container__menu__cart"]}>
<a href="/" >
<Link to="/" >
<img src={cart} alt="icone de cart" />
</a>
</Link>
</span>
</div>
</div>

4
src/components/Header/styles/Header.module.scss
View File

@ -51,7 +51,7 @@ a {
.container__header__top {
display: flex;
align-items: center;
margin: 0 7.8125%;
margin: 0 100px;
width: 100%;
@ -276,7 +276,7 @@ a {
.navBar__items {
width: 100%;
max-width: 349px;
margin: 0 7.8125%;
margin: 0 100px;
display: flex;

24
src/components/Layout/index.tsx
View File

@ -1,24 +0,0 @@
import { Outlet } from "react-router-dom"
import { Footer } from "../Footer/Footer"
import { Header } from "../Header/Header"
import { BreadCrumb } from "../BreadCrumb/BreadCreumb"
import styles from "./styles.module.scss"
export const Layout = () => {
return (
<div className={styles.container}>
<Header />
<BreadCrumb />
<main className={styles.main}>
<Outlet />
</main>
<Footer />
</div >
)
}

108
src/components/Main/Fom/ContactForm.tsx
View File

@ -1,108 +0,0 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import contactFormSchema from "../../../schema/ContactFormSchema";
import styleForm from "./ContactForm.module.scss";
interface IFormikValues {
name: string;
email: string;
cpf: string;
dateBirth: string;
phone: string;
instagram?: string;
checkbox: boolean;
}
const initialValues = {
name: "",
email: "",
cpf: "",
dateBirth: "",
phone: "",
instagram: "",
checkbox: false,
};
const formSubmit = (values: IFormikValues) => {
console.log(values);
};
export const ContactForm = () => {
return (
<Formik
onSubmit={formSubmit}
initialValues={initialValues}
validationSchema={contactFormSchema}
>
{({ errors, touched }) => (
<Form className="formulario">
<label htmlFor="name">Nome</label>
<Field
id="name"
name="name"
placeholder="Seu nome completo"
className={errors.name && touched.name && "invalid"}
/>
<ErrorMessage name="name" className="form-ivalid-feedback" />
<label htmlFor="email">E-mail</label>
<Field
id="email"
name="email"
placeholder="Seu e-mail"
className={errors.email && touched.email && "invalid"}
/>
<ErrorMessage name="email" className="form-ivalid-feedback" />
<label htmlFor="cpf">CPF</label>
<Field
id="cpf"
name="cpf"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
<ErrorMessage name="cpf" className="form-ivalid-feedback" />
<label htmlFor="data">Data de Nascimento:</label>
<Field
id="dateBirth"
name="dateBirth"
placeholder="00.00.0000"
className={errors.dateBirth && touched.dateBirth && "invalid"}
/>
<ErrorMessage name="dateBirth" className="form-ivalid-feedback" />
<label htmlFor="phone">Telefone:</label>
<Field
id="phone"
name="phone"
type="tel"
placeholder="(00) 00000-0000"
className={errors.phone && touched.phone && "invalid"}
/>
<ErrorMessage name="phone" className="form-ivalid-feedback" />
<label htmlFor="instagram">Instagram</label>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
<ErrorMessage name="instagram" className="form-ivalid-feedback" />
<div>
<label htmlFor="checkbox">Declaro que li e aceito</label>
<Field
type="checkbox"
id="checkbox"
name="checkbox"
className={errors.checkbox && touched.checkbox && "invalid"}
/>
<ErrorMessage name="checkbox" className="form-ivalid-feedback" />
</div>
<button type="submit">CADASTRE-SE</button>
</Form>
)}
</Formik>
);
};

24
src/pages/Home.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Outlet } from "react-router-dom"
import { Footer } from "../components/Footer/Footer"
import { Header } from "../components/Header/Header"
import { BreadCrumb } from "../components/BreadCrumb/BreadCreumb"
import styles from "./styles.module.scss"
export const Home = () => {
return (
<div className={styles["container"]}>
<Header />
<BreadCrumb />
<main className={styles["main"]}>
<Outlet />
</main>
<Footer />
</div >
)
}

67
src/pages/Intitucional/Institucional.module.scss
View File

@ -1,9 +1,18 @@
.batata {
.wrapper__sideBar {
display: flex;
gap: 30px;
height: 285px;
height: 100%;
max-height: 465px;
margin: 80px 0 70px;
@media (max-width:1024px) {
flex-direction: column;
margin: 40px 0 80px;
max-height: none;
}
h2 {
margin: 0;
font-family: 'Roboto';
@ -11,6 +20,18 @@
font-weight: 700;
font-size: 24px;
line-height: 28px;
@media (min-width:2500px) {
font-size: 48px;
line-height: 56px;
}
}
nav {
@media (min-width:2500px) {
max-width: 590px;
width: 100%;
}
}
@ -25,22 +46,38 @@
padding: 0;
margin: 0;
@media (min-width:2500px) {}
@media (min-width:2500px) {
min-width: 590px;
}
@media (max-width:1024px) {
min-width: none;
border-right: none;
}
&__item {
display: flex;
align-items: center;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
text-transform: inherit;
padding: 10px 16px;
color: #7D7D7D;
@media (min-width:2500px) {
height: 58px;
padding: 0 16px;
}
&.ativo {
background-color: #000;
@ -50,15 +87,23 @@
font-size: 16px;
line-height: 19px;
@media (min-width:2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
}
.content-right {
background-color: aquamarine;
width: 100%;
height: 100%;
h2 {}
p {
font-family: 'Roboto';
@ -66,8 +111,18 @@
font-weight: 400;
font-size: 13px;
line-height: 15px;
margin-bottom: 0;
color: #7D7D7D;
@media (min-width:2500px) {
font-size: 26px;
line-height: 30px;
}
@media (max-width:1024px) {
text-align: justify;
}
}
}
}

2
src/pages/Intitucional/Instituicional.tsx
View File

@ -8,7 +8,7 @@ export const Instituicional = () => {
return (
<>
<h1>Institucional</h1>
<div className={styleInstitucional["batata"]}>
<div className={styleInstitucional["wrapper__sideBar"]}>
<nav>
<ul className={styleInstitucional["sideBar"]}>
<NavLink

14
src/components/Layout/styles.module.scss → src/pages/styles.module.scss
View File

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
height: 100vh;
height: 100%;
overflow: hidden;
}
@ -10,11 +10,16 @@
display: flex;
height: auto;
margin: 0 7.8125%;
margin: 0 100px;
flex-direction: column;
@media (max-width:1024px) {
margin: 0 16px;
z-index: -9;
}
h1 {
text-align: center;
font-family: 'Roboto';
@ -27,5 +32,10 @@
color: #292929;
@media (min-width:2500px) {
font-size: 48px;
line-height: 56px;
}
}
}

10
src/routes.tsx
View File

@ -1,5 +1,5 @@
import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
import { Layout } from "./components/Layout"
import { Home } from "./pages/Home"
import { Contato } from "./pages/Intitucional/Contato"
import { Entrega } from "./pages/Intitucional/Entrega"
import { FormaDePagamento } from "./pages/Intitucional/FormaDePagamento"
@ -14,9 +14,9 @@ export const Routes = () => {
return (
<ReactRouterRoutes>
<Route path="/" element={<Layout />}>
<Route path="institucional" element={<Instituicional />}>
<Route path="sobre" element={<Sobre />} index />
<Route path="/" element={< Home />}>
< Route path="institucional/sobre" element={<Instituicional />}>
<Route path="sobre" element={<Sobre />} />
<Route path="forma-de-pagamento" element={<FormaDePagamento />} />
<Route path="entrega" element={<Entrega />} />
<Route path="troca-e-devolucao" element={<TrocaEDevolucao />} />
@ -24,6 +24,6 @@ export const Routes = () => {
<Route path="contato" element={<Contato />} />
</Route>
</Route>
</ReactRouterRoutes>
</ReactRouterRoutes >
)
}

28
variables.scss
View File

@ -1,28 +0,0 @@
/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif;
$font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */
$color-black: #000000;
$color-black2: #292929;
$color-black3: #58595B;
$color-white: #fff;
$color-gray: #6c6c6c;
$color-gray2: #7D7D7D;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-gray6: #C4C4C4;
$color-gray7: #e0e0e0;
$color-blue: #4267b2;
$color-blue2: #00C8FF;
$color-green: #4caf50;
$color-orange: #f15a31;