Skip to content

Commit 4a97bba

Browse files
mattolivrmattolivr
committed
2-DR1-TP3.15
1 parent 3a87f45 commit 4a97bba

File tree

3 files changed

+226
-97
lines changed

3 files changed

+226
-97
lines changed

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/App.jsx‎

Lines changed: 2 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import './global.css';
22
import './styles.css';
33
import './App.css';
44
import Menu from './components/Menu/Menu';
5-
import Hero from './components/Hero/Hero';
5+
import Main from './components/Main/Main';
66

77
function App() {
88
return (
@@ -15,102 +15,7 @@ function App() {
1515
</header>
1616

1717
<Menu />
18-
19-
<Hero />
20-
21-
<main className="app-main">
22-
<div className="container">
23-
<section id="sobre" className="app-section">
24-
<div className="card">
25-
<h2>Sobre o Projeto</h2>
26-
<p>
27-
Este projeto demonstra o uso de estilos globais combinados com estilos
28-
escopados para o componente App. Utiliza uma paleta de cores inspirada
29-
no LinkedIn e GitHub.
30-
</p>
31-
<p>
32-
As classes com prefixo <code>app-</code> são específicas deste componente
33-
e definidas no arquivo <code>styles.css</code>.
34-
</p>
35-
</div>
36-
</section>
37-
38-
<section id="recursos" className="app-section">
39-
<h2>Recursos Principais</h2>
40-
<div className="app-grid">
41-
<div className="card">
42-
<h3>Design Responsivo</h3>
43-
<p>Layout adaptável para mobile, tablet e desktop com grid system</p>
44-
</div>
45-
<div className="card">
46-
<h3>Tema Escuro</h3>
47-
<p>Paleta de cores profissional inspirada no LinkedIn e GitHub</p>
48-
</div>
49-
<div className="card">
50-
<h3>Componentização</h3>
51-
<p>Estilos globais e escopados trabalhando em conjunto</p>
52-
</div>
53-
</div>
54-
</section>
55-
56-
<section id="tecnologias" className="app-section">
57-
<div className="card">
58-
<h2>Tecnologias Utilizadas</h2>
59-
<ul className="app-list">
60-
<li><code>React 18+</code> - Biblioteca JavaScript para interfaces</li>
61-
<li><code>Vite</code> - Build tool moderna e rápida</li>
62-
<li><code>CSS Variables</code> - Customização dinâmica de temas</li>
63-
<li><code>Mobile-First</code> - Abordagem responsiva progressiva</li>
64-
</ul>
65-
</div>
66-
</section>
67-
68-
<section id="contato" className="app-section">
69-
<div className="card">
70-
<h2>Formulário de Contato</h2>
71-
<form className="app-form">
72-
<div className="app-form-group">
73-
<label htmlFor="nome">Nome Completo:</label>
74-
<input
75-
type="text"
76-
id="nome"
77-
placeholder="Seu nome completo"
78-
/>
79-
</div>
80-
81-
<div className="app-form-group">
82-
<label htmlFor="email">E-mail:</label>
83-
<input
84-
type="email"
85-
id="email"
86-
placeholder="seu@email.com"
87-
/>
88-
</div>
89-
90-
<div className="app-form-group">
91-
<label htmlFor="mensagem">Mensagem:</label>
92-
<textarea
93-
id="mensagem"
94-
placeholder="Escreva sua mensagem aqui..."
95-
/>
96-
</div>
97-
98-
<div className="app-button-group">
99-
<button type="submit" className="primary">
100-
Enviar Mensagem
101-
</button>
102-
<button type="button">
103-
Limpar Formulário
104-
</button>
105-
<button type="button" className="success">
106-
Salvar Rascunho
107-
</button>
108-
</div>
109-
</form>
110-
</div>
111-
</section>
112-
</div>
113-
</main>
18+
<Main />
11419

11520
<footer className="app-footer">
11621
<div className="container">

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Main/Main.jsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import './main.css';
2+
import Hero from '../Hero/Hero';
3+
4+
function Main() {
5+
return (
6+
<main className="main">
7+
<Hero />
8+
9+
<div className="main-container">
10+
<section id="sobre" className="main-section">
11+
<div className="card">
12+
<h2>Sobre o Projeto</h2>
13+
<p>
14+
Este projeto demonstra o uso de estilos globais combinados com estilos
15+
escopados para componentes React. Utiliza uma paleta de cores inspirada
16+
no LinkedIn e GitHub.
17+
</p>
18+
<p>
19+
As classes com prefixo <code>app-</code> são específicas do componente App,
20+
enquanto classes com prefixo <code>main-</code> pertencem ao componente Main,
21+
demonstrando a organização e escopo de estilos.
22+
</p>
23+
</div>
24+
</section>
25+
26+
<section id="recursos" className="main-section">
27+
<h2>Recursos Principais</h2>
28+
<div className="main-grid">
29+
<div className="card">
30+
<h3>Design Responsivo</h3>
31+
<p>Layout adaptável para mobile, tablet e desktop com grid system</p>
32+
</div>
33+
<div className="card">
34+
<h3>Tema Escuro</h3>
35+
<p>Paleta de cores profissional inspirada no LinkedIn e GitHub</p>
36+
</div>
37+
<div className="card">
38+
<h3>Componentização</h3>
39+
<p>Estilos globais e escopados trabalhando em conjunto</p>
40+
</div>
41+
</div>
42+
</section>
43+
44+
<section id="tecnologias" className="main-section">
45+
<div className="card">
46+
<h2>Tecnologias Utilizadas</h2>
47+
<ul className="main-list">
48+
<li><code>React 18+</code> - Biblioteca JavaScript para interfaces</li>
49+
<li><code>Vite</code> - Build tool moderna e rápida</li>
50+
<li><code>CSS Variables</code> - Customização dinâmica de temas</li>
51+
<li><code>Mobile-First</code> - Abordagem responsiva progressiva</li>
52+
</ul>
53+
</div>
54+
</section>
55+
56+
<section id="contato" className="main-section">
57+
<div className="card">
58+
<h2>Formulário de Contato</h2>
59+
<form className="main-form">
60+
<div className="main-form-group">
61+
<label htmlFor="nome">Nome Completo:</label>
62+
<input
63+
type="text"
64+
id="nome"
65+
placeholder="Seu nome completo"
66+
/>
67+
</div>
68+
69+
<div className="main-form-group">
70+
<label htmlFor="email">E-mail:</label>
71+
<input
72+
type="email"
73+
id="email"
74+
placeholder="seu@email.com"
75+
/>
76+
</div>
77+
78+
<div className="main-form-group">
79+
<label htmlFor="mensagem">Mensagem:</label>
80+
<textarea
81+
id="mensagem"
82+
placeholder="Escreva sua mensagem aqui..."
83+
/>
84+
</div>
85+
86+
<div className="main-button-group">
87+
<button type="submit" className="primary">
88+
Enviar Mensagem
89+
</button>
90+
<button type="button">
91+
Limpar Formulário
92+
</button>
93+
<button type="button" className="success">
94+
Salvar Rascunho
95+
</button>
96+
</div>
97+
</form>
98+
</div>
99+
</section>
100+
</div>
101+
</main>
102+
);
103+
}
104+
105+
export default Main;

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Main/main.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/* Estilos do componente Main */
2+
3+
.main {
4+
flex: 1;
5+
display: flex;
6+
flex-direction: column;
7+
}
8+
9+
.main-container {
10+
max-width: 1128px;
11+
margin: 0 auto;
12+
padding: 32px 24px;
13+
width: 100%;
14+
}
15+
16+
.main-section {
17+
margin-bottom: 32px;
18+
}
19+
20+
.main-section h2 {
21+
border-bottom: 2px solid var(--accent-primary);
22+
padding-bottom: 12px;
23+
margin-bottom: 20px;
24+
font-size: 1.75rem;
25+
}
26+
27+
.main-grid {
28+
display: grid;
29+
grid-template-columns: 1fr;
30+
gap: 16px;
31+
}
32+
33+
.main-form {
34+
display: flex;
35+
flex-direction: column;
36+
gap: 16px;
37+
margin-top: 20px;
38+
}
39+
40+
.main-form-group {
41+
display: flex;
42+
flex-direction: column;
43+
gap: 8px;
44+
}
45+
46+
.main-form-group label {
47+
color: var(--text-primary);
48+
font-weight: 500;
49+
font-size: 14px;
50+
}
51+
52+
.main-form-group input,
53+
.main-form-group textarea {
54+
width: 100%;
55+
}
56+
57+
.main-form-group textarea {
58+
min-height: 120px;
59+
resize: vertical;
60+
}
61+
62+
.main-button-group {
63+
display: flex;
64+
gap: 12px;
65+
flex-wrap: wrap;
66+
}
67+
68+
.main-list {
69+
list-style: none;
70+
padding: 0;
71+
margin: 16px 0;
72+
}
73+
74+
.main-list li {
75+
padding: 12px 16px;
76+
margin-bottom: 10px;
77+
background-color: var(--bg-tertiary);
78+
border-radius: 8px;
79+
border-left: 3px solid var(--accent-primary);
80+
transition: all 0.2s;
81+
}
82+
83+
.main-list li:hover {
84+
background-color: var(--bg-secondary);
85+
border-left-width: 4px;
86+
padding-left: 15px;
87+
}
88+
89+
/* Media queries para responsividade */
90+
@media (min-width: 576px) {
91+
.main-container {
92+
padding: 40px 24px;
93+
}
94+
95+
.main-section {
96+
margin-bottom: 40px;
97+
}
98+
}
99+
100+
@media (min-width: 768px) {
101+
.main-grid {
102+
grid-template-columns: repeat(2, 1fr);
103+
}
104+
}
105+
106+
@media (min-width: 992px) {
107+
.main-container {
108+
padding: 48px 24px;
109+
}
110+
111+
.main-grid {
112+
grid-template-columns: repeat(3, 1fr);
113+
gap: 20px;
114+
}
115+
116+
.main-button-group {
117+
flex-wrap: nowrap;
118+
}
119+
}

0 commit comments

Comments
 (0)