Skip to content

Commit 8ee467e

Browse files
author
Andre Felipe de Barros Azevedo Nogueira
committed
feat(movi): Improve card layout and responsive grid.
1 parent b5896e6 commit 8ee467e

File tree

4 files changed

+161
-43
lines changed

4 files changed

+161
-43
lines changed

‎src/app/[locale]/movi/movi.module.css‎

Lines changed: 124 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* container geral (mantive suas margens pro sidebar/navbar) */
21
.container {
32
margin-left: 300px; /* espaço pro sidebar */
43
margin-top: 80px; /* espaço pro navbar */
@@ -9,7 +8,14 @@
98
min-height: calc(100vh - 100px);
109
}
1110

12-
/* header opcional */
11+
html {
12+
overflow: hidden;
13+
}
14+
15+
html h2{
16+
color: #ff5252;
17+
}
18+
1319
.header h1 {
1420
margin: 0 0 0.5rem 0;
1521
font-size: 1.6rem;
@@ -18,14 +24,12 @@
1824

1925
.layout {
2026
display: grid;
21-
/* esquerda tem pelo menos 420px e ocupa o espaço restante; direita fica FIXA em 520px */
2227
grid-template-columns: minmax(420px, 1fr) 520px;
2328
gap: 2rem;
2429
align-items: center;
2530
width: 100%;
2631
}
2732

28-
/* cartão esquerdo */
2933
.leftCard {
3034
background: linear-gradient(180deg, rgba(20,20,20,0.85), rgba(26,26,26,0.75));
3135
border-radius: 12px;
@@ -35,23 +39,22 @@
3539
display: flex;
3640
flex-direction: column;
3741
gap: 1rem;
38-
z-index: 0; /* garante que fique acima de fundos */
42+
z-index: 0;
3943
}
4044

41-
/* imagem thumbnail */
4245
.thumbWrap {
4346
border-radius: 8px;
4447
overflow: hidden;
4548
background: #000;
4649
}
47-
.thumbImage {
50+
51+
.thumbIframe {
4852
display: block;
4953
width: 100%;
50-
height: auto;
51-
object-fit: cover;
54+
height: 300px;
55+
border: none;
5256
}
5357

54-
/* meta texto abaixo da imagem */
5558
.meta {
5659
display: flex;
5760
flex-direction: column;
@@ -83,7 +86,6 @@
8386
height: 36px;
8487
border-radius: 8px;
8588
background: rgba(255,255,255,0.06);
86-
color: #fff;
8789
text-decoration: none;
8890
transition: transform 0.12s ease, background 0.12s ease;
8991
}
@@ -114,20 +116,113 @@
114116
display: block;
115117
}
116118

117-
/* grid de cards (inicialmente oculto, aparece em telas menores) */
119+
/* GRID */
118120
.cardGrid {
119-
display: none; /* esconder por padrão (tinha visibility: hidden) */
120-
grid-template-columns: repeat(3, 1fr);
121-
gap: 1rem;
122-
width: 100%;
123-
margin-top: 0.5rem;
121+
display: none;
122+
grid-template-columns: repeat(3, 1fr); /* desktop: 3 colunas */
123+
gap: 1rem;
124+
width: 100%;
125+
margin-top: 0.75rem;
126+
align-items: stretch;
124127
}
128+
129+
/* CARD */
125130
.card {
126-
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
127-
padding: 1rem;
128-
border-radius: 8px;
129-
color: #fff;
130-
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
131+
background: var(--bg-card);
132+
padding: 1.25rem;
133+
border-radius: 12px;
134+
color: #ff5252;
135+
box-shadow: var(--shadow);
136+
border-left: 4px solid transparent;
137+
transition: transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .16s, border-left-color .16s;
138+
display: flex;
139+
flex-direction: column;
140+
gap: 0.75rem;
141+
min-height: 120px;
142+
position: relative;
143+
overflow: hidden;
144+
cursor: default;
145+
outline: none; /* foco gerenciado por :focus-visible */
146+
}
147+
148+
/* hover / focus */
149+
.card:hover,
150+
.card:focus-visible {
151+
transform: translateY(-6px);
152+
box-shadow: 0 18px 40px rgba(0,0,0,0.6);
153+
border-left-color: var(--accent);
154+
}
155+
156+
/* pequeno "shine" decorativo */
157+
.card::after {
158+
content: "";
159+
position: absolute;
160+
inset: 0;
161+
pointer-events: none;
162+
background: linear-gradient(120deg, rgba(255,255,255,0.02), transparent 30%);
163+
opacity: 0;
164+
transition: opacity .2s;
165+
}
166+
.card:hover::after { opacity: 1; }
167+
168+
/* cabeçalho do card */
169+
.cardHead {
170+
display: flex;
171+
align-items: center;
172+
gap: 0.75rem;
173+
}
174+
.iconCard {
175+
width: 36px;
176+
height: 36px;
177+
display: inline-block;
178+
flex: 0 0 36px;
179+
border-radius: 8px;
180+
background: var(--glass);
181+
display: inline-flex;
182+
align-items: center;
183+
justify-content: center;
184+
color: var(--muted);
185+
}
186+
187+
/* título do card */
188+
.cardTitle {
189+
margin: 0;
190+
font-size: 0.92rem;
191+
letter-spacing: 0.6px;
192+
text-transform: uppercase;
193+
color: #ff5252;
194+
}
195+
196+
/* descrição */
197+
.cardDesc {
198+
margin: 0;
199+
font-size: 0.95rem;
200+
color: rgba(255,255,255,0.9);
201+
line-height: 1.35;
202+
}
203+
204+
/* a11y: foco por teclado */
205+
.card:focus-visible {
206+
box-shadow: 0 0 0 3px rgba(255,82,82,0.12), 0 18px 40px rgba(0,0,0,0.6);
207+
border-left-color: var(--accent);
208+
}
209+
210+
/* animação de entrada (staggered) */
211+
@keyframes fadeUp {
212+
from { opacity: 0; transform: translateY(10px); }
213+
to { opacity: 1; transform: translateY(0); }
214+
}
215+
.card {
216+
animation: fadeUp .42s ease both;
217+
}
218+
.card:nth-child(1){ animation-delay: 0s; }
219+
.card:nth-child(2){ animation-delay: .06s; }
220+
.card:nth-child(3){ animation-delay: .12s; }
221+
222+
223+
@media (max-width: 768px) {
224+
.cardGrid { grid-template-columns: 1fr; }
225+
.card { min-height: auto; display: grid;}
131226
}
132227

133228
/* ajustes para telas muito grandes (opcional): aumenta a imagem fixa se quiser */
@@ -158,6 +253,10 @@
158253

159254
/* responsivo: empilha tudo e remove a imagem grande quando a viewport fica pequena */
160255
@media (max-width: 1100px) {
256+
html {
257+
overflow: visible;
258+
}
259+
161260
.layout {
162261
grid-template-columns: 1fr; /* coluna única */
163262
}
@@ -167,8 +266,9 @@
167266
}
168267

169268
.cardGrid {
170-
display: grid; /* tornar visível aqui */
171-
grid-template-columns: 1fr; /* uma coluna no mobile/medium */
269+
display: grid;
270+
grid-template-columns: repeat(2, 1fr);
271+
html { overflow: visible;}
172272
}
173273

174274
.heroWrap {

‎src/app/[locale]/movi/page.tsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// TODO: Luninha -> Iniciar tela de Movi
2-
31
import styles from "./movi.module.css";
42
import { Nav } from '@/app/components/nav';
53
import { SideBar } from '@/app/components/side-bar';
@@ -17,11 +15,14 @@ export default function Movi() {
1715
<section className={styles.layout}>
1816
<aside className={styles.leftCard}>
1917
<div className={styles.thumbWrap}>
20-
{/* coloque a miniatura em /public/images/thumb.png */}
21-
<img
22-
src="/imgs/thumb_movi.jpg"
23-
alt="miniatura do guia"
24-
className={styles.thumbImage}
18+
<iframe
19+
className={styles.thumbIframe}
20+
src="https://www.youtube.com/embed/8KxkzngOGJY?si=vCYqzooc5h-bcN8U" //Colocar URL aqui
21+
title="YouTube video player"
22+
frameBorder="0"
23+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
24+
referrerPolicy="strict-origin-when-cross-origin"
25+
allowFullScreen
2526
/>
2627
</div>
2728

@@ -55,18 +56,35 @@ export default function Movi() {
5556
</section>
5657

5758
<section className={styles.cardGrid}>
58-
<div className={styles.card}>
59-
<h2>POP SWING</h2>
60-
<p>Pop Swing, você continua se movimentando para tirar a precisão de mira do seu oponente.</p>
61-
</div>
62-
<div className={styles.card}>
63-
<h2>AD AD (A DEAD)</h2>
64-
<p>Movimentação Lateral Para um lado e para o outro para dificultar o tiro do inimigo.</p>
65-
</div>
66-
<div className={styles.card}>
67-
<h2>STRAFING</h2>
68-
<p>Se mover lateralmente, mantendo um ritmo e precisão em seus movimentos.</p>
69-
</div>
59+
<article className={styles.card} tabIndex={0} role="article" aria-labelledby="pop-swing">
60+
<div className={styles.cardHead}>
61+
<svg className={styles.iconCard } viewBox="0 0 24 24" aria-hidden="true">
62+
<path d="M12 2L15 8l6 .5-4.5 4 1.5 6L12 16l-6 3 1.5-6L3 8.5 9 8 12 2z" fill="currentColor"/>
63+
</svg>
64+
<h3 id="pop-swing" className={styles.cardTitle}>POP SWING</h3>
65+
</div>
66+
<p className={styles.cardDesc}>Pop Swing — você continua se movimentando para tirar a precisão de mira do seu oponente.</p>
67+
</article>
68+
69+
<article className={styles.card} tabIndex={0} role="article" aria-labelledby="ad-ad">
70+
<div className={styles.cardHead}>
71+
<svg className={styles.iconCard } viewBox="0 0 24 24" aria-hidden="true">
72+
<path d="M3 12h18M12 3v18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
73+
</svg>
74+
<h3 id="ad-ad" className={styles.cardTitle}>AD AD (A DEAD)</h3>
75+
</div>
76+
<p className={styles.cardDesc}>Movimentação lateral para um lado e para o outro para dificultar o tiro do inimigo.</p>
77+
</article>
78+
79+
<article className={styles.card} tabIndex={0} role="article" aria-labelledby="strafing">
80+
<div className={styles.cardHead}>
81+
<svg className={styles.iconCard } viewBox="0 0 24 24" aria-hidden="true">
82+
<path d="M4 12h16M8 8l-4 4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
83+
</svg>
84+
<h3 id="strafing" className={styles.cardTitle}>STRAFING</h3>
85+
</div>
86+
<p className={styles.cardDesc}>Se mover lateralmente, mantendo um ritmo e precisão em seus movimentos.</p>
87+
</article>
7088
</section>
7189
</main>
7290
</div>

‎src/app/favicon.ico‎

33.4 KB
Binary file not shown.

‎src/app/favicon_test.png‎

25.5 KB
Loading

0 commit comments

Comments
 (0)