diff --git a/desafio-5/package-lock.json b/desafio-5/package-lock.json index 644fe4f..ad35ec3 100644 --- a/desafio-5/package-lock.json +++ b/desafio-5/package-lock.json @@ -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", diff --git a/desafio-5/package.json b/desafio-5/package.json index 60c8bd5..3df83d1 100644 --- a/desafio-5/package.json +++ b/desafio-5/package.json @@ -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", diff --git a/desafio-5/src/components/assets/icons/Svg.svg b/desafio-5/src/components/assets/icons/Svg.svg deleted file mode 100644 index d289af5..0000000 --- a/desafio-5/src/components/assets/icons/Svg.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/desafio-5/src/components/assets/icons/Uparrow.svg b/desafio-5/src/components/assets/icons/Uparrow.svg new file mode 100644 index 0000000..a217195 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Uparrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-5/src/components/assets/icons/Vector-1.svg b/desafio-5/src/components/assets/icons/Vector-1.svg new file mode 100644 index 0000000..7ec90c5 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Vector-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-5/src/components/assets/icons/Vector.svg b/desafio-5/src/components/assets/icons/Vector.svg new file mode 100644 index 0000000..e3c8448 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-5/src/components/assets/icons/Zap.svg b/desafio-5/src/components/assets/icons/Zap.svg new file mode 100644 index 0000000..2c3cd42 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Zap.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio-5/src/components/modules/footer.module.scss b/desafio-5/src/components/modules/footer.module.scss index 13af728..0bf8980 100644 --- a/desafio-5/src/components/modules/footer.module.scss +++ b/desafio-5/src/components/modules/footer.module.scss @@ -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%; diff --git a/desafio-5/src/components/modules/home.module.scss b/desafio-5/src/components/modules/home.module.scss index 56ad1bc..10ac54a 100644 --- a/desafio-5/src/components/modules/home.module.scss +++ b/desafio-5/src/components/modules/home.module.scss @@ -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; + } } } } diff --git a/desafio-5/src/components/scripts/footer.tsx b/desafio-5/src/components/scripts/footer.tsx index 52dd8f2..349847b 100644 --- a/desafio-5/src/components/scripts/footer.tsx +++ b/desafio-5/src/components/scripts/footer.tsx @@ -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} /> + { - const { navigate } = useContext(RouterContext); - // onClick={() => navigate("/Cursos")} const { isOpened, setisOpened } = useContext(SubmenuContext) const handleSeacrhFormikSubmit = (values:SearchboxTypes, formik: FormikHelpers) =>{ formik.resetForm(); @@ -35,9 +32,9 @@ const Header = () =>{
- + Logo - +
{
diff --git a/desafio-5/src/components/scripts/main.tsx b/desafio-5/src/components/scripts/main.tsx index c437e69..8b9cda2 100644 --- a/desafio-5/src/components/scripts/main.tsx +++ b/desafio-5/src/components/scripts/main.tsx @@ -1,11 +1,20 @@ import React from "react" import Institucional from "../../pages/Institucional"; +import {Routes,Route} from "react-router-dom" const Main = () => { return (
- + + }/> +

Página desativada

}/> +

Em breve os Cursos estarão disponiveis

}/> + }/> + }/> + }/> + }/> + ) }; diff --git a/desafio-5/src/components/scripts/moleculas/FixedBtn.tsx b/desafio-5/src/components/scripts/moleculas/FixedBtn.tsx new file mode 100644 index 0000000..6f474ec --- /dev/null +++ b/desafio-5/src/components/scripts/moleculas/FixedBtn.tsx @@ -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 = ({btnsclass}) => { + + const handleBackToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + let number = "5524999046395" + + return ( + <> + + + + ); +} diff --git a/desafio-5/src/index.tsx b/desafio-5/src/index.tsx index 642b782..f1a8909 100644 --- a/desafio-5/src/index.tsx +++ b/desafio-5/src/index.tsx @@ -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( - +