EduardoDev
/
line-gestao-frontend
mirror of https://github.com/eduardolopesx03/line-gestao-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: registro-login 

feat: registro-login
This commit is contained in:
Eduardo Lopes 2025-12-10 23:02:54 -03:00 committed by GitHub
parent 3798a669c7 e40e93280d
commit d470f645c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 643 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
angular.json
View File

@ -100,5 +100,8 @@
} }
} }
} }
},
"cli": {
"analytics": false
} }
} }

32
src/app/components/cta-button/cta-button.scss
View File

@ -1,8 +1,11 @@
.cta-button { .cta-button {
width: 360px; width: 100%;
max-width: 360px;
height: 66px; height: 66px;
margin-top: 50px; /* Adiciona espaço entre os cards e o botão */ margin-top: 50px;
margin-bottom: 100px; /* Adiciona espaço após o botão */ margin-bottom: 100px;
padding-left: 50px;
padding-right: 50px;
background-color: rgba(201, 30, 181, 0.76); background-color: rgba(201, 30, 181, 0.76);
color: #FFFFFF; color: #FFFFFF;
@ -17,6 +20,29 @@
border-radius: 4px; border-radius: 4px;
transition: background-color 0.3s ease; 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 { .cta-button:hover {

10
src/app/components/cta-button/cta-button.spec.ts
View File

@ -1,18 +1,18 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CtaButtonComponent } from './cta-button';
import { CtaButton } from './cta-button';
describe('CtaButton', () => { describe('CtaButton', () => {
let component: CtaButton; let component: CtaButtonComponent;
let fixture: ComponentFixture<CtaButton>; let fixture: ComponentFixture<CtaButtonComponent>;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [CtaButton] imports: [CtaButtonComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(CtaButton); fixture = TestBed.createComponent(CtaButtonComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });

118
src/app/components/feature-card/feature-card.scss
View File

@ -1,72 +1,136 @@
.feature-card-container { .feature-card-container {
/* Garante que o container flexível do Bootstrap organize bem os cards */
padding: 10px; padding: 10px;
} }
/* Container principal do card */ /* CARD BASE — mantém o design exato do Figma em desktops */
.feature-card { .feature-card {
/* ... estilos anteriores ... */
border: 1px solid #000000; border: 1px solid #000000;
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 30px; padding: 30px;
border-radius: 5px; border-radius: 5px;
/* ❌ Remover: cursor: pointer; (ou definir como default) */
cursor: default; cursor: default;
/* 📐 DEFININDO TAMANHO FIXO DO FIGMA */ /* DESKTOP (layout original) */
width: 365px; /* Largura EXATA solicitada */ width: 365px;
height: 169px; /* Altura EXATA solicitada */ height: 169px;
/* Permite que o texto quebre ou esconda se exceder o limite */
overflow: hidden; overflow: hidden;
/* Garante que o texto comece sempre do topo, mesmo com altura fixa */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
/* ================================
📱 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%;
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;
}
} }
/* ... o restante do CSS se mantém ... */ /* HOVER */
/* Efeito de HOVER (Mouse passa por cima) */
.feature-card.hover-state { .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 { .card-title {
/* Propriedades do Figma: Inter, Bold, 21, #E33DCF */
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 20px; font-size: 20px;
font-weight: 700; /* Bold */ font-weight: 700;
color: #E33DCF; /* Rosa */ color: #E33DCF;
margin-top: -15px; margin-top: -15px;
margin-bottom: 10px; margin-bottom: 10px;
display: flex; /* Para alinhar ícone e texto */
display: flex;
align-items: center; align-items: center;
justify-content: 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;
margin-top: -5px;
}
} }
/* Estilização do Ícone */ /* ÍCONE */
.card-icon { .card-icon {
margin-right: 10px; 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;
}
/* Mobile */
@media (max-width: 480px) {
font-size: 20px;
}
} }
/* --- DESCRIÇÃO/PARÁGRAFO DO CARD --- */ /* -------------------------
DESCRIÇÃO DO CARD
-------------------------- */
.card-description { .card-description {
/* Propriedades do Figma: Inter, Mixed, 18, Preto */
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 17px; font-size: 17px;
color: #000000; color: #000000;
line-height: 1; line-height: 1;
padding-left: 15px; 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;
padding-left: 8px;
}
} }
/* Garante que o começo da frase (em negrito) tenha o peso correto */
.card-description strong { .card-description strong {
font-weight: 700; /* Bold */ font-weight: 700;
} }

2
src/app/components/footer/footer.html
View File

@ -31,7 +31,7 @@
height="46.84" height="46.84"
background="rgba(201, 30, 181, 0.76)" background="rgba(201, 30, 181, 0.76)"
color="#FFFFFF" color="#FFFFFF"
fontSize="13" fontSize="11"
fontWeight="700"> fontWeight="700">
</app-cta-button> </app-cta-button>
</div> </div>

141
src/app/components/footer/footer.scss
View File

@ -5,7 +5,7 @@
.footer-container { .footer-container {
width: 100%; width: 100%;
background: rgba(3, 15, 170, 0.93); background: rgba(3, 15, 170, 0.93);
padding: 25px 60px; padding: 10px 60px; /* ⬅️ TOPO/FUNDO DO FOOTER (antes 16px 60px) */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -13,6 +13,27 @@
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
color: #FFFFFF; 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 { .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 { .footer-left p {
margin: 0 0 4px 270px; /* 🔁 PADRÃO PARA DESKTOPS E NOTEBOOKS: MESMO ESPAÇAMENTO HORIZONTAL */
font-size: 14px; /* levemente menor como no exemplo */ margin: 0 0 4px 120px;
font-size: 14px;
font-weight: 600; 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 { .footer-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; /* << alinhado igual sua segunda imagem */ align-items: center;
margin-top: 100px; /* << move bloco da direita para baixo */ margin-top: 100px; /* ⬅️ DISTÂNCIA DO BLOCO DIREITO PRO TOPO (antes 100px) */
gap: 0px; 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 */ /* Redes sociais */
@ -48,29 +125,53 @@
.social-wrapper { .social-wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; /* joga pra esquerda */ justify-content: flex-start;
margin-bottom: 0px; /* distância entre redes e botão */ 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 { .social-section {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin-bottom: 0px; /* aproxima do botão */ margin-bottom: 0;
@media (max-width: 480px) {
gap: 6px;
}
} }
.social-label { .social-label {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@media (max-width: 480px) {
font-size: 13px;
}
} }
/* ÍCONES — agora brancos */
.social-icon i { .social-icon i {
font-size: 22px; font-size: 22px;
color: #FFF; /* << branquinho */ color: #FFF;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
@media (max-width: 480px) {
font-size: 19px;
}
} }
.social-icon i:hover { .social-icon i:hover {
@ -79,5 +180,17 @@
/* Botão */ /* Botão */
.footer-button-wrapper { .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;
}
} }

6
src/app/components/header/header.html
View File

@ -2,14 +2,14 @@
<div class="header-top"> <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"> <img src="logo.jpg" alt="Logo" class="logo">
<div class="logo-text ms-2"> <div class="logo-text ms-2">
<span class="line">Line</span><span class="gestao">Gestão</span> <span class="line">Line</span><span class="gestao">Gestão</span>
</div> </div>
</div> </a>
<!-- MENU --> <!-- MENU -->
<nav class="menu"> <nav class="menu">

270
src/app/components/header/header.scss
View File

@ -6,10 +6,12 @@
background: #ffffff; background: #ffffff;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
display: flex; 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 { .header-top {
width: 100%; width: 100%;
height: 72px; height: 72px;
@ -17,51 +19,161 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: space-between; /* Alinha logo / menu / botões */
gap: 40px; 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 */
/* ===================== */ /* ===================== */
.logo { .logo {
width: 44px; width: 44px;
height: 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 { .logo-area {
margin-left: 50px;
display: flex; display: flex;
align-items: center; 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 { /* TEXTO DA LOGO */
color: #030FAA; .logo-text .line,
font-weight: 600;
font-size: 32px;
}
.logo-text .gestao { .logo-text .gestao {
color: #000000;
font-weight: 600; 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 */
/* ===================== */ /* ===================== */
.menu { .menu {
gap: 32px;
display: flex; display: flex;
align-items: center; 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 { .menu-item {
font-size: 18px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #000 !important; color: #000 !important;
text-decoration: none !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 { .menu-item:hover {
@ -75,7 +187,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; 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 --- */ /* --- Botão Cadastre-se --- */
@ -84,41 +205,108 @@
height: 41px; height: 41px;
background: #E1E1E1; background: #E1E1E1;
border-radius: 8px; border-radius: 8px;
border: none !important;
color: #000; color: #000;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 600;
transition: opacity 0.2s ease-in-out; 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: 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, .btn-cadastrar:hover {
.btn-cadastrar:active, background: #d7d7d7;
.btn-cadastrar:focus { }
background: #E1E1E1 !important;
opacity: 0.85; .btn-cadastrar:active {
box-shadow: none !important; background: rgba(225, 225, 225, 0.7) !important;
transform: scale(0.98);
} }
/* --- Botão Login --- */ /* --- Botão Login --- */
/* Agora com a cor original **sem perder saturação** */
.btn-login { .btn-login {
width: 164px; width: 164px;
height: 41px; height: 41px;
background: #E33DCF; /* cor original sólida */ background: #E33DCF;
border-radius: 8px; border-radius: 8px;
border: none !important;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 600;
transition: opacity 0.2s ease-in-out; 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:hover,
.btn-login:active, .btn-login:active,
.btn-login:focus { .btn-login:focus {
background: #E33DCF !important; /* mantém a mesma cor */ color: #fff !important;
opacity: 0.85; /* apenas leve escurecida */ }
box-shadow: none !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 { .header-bar {
width: 100%; width: 100%;
height: 38.41px; height: 38.41px;
background: rgba(3, 15, 170, 0.93); /* #030FAA 93% */ background: rgba(3, 15, 170, 0.93);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@media (max-width: 480px) {
height: 34px;
}
} }
.header-bar-text { .header-bar-text {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
font-weight: 700; 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;
}
} }

8
src/app/components/header/header.ts
View File

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

124
src/app/pages/home/home.scss
View File

@ -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 { .hero-text-section {
text-align: center; /* Mantém o título e o parágrafo centralizados */ text-align: center;
padding-top: 50px; padding-top: 50px;
margin: 0 auto; margin: 0 auto;
} }
/* --- TÍTULO PRINCIPAL (AJUSTADO PARA DESALINHAMENTO) --- */ /* =============================== */
/* TÍTULO PRINCIPAL */
/* =============================== */
.main-title { .main-title {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 48px; font-size: 48px;
line-height: 1.2; line-height: 1.2;
margin-bottom: 30px; margin-bottom: 30px;
/* Importante: para mover o texto, o display precisa ser block/inline-block */ display: flex;
display: flex; /* Permite que os spans se alinhem e sejam manipulados */ flex-direction: column;
flex-direction: column; /* Coloca os spans um abaixo do outro */ align-items: center;
align-items: center; /* Centraliza visualmente o bloco de texto */
width: fit-content; /* Ajusta a largura do h1 ao conteúdo interno */ width: fit-content;
margin: 0 auto 80px auto; /* Centraliza o h1 na página */ 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 { .main-title .first-line {
color: #E33DCF; color: #E33DCF;
font-weight: 500; 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) */
transform: translateX(-70px);
} }
/* Segunda linha */
.main-title .second-line { .main-title .second-line {
color: #E33DCF; color: #E33DCF;
font-weight: 500; font-weight: 500;
display: block; /* Garante que a transformação funcione */ display: block;
text-align: center;
/* 👉 Movimenta a segunda linha para a direita (ajuste o valor se necessário) */
transform: translateX(100px) translateY(-6px);
} }
/* -------- Efeito deslocado só em telas grandes -------- */
@media (min-width: 1200px) {
.main-title .first-line {
transform: translateX(-70px);
}
.main-title .second-line {
transform: translateX(100px) translateY(-6px);
}
}
/* --- PARÁGRAFO CENTRAL (AJUSTADO PARA 985x132) --- */ /* 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 PRINCIPAL */
/* =============================== */
.main-paragraph { .main-paragraph {
/* Propriedades de Layout ajustadas para proporção 985 x 132 */ width: 985px;
width: 985px; /* Define a largura EXATA solicitada */ height: 132px;
height: 132px; /* Define a altura EXATA solicitada */ margin: 0 auto 50px auto;
margin: 0 auto 50px auto; /* Centraliza o bloco do parágrafo horizontalmente */
/* Propriedades de Texto (Do Figma: Poppins, Mixed, 24, #000000) */
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
font-size: 24px; font-size: 24px;
color: #000000; color: #000000;
line-height: 1; line-height: 1;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
/* ========== RESPONSIVO ========== */
@media (max-width: 1400px) {
width: 65%;
height: auto;
font-size: 20px;
}
/* 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;
}
} }
/* --- DESTAQUES NO PARÁGRAFO --- */
.main-paragraph strong { .main-paragraph strong {
font-weight: 700; /* Todas as tags <strong> serão Bold */ font-weight: 700;
} }

1
src/app/pages/register/register.html Normal file
View File

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

0
src/app/pages/register/register.scss Normal file
View File

23
src/app/pages/register/register.spec.ts Normal file
View File

@ -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();
});
});

11
src/app/pages/register/register.ts Normal file
View File

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