Skip to content

Commit 821200f

Browse files
andradenathanandradenathan
authored
Merge pull request #33 from caronae/feature/cae-90
[CAE-90] Criado ConhecaFrentes
2 parents f4efe5a + 50a2733 commit 821200f

File tree

6 files changed

+199
-0
lines changed

6 files changed

+199
-0
lines changed

‎src/assets/imagem-azul-desenvolvimento.png

17.1 KB
Loading

‎src/assets/imagem-verde-dados.png

10.7 KB
Loading

‎src/assets/imagem-vermelho-comunicacao.png

19.8 KB
Loading

‎src/components/ConhecaFrentes/index.jsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import './styles.css';
2+
import boycoding from '../../assets/imagem-azul-desenvolvimento.png';
3+
import girl from '../../assets/imagem-verde-dados.png';
4+
import telefone from '../../assets/imagem-vermelho-comunicacao.png';
5+
6+
export default function ConhecaFrentes() {
7+
return (
8+
<div className="conhecaFrentes">
9+
<div className="textoPrincipal_bluebox">
10+
<div className="texto">
11+
<h2 className="tituloPrincipal">
12+
Conheça as frentes <br />
13+
do Caronaê
14+
</h2>
15+
<p>
16+
Os membros do projeto de extensão Caronaê atuam em três
17+
frentes principais: desenvolvimento, comunicação e dados.
18+
Conheça elas ao lado.
19+
</p>
20+
</div>
21+
<div className="caixaAzul">
22+
<div className="textoAzul">
23+
<h2>Desenvolvimento</h2>
24+
<p>
25+
A equipe de desenvolvimento trabalha para garantir um
26+
aplicativo de qualidade e com uma experiência de
27+
usuário agradável.
28+
</p>
29+
</div>
30+
<img src={boycoding} alt="boy coding" />
31+
</div>
32+
</div>
33+
<div className="redBox_greenBox">
34+
<div className="redBox">
35+
<div className="textoVermelho">
36+
<h2>Comunicação</h2>
37+
<p>
38+
Já a equipe de comunicação se dedica a disseminar
39+
informações sobre o projeto e conscientizar a população
40+
sobre a importância das caronas para a
41+
sustentabilidade.
42+
</p>
43+
</div>
44+
<img src={telefone} alt="Telefone" />
45+
</div>
46+
47+
<div className="greenBox">
48+
<div className="textoVerde">
49+
<h2>Dados</h2>
50+
<p>
51+
Por fim, a equipe de dados é responsável por coletar e
52+
analisar informações relevantes para aprimorar o
53+
projeto e torná-lo cada vez mais eficiente.
54+
</p>
55+
</div>
56+
<img src={girl} alt="Girl" className="fotoVerde" />
57+
</div>
58+
</div>
59+
</div>
60+
);
61+
}

‎src/components/ConhecaFrentes/styles.css

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@600&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
3+
4+
5+
.conhecaFrentes{
6+
width: 1159px;
7+
height: 532px;
8+
justify-content: center;
9+
position: relative;
10+
margin: 0 auto;
11+
12+
}
13+
14+
.tituloPrincipal{
15+
font-family: 'Poppins', sans-serif;
16+
font-weight: 600;
17+
font-style: normal;
18+
}
19+
20+
.texto{
21+
margin-right: 30px;
22+
width: 380px;
23+
height: 194px;
24+
}
25+
26+
.textoPrincipal_bluebox{
27+
width: 1157px;
28+
height: 250px;
29+
display: flex;
30+
}
31+
32+
.textoPrincipal > p {
33+
font-family: 'Lato', sans-serif;
34+
font-weight: 400;
35+
font-style: normal
36+
}
37+
38+
.caixaAzul{
39+
display: flex;
40+
width: 749px;
41+
height: 250px;
42+
background-color:#2B388A ;
43+
border-radius: 25px;
44+
}
45+
46+
.textoAzul{
47+
width: 358px;
48+
height: 250px;
49+
margin-top: 40px;
50+
margin-left: 26px;
51+
}
52+
53+
.textoAzul > p{
54+
color:white;
55+
font-family: 'Lato', sans-serif;
56+
font-weight: 400;
57+
font-style: normal
58+
}
59+
60+
.textoAzul > h2{
61+
color: white;
62+
font-family: 'Poppins', sans-serif;
63+
font-weight: 600;
64+
font-style: normal;
65+
66+
}
67+
68+
.redBox_greenBox{
69+
width: 1159px;
70+
height: 250px;
71+
display: flex;
72+
margin-top: 32px;
73+
}
74+
75+
.redBox{
76+
width: 663px;
77+
height: 250px;
78+
background-color: #EB3D38;
79+
border-radius: 25px;
80+
display: flex;
81+
}
82+
83+
.textoVermelho{
84+
width: 310px;
85+
height: 200px;
86+
margin-top: 40px;
87+
margin-left: 26px;
88+
}
89+
.textoVermelho > h2{
90+
color: white;
91+
font-family: 'Poppins', sans-serif;
92+
font-weight: 600;
93+
font-style: normal;
94+
}
95+
96+
.textoVermelho> p{
97+
color:white;
98+
font-family: 'Lato', sans-serif;
99+
font-weight: 400;
100+
font-style: normal
101+
}
102+
103+
.greenBox{
104+
width: 465px;
105+
height: 250px;
106+
margin-left: 30px;
107+
background-color: #17B270;
108+
border-radius: 25px;
109+
display: flex;
110+
}
111+
112+
.textoVerde{
113+
width: 233px;
114+
height: 151px;
115+
margin-top: 40px;
116+
margin-left: 26px;
117+
118+
}
119+
120+
.textoVerde > h2{
121+
color: white;
122+
font-family: 'Poppins', sans-serif;
123+
font-weight: 600;
124+
font-style: normal;
125+
}
126+
127+
.textoVerde > p{
128+
color:white;
129+
font-family: 'Lato', sans-serif;
130+
font-weight: 400;
131+
font-style: normal
132+
}
133+
134+
.fotoVerde{
135+
border-bottom-right-radius: 25px;
136+
}

‎src/pages/About/index.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import ConhecaFrentes from '../../components/ConhecaFrentes';
12
import ConhecaProjeto from '../../components/ConhecaProjeto';
23
import EquipeCaronae from '../../components/EquipeCaronae';
34
import Footer from '../../components/Footer';
@@ -11,6 +12,7 @@ const About = () => {
1112
<Navbar />
1213
<ConhecaProjeto/>
1314
<RazaoTudo />
15+
<ConhecaFrentes/>
1416
<SeInteressouPeloProjeto/>
1517
<EquipeCaronae/>
1618
<Footer/>;

0 commit comments

Comments
 (0)