projeto finalizado

This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-18 03:58:30 -03:00
parent b416c90c05
commit 0dbd60e986
16 changed files with 206 additions and 50 deletions

View File

@ -23,6 +23,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"react-tabs": "^6.0.0",
"sass-loader": "^13.2.0",
"styled-components": "^5.3.6",
"typescript": "^4.9.4",
@ -5789,6 +5790,14 @@
"wrap-ansi": "^7.0.0"
}
},
"node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"engines": {
"node": ">=6"
}
},
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@ -15410,6 +15419,18 @@
}
}
},
"node_modules/react-tabs": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz",
"integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==",
"dependencies": {
"clsx": "^1.1.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": "^18.0.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -22867,6 +22888,11 @@
"wrap-ansi": "^7.0.0"
}
},
"clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
},
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@ -29689,6 +29715,15 @@
}
}
},
"react-tabs": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz",
"integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==",
"requires": {
"clsx": "^1.1.0",
"prop-types": "^15.5.0"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

View File

@ -18,6 +18,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"react-tabs": "^6.0.0",
"sass-loader": "^13.2.0",
"styled-components": "^5.3.6",
"typescript": "^4.9.4",

View File

@ -1,18 +0,0 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7347_1108)">
<circle cx="17.5" cy="17.5" r="16.5" stroke="#303030" stroke-width="2"/>
<g clip-path="url(#clip1_7347_1108)">
<path d="M13.4445 13.8592H10.298C10.1583 13.8592 10.0452 13.9724 10.0452 14.112V24.2205C10.0452 24.3602 10.1583 24.4733 10.298 24.4733H13.4445C13.5842 24.4733 13.6973 24.3602 13.6973 24.2205V14.112C13.6973 13.9724 13.5842 13.8592 13.4445 13.8592Z" fill="#303030"/>
<path d="M11.8725 8.83395C10.7276 8.83395 9.79614 9.76438 9.79614 10.908C9.79614 12.0522 10.7276 12.9829 11.8725 12.9829C13.0165 12.9829 13.9472 12.0521 13.9472 10.908C13.9472 9.76438 13.0165 8.83395 11.8725 8.83395Z" fill="#303030"/>
<path d="M21.4482 13.6079C20.1844 13.6079 19.2502 14.1512 18.6835 14.7685V14.112C18.6835 13.9724 18.5704 13.8592 18.4307 13.8592H15.4174C15.2777 13.8592 15.1646 13.9724 15.1646 14.112V24.2206C15.1646 24.3602 15.2777 24.4734 15.4174 24.4734H18.557C18.6967 24.4734 18.8098 24.3602 18.8098 24.2206V19.2192C18.8098 17.5338 19.2676 16.8772 20.4425 16.8772C21.722 16.8772 21.8236 17.9298 21.8236 19.3059V24.2206C21.8236 24.3603 21.9368 24.4734 22.0764 24.4734H25.2173C25.3569 24.4734 25.4701 24.3603 25.4701 24.2206V18.6759C25.4701 16.1698 24.9922 13.6079 21.4482 13.6079Z" fill="#303030"/>
</g>
</g>
<defs>
<clipPath id="clip0_7347_1108">
<rect width="35" height="35" fill="white"/>
</clipPath>
<clipPath id="clip1_7347_1108">
<rect width="15.6739" height="15.6739" fill="white" transform="translate(9.79614 8.81671)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,3 @@
<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6 6.13647C12.5989 6.24898 12.5519 6.36118 12.4588 6.44888L12.4587 6.44902C12.2574 6.63896 11.9216 6.63894 11.7204 6.44903L11.7204 6.44902L6.7744 1.78259L6.4999 1.5236L6.2254 1.78259L1.27968 6.44882C1.27966 6.44884 1.27964 6.44886 1.27962 6.44888C1.07811 6.63886 0.742449 6.63877 0.541181 6.44888L0.541122 6.44882C0.448342 6.36133 0.401297 6.24944 0.400026 6.13719C0.401078 6.02468 0.448119 5.91242 0.541189 5.82462L0.541192 5.82461L6.13082 0.550956C6.13085 0.550933 6.13087 0.55091 6.13089 0.550887C6.22923 0.458193 6.36162 0.408533 6.49988 0.408533C6.63821 0.408533 6.77079 0.458327 6.86907 0.55102C6.86908 0.551029 6.86909 0.551037 6.8691 0.551047L12.4587 5.82475L12.4588 5.82482C12.5516 5.9124 12.5987 6.02428 12.6 6.13647Z" fill="white" stroke="white" stroke-width="0.8"/>
</svg>

After

Width:  |  Height:  |  Size: 891 B

View File

@ -0,0 +1,3 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8962 17.0061C19.486 18.1642 17.8583 19.1247 16.5599 19.4052C15.6717 19.5944 14.5114 19.7452 10.6057 18.126C5.6098 16.0562 2.39255 10.9796 2.1418 10.6502C1.90167 10.3209 0.123047 7.96211 0.123047 5.52261C0.123047 3.08311 1.36192 1.89524 1.8613 1.38524C2.27142 0.96661 2.9493 0.77536 3.59955 0.77536C3.80992 0.77536 3.99905 0.785985 4.16905 0.794485C4.66842 0.815735 4.91917 0.845486 5.24855 1.63386C5.65867 2.62199 6.65742 5.06149 6.77642 5.31224C6.89755 5.56299 7.01867 5.90299 6.84867 6.23236C6.6893 6.57236 6.54905 6.72323 6.2983 7.01223C6.04755 7.30124 5.80955 7.52224 5.5588 7.83249C5.3293 8.10236 5.07005 8.39136 5.35905 8.89074C5.64805 9.37949 6.6468 11.0094 8.1173 12.3184C10.0149 14.0077 11.5534 14.5475 12.1038 14.777C12.5139 14.947 13.0027 14.9066 13.3023 14.5879C13.6827 14.1777 14.1523 13.4977 14.6304 12.8284C14.9704 12.3481 15.3997 12.2886 15.8502 12.4586C16.3092 12.618 18.738 13.8186 19.2374 14.0672C19.7368 14.318 20.0662 14.437 20.1873 14.6474C20.3063 14.8577 20.3063 15.8459 19.8962 17.0061Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,3 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.0042 0H16.9958C7.62238 0 0 7.6245 0 17C0 20.7188 1.1985 24.1655 3.23638 26.9641L1.11775 33.2796L7.65213 31.1908C10.3403 32.9715 13.5469 34 17.0042 34C26.3776 34 34 26.3734 34 17C34 7.62663 26.3776 0 17.0042 0Z" fill="#4CAF50"/>
</svg>

After

Width:  |  Height:  |  Size: 344 B

View File

@ -0,0 +1,11 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3715_5917)">
<path d="M17.0042 0H16.9958C7.62238 0 0 7.6245 0 17C0 20.7188 1.1985 24.1655 3.23638 26.9641L1.11775 33.2796L7.65213 31.1908C10.3403 32.9715 13.5469 34 17.0042 34C26.3776 34 34 26.3734 34 17C34 7.62663 26.3776 0 17.0042 0Z" fill="#4CAF50"/>
<path d="M26.8962 24.0061C26.486 25.1642 24.8583 26.1247 23.5599 26.4052C22.6717 26.5944 21.5114 26.7452 17.6057 25.126C12.6098 23.0562 9.39255 17.9796 9.1418 17.6502C8.90167 17.3209 7.12305 14.9621 7.12305 12.5226C7.12305 10.0831 8.36192 8.89524 8.8613 8.38524C9.27142 7.96661 9.9493 7.77536 10.5995 7.77536C10.8099 7.77536 10.999 7.78599 11.169 7.79449C11.6684 7.81574 11.9192 7.84549 12.2485 8.63386C12.6587 9.62199 13.6574 12.0615 13.7764 12.3122C13.8975 12.563 14.0187 12.903 13.8487 13.2324C13.6893 13.5724 13.549 13.7232 13.2983 14.0122C13.0475 14.3012 12.8095 14.5222 12.5588 14.8325C12.3293 15.1024 12.07 15.3914 12.359 15.8907C12.648 16.3795 13.6468 18.0094 15.1173 19.3184C17.0149 21.0077 18.5534 21.5475 19.1038 21.777C19.5139 21.947 20.0027 21.9066 20.3023 21.5879C20.6827 21.1777 21.1523 20.4977 21.6304 19.8284C21.9704 19.3481 22.3997 19.2886 22.8502 19.4586C23.3092 19.618 25.738 20.8186 26.2374 21.0672C26.7368 21.318 27.0662 21.437 27.1873 21.6474C27.3063 21.8577 27.3063 22.8459 26.8962 24.0061Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3715_5917">
<rect width="34" height="34" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,5 +1,25 @@
@import "../utils/Variables.scss";
.footer{
&_btn{
position: fixed;
bottom: 195px;
right: 1.25%;
background: $-gray-300;
width: 34px;
height: 34px;
border-radius: 50%;
img{
width: 38.24%;
}
&[datatype=btnzap]{
bottom: 235px;
background: transparent;
img{
width: 100%;
}
}
}
&_wrapper{
display: flex;
border-top: 1px solid $-black;
@ -94,7 +114,10 @@
text-transform: uppercase;
color: $-black-3030;
}
button{
min-width: 16px;
min-height: 16px;
}
}
ul{
height: 100%;
@ -246,6 +269,9 @@
display: flex !important;
}
.footer{
&_btn{
display: none;
}
&_wrapper{
&_Form{
width: 100%;
@ -394,6 +420,14 @@
@media screen and (min-width: 2500px){
.footer{
&_btn{
bottom: 245px;
width: 66px;
height: 66px;
&[datatype=btnzap]{
bottom: 320px
}
}
&_wrapper{
&_Form{
width: 37.399%;

View File

@ -11,8 +11,11 @@
.btn{
&_open{
background: $-black;
color: $-white !important;
font-weight: 700 !important;
color: $-white !important;
a{
color: $-white !important;
}
}
}
@ -89,11 +92,19 @@
font-size: 16px;
line-height: 19px;
color: $-gray-bold;
a{
text-decoration: none;
color: $-gray-bold;
}
&:hover{
background: $-black;
color: $-white;
font-weight: 700;
a{
text-decoration: none;
color: $-white;
}
}
}
}

View File

@ -5,7 +5,7 @@ import FooterStyles from "../modules/footer.module.scss"
import { Newsletter } from "./celulas/Newsletter";
import { TopFooter } from "./celulas/FooterTop";
import { BottomFooter } from "./celulas/FooterBottom";
import { BackToTopButton } from "./moleculas/FixedBtn";
const Footer = () =>{
return (
@ -24,6 +24,7 @@ const Footer = () =>{
activeListCLass={FooterStyles.active}
hidenCLass={FooterStyles.hiden}
/>
<BackToTopButton btnsclass={FooterStyles.footer_btn}/>
<BottomFooter Dadclass={FooterStyles.footer_bottom}
wraaperclass={FooterStyles.footer_bottom_wraaper}
Paymentsclass={FooterStyles.footer_bottom_wraaper__Payments}

View File

@ -3,8 +3,7 @@ import { Formik,Form, Field, FormikHelpers } from 'formik';
import { Submenu } from "../../Modal/submenuModal";
import {SubmenuContext} from "../../contexts/SubmenuContext";
import {RouterContext} from "../../contexts/React_Router_context"
import { Link } from "react-router-dom";
import HeaderStyles from "../modules/header.module.scss"
import Logo from '../assets/imgs/Logo.png';
@ -23,8 +22,6 @@ const initialValues = {
const Header = () =>{
const { navigate } = useContext(RouterContext);
// onClick={() => navigate("/Cursos")}
const { isOpened, setisOpened } = useContext(SubmenuContext)
const handleSeacrhFormikSubmit = (values:SearchboxTypes, formik: FormikHelpers<SearchboxTypes>) =>{
formik.resetForm();
@ -35,9 +32,9 @@ const Header = () =>{
<div className={HeaderStyles["Header_wrapper"]}>
<div className={HeaderStyles["Header_wrapper-top"]}>
<fieldset className={HeaderStyles["Header_wrapper-top-logo"]}>
<a href="/">
<Link to="/">
<img src={Logo} alt="Logo" />
</a>
</Link>
</fieldset>
<Formik
initialValues={initialValues}
@ -100,9 +97,27 @@ const Header = () =>{
<div className={HeaderStyles["Header_wrapper-bottom"]}>
<nav className={HeaderStyles["Header_wrapper-bottom-navigator"]}>
<ul>
<li><button onClick={() => navigate("/Cursos")}>CURSOS</button></li>
<li><button>SAIBA MAIS</button></li>
<li><button>INSTITUCIONAIS</button></li>
<li>
<button>
<Link to="/Cursos">
CURSOS
</Link>
</button>
</li>
<li>
<button>
<Link to="/saibamais">
SAIBA MAIS
</Link>
</button>
</li>
<li>
<button>
<Link to="/Institucional">
INSTITUCIONAIS
</Link>
</button>
</li>
</ul>
</nav>
</div>

View File

@ -1,11 +1,20 @@
import React from "react"
import Institucional from "../../pages/Institucional";
import {Routes,Route} from "react-router-dom"
const Main = () => {
return (
<main >
<Institucional />
<Routes>
<Route path="/" element={<Institucional />}/>
<Route path="/saibamais" element={<div><h1>Página desativada</h1></div>}/>
<Route path="/Cursos" element={<div><h1>Em breve os Cursos estarão disponiveis</h1></div>}/>
<Route path="/Institucional/:id" element={<Institucional />}/>
<Route path="/Institucional" element={<Institucional />}/>
<Route path="/Institucional/about" element={<Institucional />}/>
<Route path="/Institucional/contact" element={<Institucional />}/>
</Routes>
</main>
)
};

View File

@ -0,0 +1,28 @@
import React from 'react';
import ArrowUp from "../../assets/icons/Uparrow.svg"
import Zap from "../../assets/icons/Zap.svg"
interface Calsses {
btnsclass?: string;
}
export const BackToTopButton: React.FC<Calsses> = ({btnsclass}) => {
const handleBackToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
let number = "5524999046395"
return (
<>
<button datatype='btnzap' className={btnsclass}>
<a target='_blank' href={`https://wa.me/${number}`}>
<img src={Zap} alt="Subir para o topo da página" />
</a>
</button>
<button onClick={handleBackToTop} className={btnsclass}>
<img src={ArrowUp} alt="Subir para o topo da página" />
</button>
</>
);
}

View File

@ -1,30 +1,32 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Header } from './components/scripts/header';
import { Footer } from './components/scripts/footer';
import {SubmenuProvider} from "./contexts/SubmenuContext";
import Main from "./components/scripts/main";
import {SubmenuProvider} from "./contexts/SubmenuContext"
import {RouterProvider} from "./contexts/React_Router_context"
import {BrowserRouter} from "react-router-dom"
import './components/Main.scss';
import './components/common/global.scss';
import './components/common/resets.scss';
const rootElement = document.getElementById('root');
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<RouterProvider>
<BrowserRouter>
<SubmenuProvider>
<Header />
<Main />
<Footer />
</SubmenuProvider>
</RouterProvider>
</BrowserRouter>
);
} else {
// rootElement não foi encontrado. Talvez seja necessário aguardar o carregamento da página.
}
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

View File

@ -6,6 +6,7 @@ import Homeicon from "../components/assets/icons/home_icon.svg"
import Leftarrow from "../components/assets/icons/Leftarrow.svg"
import MainStyles from "../components/modules/home.module.scss"
import FormShecma from "../schema/FormShecma";
import { Link } from "react-router-dom";
import { Title,BreadcrumbTitle,FormTitle } from "../components/scripts/moleculas/Title"
import { Inputform } from "../components/scripts/celulas/forminput"
@ -83,11 +84,13 @@ const Institucional = () => {
<div className={MainStyles["main_wrapper_contend-main"]}>
<div className={MainStyles["main_wrapper_contend-main-departaments"]}>
<button onClick={() => handleClick("Sobre")}
className={activeSection === "Sobre" ? MainStyles["btn_open"] : MainStyles["btn_close"]}
>
Sobre
</button>
<Link to="/Institucional/sobre">
<button onClick={() => handleClick("Sobre")}
className={activeSection === "Sobre" ? MainStyles["btn_open"] : MainStyles["btn_close"]}
>
Sobre
</button>
</Link>
<button
className={activeSection === "Forma de Pagamento" ? MainStyles["btn_open"] : MainStyles["btn_close"]}
>
@ -108,11 +111,13 @@ const Institucional = () => {
>
Segurança e Privacidade
</button>
<button onClick={() => handleClick("Contato")}
className={activeSection === "Contato" ? MainStyles["btn_open"] : MainStyles["btn_close"]}
>
Contato
</button>
<Link to="/Institucional/contato">
<button onClick={() => handleClick("Contato")}
className={activeSection === "Contato" ? MainStyles["btn_open"] : MainStyles["btn_close"]}
>
Contato
</button>
</Link>
</div>
<div className={MainStyles["main_wrapper_contend-main-section"]}>
<section id={MainStyles["Sobre"]}

View File

@ -3347,6 +3347,11 @@
"strip-ansi" "^6.0.1"
"wrap-ansi" "^7.0.0"
"clsx@^1.1.0":
"integrity" "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
"resolved" "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
"version" "1.2.1"
"co@^4.6.0":
"integrity" "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ=="
"resolved" "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@ -8181,7 +8186,7 @@
"kleur" "^3.0.3"
"sisteransi" "^1.0.5"
"prop-types@^15.8.1":
"prop-types@^15.5.0", "prop-types@^15.8.1":
"integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
"resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
"version" "15.8.1"
@ -8434,6 +8439,14 @@
optionalDependencies:
"fsevents" "^2.3.2"
"react-tabs@^6.0.0":
"integrity" "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ=="
"resolved" "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz"
"version" "6.0.0"
dependencies:
"clsx" "^1.1.0"
"prop-types" "^15.5.0"
"react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.8", "react@>=16.8.0":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"