added & design register component

frontend/src/app/components/auth/auth.component.html

@@ -1 +1,3 @@
-<p>auth works!</p>
+<section>
+  <app-register></app-register>
+</section>

frontend/src/app/components/auth/auth.component.scss

@@ -0,0 +1,16 @@
+@import "./../../../assets/style/colors.scss";
+
+section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+}

frontend/src/app/components/auth/auth.component.ts

@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
+import { RegisterComponent } from './register/register.component';
 
 @Component({
   selector: 'app-auth',
   standalone: true,
-  imports: [],
+  imports: [RegisterComponent],
   templateUrl: './auth.component.html',
-  styleUrl: './auth.component.scss'
+  styleUrl: './auth.component.scss',
 })
-export class AuthComponent {
-
-}
+export class AuthComponent {}

frontend/src/app/components/auth/register/register.component.html

@@ -0,0 +1,27 @@
+<section>
+  <div class="headline">
+    <p>Movies, TV shows, and more</p>
+    <p>Watch whenever you want wherever you want</p>
+    <p>Enter your email to create or restart your subscription.</p>
+  </div>
+  <form
+    id="form"
+    class="register-form"
+    #taskForm="ngForm"
+    (ngSubmit)="onSubmit(taskForm)"
+    onsubmit="return false"
+  >
+    <input
+      type="mail"
+      id="mail"
+      name="mail"
+      #mail="ngModel"
+      placeholder="Email Address"
+      class="custom-input"
+      autocomplete="email"
+      [(ngModel)]="authData.mail"
+      required
+    />
+    <app-btn-large [value]="'Sign Up'"></app-btn-large>
+  </form>
+</section>

frontend/src/app/components/auth/register/register.component.scss

@@ -0,0 +1,62 @@
+@import "./../../../../assets/style/colors.scss";
+
+section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+}
+
+.headline {
+  p:nth-child(1) {
+    font-size: 48px;
+    font-weight: 700;
+    padding: 12px;
+  }
+  p:nth-child(2) {
+    font-size: 24px;
+    font-weight: 500;
+    padding: 12px;
+  }
+  p:nth-child(3) {
+    font-size: 18px;
+    font-weight: 400;
+    padding: 12px;
+  }
+}
+
+.register-form {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 500px;
+  padding: 24px;
+  input {
+    width: 70%;
+    padding: 12px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    background: transparent;
+    border: 2px solid $white;
+    border-radius: 24px;
+    font-size: 18px;
+    font-weight: 400;
+    transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
+      border-color 250ms ease-in-out;
+    &::placeholder {
+      color: rgba($white, 0.6);
+    }
+    &:focus {
+      outline: none;
+      background-color: rgba($white, 0.1);
+    }
+  }
+}

frontend/src/app/components/auth/register/register.component.spec.ts

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

frontend/src/app/components/auth/register/register.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { FormsModule, NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [BtnLargeComponent, FormsModule],
+  templateUrl: './register.component.html',
+  styleUrl: './register.component.scss',
+})
+export class RegisterComponent {
+  authData = {
+    mail: '',
+  };
+
+  onSubmit(ngForm: NgForm) {
+    if (ngForm.submitted && ngForm.form.valid) {
+      console.log('pass');
+    }
+  }
+}

frontend/src/app/components/home/home.component.html

@@ -1,4 +1,5 @@
 <section class="bg-home">
   <app-header></app-header>
+  <app-auth></app-auth>
   <app-footer></app-footer>
 </section>

frontend/src/app/components/home/home.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
+import { AuthComponent } from '../auth/auth.component';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [HeaderComponent, FooterComponent],
+  imports: [HeaderComponent, FooterComponent, AuthComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })