landing-page

angular.json

@@ -20,18 +20,17 @@
             "outputPath": "dist/mt-works",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/app/styles"]
+            },
             "scripts": []
           },
           "configurations": {
@@ -82,17 +81,12 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -100,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "bab7b6ce-49c6-448c-b5a5-4a9fd1fa3fa1"
   }
 }

package.json

@@ -11,14 +11,20 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^16.2.0",
+    "@angular/cdk": "^17.0.4",
     "@angular/common": "^16.2.0",
     "@angular/compiler": "^16.2.0",
     "@angular/core": "^16.2.0",
+    "@angular/flex-layout": "^15.0.0-beta.42",
     "@angular/forms": "^16.2.0",
+    "@angular/material": "16.2.12",
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "@ngrx/store": "^17.0.1",
+    "node-sass": "^9.0.0",
     "rxjs": "~7.8.0",
+    "sass-loader": "^13.3.3",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },

src/app/app-routing.module.ts

@@ -1,10 +1,25 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AppComponent } from './app.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: AppComponent,
+    children: [
+      {
+        path: '',
+        loadChildren: () =>
+          import('./landing-page/landing-page.module').then(
+            (m) => m.LandingPageModule
+          ),
+      },
+    ],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -3,16 +3,12 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
+  declarations: [AppComponent],
+  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/landing-page/benefits/benefits.component.html

@@ -0,0 +1,44 @@
+<section class="benefits" fxLayout="column" fxLayoutAlign="start center">
+  <h1>Enjoy the benefits of having everything in a single platform</h1>
+  <div fxLayout="row" fxLayoutAlign="center center" class="w-100">
+    <div
+      class="gap-30"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxFlex.gt-md="33"
+      fxFlex.lt-md="100"
+    >
+      <p class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../assets/images/correct.png" alt="" title="" />
+        <span>E-recruitment</span>
+      </p>
+      <p class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../assets/images/correct.png" alt="" title="" />
+        <span>E-recruitment</span>
+      </p>
+    </div>
+    <img
+      src="../../../assets/images/benefits.png"
+      alt=""
+      title=""
+      fxHide.lt-md
+    />
+    <div
+      class="gap-30"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxFlex.gt-md="33"
+      fxFlex.lt-md="100"
+    >
+      <p class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../assets/images/correct.png" alt="" title="" />
+        <span>E-recruitment</span>
+      </p>
+      <p class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+        <img src="../../../assets/images/correct.png" alt="" title="" />
+        <span>E-recruitment</span>
+      </p>
+    </div>
+  </div>
+  <button>Get Started for free</button>
+</section>

src/app/landing-page/benefits/benefits.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BenefitsComponent } from './benefits.component';
+
+describe('BenefitsComponent', () => {
+  let component: BenefitsComponent;
+  let fixture: ComponentFixture<BenefitsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BenefitsComponent]
+    });
+    fixture = TestBed.createComponent(BenefitsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/benefits/benefits.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-benefits',
+  templateUrl: './benefits.component.html',
+  styleUrls: ['./benefits.component.scss']
+})
+export class BenefitsComponent {
+
+}

src/app/landing-page/footer/footer.component.html

@@ -0,0 +1,65 @@
+<section class="footer" fxLayout="row wrap" fxLayoutAlign="space-around start">
+  <div
+    class="gap-30"
+    fxLayout="column"
+    fxLayoutAlign="start start"
+    fxFlex.lt-md="50"
+  >
+    <img src="../../../assets/images/footer_logo.png" alt="" title="" />
+    <div fxLayout="row" fxLayoutAlign="start start" class="gap-10">
+      <img src="../../../assets/images/facebook.png" alt="" title="" />
+      <img src="../../../assets/images/linked.png" alt="" title="" />
+      <img src="../../../assets/images/twitter.png" alt="" title="" />
+      <img src="../../../assets/images/insta.png" alt="" title="" />
+    </div>
+  </div>
+  <div fxFlex.lt-md="50">
+    <h2>How it works</h2>
+    <ul>
+      <li>Hire Employees</li>
+      <li>Hire Contractors</li>
+      <li>Run Global Payroll</li>
+      <li>Integrations</li>
+    </ul>
+  </div>
+  <div fxFlex.lt-md="50">
+    <h2>Solutions</h2>
+    <ul>
+      <li>Compliance</li>
+      <li>Payments</li>
+      <li>For Legal Teams</li>
+      <li>For Hiring Managers</li>
+      <li>Startup</li>
+      <li>Enterprise</li>
+    </ul>
+  </div>
+  <div fxFlex.lt-md="50">
+    <h2>Resources</h2>
+    <ul>
+      <li>About</li>
+      <li>Support hub</li>
+      <li>Global Hiring Guide</li>
+      <li>Careers</li>
+    </ul>
+  </div>
+  <hr class="hr" />
+
+  <div
+    class="highlight w-100"
+    fxLayout="row wrap"
+    fxLayoutAlign="space-between center"
+  >
+    <p fxFlex.lt-md="100">© Copyright 2023. All Rights Reserved.</p>
+    <ul
+      class="gap-30"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxFlex.lt-md="100"
+    >
+      <li>Privacy Policy</li>
+      <li>Terms of Service</li>
+      <li>Cookie policy</li>
+      <li>Cookie Settings</li>
+    </ul>
+  </div>
+</section>

src/app/landing-page/footer/footer.component.scss

@@ -0,0 +1,5 @@
+.hr {
+  width: 100%;
+  background-color: #fff;
+  margin: 10px 0;
+}

src/app/landing-page/footer/footer.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FooterComponent]
+    });
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/footer/footer.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent {
+
+}

src/app/landing-page/get-start/get-start.component.html

@@ -0,0 +1,32 @@
+<section
+  class="get-start"
+  fxLayout="row wrap"
+  fxLayoutAlign="space-between start"
+>
+  <div class="get-start__description" fxFlex.lt-md="100" fxFlex.gt-sm="50">
+    <h1>Work more Structured <br />and Organized</h1>
+    <p>
+      A comprehensive professional technology platform that follows the superior
+      business model by offering multiple human capital management solutions in
+      a single platform. <br />
+      <span class="mt-2 d-block">
+        The “MTWORK” platform is unique in that it is a reliable platform that
+        achieves comprehensiveness for managing remote work, provides effective
+        digital transformation, and directs the work style in line with the
+        developments of the times. To include all parties under one platform
+        with an integrated system that meets the needs of employers and
+        employees.
+      </span>
+    </p>
+    <button class="get-start__btn">Get Started</button>
+  </div>
+  <div
+    fxFlex.lt-md="100"
+    fxFlex.gt-sm="50"
+    fxLayout="row"
+    fxLayoutAlign="end center"
+    fxHide.lt-md=""
+  >
+    <img src="assets/images/get-start.png" alt="" title="" />
+  </div>
+</section>

src/app/landing-page/get-start/get-start.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GetStartComponent } from './get-start.component';
+
+describe('GetStartComponent', () => {
+  let component: GetStartComponent;
+  let fixture: ComponentFixture<GetStartComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GetStartComponent]
+    });
+    fixture = TestBed.createComponent(GetStartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/get-start/get-start.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-get-start',
+  templateUrl: './get-start.component.html',
+  styleUrls: ['./get-start.component.scss']
+})
+export class GetStartComponent {
+
+}

src/app/landing-page/landing-header/landing-header.component.html

@@ -0,0 +1,16 @@
+<header fxLayout="row wrap" fxLayoutAlign="space-between center">
+  <main fxLayout="row wrap" fxLayoutAlign="start center">
+    <img src="assets/images/logo.svg" alt="" title="" />
+
+    <ul fxLayout="row wrap" fxLayoutAlign="center center" fxHide.lt-md="">
+      <li>Platform</li>
+      <li>Why</li>
+      <li>Pricing</li>
+    </ul>
+  </main>
+
+  <div class="actions" fxLayout="row" fxLayoutAlign="end center">
+    <button class="actions__signin">Sign in</button>
+    <button class="actions__sign-up">Sign Up</button>
+  </div>
+</header>

src/app/landing-page/landing-header/landing-header.component.scss

@@ -0,0 +1,55 @@
+@mixin header-theme() {
+  app-landing-header {
+    header {
+      padding: 20px 40px;
+      width: 100%;
+      background: url("../../../assets/images/main-bk.png") no-repeat left
+        center;
+      background-size: contain;
+      background-color: $main-color;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      border-radius: 18px;
+      main {
+        gap: 50px;
+
+        ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          gap: 30px;
+          li {
+            color: $white-color;
+            font-size: 17px;
+            font-weight: 300;
+            cursor: pointer;
+            transition: all 0.5s;
+            &:hover {
+              color: $off-white;
+            }
+          }
+        }
+      }
+      .actions {
+        margin: 0;
+        padding: 0;
+        gap: 20px;
+        &__signin {
+          background-color: transparent;
+          border: none;
+          color: $white-color;
+          font-size: 15px;
+          font-weight: 300;
+        }
+
+        &__sign-up {
+          background-color: $light-blue;
+          color: $white-color;
+          border: 1px solid $white-color;
+          padding: 10px 20px;
+          border-radius: 30px;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+}

src/app/landing-page/landing-header/landing-header.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingHeaderComponent } from './landing-header.component';
+
+describe('LandingHeaderComponent', () => {
+  let component: LandingHeaderComponent;
+  let fixture: ComponentFixture<LandingHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LandingHeaderComponent]
+    });
+    fixture = TestBed.createComponent(LandingHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/landing-header/landing-header.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-landing-header',
+  templateUrl: './landing-header.component.html',
+  styleUrls: ['./landing-header.component.scss']
+})
+export class LandingHeaderComponent {
+
+}

src/app/landing-page/landing-page-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LandingPageComponent } from './landing-page.component';
+
+const routes: Routes = [{ path: '', component: LandingPageComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LandingPageRoutingModule {}

src/app/landing-page/landing-page-theme.scss

@@ -0,0 +1,269 @@
+@mixin landing-page-theme() {
+  app-landing-page {
+    .landingPage {
+      width: 100%;
+      height: 100%;
+    }
+    .get-start {
+      width: 100%;
+      background-color: $off-white;
+      border-radius: 20px;
+      padding: 40px 40px;
+      margin-top: 20px;
+      &__description {
+        h1 {
+          color: $main-color;
+          font-size: 50px;
+          font-weight: 500;
+        }
+        p {
+          color: $main-color;
+          font-size: 20px;
+          font-weight: 300;
+          margin-top: 20px;
+          font-family: "Roboto";
+        }
+      }
+      &__btn {
+        background-color: $main-color;
+        padding: 15px 30px;
+        border-radius: 50px;
+        color: $white-color;
+        margin-top: 20px;
+        border: 1px solid $main-color;
+        cursor: pointer;
+        transition: all 0.5s;
+        &:hover {
+          background-color: $main-blue;
+          border: 1px solid $main-blue;
+        }
+      }
+    }
+    .platform {
+      width: 100%;
+      padding: 20px 40px;
+      background-color: $white-color;
+      div {
+        span {
+          font-size: 40px;
+          color: $main-color;
+        }
+        p {
+          color: $main-color;
+          font-size: 20px;
+          font-weight: 200;
+          margin-top: 20px;
+          font-family: "Roboto";
+        }
+      }
+    }
+
+    .vision {
+      background-color: $off-white;
+      padding: 40px 40px;
+      div {
+        background-color: $open-light-blue;
+        padding: 20px;
+        border-radius: 20px;
+        h2 {
+          font-size: 17px;
+          margin: 10px 0;
+          color: $main-color;
+          font-weight: bold;
+        }
+        p {
+          font-size: 13px;
+          color: $main-color;
+          text-align: center;
+          font-family: "Roboto";
+        }
+      }
+    }
+
+    .tools {
+      background-color: $white-color;
+      border-radius: 20px;
+      padding: 40px 40px;
+      margin-top: 20px;
+      h1 {
+        text-align: center;
+        color: $main-color;
+        font-weight: 500;
+        font-size: 25px;
+        margin-bottom: 2rem;
+      }
+      p {
+        text-align: center;
+        margin: 30px 0;
+        color: $main-color;
+        font-size: 18px;
+        font-family: "Roboto";
+      }
+    }
+
+    .promoting {
+      width: 100%;
+      background-color: $off-white;
+      margin-top: 20px;
+      padding: 40px 40px;
+      h1 {
+        text-align: center;
+        color: $main-color;
+        font-size: 25px;
+        margin-bottom: 20px;
+      }
+
+      p {
+        font-size: 18px;
+        font-family: "Roboto";
+        font-weight: 400;
+        color: $main-color;
+        text-align: center;
+        margin-bottom: 20px;
+      }
+
+      .cards {
+        gap: 15px;
+        div {
+          background-color: $open-light-blue;
+          padding: 20px;
+          border-radius: 20px;
+          width: 300px;
+          @media (max-width: 767px) {
+            width: 100%;
+          }
+          p {
+            font-size: 18px;
+            color: $main-color;
+            margin: 10px 0;
+          }
+
+          span {
+            color: $main-color;
+            font-size: 15px;
+            font-family: "Roboto";
+            font-weight: 300;
+          }
+        }
+      }
+    }
+
+    .benefits {
+      background-color: $white-color;
+      border-radius: 20px;
+      padding: 20px 40px;
+      margin-top: 20px;
+      width: 100%;
+      h1 {
+        color: $main-color;
+        font-size: 25px;
+        margin-bottom: 40px;
+      }
+      button {
+        background-color: $main-color;
+        border: 1px solid $main-color;
+        font-size: 15px;
+        padding: 10px 30px;
+        border-radius: 30px;
+        margin-top: 30px;
+        color: $white-color;
+        transition: all 0.5s;
+        cursor: pointer;
+        &:hover {
+          background-color: $main-blue;
+          border: 1px solid $main-blue;
+        }
+      }
+    }
+
+    .why-mt {
+      width: 100%;
+      background-color: $off-white;
+      padding: 40px 40px;
+      h1 {
+        color: $main-color;
+        font-size: 25px;
+        margin-bottom: 20px;
+        img {
+          width: 100px;
+          margin: 0 5px;
+        }
+      }
+
+      ul {
+        list-style: none;
+        gap: 30px;
+        padding: 20px 0;
+        li {
+          span {
+            color: $main-color;
+            font-family: "Roboto";
+            font-size: 17px;
+          }
+        }
+      }
+
+      button {
+        background-color: $main-color;
+        font-size: 15px;
+        color: $white-color;
+        border-radius: 20px;
+        border: 1px solid $main-color;
+        padding: 10px 30px;
+        transition: all 0.5s;
+        cursor: pointer;
+        border: 1px solid $main-color;
+        &:hover {
+          background-color: $main-blue;
+          border: 1px solid $main-blue;
+        }
+      }
+    }
+    .footer {
+      width: 100%;
+      padding: 40px 40px;
+      background-color: $main-color;
+      div {
+        @media (max-width: 767px) {
+          margin-top: 20px;
+        }
+        h2 {
+          color: $white-color;
+          font-size: 18px;
+          margin-bottom: 10px;
+        }
+        ul {
+          list-style: none;
+          li {
+            color: $white-color;
+            font-family: "Roboto";
+            font-weight: 300;
+            font-size: 14px;
+            margin-bottom: 10px;
+            cursor: pointer;
+          }
+        }
+      }
+      .highlight {
+        padding: 20px 40px;
+        p {
+          color: $white-color;
+          font-size: 18px;
+          font-weight: 300;
+          font-family: "Roboto";
+          @media (max-width: 767px) {
+            font-size: 15px;
+            margin-bottom: 20px;
+          }
+        }
+
+        ul {
+          li {
+            font-size: 15px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

src/app/landing-page/landing-page.component.html

@@ -0,0 +1,16 @@
+<section class="landingPage">
+  <div class="plr-20">
+    <app-landing-header></app-landing-header>
+    <app-get-start></app-get-start>
+  </div>
+
+  <app-paltform></app-paltform>
+  <app-vision></app-vision>
+  <app-tools></app-tools>
+  <app-promoting></app-promoting>
+  <app-benefits></app-benefits>
+  <app-why-mt></app-why-mt>
+  <app-footer></app-footer>
+</section>
+
+<router-outlet></router-outlet>

src/app/landing-page/landing-page.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingPageComponent } from './landing-page.component';
+
+describe('LandingPageComponent', () => {
+  let component: LandingPageComponent;
+  let fixture: ComponentFixture<LandingPageComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LandingPageComponent]
+    });
+    fixture = TestBed.createComponent(LandingPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/landing-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-landing-page',
+  templateUrl: './landing-page.component.html',
+  styleUrls: ['./landing-page.component.scss']
+})
+export class LandingPageComponent {
+
+}

src/app/landing-page/landing-page.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LandingPageRoutingModule } from './landing-page-routing.module';
+import { LandingPageComponent } from './landing-page.component';
+import { LandingHeaderComponent } from './landing-header/landing-header.component';
+import { FooterComponent } from './footer/footer.component';
+import { GetStartComponent } from './get-start/get-start.component';
+import { PaltformComponent } from './paltform/paltform.component';
+import { VisionComponent } from './vision/vision.component';
+import { ToolsComponent } from './tools/tools.component';
+import { PromotingComponent } from './promoting/promoting.component';
+import { BenefitsComponent } from './benefits/benefits.component';
+import { WhyMtComponent } from './why-mt/why-mt.component';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  declarations: [
+    LandingPageComponent,
+    LandingHeaderComponent,
+    FooterComponent,
+    GetStartComponent,
+    PaltformComponent,
+    VisionComponent,
+    ToolsComponent,
+    PromotingComponent,
+    BenefitsComponent,
+    WhyMtComponent,
+  ],
+  imports: [CommonModule, LandingPageRoutingModule, SharedModule],
+})
+export class LandingPageModule {}

src/app/landing-page/paltform/paltform.component.html

@@ -0,0 +1,27 @@
+<section class="platform" fxLayout="row wrap" fxLayoutAlign="start start">
+  <div fxFlex.lt-md="100" fxFlex.gt-sm="50">
+    <span>
+      <img src="assets/images/mt-world.png" alt="" title="" />
+    </span>
+    <span class="plr-1"
+      >the only HR platform with everything you need, for everyone</span
+    >
+    <p>
+      We have witnessed development in the world of <br />
+      technology, and we are keen to leave a distinctive and <br />
+      unique mark on the world of business. <br />
+      “MTWORK” platform has set out to fully occupy by <br />offering the latest
+      details for managing remote work <br />
+      from everywhere around the world.
+    </p>
+  </div>
+  <div
+    fxFlex.lt-md="100"
+    fxFlex.gt-sm="50"
+    fxLayout="row"
+    fxLayoutAlign="end center"
+    fxHide.lt-md
+  >
+    <img src="assets/images/platform.png" alt="" title="" />
+  </div>
+</section>

src/app/landing-page/paltform/paltform.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaltformComponent } from './paltform.component';
+
+describe('PaltformComponent', () => {
+  let component: PaltformComponent;
+  let fixture: ComponentFixture<PaltformComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PaltformComponent]
+    });
+    fixture = TestBed.createComponent(PaltformComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/paltform/paltform.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-paltform',
+  templateUrl: './paltform.component.html',
+  styleUrls: ['./paltform.component.scss']
+})
+export class PaltformComponent {
+
+}

src/app/landing-page/promoting/promoting.component.html

@@ -0,0 +1,33 @@
+<section class="promoting" fxLayout="column wrap" fxLayoutAlign="start center">
+  <h1>
+    Promoting remote work, developing its management, and investing in <br />
+    human capital and talents from all over the world.
+  </h1>
+  <p>
+    Whether you have a domestic team or a growing worldwide workforce, MTWork HR
+    is custom-built for every worker, in <br />
+    any country, so you can compliantly manage everyone in one place.
+  </p>
+  <div class="cards" fxLayout="row wrap" fxLayoutAlign="center center">
+    <div fxLayout="column" fxLayoutAlign="center center">
+      <img src="assets/images/img_1.png" alt="" title="" />
+      <p>G2 MOMENTUM LEADER</p>
+      <span>Spring 2023</span>
+    </div>
+    <div fxLayout="column" fxLayoutAlign="center center">
+      <img src="assets/images/img_2.png" alt="" title="" />
+      <p>EVEREST GROUP</p>
+      <span>EOR Market Leader</span>
+    </div>
+    <div fxLayout="column" fxLayoutAlign="center center">
+      <img src="assets/images/img_2.png" alt="" title="" />
+      <p>EOR MARKET LEADER</p>
+      <span>#7 2022 Top Company</span>
+    </div>
+    <div fxLayout="column" fxLayoutAlign="center center">
+      <img src="assets/images/img_2.png" alt="" title="" />
+      <p>FORBES</p>
+      <span>Cloud 100 List 2022</span>
+    </div>
+  </div>
+</section>

src/app/landing-page/promoting/promoting.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PromotingComponent } from './promoting.component';
+
+describe('PromotingComponent', () => {
+  let component: PromotingComponent;
+  let fixture: ComponentFixture<PromotingComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PromotingComponent]
+    });
+    fixture = TestBed.createComponent(PromotingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/promoting/promoting.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-promoting',
+  templateUrl: './promoting.component.html',
+  styleUrls: ['./promoting.component.scss']
+})
+export class PromotingComponent {
+
+}

src/app/landing-page/tools/tools.component.html

@@ -0,0 +1,19 @@
+<section class="tools">
+  <h1>See you later 16 different HR tools</h1>
+  <div class="gap-30" fxLayout="row wrap" fxLayoutAlign="center center">
+    <img src="../../../assets/images/tool_1.png" alt="" title="" />
+    <img src="../../../assets/images/tool_2.png" alt="" title="" />
+    <img src="../../../assets/images/tool_3.png" alt="" title="" />
+    <img src="../../../assets/images/tool_4.png" alt="" title="" />
+    <img src="../../../assets/images/tool_5.png" alt="" title="" />
+    <img src="../../../assets/images/tool_6.png" alt="" title="" />
+    <img src="../../../assets/images/tool_7.png" alt="" title="" />
+    <img src="../../../assets/images/tool_8.png" alt="" title="" />
+  </div>
+  <p>
+    We’re simplifying every aspect of managing a worldwide team, from benefits
+    and equity to working visas and <br />
+    equipment. It’s one platform made to get you set up compliantly in just 5
+    minutes.
+  </p>
+</section>

src/app/landing-page/tools/tools.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToolsComponent } from './tools.component';
+
+describe('ToolsComponent', () => {
+  let component: ToolsComponent;
+  let fixture: ComponentFixture<ToolsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ToolsComponent]
+    });
+    fixture = TestBed.createComponent(ToolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/tools/tools.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tools',
+  templateUrl: './tools.component.html',
+  styleUrls: ['./tools.component.scss'],
+})
+export class ToolsComponent {}

src/app/landing-page/vision/vision.component.html

@@ -0,0 +1,48 @@
+<section
+  class="vision gap-80"
+  fxLayout="row wrap"
+  fxLayoutAlign="center center"
+>
+  <div
+    fxFlex.gt-md="25"
+    fxFlex.lt-md="100"
+    fxLayout="column"
+    fxLayoutAlign="center center"
+  >
+    <img src="assets/images/vision.svg" alt="" title="" />
+    <h2>Our vision</h2>
+    <p>
+      We look forward to being an <br />
+      option in human capital <br />
+      management yet
+    </p>
+  </div>
+  <div
+    fxFlex.gt-md="25"
+    fxFlex.lt-md="100"
+    fxLayout="column"
+    fxLayoutAlign="center center"
+  >
+    <img src="assets/images/mission.svg" alt="" title="" />
+    <h2>Our mission</h2>
+    <p>
+      Providing accurate solutions in line <br />
+      with market conditions by developing <br />
+      the remote work sector in the world.
+    </p>
+  </div>
+  <div
+    fxFlex.gt-md="25"
+    fxFlex.lt-md="100"
+    fxLayout="column"
+    fxLayoutAlign="center center"
+  >
+    <img src="assets/images/message.svg" alt="" title="" />
+    <h2>Our vision</h2>
+    <p>
+      Promoting remote work, developing its <br />
+      management, and investing in human <br />
+      capital and talents from all over the world.
+    </p>
+  </div>
+</section>

src/app/landing-page/vision/vision.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VisionComponent } from './vision.component';
+
+describe('VisionComponent', () => {
+  let component: VisionComponent;
+  let fixture: ComponentFixture<VisionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [VisionComponent]
+    });
+    fixture = TestBed.createComponent(VisionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/vision/vision.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-vision',
+  templateUrl: './vision.component.html',
+  styleUrls: ['./vision.component.scss']
+})
+export class VisionComponent {
+
+}

src/app/landing-page/why-mt/why-mt.component.html

@@ -0,0 +1,63 @@
+<section class="why-mt" fxLayout="column" fxLayoutAlign="start center">
+  <h1 fxLayout="row" fxLayoutAlign="center center">
+    Why
+    <img src="../../../assets/images/mt-world.png" alt="" title="" />
+  </h1>
+  <img
+    src="../../../assets/images/why_slider.png"
+    alt=""
+    title=""
+    fxHide.lt-md
+  />
+
+  <ul class="gap-10" fxLayout="column" fxLayoutAlign="start start">
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+      <img src="../../../assets/images/correct.png" alt="" title="" />
+      <span
+        >Ease of use experience: The platform is designed with a user-friendly
+        experience, making it easy to register, <br />
+        hire, and follow up.</span
+      >
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+      <img src="../../../assets/images/correct.png" alt="" title="" />
+      <span
+        >Comprehensive solution: We offer a comprehensive solution that meets
+        all the requirements of employers<br />
+        and employees.</span
+      >
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+      <img src="../../../assets/images/correct.png" alt="" title="" />
+      <span
+        >Financial management: We provide a legal and easy solution with
+        financial transactions between employers <br />
+        and employees all over the world.</span
+      >
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+      <img src="../../../assets/images/correct.png" alt="" title="" />
+      <span
+        >Data security: We prioritize data protection by providing a robust and
+        robust system that keeps information <br />
+        confidential.</span
+      >
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+      <img src="../../../assets/images/correct.png" alt="" title="" />
+      <span
+        >Technical support: We provide ongoing technical support to ensure
+        optimal work performance.</span
+      >
+    </li>
+    <li class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+      <img src="../../../assets/images/correct.png" alt="" title="" />
+      <span
+        >Legal Compliance: We provide a legal solution that ensures the legal
+        relationship between employers <br />
+        and employees around the world.</span
+      >
+    </li>
+  </ul>
+  <button>Get Started for free</button>
+</section>

src/app/landing-page/why-mt/why-mt.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WhyMtComponent } from './why-mt.component';
+
+describe('WhyMtComponent', () => {
+  let component: WhyMtComponent;
+  let fixture: ComponentFixture<WhyMtComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [WhyMtComponent]
+    });
+    fixture = TestBed.createComponent(WhyMtComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/landing-page/why-mt/why-mt.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-why-mt',
+  templateUrl: './why-mt.component.html',
+  styleUrls: ['./why-mt.component.scss'],
+})
+export class WhyMtComponent {}

src/app/shared/shared.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
+
+const MATERIAL_MODULES = [FlexLayoutModule, MatButtonModule];
+@NgModule({
+  declarations: [],
+  exports: [...MATERIAL_MODULES],
+  imports: [...MATERIAL_MODULES, CommonModule],
+})
+export class SharedModule {}

src/assets/images/message.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="59" height="58.999" viewBox="0 0 59 58.999">
+  <g id="Group_498" data-name="Group 498" transform="translate(-959 -1290.75)">
+    <g id="dart-mission-goal-success-svgrepo-com" transform="translate(972.651 1305.65)">
+      <line id="Line_162" data-name="Line 162" y1="5" x2="5" transform="translate(15.349 10.349)" fill="none" stroke="#28abe3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
+      <path id="Path_4268" data-name="Path 4268" d="M29.614,5.807H25.807V2L22,5.807V9.614h3.807Z" transform="translate(-0.916)" fill="none" stroke="#28abe3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
+      <circle id="Ellipse_240" data-name="Ellipse 240" cx="5" cy="5" r="5" transform="translate(10.349 10.349)" fill="none" stroke="#28abe3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
+      <path id="Path_4269" data-name="Path 4269" d="M25.842,8.711a12.131,12.131,0,0,1,1.9,6.662A12.373,12.373,0,1,1,15.373,3a12.131,12.131,0,0,1,6.662,1.9" transform="translate(0 -0.048)" fill="none" stroke="#28abe3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
+    </g>
+    <path id="Path_4270" data-name="Path 4270" d="M27.078,5.75a98.774,98.774,0,0,0-11.77-.384,2.058,2.058,0,1,1,0-4.116h.155a100.235,100.235,0,0,1,12.164.42c3.218.433,5.822,1.344,7.875,3.4a10.982,10.982,0,0,1,3.385,6.423,70.782,70.782,0,0,1,.432,10.762v.264a2.058,2.058,0,0,1-4.116,0c0-5.266-.008-8.236-.371-10.319a6.916,6.916,0,0,0-2.241-4.22C31.43,6.817,29.839,6.121,27.078,5.75Z" transform="translate(978.68 1289.5)" fill="#28abe3"/>
+    <path id="Path_4271" data-name="Path 4271" d="M5.366,16.308a2.058,2.058,0,0,0-4.116,0v.264a70.8,70.8,0,0,0,.433,10.762,10.983,10.983,0,0,0,3.385,6.424c2.054,2.053,4.658,2.965,7.875,3.4a100.291,100.291,0,0,0,12.164.42h.155a2.058,2.058,0,0,0,0-4.116,98.748,98.748,0,0,1-11.77-.384c-2.761-.371-4.352-1.067-5.513-2.229a6.916,6.916,0,0,1-2.241-4.22C5.374,24.545,5.366,21.575,5.366,16.308Z" transform="translate(957.75 1312.174)" fill="#28abe3"/>
+    <path id="Path_4272" data-name="Path 4272" d="M39.32,16.308a2.058,2.058,0,0,0-4.116,0c0,5.266-.008,8.236-.371,10.319a6.916,6.916,0,0,1-2.241,4.22c-1.161,1.161-2.752,1.858-5.513,2.229a98.752,98.752,0,0,1-11.77.384,2.058,2.058,0,1,0,0,4.116h.155a100.289,100.289,0,0,0,12.164-.42c3.218-.433,5.822-1.344,7.875-3.4a10.983,10.983,0,0,0,3.385-6.424,70.782,70.782,0,0,0,.432-10.762Z" transform="translate(978.68 1312.174)" fill="#28abe3"/>
+    <path id="Path_4273" data-name="Path 4273" d="M25.262,1.25h-.155a100.236,100.236,0,0,0-12.164.42c-3.217.433-5.821,1.344-7.875,3.4a10.982,10.982,0,0,0-3.385,6.423A70.8,70.8,0,0,0,1.25,22.253v.264a2.058,2.058,0,1,0,4.116,0c0-5.266.008-8.236.371-10.319a6.916,6.916,0,0,1,2.241-4.22C9.14,6.817,10.731,6.121,13.491,5.75a98.77,98.77,0,0,1,11.77-.384,2.058,2.058,0,0,0,0-4.116Z" transform="translate(957.75 1289.5)" fill="#28abe3"/>
+  </g>
+</svg>

src/assets/scss/spineer.scss

@@ -0,0 +1,25 @@
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner:before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  border-top-color: #000000;
+  animation: spinner 0.8s linear infinite;
+}
+
+.center {
+  text-align: center;
+}

src/assets/scss/variables.scss

@@ -0,0 +1,88 @@
+// @import "@angular/material/theming"; //notice that the file imported is also different
+// @include mat-core();
+
+$main-color: #2e368f;
+$white-color: #ffffff;
+$off-white: #e4e4ef;
+$open-blue: #2f2c8333;
+$yellow-color: #faea26;
+$light-blue: #28abe3;
+$gray-color: #00000029;
+$open-light-blue: #c4daed;
+$green: #4bd37b;
+$main-blue: #1877f2;
+$dark-blue: #1275b1;
+$white-blue: #1da1f2;
+$dark-yellow: #e09b3d;
+$dark-red: #c74c4d;
+$move-color: #7024c4;
+
+//PRIMARY THEME
+// $mat-primary: (
+//   main: $main-color,
+//   lighter: $main-color,
+//   darker: $main-color,
+//   200: #3d4fa1,
+//   // For slide toggle,
+//   contrast:
+//     (
+//       main: $white-color,
+//       lighter: $white-color,
+//       darker: $white-color,
+//     ),
+// );
+
+// $theme-primary: mat-palette($mat-primary, main, lighter, darker);
+
+//ACCENT THEME
+// $mat-accent: (
+//   main: #cf484f,
+//   lighter: #f4c7db,
+//   darker: #cf484f,
+//   200: #cf484f,
+//   // For slide toggle,
+//   contrast:
+//     (
+//       main: $white-color,
+//       lighter: $white-color,
+//       darker: $white-color,
+//     ),
+// );
+
+// $theme-accent: mat-palette($mat-accent, main, lighter, darker);
+
+// //WARN_THEME
+// $mat-warn: (
+//   main: #ff0000,
+//   lighter: #ffb3b3,
+//   darker: #ff0000,
+//   200: #ff0000,
+//   // For slide toggle,
+//   contrast:
+//     (
+//       main: $white-color,
+//       lighter: $white-color,
+//       darker: $white-color,
+//     ),
+// );
+
+// $theme-warn: mat-palette($mat-warn, main, lighter, darker);
+
+// $custom-light-theme: mat-light-theme(
+//   $theme-primary,
+//   $theme-accent,
+//   $theme-warn
+// );
+
+// @include angular-material-theme($custom-light-theme);
+
+@import "../../app/landing-page/landing-page-theme.scss";
+@import "../../app/landing-page/landing-header/landing-header.component.scss";
+@import "./spineer.scss";
+
+@mixin component-theme() {
+  @include landing-page-theme();
+  @include header-theme();
+}
+
+@include component-theme();

src/index.html

@@ -1,13 +1,28 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>MtWorks</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>MtWorks</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght@600&family=Montserrat:ital,wght@0,600;1,500&family=Poppins:ital,wght@0,300;0,500;1,500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/styles.scss

@@ -1 +1,53 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "./assets/scss/variables.scss";
+
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  height: 100%;
+  padding: auto;
+}
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: "Montserrat", sans-serif;
+}
+
+.mt-2 {
+  margin-top: 1rem;
+}
+
+.plr-1 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.d-block {
+  display: block;
+}
+
+.gap-80 {
+  gap: 80px;
+}
+
+.gap-30 {
+  gap: 30px;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.gap-10 {
+  gap: 10px;
+}
+
+.plr-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 20px;
+}

tsconfig.json

@@ -4,6 +4,12 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "paths": {
+      "@base/*": ["src/app/base/*"],
+      "@core/*": ["src/app/core/*"],
+      "@shared/*": ["src/app/shared/*"],
+      "@assets/*": ["src/assets/*"]
+    },
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
@@ -19,10 +25,7 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,