Merge pull request 'develop' (#10) from develop into main

Reviewed-on: #10
2023-01-20 21:50:21 +00:00 · 2023-01-20 21:50:21 +00:00 · 86807f89ea
commit 86807f89ea
parent 0c351a3524 c1897e4c50
67 changed files with 34293 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,32 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+
+# Indentação via TAB, para pug e html
+[*.html]
+indent_style = tab
+indent_size = 3
+
+# Arquivos JS e CSS
+[*.{js,css,less,scss}]
+indent_style = tab
+indent_size = 4
+
+# Demais arquivos importantes
+[*.json]
+indent_style = tab
+indent_size = 2
+
+
+# Demais arquivos importantes
+[*.md]
+indent_style = space
+indent_size = 4
--- a/.gitignore
+++ b/.gitignore
@ -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*
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,59 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@hookform/resolvers": "^2.9.10",
+    "@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",
+    "@types/react-maskedinput": "^4.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-input-mask": "^3.0.0-alpha.2",
+    "react-modal": "^3.16.1",
+    "react-scripts": "5.0.1",
+    "regex": "^0.1.1",
+    "typescript": "^4.9.4",
+    "web-vitals": "^2.1.4"
+  },
+  "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"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-input-mask": "^3.0.2",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-text-mask": "^5.4.11",
+    "formik": "^2.2.9",
+    "node-sass": "^8.0.0",
+    "react-text-mask": "^5.5.0",
+    "sass": "^1.57.1",
+    "scss": "^0.2.4",
+    "yup": "^0.32.11"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/src/assets/img/Boleto.png
+++ b/src/assets/img/Boleto.png
--- a/src/assets/img/Ellipse
+++ b/src/assets/img/Ellipse
--- a/src/assets/img/Line.png
+++ b/src/assets/img/Line.png
--- a/src/assets/img/Visa.png
+++ b/src/assets/img/Visa.png
--- a/src/assets/img/arrow-point-to-right.png
+++ b/src/assets/img/arrow-point-to-right.png
--- a/src/assets/img/arrow-up.png
+++ b/src/assets/img/arrow-up.png
--- a/src/assets/img/cart.png
+++ b/src/assets/img/cart.png
--- a/src/assets/img/diners.png
+++ b/src/assets/img/diners.png
--- a/src/assets/img/elo.png
+++ b/src/assets/img/elo.png
--- a/src/assets/img/facebook.png
+++ b/src/assets/img/facebook.png
--- a/src/assets/img/fechar.png
+++ b/src/assets/img/fechar.png
--- a/src/assets/img/hiper.png
+++ b/src/assets/img/hiper.png
--- a/src/assets/img/home-institucional.png
+++ b/src/assets/img/home-institucional.png
--- a/src/assets/img/home.png
+++ b/src/assets/img/home.png
--- a/src/assets/img/instagram.png
+++ b/src/assets/img/instagram.png
--- a/src/assets/img/linkedin.png
+++ b/src/assets/img/linkedin.png
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/assets/img/m3.png
+++ b/src/assets/img/m3.png
--- a/src/assets/img/master.png
+++ b/src/assets/img/master.png
--- a/src/assets/img/menu-hamburguer.png
+++ b/src/assets/img/menu-hamburguer.png
--- a/src/assets/img/paypal.png
+++ b/src/assets/img/paypal.png
--- a/src/assets/img/search.png
+++ b/src/assets/img/search.png
--- a/src/assets/img/twitter.png
+++ b/src/assets/img/twitter.png
--- a/src/assets/img/vtex-pci.png
+++ b/src/assets/img/vtex-pci.png
--- a/src/assets/img/vtex.png
+++ b/src/assets/img/vtex.png
--- a/src/assets/img/whatsapp.png
+++ b/src/assets/img/whatsapp.png
--- a/src/assets/img/youtube.png
+++ b/src/assets/img/youtube.png
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@ -0,0 +1,100 @@
+import React from 'react';
+import styles from '../../styles/Footer.module.scss'
+import facebook from '../../assets/img/facebook.png'
+import instagram from '../../assets/img/instagram.png'
+import twitter from '../../assets/img/twitter.png'
+import youtube from '../../assets/img/youtube.png'
+import linkedin from '../../assets/img/linkedin.png'
+import mastercard from '../../assets/img/master.png'
+import visa from '../../assets/img/visa.png'
+import diners from '../../assets/img/diners.png'
+import elo from '../../assets/img/elo.png'
+import hiper from '../../assets/img/hiper.png'
+import paypal from '../../assets/img/paypal.png'
+import boleto from '../../assets/img/boleto.png'
+import vtexpci from '../../assets/img/vtex-pci.png'
+import vtex from '../../assets/img/vtex.png'
+import m3 from '../../assets/img/m3.png'
+
+
+
+
+const Footer = () => {
+    return (
+        <footer>
+            <div className={styles['footer__newsletter']}>
+                        <form className={styles['footer__newsletter-form']}>
+                            <label htmlFor='email'>
+                                Assine nossa Newsletter
+                            </label>
+                            <div className={styles['footer__newsletter-input']}>
+                                <input id='email' type='email' placeholder='E-mail' />
+                                <button type="submit" >Enviar</button>
+                            </div>
+
+                        </form>
+
+            </div>
+            <section className={styles['footer__top']}>
+                <div className={styles['footer__infos']}>
+                    <div className={styles['footer__info-institucional']}>
+                        <p className={styles['footer__info-title']}>Institucional</p>
+                        <p className={styles['footer__info']}>Quem Somos</p>
+                        <p className={styles['footer__info']}>Política de Privacidade</p>
+                        <p className={styles['footer__info']}>Segurança</p>
+                        <a href='/' className={styles['footer__info']}>Seja um Revendedor</a>
+                    </div>
+                    <div className={styles['footer__info-duvidas']}>
+                        <p className={styles['footer__info-title']}>Dúvidas</p>
+                        <p className={styles['footer__info']}>Entrega</p>
+                        <p className={styles['footer__info']}>Pagamento</p>
+                        <p className={styles['footer__info']}>Troca e Devoluções</p>
+                        <a href='/' className={styles['footer__info']}>Dúvidas Frequentes</a>
+                    </div>
+                    <div className={styles['footer__info-fale-conosco']}>
+                        <p className={styles['footer__info-title']}>Fale Conosco</p>
+                        <p className={styles['footer__info']}>Atendimento ao Consumidor</p>
+                        <p className={styles['footer__info']}>(11) 4159 9504</p>
+                        <p className={styles['footer__info']}>Atendimento Online</p>
+                        <a href='/' className={styles['footer__info']}>(11) 99433-8825</a>
+
+                    </div>
+                </div>
+                <div className={styles['footer__redes']}>
+                    <div className={styles['footer__container-rede']}>
+                        <img src={facebook} alt='facebook' />
+                        <img src={instagram} alt='instagram' />
+                        <img src={twitter} alt='twitter' />
+                        <img src={youtube} alt='youtube' />
+                        <img src={linkedin} alt='linkedin' />
+                    </div>
+                    <p>www.loremipsum.com</p>
+                </div>
+            </section>
+            <section className={styles['footer__bottom']}>
+                <p className={styles['footer__text-bottom']}>Lorem ipsum dolor sit amet, consectetur adipiscing
+                    elit, sed do eiusmod tempor
+                </p>
+                <div className={styles['footer__container-bandeiras']}>
+                    <img src={mastercard} alt='bandeira mastercard' />
+                    <img src={visa} alt='bandeira visa' />
+                    <img src={diners} alt='bandeira american express' />
+                    <img src={elo} alt='bandeira elo' />
+                    <img src={hiper} alt='bandeira hipercard' />
+                    <img src={paypal} alt='paypal' />
+                    <img src={boleto} alt='boleto' />
+                    <div className={styles['footer__line']}></div>
+                    <img src={vtexpci} alt='vtex-cerficado' />
+                </div>
+                <div className={styles['footer__certificate']}>
+                    <p className={styles['footer__text-certificate']}>Powered by</p>
+                    <img src={vtex} alt='vtex-logo' />
+                    <p>Developed by</p>
+                    <img src={m3} alt='m3-logo' />
+                </div>
+            </section>
+        </footer>
+    )
+}
+
+export default Footer
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@ -0,0 +1,49 @@
+import React from 'react';
+import styles from '../../styles/Header.module.scss'
+import logo from '../../assets/img/logo.png'
+import search from '../../assets/img/search.png'
+import cart from '../../assets/img/cart.png'
+import menuhamb from '../../assets/img/menu-hamburguer.png'
+
+interface MenuProps {
+    handleOpenModal:() => void;
+}
+
+const Header = ({handleOpenModal} : MenuProps) => {
+    return(
+        <header>
+            <div className={styles['header__top']}>
+                <div  className={styles['header__menu']}>
+                    <button
+                    onClick={handleOpenModal}
+                    >
+                        <img src={menuhamb} alt=''/>
+                    </button>
+                </div>
+                <img className={styles['header__logo']} src={logo} alt=''></img>
+                <div className={styles['header__container-input']}>
+                    <img className={styles['header__search-icon']} src={search} alt=''/>
+                    <input className={styles['header__search']} type="text" placeholder='Buscar... '  />
+                </div>
+                <div className={styles['header__my-account-cart']}>
+                    <p className={styles['header__account']} >Entrar</p>
+                    <img className={styles['header__cart']} src={cart} alt=''></img>
+                </div>
+            </div>
+            <div className={styles['header__line']}></div>
+            <nav className={styles['header__botton']}>
+                <p className={styles['header__botton-nav-text']}>
+                    Cursos
+                </p>
+                <p className={styles['header__botton-nav-text']}>
+                    Saiba Mais
+                </p>
+                <p className={styles['header__botton-nav-text']}>
+                    Institucionais
+                </p>
+            </nav>
+        </header>
+    )
+}
+
+export default Header
--- a/src/components/header/Menu.tsx
+++ b/src/components/header/Menu.tsx
@ -0,0 +1,32 @@
+import React from "react";
+
+import Modal from 'react-modal'
+import styles from '../../styles/Menu.module.scss'
+import Fechar from '../../assets/img/fechar.png'
+
+interface MenuProps {
+    isOpen: boolean;
+    onRequestClose: () => void;
+}
+
+function Menu ({isOpen, onRequestClose}: MenuProps) {
+    return (
+        <Modal
+        isOpen={isOpen}
+        onRequestClose={onRequestClose}
+        overlayClassName={styles['menu-hamb']}
+        className={styles['menu']}
+        >
+            <div className={styles['menu__title']}>
+            <p>Entrar</p>
+            <img src={Fechar} alt="x"/>
+            </div>
+            <p>Cursos</p>
+            <p>Saiba Mais</p>
+            <p>Institucionais</p>
+        </Modal>
+    )
+}
+
+
+export default Menu
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@ -0,0 +1,20 @@
+import React from 'react';
+import Institucional from '../../pages/institucional/Institucional';
+import Home from '../../assets/img/home.png'
+import Arrow from '../../assets/img/arrow-point-to-right.png'
+import styles from '../../styles/Main.module.scss'
+
+const Main = () => {
+    return(
+        <div className={styles['container__main']}>
+            <div className={styles['main__route']}>
+                <img className={styles['main__home']} src={Home} alt='home'></img>
+                <img className={styles['main__arrow']} src={Arrow} alt='arrow'></img>
+                <p className={styles['container__main-title']}>Institucional</p>
+            </div>
+            <Institucional/>
+        </div>
+    )
+}
+
+export default Main
--- a/src/components/whats/Scroll.tsx
+++ b/src/components/whats/Scroll.tsx
@ -0,0 +1,22 @@
+import { useState } from "react"
+import ArrowUp from '../../assets/img/arrow-up.png';
+import styles from '../../styles/Scroll.module.scss'
+
+export default function ScrollPage() {
+
+    const [pageYPosition, setPageYPosition] = useState(0);
+
+    function getPageYAfterScroll() {
+        setPageYPosition(window.scrollY);
+    }
+
+    window.addEventListener('scroll', getPageYAfterScroll);
+
+    return (
+        <div className={styles["arrow__up"]} >
+            <a href="/"><img src={ArrowUp} alt="Abrir" /></a>
+        </div>
+    )
+}
+
+
--- a/src/components/whats/Whats.tsx
+++ b/src/components/whats/Whats.tsx
@ -0,0 +1,21 @@
+import styles from '../../styles/Whats.module.scss'
+import Whatsapp from '../../assets/img/whatsapp.png'
+import ScrollPage from './Scroll'
+
+
+
+
+
+const Whats = () => {
+    return (
+        <div className={styles["container__icon"]}>
+            <div >
+                <a className={styles["icon__whats"]} href="https://wa.me/0000000"><img src={Whatsapp} alt="WhatsApp" /></a>
+            </div>
+                <ScrollPage/>
+        </div>
+    )
+}
+
+export default Whats
+
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import './styles/global.scss';
+
+import Header from './components/header/Header';
+import Footer from './components/footer/Footer';
+import Main from './components/main/Main';
+import Menu from './components/header/Menu';
+import Whats from './components/whats/Whats';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+function App() {
+  const [openModal, setOpenModal] = useState(false)
+  return (
+    <div className="App">
+      <Header handleOpenModal={() => setOpenModal(true)}/>
+      <Menu isOpen={openModal} onRequestClose={() => setOpenModal(false)}/>
+      <Main/>
+      <Whats/>
+      <Footer/>
+    </div>
+  );
+}
+
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/src/pages/contato/Contato.tsx
+++ b/src/pages/contato/Contato.tsx
@ -0,0 +1,155 @@
+import React from "react";
+
+import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
+import MaskedInput from "react-text-mask";
+
+
+import Schema from "../../schema/schema";
+import { numberCpf, numberNascimento, numberPhone } from "../../utils/validates";
+
+import styles from "../../styles/Contato.module.scss";
+
+interface IFormikValues {
+    name: string;
+    email: string;
+    cpf: string;
+    data: string;
+    telefone: string;
+    instagram: string;
+}
+
+
+
+const initialValues = {
+    name: "",
+    email: "",
+    cpf: "",
+    data: "",
+    telefone: "",
+    instagram: "",
+};
+
+const onSubmit = (values: IFormikValues, actions: FormikHelpers<IFormikValues>) => {
+    actions.setSubmitting(true);
+    actions.resetForm()
+
+}
+
+
+
+function Contato() {
+
+    return (
+        <div className={styles["contato__container"]}>
+            <h2 className={styles["contato__title"]}>PREENCHA O FORMULÁRIO </h2>
+
+            <Formik className={styles["form__formik"]} onSubmit={onSubmit} initialValues={initialValues} validationSchema={Schema}>
+                {({ errors, touched, handleChange, handleBlur }) => (
+                    <Form>
+                        <div className={styles["form__container"]}>
+                            <label htmlFor="name">Nome</label>
+                            <Field
+                                name="name"
+                            />
+                            <ErrorMessage component="span"
+                                name="name"
+                                className={styles["form__invalid"]} />
+                        </div>
+                        <div className={styles["form__container"]}>
+                            <label htmlFor="email">E-mail</label>
+                            <Field className={errors.email && touched.email && "invalid"} placeholder="Seu e-mail" id="email" name="email" />
+                            <ErrorMessage component="span"
+                                name="email"
+                                className={styles["form__invalid"]} />
+                        </div>
+                        <div className={styles["form__container"]}>
+                            <label htmlFor="cpf">CPF</label>
+                            <Field
+                                name="cpf"
+                                render={(field: any) => (
+                                    <MaskedInput
+                                        {...field}
+                                        mask={numberCpf}
+                                        id="cpf"
+                                        placeholder="000.000.000-00"
+                                        type="text"
+                                        onChange={handleChange}
+                                        onBlur={handleBlur}
+                                    />
+                                )}
+                            />
+                            <ErrorMessage component="span"
+                                name="cpf"
+                                className={styles["form__invalid"]} />
+                        </div>
+
+                        <div className={styles["form__container"]}>
+                            <label htmlFor="data">Data de Nascimento:</label>
+                            <Field
+                                name="data"
+                                render={(field: any) => (
+                                    <MaskedInput
+                                        {...field}
+                                        mask={numberNascimento}
+                                        id="data"
+                                        placeholder="00/00/0000"
+                                        type="text"
+                                        className={errors.data && touched.data && "invalid"}
+                                        onChange={handleChange}
+                                        onBlur={handleBlur}
+                                    />
+                                )}
+                            />
+                            <ErrorMessage component="span"
+                                name="data"
+                                className={styles["form__invalid"]} />
+                        </div>
+                        <div className={styles["form__container"]}>
+                            <label htmlFor="tel">Telefone:</label>
+
+                            <Field
+                                name="tel"
+                                render={(field: any) => (
+                                    <MaskedInput
+                                        {...field}
+                                        mask={numberPhone}
+                                        id="tel"
+                                        placeholder="(00)00000-0000"
+                                        type="text"
+                                        className={errors.telefone && touched.telefone && "invalid"}
+                                        onChange={handleChange}
+                                        onBlur={handleBlur}
+                                    />
+                                )}
+                            />
+                            <ErrorMessage component="span"
+                                name="tel"
+                                className={styles["form__invalid"]} />
+                        </div>
+                        <div className={styles["form__container"]}>
+                            <label htmlFor="insta">Instagram</label>
+                            <Field className={errors.instagram && touched.instagram && "invalid"} placeholder="@seuuser" id="insta" name="insta" />
+                            <ErrorMessage component="span"
+                                name="insta"
+                                className={styles["form__invalid"]} />
+                        </div>
+
+                        <div className={styles["form__check"]}>
+                            <label htmlFor="checkbox">*Declaro que li e aceito</label>
+                            <input type="checkbox" id="checkbox" name="checkbox"></input>
+                        </div>
+
+                        <button className={styles["form__button"]} type="submit">CADASTRE-SE</button>
+
+                    </Form>
+
+                )}
+            </Formik>
+
+        </div>
+
+    )
+}
+
+
+export default Contato;
--- a/src/pages/devolução/Devolucao.tsx
+++ b/src/pages/devolução/Devolucao.tsx
@ -0,0 +1,15 @@
+import React from 'react';
+import styles from '../../styles/Devolucao.module.scss'
+
+const Devolucao = () => {
+    return(
+        <div className={styles["devolucao__container"]}>
+            <h2 className= {styles["devolucao__title"]}>Troca e Devolução</h2>
+                        <p className= {styles["devolucao__description"]}>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. <br /><br />
+                        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. <br /><br />
+                        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 default Devolucao
--- a/src/pages/entrega/Entrega.tsx
+++ b/src/pages/entrega/Entrega.tsx
@ -0,0 +1,17 @@
+import React from 'react';
+import styles from '../../styles/Entrega.module.scss'
+
+const Entrega = () => {
+    return(
+        <div className={styles["entrega__container"]}>
+             <h2 className= {styles["entrega__title"]}>Entrega</h2>
+                        <p className= {styles["entrega__description"]}>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. <br /><br />
+                        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. <br /><br />
+                        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 default Entrega
--- a/src/pages/institucional/Institucional.tsx
+++ b/src/pages/institucional/Institucional.tsx
@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+import styles from "../../styles/Institucional.module.scss";
+
+import Sobre from "../sobre/Sobre";
+import Pagamento from "../pagamento/Pagamento";
+import Entrega from "../entrega/Entrega";
+import Devolucao from "../devolução/Devolucao";
+import Seguranca from "../segurança/Seguranca";
+import Contato from "../contato/Contato";
+
+
+function Institucional() {
+  const [step, setStep] = useState("");
+
+  function render() {
+    switch (step) {
+      case "sobre":
+        return <Sobre />;
+      case "pagamento":
+        return <Pagamento />;
+      case "entrega":
+        return <Entrega />;
+      case "devolucao":
+        return <Devolucao />;
+      case "seguranca":
+        return <Seguranca />;
+      case "contato":
+        return <Contato />;
+      default:
+        return <Sobre />;
+    }
+  }
+
+  return (
+    <div>
+        <h1 className={styles["title"]}>institucional</h1>
+      <div className={styles["inst__container"]}>
+        <ul>
+          <li onClick={() => setStep("sobre")}>Sobre</li>
+          <li onClick={() => setStep("pagamento")}>Forma de Pagamento</li>
+          <li onClick={() => setStep("entrega")}>Entrega</li>
+          <li onClick={() => setStep("devolucao")}>Troca e Devolução</li>
+          <li onClick={() => setStep("seguranca")}>Segurança e Privacidade</li>
+          <li onClick={() => setStep("contato")}>Contato</li>
+        </ul>
+        <div className={styles["rend__container"]}>
+          {render()}
+        </div>
+
+
+      </div>
+    </div>
+  );
+}
+
+export default Institucional;
--- a/src/pages/pagamento/Pagamento.tsx
+++ b/src/pages/pagamento/Pagamento.tsx
@ -0,0 +1,17 @@
+import React from 'react';
+import styles from '../../styles/Pagamento.module.scss'
+
+const Pagamento = () => {
+    return(
+        <div className= {styles["pagamento__container"]}>
+            <h2 className= {styles["pagamento__title"]}> Forma de Pagamento</h2>
+                        <p className= {styles["pagamento__description"]}>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. <br /><br />
+                        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. <br /><br />
+                        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 default Pagamento
--- a/src/pages/segurança/Seguranca.tsx
+++ b/src/pages/segurança/Seguranca.tsx
@ -0,0 +1,16 @@
+import React from 'react';
+import styles from '../../styles/Seguranca.module.scss'
+
+const Seguranca = () => {
+    return(
+        <div className= {styles["seguranca__container"]}>
+             <h2 className= {styles["seguranca__title"]}> Segurança e Privacidade</h2>
+                        <p className= {styles["seguranca__description"]}>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. <br /><br />
+                        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. <br /><br />
+                        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 default Seguranca
--- a/src/pages/sobre/Sobre.tsx
+++ b/src/pages/sobre/Sobre.tsx
@ -0,0 +1,16 @@
+import React from 'react';
+import styles from '../../styles/Sobre.module.scss'
+
+const Sobre = () => {
+    return(
+        <div className={styles["sobre__container"]} >
+            <h2 className={styles["sobre__title"]}>Sobre</h2>
+            <p className={styles["sobre__description"]}>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. <br /><br />
+                        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. <br /><br />
+                        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 default Sobre
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/src/schema/schema.tsx
+++ b/src/schema/schema.tsx
@ -0,0 +1,17 @@
+import * as Yup from "yup";
+
+
+export default Yup.object().shape({
+  name: Yup.string().min(3).required("Campo obrigatório"),
+
+  email: Yup.string().required("Campo obrigatório").email("Email inválido"),
+
+  cpf: Yup.string().matches(/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/, "CPF inválido").required("Campo obrigatório"),
+
+  data: Yup.string().matches(/\d{2,}\/\d{2,}\/\d{4,}/, "Data de nascimento inválida").required("Campo obrigatório"),
+
+  tel: Yup.string().matches(/\(\d{2}\)\d{5}\-\d{4}/, "Número de telefone inválido").required("Campo obrigatório"),
+
+  insta: Yup.string(),
+
+});
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@ -0,0 +1,35 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/styles/Contato.module.scss
+++ b/src/styles/Contato.module.scss
@ -0,0 +1,124 @@
+.contato__container {
+	padding: 0px 30px;
+}
+
+.contato__container form {
+	width: 100%;
+}
+
+.contato__title {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 23px;
+    color: #110D0F;
+    margin-bottom: 12px;
+}
+
+
+.form__formik {
+	display: flex;
+	flex-direction: column;
+	width: 58.44%;
+    margin-top: 33px;
+}
+
+input::placeholder {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 23px;
+    color: #B9B7B7;
+}
+
+.form__container {
+	width: 100%;
+
+}
+
+.form__container label {
+    display: flex;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 23px;
+    color: #100D0E;
+    padding-bottom: 4px;
+    padding-top: 12px;
+
+}
+
+.form__container input {
+	width: 96%;
+    font-family: 'Roboto', sans-serif;
+    color: #B9B7B7;
+    background: #FFFFFF;
+    border: 1px solid #100D0E;
+    border-radius: 25px;
+    padding: 15px 2px 15px 20px;
+}
+
+.form__check {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    padding: 21px 0 21px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 23px;
+    text-decoration-line: underline;
+    color: #100D0E;
+
+}
+
+.form__button {
+	width: 100%;
+    height: 52.44px;
+    left: 500px;
+    top: 979px;
+    background: #000000;
+    border-radius: 25px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 34px;
+    letter-spacing: 0.05em;
+    color: #FFFFFF;
+    border: #000000;
+    margin-bottom: 117px;
+}
+
+button:hover {
+    background-color: #000000;
+}
+
+button:active {
+    background-color: #000000;
+}
+
+.form__invalid {
+    display: flex;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 12px;
+    color: red;
+    position: absolute;
+}
+
+.form__container input.invalid {
+    border: 1px solid red;
+}
+
+
+@media (max-width: 1024px) {
+    .contato__title {
+		text-align: center;
+    }
+
+	.contato__container{
+		padding: 0;
+	}
+}
+
--- a/src/styles/Devolucao.module.scss
+++ b/src/styles/Devolucao.module.scss
@ -0,0 +1,51 @@
+.devolucao__container {
+	padding: 0px 30px;
+}
+
+.devolucao__title {
+	font-family: 'Roboto', sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	font-size: 24px;
+	line-height: 28px;
+	color: #292929;
+	text-align: left;
+	padding-bottom: 12px;
+}
+.devolucao__description {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    color: #7D7D7D;
+    text-align: left;
+    padding-bottom: 171px;
+}
+
+@media (max-width: 1024px) {
+    .devolucao__title {
+		text-align: center;
+    }
+
+	.devolucao__container{
+		padding: 0;
+	}
+
+	.devolucao__description{
+		padding-bottom: 81px;
+		text-align: justify
+	}
+}
+
+@media (min-width: 2500px) {
+	.devolucao__title{
+		font-size: 48px;
+		line-height: 56px;
+	}
+
+	.devolucao__description{
+		font-size: 26px;
+		line-height: 30px
+	}
+}
--- a/src/styles/Entrega.module.scss
+++ b/src/styles/Entrega.module.scss
@ -0,0 +1,51 @@
+.entrega__container {
+	padding: 0px 30px;
+}
+
+.entrega__title {
+	font-family: 'Roboto', sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	font-size: 24px;
+	line-height: 28px;
+	color: #292929;
+	text-align: left;
+	padding-bottom: 12px;
+}
+.entrega__description {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    color: #7D7D7D;
+    text-align: left;
+    padding-bottom: 171px;
+}
+
+@media (max-width: 1024px) {
+    .entrega__title {
+		text-align: center;
+    }
+
+	.entrega__container{
+		padding: 0;
+	}
+
+	.entrega__description{
+		padding-bottom: 81px;
+		text-align: justify
+	}
+}
+
+@media (min-width: 2500px) {
+	.entrega__title{
+		font-size: 48px;
+		line-height: 56px;
+	}
+
+	.entrega__description{
+		font-size: 26px;
+		line-height: 30px
+	}
+}
--- a/src/styles/Footer.module.scss
+++ b/src/styles/Footer.module.scss
@ -0,0 +1,261 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
+@import 'variables.scss';
+
+footer {
+	width: 100%;
+	position: relative;
+
+	.footer__newsletter{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-width: 1px 0px;
+		border-style: solid;
+		border-color: $black;
+
+		.footer__newsletter-form{
+			display: flex;
+			flex-direction: column;
+			width: 37.03%;
+			padding: 16px 0px;
+
+
+
+			label{
+				font-family: 'Roboto', sans-serif;
+				font-size: 18px;
+				text-transform: uppercase;
+				line-height: 21px;
+				letter-spacing: 0.05em;
+				font-variant: small-caps;
+				color: #303030;
+			}
+
+			.footer__newsletter-input{
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+
+
+				input{
+					width: 71.73%;
+					background: #FFFFFF;
+					border: 1px solid #E5E5E5;
+					border-radius: 4px;
+					padding: 13px 16px;
+				}
+
+				button{
+					color: #FFFFFF;
+					font-family: 'Roboto', sans-serif;
+					font-style: normal;
+					font-weight: 700;
+					font-size: 12px;
+					line-height: 14px;
+					text-align: center;
+					letter-spacing: 0.05em;
+
+					background: #000000;
+					box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+					border-radius: 4px;
+					padding: 14px 20px;
+				}
+			}
+
+
+
+		}
+	}
+
+	.footer__top{
+		display: flex;
+		justify-content: space-between;
+		padding: 50px 100px;
+
+		.footer__infos{
+			display: flex;
+			justify-content: space-between;
+			width: 55.23%;
+
+			.footer__info-title{
+				text-align: start;
+				margin-top: 0px;
+			}
+
+		}
+
+		.footer__info {
+			color: $black;
+		}
+
+		.footer__redes{
+			width: 16.80%;
+			.footer__container-rede{
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+				img {
+					width: 16.28%;
+				}
+
+				p {
+					font-family: 'Roboto', sans-serif;
+					font-style: normal;
+					font-weight: 400;
+					font-size: 14px;
+					line-height: 16px;
+				}
+			}
+		}
+	}
+
+	.footer__bottom{
+		display: flex;
+		align-items: center;
+		background-color: $black;
+		color: $white;
+		font-family: 'Roboto', sans-serif;
+		font-style: normal;
+		font-size: 20px;
+		line-height: 23px;
+		justify-content: space-between;
+		padding: 0px 100px;
+
+		.footer__text-bottom{
+			width: 20%;
+			font-style: normal;
+			font-size: 10px;
+			line-height: 12px;
+			text-transform: capitalize;
+		}
+
+		.footer__container-bandeiras{
+			display: flex;
+			padding: 15px 0px;
+			width: 40%;
+			justify-content: space-between;
+
+			.footer__line{
+				border-left: 1px solid $white;
+			}
+
+			img {
+				width: 10.12%;
+			}
+		}
+
+		.footer__certificate{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 17.70%;
+			p {
+				font-weight: 400;
+				font-size: 10px;
+				line-height: 12px;
+				text-transform: capitalize;
+			}
+
+			img {
+				width: 15%;
+			}
+		}
+
+	}
+
+}
+
+
+@media (max-width: 1024px) {
+	footer {
+		.footer__newsletter{
+			.footer__newsletter-form{
+				width: 100%;
+				padding: 16px 16px;
+
+				.footer__newsletter-input{
+					flex-direction: column;
+					input{
+						width: 96.5%;
+					}
+				}
+			}
+		}
+
+		.footer__top{
+			flex-direction: column;
+			padding: 24px 16px;
+			.footer__infos{
+				flex-direction: column;
+			}
+
+			.footer__info{
+				display: none;
+			}
+		}
+
+		.footer__bottom{
+			padding: 0px 16px;
+			align-items: flex-start;
+			flex-direction: column;
+
+			.footer__text-bottom{
+				width: 30%;
+			}
+
+			.footer__certificate {
+				width: 30%;
+			}
+		}
+	}
+}
+
+@media (min-width: 2500px) {
+	footer {
+		.footer__newsletter{
+			.footer__newsletter-form{
+				label {
+					font-size: 36px;
+					line-height: 42px;
+
+				}
+				.footer__newsletter-input{
+					button{
+						font-size: 24px;
+						line-height: 28px;
+					}
+
+				}
+			}
+		}
+
+		.footer__top {
+			.footer__infos{
+				.footer__info-title{
+					font-size: 28px;
+					line-height: 33px;
+				}
+				.footer__info{
+					font-size: 24px;
+					line-height: 28px;
+				}
+			}
+			.footer__redes p{
+				font-size: 28px;
+				line-height: 33px;
+			}
+		}
+
+		.footer__bottom {
+			.footer__text-bottom {
+				font-size: 20px;
+				line-height: 23px;
+			}
+			.footer__certificate p{
+				font-size: 20px;
+				line-height: 23px;
+			}
+		}
+
+	}
+}
--- a/src/styles/Header.module.scss
+++ b/src/styles/Header.module.scss
@ -0,0 +1,145 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
+@import 'variables.scss';
+
+header {
+	width: 100%;
+	color: $white;
+	padding: 0;
+	background-color: $black;
+
+	.header__menu{
+		display: none;
+	}
+
+	.header__top{
+		padding: 25.07px 100px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.header__logo{
+			width: 10.63%;
+		}
+
+		.header__container-input{
+			display: flex;
+			align-items: center;
+			justify-content: end;
+			position: relative;
+			width: 20.63%;
+
+
+			.header__search{
+				display: flex;
+				width: 100%;
+				border: 2px solid #F2F2F2;
+				border-radius: 5px;
+				height: 32px;
+				padding-left: 16px;
+			}
+			.header__search-icon{
+
+				position: absolute;
+				color: #303030;
+				margin-right: 7px;
+			}
+		}
+
+		.header__my-account-cart{
+			display: flex;
+
+			justify-content: space-between;
+			align-items: center;
+
+			.header__account {
+				font-style: normal;
+				font-size: 14px;
+				line-height: 16px;
+				text-transform: uppercase;
+				font-family: 'Roboto', sans-serif;
+			}
+
+
+		}
+	}
+
+	.header__line{
+		border-bottom: 1px solid $white;
+	}
+
+	.header__botton{
+		display: flex;
+		width: 27.58%;
+		justify-content: space-between;
+		margin: 0px 100px;
+
+		.header__botton-nav-text {
+			font-family: 'Roboto', sans-serif;
+			font-style: normal;
+			font-size: 14px;
+			line-height: 16px;
+			text-transform: uppercase;
+		}
+	}
+
+}
+
+@media (max-width: 1024px) {
+	header{
+		.header__top{
+			padding: 25.07px 16px;
+		}
+
+
+
+		.header__menu{
+			display: block;
+
+		}
+
+		.header__menu button {
+			background-color: #000000;
+			border: #000000;
+		}
+
+		.header__account{
+			display: none;
+		}
+		.header__botton{
+			display: none;
+		}
+	}
+
+}
+
+@media (max-width: 375px) {
+	header{
+		.header__top{
+			.header__container-input{
+
+				display: none;
+			}
+		}
+
+	}
+}
+
+@media (min-width: 2500px) {
+	header {
+		.header__top{
+			.header__my-account-cart{
+				.header__account{
+					font-size: 28px;
+					line-height: 33px;
+				}
+			}
+		}
+.header__botton {
+	.header__botton-nav-text{
+		font-size: 28px;
+		line-height: 33px;
+	}
+}
+
+	}
+}
--- a/src/styles/Institucional.module.scss
+++ b/src/styles/Institucional.module.scss
@ -0,0 +1,91 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
+
+.inst__container {
+    display: flex;
+	padding-left: 100px;
+}
+
+.inst__container ul {
+	padding: 0;
+    border-right: 1px solid #000000;
+	width: 23.59%;
+	height: 285px;
+    list-style: none;
+}
+
+.inst__container li {
+	padding: 10px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: #7D7D7D;
+    text-align: left;
+
+}
+
+.inst__container li:hover {
+    background-color: #000000;
+    cursor: pointer;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    color: #FFFFFF;
+    padding: 10px 16px;
+}
+
+.title {
+	display: flex;
+    font-weight: 300;
+    font-size: 24px;
+    line-height: 29px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #292929;
+    margin-bottom: 51px;
+	justify-content: center;
+}
+
+.rend__container {
+	width: 55.44%;
+}
+
+@media (max-width: 1024px) {
+    .inst__container {
+		align-items: center;
+		padding: 16px;
+		flex-direction: column;
+    }
+
+	.rend__container {
+		width: 100%;
+	}
+	.inst__container ul {
+		width: 100%;
+		margin: 33px 25px 22px 7px;
+		display: flex;
+		flex-direction: column;
+		border-right: none;
+	}
+
+	.inst__contato-subtitle {
+		margin-top: 22px;
+	}
+}
+
+@media (min-width: 2500px) {
+	.inst__container li {
+		font-size: 32px;
+		line-height: 38px;
+
+	}
+
+	.title {
+		font-size: 48px;
+		line-height: 56px;
+		letter-spacing: 0.1em;
+	}
+}
--- a/src/styles/Main.module.scss
+++ b/src/styles/Main.module.scss
@ -0,0 +1,43 @@
+.main__route {
+	display: flex;
+	padding: 29px 100px;
+	width: 10%;
+	justify-content: space-around;
+	align-items: center;
+
+	.main__home {
+		width: 15.69%;
+
+	}
+
+	.main__arrow{
+		width: 7%;
+	}
+
+
+	p {
+		font-family: 'Roboto', sans-serif;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 14px;
+		color: #C4C4C4;
+	}
+}
+
+@media (max-width: 1024px) {
+
+	.main__route{
+		padding: 29px 16px;
+	}
+}
+
+@media (min-width: 2500px) {
+	.main__route{
+		.container__main-title {
+			font-size: 24px;
+			line-height: 28px;
+		}
+
+	}
+}
--- a/src/styles/Menu.module.scss
+++ b/src/styles/Menu.module.scss
@ -0,0 +1,36 @@
+.menu{
+	background: white;
+ 	width: 100%;
+ 	height: 585px;
+
+	p {
+		color: #C4C4C4;
+		font-family: 'Roboto', sans-serif;
+		font-size: 14px;
+		line-height: 16px;
+		text-transform: uppercase;
+	}
+
+	.menu__title{
+		padding: 0px 16px;
+		color: #FFFFFF;
+		display: flex;
+		background: #000000;
+		justify-content: space-between;
+		align-items: center;
+		img {
+			height: 15px;
+		}
+	}
+}
+
+
+.menu-hamb {
+	background: rgba(69, 69, 69, 0.7);
+   position: fixed;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   left: 0;
+   padding-right: 36px;
+}
--- a/src/styles/Pagamento.module.scss
+++ b/src/styles/Pagamento.module.scss
@ -0,0 +1,51 @@
+.pagamento__container {
+
+	padding: 0px 30px;
+}
+
+.pagamento__title {
+	font-family: 'Roboto', sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	font-size: 24px;
+	line-height: 28px;
+	color: #292929;
+	text-align: left;
+	padding-bottom: 12px;
+}
+.pagamento__description {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    color: #7D7D7D;
+    text-align: left;
+    padding-bottom: 171px;
+}
+
+@media (max-width: 1024px) {
+    .pagamento__title {
+		text-align: center;
+    }
+	.pagamento__container{
+		padding: 0;
+	}
+
+	.pagamento__description{
+		padding-bottom: 81px;
+		text-align: justify
+	}
+}
+
+@media (min-width: 2500px) {
+	.pagamento__title{
+		font-size: 48px;
+		line-height: 56px;
+	}
+
+	.pagamento__description{
+		font-size: 26px;
+		line-height: 30px
+	}
+}
--- a/src/styles/Scroll.module.scss
+++ b/src/styles/Scroll.module.scss
@ -0,0 +1,16 @@
+
+.arrow__up{
+	background-color: #C4C4C4;
+	border-radius: 100%;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.arrow__up img{
+	width: 7px;
+	display: flex;
+}
+
--- a/src/styles/Seguranca.module.scss
+++ b/src/styles/Seguranca.module.scss
@ -0,0 +1,53 @@
+.seguranca__container {
+
+	padding: 0px 30px;
+}
+
+.seguranca__title {
+	font-family: 'Roboto', sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	font-size: 24px;
+	line-height: 28px;
+	color: #292929;
+	text-align: left;
+	padding-bottom: 12px;
+}
+.seguranca__description {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    color: #7D7D7D;
+    text-align: left;
+    padding-bottom: 171px;
+}
+
+@media (max-width: 1024px) {
+    .seguranca__title {
+		text-align: center;
+    }
+
+	.seguranca__container{
+		padding: 0;
+	}
+
+	.seguranca__description{
+		padding-bottom: 81px;
+		text-align: justify
+	}
+}
+
+@media (min-width: 2500px) {
+	.seguranca__title{
+		font-size: 48px;
+		line-height: 56px;
+	}
+
+	.seguranca__description{
+		font-size: 26px;
+		line-height: 30px
+	}
+}
+
--- a/src/styles/Sobre.module.scss
+++ b/src/styles/Sobre.module.scss
@ -0,0 +1,53 @@
+.sobre__container {
+
+	padding: 0px 30px;
+}
+
+.sobre__title {
+	font-family: 'Roboto', sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	font-size: 24px;
+	line-height: 28px;
+	color: #292929;
+	text-align: left;
+	padding-bottom: 12px;
+}
+.sobre__description {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    color: #7D7D7D;
+    text-align: left;
+    padding-bottom: 94px;
+}
+
+@media (max-width: 1024px) {
+    .sobre__title {
+		text-align: center;
+    }
+
+	.sobre__container{
+		padding: 0;
+	}
+
+	.sobre__description{
+		padding-bottom: 81px;
+		text-align: justify
+	}
+}
+
+@media (min-width: 2500px) {
+	.sobre__title{
+		font-size: 48px;
+		line-height: 56px;
+	}
+
+	.sobre__description{
+		font-size: 26px;
+		line-height: 30px
+	}
+}
+
--- a/src/styles/Whats.module.scss
+++ b/src/styles/Whats.module.scss
@ -0,0 +1,17 @@
+.container__icon {
+	display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+	right: 0;
+	bottom:0;
+	padding: 16px;
+	z-index: 1;
+}
+
+
+
+.icon__whats img {
+    width: 34px;
+}
+
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@ -0,0 +1,4 @@
+
+$white: #fff;
+
+$black: #000
--- a/src/utils/validates.tsx
+++ b/src/utils/validates.tsx
@ -0,0 +1,46 @@
+export const numberPhone = [
+    "(",
+    /\d/,
+    /\d/,
+    ")",
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    "-",
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/
+  ];
+
+export const numberCpf = [
+    /\d/,
+    /\d/,
+    /\d/,
+    ".",
+    /\d/,
+    /\d/,
+    /\d/,
+    ".",
+    /\d/,
+    /\d/,
+    /\d/,
+    "-",
+    /\d/,
+    /\d/,
+  ];
+
+export const numberNascimento = [
+    /\d/,
+    /\d/,
+    "/",
+    /\d/,
+    /\d/,
+    "/",
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/
+  ];
--- a/tsconfig.json
+++ b/tsconfig.json
@ -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"
+  ]
+}