develop #7
@ -35,7 +35,7 @@
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
width: 69.2%;
|
||||
/*width: 69.2%;*/
|
||||
align-self: center;
|
||||
|
||||
h2 {
|
||||
|
@ -5,18 +5,22 @@
|
||||
height: 285px;
|
||||
margin-right: 30px;
|
||||
|
||||
a {
|
||||
color: var(--gray-200);
|
||||
padding: 10px 16px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
li {
|
||||
width: inherit;
|
||||
|
||||
&.ativo {
|
||||
color: var(--white);
|
||||
background-color: var(--black);
|
||||
a {
|
||||
color: var(--gray-200);
|
||||
padding: 10px 16px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
|
||||
&.ativo {
|
||||
color: var(--white);
|
||||
background-color: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -17,6 +17,8 @@
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
padding: 13px 16px;
|
||||
border: 1px solid var(--gray-300);
|
||||
@ -27,6 +29,7 @@
|
||||
color: var(--gray-100);
|
||||
width: 340px;
|
||||
height: 42px;
|
||||
margin-right: 8px;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
@ -35,6 +38,30 @@
|
||||
color: var(--gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
padding: 14px 20px;
|
||||
background: var(--black);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 42px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: var(--red-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -10,4 +10,6 @@
|
||||
--gray-100: #c4c4c4;
|
||||
--gray-200: #7d7d7d;
|
||||
--gray-300: #e5e5e5;
|
||||
|
||||
--red-100: #ff0000;
|
||||
}
|
||||
|
52
react-project/src/components/Main.tsx
Normal file
52
react-project/src/components/Main.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import React from "react";
|
||||
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
import { Navigation } from "./Navigation";
|
||||
import { Newsletter } from "./Newsletter";
|
||||
|
||||
import { Sobre } from "./Sobre";
|
||||
import { Pagamento } from "./Pagamento";
|
||||
import { Entrega } from "./Entrega";
|
||||
import { Troca } from "./Troca";
|
||||
import { Seguranca } from "./Seguranca";
|
||||
import { Contato } from "./Contato";
|
||||
|
||||
//IMAGES
|
||||
import iconHome from "../assets/images/svgs/home.svg";
|
||||
import iconArrow from "../assets/images/svgs/arrow-right.svg";
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<div className="main">
|
||||
<div className="main__breadcrumb">
|
||||
<figure>
|
||||
<img src={iconHome} />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src={iconArrow} />
|
||||
</figure>
|
||||
<span>INSTITUCIONAL</span>
|
||||
</div>
|
||||
|
||||
<h1 className="main__title">INSTITUCIONAL</h1>
|
||||
|
||||
<div className="main__wrapperNav">
|
||||
<Navigation />
|
||||
|
||||
<Routes>
|
||||
<Route path="/" element={<Sobre />} />
|
||||
<Route path="/pagamento" element={<Pagamento />} />
|
||||
<Route path="/entrega" element={<Entrega />} />
|
||||
<Route path="/troca" element={<Troca />} />
|
||||
<Route path="/seguranca" element={<Seguranca />} />
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
</Routes>
|
||||
</div>
|
||||
|
||||
<Newsletter />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Main };
|
@ -6,7 +6,7 @@ import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const FormSchema = Yup.object().shape({
|
||||
email: Yup.string().required("Campo obrigatorio").email("email invalido"),
|
||||
email: Yup.string().required("*Campo obrigatório").email("Email inválido"),
|
||||
});
|
||||
|
||||
interface IEmailType {
|
||||
@ -37,12 +37,8 @@ const Newsletter = () => {
|
||||
name="email"
|
||||
className={errors.email && touched.email && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
<button type="submit">Enviar</button>
|
||||
<ErrorMessage component="span" name="email" />
|
||||
<button type="submit">ENVIAR</button>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
@ -5,54 +5,14 @@ import "../assets/styles/variables.scss";
|
||||
import "../assets/styles/main.scss";
|
||||
|
||||
import { Header } from "../components/Header";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { Newsletter } from "../components/Newsletter";
|
||||
import { Main } from "../components/Main";
|
||||
import { Footer } from "../components/Footer";
|
||||
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
import { Sobre } from "../components/Sobre";
|
||||
import { Pagamento } from "../components/Pagamento";
|
||||
import { Entrega } from "../components/Entrega";
|
||||
import { Troca } from "../components/Troca";
|
||||
import { Seguranca } from "../components/Seguranca";
|
||||
import { Contato } from "../components/Contato";
|
||||
//IMAGES
|
||||
import iconHome from "../assets/images/svgs/home.svg";
|
||||
import iconArrow from "../assets/images/svgs/arrow-right.svg";
|
||||
|
||||
const Institucional = () => {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<div className="main">
|
||||
<div className="main__breadcrumb">
|
||||
<figure>
|
||||
<img src={iconHome} />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src={iconArrow} />
|
||||
</figure>
|
||||
<span>INSTITUCIONAL</span>
|
||||
</div>
|
||||
|
||||
<h1 className="main__title">INSTITUCIONAL</h1>
|
||||
|
||||
<div className="main__wrapperNav">
|
||||
<Navigation />
|
||||
<Routes>
|
||||
<Route path="/" element={<Sobre />} />
|
||||
<Route path="/pagamento" element={<Pagamento />} />
|
||||
<Route path="/entrega" element={<Entrega />} />
|
||||
<Route path="/troca" element={<Troca />} />
|
||||
<Route path="/seguranca" element={<Seguranca />} />
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
</Routes>
|
||||
</div>
|
||||
|
||||
<Newsletter />
|
||||
</div>
|
||||
|
||||
<Main />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user