feat: registro-login

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;

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 component: CtaButtonComponent;
-  let fixture: ComponentFixture<CtaButton>;
+  let fixture: ComponentFixture<CtaButtonComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CtaButton]
+      imports: [CtaButtonComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(CtaButton);
+    fixture = TestBed.createComponent(CtaButtonComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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;

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">
     </app-cta-button>
   </div>

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;
 
-  /* ===========================
+  /* 💻 NOTEBOOKS 1200–1399px */
-     📱 RESPONSIVIDADE
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
-     =========================== */
+    padding: 6px 50px;      /* ⬅️ TOPO/FUNDO NO NOTEBOOK (antes 8px 50px) */
+  }
 
-  /* Tablets e celulares — empilha tudo */
+  /* Telas < 1200px — empilha esquerda e direita */
-  @media (max-width: 768px) {
+  @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) {
+  /* 💻 NOTEBOOKS 1200–1399px */
-    margin-right: 100px;
+  @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;
-    align-items: flex-start; /* tudo fica alinhado à esquerda */
+    margin-top: 18px;
-    margin-top: 40px;
   }
 
   @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;
   }

src/app/components/header/header.html

@@ -2,14 +2,14 @@
 
   <div class="header-top">
 
-    <!-- LOGO -->
+    <!-- LOGO + TÍTULO (CLICÁVEIS) -->
-    <div class="logo-area">
+    <a class="logo-area" routerLink="/">   <!-- ⬅️ AGORA É UM LINK ANGULAR -->
       <img src="logo.jpg" alt="Logo" class="logo">
 
       <div class="logo-text ms-2">
         <span class="line">Line</span><span class="gestao">Gestão</span>
       </div>
-    </div>
+    </a>
 
     <!-- MENU -->
     <nav class="menu">

src/app/components/header/header.scss

@@ -43,17 +43,18 @@
 /* ===================== */
 
 .logo {
-  width: 44px;   /* MENOR DO QUE ANTES */
+  width: 44px;
   height: 44px;
 
-@media (max-width: 1400px) {
+  /* NOTEBOOKS 1200–1399px */
-    width: 32px;
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
-    height: 32px;
+    width: 38px;
+    height: 38px;
   }
 
   @media (max-width: 1280px) {
-    width: 30px;
+    width: 38px;
-    height: 30px;
+    height: 38px;
   }
 
   @media (max-width: 1024px) {
@@ -71,16 +72,20 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  text-decoration: none;    /* ⬅️ tira sublinhado */
+  color: inherit;           /* ⬅️ usa as cores definidas nos spans */
+  cursor: pointer;          /* ⬅️ deixa com “carinha” de botão/link */
 }
 
 /* TEXTO DA LOGO */
 .logo-text .line,
 .logo-text .gestao {
   font-weight: 600;
-  font-size: 32px; /* ANTES 26 → reduzido mais para abrir espaço */
+  font-size: 32px; /* desktop grande */
 
-  @media (max-width: 1400px) {
+  /* NOTEBOOKS 1200–1399px */
-    font-size: 22px;
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 26px;
   }
 
   @media (max-width: 1200px) {
@@ -116,8 +121,8 @@
   gap: 24px;
 
   @media (max-width: 1200px) {
-      gap: 18px;
+    gap: 18px;
-    }
+  }
 
   @media (max-width: 1024px) {
     gap: 14px;
@@ -145,13 +150,13 @@
   color: #000 !important;
   text-decoration: none !important;
 
-  
+  /* NOTEBOOKS 1200–1399px */
-  @media (max-width: 1400px) {
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
     font-size: 14.5px;
   }
 
   @media (max-width: 1200px) {
-    font-size: 14x;
+    font-size: 14px;
   }
 
   @media (max-width: 1024px) {
@@ -182,7 +187,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-left: 0 !important; /* Remove o empurrão à direita */
+  margin-left: 0 !important;
 
   @media (max-width: 900px) {
     gap: 10px;
@@ -203,8 +208,11 @@
   color: #000;
   font-size: 16px;
   font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.08s ease;
 
-  @media (max-width: 1400px) {
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
     width: 140px;
     height: 36px;
     font-size: 14px;
@@ -233,6 +241,15 @@
   }
 }
 
+.btn-cadastrar:hover {
+  background: #d7d7d7;
+}
+
+.btn-cadastrar:active {
+  background: rgba(225, 225, 225, 0.7) !important;
+  transform: scale(0.98);
+}
+
 /* --- Botão Login --- */
 .btn-login {
   width: 164px;
@@ -242,8 +259,11 @@
   color: #fff;
   font-size: 16px;
   font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.08s ease;
 
-  @media (max-width: 1400px) {
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
     width: 140px;
     height: 36px;
     font-size: 14px;
@@ -272,6 +292,23 @@
   }
 }
 
+/* garante que o texto SEMPRE fique branco */
+.btn-login,
+.btn-login:hover,
+.btn-login:active,
+.btn-login:focus {
+  color: #fff !important;
+}
+
+.btn-login:hover {
+  background: #d72bd0;
+}
+
+.btn-login:active {
+  background: rgba(227, 61, 207, 0.8) !important;
+  transform: scale(0.98);
+}
+
 /* ===================== */
 /* FAIXA AZUL INFERIOR   */
 /* ===================== */
@@ -293,8 +330,9 @@
   font-size: 16px;
   font-weight: 700;
 
-  @media (max-width: 1400px) {
+  /* NOTEBOOKS 1200–1399px */
-    font-size: 13px;
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 15px;
   }
 
   @media (max-width: 480px) {

src/app/components/header/header.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-header',
-  imports: [],
+  standalone: true,          // ⬅️ importante para usar `imports` aqui
+  imports: [RouterLink],     // ⬅️ habilita o uso de routerLink no template
   templateUrl: './header.html',
   styleUrl: './header.scss',
 })
-export class Header {
+export class Header { }
-
-}

src/app/pages/home/home.scss

@@ -25,18 +25,25 @@
 
   /* ========== RESPONSIVO ========== */
 
+  /* até 1400px diminui um pouco */
   @media (max-width: 1400px) {
     font-size: 40px;
   }
 
-  /* TABLET */
+  /* tablets e notebooks pequenos */
   @media (max-width: 1024px) {
-    font-size: 38px;
+    font-size: 36px;
   }
 
-  /* CELULAR */
+  /* tablets menores */
+  @media (max-width: 768px) {
+    font-size: 32px;
+    margin-bottom: 50px;
+  }
+
+  /* celulares */
   @media (max-width: 480px) {
-    font-size: 34px;
+    font-size: 28px;
     margin-bottom: 40px;
   }
 }
@@ -46,21 +53,7 @@
   color: #E33DCF;
   font-weight: 500;
   display: block;
-
+  text-align: center;
-  transform: translateX(-70px);
-
-  /* RESPONSIVO */
-  @media (max-width: 1024px) {
-    transform: translateX(-40px);
-  }
-
-  @media (max-width: 768px) {
-    transform: translateX(-20px);
-  }
-
-  @media (max-width: 480px) {
-    transform: translateX(0);
-  }
 }
 
 /* Segunda linha */
@@ -68,20 +61,25 @@
   color: #E33DCF;
   font-weight: 500;
   display: block;
+  text-align: center;
+}
 
-  transform: translateX(100px) translateY(-6px);
+/* -------- Efeito deslocado só em telas grandes -------- */
-
+@media (min-width: 1200px) {
-  /* RESPONSIVO */
+  .main-title .first-line {
-  @media (max-width: 1024px) {
+    transform: translateX(-70px);
-    transform: translateX(60px) translateY(-5px);
   }
 
-  @media (max-width: 768px) {
+  .main-title .second-line {
-    transform: translateX(30px) translateY(-4px);
+    transform: translateX(100px) translateY(-6px);
   }
+}
 
-  @media (max-width: 480px) {
+/* Em telas menores que 1200px o título fica plenamente centralizado */
-    transform: translateX(0) translateY(0);
+@media (max-width: 1199.98px) {
+  .main-title .first-line,
+  .main-title .second-line {
+    transform: none;     /* garante que não herda nenhum translate */
   }
 }
 
@@ -110,22 +108,24 @@
 
   /* Tablets */
   @media (max-width: 1024px) {
-    width: 60%;
+    width: 70%;
     height: auto;
-    font-size: 22px;
+    font-size: 20px;
+    line-height: 1.2;
   }
 
   /* Tablets pequenos */
   @media (max-width: 768px) {
-    width: 60%;
+    width: 80%;
-    font-size: 20px;
+    font-size: 18px;
+    line-height: 1.25;
     margin-bottom: 40px;
   }
 
   /* Celulares */
   @media (max-width: 480px) {
-    width: 60%;
+    width: 90%;
-    font-size: 18px;
+    font-size: 16px;
     line-height: 1.3;
     margin-bottom: 30px;
   }

src/app/pages/register/register.html

@@ -0,0 +1 @@
+<p>register works!</p>

src/app/pages/register/register.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Register } from './register';
+
+describe('Register', () => {
+  let component: Register;
+  let fixture: ComponentFixture<Register>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Register]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Register);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/register/register.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  imports: [],
+  templateUrl: './register.html',
+  styleUrl: './register.scss',
+})
+export class Register {
+
+}