forked from M3-Academy/desafio-react-e-typescript
feat: cria o newsletter da página
This commit is contained in:
parent
b13a5207f3
commit
4ca6b34597
@ -2,42 +2,16 @@
|
||||
<html lang="pt-br">
|
||||
<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>Pagina Institucional</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -19,7 +19,7 @@ const AccordionMenu: React.FC<AccordionMenuProps> = ({ items }) => {
|
||||
{items.map((item, index) => {
|
||||
const active = index === activeIndex;
|
||||
return (
|
||||
<div key={item.title} className={styles.accordionItem}>
|
||||
<div key={item.title}className={styles.accordionItem}>
|
||||
<div
|
||||
className={`${styles.accordionTitle} ${
|
||||
active ? styles.active : ""
|
||||
|
||||
@ -4,20 +4,22 @@ import styles from "../style/HeaderBottom.module.scss";
|
||||
const HeaderBottom = () => {
|
||||
return (
|
||||
<div className={styles.header___wrapper}>
|
||||
<div className={styles.textcontainer}>
|
||||
<a className={styles.textlinks1} href="/">
|
||||
Cursos
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.textcontainer}>
|
||||
<a className={styles.textlinks2} href="/">
|
||||
Saiba Mais
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.textcontainer}>
|
||||
<a className={styles.textlinks3} href="/">
|
||||
Institucionais
|
||||
</a>
|
||||
<div className={styles.headerContainer}>
|
||||
<div className={styles.textcontainer}>
|
||||
<a className={styles.textlinks1} href="/">
|
||||
Cursos
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.textcontainer}>
|
||||
<a className={styles.textlinks2} href="/">
|
||||
Saiba Mais
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.textcontainer}>
|
||||
<a className={styles.textlinks3} href="/">
|
||||
Institucionais
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -6,21 +6,36 @@ const items = [
|
||||
{
|
||||
title: "Sobre",
|
||||
content: (
|
||||
<>
|
||||
<div className="box">
|
||||
<h2>Sobre</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. In
|
||||
laboriosam, eveniet dolor, dolorum fugiat doloremque ab doloribus modi
|
||||
neque vel soluta repudiandae at sequi commodi? Ducimus doloremque
|
||||
nihil eius recusandae?
|
||||
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.{" "}
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. In
|
||||
laboriosam, eveniet dolor, dolorum fugiat doloremque ab doloribus modi
|
||||
neque vel soluta repudiandae at sequi commodi? Ducimus doloremque
|
||||
nihil eius recusandae?
|
||||
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
|
||||
</p>
|
||||
</>
|
||||
<p>
|
||||
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. 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>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
||||
@ -11,7 +11,7 @@ const MenuInfo = () => {
|
||||
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.
|
||||
mollit anim id est laborum.{" "}
|
||||
</p>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
@ -21,6 +21,16 @@ const MenuInfo = () => {
|
||||
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
18
pagina-institucional/src/components/Newsletter.tsx
Normal file
18
pagina-institucional/src/components/Newsletter.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import styles from "../style/Newsletter.module.scss";
|
||||
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.box}>
|
||||
<h3 className={styles.title}>Assine nossa Newsletter</h3>
|
||||
<div>
|
||||
<input className={styles.emailInput} type="email" placeholder="Email" />
|
||||
<button className={styles.btn} type="submit">Enviar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Newsletter };
|
||||
@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom";
|
||||
import { Header } from "../components/Header";
|
||||
import { HeaderBottom } from "../components/HeaderBottom";
|
||||
import { Main } from "../components/Main";
|
||||
import { Newsletter } from "../components/Newsletter";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
@ -11,6 +12,7 @@ const Home = () => {
|
||||
<Header />
|
||||
<HeaderBottom />
|
||||
<Main />
|
||||
<Newsletter />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.accordionTitle {
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
.header___wrapper {
|
||||
display: flex;
|
||||
background: #000;
|
||||
gap: 55px;
|
||||
height: 44px;
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.textlinks1 {
|
||||
margin-left: 125px;
|
||||
.headerContainer {
|
||||
display: flex;
|
||||
gap: 55px;
|
||||
height: 44px;
|
||||
width: 70%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.textlinks1,
|
||||
|
||||
43
pagina-institucional/src/style/Newsletter.module.scss
Normal file
43
pagina-institucional/src/style/Newsletter.module.scss
Normal file
@ -0,0 +1,43 @@
|
||||
.box {
|
||||
margin-top: 131px;
|
||||
border-top: 1px solid #000000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
margin-top: 16;
|
||||
margin-bottom: 8px;
|
||||
color: #303030;
|
||||
}
|
||||
.emailInput {
|
||||
width: 306px;
|
||||
height: 14px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
padding: 13px 16px;
|
||||
}
|
||||
.btn {
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
background: #000000;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user