From e40e93280d6b84f162a03440e8cb89f4991a4cca Mon Sep 17 00:00:00 2001 From: Eduardo Date: Wed, 10 Dec 2025 18:09:01 -0300 Subject: [PATCH] feat: registro-login --- src/app/components/cta-button/cta-button.scss | 2 + .../components/cta-button/cta-button.spec.ts | 10 +- .../components/feature-card/feature-card.scss | 24 +++++ src/app/components/footer/footer.html | 2 +- src/app/components/footer/footer.scss | 93 +++++++++++++++---- src/app/components/header/header.html | 6 +- src/app/components/header/header.scss | 76 +++++++++++---- src/app/components/header/header.ts | 8 +- src/app/pages/home/home.scss | 68 +++++++------- src/app/pages/register/register.html | 1 + src/app/pages/register/register.scss | 0 src/app/pages/register/register.spec.ts | 23 +++++ src/app/pages/register/register.ts | 11 +++ 13 files changed, 238 insertions(+), 86 deletions(-) create mode 100644 src/app/pages/register/register.html create mode 100644 src/app/pages/register/register.scss create mode 100644 src/app/pages/register/register.spec.ts create mode 100644 src/app/pages/register/register.ts diff --git a/src/app/components/cta-button/cta-button.scss b/src/app/components/cta-button/cta-button.scss index 7b64b08..d523896 100644 --- a/src/app/components/cta-button/cta-button.scss +++ b/src/app/components/cta-button/cta-button.scss @@ -4,6 +4,8 @@ height: 66px; margin-top: 50px; margin-bottom: 100px; + padding-left: 50px; + padding-right: 50px; background-color: rgba(201, 30, 181, 0.76); color: #FFFFFF; diff --git a/src/app/components/cta-button/cta-button.spec.ts b/src/app/components/cta-button/cta-button.spec.ts index 0861fdb..585031a 100644 --- a/src/app/components/cta-button/cta-button.spec.ts +++ b/src/app/components/cta-button/cta-button.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CtaButtonComponent } from './cta-button'; -import { CtaButton } from './cta-button'; describe('CtaButton', () => { - let component: CtaButton; - let fixture: ComponentFixture; + let component: CtaButtonComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [CtaButton] + imports: [CtaButtonComponent] }) .compileComponents(); - fixture = TestBed.createComponent(CtaButton); + fixture = TestBed.createComponent(CtaButtonComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/components/feature-card/feature-card.scss b/src/app/components/feature-card/feature-card.scss index 9b78649..4eb5754 100644 --- a/src/app/components/feature-card/feature-card.scss +++ b/src/app/components/feature-card/feature-card.scss @@ -25,6 +25,13 @@ 📱 RESPONSIVIDADE ================================ */ + @media (min-width: 1200px) and (max-width: 1399.98px) { + width: 330px; + height: auto; + padding: 24px; + } + + /* Telas MUITO pequenas (≤ 360px) */ @media (max-width: 360px) { width: 95%; @@ -72,6 +79,12 @@ align-items: center; justify-content: center; + @media (min-width: 1200px) and (max-width: 1399.98px) { + font-size: 18px; + margin-top: -10px; + } + + /* Mobile */ @media (max-width: 480px) { font-size: 18px; @@ -84,6 +97,11 @@ margin-right: 10px; font-size: 24px; + @media (min-width: 1200px) and (max-width: 1399.98px) { + font-size: 22px; + } + + /* Mobile */ @media (max-width: 480px) { font-size: 20px; @@ -100,6 +118,12 @@ line-height: 1; padding-left: 15px; + @media (min-width: 1200px) and (max-width: 1399.98px) { + font-size: 16px; + line-height: 1.2; + } + + /* Mobile */ @media (max-width: 480px) { font-size: 15px; diff --git a/src/app/components/footer/footer.html b/src/app/components/footer/footer.html index 208b169..260839a 100644 --- a/src/app/components/footer/footer.html +++ b/src/app/components/footer/footer.html @@ -31,7 +31,7 @@ height="46.84" background="rgba(201, 30, 181, 0.76)" color="#FFFFFF" - fontSize="13" + fontSize="11" fontWeight="700"> diff --git a/src/app/components/footer/footer.scss b/src/app/components/footer/footer.scss index dbaeee4..9c6594a 100644 --- a/src/app/components/footer/footer.scss +++ b/src/app/components/footer/footer.scss @@ -5,7 +5,7 @@ .footer-container { width: 100%; background: rgba(3, 15, 170, 0.93); - padding: 25px 60px; + padding: 10px 60px; /* ⬅️ TOPO/FUNDO DO FOOTER (antes 16px 60px) */ display: flex; justify-content: space-between; @@ -14,15 +14,25 @@ font-family: "Inter", sans-serif; color: #FFFFFF; - /* =========================== - 📱 RESPONSIVIDADE - =========================== */ + /* 💻 NOTEBOOKS 1200–1399px */ + @media (min-width: 1200px) and (max-width: 1399.98px) { + padding: 6px 50px; /* ⬅️ TOPO/FUNDO NO NOTEBOOK (antes 8px 50px) */ + } - /* Tablets e celulares — empilha tudo */ - @media (max-width: 768px) { + /* Telas < 1200px — empilha esquerda e direita */ + @media (max-width: 1199.98px) { flex-direction: column; - padding: 25px 20px; + justify-content: center; + align-items: center; + padding: 14px 30px; /* ⬅️ TOPO/FUNDO EM TELAS MÉDIAS (antes 18px 30px) */ + text-align: center; + } + + /* Tablets e celulares */ + @media (max-width: 768px) { + padding: 14px 20px; /* ⬅️ TOPO/FUNDO EM MOBILE (antes 18px 20px) */ align-items: flex-start; + text-align: left; } } @@ -31,24 +41,40 @@ /* ===================================== */ .footer-left { - margin-top: 100px; + margin-top: 100px; /* ⬅️ DISTÂNCIA DO TEXTO PRO TOPO NO DESKTOP (antes 100px) */ + + /* 💻 NOTEBOOKS 1200–1399px */ + @media (min-width: 1200px) and (max-width: 1399.98px) { + margin-top: 80px; /* ⬅️ DISTÂNCIA NO NOTEBOOK (antes 100px) */ + } + + /* Telas < 1200px */ + @media (max-width: 1199.98px) { + margin-top: 24px; + } @media (max-width: 768px) { - margin-top: 40px; + margin-top: 20px; } @media (max-width: 480px) { - margin-top: 20px; + margin-top: 16px; } } .footer-left p { - margin: 0 0 4px 270px; + /* 🔁 PADRÃO PARA DESKTOPS E NOTEBOOKS: MESMO ESPAÇAMENTO HORIZONTAL */ + margin: 0 0 4px 120px; font-size: 14px; font-weight: 600; + /* Telas < 1200px */ + @media (max-width: 1199.98px) { + margin: 0 0 8px 0; + } + @media (max-width: 768px) { - margin-left: 0; /* remove o deslocamento gigante */ + margin-left: 0; font-size: 13px; } @@ -65,23 +91,32 @@ display: flex; flex-direction: column; align-items: center; - margin-top: 100px; + margin-top: 100px; /* ⬅️ DISTÂNCIA DO BLOCO DIREITO PRO TOPO (antes 100px) */ gap: 0px; - margin-right: 300px; + margin-right: 120px; /* espaçamento horizontal já ajustado */ - @media (max-width: 1024px) { - margin-right: 100px; + /* 💻 NOTEBOOKS 1200–1399px */ + @media (min-width: 1200px) and (max-width: 1399.98px) { + margin-top: 80px; /* ⬅️ MESMO IDEA DO ESQUERDO (antes 100px) */ + gap: 10px; + } + + /* Telas < 1200px */ + @media (max-width: 1199.98px) { + margin-top: 20px; + margin-right: 0; + align-items: center; + gap: 10px; } @media (max-width: 768px) { - margin-right: 0; - align-items: flex-start; /* tudo fica alinhado à esquerda */ - margin-top: 40px; + align-items: flex-start; + margin-top: 18px; } @media (max-width: 480px) { - margin-top: 20px; + margin-top: 16px; } } @@ -93,7 +128,17 @@ justify-content: flex-start; margin-bottom: 0; + @media (min-width: 1200px) and (max-width: 1399.98px) { + margin-top: 4px; + } + + @media (max-width: 1199.98px) { + justify-content: center; + margin-top: 4px; + } + @media (max-width: 768px) { + justify-content: flex-start; margin-top: 5px; } } @@ -137,6 +182,14 @@ .footer-button-wrapper { margin-top: 0; + @media (min-width: 1200px) and (max-width: 1399.98px) { + margin-top: 6px; + } + + @media (max-width: 1199.98px) { + margin-top: 6px; + } + @media (max-width: 768px) { margin-top: 10px; } diff --git a/src/app/components/header/header.html b/src/app/components/header/header.html index 2d5dcab..491af6e 100644 --- a/src/app/components/header/header.html +++ b/src/app/components/header/header.html @@ -2,14 +2,14 @@
- -
+ +
LineGestão
-
+