feat: registro-login

2025-12-10 23:02:54 -03:00 · 2025-12-10 23:02:54 -03:00 · d470f645c2
parent 3798a669c7 e40e93280d
commit d470f645c2
14 changed files with 643 additions and 128 deletions
--- a/angular.json
+++ b/angular.json
@ -100,5 +100,8 @@
        }
      }
    }
+  },
+  "cli": {
+    "analytics": false
  }
 }
--- a/src/app/components/cta-button/cta-button.scss
+++ b/src/app/components/cta-button/cta-button.scss
@ -1,8 +1,11 @@
 .cta-button {
-    width: 360px;
+    width: 100%;
+    max-width: 360px;
    height: 66px;
-    margin-top: 50px; /* Adiciona espaço entre os cards e o botão */
-    margin-bottom: 100px; /* Adiciona espaço após o botão */
+    margin-top: 50px;
+    margin-bottom: 100px;
+    padding-left: 50px;
+    padding-right: 50px;

    background-color: rgba(201, 30, 181, 0.76);
    color: #FFFFFF;
@ -17,6 +20,29 @@
    border-radius: 4px;

    transition: background-color 0.3s ease;
+
+    // --- MOBILE PEQUENO (até 360px) ---
+    @media (max-width: 360px) {
+        max-width: 260px;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    // --- CELULARES (até 480px) ---
+    @media (max-width: 480px) {
+        max-width: 300px;
+        height: 60px;
+    }
+
+    // --- TABLETS (até 768px) ---
+    @media (max-width: 768px) {
+        max-width: 330px;
+    }
+
+    // --- DESKTOPS MÉDIOS (1024px ou menos) ---
+    @media (max-width: 1024px) {
+        max-width: 350px;
+    }
 }

 .cta-button:hover {
--- 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<CtaButton>;
+  let component: CtaButtonComponent;
+  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();
  });
--- a/src/app/components/feature-card/feature-card.scss
+++ b/src/app/components/feature-card/feature-card.scss
@ -1,72 +1,136 @@
 .feature-card-container {
-  /* Garante que o container flexível do Bootstrap organize bem os cards */
  padding: 10px;
 }

-/* Container principal do card */
+/* CARD BASE — mantém o design exato do Figma em desktops */
 .feature-card {
-  /* ... estilos anteriores ... */
  border: 1px solid #000000;
  background-color: #FFFFFF;
  padding: 30px;
  border-radius: 5px;
-  
-  /* ❌ Remover: cursor: pointer; (ou definir como default) */
  cursor: default;

-  /* 📐 DEFININDO TAMANHO FIXO DO FIGMA */
-  width: 365px; /* Largura EXATA solicitada */
-  height: 169px; /* Altura EXATA solicitada */
+  /* DESKTOP (layout original) */
+  width: 365px;
+  height: 169px;

-  /* Permite que o texto quebre ou esconda se exceder o limite */
  overflow: hidden;
-  
-  /* Garante que o texto comece sempre do topo, mesmo com altura fixa */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  transition: background-color 0.2s ease-in-out;
+
+  /* ================================
+     📱 RESPONSIVIDADE
+     ================================ */
+
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    width: 330px;
+    height: auto;
+    padding: 24px;
  }

-/* ... o restante do CSS se mantém ... */

-/* Efeito de HOVER (Mouse passa por cima) */
+  /* Telas MUITO pequenas (≤ 360px) */
+  @media (max-width: 360px) {
+    width: 95%;
+    height: auto;
+    padding: 20px;
+  }
+
+  /* Celulares (≤ 480px) */
+  @media (max-width: 480px) {
+    width: 95%;
+    height: auto; /* Permite texto quebrar */
+  }
+
+  /* Tablets pequenos (≤ 768px) */
+  @media (max-width: 768px) {
+    width: 300px;
+    height: auto;
+  }
+
+  /* Tablets grandes e monitores pequenos (≤ 1024px) */
+  @media (max-width: 1024px) {
+    width: 330px;
+    height: auto;
+  }
+}
+
+/* HOVER */
 .feature-card.hover-state {
-  background-color: #E1E1E1; /* Cor cinza #E1E1E1 ao passar o mouse */
+  background-color: #E1E1E1;
 }

-/* --- TÍTULO DO CARD --- */
+/* -------------------------
+   TÍTULO DO CARD
+-------------------------- */
 .card-title {
-  /* Propriedades do Figma: Inter, Bold, 21, #E33DCF */
  font-family: 'Inter', sans-serif;
  font-size: 20px;
-  font-weight: 700; /* Bold */
-  color: #E33DCF; /* Rosa */
+  font-weight: 700;
+  color: #E33DCF;
+
  margin-top: -15px;
  margin-bottom: 10px;
-  display: flex; /* Para alinhar ícone e texto */
+
+  display: flex;
  align-items: center;
-  justify-content: center
+  justify-content: center;
+
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 18px;
+    margin-top: -10px;
  }

-/* Estilização do Ícone */
+
+  /* Mobile */
+  @media (max-width: 480px) {
+    font-size: 18px;
+    margin-top: -5px;
+  }
+}
+
+/* ÍCONE */
 .card-icon {
  margin-right: 10px;
-  font-size: 24px; /* Tamanho ligeiramente maior que o texto */
+  font-size: 24px;
+
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 22px;
  }

-/* --- DESCRIÇÃO/PARÁGRAFO DO CARD --- */
+
+  /* Mobile */
+  @media (max-width: 480px) {
+    font-size: 20px;
+  }
+}
+
+/* -------------------------
+   DESCRIÇÃO DO CARD
+-------------------------- */
 .card-description {
-  /* Propriedades do Figma: Inter, Mixed, 18, Preto */
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #000000;
  line-height: 1;
  padding-left: 15px;
+
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 16px;
+    line-height: 1.2;
  }

-/* Garante que o começo da frase (em negrito) tenha o peso correto */
-.card-description strong {
-  font-weight: 700; /* Bold */
+
+  /* Mobile */
+  @media (max-width: 480px) {
+    font-size: 15px;
+    padding-left: 8px;
+  }
+}
+
+.card-description strong {
+  font-weight: 700;
 }
--- 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">
    </app-cta-button>
  </div>
--- 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;
@ -13,6 +13,27 @@

  font-family: "Inter", sans-serif;
  color: #FFFFFF;
+
+  /* 💻 NOTEBOOKS 1200–1399px */
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    padding: 6px 50px;      /* ⬅️ TOPO/FUNDO NO NOTEBOOK (antes 8px 50px) */
+  }
+
+  /* Telas < 1200px — empilha esquerda e direita */
+  @media (max-width: 1199.98px) {
+    flex-direction: column;
+    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;
+  }
 }

 /* ===================================== */
@ -20,13 +41,46 @@
 /* ===================================== */

 .footer-left {
-  margin-top: 100px; /* move bloco todo sem mexer no espaçamento entre linhas */
+  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: 20px;
+  }
+
+  @media (max-width: 480px) {
+    margin-top: 16px;
+  }
 }

 .footer-left p {
-  margin: 0 0 4px 270px;
-  font-size: 14px; /* levemente menor como no exemplo */
+  /* 🔁 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;
+    font-size: 13px;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 12px;
+  }
 }

 /* ===================================== */
@ -36,11 +90,34 @@
 .footer-right {
  display: flex;
  flex-direction: column;
-  align-items: center; /* << alinhado igual sua segunda imagem */
-  margin-top: 100px;   /* << move bloco da direita para baixo */
+  align-items: center;
+  margin-top: 100px;         /* ⬅️ DISTÂNCIA DO BLOCO DIREITO PRO TOPO (antes 100px) */
  gap: 0px;

-  margin-right: 300px; /* ajuste como quiser */
+  margin-right: 120px;      /* espaçamento horizontal já ajustado */
+
+  /* 💻 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) {
+    align-items: flex-start;
+    margin-top: 18px;
+  }
+
+  @media (max-width: 480px) {
+    margin-top: 16px;
+  }
 }

 /* Redes sociais */
@ -48,29 +125,53 @@
 .social-wrapper {
  width: 100%;
  display: flex;
-  justify-content: flex-start; /* joga pra esquerda */
-  margin-bottom: 0px; /* distância entre redes e botão */
+  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;
+  }
+}

 .social-section {
  display: flex;
  align-items: center;
  gap: 10px;
-  margin-bottom: 0px; /* aproxima do botão */
+  margin-bottom: 0;
+
+  @media (max-width: 480px) {
+    gap: 6px;
+  }
 }

 .social-label {
  font-size: 14px;
  font-weight: 500;
+
+  @media (max-width: 480px) {
+    font-size: 13px;
+  }
 }

-/* ÍCONES — agora brancos */
 .social-icon i {
  font-size: 22px;
-  color: #FFF; /* << branquinho */
+  color: #FFF;
  cursor: pointer;
  transition: 0.2s;
+
+  @media (max-width: 480px) {
+    font-size: 19px;
+  }
 }

 .social-icon i:hover {
@ -79,5 +180,17 @@

 /* Botão */
 .footer-button-wrapper {
-  margin-top: 0; /* tiramos o espaço que empurrava demais */
+  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;
+  }
 }
--- a/src/app/components/header/header.html
+++ b/src/app/components/header/header.html
@ -2,14 +2,14 @@

  <div class="header-top">

-    <!-- LOGO -->
-    <div class="logo-area">
+    <!-- LOGO + TÍTULO (CLICÁVEIS) -->
+    <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">
--- a/src/app/components/header/header.scss
+++ b/src/app/components/header/header.scss
@ -6,10 +6,12 @@
  background: #ffffff;
  font-family: 'Inter', sans-serif;
  display: flex;
-  flex-direction: column; /* permite faixa azul abaixo */
+  flex-direction: column;
 }

-/* Área do conteúdo superior do header */
+/* ===================== */
+/* TOP AREA (LOGO + MENU + BOTÕES) */
+/* ===================== */
 .header-top {
  width: 100%;
  height: 72px;
@ -17,51 +19,161 @@

  display: flex;
  align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between; /* Alinha logo / menu / botões */
  gap: 40px;
+
+  @media (max-width: 900px) {
+    gap: 20px;
+  }
+
+  @media (max-width: 768px) {
+    padding: 0 20px;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    height: auto;
+    gap: 12px;
+    padding: 12px 0;
+  }
 }

 /* ===================== */
 /* LOGO                  */
 /* ===================== */
+
 .logo {
  width: 44px;
  height: 44px;
+
+  /* NOTEBOOKS 1200–1399px */
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    width: 38px;
+    height: 38px;
+  }
+
+  @media (max-width: 1280px) {
+    width: 38px;
+    height: 38px;
+  }
+
+  @media (max-width: 1024px) {
+    width: 28px;
+    height: 28px;
+  }
+
+  @media (max-width: 480px) {
+    width: 26px;
+    height: 26px;
+  }
 }

 .logo-area {
-  margin-left: 50px;
  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 */
 }

-.logo-text .line {
-  color: #030FAA;
-  font-weight: 600;
-  font-size: 32px;
-}
-
+/* TEXTO DA LOGO */
+.logo-text .line,
 .logo-text .gestao {
-  color: #000000;
  font-weight: 600;
-  font-size: 32px;
+  font-size: 32px; /* desktop grande */
+
+  /* NOTEBOOKS 1200–1399px */
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 26px;
  }

+  @media (max-width: 1200px) {
+    font-size: 19px;
+  }
+
+  @media (max-width: 1024px) {
+    font-size: 18px;
+  }
+
+  @media (max-width: 900px) {
+    font-size: 17px;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 15px;
+  }
+}
+
+.logo-text .line { color: #030FAA; }
+.logo-text .gestao { color: #000000; }
+
 /* ===================== */
 /* MENU                  */
 /* ===================== */
 .menu {
-  gap: 32px;
  display: flex;
  align-items: center;
-  margin-left: 150px; /* <-- aumentei para afastar do logo */
+  gap: 24px;
+
+  @media (max-width: 1200px) {
+    gap: 18px;
+  }
+
+  @media (max-width: 1024px) {
+    gap: 14px;
+  }
+
+  @media (max-width: 900px) {
+    gap: 12px;
+  }
+
+  @media (max-width: 768px) {
+    gap: 10px;
+  }
+
+  @media (max-width: 600px) {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+  }
 }

 .menu-item {
-  font-size: 18px;
+  font-size: 16px;
  font-weight: 600;
  color: #000 !important;
  text-decoration: none !important;
+
+  /* NOTEBOOKS 1200–1399px */
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 14.5px;
+  }
+
+  @media (max-width: 1200px) {
+    font-size: 14px;
+  }
+
+  @media (max-width: 1024px) {
+    font-size: 13.5px;
+  }
+
+  @media (max-width: 900px) {
+    font-size: 13px;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 12.5px;
+  }
+
+  @media (max-width: 600px) {
+    font-size: 12px;
+  }
 }

 .menu-item:hover {
@ -75,7 +187,16 @@
  display: flex;
  align-items: center;
  gap: 12px;
-  margin-left: 32px;
+  margin-left: 0 !important;
+
+  @media (max-width: 900px) {
+    gap: 10px;
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    justify-content: center;
+  }
 }

 /* --- Botão Cadastre-se --- */
@ -84,41 +205,108 @@
  height: 41px;
  background: #E1E1E1;
  border-radius: 8px;
-  border: none !important;
  color: #000;
  font-size: 16px;
-  font-weight: 400;
-  transition: opacity 0.2s ease-in-out;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.08s ease;
+
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    width: 140px;
+    height: 36px;
+    font-size: 14px;
  }

-.btn-cadastrar:hover,
-.btn-cadastrar:active,
-.btn-cadastrar:focus {
-  background: #E1E1E1 !important;
-  opacity: 0.85;
-  box-shadow: none !important;
+  @media (max-width: 1024px) {
+    width: 140px;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  @media (max-width: 900px) {
+    width: 135px;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  @media (max-width: 768px) {
+    width: 120px;
+    height: 34px;
+    font-size: 13px;
+  }
+
+  @media (max-width: 600px) {
+    width: 45%;
+  }
+}
+
+.btn-cadastrar:hover {
+  background: #d7d7d7;
+}
+
+.btn-cadastrar:active {
+  background: rgba(225, 225, 225, 0.7) !important;
+  transform: scale(0.98);
 }

 /* --- Botão Login --- */
-/* Agora com a cor original **sem perder saturação** */
 .btn-login {
  width: 164px;
  height: 41px;
-  background: #E33DCF; /* cor original sólida */
+  background: #E33DCF;
  border-radius: 8px;
-  border: none !important;
  color: #fff;
  font-size: 16px;
-  font-weight: 400;
-  transition: opacity 0.2s ease-in-out;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.08s ease;
+
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    width: 140px;
+    height: 36px;
+    font-size: 14px;
  }

+  @media (max-width: 1024px) {
+    width: 150px;
+    height: 38px;
+    font-size: 15px;
+  }
+
+  @media (max-width: 900px) {
+    width: 135px;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  @media (max-width: 768px) {
+    width: 120px;
+    height: 34px;
+    font-size: 13px;
+  }
+
+  @media (max-width: 600px) {
+    width: 45%;
+  }
+}
+
+/* garante que o texto SEMPRE fique branco */
+.btn-login,
 .btn-login:hover,
 .btn-login:active,
 .btn-login:focus {
-  background: #E33DCF !important; /* mantém a mesma cor */
-  opacity: 0.85; /* apenas leve escurecida */
-  box-shadow: none !important;
+  color: #fff !important;
+}
+
+.btn-login:hover {
+  background: #d72bd0;
+}
+
+.btn-login:active {
+  background: rgba(227, 61, 207, 0.8) !important;
+  transform: scale(0.98);
 }

 /* ===================== */
@ -127,15 +315,27 @@
 .header-bar {
  width: 100%;
  height: 38.41px;
-  background: rgba(3, 15, 170, 0.93); /* #030FAA 93% */
+  background: rgba(3, 15, 170, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
+
+  @media (max-width: 480px) {
+    height: 34px;
+  }
 }

 .header-bar-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
-  font-family: 'Inter', sans-serif;
+
+  /* NOTEBOOKS 1200–1399px */
+  @media (min-width: 1200px) and (max-width: 1399.98px) {
+    font-size: 15px;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 14px;
+  }
 }
--- a/src/app/components/header/header.ts
+++ b/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 { }
--- a/src/app/pages/home/home.scss
+++ b/src/app/pages/home/home.scss
@ -1,62 +1,136 @@
-/* Container principal da seção de texto (sem limite de largura para acomodar o parágrafo de 985px) */
+/* =============================== */
+/* CONTAINER PRINCIPAL             */
+/* =============================== */
 .hero-text-section {
-  text-align: center; /* Mantém o título e o parágrafo centralizados */
+  text-align: center;
  padding-top: 50px;
  margin: 0 auto;
 }

-/* --- TÍTULO PRINCIPAL (AJUSTADO PARA DESALINHAMENTO) --- */
+/* =============================== */
+/* TÍTULO PRINCIPAL                */
+/* =============================== */
 .main-title {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 30px;

-  /* Importante: para mover o texto, o display precisa ser block/inline-block */
-  display: flex; /* Permite que os spans se alinhem e sejam manipulados */
-  flex-direction: column; /* Coloca os spans um abaixo do outro */
-  align-items: center; /* Centraliza visualmente o bloco de texto */
-  width: fit-content; /* Ajusta a largura do h1 ao conteúdo interno */
-  margin: 0 auto 80px auto; /* Centraliza o h1 na página */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: fit-content;
+  margin: 0 auto 80px auto;
+
+  /* ========== RESPONSIVO ========== */
+
+  /* até 1400px diminui um pouco */
+  @media (max-width: 1400px) {
+    font-size: 40px;
  }

+  /* tablets e notebooks pequenos */
+  @media (max-width: 1024px) {
+    font-size: 36px;
+  }
+
+  /* tablets menores */
+  @media (max-width: 768px) {
+    font-size: 32px;
+    margin-bottom: 50px;
+  }
+
+  /* celulares */
+  @media (max-width: 480px) {
+    font-size: 28px;
+    margin-bottom: 40px;
+  }
+}
+
+/* Primeira linha */
 .main-title .first-line {
  color: #E33DCF;
  font-weight: 500;
-  display: block; /* Garante que a transformação funcione */
+  display: block;
+  text-align: center;
+}

-  /* 👈 Movimenta a primeira linha para a esquerda (ajuste o valor se necessário) */
+/* Segunda linha */
+.main-title .second-line {
+  color: #E33DCF;
+  font-weight: 500;
+  display: block;
+  text-align: center;
+}
+
+/* -------- Efeito deslocado só em telas grandes -------- */
+@media (min-width: 1200px) {
+  .main-title .first-line {
    transform: translateX(-70px);
  }

  .main-title .second-line {
-  color: #E33DCF;
-  font-weight: 500;
-  display: block; /* Garante que a transformação funcione */
-  
-  /* 👉 Movimenta a segunda linha para a direita (ajuste o valor se necessário) */
    transform: translateX(100px) translateY(-6px);
  }
+}

+/* Em telas menores que 1200px o título fica plenamente centralizado */
+@media (max-width: 1199.98px) {
+  .main-title .first-line,
+  .main-title .second-line {
+    transform: none;     /* garante que não herda nenhum translate */
+  }
+}

-
-/* --- PARÁGRAFO CENTRAL (AJUSTADO PARA 985x132) --- */
+/* =============================== */
+/* PARÁGRAFO PRINCIPAL             */
+/* =============================== */
 .main-paragraph {
-  /* Propriedades de Layout ajustadas para proporção 985 x 132 */
-  width: 985px; /* Define a largura EXATA solicitada */
-  height: 132px; /* Define a altura EXATA solicitada */
-  margin: 0 auto 50px auto; /* Centraliza o bloco do parágrafo horizontalmente */
+  width: 985px;
+  height: 132px;
+  margin: 0 auto 50px auto;

-  /* Propriedades de Texto (Do Figma: Poppins, Mixed, 24, #000000) */
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  color: #000000;
  line-height: 1;
  font-weight: 400;
  text-align: center;
+
+  /* ========== RESPONSIVO ========== */
+
+  @media (max-width: 1400px) {
+    width: 65%;
+    height: auto;
+    font-size: 20px;
  }

-/* --- DESTAQUES NO PARÁGRAFO --- */
-.main-paragraph strong {
-  font-weight: 700; /* Todas as tags <strong> serão Bold */
+  /* Tablets */
+  @media (max-width: 1024px) {
+    width: 70%;
+    height: auto;
+    font-size: 20px;
+    line-height: 1.2;
+  }
+
+  /* Tablets pequenos */
+  @media (max-width: 768px) {
+    width: 80%;
+    font-size: 18px;
+    line-height: 1.25;
+    margin-bottom: 40px;
+  }
+
+  /* Celulares */
+  @media (max-width: 480px) {
+    width: 90%;
+    font-size: 16px;
+    line-height: 1.3;
+    margin-bottom: 30px;
+  }
+}
+
+.main-paragraph strong {
+  font-weight: 700;
 }
--- a/src/app/pages/register/register.html
+++ b/src/app/pages/register/register.html
@ -0,0 +1 @@
+<p>register works!</p>
--- a/src/app/pages/register/register.scss
+++ b/src/app/pages/register/register.scss
--- a/src/app/pages/register/register.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/register/register.ts
+++ b/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 {
+
+}