Merge pull request 'development' (#1) from development into main

Reviewed-on: #1
2023-01-20 23:04:59 +00:00 · 2023-01-20 23:04:59 +00:00 · 8aec587716
commit 8aec587716
parent 0c351a3524 6437c156ff
70 changed files with 28777 additions and 0 deletions
--- a/Vitor-Soares-main/.gitignore
+++ b/Vitor-Soares-main/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/Vitor-Soares-main/package-lock.json
+++ b/Vitor-Soares-main/package-lock.json
--- a/Vitor-Soares-main/package.json
+++ b/Vitor-Soares-main/package.json
@ -0,0 +1,53 @@
+{
+  "name": "teste-2",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0",
+    "brazilian-values": "^0.12.0",
+    "formik": "^2.2.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.2",
+    "react-svg": "^15.1.21",
+    "sass": "^1.57.1",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9"
+  },
+  "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"
+    ]
+  }
+}
--- a/Vitor-Soares-main/public/favicon.ico
+++ b/Vitor-Soares-main/public/favicon.ico
--- a/Vitor-Soares-main/public/index.html
+++ b/Vitor-Soares-main/public/index.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <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>Desafio React-Typescript</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
+    rel="stylesheet"
+  />
+
+  </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/Vitor-Soares-main/src/App.tsx
+++ b/Vitor-Soares-main/src/App.tsx
@ -0,0 +1,33 @@
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+  RouterProvider,
+} from "react-router-dom";
+import { Template } from "./components/Template";
+import { Institucional } from "./routes/Institucional/Institucional";
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <>
+      <Route path="/" element={<Template />}>
+        <Route path="institucional" element={<Institucional />} />
+        <Route
+          index
+          element={<main className="main" style={{ height: "100vh" }}></main>}
+        />
+        <Route
+          index
+          path="*"
+          element={<main className="main" style={{ height: "100vh" }}></main>}
+        />
+      </Route>
+    </>
+  )
+);
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;
--- a/Vitor-Soares-main/src/assets/react.svg
+++ b/Vitor-Soares-main/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/Vitor-Soares-main/src/components/Footer/index.tsx
+++ b/Vitor-Soares-main/src/components/Footer/index.tsx
@ -0,0 +1,13 @@
+import { FooterBottom } from "../FooterBottom";
+import { FooterTop } from "../FooterTop";
+import { NewsLetter } from "../NewsLetter";
+
+export function Footer() {
+  return (
+    <footer>
+      <NewsLetter />
+      <FooterTop />
+      <FooterBottom />
+    </footer>
+  );
+}
--- a/Vitor-Soares-main/src/components/FooterBottom/index.scss
+++ b/Vitor-Soares-main/src/components/FooterBottom/index.scss
@ -0,0 +1,109 @@
+@import "../../styles/index.scss";
+.footer-bottom {
+  @include large-font-1;
+  background: $panel-bg-1;
+  display: flex;
+  align-items: center;
+  color: white;
+  justify-content: space-between;
+
+  .border {
+    height: 24px;
+    width: 1px;
+    background: $text-cl-5;
+  }
+
+  > p {
+    width: 467px;
+  }
+
+  .extra {
+    &,
+    > * {
+      display: flex;
+      gap: 13px;
+      align-items: center;
+    }
+
+    img {
+      height: 33px;
+    }
+  }
+
+  text-transform: capitalize;
+
+  padding: 24px $large-padding-inline;
+
+  ul {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .payment-methods {
+    align-items: center;
+  }
+
+  @media screen {
+    @media (max-width: 2499px) {
+      @include big-font-1;
+      > p {
+        width: 234px !important;
+      }
+
+      .payment-methods {
+        img {
+          height: 20px;
+        }
+
+        li:last-child {
+          height: 34px;
+          img {
+            height: 100%;
+          }
+        }
+      }
+
+      .extra img {
+        height: 16px;
+        gap: 13px;
+      }
+    }
+    @media (max-width: 1024px) {
+      @include big-font-1;
+      display: grid;
+      padding: 22px $big-padding-inline;
+      gap: 15px;
+      > p {
+        width: 234px !important;
+      }
+
+      .payment-methods {
+        order: -1;
+      }
+    }
+    @media (max-width: 375px) {
+      justify-content: unset;
+      align-items: unset;
+      .payment-methods {
+        width: 100%;
+
+        ul {
+          width: 100%;
+          justify-content: space-between;
+          gap: 0;
+        }
+        .border {
+          height: 20px;
+        }
+        img {
+          height: 17px;
+        }
+
+        li:last-child {
+          height: 28px;
+        }
+      }
+    }
+  }
+}
--- a/Vitor-Soares-main/src/components/FooterBottom/index.tsx
+++ b/Vitor-Soares-main/src/components/FooterBottom/index.tsx
@ -0,0 +1,71 @@
+import React from "react";
+
+import boleto from "../icons/Boleto.svg";
+import diners from "../icons/Diners.svg";
+import elo from "../icons/Elo.svg";
+import hiper from "../icons/Hiper.svg";
+import m3 from "../icons/m3.svg";
+import masterCard from "../icons/Master.svg";
+import payPal from "../icons/Paypal.svg";
+import visa from "../icons/Visa.svg";
+import vtexPci from "../icons/vtex-pci-200.svg";
+import vtex from "../icons/Vtex.svg";
+import "./index.scss";
+
+export function FooterBottom() {
+  return (
+    <div className="footer-bottom">
+      <p aria-label="Razão Social">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor
+      </p>
+      <div className="payment-methods">
+        <ul>
+          <li>
+            <img src={masterCard} alt="Mastercard icon" />
+          </li>
+          <li>
+            <img src={visa} alt="Visa icon" />
+          </li>
+          <li>
+            <img src={diners} alt="Diners icon" />
+          </li>
+          <li>
+            <img src={elo} alt="Elo icon" />
+          </li>
+          <li>
+            <img src={hiper} alt="Hiper icon" />
+          </li>
+          <li>
+            <img src={payPal} alt="Paypal icon" />
+          </li>
+          <li>
+            <img src={boleto} alt="Boleto icon" />
+          </li>
+          <li className="border"></li>
+          <li>
+            <img src={vtexPci} alt="VTex pci icon" />
+          </li>
+        </ul>
+      </div>
+      <div className="extra">
+        <div className="powered-by">
+          <p>Powered By</p>
+          <ul>
+            <li>
+              <img src={m3} alt="m3 icon" />
+            </li>
+          </ul>
+        </div>
+        <div className="developed-by">
+          <p>Developed By</p>
+          <ul>
+            <li>
+              <img src={vtex} alt="vtex icon" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/Vitor-Soares-main/src/components/FooterTop/index.scss
+++ b/Vitor-Soares-main/src/components/FooterTop/index.scss
@ -0,0 +1,143 @@
+@import "../../styles/index.scss";
+
+.footer-top {
+  display: flex;
+  justify-content: space-between;
+  font-size: 32px;
+
+  .mb-mt {
+    margin-block: 12px;
+  }
+
+  .container {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    max-width: 2500px;
+  }
+
+  ul {
+    list-style-type: none;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  h2,
+  h3 {
+    font-weight: 500;
+  }
+
+  h2,
+  p {
+    @include large-font-4;
+  }
+
+  h3 {
+    text-transform: capitalize;
+  }
+
+  h2 {
+    text-transform: uppercase;
+  }
+
+  color: $text-cl-4;
+  .footer-item {
+    @include large-font-2;
+    text-transform: capitalize;
+
+    header {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+
+    ul {
+      display: grid;
+      gap: 12px;
+    }
+  }
+
+  p {
+    margin-top: 12px;
+    text-transform: lowercase;
+  }
+
+  .media-links {
+    .social-icons {
+      display: flex;
+      gap: 10px;
+
+      .icon {
+        > div {
+          @include center;
+          height: max-content;
+        }
+      }
+    }
+  }
+
+  .plus-icon {
+    @include hide;
+    @include center;
+    height: max-content;
+  }
+
+  padding: 50px $large-padding-inline;
+  @media screen {
+    @media (max-width: 2499px) {
+      .container {
+        max-width: 707px;
+      }
+      h2,
+      p {
+        @include big-font-4;
+      }
+
+      li,
+      h3 {
+        @include big-font-2;
+      }
+
+      .icon-box,
+      .icon {
+        width: 35px;
+        height: 35px;
+        aspect-ratio: 1;
+      }
+    }
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      padding: 24px $big-padding-inline;
+
+      h2 {
+        text-transform: capitalize;
+      }
+
+      .plus-icon {
+        @include visible;
+      }
+
+      .container {
+        max-width: 100%;
+        flex-direction: column;
+
+        .footer-item.open {
+          .content {
+            padding-inline: 8px;
+            margin-bottom: 12px;
+          }
+        }
+
+        .footer-item:not(.open) {
+          .content {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
--- a/Vitor-Soares-main/src/components/FooterTop/index.tsx
+++ b/Vitor-Soares-main/src/components/FooterTop/index.tsx
@ -0,0 +1,191 @@
+import { Children, ReactElement, ReactNode, useState } from "react";
+import { Link } from "react-router-dom";
+import facebookIcon from "../icons/Facebook.svg";
+import instagramIcon from "../icons/Instagram.svg";
+import linkedinIcon from "../icons/Linkedin.svg";
+import plus from "../icons/Plus.svg";
+import twitterIcon from "../icons/Twitter.svg";
+import youtubeIcon from "../icons/Youtube.svg";
+import "./index.scss";
+
+function FooterItem({
+  title,
+  children,
+}: {
+  title: string;
+  children?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  function toggleOpen() {
+    setOpen(!open);
+  }
+
+  return (
+    <div className={`footer-item ${open ? "open" : ""}`}>
+      <header>
+        <h2>{title}</h2>
+        <button className="plus-icon" onClick={toggleOpen}>
+          <img src={plus} alt="Open icon" />
+        </button>
+      </header>
+      {children}
+    </div>
+  );
+}
+
+export function FooterTop() {
+  return (
+    <div className="footer-top">
+      <div className="container">
+        <FooterItem title={"Institucional"}>
+          <ul className="content">
+            <li>
+              <Link to="#">Quem somos</Link>
+            </li>
+            <li>
+              <Link to="#">Política de privacidade</Link>
+            </li>
+            <li>
+              <Link to="#">Segurança</Link>
+            </li>
+            <li>
+              <Link to="#">Seja um revendedor</Link>
+            </li>
+          </ul>
+        </FooterItem>
+        <FooterItem title={"Dúvidas"}>
+          <ul className="content">
+            <li>
+              <Link to="#">Entrega</Link>
+            </li>
+            <li>
+              <Link to="#">Pagamento</Link>
+            </li>
+            <li>
+              <Link to="#">Trocas e devoluções</Link>
+            </li>
+            <li>
+              <Link to="#">Dúvidas Frequentes</Link>
+            </li>
+          </ul>
+        </FooterItem>
+        <FooterItem title={"Fale conosco"}>
+          <div className="content">
+            <h3>Atendimento Ao Consumidor</h3>
+            <ul className="mb-mt">
+              <li>
+                <a href="tel:1141599504" aria-label="Telefone">
+                  (11) 4159 9504
+                </a>
+              </li>
+            </ul>
+
+            <h3>Atendimento Online</h3>
+            <ul className="mb-mt">
+              <li>
+                <a href="tel:11994338825" aria-label="Telefone">
+                  (11) 99433-8825
+                </a>
+              </li>
+            </ul>
+          </div>
+        </FooterItem>
+      </div>
+      <div className="media-links">
+        <ul className="social-icons">
+          <li className="icon-box">
+            <a href="#">
+              <img className="icon" src={facebookIcon} alt="facebook icon"/>
+            </a>
+          </li>
+          <li className="icon-box">
+            <a href="#">
+              <img className="icon" src={instagramIcon} alt="facebook icon"/>
+            </a>
+          </li>
+          <li className="icon-box">
+            <a href="#">
+              <img className="icon" src={twitterIcon} alt="twitter icon"/>
+            </a>
+          </li>
+          <li className="icon-box">
+            <a href="#">
+              <img className="icon" src={youtubeIcon} alt="youtube icon"/>
+            </a>
+          </li>
+          <li className="icon-box">
+            <a href="#">
+              <img className="icon" src={linkedinIcon} alt="linkedin icon"/>
+            </a>
+          </li>
+        </ul>
+        <p>www.loremipsum.com</p>
+      </div>
+    </div>
+  );
+}
+
+/*
+        <div className="footer-item">
+          <h2>Institucional</h2>
+          <button className="plus-icon" onClick={toggleOpen}>
+            <img src={plus} />
+          </button>
+          <ul className="content">
+            <li>
+              <Link to="#">Quem somos</Link>
+            </li>
+            <li>
+              <Link to="#">Política de privacidade</Link>
+            </li>
+            <li>
+              <Link to="#">Segurança</Link>
+            </li>
+            <li>
+              <Link to="#">Seja um revendedor</Link>
+            </li>
+          </ul>
+        </div>
+        <div className="footer-item">
+          <h2>Dúvidas</h2>
+          <button className="plus-icon" onClick={toggleOpen}>
+            <img src={plus} />
+          </button>
+          <ul className="content">
+            <li>
+              <Link to="#">Entrega</Link>
+            </li>
+            <li>
+              <Link to="#">Pagamento</Link>
+            </li>
+            <li>
+              <Link to="#">Trocas e devoluções</Link>
+            </li>
+            <li>
+              <Link to="#">Dúvidas Frequentes</Link>
+            </li>
+          </ul>
+        </div>
+        <div className="footer-item">
+          <h2>Fale conosco</h2>
+          <button className="plus-icon" onClick={toggleOpen}>
+            <img src={plus} />
+          </button>
+          <div className="content">
+            <h3>Atendimento Ao Consumidor</h3>
+            <ul className="mb-mt">
+              <li>
+                <a href="tel:1141599504">(11) 4159 9504</a>
+              </li>
+            </ul>
+
+            <h3>Atendimento Online</h3>
+            <ul className="mb-mt">
+              <li>
+                <a href="tel:11994338825">(11) 99433-8825</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+*/
--- a/Vitor-Soares-main/src/components/FormContainer/Contato/index.tsx
+++ b/Vitor-Soares-main/src/components/FormContainer/Contato/index.tsx
@ -0,0 +1,116 @@
+import { formatToCPF, formatToPhone } from "brazilian-values";
+import { Field, Form, Formik } from "formik";
+import { useState } from "react";
+import { OptionElement } from "../OptionElement";
+import { contatoSchema, formatDate } from "./schema";
+
+export function Contato() {
+  //@ts-ignore
+  const initialState: IContatoData = {
+    email: "",
+    nome: "",
+    instagram: "",
+    cpf: "",
+    telefone: "",
+    terms: false as any,
+    dataDeNascimento: "",
+  };
+
+  const [sent, setSent] = useState<boolean>(false);
+
+  return (
+    <OptionElement title="Preencha o Formulário" h2Class="form-title">
+      <Formik
+        initialValues={initialState}
+        validationSchema={contatoSchema}
+        onSubmit={(values, { resetForm }) => {
+          resetForm();
+          setSent(true);
+        }}
+      >
+        {({ errors, values, touched }) => {
+          function getError(field: keyof typeof initialState) {
+            return (
+              <span
+                className="error-msg"
+                style={{ opacity: touched[field] && errors[field] ? 1 : 0 }}
+              >
+                {errors[field]}
+              </span>
+            );
+          }
+
+          return (
+            <Form>
+              <fieldset>
+                <label>Nome</label>
+                {getError("nome")}
+                <Field
+                  name="nome"
+                  placeholder="Seu nome completo"
+                  type="text"
+                />
+              </fieldset>
+              <fieldset>
+                <label>E-mail</label>
+                {getError("email")}
+                <Field name="email" placeholder="Seu e-mail" type="email" />
+              </fieldset>
+              <fieldset>
+                <label>CPF</label>
+                {getError("cpf")}
+                <Field
+                  name="cpf"
+                  placeholder="Seu CPF"
+                  type="text"
+                  value={formatToCPF(values.cpf)}
+                  maxLength={14}
+                />
+              </fieldset>
+              <fieldset>
+                <label>Data de Nascimento:</label>
+                {getError("dataDeNascimento")}
+                <Field
+                  name="dataDeNascimento"
+                  placeholder="00.00.0000"
+                  type="text"
+                  maxLength={12}
+                  value={formatDate(values.dataDeNascimento)}
+                />
+              </fieldset>
+              <fieldset>
+                <label>Telefone:</label>
+                {getError("telefone")}
+                <Field
+                  name="telefone"
+                  placeholder="Seu Telefone"
+                  type="text"
+                  value={formatToPhone(values.telefone)}
+                />
+              </fieldset>
+              <fieldset>
+                <label>Instagram</label>
+                {getError("instagram")}
+                <Field name="instagram" placeholder="@seuuser" type="text" />
+              </fieldset>
+
+              <fieldset className="terms">
+                <span>
+                  <span className="asterisco">*</span>{" "}
+                  <span className="text">Declaro que li e aceito</span>
+                </span>
+                <Field type="checkbox" name="terms" />
+              </fieldset>
+              <button type="submit" className="cadastre-se-btn">
+                Cadastre-se
+              </button>
+              {sent && (
+                <span className="sent">*Formulário enviado com sucesso!</span>
+              )}
+            </Form>
+          );
+        }}
+      </Formik>
+    </OptionElement>
+  );
+}
--- a/Vitor-Soares-main/src/components/FormContainer/Contato/schema.ts
+++ b/Vitor-Soares-main/src/components/FormContainer/Contato/schema.ts
@ -0,0 +1,51 @@
+import * as Yup from "yup";
+import { isCPF, isPhone } from "brazilian-values";
+
+const instagramPattern = /^(?!.*\.\.)(?!.*\.$)[^\W][\w.]{0,29}$/gim;
+const datePattern =
+  /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gim;
+
+export function isDate(value: any) {
+  value = formatDate(value);
+  return !!value?.match(datePattern);
+}
+
+export function formatDate(value: string) {
+  value = value?.replace(/[^\d]/, "");
+  return value?.replace(/(\d{1,2})(\d{1,2})(\d{4})/gim, "$1.$2.$3");
+}
+
+export function isUser(value: any) {
+  return !!value?.match(instagramPattern);
+}
+
+export const contatoSchema = Yup.object().shape({
+  email: Yup.string().email("Email Inválido!").required("*Campo Obrigatório"),
+  nome: Yup.string().required("*Campo Obrigatório"),
+  instagram: Yup.string().required("*Campo Obrigatório").test({
+    name: "Instagram",
+    message: "Nome de usuário inválido!",
+    test: isUser,
+  }),
+  cpf: Yup.string()
+    .required("*Campo Obrigatório")
+    .test({ test: isCPF as any, message: "CPF Inválido" }),
+  telefone: Yup.string()
+    .required("*Campo Obrigatório")
+    .test({
+      test: (e) => {
+        e = e?.replace(/[^\d]/g, "");
+        return isPhone(e as string);
+      },
+      message: "Telefone Inválido",
+    }),
+  terms: Yup.boolean()
+    .required("*Campo Obrigatório")
+    .isTrue("Aceite os Termos para continuar"),
+  dataDeNascimento: Yup.string().required("*Campo Obrigatório").test({
+    test: isDate,
+    message: "Data de nascimento inválida!",
+  }),
+});
+
+export interface IContatoData extends Yup.InferType<typeof contatoSchema> {}
--- a/Vitor-Soares-main/src/components/FormContainer/NotImplementedOptionElement/index.tsx
+++ b/Vitor-Soares-main/src/components/FormContainer/NotImplementedOptionElement/index.tsx
@ -0,0 +1,13 @@
+import { OptionElement } from "../OptionElement";
+
+export function NotImplementedOptionElement({ title }: { title?: string }) {
+  return (
+    <OptionElement title={title || "Não Implementado !"}>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis hic
+        optio, modi atque, corrupti eaque illum nostrum at esse facere eligendi
+        cumque, pariatur dignissimos. Nesciunt rem hic minima fuga perspiciatis!
+      </p>
+    </OptionElement>
+  );
+}
--- a/Vitor-Soares-main/src/components/FormContainer/OptionElement/index.tsx
+++ b/Vitor-Soares-main/src/components/FormContainer/OptionElement/index.tsx
@ -0,0 +1,18 @@
+interface OptionElementProps {
+  title: string;
+  children?: any;
+  h2Class?: string;
+}
+
+export function OptionElement({
+  title,
+  children,
+  h2Class,
+}: OptionElementProps) {
+  return (
+    <>
+      <h2 className={h2Class ?? ""}>{title}</h2>
+      {children}
+    </>
+  );
+}
--- a/Vitor-Soares-main/src/components/FormContainer/Panel/Item/index.tsx
+++ b/Vitor-Soares-main/src/components/FormContainer/Panel/Item/index.tsx
@ -0,0 +1,15 @@
+import { HTMLAttributes, HtmlHTMLAttributes, ReactNode } from "react";
+
+export interface IItemProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  children?: ReactNode;
+  activeClass?: string;
+}
+
+export function Item({ title, children, ...attrs }: IItemProps) {
+  return (
+    <div title={title} {...attrs}>
+      {children}
+    </div>
+  );
+}
--- a/Vitor-Soares-main/src/components/FormContainer/Panel/index.tsx
+++ b/Vitor-Soares-main/src/components/FormContainer/Panel/index.tsx
@ -0,0 +1,48 @@
+import React, {
+  ReactNode,
+  useState,
+  Children,
+  HTMLAttributes,
+  useMemo,
+} from "react";
+import { Item, IItemProps } from "./Item";
+
+interface IRootProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+function filterChildren(children: ReactNode): IItemProps[] {
+  return Children.toArray(children)
+    .filter((e: any) => e.type === Item)
+    .map((e: any) => e.props) as any;
+}
+
+function Root({ children, ...attrs }: IRootProps) {
+  const data = useMemo(filterChildren.bind(null, children), [children]);
+
+  const [currentOption, setCurrentOption] = useState<IItemProps>(data[0]);
+
+  return (
+    <div {...attrs}>
+      <nav>
+        <ul>
+          {data.map((e, i) => (
+            <li
+              key={i}
+              onClick={setCurrentOption.bind(null, data[i])}
+              className={e === currentOption ? "active" : ""}
+            >
+              <button>{e.title}</button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <article>{currentOption?.children}</article>
+    </div>
+  );
+}
+
+export const Panel = {
+  Root,
+  Item,
+};
--- a/Vitor-Soares-main/src/components/FormContainer/Sobre/index.tsx
+++ b/Vitor-Soares-main/src/components/FormContainer/Sobre/index.tsx
@ -0,0 +1,35 @@
+import { OptionElement } from "../OptionElement";
+
+export function Sobre() {
+  return (
+    <OptionElement title="Sobre">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
+        laudantium reiciendis exercitationem fuga non, incidunt, quo consectetur
+        neque sit hic eveniet commodi fugiat illum ea assumenda? Nisi eveniet
+        repellendus quod. Lorem ipsum dolor sit amet consectetur adipisicing
+        elit. Unde, quod quam.
+      </p>
+      <br />
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
+        laudantium reiciendis exercitationem fuga non, incidunt, quo consectetur
+        neque sit hic eveniet commodi fugiat illum ea assumenda? Nisi eveniet
+        repellendus quod. Lorem ipsum dolor sit amet consectetur adipisicing
+        elit. Unde, quod quam. Voluptates eos assumenda cum sit, veritatis
+        perspiciatis quos distinctio possimus maiores modi nam deserunt mollitia
+        quae sint, natus accusantium.
+      </p>
+      <br />
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
+        laudantium reiciendis exercitationem fuga non, incidunt, quo consectetur
+        neque sit hic eveniet commodi fugiat illum ea assumenda? Nisi eveniet
+        repellendus quod. Lorem ipsum dolor sit amet consectetur adipisicing
+        elit. Unde, quod quam. Voluptates eos assumenda cum sit, veritatis
+        perspiciatis quos distinctio possimus maiores modi nam deserunt mollitia
+        quae sint, natus accusantium.
+      </p>
+    </OptionElement>
+  );
+}
--- a/Vitor-Soares-main/src/components/FormContainer/index.scss
+++ b/Vitor-Soares-main/src/components/FormContainer/index.scss
@ -0,0 +1,306 @@
+// [OPICIONAL] Fonte roboto pode remover caso já tenha no html
+// @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+// @import url("https://fonts.cdnfonts.com/css/proxima-nova-2");
+
+// COLORS
+$gray-color: #7d7d7d;
+$dark-gray-color: #292929;
+$light-gray-color: #b9b7b7;
+$black-color-1: #100d0e;
+$error-color: #ff0000;
+$border-color: #000;
+$label-color: #100d0e;
+
+// Apenas para desenvolvimento
+body {
+  margin: 0;
+  padding: 0;
+}
+
+// Reset
+@mixin reset {
+  *,
+  *::before,
+  *::after,
+  *::placeholder {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-weight: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
+
+// Estilo do conteudo que aparece a direita
+@mixin content {
+  .form-title {
+    color: black;
+  }
+
+  h2 {
+    color: $dark-gray-color;
+    margin-block: 10px 12px;
+    font-weight: 700;
+    font-size: 48px;
+    line-height: 56px;
+
+    color: $dark-gray-color;
+
+    @media screen {
+      @media (max-width: 2499px) {
+        font-size: 24px;
+        line-height: 28px;
+      }
+      @media (max-width: 1024px) {
+        text-align: center;
+        margin-top: 0;
+      }
+    }
+  }
+
+  p {
+    color: $gray-color;
+    font-size: 26px;
+    line-height: 30px;
+
+    @media screen {
+      @media (max-width: 2499px) {
+        font-size: 13px;
+        line-height: 15px;
+      }
+
+      @media (max-width: 1024px) {
+        text-align: justify;
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+}
+@mixin form {
+  display: grid;
+  gap: 16px;
+
+  .cadastre-se-btn {
+    background-color: $black-color-1;
+    color: #fff;
+    border-radius: 25px;
+    text-transform: uppercase;
+    color: white;
+
+    cursor: pointer;
+    padding-block: 16px 17px;
+
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 38px;
+    letter-spacing: 0.05em;
+    border: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media screen {
+      @media (max-width: 2499px) {
+        font-size: 16px;
+        line-height: 19px;
+      }
+    }
+  }
+
+  .sent {
+    color: #008000;
+
+    font-size: 24px;
+    line-height: 28px;
+
+    @media screen {
+      @media (max-width: 2499px) {
+        font-size: 12px;
+        line-height: 14px;
+      }
+    }
+  }
+
+  .terms {
+    color: $black-color-1;
+    margin-inline: auto;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    font-size: 28px;
+    line-height: 33px;
+    gap: 4.28px;
+
+    @media screen {
+      @media (max-width: 2499px) {
+        font-size: 14px;
+        line-height: 16px;
+
+        input {
+          width: 18.64px;
+          height: 18px;
+        }
+      }
+    }
+
+    .text {
+      border-bottom: solid 1px $border-color;
+    }
+
+    .asterisco {
+      color: $error-color;
+    }
+
+    input {
+      aspect-ratio: 1;
+      cursor: pointer;
+      border-radius: 3px;
+      width: 36.4px;
+      height: 35.15px;
+
+      @media screen {
+        @media (max-width: 2499px) {
+          width: 18.64px;
+          height: 18px;
+        }
+      }
+    }
+  }
+
+  fieldset {
+    display: grid;
+    border: none;
+
+    font-size: 28px;
+    line-height: 33px;
+    color: $label-color;
+
+    @media screen {
+      @media (max-width: 2499px) {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+
+    .error-msg {
+      white-space: nowrap;
+      margin-left: auto;
+      margin-right: 16px;
+      color: $error-color;
+
+      height: 28px;
+
+      font-size: 24px;
+      line-height: 28px;
+
+      @media screen {
+        @media (max-width: 2499px) {
+          font-size: 12px;
+          line-height: 14px;
+          height: 16px;
+        }
+      }
+    }
+
+    label {
+      margin-left: 15px;
+    }
+
+    input {
+      border-radius: 25px;
+      border: solid 1px #100d0e;
+      outline: none;
+
+      padding: 15px 20px;
+      &::placeholder {
+        color: $light-gray-color;
+        font-size: inherit;
+        line-height: inherit;
+      }
+    }
+  }
+}
+
+@mixin nav {
+  border-right: solid 1px #000;
+  width: 590px;
+  height: 465px;
+  font-size: 32px;
+  line-height: 38px;
+
+  @media screen {
+    @media (max-width: 2499px) {
+      width: 302px;
+      height: 285px;
+      font-size: 16px;
+      line-height: 19px;
+    }
+
+    @media (max-width: 1024px) {
+      width: 100%;
+      border: none;
+      padding-bottom: 0;
+      margin-bottom: 30px;
+      height: max-content;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    color: $gray-color;
+    li {
+      padding: 10px 16px;
+
+      cursor: pointer;
+
+      &.active {
+        background: #000;
+        color: #fff;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.form-container {
+  @include reset(); // [OPICIONAL] Caso já tenha sido feito
+
+  // [OPICIONAL] Caso a fonte já esteja setada em algum elemento pai pode remover
+  font-family: "Roboto", sans-serif;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: auto 1fr;
+
+  gap: 30px;
+  align-items: start;
+
+  @media screen {
+    @media (max-width: 2499px) {
+    }
+
+    @media (max-width: 1024px) {
+      grid-auto-flow: row;
+      grid-template-columns: none;
+      gap: 0;
+    }
+  }
+
+  nav {
+    @include nav;
+  }
+
+  article {
+    @include content;
+  }
+
+  form {
+    @include form;
+    flex: 1;
+  }
+}
--- a/Vitor-Soares-main/src/components/FormContainer/index.tsx
+++ b/Vitor-Soares-main/src/components/FormContainer/index.tsx
@ -0,0 +1,28 @@
+import { Contato } from "./Contato";
+import { NotImplementedOptionElement } from "./NotImplementedOptionElement";
+import { Panel } from "./Panel";
+import { Sobre } from "./Sobre";
+import "./index.scss";
+
+export function FormContainer() {
+  return (
+    <Panel.Root className="form-container">
+      <Panel.Item title="Sobre">
+        <Sobre />
+      </Panel.Item>
+
+      <Panel.Item title="Entrega">
+        <NotImplementedOptionElement title="Entrega" />
+      </Panel.Item>
+      <Panel.Item title="Troca e Devolução">
+        <NotImplementedOptionElement title="Troca e Devolução" />
+      </Panel.Item>
+      <Panel.Item title="Segurança e Privacidade">
+        <NotImplementedOptionElement title="Segurança e Privacidade" />
+      </Panel.Item>
+      <Panel.Item title="Contato">
+        <Contato />
+      </Panel.Item>
+    </Panel.Root>
+  );
+}
--- a/Vitor-Soares-main/src/components/Header/index.scss
+++ b/Vitor-Soares-main/src/components/Header/index.scss
@ -0,0 +1,188 @@
+@import "../../styles/index.scss";
+
+// @import "../../styles/mixins.scss";
+
+@mixin hiden() {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: all;
+}
+
+@mixin visible() {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: all;
+}
+
+.header {
+  @include large-font-4();
+  @include button-reset();
+
+  .logo {
+    width: max-content !important;
+    height: 50px;
+    img {
+      height: 100%;
+    }
+  }
+
+  gap: 16px;
+
+  color: $text-cl-1;
+  background: $panel-bg-1;
+
+  .top {
+    padding-block: 22px;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    justify-items: center;
+
+    .icons {
+      display: flex;
+      align-items: center;
+      gap: 55px;
+    }
+  }
+
+  .bottom {
+    padding-block: 14px;
+  }
+
+  .top,
+  .bottom {
+    padding-inline: $large-padding-inline;
+  }
+
+  .entrar {
+    text-transform: uppercase;
+  }
+  .comprar {
+    height: 54.68px;
+    img {
+      height: inherit;
+    }
+  }
+
+  nav {
+    border-top: solid 1px $border-cl-2;
+    font-weight: 500;
+    color: $text-cl-1;
+    grid-column: 1 / -1;
+    white-space: nowrap;
+    font-weight: 500;
+
+    ul {
+      list-style-type: none;
+      display: flex;
+      gap: 55px;
+    }
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  @media screen {
+    @media (max-width: 2499px) {
+      @include big-font-4();
+      .logo {
+        height: 26px;
+      }
+      .comprar {
+        height: 28px;
+      }
+      .search-box {
+        width: 264px;
+        height: 32px;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      display: grid;
+      gap: 25px;
+      padding-block: 25px;
+
+      .top,
+      .bottom {
+        padding-inline: $big-padding-inline;
+        padding-block: 0;
+      }
+
+      .search-box {
+        width: 100%;
+        padding-block: 10px;
+        height: 36px;
+      }
+
+      nav {
+        border: none;
+      }
+
+      .hamburguer {
+        .overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: $overlay-bg;
+          z-index: 99;
+          width: 100vw;
+          height: 100vh;
+        }
+
+        .content {
+          position: absolute;
+          top: 0;
+          left: 0;
+
+          max-width: 988px;
+          width: 100%;
+          height: 585px;
+          z-index: 100;
+          background: #fff;
+
+          transition: all 0.25s 0s;
+
+          nav {
+            color: $text-cl-5;
+            width: 100%;
+            height: 100%;
+            padding: 31px $big-padding-inline;
+            ul {
+              flex-direction: column;
+              gap: 12px;
+            }
+          }
+
+          &.hide {
+            transform: translateX(-100%);
+            opacity: 1;
+          }
+
+          header {
+            background: $panel-bg-1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 31px $big-padding-inline;
+
+            button {
+              @include center;
+            }
+          }
+        }
+      }
+
+      .hide {
+        @include hiden();
+      }
+    }
+
+    @media (max-width: 375px) {
+      .hamburguer .content {
+        max-width: 339px;
+      }
+    }
+  }
+}
--- a/Vitor-Soares-main/src/components/Header/index.tsx
+++ b/Vitor-Soares-main/src/components/Header/index.tsx
@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import cart from "../icons/Cart.svg";
+import closeBtn from "../icons/CloseBtn.svg";
+import hamburguer from "../icons/Hamburguer.svg";
+import logo from "../icons/M3Academy.png";
+
+import { Link } from "react-router-dom";
+import { SearchBox } from "../SearchBox";
+import "./index.scss";
+
+export function Header() {
+  const [move, setMove] = useState<boolean>(false);
+  const [asideOpen, setAsideOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    function calc() {
+      const { innerWidth: width, innerHeight: height } = window;
+      if (width <= 1024) {
+        setMove(true);
+      } else {
+        setMove(false);
+        setAsideOpen(false);
+      }
+    }
+
+    window.addEventListener("resize", calc);
+    calc();
+  }, []);
+
+  if (!move)
+    return (
+      <header className="header">
+        <div className="top">
+          <Link to="/" className="logo">
+            <img src={logo} alt="page logo" />
+          </Link>
+          <SearchBox />
+
+          <div className="icons">
+            <Link to="#" className="entrar">
+              <span>Entrar</span>
+            </Link>
+
+            <Link to="#" className="comprar">
+              <img src={cart} alt="cart icon" />
+            </Link>
+          </div>
+        </div>
+        <nav className="nav bottom">
+          <ul>
+            <li>
+              <Link to={"#"}>CURSOS</Link>
+            </li>
+            <li>
+              <Link to={"#"}>SAIBA MAIS</Link>
+            </li>
+            <li>
+              <Link to={"/institucional"}>INSTITUCIONAIS</Link>
+            </li>
+          </ul>
+        </nav>
+      </header>
+    );
+  else
+    return (
+      <header className="header">
+        <div className="top">
+          <div className={`hamburguer ${asideOpen ? "open" : ""}`}>
+            <button onClick={setAsideOpen.bind(null, true)}>
+              <img src={hamburguer} alt="Hamburguer icon" />
+            </button>
+            <div className={`overlay ${!asideOpen ? "hide" : ""}`}></div>
+            <div className={`content ${!asideOpen ? "hide" : ""}`}>
+              <header>
+                <Link to="#" className="entrar">
+                  Entrar
+                </Link>
+
+                <button
+                  onClick={setAsideOpen.bind(null, false)}
+                  className="close"
+                >
+                  <img src={closeBtn} alt="close button icon" />
+                </button>
+              </header>
+
+              <nav className="nav">
+                <ul>
+                  <li>
+                    <Link to={"#"}>CURSOS</Link>
+                  </li>
+                  <li>
+                    <Link to={"#"}>SAIBA MAIS</Link>
+                  </li>
+                  <li onClick={setAsideOpen.bind(null, false)}>
+                    <Link to={"/institucional"}>INSTITUCIONAIS</Link>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <Link to="/" className="logo">
+            <img src={logo} alt="page logo" />
+          </Link>
+          <div className="icons">
+            <Link to="/cart" className="comprar">
+              <img src={cart} alt="cart icon" />
+            </Link>
+          </div>
+        </div>
+        <div className="bottom">
+          <SearchBox />
+        </div>
+      </header>
+    );
+}
--- a/Vitor-Soares-main/src/components/Location/index.scss
+++ b/Vitor-Soares-main/src/components/Location/index.scss
@ -0,0 +1,39 @@
+@import "../../styles/index.scss";
+
+.location {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-transform: uppercase;
+  @include large-font-2;
+  color: $text-cl-5;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  margin-bottom: 80px;
+
+  .chevron,
+  .house {
+    @include center;
+  }
+  .house {
+    aspect-ratio: 1;
+  }
+
+  @media screen {
+    @media (max-width: 2499px) {
+      @include big-font-2;
+      gap: 9.72px;
+      .house {
+        width: 16px;
+      }
+
+      .chevron {
+        width: 4.56px;
+        height: 8px;
+      }
+    }
+  }
+}
--- a/Vitor-Soares-main/src/components/Location/index.tsx
+++ b/Vitor-Soares-main/src/components/Location/index.tsx
@ -0,0 +1,23 @@
+import { ReactSVG } from "react-svg";
+import house from "../icons/House.svg";
+import chevron from "../icons/ChevronLeft.svg";
+import "./index.scss";
+import { useLocation } from "react-router-dom";
+
+const strategy = {
+  "/": "Home",
+  "/institucional": "Instiucional",
+};
+
+export function Location() {
+  const { pathname } = useLocation() as { pathname: keyof typeof strategy };
+  const nome = strategy[pathname] ?? "Not found";
+
+  return (
+    <div className="location">
+      <ReactSVG src={house} className="house" />
+      {nome !== strategy["/"] && <ReactSVG src={chevron} className="chevron" />}
+      <p aria-label="Current Page location">{nome}</p>
+    </div>
+  );
+}
--- a/Vitor-Soares-main/src/components/NewsLetter/index.scss
+++ b/Vitor-Soares-main/src/components/NewsLetter/index.scss
@ -0,0 +1,106 @@
+@import "../../styles/index.scss";
+.news-letter {
+  @include large-font-4;
+  color: $text-cl-4;
+  border-block: solid 1px black;
+  padding-block: 16px;
+  padding-inline: 16px;
+
+  margin-top: 84px;
+
+  > div {
+    margin-inline: auto;
+    max-width: 922px;
+    width: 100%;
+  }
+
+  h2 {
+    width: max-content;
+    @include large-font-6;
+    margin-bottom: 8px;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    font-variant: small-caps;
+  }
+
+  .bar {
+    gap: 8px;
+    display: flex;
+    width: 100%;
+    max-width: 922px;
+
+    input {
+      padding: 13px 16px;
+      border: solid 1px $border-cl-4;
+      flex: 1;
+      &::placeholder {
+        color: $text-cl-5;
+      }
+      border-radius: 4px;
+    }
+
+    button {
+      @include large-font-2;
+      @include black-btn;
+      padding-inline: 20px;
+      max-width: 246px;
+      width: 100%;
+      letter-spacing: 0.05em;
+      font-weight: 700;
+    }
+  }
+
+  @media screen {
+    @media (max-width: 2499px) {
+      margin-top: 70px;
+      > div {
+        max-width: 474px;
+
+        h2 {
+          @include big-font-6;
+        }
+        .bar {
+          input {
+            @include big-font-4;
+          }
+
+          button {
+            @include big-font-2;
+            max-width: 126px;
+          }
+        }
+      }
+    }
+    @media (max-width: 1024px) {
+      margin-top: 80px;
+      > div {
+        max-width: 100%;
+
+        h2 {
+          @include big-font-4;
+          margin-bottom: 16px;
+        }
+
+        .bar {
+          max-width: 100%;
+          gap: 16px;
+          flex-direction: column;
+          input {
+            @include big-font-4;
+          }
+
+          button {
+            @include big-font-4;
+            max-width: 100%;
+            padding-block: 17px;
+          }
+        }
+      }
+    }
+    @media (max-width: 375px) {
+      input {
+        padding-block: 17px !important;
+      }
+    }
+  }
+}
--- a/Vitor-Soares-main/src/components/NewsLetter/index.tsx
+++ b/Vitor-Soares-main/src/components/NewsLetter/index.tsx
@ -0,0 +1,19 @@
+import "./index.scss";
+export function NewsLetter() {
+  return (
+    <form
+      className="news-letter"
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <div>
+        <h2>ASSINE NOSSA NEWSLETTER</h2>
+        <div className="bar">
+          <input type="text" placeholder="E-mail" />
+          <button type="submit">Enviar</button>
+        </div>
+      </div>
+    </form>
+  );
+}
--- a/Vitor-Soares-main/src/components/SearchBox/index.scss
+++ b/Vitor-Soares-main/src/components/SearchBox/index.scss
@ -0,0 +1,62 @@
+@import "../../styles/index.scss";
+
+.search-box {
+  width: 515.62px;
+
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: #fff;
+  border: solid 2px $border-cl-3;
+
+  max-height: 57px;
+
+  .buscar {
+    @include center();
+    color: $text-cl-2;
+    width: 35px;
+    height: 35px;
+    aspect-ratio: 1;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  padding: 12px 16px;
+  @media screen {
+    @media (max-width: 2499px) {
+      padding-block: 8px;
+      .buscar {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  border-radius: 5px;
+  overflow: hidden;
+
+  &:focus-within {
+    outline: none;
+  }
+
+  input {
+    @include reset-border-background-outline();
+
+    flex: 1;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+
+    color: $text-cl-6;
+    &::placeholder {
+      color: $text-cl-3;
+    }
+  }
+}
--- a/Vitor-Soares-main/src/components/SearchBox/index.tsx
+++ b/Vitor-Soares-main/src/components/SearchBox/index.tsx
@ -0,0 +1,13 @@
+import search from "../icons/Search.svg";
+import "./index.scss";
+
+export function SearchBox() {
+  return (
+    <div className="search-box" aria-label="search box">
+      <input type="search" placeholder="Buscar..." />
+      <button className="buscar">
+        <img src={search} alt="search icon" />
+      </button>
+    </div>
+  );
+}
--- a/Vitor-Soares-main/src/components/Template/index.scss
+++ b/Vitor-Soares-main/src/components/Template/index.scss
@ -0,0 +1,38 @@
+@import "../../styles/index.scss";
+.icons-absolute {
+  display: grid;
+  gap: 5px;
+
+  position: absolute;
+  right: 16px;
+  bottom: 250px;
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 66px;
+    width: 66px;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  @media screen {
+    @media (max-width: 2499px) {
+      a {
+        width: 34px !important;
+        height: 34px !important;
+      }
+
+      bottom: 210px;
+    }
+    @media (max-width: 1024px) {
+      bottom: 70px;
+    }
+    @media (max-width: 375px) {
+      bottom: 29px;
+    }
+  }
+}
--- a/Vitor-Soares-main/src/components/Template/index.tsx
+++ b/Vitor-Soares-main/src/components/Template/index.tsx
@ -0,0 +1,28 @@
+import { Outlet } from "react-router-dom";
+import { Footer } from "../Footer";
+import { Header } from "../Header";
+import { Location } from "../Location";
+import whatsapp from "../icons/Whatsapp.svg";
+import chevron from "../icons/chevronup.svg";
+import "./index.scss";
+
+export function Template() {
+  return (
+    <>
+      <Header />
+      <div className="icons-absolute">
+        <a href="https://api.whatsapp.com/send?1=pt_BR&phone=5522998241021">
+          <img src={whatsapp} alt="whatsapp icon" />
+        </a>
+        <a>
+          <img src={chevron} alt="chevron up icon" />
+        </a>
+      </div>
+      <main className="main">
+        <Location />
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+}
--- a/Vitor-Soares-main/src/components/icons/Boleto.svg
+++ b/Vitor-Soares-main/src/components/icons/Boleto.svg
--- a/Vitor-Soares-main/src/components/icons/Cart.svg
+++ b/Vitor-Soares-main/src/components/icons/Cart.svg
@ -0,0 +1,12 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3715_5418)">
+<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
+<path d="M11.8462 21.5385C10.2132 21.5385 8.88464 22.867 8.88464 24.5C8.88464 26.133 10.2132 27.4615 11.8462 27.4615C13.4792 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8462 21.5385Z" fill="white"/>
+<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3715_5418">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Chevron.svg
+++ b/Vitor-Soares-main/src/components/icons/Chevron.svg
@ -0,0 +1,4 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66 33C66 51.2254 51.2254 66 33 66C14.7746 66 0 51.2254 0 33C0 14.7746 14.7746 0 33 0C51.2254 0 66 14.7746 66 33Z" fill="#C4C4C4"/>
+<path d="M44.7428 36.3959C44.741 36.6959 44.6177 36.9953 44.373 37.226L44.3728 37.2261C43.8668 37.7035 43.037 37.7035 42.5311 37.2261L42.5232 37.2345L42.5311 37.2261L33.3457 28.5599L33.0712 28.3009L32.7967 28.5599L23.6118 37.2258C23.1055 37.7033 22.2757 37.7032 21.7698 37.2259L21.7697 37.2258C21.5257 36.9957 21.4025 36.6972 21.4 36.398C21.4019 36.0981 21.5251 35.7986 21.7698 35.5678L21.7698 35.5678L32.1506 25.7738C32.4013 25.5373 32.7333 25.4158 33.0712 25.4158C33.4093 25.4158 33.7415 25.5376 33.9922 25.774L44.3728 35.568L44.3729 35.5681C44.6171 35.7983 44.7403 36.0968 44.7428 36.3959Z" fill="white" stroke="white" stroke-width="0.8"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/ChevronLeft.svg
+++ b/Vitor-Soares-main/src/components/icons/ChevronLeft.svg
@ -0,0 +1,3 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.94167 7.03685L2.22531 0.320703C1.79807 -0.106746 1.10537 -0.106746 0.678334 0.320703C0.251265 0.747771 0.251265 1.44043 0.678334 1.86747L6.62128 7.81023L0.678507 13.7528C0.251438 14.18 0.251438 14.8726 0.678507 15.2997C1.10558 15.7269 1.79824 15.7269 2.22548 15.2997L8.94185 8.58344C9.15538 8.3698 9.26203 8.0901 9.26203 7.81026C9.26203 7.53029 9.15517 7.25038 8.94167 7.03685Z" fill="#C4C4C4"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/CloseBtn.svg
+++ b/Vitor-Soares-main/src/components/icons/CloseBtn.svg
@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
+<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Diners.svg
+++ b/Vitor-Soares-main/src/components/icons/Diners.svg
--- a/Vitor-Soares-main/src/components/icons/Elo.svg
+++ b/Vitor-Soares-main/src/components/icons/Elo.svg
--- a/Vitor-Soares-main/src/components/icons/Facebook.svg
+++ b/Vitor-Soares-main/src/components/icons/Facebook.svg
@ -0,0 +1,11 @@
+<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7089_395)">
+<path d="M38.3559 55.2232V37.329H44.347L45.2458 30.3532H38.3559V25.9002C38.3559 23.8812 38.913 22.5052 41.8054 22.5052L45.4883 22.5037V16.2643C44.8514 16.1814 42.6651 15.9912 40.1205 15.9912C34.8069 15.9912 31.1692 19.2415 31.1692 25.2093V30.3532H25.1599V37.329H31.1692V55.2232H38.3559Z" fill="#303030"/>
+</g>
+<circle cx="35" cy="35.2412" r="34" stroke="#303030" stroke-width="2"/>
+<defs>
+<clipPath id="clip0_7089_395">
+<rect width="39.148" height="39.232" fill="white" transform="translate(15.75 15.9912)"/>
+</clipPath>
+</defs>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Hamburguer.svg
+++ b/Vitor-Soares-main/src/components/icons/Hamburguer.svg
@ -0,0 +1,5 @@
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
+<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
+<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Hiper.svg
+++ b/Vitor-Soares-main/src/components/icons/Hiper.svg
--- a/Vitor-Soares-main/src/components/icons/House.svg
+++ b/Vitor-Soares-main/src/components/icons/House.svg
@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.9231 14.8352L28.692 12.6041L16.4148 0.326808C15.9789 -0.108936 15.2724 -0.108936 14.8366 0.326808L2.55921 12.6041L0.326997 14.8364C-0.101226 15.2798 -0.088997 15.9863 0.354399 16.4146C0.786939 16.8323 1.47263 16.8323 1.90517 16.4146L2.23105 16.0864V30.1339C2.23105 30.7503 2.73075 31.25 3.34719 31.25H27.9018C28.5183 31.25 29.018 30.7503 29.018 30.1339V16.0864L29.345 16.4134C29.7884 16.8417 30.4949 16.8294 30.9231 16.386C31.3409 15.9535 31.3409 15.2677 30.9231 14.8352ZM18.9729 29.0178H12.2762V20.0888H18.9729V29.0178ZM26.7857 29.0178H21.2051V18.9727C21.2051 18.3563 20.7054 17.8566 20.089 17.8566H11.1601C10.5436 17.8566 10.0439 18.3563 10.0439 18.9727V29.0178H4.46333V13.8542L15.6245 2.69296L26.7857 13.8542V29.0178Z" fill="#C4C4C4"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Instagram.svg
+++ b/Vitor-Soares-main/src/components/icons/Instagram.svg
@ -0,0 +1,13 @@
+<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7089_400)">
+<path d="M44.1992 15.9912H26.5932C20.6143 15.9912 15.75 20.8481 15.75 26.8178V44.3965C15.75 50.3663 20.6143 55.223 26.5932 55.223H44.1992C50.1786 55.223 55.0429 50.3661 55.0429 44.3965V26.8178C55.0431 20.8481 50.1786 15.9912 44.1992 15.9912ZM51.5568 44.3965C51.5568 48.447 48.2563 51.7422 44.1994 51.7422H26.5932C22.5366 51.7424 19.2363 48.447 19.2363 44.3965V26.8178C19.2363 22.7675 22.5366 19.472 26.5932 19.472H44.1992C48.2561 19.472 51.5566 22.7675 51.5566 26.8178V44.3965H51.5568Z" fill="#303030"/>
+<path d="M35.3963 25.4987C29.8134 25.4987 25.2715 30.0335 25.2715 35.6077C25.2715 41.1817 29.8134 45.7163 35.3963 45.7163C40.9791 45.7163 45.521 41.1817 45.521 35.6077C45.521 30.0335 40.9791 25.4987 35.3963 25.4987ZM35.3963 42.2352C31.7359 42.2352 28.7577 39.2621 28.7577 35.6075C28.7577 31.9526 31.7357 28.9793 35.3963 28.9793C39.0568 28.9793 42.0348 31.9526 42.0348 35.6075C42.0348 39.2621 39.0566 42.2352 35.3963 42.2352Z" fill="#303030"/>
+<path d="M45.9457 22.5472C45.2741 22.5472 44.6142 22.8187 44.1399 23.2945C43.6632 23.7679 43.3892 24.4269 43.3892 25.0999C43.3892 25.7707 43.6634 26.4295 44.1399 26.9052C44.614 27.3786 45.2741 27.6525 45.9457 27.6525C46.6198 27.6525 47.2775 27.3786 47.7539 26.9052C48.2304 26.4295 48.5023 25.7705 48.5023 25.0999C48.5023 24.4269 48.2304 23.7679 47.7539 23.2945C47.2798 22.8187 46.6198 22.5472 45.9457 22.5472Z" fill="#303030"/>
+</g>
+<circle cx="35" cy="35.2412" r="34" stroke="#303030" stroke-width="2"/>
+<defs>
+<clipPath id="clip0_7089_400">
+<rect width="39.2931" height="39.232" fill="white" transform="translate(15.75 15.9912)"/>
+</clipPath>
+</defs>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Linkedin.svg
+++ b/Vitor-Soares-main/src/components/icons/Linkedin.svg
@ -0,0 +1,13 @@
+<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="35" cy="35.2412" r="34" stroke="#303030" stroke-width="2"/>
+<g clip-path="url(#clip0_7089_415)">
+<path d="M26.8891 27.9594H20.5959C20.3166 27.9594 20.0903 28.1858 20.0903 28.465V48.6821C20.0903 48.9614 20.3166 49.1877 20.5959 49.1877H26.8891C27.1684 49.1877 27.3947 48.9614 27.3947 48.6821V28.465C27.3947 28.1858 27.1684 27.9594 26.8891 27.9594Z" fill="#303030"/>
+<path d="M23.745 17.9089C21.4552 17.9089 19.5923 19.7698 19.5923 22.0571C19.5923 24.3454 21.4552 26.2069 23.745 26.2069C26.0329 26.2069 27.8943 24.3453 27.8943 22.0571C27.8944 19.7698 26.0329 17.9089 23.745 17.9089Z" fill="#303030"/>
+<path d="M42.8963 27.4569C40.3688 27.4569 38.5004 28.5435 37.3671 29.7781V28.465C37.3671 28.1858 37.1408 27.9594 36.8615 27.9594H30.8347C30.5554 27.9594 30.3291 28.1858 30.3291 28.465V48.6821C30.3291 48.9614 30.5554 49.1877 30.8347 49.1877H37.1141C37.3934 49.1877 37.6197 48.9614 37.6197 48.6821V38.6793C37.6197 35.3086 38.5353 33.9955 40.8849 33.9955C43.4439 33.9955 43.6473 36.1006 43.6473 38.8528V48.6822C43.6473 48.9615 43.8736 49.1878 44.1529 49.1878H50.4346C50.7139 49.1878 50.9402 48.9615 50.9402 48.6822V37.5928C50.9402 32.5807 49.9845 27.4569 42.8963 27.4569Z" fill="#303030"/>
+</g>
+<defs>
+<clipPath id="clip0_7089_415">
+<rect width="31.3478" height="31.3478" fill="white" transform="translate(19.5923 17.8744)"/>
+</clipPath>
+</defs>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/M3Academy.png
+++ b/Vitor-Soares-main/src/components/icons/M3Academy.png
--- a/Vitor-Soares-main/src/components/icons/Master.svg
+++ b/Vitor-Soares-main/src/components/icons/Master.svg
--- a/Vitor-Soares-main/src/components/icons/Paypal.svg
+++ b/Vitor-Soares-main/src/components/icons/Paypal.svg
--- a/Vitor-Soares-main/src/components/icons/Plus.svg
+++ b/Vitor-Soares-main/src/components/icons/Plus.svg
@ -0,0 +1,3 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Search.svg
+++ b/Vitor-Soares-main/src/components/icons/Search.svg
@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3751_533)">
+<path d="M25.7949 22.6886C27.5246 20.3265 28.5592 17.4252 28.5592 14.2799C28.5592 6.40637 22.1531 0.000244141 14.2796 0.000244141C6.40606 0.000244141 0 6.40637 0 14.2799C0 22.1534 6.40613 28.5596 14.2797 28.5596C17.4249 28.5596 20.3266 27.5248 22.6886 25.7951L32.0435 35.15L35.15 32.0436C35.15 32.0435 25.7949 22.6886 25.7949 22.6886ZM14.2797 24.1658C8.82824 24.1658 4.39377 19.7313 4.39377 14.2799C4.39377 8.82848 8.82824 4.39401 14.2797 4.39401C19.7311 4.39401 24.1655 8.82848 24.1655 14.2799C24.1655 19.7313 19.731 24.1658 14.2797 24.1658Z" fill="#292929"/>
+</g>
+<defs>
+<clipPath id="clip0_3751_533">
+<rect width="35.15" height="35.15" rx="5" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Twitter.svg
+++ b/Vitor-Soares-main/src/components/icons/Twitter.svg
@ -0,0 +1,4 @@
+<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="35" cy="35.2412" r="34" stroke="#303030" stroke-width="2"/>
+<path d="M59.9828 20.554C58.1893 21.3407 56.2783 21.8622 54.2859 22.1154C56.3356 20.8916 57.9 18.9686 58.6354 16.6506C56.7244 17.79 54.6145 18.5948 52.3659 19.0439C50.5513 17.1118 47.9651 15.9152 45.1438 15.9152C39.67 15.9152 35.2632 20.3581 35.2632 25.8048C35.2632 26.5885 35.3295 27.342 35.4923 28.0594C27.2725 27.6585 19.9992 23.719 15.1132 17.7177C14.2602 19.1976 13.7598 20.8916 13.7598 22.7152C13.7598 26.1394 15.5231 29.1747 18.1515 30.932C16.563 30.9018 15.0047 30.4407 13.6845 29.7142C13.6845 29.7444 13.6845 29.7836 13.6845 29.8227C13.6845 34.6274 17.1116 38.6182 21.6058 39.5376C20.801 39.7576 19.9239 39.8631 19.0136 39.8631C18.3806 39.8631 17.7416 39.8269 17.1418 39.6943C18.4228 43.6098 22.058 46.4883 26.3803 46.5818C23.0165 49.2132 18.7453 50.7987 14.1215 50.7987C13.3107 50.7987 12.533 50.7625 11.7554 50.663C16.135 53.4873 21.3255 55.0999 26.9229 55.0999C45.1167 55.0999 55.0636 40.0289 55.0636 26.9653C55.0636 26.5282 55.0485 26.1062 55.0274 25.6872C56.9897 24.2947 58.6385 22.5555 59.9828 20.554Z" fill="#303030"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Visa.svg
+++ b/Vitor-Soares-main/src/components/icons/Visa.svg
--- a/Vitor-Soares-main/src/components/icons/Vtex.svg
+++ b/Vitor-Soares-main/src/components/icons/Vtex.svg
@ -0,0 +1,4 @@
+<svg width="29" height="16" viewBox="0 0 29 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0306 5.52931C16.5832 4.9359 16.0212 4.44241 15.3793 4.07933C14.7375 3.71625 14.0295 3.4913 13.2991 3.41838C12.5687 3.34547 11.8314 3.42614 11.1327 3.6554C10.4341 3.88467 9.78893 4.25766 9.23719 4.75133L8.76053 4.38179C5.48585 2.02839 0.900357 4.02683 0.471361 8.05776C0.340858 9.99972 0.307448 11.9472 0.371262 13.8926C0.360734 14.1423 0.40062 14.3915 0.488442 14.6247C0.576265 14.858 0.71015 15.0704 0.881788 15.2486C1.05343 15.4269 1.25915 15.5673 1.4862 15.6611C1.71325 15.7549 1.95677 15.8001 2.20165 15.7938C2.44131 15.7928 2.67828 15.7423 2.89833 15.6455C3.11838 15.5486 3.31697 15.4074 3.48215 15.2302C3.64733 15.0531 3.77571 14.8437 3.85955 14.6147C3.9434 14.3857 3.98099 14.1417 3.97007 13.8975C3.97007 12.4971 3.97007 11.0968 3.97007 9.69153C3.96621 9.27493 3.9949 8.85869 4.05587 8.44675C4.13275 8.02513 4.36328 7.64884 4.70108 7.39355C5.03889 7.13826 5.45893 7.02291 5.87672 7.07069C6.28512 7.1021 6.66826 7.28439 6.95433 7.58336C7.2404 7.88234 7.40975 8.27749 7.43064 8.69473C7.45447 9.21015 7.43064 9.72556 7.43064 10.241C7.43064 11.4955 7.43064 12.75 7.43064 14.0045C7.42574 14.3683 7.53183 14.7248 7.73422 15.0244C7.93661 15.3241 8.22529 15.5522 8.56033 15.6771C9.77582 16.1926 11.0151 15.2881 11.039 13.8635C11.039 12.2054 11.039 10.5473 11.0866 8.88923C11.1027 8.48841 11.2228 8.09913 11.4346 7.76115C11.6363 7.46313 11.9286 7.24117 12.2663 7.12955C12.6041 7.01794 12.9684 7.02288 13.3031 7.14363C13.6807 7.25157 14.0107 7.48779 14.2387 7.8132C14.4667 8.1386 14.5789 8.53367 14.5567 8.93299C14.5567 10.6105 14.5567 12.288 14.5567 13.9656C14.5567 14.2063 14.6032 14.4447 14.6935 14.6671C14.7838 14.8895 14.9162 15.0916 15.0831 15.2618C15.2499 15.432 15.4481 15.567 15.6661 15.6592C15.8841 15.7513 16.1178 15.7987 16.3538 15.7987C16.5898 15.7987 16.8234 15.7513 17.0415 15.6592C17.2595 15.567 17.4576 15.432 17.6244 15.2618C17.7913 15.0916 17.9237 14.8895 18.014 14.6671C18.1043 14.4447 18.1508 14.2063 18.1508 13.9656C18.1508 12.2491 18.1508 10.5619 18.1508 8.82116C18.154 7.62606 17.7591 6.46532 17.0306 5.52931Z" fill="white"/>
+<path d="M26.0349 6.5015L25.4676 6.26325C26.0301 5.8159 26.564 5.43177 27.0406 4.99416C27.4641 4.65403 27.8297 4.24496 28.1227 3.78342C28.9806 2.14966 27.7699 0.248458 25.849 0.204696C24.0758 0.180384 22.3074 0.180384 20.5342 0.180384C20.317 0.165073 20.0991 0.19678 19.8947 0.273425C19.6904 0.350069 19.5042 0.46992 19.3485 0.625113C19.1928 0.780306 19.071 0.967335 18.9911 1.17393C18.9112 1.38052 18.875 1.60202 18.8849 1.82387C18.8637 2.04985 18.8909 2.27783 18.9646 2.49201C19.0384 2.7062 19.1569 2.90146 19.312 3.06428C19.467 3.22709 19.655 3.35356 19.8627 3.43492C20.0705 3.51627 20.2931 3.55057 20.5151 3.53544C21.3826 3.53544 22.2502 3.53544 23.1177 3.53544C23.2655 3.58406 23.418 3.58406 23.704 3.58406C22.5266 4.55654 21.4398 5.4804 20.3673 6.39453C19.6762 6.97802 19.4665 7.61499 19.7096 8.33949C19.8387 8.6971 20.0793 9.00161 20.3944 9.20627C20.7096 9.41093 21.0819 9.50443 21.4541 9.47243C22.3741 9.47243 23.2988 9.47243 24.2188 9.47243C24.4251 9.43352 24.6373 9.44139 24.8403 9.4955C25.0433 9.54961 25.2321 9.64862 25.3934 9.78551C25.5547 9.92241 25.6845 10.0938 25.7735 10.2876C25.8626 10.4814 25.9088 10.6928 25.9088 10.9068C25.9088 11.1209 25.8626 11.3323 25.7735 11.5261C25.6845 11.7198 25.5547 11.8913 25.3934 12.0282C25.2321 12.1651 25.0433 12.2641 24.8403 12.3182C24.6373 12.3723 24.4251 12.3802 24.2188 12.3412C23.0271 12.3412 21.8355 12.3412 20.6438 12.3412C20.2261 12.3643 19.8329 12.5498 19.5452 12.8596C19.2575 13.1694 19.0971 13.5799 19.0971 14.0066C19.0971 14.4334 19.2575 14.8439 19.5452 15.1537C19.8329 15.4635 20.2261 15.649 20.6438 15.672C21.8879 15.672 23.1368 15.672 24.3808 15.672C25.4737 15.6437 26.5238 15.2331 27.3552 14.5089C28.1866 13.7848 28.7487 12.7912 28.9473 11.6945C29.1056 10.6209 28.9042 9.52417 28.3757 8.58176C27.8472 7.63936 27.0224 6.90642 26.0349 6.5015Z" fill="white"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Whatsapp.svg
+++ b/Vitor-Soares-main/src/components/icons/Whatsapp.svg
@ -0,0 +1,11 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4136_1027)">
+<path d="M33.0083 0H32.9917C14.7964 0 0 14.8005 0 33C0 40.2188 2.3265 46.9095 6.28237 52.3421L2.16975 64.6016L14.8541 60.5468C20.0723 64.0035 26.2969 66 33.0083 66C51.2036 66 66 51.1954 66 33C66 14.8046 51.2036 0 33.0083 0Z" fill="#4CAF50"/>
+<path d="M52.2103 46.6001C51.4142 48.8483 48.2544 50.7128 45.734 51.2573C44.0098 51.6244 41.7575 51.9173 34.1758 48.774C24.4779 44.7563 18.2326 34.9016 17.7459 34.2623C17.2798 33.6229 13.8271 29.0441 13.8271 24.3086C13.8271 19.5731 16.232 17.2673 17.2014 16.2773C17.9975 15.4646 19.3134 15.0934 20.5756 15.0934C20.984 15.0934 21.3511 15.114 21.6811 15.1305C22.6505 15.1718 23.1373 15.2295 23.7766 16.7599C24.5728 18.678 26.5115 23.4135 26.7425 23.9003C26.9776 24.387 27.2128 25.047 26.8828 25.6864C26.5734 26.3464 26.3011 26.6393 25.8144 27.2003C25.3276 27.7613 24.8656 28.1903 24.3789 28.7925C23.9334 29.3164 23.4301 29.8774 23.9911 30.8468C24.5521 31.7955 26.4909 34.9594 29.3454 37.5004C33.029 40.7798 36.0155 41.8275 37.0839 42.273C37.88 42.603 38.8288 42.5246 39.4104 41.9059C40.1488 41.1098 41.0604 39.7898 41.9885 38.4904C42.6485 37.5581 43.4818 37.4426 44.3563 37.7726C45.2473 38.082 49.9622 40.4126 50.9315 40.8953C51.9009 41.382 52.5403 41.613 52.7754 42.0214C53.0064 42.4298 53.0064 44.3479 52.2103 46.6001Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4136_1027">
+<rect width="66" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/Youtube.svg
+++ b/Vitor-Soares-main/src/components/icons/Youtube.svg
@ -0,0 +1,4 @@
+<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="35" cy="35.2412" r="34" stroke="#303030" stroke-width="2"/>
+<path d="M55.6053 24.7388C55.0893 22.8207 53.5771 21.3087 51.6593 20.7922C48.1557 19.8336 34.1411 19.8336 34.1411 19.8336C34.1411 19.8336 20.127 19.8336 16.6234 20.7559C14.7425 21.2718 13.1933 22.821 12.6774 24.7388C11.7554 28.2421 11.7554 35.5075 11.7554 35.5075C11.7554 35.5075 11.7554 42.8096 12.6774 46.2763C13.1939 48.1941 14.7056 49.7061 16.6237 50.2225C20.1639 51.1814 34.1416 51.1814 34.1416 51.1814C34.1416 51.1814 48.1557 51.1814 51.6593 50.2592C53.5773 49.743 55.0893 48.231 55.6058 46.3132C56.5276 42.8096 56.5276 35.5444 56.5276 35.5444C56.5276 35.5444 56.5644 28.2421 55.6053 24.7388ZM29.6791 42.2196V28.7955L41.333 35.5075L29.6791 42.2196Z" fill="#303030"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/chevron(1).svg_Zone.Identifier
+++ b/Vitor-Soares-main/src/components/icons/chevron(1).svg_Zone.Identifier
@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
--- a/Vitor-Soares-main/src/components/icons/chevron(1).svgZone.Identifier
+++ b/Vitor-Soares-main/src/components/icons/chevron(1).svgZone.Identifier
@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
--- a/Vitor-Soares-main/src/components/icons/chevronup.svg
+++ b/Vitor-Soares-main/src/components/icons/chevronup.svg
@ -0,0 +1,4 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66 33C66 51.2254 51.2254 66 33 66C14.7746 66 0 51.2254 0 33C0 14.7746 14.7746 0 33 0C51.2254 0 66 14.7746 66 33Z" fill="#C4C4C4"/>
+<path d="M44.7428 36.3959C44.741 36.6959 44.6177 36.9953 44.373 37.226L44.3728 37.2261C43.8668 37.7035 43.037 37.7035 42.5311 37.2261L42.5232 37.2345L42.5311 37.2261L33.3457 28.5599L33.0712 28.3009L32.7967 28.5599L23.6118 37.2258C23.1055 37.7033 22.2757 37.7032 21.7698 37.2259L21.7697 37.2258C21.5257 36.9957 21.4025 36.6972 21.4 36.398C21.4019 36.0981 21.5251 35.7986 21.7698 35.5678L21.7698 35.5678L32.1506 25.7738C32.4013 25.5373 32.7333 25.4158 33.0712 25.4158C33.4093 25.4158 33.7415 25.5376 33.9922 25.774L44.3728 35.568L44.3729 35.5681C44.6171 35.7983 44.7403 36.0968 44.7428 36.3959Z" fill="white" stroke="white" stroke-width="0.8"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/m3.svg
+++ b/Vitor-Soares-main/src/components/icons/m3.svg
@ -0,0 +1,7 @@
+<svg width="46" height="16" viewBox="0 0 46 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8808 5.99083H31.2736V11.4557C31.2736 11.558 31.1852 11.6456 31.0819 11.6456H29.8434C29.7402 11.6456 29.6517 11.558 29.6517 11.4557V5.99083H28.0298C27.9856 5.99083 27.9266 5.97622 27.8971 5.94699C27.8676 5.91777 27.8381 5.87394 27.8381 5.81549V4.8511C27.8381 4.80727 27.8529 4.74882 27.8971 4.7196C27.9266 4.69037 27.9856 4.66115 28.0298 4.67576H32.8808C32.984 4.67576 33.0725 4.74882 33.0725 4.8511V5.81549C33.0725 5.91777 32.984 5.99083 32.8808 5.99083Z" fill="white"/>
+<path d="M38.0558 11.6017C37.4218 11.6893 36.773 11.7332 36.139 11.7186C34.9152 11.7186 33.8389 11.4117 33.8389 9.70213V6.5898C33.8389 4.88021 34.93 4.58797 36.1538 4.58797C36.7878 4.57336 37.4218 4.6172 38.0558 4.70487C38.1885 4.71948 38.2475 4.77793 38.2475 4.89482V5.77154C38.2475 5.87382 38.159 5.96149 38.0558 5.96149H36.0653C35.623 5.96149 35.4608 6.10761 35.4608 6.60441V7.4519H37.9821C38.0853 7.4519 38.1738 7.53957 38.1738 7.64186V8.53318C38.1738 8.63547 38.0853 8.72314 37.9821 8.72314H35.4608V9.71674C35.4608 10.1989 35.623 10.3597 36.0653 10.3597H38.0558C38.159 10.3597 38.2475 10.4473 38.2475 10.5496V11.4263C38.2475 11.5286 38.1885 11.5871 38.0558 11.6017Z" fill="white"/>
+<path d="M45.1924 11.6455H43.6884C43.5852 11.6601 43.482 11.6016 43.4378 11.4993L42.1255 9.45367L40.9459 11.4555C40.8869 11.5724 40.8132 11.6455 40.71 11.6455H39.3093C39.2798 11.6455 39.2355 11.6455 39.206 11.6162C39.1766 11.587 39.1618 11.5578 39.1618 11.5139C39.1618 11.4847 39.1766 11.4701 39.1766 11.4555L41.2261 8.06555L39.1471 4.85094C39.1323 4.83632 39.1323 4.8071 39.1323 4.79249C39.1323 4.71943 39.206 4.66098 39.2798 4.67559H40.828C40.9312 4.67559 41.0049 4.76327 41.0639 4.85094L42.2729 6.75048L43.4525 4.85094C43.4967 4.74865 43.5852 4.69021 43.6884 4.67559H45.0891C45.1629 4.67559 45.2366 4.71943 45.2366 4.79249C45.2366 4.8071 45.2218 4.83632 45.2218 4.85094L43.1576 8.09477L45.3103 11.4555C45.3251 11.4847 45.3398 11.5139 45.3398 11.5432C45.3251 11.6016 45.2661 11.6455 45.1924 11.6455Z" fill="white"/>
+<path d="M25.5821 4.69055C25.5083 4.69055 25.4494 4.73439 25.4346 4.80745L24.0634 9.84854C24.0486 9.95082 24.0191 9.99466 23.9307 9.99466C23.8422 9.99466 23.8127 9.95082 23.798 9.84854L22.4267 4.80745C22.412 4.73439 22.353 4.69055 22.2793 4.69055H20.9228C20.8785 4.69055 20.8343 4.70516 20.8048 4.749C20.7753 4.77822 20.7606 4.82206 20.7753 4.86589C20.7753 4.86589 22.4562 10.6522 22.4709 10.7106C22.6921 11.3974 23.2377 11.7335 23.9307 11.7335C24.5942 11.7627 25.1987 11.3389 25.3904 10.7106C25.4199 10.6376 27.0565 4.86589 27.0565 4.86589C27.0713 4.82206 27.0565 4.77822 27.027 4.749C26.9975 4.71978 26.9533 4.69055 26.9091 4.69055H25.5821Z" fill="white"/>
+<path d="M17.9149 0H3.80428C3.28822 0 2.81639 0.277625 2.56573 0.70137C2.30033 1.13973 2.28559 1.68037 2.5215 2.11872L3.93698 4.77808H1.37142C1.04704 4.77808 0.737403 4.93881 0.560467 5.21644C0.383532 5.49406 0.383532 5.84475 0.530978 6.13699L5.07231 14.6411C5.2345 14.9479 5.55889 15.1379 5.89801 15.1379C6.23714 15.1379 6.56152 14.9479 6.72371 14.6411L7.96225 12.3324L9.51044 15.2402C9.7611 15.7078 10.2624 16 10.7932 16C11.324 16 11.8253 15.7078 12.076 15.2402L19.1534 2.04566C19.3893 1.60731 19.3746 1.08128 19.1092 0.672146C18.8733 0.248402 18.4014 0 17.9149 0ZM11.6042 5.56712L8.5078 11.3242C8.40459 11.5288 8.19817 11.6457 7.96225 11.6457C7.72634 11.6457 7.51992 11.5142 7.4167 11.3242L4.36457 5.62557C4.27611 5.45023 4.27611 5.24566 4.37932 5.07032C4.48253 4.89498 4.67421 4.79269 4.86589 4.79269H11.1176C11.3093 4.79269 11.4862 4.88036 11.5747 5.0411C11.6926 5.20183 11.6926 5.40639 11.6042 5.56712Z" fill="white"/>
+</svg>
--- a/Vitor-Soares-main/src/components/icons/vtex-pci-200.svg
+++ b/Vitor-Soares-main/src/components/icons/vtex-pci-200.svg
@ -0,0 +1,9 @@
+<svg width="107" height="67" viewBox="0 0 107 67" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.415771" y="0.241211" width="106" height="66" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_7089_434" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
+</pattern>
+<image id="image0_7089_434" width="200" height="126" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
--- a/Vitor-Soares-main/src/custom.d.ts
+++ b/Vitor-Soares-main/src/custom.d.ts
@ -0,0 +1,8 @@
+declare module "*.svg" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content as string;
+}
+declare module "*.png" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content as string;
+}
--- a/Vitor-Soares-main/src/index.scss
+++ b/Vitor-Soares-main/src/index.scss
@ -0,0 +1,44 @@
+@import "./styles/index.scss";
+
+html {
+  font-size: 62.5%;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  color: inherit;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  position: relative;
+  overflow-x: hidden;
+}
+
+.main {
+  padding: 29px $large-padding-inline;
+
+  @media screen {
+    @media (max-width: 1024px) {
+      padding: 29px $big-padding-inline;
+    }
+  }
+}
+
+button {
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+*:focus-visible {
+  outline: solid 1px blue;
+}
--- a/Vitor-Soares-main/src/index.tsx
+++ b/Vitor-Soares-main/src/index.tsx
@ -0,0 +1,7 @@
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.scss";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <App />
+);
--- a/Vitor-Soares-main/src/routes/Institucional/Institucional.tsx
+++ b/Vitor-Soares-main/src/routes/Institucional/Institucional.tsx
@ -0,0 +1,11 @@
+import { FormContainer } from "../../components/FormContainer";
+import "./index.scss";
+
+export function Institucional() {
+  return (
+    <section className="institucional">
+      <h1>INSTITUCIONAL</h1>
+      <FormContainer />
+    </section>
+  );
+}
--- a/Vitor-Soares-main/src/routes/Institucional/index.scss
+++ b/Vitor-Soares-main/src/routes/Institucional/index.scss
@ -0,0 +1,27 @@
+@import "../../styles/index.scss";
+
+.institucional {
+  h1 {
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: $text-cl-2;
+    text-align: center;
+    margin-bottom: 80px;
+    @include large-font-7;
+  }
+
+  @media screen {
+    @media (max-width: 2499px) {
+      h1 {
+        @include large-font-2;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      h1 {
+        margin-bottom: 40px;
+      }
+    }
+  }
+}
--- a/Vitor-Soares-main/src/styles/colors.scss
+++ b/Vitor-Soares-main/src/styles/colors.scss
@ -0,0 +1,18 @@
+$panel-bg-1: #000;
+$page-bg-1: #ffe2e2;
+$overlay-bg: rgba(69, 69, 69, 0.7);
+
+$text-cl-1: #fff;
+$text-cl-2: #292929;
+$text-cl-3: #7d7d7d;
+$text-cl-4: #303030;
+$text-cl-5: #c4c4c4;
+$text-cl-6: #100d0e;
+$text-cl-7: #b9b7b7;
+$text-cl-8: #ff0000;
+$text-cl-9: #008000;
+
+$border-cl-1: #100d0e;
+$border-cl-2: rgba(196, 196, 196, 0.5);
+$border-cl-3: #f0f0f0;
+$border-cl-4: #e5e5e5;
--- a/Vitor-Soares-main/src/styles/index.scss
+++ b/Vitor-Soares-main/src/styles/index.scss
@ -0,0 +1 @@
+@import "colors.scss", "mixins.scss", "spacing.scss";
--- a/Vitor-Soares-main/src/styles/mixins.scss
+++ b/Vitor-Soares-main/src/styles/mixins.scss
@ -0,0 +1,122 @@
+@mixin large-font-1 {
+  font-size: 20px;
+  line-height: 23px;
+}
+
+@mixin large-font-2 {
+  font-size: 24px;
+  line-height: 28px;
+}
+
+@mixin large-font-3 {
+  font-size: 26px;
+  line-height: 30px;
+}
+
+@mixin large-font-4 {
+  font-size: 28px;
+  line-height: 33px;
+}
+
+@mixin large-font-5 {
+  font-size: 32px;
+  line-height: 38px;
+}
+
+@mixin large-font-6 {
+  font-size: 36px;
+  line-height: 42px;
+}
+
+@mixin large-font-7 {
+  font-size: 48px;
+  line-height: 56px;
+}
+
+//----------------
+@mixin big-font-1 {
+  font-size: 10px;
+  line-height: 12px;
+}
+@mixin big-font-2 {
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@mixin big-font-3 {
+  font-size: 13px;
+  line-height: 15px;
+}
+
+@mixin big-font-4 {
+  font-size: 14px;
+  line-height: 16px;
+}
+
+@mixin big-font-5 {
+  font-size: 16px;
+  line-height: 19px;
+}
+
+@mixin big-font-6 {
+  font-size: 18px;
+  line-height: 21px;
+}
+
+//----------------
+@mixin small-font1 {
+  font-size: 12px;
+  line-height: 18px;
+}
+//----------------
+@mixin global-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin reset-border-background-outline {
+  border: none;
+  background: none;
+  // outline: none;
+}
+
+@mixin button-reset {
+  button {
+    @include reset-border-background-outline();
+    cursor: pointer;
+  }
+}
+
+//----------------------------------------------------------------
+@mixin center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin black-btn {
+  @include reset-border-background-outline();
+  color: white;
+  background: #000;
+  border-radius: 4px;
+  text-transform: uppercase;
+  text-align: center;
+  padding: 14px 20px;
+}
+
+@mixin hide {
+  opacity: 0;
+  visibility: 0;
+  pointer-events: none;
+}
+
+@mixin visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
--- a/Vitor-Soares-main/src/styles/spacing.scss
+++ b/Vitor-Soares-main/src/styles/spacing.scss
@ -0,0 +1,2 @@
+$large-padding-inline: 100px;
+$big-padding-inline: 16px;
--- a/Vitor-Soares-main/tsconfig.json
+++ b/Vitor-Soares-main/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "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", "src/custom.d.ts"]
+}
--- a/Vitor-Soares-main/tsconfig.node.json
+++ b/Vitor-Soares-main/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
				`@ -0,0 +1 @@`
				`@import "colors.scss", "mixins.scss", "spacing.scss";`