Skip to content

Commit f9d2e13

Browse files
henmohrvitormattos
henmohr
authored and
vitormattos
committed
feat: new layout
1 parent 06f446d commit f9d2e13

24 files changed

Lines changed: 21043 additions & 89 deletions

‎lang/cs/main.json‎

Lines changed: 85 additions & 7 deletions
Large diffs are not rendered by default.

‎lang/en/main.json‎

Lines changed: 85 additions & 7 deletions
Large diffs are not rendered by default.

‎lang/fr/main.json‎

Lines changed: 85 additions & 7 deletions
Large diffs are not rendered by default.

‎lang/nb-NO/main.json‎

Lines changed: 85 additions & 7 deletions
Large diffs are not rendered by default.

‎lang/pt-BR/main.json‎

Lines changed: 85 additions & 7 deletions
Large diffs are not rendered by default.

‎lang/ta/main.json‎

Lines changed: 85 additions & 7 deletions
Large diffs are not rendered by default.

‎source/_assets/scss/_about.scss‎

Lines changed: 390 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* ===== About CSS ===== */
22

3+
/* Keep old styles for homepage about section */
34
.ud-about {
45
background: var(--bg-light);
56
padding-top: 88px;
@@ -73,3 +74,392 @@
7374
text-align: center;
7475
}
7576
}
77+
78+
/* ===== About Page Styles ===== */
79+
80+
.ud-about-hero {
81+
background: var(--primary-color);
82+
padding: 180px 0 120px;
83+
min-height: 600px;
84+
display: flex;
85+
align-items: center;
86+
87+
@media #{$xs, $sm} {
88+
padding: 140px 0 80px;
89+
min-height: auto;
90+
}
91+
92+
.about-hero-content {
93+
max-width: 700px;
94+
95+
.about-hero-title {
96+
color: var(--white);
97+
font-size: 56px;
98+
font-weight: bold;
99+
line-height: 1.2;
100+
margin-bottom: 30px;
101+
102+
@media #{$sm} {
103+
font-size: 42px;
104+
}
105+
106+
@media #{$xs} {
107+
font-size: 36px;
108+
}
109+
}
110+
111+
.about-hero-desc {
112+
color: var(--text-light);
113+
font-size: 20px;
114+
line-height: 1.6;
115+
margin-bottom: 40px;
116+
117+
@media #{$xs} {
118+
font-size: 18px;
119+
}
120+
}
121+
122+
.about-hero-buttons {
123+
display: flex;
124+
gap: 20px;
125+
flex-wrap: wrap;
126+
127+
.ud-main-btn {
128+
background: var(--accent-color);
129+
padding: 16px 32px;
130+
border-radius: 30px;
131+
font-size: 18px;
132+
font-weight: bold;
133+
134+
&:hover {
135+
filter: brightness(1.2);
136+
}
137+
}
138+
139+
.ud-secondary-btn {
140+
background: transparent;
141+
border: 2px solid var(--white);
142+
color: var(--white);
143+
padding: 16px 32px;
144+
border-radius: 30px;
145+
font-size: 18px;
146+
font-weight: bold;
147+
display: inline-block;
148+
transition: all 0.3s;
149+
150+
&:hover {
151+
background: var(--white);
152+
color: var(--primary-color);
153+
}
154+
}
155+
}
156+
}
157+
}
158+
159+
.ud-about-story {
160+
padding: 100px 0;
161+
background: var(--white);
162+
163+
@media #{$xs, $sm} {
164+
padding: 60px 0;
165+
}
166+
167+
.about-story-header {
168+
text-align: center;
169+
margin-bottom: 60px;
170+
171+
h2 {
172+
font-size: 42px;
173+
font-weight: bold;
174+
color: var(--heading-color);
175+
176+
@media #{$sm} {
177+
font-size: 36px;
178+
}
179+
180+
@media #{$xs} {
181+
font-size: 28px;
182+
}
183+
}
184+
}
185+
186+
.about-story-content {
187+
p {
188+
font-size: 16px;
189+
line-height: 1.8;
190+
color: var(--text-gray);
191+
margin-bottom: 25px;
192+
}
193+
}
194+
195+
.about-timeline {
196+
.timeline-item {
197+
display: flex;
198+
gap: 30px;
199+
margin-bottom: 40px;
200+
align-items: start;
201+
202+
@media #{$xs} {
203+
flex-direction: column;
204+
align-items: center;
205+
text-align: center;
206+
}
207+
208+
.timeline-icon {
209+
width: 120px;
210+
height: 120px;
211+
background: var(--accent-color);
212+
border-radius: 50%;
213+
display: flex;
214+
align-items: center;
215+
justify-content: center;
216+
flex-shrink: 0;
217+
218+
img {
219+
max-width: 60px;
220+
max-height: 60px;
221+
filter: brightness(0) invert(1);
222+
}
223+
}
224+
225+
.timeline-content {
226+
flex-grow: 1;
227+
228+
h3 {
229+
font-size: 48px;
230+
font-weight: bold;
231+
color: var(--primary-color);
232+
margin-bottom: 10px;
233+
}
234+
235+
h4 {
236+
font-size: 20px;
237+
font-weight: bold;
238+
color: var(--heading-color);
239+
margin-bottom: 15px;
240+
}
241+
242+
p {
243+
font-size: 16px;
244+
line-height: 1.6;
245+
color: var(--text-muted);
246+
}
247+
}
248+
}
249+
}
250+
}
251+
252+
.ud-about-values {
253+
padding: 100px 0;
254+
background: var(--primary-color);
255+
256+
@media #{$xs, $sm} {
257+
padding: 60px 0;
258+
}
259+
260+
.about-values-header {
261+
text-align: center;
262+
margin-bottom: 60px;
263+
264+
h2 {
265+
font-size: 42px;
266+
font-weight: bold;
267+
color: var(--white);
268+
max-width: 900px;
269+
margin: 0 auto;
270+
271+
@media #{$sm} {
272+
font-size: 36px;
273+
}
274+
275+
@media #{$xs} {
276+
font-size: 28px;
277+
}
278+
}
279+
}
280+
281+
.value-card {
282+
background: rgba(255, 255, 255, 0.1);
283+
padding: 40px;
284+
border-radius: 10px;
285+
height: 100%;
286+
backdrop-filter: blur(10px);
287+
288+
@media #{$xs} {
289+
padding: 30px;
290+
}
291+
292+
.value-icon {
293+
width: 100px;
294+
height: 100px;
295+
background: var(--accent-color);
296+
border-radius: 50%;
297+
display: flex;
298+
align-items: center;
299+
justify-content: center;
300+
margin-bottom: 30px;
301+
302+
img {
303+
max-width: 50px;
304+
max-height: 50px;
305+
filter: brightness(0) invert(1);
306+
}
307+
}
308+
309+
h3 {
310+
font-size: 24px;
311+
font-weight: bold;
312+
color: var(--white);
313+
margin-bottom: 20px;
314+
}
315+
316+
p {
317+
font-size: 16px;
318+
line-height: 1.7;
319+
color: var(--text-light);
320+
}
321+
}
322+
}
323+
324+
.ud-about-team {
325+
padding: 100px 0;
326+
background: var(--bg-light);
327+
328+
@media #{$xs, $sm} {
329+
padding: 60px 0;
330+
}
331+
332+
.team-image {
333+
border-radius: 10px;
334+
overflow: hidden;
335+
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
336+
337+
img {
338+
width: 100%;
339+
height: auto;
340+
}
341+
342+
@media #{$md, $sm, $xs} {
343+
margin-bottom: 40px;
344+
}
345+
}
346+
347+
.team-content {
348+
padding-left: 40px;
349+
350+
@media #{$md, $sm, $xs} {
351+
padding-left: 0;
352+
}
353+
354+
h2 {
355+
font-size: 36px;
356+
font-weight: bold;
357+
color: var(--heading-color);
358+
margin-bottom: 20px;
359+
360+
@media #{$xs} {
361+
font-size: 28px;
362+
}
363+
}
364+
365+
> p {
366+
font-size: 16px;
367+
line-height: 1.7;
368+
color: var(--text-muted);
369+
margin-bottom: 30px;
370+
}
371+
372+
.team-quote {
373+
background: var(--white);
374+
padding: 30px;
375+
border-left: 4px solid var(--accent-color);
376+
margin: 30px 0;
377+
border-radius: 5px;
378+
379+
p {
380+
font-size: 18px;
381+
font-style: italic;
382+
line-height: 1.6;
383+
color: var(--text-gray);
384+
margin-bottom: 20px;
385+
}
386+
387+
.quote-author {
388+
display: flex;
389+
align-items: center;
390+
gap: 15px;
391+
392+
img {
393+
width: 50px;
394+
height: 50px;
395+
border-radius: 50%;
396+
object-fit: cover;
397+
}
398+
399+
.author-info {
400+
strong {
401+
display: block;
402+
font-size: 16px;
403+
color: var(--heading-color);
404+
margin-bottom: 5px;
405+
}
406+
407+
span {
408+
font-size: 14px;
409+
color: var(--text-muted);
410+
}
411+
}
412+
}
413+
}
414+
415+
.team-cta {
416+
margin-top: 30px;
417+
418+
.ud-main-btn {
419+
background: var(--primary-color);
420+
padding: 14px 32px;
421+
border-radius: 30px;
422+
423+
&:hover {
424+
background: var(--accent-color);
425+
}
426+
}
427+
}
428+
}
429+
}
430+
431+
.ud-about-cta {
432+
padding: 100px 0;
433+
background: var(--primary-color);
434+
text-align: center;
435+
436+
@media #{$xs, $sm} {
437+
padding: 60px 0;
438+
}
439+
440+
.about-cta-content {
441+
max-width: 800px;
442+
margin: 0 auto;
443+
444+
h2 {
445+
font-size: 42px;
446+
font-weight: bold;
447+
color: var(--white);
448+
margin-bottom: 20px;
449+
450+
@media #{$sm} {
451+
font-size: 36px;
452+
}
453+
454+
@media #{$xs} {
455+
font-size: 28px;
456+
}
457+
}
458+
459+
p {
460+
font-size: 18px;
461+
line-height: 1.7;
462+
color: var(--text-light);
463+
}
464+
}
465+
}

0 commit comments

Comments
 (0)