carousel

angular.json

@@ -27,6 +27,8 @@
             "styles": [
               "node_modules/ngx-toastr/toastr.css",
               "@angular/material/prebuilt-themes/indigo-pink.css",
+              "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
+              "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {

package.json

@@ -25,6 +25,7 @@
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "ngx-otp-input": "^0.11.4",
+    "ngx-owl-carousel-o": "^17.0.0",
     "ngx-toastr": "^18.0.0",
     "node-sass": "^9.0.0",
     "rxjs": "~7.8.0",

src/app/authentication/auth-sign-in/sign-in/sign-in.component.ts

@@ -45,6 +45,7 @@ export class SignInComponent extends ComponentBase implements BaseForm, OnInit {
 
   onSubmit(): void {
     if (super.submitValidity(this.form)) {
+      this.router.navigate(['/modules']);
       this.authService
         .Login(this.form.value)
         .pipe(takeUntil(this.destroy$))

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

@@ -1,32 +1 @@
-<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>
+<app-carousel [customOptions]="customOptions" [slidesStore]="[]"></app-carousel>

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

@@ -0,0 +1 @@
+

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

@@ -1,10 +1,34 @@
 import { Component } from '@angular/core';
+import { OwlOptions } from 'ngx-owl-carousel-o';
 
 @Component({
   selector: 'app-get-start',
   templateUrl: './get-start.component.html',
-  styleUrls: ['./get-start.component.scss']
+  styleUrls: ['./get-start.component.scss'],
 })
 export class GetStartComponent {
-
+  customOptions: OwlOptions = {
+    loop: true,
+    mouseDrag: false,
+    touchDrag: false,
+    pullDrag: false,
+    dots: false,
+    navSpeed: 700,
+    navText: ['<', '>'],
+    responsive: {
+      0: {
+        items: 1,
+      },
+      400: {
+        items: 1,
+      },
+      740: {
+        items: 1,
+      },
+      940: {
+        items: 1,
+      },
+    },
+    nav: true,
+  };
 }

src/app/shared/components/carousel/carousel.component.html

@@ -0,0 +1,42 @@
+<owl-carousel-o [options]="customOptions">
+  <ng-container>
+    <ng-template carouselSlide>
+      <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>
+    </ng-template>
+  </ng-container>
+</owl-carousel-o>

src/app/shared/components/carousel/carousel.component.spec.ts

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

src/app/shared/components/carousel/carousel.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { OwlOptions } from 'ngx-owl-carousel-o';
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss'],
+})
+export class CarouselComponent {
+  @Input() customOptions!: OwlOptions;
+  @Input() slidesStore: any[] = [];
+}

src/app/shared/shared.module.ts

@@ -27,6 +27,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTableModule } from '@angular/material/table';
+import { CarouselModule } from 'ngx-owl-carousel-o';
+import { CarouselComponent } from './components/carousel/carousel.component';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -51,9 +53,15 @@ const MATERIAL_MODULES = [
   MatProgressBarModule,
   MatTabsModule,
   MatTableModule,
+  CarouselModule,
 ];
 
-const COMPONENTS = [ErrorFormComponent, WarningComponent, FileUploadComponent];
+const COMPONENTS = [
+  ErrorFormComponent,
+  WarningComponent,
+  FileUploadComponent,
+  CarouselComponent,
+];
 const MODULES = [TranslateModule];
 @NgModule({
   declarations: [WarningComponent, ...COMPONENTS, FileUploadComponent],

src/styles.scss

@@ -258,4 +258,26 @@ input.mat-input-element {
 .justfy-content-end {
   display: flex;
   justify-content: flex-end;
+
+
+.owl-prev {
+  position: absolute;
+  left: 2px;
+  top: 40%;
+  background: transparent !important;
+  border: 1px solid #28abe3 !important;
+  border-radius: 50% !important;
+  color: #28abe3 !important;
+  padding: 7px 10px !important;
+}
+
+.owl-next {
+  position: absolute;
+  right: 2px;
+  top: 40%;
+  background: transparent !important;
+  border: 1px solid #28abe3 !important;
+  border-radius: 50% !important;
+  color: #28abe3 !important;
+  padding: 7px 10px !important;
 }

yarn.lock

@@ -5686,6 +5686,13 @@ ngx-otp-input@^0.11.4:
   dependencies:
     tslib "^2.0.0"
 
+ngx-owl-carousel-o@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-owl-carousel-o/-/ngx-owl-carousel-o-17.0.0.tgz#c440f232e671d7e6348ad8ee866774774e260750"
+  integrity sha512-vdGHFqzzZ1QSD9pQmtk94wgoB2h8yaHOx73CJL/1aEsvPdVP/WUP/bE9HywvrtlZeFprO9zvhN9XvlLT7BxmEA==
+  dependencies:
+    tslib "^2.3.0"
+
 ngx-toastr@^18.0.0:
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-18.0.0.tgz#0016e897108817eb6b2ee16ff130b4c42fc214b0"