added & design btn-large component

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

@@ -2,5 +2,7 @@
   <div class="logo">
     <img src="./../../../../assets/img/logo_full.svg" alt="" />
   </div>
-  <div class="btn">Log in</div>
+  <div class="btn">
+    <app-btn-large [value]="'Log in'"></app-btn-large>
+  </div>
 </header>

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

@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
+import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [],
+  imports: [BtnLargeComponent],
   templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
+  styleUrl: './header.component.scss',
 })
-export class HeaderComponent {
+export class HeaderComponent {}
-
-}

frontend/src/app/shared/components/btn-large/btn-large.component.html

@@ -0,0 +1,3 @@
+<button class="btn" type="{{ type }}" [disabled]="disabled">
+  {{ value }}
+</button>

frontend/src/app/shared/components/btn-large/btn-large.component.scss

@@ -0,0 +1,27 @@
+@import "./../../../../assets/style/colors.scss";
+
+.btn {
+  padding: 12px 24px;
+  width: fit-content;
+  box-shadow: 1px 1px 3px $gray;
+  border-radius: 24px;
+  color: $white;
+  background-color: $blue;
+  border: 1px solid $blue;
+  font-size: 18px;
+  font-weight: 600;
+  transition: background-color 300ms ease-in-out, color 300ms ease-in-out,
+    border 300ms ease-in-out;
+  cursor: pointer;
+  &:not(:disabled):hover {
+    color: $blue;
+    background-color: $white;
+    border: 1px solid $white;
+  }
+  &:disabled {
+    background-color: $gray;
+    color: darken($gray, 20%);
+    border: 1px solid $gray;
+    cursor: default;
+  }
+}

frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts

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

frontend/src/app/shared/components/btn-large/btn-large.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-large',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './btn-large.component.html',
+  styleUrl: './btn-large.component.scss',
+})
+export class BtnLargeComponent {
+  @Input() type: string = '';
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+}