forked from M3-Academy/desafio-react-e-typescript
feat(institucional): created tab layout
This commit is contained in:
parent
2dd858add1
commit
3190325810
@ -1,6 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
@ -3,17 +3,12 @@ import "./App.css";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import Header from "./components/Header";
|
||||
import NewsLetter from "./components/newsLetter";
|
||||
import Home from "./pages/Home";
|
||||
import Institutional from "./pages/Institutional";
|
||||
import Footer from "./components/Footer";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <Home />,
|
||||
},
|
||||
{
|
||||
path: "/institucional",
|
||||
element: <Institutional />,
|
||||
},
|
||||
]);
|
||||
|
||||
3
src/assets/svg/Arrow.svg
Normal file
3
src/assets/svg/Arrow.svg
Normal file
@ -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.9418 7.03685L2.22543 0.320703C1.79819 -0.106746 1.10549 -0.106746 0.678456 0.320703C0.251387 0.747771 0.251387 1.44043 0.678456 1.86747L6.6214 7.81023L0.678629 13.7528C0.25156 14.18 0.25156 14.8726 0.678629 15.2997C1.1057 15.7269 1.79836 15.7269 2.2256 15.2997L8.94197 8.58344C9.1555 8.3698 9.26215 8.0901 9.26215 7.81026C9.26215 7.53029 9.1553 7.25038 8.9418 7.03685Z" fill="#C4C4C4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 502 B |
3
src/assets/svg/Home.svg
Normal file
3
src/assets/svg/Home.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 855 B |
@ -1,3 +1,119 @@
|
||||
import styles from "./styles.module.scss";
|
||||
import Home from "../../assets/svg/Home.svg";
|
||||
import Arrow from "../../assets/svg/Arrow.svg";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Institutional() {
|
||||
return <div>não</div>;
|
||||
const [currTab, setCurrTab] = useState(0);
|
||||
return (
|
||||
<>
|
||||
<div className={styles.homeDiv}>
|
||||
<img className={styles.home} src={Home} alt="casinha" />
|
||||
<img className={styles.arrow} src={Arrow} alt="seta para direita" />
|
||||
<p className={styles.textHome}>INSTITUCIONAL</p>
|
||||
</div>
|
||||
<h1 className={styles.h1Institucional}>INSTITUCIONAL</h1>
|
||||
<div className={styles.layoutPage}>
|
||||
<div className={styles.buttonDiv}>
|
||||
<button
|
||||
className={`${styles.buttonLayout} ${
|
||||
currTab === 0 ? styles.buttonActive : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCurrTab(0);
|
||||
}}
|
||||
>
|
||||
Sobre
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.buttonLayout} ${
|
||||
currTab === 1 ? styles.buttonActive : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCurrTab(1);
|
||||
}}
|
||||
>
|
||||
Forma de Pagamento
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.buttonLayout} ${
|
||||
currTab === 2 ? styles.buttonActive : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCurrTab(2);
|
||||
}}
|
||||
>
|
||||
Entrega
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.buttonLayout} ${
|
||||
currTab === 3 ? styles.buttonActive : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCurrTab(3);
|
||||
}}
|
||||
>
|
||||
Troca e Devolução
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.buttonLayout} ${
|
||||
currTab === 4 ? styles.buttonActive : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCurrTab(4);
|
||||
}}
|
||||
>
|
||||
Segurança e Privacidade
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.buttonLayout} ${
|
||||
currTab === 5 ? styles.buttonActive : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setCurrTab(5);
|
||||
}}
|
||||
>
|
||||
Contato
|
||||
</button>
|
||||
</div>
|
||||
{currTab !== 5 && (
|
||||
<>
|
||||
<div className={styles.layoutText}>
|
||||
<h2 className={styles.layoutH2}>Sobre</h2>
|
||||
<p className={styles.layoutP}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
|
||||
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.{" "}
|
||||
<br /> <br />
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
|
||||
quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia
|
||||
consequuntur magni dolores eos qui ratione voluptatem sequi
|
||||
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||||
sit amet, consectetur, adipisci velit, sed quia non numquam eius
|
||||
modi tempora incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem. <br /> <br />
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam
|
||||
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
|
||||
consequatur? Quis autem vel eum iure reprehenderit qui in ea
|
||||
voluptate velit esse quam nihil molestiae consequatur, vel illum
|
||||
qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{currTab === 5 && (
|
||||
<>
|
||||
<div>tchau</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
84
src/pages/Institutional/styles.module.scss
Normal file
84
src/pages/Institutional/styles.module.scss
Normal file
@ -0,0 +1,84 @@
|
||||
.homeDiv {
|
||||
display: flex;
|
||||
margin-top: 29px;
|
||||
margin-left: 100px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 81px;
|
||||
|
||||
.home {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.textHome {
|
||||
font-family: "Roboto";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.h1Institucional {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Roboto";
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.layoutPage {
|
||||
display: flex;
|
||||
margin-left: 7.81%;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 70px;
|
||||
|
||||
.layoutText {
|
||||
max-width: 58.44vw;
|
||||
margin-left: 30px;
|
||||
|
||||
.layoutH2 {
|
||||
font-family: "Roboto";
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.layoutP {
|
||||
font-family: "Roboto";
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonDiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 23.59vw;
|
||||
border-right: 1px solid #000000;
|
||||
|
||||
.buttonActive {
|
||||
background: black !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.buttonLayout {
|
||||
border: 0;
|
||||
background: white;
|
||||
font-family: "Roboto";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #7d7d7d;
|
||||
text-align: start;
|
||||
height: 39px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user