develop #7
23
react-project/.gitignore
vendored
Normal file
23
react-project/.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
1
react-project/README.md
Normal file
1
react-project/README.md
Normal file
@ -0,0 +1 @@
|
||||
# REACT APP - INSTITUCIONAL
|
||||
31888
react-project/package-lock.json
generated
Normal file
31888
react-project/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
49
react-project/package.json
Normal file
49
react-project/package.json
Normal file
@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "react-project",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"formik": "^2.2.9",
|
||||
"node-sass": "^7.0.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-input-mask": "^2.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-text-mask": "^5.5.0",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
react-project/public/favicon.ico
Normal file
BIN
react-project/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
42
react-project/public/index.html
Normal file
42
react-project/public/index.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
BIN
react-project/public/logo192.png
Normal file
BIN
react-project/public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
react-project/public/logo512.png
Normal file
BIN
react-project/public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
14
react-project/src/App.tsx
Normal file
14
react-project/src/App.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import logo from "./logo.svg";
|
||||
import "../src/assets/styles/global.scss";
|
||||
import { Institucional } from "./pages/Institucional";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Institucional />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
1
react-project/src/Declarations.d.ts
vendored
Normal file
1
react-project/src/Declarations.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module "react-text-mask";
|
||||
3
react-project/src/assets/images/svgs/arrow-right.svg
Normal file
3
react-project/src/assets/images/svgs/arrow-right.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.11608 3.60396L1.6762 0.164193C1.45738 -0.0547311 1.10261 -0.0547311 0.883896 0.164193C0.665166 0.382921 0.665166 0.737678 0.883896 0.95639L3.92766 4.00006L0.883984 7.04362C0.665255 7.26244 0.665255 7.61716 0.883984 7.83589C1.10271 8.0547 1.45747 8.0547 1.67629 7.83589L5.11617 4.39607C5.22553 4.28665 5.28015 4.1434 5.28015 4.00008C5.28015 3.85668 5.22543 3.71332 5.11608 3.60396Z" fill="#C4C4C4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 510 B |
10
react-project/src/assets/images/svgs/home.svg
Normal file
10
react-project/src/assets/images/svgs/home.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_306)">
|
||||
<path d="M15.8326 7.59562L14.6903 6.4533L8.40431 0.167326C8.18118 -0.0557753 7.81942 -0.0557753 7.59628 0.167326L1.31028 6.4533L0.167381 7.59623C-0.0518699 7.82324 -0.0456085 8.185 0.18141 8.40425C0.402871 8.61814 0.753946 8.61814 0.975407 8.40425L1.14226 8.23623V15.4285C1.14226 15.7442 1.3981 16 1.71372 16H14.2857C14.6013 16 14.8572 15.7442 14.8572 15.4285V8.23623L15.0246 8.40368C15.2516 8.62293 15.6134 8.61664 15.8326 8.38965C16.0465 8.16819 16.0465 7.81708 15.8326 7.59562ZM9.71409 14.8571H6.28537V10.2855H9.71409V14.8571ZM13.7142 14.8571H10.857V9.71403C10.857 9.39841 10.6011 9.14256 10.2855 9.14256H5.7139C5.39829 9.14256 5.14244 9.39841 5.14244 9.71403V14.8571H2.28518V7.09334L7.99969 1.3788L13.7142 7.09334V14.8571Z" fill="#C4C4C4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_306">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 986 B |
6
react-project/src/assets/styles/global.scss
Normal file
6
react-project/src/assets/styles/global.scss
Normal file
@ -0,0 +1,6 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: var(--font-roboto);
|
||||
}
|
||||
121
react-project/src/assets/styles/modules/Contato.module.scss
Normal file
121
react-project/src/assets/styles/modules/Contato.module.scss
Normal file
@ -0,0 +1,121 @@
|
||||
.forms {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--black);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__form-col {
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
margin-left: 15px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--black-300);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--black-300);
|
||||
border-radius: 25px;
|
||||
height: 46px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--gray-400);
|
||||
padding: 15px 20px;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__terms {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
margin-bottom: 12px;
|
||||
|
||||
span {
|
||||
color: var(--red-100);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-right: 4.28px;
|
||||
position: relative;
|
||||
text-decoration: underline;
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 3px;
|
||||
right: -26px;
|
||||
}
|
||||
}
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 1px;
|
||||
margin-top: 1.5px;
|
||||
|
||||
&:checked {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-invalid-feedback {
|
||||
top: 14px;
|
||||
right: 19px;
|
||||
position: absolute;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: var(--red-100);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 52.44px;
|
||||
border-radius: 25px;
|
||||
background-color: var(--black);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__success {
|
||||
position: absolute;
|
||||
transform: translateY(100%);
|
||||
bottom: -12.56px;
|
||||
left: 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: var(--green-100);
|
||||
}
|
||||
}
|
||||
61
react-project/src/assets/styles/modules/Main.module.scss
Normal file
61
react-project/src/assets/styles/modules/Main.module.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.main {
|
||||
border: 1px solid var(--gray-100);
|
||||
margin-left: 100px;
|
||||
margin-right: 100px;
|
||||
|
||||
&__breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9.72px;
|
||||
|
||||
a {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--gray-100);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: var(--black-100);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
&__wrapperNav {
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
align-self: center;
|
||||
|
||||
h2 {
|
||||
color: var(--black-100);
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--gray-200);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
.items {
|
||||
list-style: none;
|
||||
border-right: 1px solid var(--black);
|
||||
width: 302px;
|
||||
height: 285px;
|
||||
margin-right: 30px;
|
||||
|
||||
li {
|
||||
width: inherit;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
.newsletter {
|
||||
margin-top: 70px;
|
||||
border-top: 1px solid var(--black);
|
||||
border-bottom: 1px solid var(--black);
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&__wrapper {
|
||||
h3 {
|
||||
color: var(--black-200);
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
padding: 13px 16px;
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--gray-100);
|
||||
width: 340px;
|
||||
height: 42px;
|
||||
margin-right: 8px;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 42px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: var(--red-100);
|
||||
}
|
||||
|
||||
.success {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 42px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: var(--green-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
19
react-project/src/assets/styles/variables.scss
Normal file
19
react-project/src/assets/styles/variables.scss
Normal file
@ -0,0 +1,19 @@
|
||||
:root {
|
||||
--font-roboto: "Roboto", sans-serif;
|
||||
|
||||
--black: #000;
|
||||
--black-100: #292929;
|
||||
--black-200: #303030;
|
||||
--black-300: #100d0e;
|
||||
|
||||
--white: #fff;
|
||||
|
||||
--gray-100: #c4c4c4;
|
||||
--gray-200: #7d7d7d;
|
||||
--gray-300: #e5e5e5;
|
||||
--gray-400: #b9b7b7;
|
||||
|
||||
--red-100: #ff0000;
|
||||
|
||||
--green-100: #008000;
|
||||
}
|
||||
241
react-project/src/components/Contato.tsx
Normal file
241
react-project/src/components/Contato.tsx
Normal file
@ -0,0 +1,241 @@
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import FormSchema from "../schema/FormSchema";
|
||||
|
||||
import MaskedInput from "react-text-mask";
|
||||
|
||||
import contato from "../assets/styles/modules/Contato.module.scss";
|
||||
|
||||
interface IFormikValues {
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
date: string;
|
||||
telefone: string;
|
||||
instagram: string;
|
||||
terms: boolean;
|
||||
/*sent: boolean;*/
|
||||
}
|
||||
|
||||
//setar valores iniciais
|
||||
const initialValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
date: "",
|
||||
telefone: "",
|
||||
instagram: "",
|
||||
terms: false,
|
||||
/*sent: false,*/
|
||||
};
|
||||
|
||||
const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
|
||||
|
||||
const cpfMask = [
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
];
|
||||
|
||||
const phoneNumberMask = [
|
||||
"(",
|
||||
/\d/,
|
||||
/\d/,
|
||||
")",
|
||||
" ",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
];
|
||||
|
||||
const insta = ["@"];
|
||||
|
||||
const Contato = () => {
|
||||
/*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/
|
||||
|
||||
/*const teste = (values: IFormikValues) => {
|
||||
if (values.sent) {
|
||||
const h2Tag = document.querySelector("#enviado") as HTMLSpanElement;
|
||||
h2Tag.innerHTML = "TESTE";
|
||||
alert("TESTANDO TESTE");
|
||||
}
|
||||
};*/
|
||||
|
||||
return (
|
||||
<div className={contato["forms"]}>
|
||||
<h2>Preencha o formulário</h2>
|
||||
|
||||
<Formik
|
||||
onSubmit={(values: IFormikValues, actions) => {
|
||||
/*values.sent = true;*/
|
||||
console.log(values);
|
||||
actions.resetForm();
|
||||
/*alert("formulario enviado");*/
|
||||
const sent = document.querySelector("#sent") as HTMLSpanElement;
|
||||
sent.innerHTML = "*Formulário enviado com sucesso!";
|
||||
}}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
{({ errors, touched, handleBlur }) => (
|
||||
<Form>
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="name">Nome</label>
|
||||
<Field
|
||||
placeholder="Seu nome completo"
|
||||
id="name"
|
||||
name="name"
|
||||
className={errors.name && touched.name && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="name"
|
||||
className={contato["form-invalid-feedback"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<Field
|
||||
placeholder="Seu e-mail"
|
||||
id="email"
|
||||
name="email"
|
||||
className={errors.email && touched.email && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={contato["form-invalid-feedback"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<Field
|
||||
name="cpf"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
id="cpf"
|
||||
mask={cpfMask}
|
||||
type="text"
|
||||
placeholder="000.000.000-00"
|
||||
onBlur={handleBlur}
|
||||
className={errors.cpf && touched.cpf && "invalid"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={contato["form-invalid-feedback"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="date">Data de Nascimento</label>
|
||||
<Field
|
||||
name="date"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
id="date"
|
||||
mask={dateMask}
|
||||
type="text"
|
||||
placeholder="00.00.0000"
|
||||
onBlur={handleBlur}
|
||||
className={errors.date && touched.date && "invalid"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="date"
|
||||
className={contato["form-invalid-feedback"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="telefone">Telefone</label>
|
||||
<Field
|
||||
name="telefone"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
id="telefone"
|
||||
mask={phoneNumberMask}
|
||||
type="text"
|
||||
placeholder="(00) 00000-0000"
|
||||
onBlur={handleBlur}
|
||||
className={errors.telefone && touched.telefone && "invalid"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="telefone"
|
||||
className={contato["form-invalid-feedback"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<Field
|
||||
placeholder="@seuuser"
|
||||
type="instagram"
|
||||
id="instagram"
|
||||
name="instagram"
|
||||
className={errors.instagram && touched.instagram && "invalid"}
|
||||
/*name="instagram"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
guide={false}
|
||||
id="instagram"
|
||||
mask={insta}
|
||||
type="text"
|
||||
placeholder="@seuuser"
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
errors.instagram && touched.instagram && "invalid"
|
||||
}
|
||||
/>
|
||||
)}*/
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="instagram"
|
||||
className={contato["form-invalid-feedback"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={contato["forms__terms"]}>
|
||||
<span>*</span>
|
||||
<label>
|
||||
Declaro que li e aceito
|
||||
<label htmlFor="terms"></label>
|
||||
</label>
|
||||
<Field type="checkbox" id="terms" name="terms" />
|
||||
</div>
|
||||
|
||||
<button type="submit">CADASTRE-SE</button>
|
||||
<span id="sent" className={contato["forms__success"]}></span>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Contato };
|
||||
39
react-project/src/components/Entrega.tsx
Normal file
39
react-project/src/components/Entrega.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import main from "../assets/styles/modules/Main.module.scss";
|
||||
|
||||
const Entrega = () => {
|
||||
return (
|
||||
<div className={main["content"]}>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Entrega };
|
||||
13
react-project/src/components/Footer.tsx
Normal file
13
react-project/src/components/Footer.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import { Newsletter } from "./Newsletter";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer>
|
||||
<Newsletter />
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export { Footer };
|
||||
7
react-project/src/components/Header.tsx
Normal file
7
react-project/src/components/Header.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
const Header = () => {
|
||||
return <header>Header</header>;
|
||||
};
|
||||
|
||||
export { Header };
|
||||
52
react-project/src/components/Main.tsx
Normal file
52
react-project/src/components/Main.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
import main from "../assets/styles/modules/Main.module.scss";
|
||||
|
||||
import { Navigation } from "./Navigation";
|
||||
|
||||
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["main"]}>
|
||||
<div className={main["main__breadcrumb"]}>
|
||||
<a href="/">
|
||||
<figure>
|
||||
<img src={iconHome} alt="Icone Home" />
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<figure>
|
||||
<img src={iconArrow} alt="Icone Flecha para direita" />
|
||||
</figure>
|
||||
<span>INSTITUCIONAL</span>
|
||||
</div>
|
||||
|
||||
<h1 className={main["main__title"]}>INSTITUCIONAL</h1>
|
||||
|
||||
<div className={main["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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Main };
|
||||
75
react-project/src/components/Navigation.tsx
Normal file
75
react-project/src/components/Navigation.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import React from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
import navigation from "../assets/styles/modules/Navigation.module.scss";
|
||||
|
||||
const Navigation = () => {
|
||||
/*let activeClassName = "ativo";*/
|
||||
|
||||
return (
|
||||
<ul className={navigation["items"]}>
|
||||
<li className={navigation["item"]}>
|
||||
<NavLink
|
||||
to="/"
|
||||
className={({ isActive }) =>
|
||||
isActive ? navigation.ativo : undefined
|
||||
}
|
||||
>
|
||||
Sobre
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={navigation["item"]}>
|
||||
<NavLink
|
||||
to="/pagamento"
|
||||
className={({ isActive }) =>
|
||||
isActive ? navigation.ativo : undefined
|
||||
}
|
||||
>
|
||||
Forma de Pagamento
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={navigation["item"]}>
|
||||
<NavLink
|
||||
to="/entrega"
|
||||
className={({ isActive }) =>
|
||||
isActive ? navigation.ativo : undefined
|
||||
}
|
||||
>
|
||||
Entrega
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={navigation["item"]}>
|
||||
<NavLink
|
||||
to="/troca"
|
||||
className={({ isActive }) =>
|
||||
isActive ? navigation.ativo : undefined
|
||||
}
|
||||
>
|
||||
Troca e Devolução
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={navigation["item"]}>
|
||||
<NavLink
|
||||
to="/seguranca"
|
||||
className={({ isActive }) =>
|
||||
isActive ? navigation.ativo : undefined
|
||||
}
|
||||
>
|
||||
Segurança e Privacidade
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={navigation["item"]}>
|
||||
<NavLink
|
||||
to="/contato"
|
||||
className={({ isActive }) =>
|
||||
isActive ? navigation.ativo : undefined
|
||||
}
|
||||
>
|
||||
Contato
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export { Navigation };
|
||||
51
react-project/src/components/Newsletter.tsx
Normal file
51
react-project/src/components/Newsletter.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import newsletter from "../assets/styles/modules/Newsletter.module.scss";
|
||||
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
|
||||
import * as Yup from "yup";
|
||||
|
||||
const NewsletterSchema = Yup.object().shape({
|
||||
email: Yup.string().required("*Campo obrigatório").email("Email inválido"),
|
||||
});
|
||||
|
||||
interface IEmailType {
|
||||
email: string;
|
||||
}
|
||||
|
||||
/*const initialValues = {
|
||||
email: "",
|
||||
};*/
|
||||
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
<div className={newsletter["newsletter"]}>
|
||||
<div className={newsletter["newsletter__wrapper"]}>
|
||||
<h3>ASSINE NOSSA NEWSLETTER</h3>
|
||||
<Formik
|
||||
onSubmit={(values: IEmailType, actions) => {
|
||||
actions.resetForm();
|
||||
const sent = document.querySelector(
|
||||
"#emailsent"
|
||||
) as HTMLSpanElement;
|
||||
sent.innerHTML = "Email cadastrado com sucesso!";
|
||||
}}
|
||||
initialValues={{ email: "" }}
|
||||
validationSchema={NewsletterSchema}
|
||||
>
|
||||
<Form>
|
||||
<Field placeholder="E-mail" id="email" name="email" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={newsletter["invalid"]}
|
||||
/>
|
||||
<button type="submit">ENVIAR</button>
|
||||
<span id="emailsent" className={newsletter["success"]}></span>
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Newsletter };
|
||||
39
react-project/src/components/Pagamento.tsx
Normal file
39
react-project/src/components/Pagamento.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import main from "../assets/styles/modules/Main.module.scss";
|
||||
|
||||
const Pagamento = () => {
|
||||
return (
|
||||
<div className={main["content"]}>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Pagamento };
|
||||
39
react-project/src/components/Seguranca.tsx
Normal file
39
react-project/src/components/Seguranca.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import main from "../assets/styles/modules/Main.module.scss";
|
||||
|
||||
const Seguranca = () => {
|
||||
return (
|
||||
<div className={main["content"]}>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Seguranca };
|
||||
39
react-project/src/components/Sobre.tsx
Normal file
39
react-project/src/components/Sobre.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import main from "../assets/styles/modules/Main.module.scss";
|
||||
|
||||
const Sobre = () => {
|
||||
return (
|
||||
<div className={main["content"]}>
|
||||
<h2>Sobre</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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Sobre };
|
||||
39
react-project/src/components/Troca.tsx
Normal file
39
react-project/src/components/Troca.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import main from "../assets/styles/modules/Main.module.scss";
|
||||
|
||||
const Troca = () => {
|
||||
return (
|
||||
<div className={main["content"]}>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Troca };
|
||||
16
react-project/src/index.tsx
Normal file
16
react-project/src/index.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import App from "./App";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
1
react-project/src/logo.svg
Normal file
1
react-project/src/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
19
react-project/src/pages/Institucional.tsx
Normal file
19
react-project/src/pages/Institucional.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
|
||||
import "../assets/styles/variables.scss";
|
||||
|
||||
import { Header } from "../components/Header";
|
||||
import { Main } from "../components/Main";
|
||||
import { Footer } from "../components/Footer";
|
||||
|
||||
const Institucional = () => {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Main />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Institucional };
|
||||
1
react-project/src/react-app-env.d.ts
vendored
Normal file
1
react-project/src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
||||
19
react-project/src/schema/FormSchema.ts
Normal file
19
react-project/src/schema/FormSchema.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import * as Yup from "yup";
|
||||
|
||||
export default Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(3, "Digite no mínimo 3 letras")
|
||||
.required("*Campo obrigatorio"),
|
||||
email: Yup.string().required("*Campo obrigatorio").email("E-mail inválido"),
|
||||
cpf: Yup.string()
|
||||
.matches(/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/, "CPF inválido")
|
||||
.required("*Campo obrigatorio"),
|
||||
date: Yup.string()
|
||||
.matches(/^\d{2}\.\d{2}\.\d{4}$/, "Data inválida")
|
||||
.required("*Campo obrigatorio"),
|
||||
telefone: Yup.string()
|
||||
.matches(/^\([1-9]{2}\) [0-9]{5}\-[0-9]{4}$/, "Número inválido")
|
||||
.required("*Campo obrigatorio"),
|
||||
instagram: Yup.string(),
|
||||
terms: Yup.boolean().oneOf([true], ""),
|
||||
});
|
||||
26
react-project/tsconfig.json
Normal file
26
react-project/tsconfig.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user