initial push

package-lock.json

@@ -182,6 +182,14 @@
         }
       }
     },
+    "@angular/animations": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.0.3.tgz",
+      "integrity": "sha512-9zciJ4YRR0bodFSYgsgXdYMz8wKKyVjch7XZADGkWubXT8mGuwlpdPMlQ6n9Cwj8Ebu0u52WxMeQsX76K9RlYA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@angular/cli": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.9.tgz",

package.json

@@ -13,6 +13,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^8.0.3",
     "@angular/common": "^7.2.2",
     "@angular/core": "^7.2.2",
     "@angular/forms": "^7.2.2",

src/app/accepted/accepted.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AcceptedPage } from './accepted.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AcceptedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [AcceptedPage]
+})
+export class AcceptedPageModule {}

src/app/accepted/accepted.page.html

+<ion-content>
+    <div class="waiting_wrapper">
+      <div class="logo_one">
+        <img src="../../assets/img/aaset_verified.png">
+      </div>
+      <h4>Mechanic Accepted</h4>
+      <p>OThe Allo Repar is ready to help you.<br>
+          Please wait for the Mechanic.</p>
+          <div class="logo">
+              <img src="../../assets/img/asset_shop1.png">
+            </div>
+      <h4>Presto Towing Services</h4>
+      <div class="distance">
+        4 km
+      </div><br><br>
+          <button class="back_btn1">Call allo repar</button><br>
+          <button class="home">Details</button>
+    </div>
+  </ion-content>

src/app/accepted/accepted.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:20%;
+    .logo_one{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+        }
+    }
+    .logo{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        background-color: #fff;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+            border:1px solid #fbd339;
+        }
+    }
+    h4{
+        color: #fff;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom:40px;
+
+    }
+
+    .back_btn1{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        display: inline-block;
+        background-color: #28be57;
+        color: #fff;
+        background-image: url("../../assets/img/asset_call.png");
+        background-position: left 5px top 0px;
+        background-repeat: no-repeat;
+        background-size: 35px;
+        padding-left: 40px;
+        padding-right: 40px;
+
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .home{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .back_btn1{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/accepted/accepted.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AcceptedPage } from './accepted.page';
+
+describe('AcceptedPage', () => {
+  let component: AcceptedPage;
+  let fixture: ComponentFixture<AcceptedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcceptedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcceptedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accepted/accepted.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-accepted',
+  templateUrl: './accepted.page.html',
+  styleUrls: ['./accepted.page.scss'],
+})
+export class AcceptedPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/addcar/addcar.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AddcarPage } from './addcar.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AddcarPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [AddcarPage]
+})
+export class AddcarPageModule {}

src/app/addcar/addcar.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>ADD YOUR CAR</h4></div>
+                <button class="nav_btn nav_btn_text floatRight" (click)="goToPage('login')">
+                  Skip
+                </button>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                <div class="showcar">
+                  <img src="../../assets/img/asset_show_car.png">
+                </div>
+                <div class="row">
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>Company Name</ion-select-option>
+                    </ion-select>
+                </div>
+                <div class="row">
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>Modal Name</ion-select-option>
+                    </ion-select>
+                </div>
+                <div class="row">
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>Modal Year</ion-select-option>
+                    </ion-select>
+                </div>
+                <div class="row">
+                    <p>Mileage</p>
+                    <ion-select placeholder="">
+                        <ion-select-option value="" selected>0 - 10km</ion-select-option>
+                    </ion-select>
+                </div>
+
+                
+               
+              
+                <div class="row textCenter">
+                    <button class="signup_btn" (click)="goToPage('login')">Add My car</button>
+                </div>
+              </div>
+        </div>
+      </ion-content>

src/app/addcar/addcar.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .showcar{
+            text-align: center;
+            img{
+                width: 75%;  
+            }
+        }
+        .row{
+            margin-bottom:15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+
+            h5{
+                color: #4e4961;
+                text-align: center;
+                font-size: 16px;
+            }
+
+            h2{
+                text-align: center;
+                color: #282438;
+                font-size: 32px;
+                padding-bottom: 15%;
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius:35px;
+                color:#39267f;
+                height: 45px;
+                font-weight: 600;
+                text-align: center;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+
+        .otp_input_box{
+            width: 80%;
+            margin: 0 auto;
+        }
+    }
+        
+}
+
+h3{
+    color: #39267f;
+    text-align:center;
+    font-size: 15px;
+    font-weight: 500;
+}
\ No newline at end of file

src/app/addcar/addcar.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddcarPage } from './addcar.page';
+
+describe('AddcarPage', () => {
+  let component: AddcarPage;
+  let fixture: ComponentFixture<AddcarPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddcarPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddcarPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/addcar/addcar.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-addcar',
+  templateUrl: './addcar.page.html',
+  styleUrls: ['./addcar.page.scss'],
+})
+export class AddcarPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { 
+    
+  }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'home',
+    redirectTo: 'start',
     pathMatch: 'full'
   },
   {
@@ -14,7 +14,55 @@ const routes: Routes = [
   {
     path: 'list',
     loadChildren: './list/list.module#ListPageModule'
-  }
+  },
+  { 
+    path: 'start',
+    loadChildren: './start/start.module#StartPageModule' 
+  },
+  { 
+    path: 'login',
+    loadChildren: './login/login.module#LoginPageModule' 
+  },
+  { 
+    path: 'forgot',
+    loadChildren: './forgot/forgot.module#ForgotPageModule'
+  },
+  { 
+    path: 'otp',
+    loadChildren: './otp/otp.module#OtpPageModule' 
+  },
+  { 
+    path: 'password',
+    loadChildren: './password/password.module#PasswordPageModule'
+  },
+  { 
+    path: 'addcar',
+    loadChildren: './addcar/addcar.module#AddcarPageModule' 
+  },
+  { 
+    path: 'roadassistance', 
+    loadChildren: './roadassistance/roadassistance.module#RoadassistancePageModule'
+  },
+  { 
+    path: 'booking',
+    loadChildren: './booking/booking.module#BookingPageModule' 
+  },
+  { 
+    path: 'servicecompleted',
+    loadChildren: './servicecompleted/servicecompleted.module#ServicecompletedPageModule'
+   },
+  { 
+    path: 'accepted',
+    loadChildren: './accepted/accepted.module#AcceptedPageModule'
+  },
+  { 
+    path: 'review',
+    loadChildren: './review/review.module#ReviewPageModule'
+  },
+  { path: 'waiting', loadChildren: './waiting/waiting.module#WaitingPageModule' },
+  { path: 'complete', loadChildren: './complete/complete.module#CompletePageModule' },
+  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
+  { path: 'myservices', loadChildren: './myservices/myservices.module#MyservicesPageModule' }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -8,14 +8,22 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ReviewPage} from './review/review.page';
 
 @NgModule({
-  declarations: [AppComponent],
-  entryComponents: [],
+  declarations: [
+    AppComponent,
+    ReviewPage
+  ],
+  entryComponents: [
+    ReviewPage
+  ],
   imports: [
     BrowserModule,
     IonicModule.forRoot(),
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule
   ],
   providers: [
     StatusBar,

src/app/app.scss

-// App Styles
-// ----------------------------------------------------------------------------
-// Put style rules here that you want to apply to the entire application. These 
-// styles are for the entire app and not just one component. Additionally, this 
-// file can hold Sass mixins, functions, and placeholder classes to be imported 
-// and used throughout the application.
+
+
+
+/*
+  Site Name: ALLOREPAR
+  URI: http:
\ No newline at end of file
+  Description: This is the theme scss for ALLOREPAR
+  Version: 2.0
+  Author: 
+  Author URI:
+  Tags:
+
+	---------------------------
+	THEME STYLES
+	---------------------------
+
+	TABLE OF CONTENTS
+	---------------------------
+	 01. FONTS-N-SIZES
+	 02. FONTS-COLOR
+	 03. THEMES-N-BACKGROUNDS
+	 04. SPACING-N-POSITIONS
+	 05. ALIGMENTS
+	 06. ALERTS-N-MESSAGES
+
+
+*/
+
+
+/*-------------------------------
+
+01. FONTS-N-SIZES
+
+--------------------------------*/
+
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&display=swap');
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
+* {
+    font-family: 'Work Sans', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scroll .scroll-content {
+    overflow: hidden;
+}
+
+a {
+    text-decoration: none !important;
+}
+
+button{
+    outline: none;  
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none !important; 
+  margin: 0; 
+}
+
+html,
+body {
+    font-family: 'Lato', sans-serif !important;
+    margin:0px;
+}
+
+button{
+    cursor: pointer;
+}
+
+.start_wizard_wrapper{
+    ion-slides{
+        .swiper-pagination{
+            .swiper-pagination-bullet{
+                background: #282438 !important;
+            }
+        }
+    }
+}
+
+
+
+
+/*-------------------------------
+
+02. FONTS-SETTINGS
+
+--------------------------------*/
+
+.text_color_white {
+    color: #fff !important;
+}
+
+
+.font_size_xs {
+    font-size: 12px !important;
+}
+
+.font_size_sm {
+    font-size: 14px !important;
+}
+
+.font_size_md {
+    font-size: 16px !important;
+}
+
+.font_size_lg {
+    font-size: 18px !important;
+}
+
+.font_size_xl {
+    font-size: 20px !important;
+}
+
+.font_size_vl {
+    font-size: 35px !important;
+}
+
+.font_weight300 {
+    font-weight: 300 !important;
+}
+
+.font_weight400 {
+    font-weight: 400 !important;
+}
+
+.font_weight500 {
+    font-weight: 500 !important;
+}
+
+.font_weight600 {
+    font-weight: 600 !important;
+}
+
+
+/*-------------------------------
+
+03. THEMES-N-BACKGROUNDS
+
+--------------------------------*/
+
+.theme_background {
+    background-size: cover !important;
+    background-position: center !important;
+}
+
+.theme_transparent {
+    background: transparent !important;
+}
+
+.theme_white {
+    background-color: #f7f8fd !important;
+}
+
+.theme_off_white {
+    background-color: #f4f4f4 !important;
+}
+
+.theme_dark_transparent {
+    background-color: rgba(0, 0, 0, 0.6) !important;
+}
+
+.theme_white_transparent {
+    background-color: rgba(243, 243, 243, 0.6) !important;
+}
+
+
+
+
+/*-------------------------------
+
+04. SPACING-N-POSITIONS
+
+--------------------------------*/
+
+.width25 {
+    width: 25% !important;
+}
+
+.width50 {
+    width: 50% !important;
+}
+
+.width75 {
+    width: 75% !important;
+}
+
+.widthFull {
+    width: 100% !important;
+}
+
+.widthAuto {
+    width: auto !important;
+}
+
+.height25 {
+    height: 25% !important;
+}
+
+.height50 {
+    height: 50% !important;
+}
+
+.height75 {
+    width: 75% !important;
+}
+
+.heightFull {
+    height: 100% !important;
+}
+
+.heightAuto {
+    height: auto !important;
+}
+
+.p0 {
+    padding: 0px !important;
+}
+
+.pl0 {
+    padding-left: 0px !important;
+}
+
+.pr0 {
+    padding-right: 0px !important;
+}
+
+.pt0 {
+    padding-top: 0px !important;
+}
+
+.pb0 {
+    padding-bottom: 0px !important;
+}
+
+.p10 {
+    padding: 10px !important;
+}
+
+.pt10 {
+    padding-top: 10px !important;
+}
+
+.m0 {
+    margin: 0px !important;
+}
+
+.ml0 {
+    margin-left: 0px !important;
+}
+
+.mr0 {
+    margin-right: 0px !important;
+}
+
+.mt0 {
+    margin-top: 0px !important;
+}
+
+.mb0 {
+    margin-bottom: 0px !important;
+}
+
+.mAuto {
+    margin: 0 auto !important;
+}
+
+.clear {
+    clear: both !important;
+}
+
+.absolute {
+    position: absolute !important;
+}
+
+.relative {
+    position: relative !important;
+}
+
+.fixed {
+    position: fixed !important;
+}
+
+.borderNone {
+    border: none !important;
+}
+
+
+/*-------------------------------
+
+05. ALIGMENTS
+
+--------------------------------*/
+
+.floatLeft {
+    float: left !important;
+}
+
+.floatRight {
+    float: right !important;
+}
+
+.textLeft {
+    text-align: left !important;
+}
+
+.textRight {
+    text-align: right !important;
+}
+
+.textCenter {
+    text-align: center !important;
+}
+
+.app_header{
+
+}
+
+
+
+.nav_btn{
+    width:50px;
+    height:50px;
+    background-color: transparent;
+    color: #282438;
+    font-size: 25px;
+}
+
+.nav_title{
+    width: calc(100% - 100px);
+    color: #282438;
+    padding: 15px;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: 400;
+    text-align:center;
+    img{
+        height: 30px;
+    }
+    h4{
+        margin: 0px;
+        font-weight:500;
+        padding:0px;
+        font-size: 20px;
+        text-align: center;
+        text-transform: uppercase;
+    }
+}
+
+.nav_btn{
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background-size: 25px !important;
+}
+
+
+.nav_btn_text{
+    color: #39267f;
+    font-size: 18px;
+}
+
+.back_btn{
+    background-image: url("../assets/img/asset_back.png");
+}
+
+
+.menu_btn{
+    background-image: url("../assets/img/asset_menu.png");
+}
+
+.cart_btn{
+    background-image: url("../assets/img/asset_cart.png");
+}
+
+.account_pic{
+    img{
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        object-fit:cover;
+        object-position:center;
+    }
+    
+}
+
+
+
+.item-native{
+    padding-left: 0px !important;
+}
+
+
+.header-md:after{
+    background-image: none !important;
+}
+
+.header-ios:after{
+    background-image: none !important;
+}
+
+.button-native{
+    border-radius: 0px !important;
+   }
+
+
+   app-review{
+    background: transparent;
+}
+
+ion-modal{
+    --background: var(--ion-background-color,transparent);
+}
+
+
+
+
+
+
+

src/app/booking/booking.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BookingPage } from './booking.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookingPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [BookingPage]
+})
+export class BookingPageModule {}

src/app/booking/booking.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>Presto towing Service</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+  </ion-header>
+<ion-content>
+    <div class="home_wrapper">
+        <div class="location_box">
+            <div class="location_bar">
+                4KM
+              </div>
+        </div>
+        <div class="banner">
+          <img src="../../assets/img/asset_banner.png">
+        </div>
+        <div class="btn_bay">
+          <button class="btn call_btn">Call Allo Repar</button>
+          <button class="btn book_btn" (click)="goToPage('waiting')">Book Service</button>
+        </div>
+        <div class="pay_description">
+          <h6>
+            <span>
+              <img src="../../assets/img/asset_c1.png">
+            </span>
+            <span>
+              <img src="../../assets/img/asset_c2.png">
+            </span>
+            <span>
+              <img src="../../assets/img/asset_c3.png">
+            </span>
+            <span>
+              <img src="../../assets/img/asset_c4.png">
+            </span>
+          </h6>
+          <h6>
+            <span>
+              <img src="../../assets/img/asset_web.png">
+              <a>www.presto.com</a></span>
+          </h6>
+        </div>
+        <div class="bottom_tab_bay">
+          <ul>
+            <li [class.active]="tab == 'about'" (click)="tab_swap('about')">About</li>
+            <li [class.active]="tab == 'review'" (click)="tab_swap('review')">Reviews</li>
+          </ul>
+        </div>
+        <div class="tab_content">
+          <div class="tab_content_inner" [hidden]="tab !='about'">
+            <div class="top_div">
+              <div class="pic_circle"></div>
+              <div class="pic_details">
+                <h5>Sam Johns</h5>
+                <p>Workshop owner</p>
+              </div>
+              <div class="clear"></div>
+            </div>
+            <div class="shopper_details">
+              <p>We promise to help you find the best car tyres Dubai has to offer.<br><br>
+              There are many significant advantages to purchasing your tyres online, including receiving cost effective pricing and a varied selection. Presto Tyres provide a full selection of branded tyres in Dubai that promise to meet the needs of all customers from motorists to high performance and off road enthusiasts.<br><br>
+              Our mission at Presto Tyres declares our purpose as one of the best tire companies in Dubai.
+              </p>
+            </div>
+          </div>
+          <div class="tab_content_inner" [hidden]="tab !='review'">
+            <div class="rating_div">
+              <ion-row>
+                <ion-col col-8 class="p0">
+                    <fieldset class="rating">
+                        <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                        <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                        <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                        <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                        <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                        <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                        <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                        <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                        <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                        <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                    </fieldset>
+                    <span>4 Star | 34 Reviews</span>
+                </ion-col>
+                <ion-col col-4 class="p0 textRight">
+                  <button class="add_review" (click)="istoggle()">+</button>
+                </ion-col>
+              </ion-row>
+            </div>
+            <div class="review_list">
+              <ul>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                            <img src="../../assets/img/asset_star.png">4
+                          </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                            <img src="../../assets/img/asset_star.png">4
+                          </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                          <img src="../../assets/img/asset_star.png">4
+                        </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+                <li>
+                    <div class="top_div">
+                        <div class="pic_circle"></div>
+                        <div class="pic_details">
+                          <h5>Sam Johns</h5>
+                          <p>June 28th 2019</p>
+                          <h4>Good services</h4>
+                          <h6>
+                              It was a good service and very lovely
+                              behaviour !!
+                          </h6>
+                        </div>
+                        <div class="rating">
+                            <img src="../../assets/img/asset_star.png">4
+                          </div>
+                        <div class="clear"></div>
+                      </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+    </div>
+</ion-content>
+<div class="review_wrapper" *ngIf="isShow" [@slideInOut]>
+  <div class="rate_card">
+    <div class="inner_shop_name">
+      <ion-row>
+        <ion-col class="p0">
+            <h5>Smart Mortors</h5>
+            <p><img src="../../assets/img/asset_avatar_sml.png">Peter mcWay</p>
+        </ion-col>
+        <ion-col class="p0">
+          <h6>Service - 2 days ago</h6>
+        </ion-col>
+      </ion-row>
+    </div>
+    <ion-row>
+        <ion-col class="p0">
+          <h4>Write a review</h4>
+          <div class="row">
+            <ion-input value="Caption" type="text"></ion-input>
+          </div>
+          <div class="row">
+            <ion-input value="Your comments" type="text"></ion-input>
+          </div>
+          <div class="row">
+            <button class="signup_btn" (click)="istoggle()">Next</button>
+          </div>
+        </ion-col>
+    </ion-row>
+  </div>
+</div>
+

src/app/booking/booking.page.scss

+.home_wrapper{
+    .location_box{
+      position: fixed;
+      left:0px;
+      top: 45px;
+      right:0px;
+      z-index: 999;
+    }
+    .location_bar{
+      max-width:100px;
+      background: #fff;
+      padding:5px;
+      border-radius: 20px;
+      margin:0 auto;
+      text-align: center;
+      -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+      background-image: url("../../assets/img/aaset_loc.png");
+      background-position: left 15px top 6px;
+      background-repeat: no-repeat;
+      padding-left:30px;
+      padding-right:30px;
+      background-size: 15px;
+      font-size: 14px;
+      white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    }
+
+    .banner{
+        width:100%;
+        height: 150px;
+        img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .btn_bay{
+      text-align: center;
+      padding:15px;
+      .btn{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        width: 48%;
+      }
+      .call_btn{
+        display: inline-block;
+        background-color: #28be57;
+        color: #fff;
+        background-image: url("../../assets/img/asset_call.png");
+        background-position: left 5px top 0px;
+        background-repeat: no-repeat;
+        background-size: 35px;
+      }
+      .book_btn{
+        display: inline-block;
+        background-color: #39267f;
+        color: #fff;
+      }
+      .remind_btn{
+        display: inline-block;
+        background-color: #fbd339;
+        color: #282438;
+      }
+    }
+    .pay_description{
+      background-color: #f6f5fa;
+      padding:15px;
+      h6{
+        margin:0px;
+        padding:0px;
+        padding-bottom: 10px;
+        span{
+          img{
+            height:20px;
+            margin-right:15px;
+          }
+          a{
+            text-decoration: none;
+            color: #39267f;
+            font-size: 13px;
+            position: relative;
+            bottom: 5px;
+          }
+        }
+      }
+    }
+    .bottom_tab_bay{
+      border:1px solid #dcdae9;
+      border-bottom-left-radius: 25px; 
+      border-bottom-right-radius: 25px; 
+      ul{
+        padding:0px;
+        margin:0px;
+        li{
+          width: 50%;
+          display: inline-block;
+          list-style: none;
+          text-align: center;
+          padding: 10px;
+          font-weight: 500;
+          &:nth-child(odd){
+            border-bottom-left-radius: 25px; 
+          }
+          &:nth-child(even){
+            border-bottom-right-radius: 25px; 
+          }
+
+        }
+        .active{
+          background: #dcdae9;
+          color: #39267f;
+        }
+      }
+    }
+    .tab_content{
+      .tab_content_inner{
+        .top_div{
+          padding: 10px;
+          .pic_circle{
+            width:40px;
+            height:40px;
+            border-radius: 50%;
+            object-fit: cover;
+            object-position: center;
+            border:1px solid #dcdae9;
+            float: left;
+            img{
+              width: 100%;
+              height: 100%;
+              border-radius: 50%;
+              object-fit: cover;
+              object-position: center;
+            }
+          }
+          .pic_details{
+            width: calc(100% - 40px);
+            padding:2px;
+            padding-left: 10px;
+            float: left;
+            h5{
+              margin:0px;
+              padding:0px;
+              font-size: 16px;
+              padding-bottom: 3px;
+            }
+            p{
+              margin:0px;
+              padding: 0px;
+              color: #9c97b7;
+              font-size: 13px;
+            }
+          }
+        }
+        .shopper_details{
+          padding: 15px;
+          p{
+            margin:0px;
+            padding:0px;
+            color: #4e4961;
+            text-align: justify;
+          }
+        }
+        .rating_div{
+          width:100%;
+          padding: 15px;
+          span{
+            color: #4e4961;
+            font-size: 16px;
+            font-weight: 500;
+          }
+
+          .add_review{
+            width: 40px;
+            height:40px;
+            background-color: #fbd339;
+            color: #403838;
+            border-radius: 50%;
+            font-size: 30px;
+          }
+          .rating { 
+            border: none;
+            width:135px;
+            margin: 0px;
+            padding: 0px;
+            padding-bottom: 5px;
+          }
+          
+          .rating > input { display: none; } 
+          .rating > label:before { 
+            margin:2px;
+            font-size:24px;
+            font-family: FontAwesome;
+            display: inline-block;
+            content: "\f005";
+          }
+          
+          .rating > .half:before { 
+            content: "\f089";
+            position: absolute;
+          }
+          
+          .rating > label { 
+            color: #dcdae9; 
+           float: right; 
+          }
+          
+          /***** CSS Magic to Highlight Stars on Hover *****/
+          
+          .rating > input:checked ~ label, /* show gold star when clicked */
+          .rating:not(:checked) > label:hover, /* hover current star */
+          .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+          
+          .rating > input:checked + label:hover, /* hover current star when changing rating */
+          .rating > input:checked ~ label:hover,
+          .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+          .rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
+        }
+
+        .review_list{
+          ul{
+            margin:0px;
+            padding:10px;
+            li{
+              list-style: none;
+              background-color: #f6f5fa;
+              border-radius:15px;
+              margin-bottom: 10px;
+              .top_div{
+                .pic_circle{
+                  width:40px;
+                  height:40px;
+                  border-radius: 50%;
+                  object-fit: cover;
+                  object-position: center;
+                  border:1px solid #dcdae9;
+                  float: left;
+                  img{
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    object-position: center;
+                  }
+                }
+                .pic_details{
+                  width: calc(100% - 70px);
+                  padding:2px;
+                  padding-left: 10px;
+                  float: left;
+                  h5{
+                    margin:0px;
+                    padding:0px;
+                    font-size: 16px;
+                    padding-bottom: 3px;
+                    color: #282438;
+                  }
+                  p{
+                    margin:0px;
+                    padding: 0px;
+                    color: #9c97b7;
+                    font-size: 13px;
+                    color: #282438;
+                  }
+                  h6{
+                    margin:0px;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #282438;
+                  }
+                  h4{
+                    margin:0px;
+                    font-size: 17px;
+                    padding-top: 8px;
+                    padding-bottom: 5px;
+                    color: #282438;
+                  }
+                }
+                .rating{
+                  width: 30px;
+                  float: right;
+                  color: #282438;
+                  img{
+                    width: 15px;
+                    margin-right: 4px;
+                    
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+}
+
+.review_wrapper{
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  left:0px;
+  right:0px;
+  bottom: 0px;
+  z-index: 9;
+  .rate_card{
+    background-color: #f6f5fa;
+    border-radius:15px;
+    padding: 20px;
+    .inner_shop_name{
+      border-left:3px solid #fbd339;
+      padding-left: 10px;
+      margin-bottom: 25px;
+      h5{
+        margin:0px;
+        padding:0px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 2px;
+
+      }
+      p{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        img{
+          width: 15px;
+          height:15px;
+          border-radius: 50%;
+          object-fit:cover;
+          object-position:center;
+          margin-right:5px;
+          position: relative;
+          top: 3px;
+
+        }
+      }
+      h6{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        text-align: right;
+      }
+    }
+    h4{
+      margin:0px;
+      padding:0px;
+      font-size: 16px;
+      text-align:left;
+      padding-bottom:10px;
+    }
+
+    .rating { 
+      border: none;
+      width:260px;
+      margin: 0 auto;
+    }
+    
+    .rating > input { display: none; } 
+    .rating > label:before { 
+      margin: 5px;
+      font-size:40px;
+      font-family: FontAwesome;
+      display: inline-block;
+      content: "\f005";
+    }
+    
+    .rating > .half:before { 
+      content: "\f089";
+      position: absolute;
+    }
+    
+    .rating > label { 
+      color: #dcdae9; 
+     float: right; 
+    }
+    
+  
+    
+    .rating > input:checked ~ label, 
+    .rating:not(:checked) > label:hover, 
+    .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } 
+    
+    .rating > input:checked + label:hover,
+    .rating > input:checked ~ label:hover,
+    .rating > label:hover ~ input:checked ~ label, 
+    .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+  }
+
+  .signup_btn{
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    background-color: #39267f;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 16px; 
+}
+
+.row{
+  padding-bottom: 10px;
+  ion-input{
+    background: #dcdae9;
+    border-radius: 20px;
+    color:#a29ebf;
+    height: 40px;
+    font-weight:400;
+    padding-left: 15px !important;
+}
+}
+}
\ No newline at end of file

src/app/booking/booking.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookingPage } from './booking.page';
+
+describe('BookingPage', () => {
+  let component: BookingPage;
+  let fixture: ComponentFixture<BookingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookingPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/booking/booking.page.ts

+import { Component } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+// import { ModalController } from '@ionic/angular';
+// import { ReviewPage} from '../review/review.page';
+
+@Component({
+  selector: 'app-booking',
+  templateUrl: './booking.page.html',
+  styleUrls: ['./booking.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('300ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class BookingPage{
+
+  tab:any;
+  isShow = false;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { 
+
+    this.tab = "about";
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+
+  tab_swap(type) {
+    this.tab = type;
+   }
+
+
+   istoggle(){
+    this.isShow = !this.isShow;
+  }
+
+
+  //  async settings() {
+  //   const modal = await this.modalController.create({
+  //     component: ReviewPage,
+  //     componentProps: { website: 'edupala.com' },
+  //     backdropDismiss: false,
+  //   });
+
+  //   modal.present();
+  // }
+
+
+
+}

src/app/complete/complete.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CompletePage } from './complete.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CompletePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [CompletePage]
+})
+export class CompletePageModule {}

src/app/complete/complete.page.html

+<ion-content>
+    <div class="waiting_wrapper">
+      <div class="logo_one">
+        <img src="../../assets/img/aaset_verified.png">
+      </div>
+      <h4>Service Completed</h4>
+      <p>Hope you are happy with the mechanic.</p>
+      <br>
+          <button class="review_btn">Write a review</button><br>
+          <button class="home">Home</button><br>
+          <button class="service_btn">Service History</button>
+    </div>
+  </ion-content>
+

src/app/complete/complete.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:30%;
+    .logo_one{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+        }
+    }
+    .logo{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        background-color: #fff;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+            border:1px solid #fbd339;
+        }
+    }
+    h4{
+        color: #fff;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom:40px;
+
+    }
+
+    .review_btn{
+        height:35px;
+        border-radius: 20px;
+        font-size: 16px;
+        margin: 2px;
+        display: inline-block;
+        background-color: #fbd339;
+        color: #282438;
+        padding-left: 20px;
+        padding-right: 20px;
+        margin-bottom: 20%;
+
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .service_btn{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+
+
+    .home{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .service_btn{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/complete/complete.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompletePage } from './complete.page';
+
+describe('CompletePage', () => {
+  let component: CompletePage;
+  let fixture: ComponentFixture<CompletePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CompletePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CompletePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/complete/complete.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-complete',
+  templateUrl: './complete.page.html',
+  styleUrls: ['./complete.page.scss'],
+})
+export class CompletePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/forgot/forgot.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ForgotPage } from './forgot.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ForgotPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ForgotPage]
+})
+export class ForgotPageModule {}

src/app/forgot/forgot.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>Forgot Password</h4></div>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                  <div class="row">
+                      <p>Type your Phone Number</p>
+                      <ion-row class="p0">
+                        <ion-col size="4">
+                          <ion-select placeholder="">
+                            <ion-select-option value="">+91</ion-select-option>
+                          </ion-select>
+                        </ion-col>
+                        <ion-col size="8">
+                          <ion-input value="" type="number"></ion-input>
+                        </ion-col>
+                      </ion-row>
+                  </div>
+                  <div class="row">
+                      <button class="signup_btn" (click)="goToPage('otp')">Send OTP</button>
+                    </div>
+              </div>
+        </div>
+      </ion-content>
+
+

src/app/forgot/forgot.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom: 15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+    }
+        
+}
\ No newline at end of file

src/app/forgot/forgot.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPage } from './forgot.page';
+
+describe('ForgotPage', () => {
+  let component: ForgotPage;
+  let fixture: ComponentFixture<ForgotPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ForgotPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForgotPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/forgot/forgot.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-forgot',
+  templateUrl: './forgot.page.html',
+  styleUrls: ['./forgot.page.scss'],
+})
+export class ForgotPage implements OnInit {
+  [x: string]: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/home/home.page.html

 <ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-menu-button></ion-menu-button>
-    </ion-buttons>
-    <ion-title>
-      Home
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
+  <div class="app_header">
+    <button class="nav_btn menu_btn floatLeft" (click)="menuToggle()">
 
+    </button>
+    <div class="nav_title floatLeft"><img src="../../assets/img/asset_logo.png"></div>
+    <button class="nav_btn floatLeft">
+      <div class="account_pic">
+          <img src="../../assets/img/asset_avatar.png">
+      </div>
+    </button>
+    <div class="clear"></div>
+</div>
+</ion-header>
 <ion-content>
-    <ion-card class="welcome-card">
-      <ion-img src="/assets/shapes.svg"></ion-img>
-      <ion-card-header>
-        <ion-card-subtitle>Get Started</ion-card-subtitle>
-        <ion-card-title>Welcome to Ionic</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
-      </ion-card-content>
-    </ion-card>
-    <ion-list lines="none">
-      <ion-list-header>
-        <ion-label>Resources</ion-label>
-      </ion-list-header>
-      <ion-item href="https://ionicframework.com/docs/">
-        <ion-icon slot="start" color="medium" name="book"></ion-icon>
-        <ion-label>Ionic Documentation</ion-label>
-      </ion-item>
-      <ion-item href="https://ionicframework.com/docs/building/scaffolding">
-        <ion-icon slot="start" color="medium" name="build"></ion-icon>
-        <ion-label>Scaffold Out Your App</ion-label>
-      </ion-item>
-      <ion-item href="https://ionicframework.com/docs/layout/structure">
-        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
-        <ion-label>Change Your App Layout</ion-label>
-      </ion-item>
-      <ion-item href="https://ionicframework.com/docs/theming/basics">
-        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
-        <ion-label>Theme Your App</ion-label>
-      </ion-item>
-    </ion-list>
+  <div class="home_wrapper">
+    <div class="location_box">
+        <div class="location_bar">
+            Infopark,Kakkanad
+          </div>
+    </div>
+    
+    <div class="home_main_stack_menu">
+        <ion-row>
+            <ion-col class="textCenter" (click)="goToPage('roadassistance')">
+              <img src="../../assets/img/asset_menu1.png">
+              <p>Road <br>Assistance</p>
+            </ion-col>
+            <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu2.png">
+                <p>Parts<br>Purchase</p>
+            </ion-col>
+            <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu3.png">
+                <p>Parts<br>Purchase</p>
+            </ion-col>
+        </ion-row>
+    </div>
+    <div class="header_submenu">
+      <h4>People most purchased</h4>
+      <button class="more_btn">More</button>
+      <div class="clear"></div>
+    </div>
+    <div class="product_section">
+      <ion-row>
+        <ion-col col-4>
+          <div class="product_div">
+            <div class="rating">3.1</div>
+            <div class="product_img">
+              <img src="../../assets/img/asset_dummy_item1.png">
+            </div>
+          </div>
+          <h4>PM 237</h4>
+          <hr>
+        </ion-col>
+        <ion-col col-4>
+            <div class="product_div">
+                <div class="rating">3.1</div>
+                <div class="product_img">
+                  <img src="../../assets/img/asset_dummy_item2.png">
+                </div>
+            </div>
+            <h4>Mega 3inch Band</h4>
+            <hr>
+        </ion-col>
+        <ion-col col-4>
+            <div class="product_div">
+                <div class="rating">3.1</div>
+                <div class="product_img">
+                  <img src="../../assets/img/asset_dummy_item3.png">
+                </div>
+            </div>
+            <h4>PM 237</h4>
+            <hr>
+        </ion-col>
+      </ion-row>
+    </div>
+    <div class="appointment_slider">
+        <ion-slides pager="false">
+            <ion-slide>
+                <div class="appointment_card">
+                    <ion-row>
+                      <ion-col col-8 class="p0">
+                        <h4>You have a service</h4>
+                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
+                      </ion-col>
+                      <ion-col col-4 class="p0">
+                        <p>2 Services</p>
+                      </ion-col>
+                    </ion-row>
+                    <ion-row>
+                        <ion-col class="p0">
+                            <h3>Jaguar</h3>
+                            <div class="clear"></div>
+                        </ion-col>
+                      </ion-row>
+                  </div>
+            </ion-slide>
+            <ion-slide>
+                <div class="appointment_card">
+                    <ion-row>
+                      <ion-col col-8 class="p0">
+                        <h4>You have a service</h4>
+                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
+                      </ion-col>
+                      <ion-col col-4 class="p0">
+                        <p>2 Services</p>
+                      </ion-col>
+                    </ion-row>
+                    <ion-row>
+                        <ion-col class="p0">
+                            <h3>Jaguar</h3>
+                            <div class="clear"></div>
+                        </ion-col>
+                      </ion-row>
+                  </div>
+            </ion-slide>
+            <ion-slide>
+                <div class="appointment_card">
+                    <ion-row>
+                      <ion-col col-8 class="p0">
+                        <h4>You have a service</h4>
+                        <h6><strong>Today 12:00pm,</strong> June 26th</h6>
+                      </ion-col>
+                      <ion-col col-4 class="p0">
+                        <p>2 Services</p>
+                      </ion-col>
+                    </ion-row>
+                    <ion-row>
+                        <ion-col class="p0">
+                            <h3>Jaguar</h3>
+                            <div class="clear"></div>
+                        </ion-col>
+                      </ion-row>
+                  </div>
+            </ion-slide>
+          </ion-slides>
+    </div>
+    <div class="header_submenu">
+        <h4>Products for you</h4>
+        <button class="more_btn">More</button>
+        <div class="clear"></div>
+      </div>
+      <div class="product_section">
+        <ion-row>
+          <ion-col col-4>
+            <div class="product_div">
+              <div class="rating">3.1</div>
+              <div class="product_img">
+                <img src="../../assets/img/asset_dummy_item1.png">
+              </div>
+            </div>
+            <h4>PM 237</h4>
+            <hr>
+          </ion-col>
+          <ion-col col-4>
+              <div class="product_div">
+                  <div class="rating">3.1</div>
+                  <div class="product_img">
+                    <img src="../../assets/img/asset_dummy_item2.png">
+                  </div>
+              </div>
+              <h4>Mega 3inch Band</h4>
+              <hr>
+          </ion-col>
+          <ion-col col-4>
+              <div class="product_div">
+                  <div class="rating">3.1</div>
+                  <div class="product_img">
+                    <img src="../../assets/img/asset_dummy_item3.png">
+                  </div>
+              </div>
+              <h4>PM 237</h4>
+              <hr>
+          </ion-col>
+        </ion-row>
+      </div>
+      <div class="rate_card">
+        <div class="inner_shop_name">
+          <ion-row>
+            <ion-col class="p0">
+                <h5>Smart Mortors</h5>
+                <p><img src="../../assets/img/asset_avatar_sml.png">Peter mcWay</p>
+            </ion-col>
+            <ion-col class="p0">
+              <h6>Service - 2 days ago</h6>
+            </ion-col>
+          </ion-row>
+        </div>
+        <ion-row>
+            <ion-col class="p0">
+              <h4>Rate this workshop</h4>
+              <fieldset class="rating">
+                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+              </fieldset>
+            </ion-col>
+        </ion-row>
+      </div>
+      <div class="header_submenu">
+          <h4>Services</h4>
+          <div class="clear"></div>
+      </div>
+      <div class="home_main_stack_menu">
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu4.png">
+                <p>Heating & <br>Airconditioning</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu5.png">
+                  <p>Electrical &<br>Lighting</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu6.png">
+                  <p>Clutch &<br>Transmission</p>
+              </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu7.png">
+                <p>Braking<br>System</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu8.png">
+                  <p>Drive train<br>Suspension</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu9.png">
+                  <p>Fuel<br>System</p>
+              </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu10.png">
+                <p>Interior & <br>Exterior</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu11.png">
+                  <p>Engine<br>Components</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu12.png">
+                  <p>Body Parts &<br>Hardware</p>
+              </ion-col>
+          </ion-row>
+          <ion-row>
+              <ion-col class="textCenter">
+                <img src="../../assets/img/asset_menu13.png">
+                <p>Electronic<br>Devices  </p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu14.png">
+                  <p>Parts<br>Purchase</p>
+              </ion-col>
+              <ion-col class="textCenter">
+                  <img src="../../assets/img/asset_menu15.png">
+                  <p>Parts<br>Purchase</p>
+              </ion-col>
+          </ion-row>
+      </div>
+      <div class="header_submenu">
+          <h4>Parts for you</h4>
+          <button class="more_btn">More</button>
+          <div class="clear"></div>
+        </div>
+        <div class="product_section">
+          <ion-row>
+            <ion-col col-4>
+              <div class="product_div">
+                <div class="rating">3.1</div>
+                <div class="product_img">
+                  <img src="../../assets/img/asset_dummy_item1.png">
+                </div>
+              </div>
+              <h4>PM 237</h4>
+              <hr>
+            </ion-col>
+            <ion-col col-4>
+                <div class="product_div">
+                    <div class="rating">3.1</div>
+                    <div class="product_img">
+                      <img src="../../assets/img/asset_dummy_item2.png">
+                    </div>
+                </div>
+                <h4>Mega 3inch Band</h4>
+                <hr>
+            </ion-col>
+            <ion-col col-4>
+                <div class="product_div">
+                    <div class="rating">3.1</div>
+                    <div class="product_img">
+                      <img src="../../assets/img/asset_dummy_item3.png">
+                    </div>
+                </div>
+                <h4>PM 237</h4>
+                <hr>
+            </ion-col>
+          </ion-row>
+        </div>
+  </div>
+
+  <div class="home_menu" *ngIf="menuShow" [@slideInOut]>
+    <div class="menu_outter" (click)="menuToggle()">
+    </div>
+    <div class="menu_inner" *ngIf="login">
+      <ion-row>
+        <ion-col>
+          <img src="../../assets/img/asset_setting.png">
+          <p>Settings</p>
+        </ion-col>
+        <ion-col (click)="goToPage('profile')">
+          <img src="../../assets/img/asset_profile.png">
+          <p>Profile</p>
+        </ion-col>
+        <ion-col (click)="logout()">
+          <img src="../../assets/img/asset_logout.png">
+          <p>Logout</p>
+        </ion-col>
+      </ion-row>
+    </div>
+    <div class="menu_inner" *ngIf="!login">
+      <ion-row>
+        <ion-col>
+          <h6>Are you sure to logout ?</h6>
+          <button class="logout_btn floatLeft" (click)="toLogin('login')">Logout</button>
+          <button class="cancel_btn floatRight" (click)="menuToggle()">Cancel</button>
+        </ion-col>
+      </ion-row>
+    </div>
+  </div>
 </ion-content>

src/app/home/home.page.scss

-.welcome-card ion-img {
-  max-height: 35vh;
+.home_wrapper{
+  background: #f0eef6;
+  padding-top: 30px;
+  .location_box{
+    position: fixed;
+    left:0px;
+    top: 55px;
+    right:0px;
+    z-index: 999;
+  }
+  .location_bar{
+    max-width:190px;
+    background: #fff;
+    padding:5px;
+    border-radius: 20px;
+    margin:0 auto;
+    text-align: center;
+    -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    background-image: url("../../assets/img/aaset_loc.png");
+    background-position: left 15px top 6px;
+    background-repeat: no-repeat;
+    padding-left:35px;
+    padding-right:30px;
+    background-size: 15px;
+    font-size: 14px;
+    white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
+  }
+  .home_main_stack_menu{
+    padding: 15px;
+    img{
+      width: 80px;
+    }
+    p{
+      text-align: center;
+      color: #4e4961;
+      margin:0px;
+      padding-top: 10px;
+
+    }
+  }
+  .header_submenu{
+    padding:10px;
+    h4{
+      margin:0px;
+      padding:0px;
+      float: left;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    }
+    .more_btn{
+      background: #39267f;
+      color: #fff;
+      height:35px;
+      float: right;
+      padding-left: 15px;
+      padding-right: 15px;
+      border-radius: 20px;
+    }
+  }
+  .product_section{
+    padding: 10px;
+    .product_div{
+      background: #f6f5fa;
+      text-align: center;
+      border-radius:15px;
+      padding: 10px;
+      position: relative;
+      .rating{
+        background-color: rgba(255, 255, 255, 0.9);
+        background-image: url("../../assets/img/asset_star.png");
+        position: absolute;
+        bottom: 10px;
+        left: 5px;
+        padding-left: 25px;
+        background-size: 12px;
+        background-repeat: no-repeat;
+        background-position: center left 6px;
+        padding-right: 10px;
+        border-radius: 15px;
+      }
+      img{
+        height:90px;
+        width: auto;
+      }
+    }
+    h4{
+      color: #282438;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 14px;
+    }
+    hr{
+      border:2px solid #fbd339;
+      width:30px;
+      border-radius: 20px;
+      height:0px;
+      margin-left:0px;
+    }
+  }
+  .appointment_slider{
+    .swiper-pagination{
+      position: relative;
+      bottom: 0px;
+    }
+  }
+  .appointment_card{
+    background-image:url("../../assets/img/asset_appointment_card.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    border-radius:15px;
+    margin: 10px;
+    padding: 20px;
+    width: 100%;
+
+    h4{
+      color: #fff;
+      margin:0px;
+      padding:0px;
+      font-size:16px;
+      padding-bottom: 4px;
+      text-align: left;
+    }
+    h6{
+      color: #fff;
+      margin:0px;
+      padding:0px;
+      font-size:12px;
+      font-weight: 300;
+      text-align: left;  
+      strong{
+        font-weight: 400;
+      }
+      
+    }
+    p{
+      padding:0px;
+      margin:0px;
+      color: #fff;
+      font-weight: 300;
+      text-align: right;
+    }
+    h3{
+      color: #fff;
+      font-weight: 400;
+      text-align: left;
+      background: url("../../assets/img/asset_play.png");
+      float: left;
+      background-position: right;
+      background-repeat: no-repeat;
+      padding-right: 30px;
+      background-size: 15px;
+    }
+  }
+  .rate_card{
+    background-color: #f6f5fa;
+    border-radius:15px;
+    margin: 10px;
+    padding: 20px;
+    .inner_shop_name{
+      border-left:3px solid #fbd339;
+      padding-left: 10px;
+      margin-bottom: 15px;
+      h5{
+        margin:0px;
+        padding:0px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 2px;
+
+      }
+      p{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        img{
+          width: 15px;
+          height:15px;
+          border-radius: 50%;
+          object-fit:cover;
+          object-position:center;
+          margin-right:5px;
+          position: relative;
+          top: 3px;
+
+        }
+      }
+      h6{
+        margin:0px;
+        padding:0px;
+        font-size: 12px;
+        text-align: right;
+      }
+    }
+    h4{
+      margin:0px;
+      padding:0px;
+      font-size: 16px;
+      text-align:left;
+    }
+
+    .rating { 
+      border: none;
+      width:260px;
+      margin: 0 auto;
+    }
+    
+    .rating > input { display: none; } 
+    .rating > label:before { 
+      margin: 5px;
+      font-size:40px;
+      font-family: FontAwesome;
+      display: inline-block;
+      content: "\f005";
+    }
+    
+    .rating > .half:before { 
+      content: "\f089";
+      position: absolute;
+    }
+    
+    .rating > label { 
+      color: #dcdae9; 
+     float: right; 
+    }
+    
+    /***** CSS Magic to Highlight Stars on Hover *****/
+    
+    .rating > input:checked ~ label, /* show gold star when clicked */
+    .rating:not(:checked) > label:hover, /* hover current star */
+    .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+    
+    .rating > input:checked + label:hover, /* hover current star when changing rating */
+    .rating > input:checked ~ label:hover,
+    .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+    .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+  }
+  
 }
+.home_menu{
+  position: fixed;
+  top: 0px;
+  left:0px;
+  right:0px;
+  bottom: 0px;
+  background-color:rgba(0,0,0,0.5);
+  z-index: 99;
+  .menu_outter{
+    width: 100%;
+    height:calc(100% - 180px);
+  }
+  .menu_inner{
+    height: 180px;
+    padding: 15px;
+    transition: all 0.5s ease;
+    padding-top:50px;
+    background-image: url("../../assets/img/asset_menu_wrapper.png");
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    ion-row{
+      ion-col{
+        text-align:center;
+        img{
+          width: 75px;
+        }
+        p{
+          text-align: center;
+          color: #4e4961;
+          font-weight: 400;
+          padding:0px;
+          margin:0px;
+          font-size: 16px;
+        }
+        h6{
+          color: #282438;
+          font-weight:600;
+          text-align: left;
+          padding:0px;
+          margin:0px;
+          font-size: 18px;
+          padding-top:10px;
+          padding-bottom: 20px;
+        }
+      }
+    }
+    .logout_btn{
+      width: 49%;
+      height:40px;
+      background-color: #fff;
+      color: #39267f;
+      border:2px solid #39267f;
+      border-radius: 20px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+    .cancel_btn{
+      width: 49%;
+      height:40px;
+      background-color: #39267f;
+      border:2px solid #39267f;
+      color: #fff;
+      border-radius: 20px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+}
\ No newline at end of file

src/app/home/home.page.ts

 import { Component } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('300ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
 })
 export class HomePage {
 
-  constructor() {}
+  menuShow = false;
+  login= true;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) {}
+
+
+  goToPage(path,data=null){
+    this.menuShow = !this.menuShow;
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    this.logout();
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+  toLogin(path,data=null){
+    this.menuShow = !this.menuShow;
+    this.router.navigateByUrl(path,{queryParams:data});
+    this.logout();
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+
+  menuToggle(){
+    this.menuShow = !this.menuShow;
+  }
+
+  logout(){
+    this.login = !this.login;
+  }
 
 }

src/app/login/login.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LoginPage } from './login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [LoginPage]
+})
+export class LoginPageModule {}

src/app/login/login.page.html

+<ion-content>
+  <div class="login_wrapper">
+    <h1>Hi!</h1>
+    <h3>Login to Continue</h3>
+    <div class="login_form">
+      <div class="row">
+          <ion-input value="Email Address" type="text"></ion-input>
+      </div>
+      <div class="row">
+          <ion-input value="Password" type="password"></ion-input>
+      </div>
+      <div class="row">
+        <button class="login_btn" (click)="goToPage('home')">Sign In</button>
+      </div>
+      <div class="row">
+        <p (click)="goToPage('forgot')">Forgot Password ?</p>
+      </div>
+    </div>
+    <div class="sigup_footer" (click)="istoggle()">
+      <img src="../../assets/img/asset_signup_arrow.png"><br>
+      Sign Up
+    </div>
+  </div>
+</ion-content>
+<div class="signup_div" *ngIf="isShow" [@slideInOut]>
+    <ion-content>
+      <div class="signup_wrapper">
+          <div class="sigin_header" (click)="istoggle()">
+              Sign In<br>
+              <img src="../../assets/img/asset_signin_arrow.png">
+          </div>
+          <h1>Sign Up</h1>
+          <div class="signup_form">
+              <div class="row">
+                <p>Your Full Name</p>
+                <ion-input value="John Doe" type="text"></ion-input>
+              </div>
+              <div class="row">
+                  <p>Email Address</p>
+                  <ion-input value="[email protected]" type="text"></ion-input>
+              </div>
+              <div class="row">
+                  <p>Phone Number</p>
+                  <ion-row class="p0">
+                    <ion-col size="4">
+                      <ion-select placeholder="">
+                        <ion-select-option value="">+91</ion-select-option>
+                      </ion-select>
+                    </ion-col>
+                    <ion-col size="8">
+                      <ion-input value="" type="number"></ion-input>
+                    </ion-col>
+                  </ion-row>
+              </div>
+              <div class="row">
+                  <p>Country</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">Country Name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>District</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">District Name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>City</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">City Name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>Area</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">Area name</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                  <p>House name/Building</p>
+                  <ion-select placeholder="">
+                      <ion-select-option value="">Choose address</ion-select-option>
+                  </ion-select>
+              </div>
+              <div class="row">
+                <h6>This address will be saved as your permanent address. You can change it at any time.</h6>
+                </div>
+                <div class="row">
+                    <button class="signup_btn" (click)="goToPage('addcar')">Next</button>
+                  </div>
+                  <div class="row textCenter">
+                    <p>By Creating Account, I agree to allo repar's<br>
+                    <a>Terms & Conditions</a></p>
+                    </div>
+          </div>
+      </div>
+    </ion-content>
+</div>
+
+

src/app/login/login.page.scss

+.login_wrapper{
+    background-image: url("../../assets/img/asset_login_wrapper1.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100vh;
+    padding:20px;
+    padding-top: 12%;
+    h1{
+        text-align: center;
+        color: #fff;
+        font-size: 54px;
+        font-weight: 400;
+        padding-top: 20px;
+    }
+    h3{
+        text-align: center;
+        color: #fff;
+        font-weight:300;
+        margin-top: 0px;
+        font-size: 18px;
+    }
+    .login_form{
+        padding-top: 10%;
+        .row{
+            margin-bottom: 20px;
+            ion-input{
+                text-align: center;
+                background-image: linear-gradient(to right, #5742a5 , #7a60da);
+                border-radius: 20px;
+                color:#fff;
+                height: 40px;
+            }
+            .login_btn{
+                height: 40px;
+                width: 100%;
+                color: #282438;
+                background-color: #ffffff;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px;            
+            }
+            p{
+                color: #fff;
+                text-align: center;
+                padding-top: 20px;
+            }
+        }
+    }
+    .sigup_footer{
+        text-align: center;
+        color: #fff;
+        position: fixed;
+        width: 100%;
+        left: 0px;
+        right: 0px;
+        bottom: 35px;
+        font-size: 20px;
+        img{
+            width:35px;
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.sigin_header{
+    text-align: center;
+    color: #282438;
+    width: 100%;
+    padding:15px;
+    font-weight: 500;
+    font-size: 20px;
+    img{
+        margin-top: 10px;
+        width:35px;
+    }
+}
+
+.signup_wrapper{
+    height:100vh;  
+    background: url("../../assets/img/asset_header_wrapper.png");
+    background-position: center top;
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
+
+
+.signup_div{
+    height:100vh;
+    position: fixed;
+    top:0px;
+    left:0px;
+    right:0px;
+    z-index: 9;
+    h1{
+        text-align: center;
+        color: #282438;
+        font-size: 40px;
+        font-weight: 400;
+    }
+
+    .signup_form{
+        padding: 15px;
+        .row{
+            margin-bottom: 15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+    }
+}

src/app/login/login.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginPage } from './login.page';
+
+describe('LoginPage', () => {
+  let component: LoginPage;
+  let fixture: ComponentFixture<LoginPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.page.ts

+import { Component, OnInit } from '@angular/core';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({transform: 'translateY(100%)'}),
+        animate('500ms ease-in', style({transform: 'translateY(0%)'}))
+      ]),
+      transition(':leave', [
+        animate('500ms ease-out', style({transform: 'translateY(100%)'}))
+      ])
+    ])
+  ]
+})
+export class LoginPage implements OnInit {
+  isShow = false;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  istoggle(){
+    this.isShow = !this.isShow;
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    
+  }
+
+}

src/app/myservices/myservices.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MyservicesPage } from './myservices.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MyservicesPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [MyservicesPage]
+})
+export class MyservicesPageModule {}

src/app/myservices/myservices.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>MY SERVICES</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+</ion-header>
+<ion-content>
+  <div class="services_wrapper">
+    <h4>Upcoming Services</h4>
+    <ul>
+      <li>
+        <h5>2 Services</h5>
+        <p>Heating & Air Conditioning, Break System</p>
+        <p></p>
+      </li>
+    </ul>
+  </div>
+</ion-content>

src/app/myservices/myservices.page.scss

+.services_wrapper{
+    background-color: #faf9fc;
+    padding:15px;
+    width:100%;
+    h4{
+        margin:0px;
+        padding:0px;
+    }
+    ul{
+        margin:0px;
+        padding:0px;
+        li{
+            list-style: none;
+            background-color: #f6f5fa;
+            h5{
+                margin:0px;
+                padding: 0px;
+                color: #282438;
+            }
+            p{
+                margin:0px;
+                padding: 0px;
+                color: #a29ebf;
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/myservices/myservices.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyservicesPage } from './myservices.page';
+
+describe('MyservicesPage', () => {
+  let component: MyservicesPage;
+  let fixture: ComponentFixture<MyservicesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyservicesPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyservicesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/myservices/myservices.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-myservices',
+  templateUrl: './myservices.page.html',
+  styleUrls: ['./myservices.page.scss'],
+})
+export class MyservicesPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/otp/otp.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { OtpPage } from './otp.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OtpPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [OtpPage]
+})
+export class OtpPageModule {}

src/app/otp/otp.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>OTP</h4></div>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                  <div class="row">
+                      <h5>We have sent an OTP to</h5>
+                      <h2>8888 000 000</h2>
+                      <p class="textCenter">Type the OTP below</p>
+                      <div class="otp_input_box">
+                        <ion-row>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                          <ion-col col-3>
+                            <ion-input value="" type="number"></ion-input>
+                          </ion-col>
+                        </ion-row>
+                      </div>
+                  </div>
+                  <div class="row textCenter">
+                      <button class="signup_btn" (click)="goToPage('password')">Submit</button>
+                    </div>
+              </div>
+        </div>
+      </ion-content>
+      <ion-footer>
+        <h3>Resend OTP</h3>
+      </ion-footer>

src/app/otp/otp.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom:25px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+
+            h5{
+                color: #4e4961;
+                text-align: center;
+                font-size: 16px;
+            }
+
+            h2{
+                text-align: center;
+                color: #282438;
+                font-size: 32px;
+                padding-bottom: 15%;
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius:35px;
+                color:#39267f;
+                height: 45px;
+                font-weight: 600;
+                text-align: center;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 120px;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+
+        .otp_input_box{
+            width: 80%;
+            margin: 0 auto;
+        }
+    }
+        
+}
+
+h3{
+    color: #39267f;
+    text-align:center;
+    font-size: 15px;
+    font-weight: 500;
+}
\ No newline at end of file

src/app/otp/otp.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OtpPage } from './otp.page';
+
+describe('OtpPage', () => {
+  let component: OtpPage;
+  let fixture: ComponentFixture<OtpPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OtpPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OtpPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/otp/otp.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-otp',
+  templateUrl: './otp.page.html',
+  styleUrls: ['./otp.page.scss'],
+})
+export class OtpPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/password/password.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PasswordPage } from './password.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PasswordPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [PasswordPage]
+})
+export class PasswordPageModule {}

src/app/password/password.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+            
+                </button>
+                <div class="nav_title floatLeft"><h4>Password</h4></div>
+                <div class="clear"></div>
+              </div>
+              <div class="forgot_form">
+                <div class="row">
+                  <p>New Password</p>
+                  <ion-input value="" type="password"></ion-input>
+                </div>
+                <div class="row">
+                  <p>Confirm Password</p>
+                  <ion-input value="" type="password"></ion-input>
+                </div><br>
+                <div class="row textCenter">
+                    <button class="signup_btn" (click)="goToPage('login')">Sign Up</button>
+                </div>
+              </div>
+        </div>
+      </ion-content>
\ No newline at end of file

src/app/password/password.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom:15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+
+            h5{
+                color: #4e4961;
+                text-align: center;
+                font-size: 16px;
+            }
+
+            h2{
+                text-align: center;
+                color: #282438;
+                font-size: 32px;
+                padding-bottom: 15%;
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius:35px;
+                color:#39267f;
+                height: 45px;
+                font-weight: 600;
+                text-align: center;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+
+        .otp_input_box{
+            width: 80%;
+            margin: 0 auto;
+        }
+    }
+        
+}
+
+h3{
+    color: #39267f;
+    text-align:center;
+    font-size: 15px;
+    font-weight: 500;
+}
\ No newline at end of file

src/app/password/password.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordPage } from './password.page';
+
+describe('PasswordPage', () => {
+  let component: PasswordPage;
+  let fixture: ComponentFixture<PasswordPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PasswordPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/password/password.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-password',
+  templateUrl: './password.page.html',
+  styleUrls: ['./password.page.scss'],
+})
+export class PasswordPage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/profile/profile.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ProfilePage } from './profile.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProfilePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ProfilePage]
+})
+export class ProfilePageModule {}

src/app/profile/profile.page.html

+
+      <ion-content>
+        <div class="forgot_wrapper">
+            <div class="app_header">
+                <button class="nav_btn back_btn floatLeft" (click)="goBack()">
+                </button>
+                <div class="nav_title floatLeft"><h4>JOHN DOE</h4></div>
+                <button class="nav_btn floatLeft">
+                  <div class="account_pic">
+                      <img src="../../assets/img/asset_triangle.png">
+                  </div>
+                </button>
+                <div class="clear"></div>
+                <div class="clear"></div>
+            </div>
+            <div class="profile_pic">
+              <div class="overlay"></div>
+              <img src="../../assets/img/asset_profile_pic.png">
+            </div>
+            <div class="profile_wrapper">
+              <ul>
+                  <li (click)="goToPage('myservices')">
+                      <div class="li_image">
+                        <img src="../../assets/img/asset_m1.png">
+                      </div>
+                      <div class="li_detail">
+                        <h5>My Services</h5>
+                        <p>Total services: 08</p>
+                      </div>
+                      <div class="clear"></div>
+                  </li>
+                  <li>
+                      <div class="li_image">
+                          <img src="../../assets/img/asset_m2.png">
+                      </div>
+                      <div class="li_detail">
+                        <h5>My Orders</h5>
+                        <p>Total purchases: 18</p>
+                      </div>
+                      <div class="clear"></div>
+                  </li>
+                  <li>
+                      <div class="li_image">
+                          <img src="../../assets/img/asset_m3.png">
+                      </div>
+                      <div class="li_detail">
+                        <h5>My Cars</h5>
+                        <p></p>
+                      </div>
+                      <div class="clear"></div>
+                  </li>
+                  <li>
+                      <div class="li_image">
+                          <img src="../../assets/img/asset_m4.png">
+                      </div>
+                      <div class="li_detail">
+                        <h5>General Details</h5>
+                        <p></p>
+                      </div>
+                      <div class="clear"></div>
+                  </li>
+                  <li>
+                      <div class="li_image">
+                          <img src="../../assets/img/asset_m5.png">
+                      </div>
+                      <div class="li_detail borderNone">
+                        <h5>Logout</h5>
+                        <p></p>
+                      </div>
+                      <div class="clear"></div>
+                  </li>
+              </ul>
+            </div>
+        </div>
+      </ion-content>

src/app/profile/profile.page.scss

+
+.forgot_wrapper{
+    background-image: url("../../assets/img/asset_forgot_bg.png");
+    background-position: center top -30px;
+    background-size: 100%;
+    .profile_pic{
+        width:100%;
+        height:290px;
+        position: relative;
+        .overlay{
+            position: absolute;
+            top:0px;
+            left:0px;
+            right:0px;
+            bottom: 0px;
+            -webkit-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+-moz-box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+box-shadow: inset 0px -110px 84px -32px rgba(273,273,273,1);
+
+        }
+        img{
+            width:100%;
+            height:100%;
+            object-fit:cover;
+            object-position:center;
+        }
+    }
+    .forgot_form{
+        padding: 15px;
+        padding-top: 40px;
+        .row{
+            margin-bottom: 15px;
+            p{
+                color: #4e4961;
+                padding: 10px;
+                margin: 0px;
+                padding-left: 20px;
+                font-weight: 500;
+                a{
+                    color: #39267f;
+                }
+            }
+            h6{
+                color: #4e4961;
+                padding-left: 20px;
+                font-weight: 400;
+                font-size: 14px;
+
+            }
+            ion-input{
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important;
+            }
+
+            ion-select {
+                background: #dcdae9;
+                border-radius: 20px;
+                color:#39267f;
+                height: 40px;
+                font-weight: 600;
+                padding-left: 15px !important; 
+                padding-right: 20px;
+            }
+            .signup_btn{
+                height: 40px;
+                width: 100%;
+                color: #fff;
+                background-color: #39267f;
+                border-radius: 20px;
+                font-weight: 500;
+                font-size: 16px; 
+            }
+        }
+    }
+    .profile_wrapper{
+        width: 90%;
+        margin:0 auto;
+        padding:20px;
+        background: rgba(238,237,244,0.8);
+        position: relative;
+        bottom:80px;
+        border-radius: 15px;
+        ul{
+            margin:0px;
+            padding:0px;
+            li{
+                list-style: none;
+            
+                .li_image{  
+                    width: 50px;
+                    float: left;
+                    padding-top: 15px;
+                    img{
+                        height: 25px;
+                    }
+                }
+                .li_detail{
+                    width: calc(100% - 50px);
+                    float: left;
+                    padding-bottom: 15px;
+                    padding-top: 15px;
+                    border-bottom: 1px solid #e1deea;
+                    h5{
+                        margin:0px;
+                        padding: 0px;
+                        color: #282438;
+                        padding-bottom: 5px;
+                    }
+                    p{
+                        margin:0px;
+                        padding:0px;
+                        color: #a29ebf;
+                        font-size: 10px;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/profile/profile.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfilePage } from './profile.page';
+
+describe('ProfilePage', () => {
+  let component: ProfilePage;
+  let fixture: ComponentFixture<ProfilePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProfilePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfilePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile/profile.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.page.html',
+  styleUrls: ['./profile.page.scss'],
+})
+export class ProfilePage implements OnInit {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/review/review.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ReviewPage } from './review.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ReviewPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ReviewPage]
+})
+export class ReviewPageModule {}

src/app/review/review.page.html

+<ion-content class="review_wrapper">
+<button class="" (click)="myDismiss()">close</button>
+</ion-content>

src/app/review/review.page.scss

+.review_wrapper{
+
+}
+

src/app/review/review.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReviewPage } from './review.page';
+
+describe('ReviewPage', () => {
+  let component: ReviewPage;
+  let fixture: ComponentFixture<ReviewPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReviewPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReviewPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/review/review.page.ts

+import { Component, OnInit } from '@angular/core';
+import {ModalController, NavParams} from '@ionic/angular';
+
+@Component({
+  selector: 'app-review',
+  templateUrl: './review.page.html',
+  styleUrls: ['./review.page.scss'],
+})
+export class ReviewPage implements OnInit {
+
+  constructor(
+    private modalController: ModalController,
+    private navParams: NavParams
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  async myDismiss() {
+    await this.modalController.dismiss();
+  }
+
+}

src/app/roadassistance/roadassistance.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { RoadassistancePage } from './roadassistance.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RoadassistancePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [RoadassistancePage]
+})
+export class RoadassistancePageModule {}

src/app/roadassistance/roadassistance.page.html

+<ion-header>
+    <div class="app_header">
+        <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
+        </button>
+      <div class="nav_title floatLeft"><h4>ROAD ASSISTANCE</h4></div>
+      <button class="nav_btn nav_btn_text floatRight">
+
+        </button>
+      <div class="clear"></div>
+  </div>
+  </ion-header>
+<ion-content>
+    <div class="home_wrapper">
+      <div class="location_box">
+        <div class="location_bar">
+            Infopark,Kakkanad
+        </div>
+      </div>
+      <ul>
+        <li (click)="goToPage('booking')">
+          <div class="circle">
+            <img src="../../assets/img/asset_shop1.png">
+          </div>
+          <div class="details">
+              <div class="list_btn remind">Remind</div>
+            <h5>Presto Towing Services</h5>
+            <fieldset class="rating">
+                <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+            </fieldset>
+            <p>34 Reviews</p>
+            <h6 class="floatLeft"><span class="distance_banner">4 Km</span><span class="other_banner">Nearest</span></h6>
+            <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
+              <div class="clear"></div>
+          </div>
+          <div class="clear"></div>
+        </li>
+        <li (click)="goToPage('booking')">
+            <div class="circle">
+              <img src="../../assets/img/asset_shop2.png">
+            </div>
+            <div class="details">
+                <div class="list_btn book">Book</div>
+              <h5>Presto Towing Services</h5>
+              <fieldset class="rating">
+                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+              </fieldset>
+              <p>34 Reviews</p>
+              <h6 class="floatLeft"><span class="distance_banner">4 Km</span><span class="other_banner">Nearest</span></h6>
+              <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
+              <div class="clear"></div>
+            </div>
+            <div class="clear"></div>
+          </li>
+      </ul>
+    </div>
+</ion-content>

src/app/roadassistance/roadassistance.page.scss

+.home_wrapper{
+    padding-top: 30px;
+    .location_box{
+      position: fixed;
+      left:0px;
+      top: 50px;
+      right:0px;
+      z-index: 999;
+    }
+    .location_bar{
+      max-width:200px;
+      background: #fbd339;
+      padding:5px;
+    border-radius: 20px;
+    margin:0 auto;
+    text-align: center;
+    -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.2);
+    background-image: url("../../assets/img/aaset_loc.png");
+    background-position: left 15px top 6px;
+    background-repeat: no-repeat;
+    padding-left:35px;
+    padding-right:30px;
+    background-size: 15px;
+    font-size: 14px;
+    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+    }
+    ul{
+        padding:10px;
+        margin:0px;
+        li{
+            background: #f6f5fa;
+            border-radius:10px;
+            margin-bottom: 10px;
+            position: relative;
+            padding:20px;
+            .circle{
+                width:60px;
+                height:60px;
+                float: left;
+                img{
+                    width: 100%;
+                    height:100%;
+                }
+            }
+            .details{
+                float: right;
+                width:calc(100% - 60px);
+                padding-left: 20px;
+                h5{
+                    margin:0px;
+                    padding:0px;
+                    padding-bottom: 5px;
+                }
+                .list_btn{
+                    position: absolute;
+                    right: 2px;
+                    top: 17px;
+                    font-size: 14px;
+                }
+                .remind{
+                    color: #282438;
+                    background: url("../../assets/img/asset_remind.png");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100%;
+                    padding: 8px;
+                }
+                .book{
+                    color: #fff;
+                    background: url("../../assets/img/asset_book.png");
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 100%;
+                    padding: 8px;
+                }
+                p{
+                    margin:0px;
+                    padding:0px;
+                    color: #282438;
+                    font-size: 12px;
+                    padding-top: 5px;
+                }
+                h6{
+                    margin:0px;
+                    padding: 0px;
+                    padding-top:8px;
+                }
+                .distance_banner{
+                    background-color: #fff;
+                    padding: 3px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    background-image: url("../../assets/img/aaset_loc.png");
+                    background-position: left 5px top 4px;
+                    background-repeat: no-repeat;
+                    padding-left: 20px;
+                    background-size: 12px;
+                    border-radius: 10px;
+                    margin-right: 10px;
+                    font-size: 12px;
+                }
+                .other_banner{
+                    background: #fbd339;
+                    color: #282438;
+                    padding: 3px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    font-size: 12px;
+                }
+
+                .playit{
+                    padding-top: 8px;
+                    img{
+                        width: 15px;
+                    }
+                }
+                .rating { 
+                    border: none;
+                    width:85px;
+                    margin: 0px;
+                    padding: 0px;
+                  }
+                  
+                  .rating > input { display: none; } 
+                  .rating > label:before { 
+                    margin:2px;
+                    font-size:14px;
+                    font-family: FontAwesome;
+                    display: inline-block;
+                    content: "\f005";
+                  }
+                  
+                  .rating > .half:before { 
+                    content: "\f089";
+                    position: absolute;
+                  }
+                  
+                  .rating > label { 
+                    color: #dcdae9; 
+                   float: right; 
+                  }
+                  
+                  /***** CSS Magic to Highlight Stars on Hover *****/
+                  
+                  .rating > input:checked ~ label, /* show gold star when clicked */
+                  .rating:not(:checked) > label:hover, /* hover current star */
+                  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                  
+                  .rating > input:checked + label:hover, /* hover current star when changing rating */
+                  .rating > input:checked ~ label:hover,
+                  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/roadassistance/roadassistance.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoadassistancePage } from './roadassistance.page';
+
+describe('RoadassistancePage', () => {
+  let component: RoadassistancePage;
+  let fixture: ComponentFixture<RoadassistancePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoadassistancePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoadassistancePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/roadassistance/roadassistance.page.ts

+import { Component } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-roadassistance',
+  templateUrl: './roadassistance.page.html',
+  styleUrls: ['./roadassistance.page.scss'],
+})
+export class RoadassistancePage {
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+
+}

src/app/servicecompleted/servicecompleted.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ServicecompletedPage } from './servicecompleted.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ServicecompletedPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ServicecompletedPage]
+})
+export class ServicecompletedPageModule {}

src/app/servicecompleted/servicecompleted.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>servicecompleted</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/servicecompleted/servicecompleted.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicecompletedPage } from './servicecompleted.page';
+
+describe('ServicecompletedPage', () => {
+  let component: ServicecompletedPage;
+  let fixture: ComponentFixture<ServicecompletedPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServicecompletedPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicecompletedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/servicecompleted/servicecompleted.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-servicecompleted',
+  templateUrl: './servicecompleted.page.html',
+  styleUrls: ['./servicecompleted.page.scss'],
+})
+export class ServicecompletedPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/start/start.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { StartPage } from './start.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: StartPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [StartPage]
+})
+export class StartPageModule {}

src/app/start/start.page.html

+<ion-content>
+  <div class="start_wizard_wrapper">
+      <ion-slides pager="true" [options]="slideOpts" (ionSlideDidChange)="slideChanged()">
+          <ion-slide>
+            <div class="wizard_inner_wrapper">
+                <img src="../../assets/img/asset_wiz_stepone.png">
+                <div class="wizard_textarea">
+                    <h3>Book Car Services</h3>
+                    <p>
+                        Find a better service centre and know the 
+                        actual amount of service
+                    </p>
+                </div>
+            </div>
+          </ion-slide>
+          <ion-slide>
+              <div class="wizard_inner_wrapper">
+            <img src="../../assets/img/asset_wiz_steptwo.png">
+            <div class="wizard_textarea">
+                <h3>Purchase Car Parts</h3>
+                <p>
+                    Purchase your car parts and securely
+                    pay the amount online
+                </p>
+            </div>
+            </div>
+          </ion-slide>
+          <ion-slide>
+              <div class="wizard_inner_wrapper">
+            <img src="../../assets/img/asset_wiz_stepthree.png">
+            <div class="wizard_textarea">
+                <h3>Road Assistance</h3>
+                <p>
+                    For road assistance find the nearest mechanic and request to him if available
+                </p>
+            </div>
+            </div>
+          </ion-slide>
+      </ion-slides>
+      <div class="btn_row">
+          <div class="btn_bay" [hidden] = "currentIndex == 2">
+            <div class="btn_skip" (click)="prev()">
+              Skip  
+            </div>
+            <div class="btn_next" (click)="next()">
+              Next 
+            </div>
+          </div>
+
+          <div class="btn_bay" [hidden] = "currentIndex != 2">
+              <div class="btn_getstarted" (click)="goToPage('login')">
+                Get Started
+              </div>
+            </div>
+        </div>
+  </div>
+</ion-content>

src/app/start/start.page.scss

+.start_wizard_wrapper{
+    ion-slides{
+        .wizard_inner_wrapper{
+            width:100%;
+            .wizard_textarea{
+                width:100%;
+                padding:15px;
+                padding-top:0px;
+                padding-bottom:30px;
+                h3{
+                    color: #282438;
+                    font-size: 25px;
+                    margin:0px;
+                    padding: 0px;
+                    font-weight: 700;
+                    padding-bottom: 10px;
+                }
+                p{
+                    color: #4e4961;
+                    margin:0px;
+                    padding: 0px;
+                    font-size: 16px;
+                    padding-bottom: 10px;
+                }
+            }
+           
+        }
+        .swiper-pagination{
+            .swiper-pagination-bullet{
+                background: #282438 !important;
+            }
+        }
+    }
+    .btn_row{
+        text-align: center;
+        padding: 10px;
+        .btn_bay{
+           
+            display: inline-block;
+            border-radius: 20px;
+            .btn_skip{
+                border:2px solid #39267f;
+                display: inline-block;
+                padding: 8px;
+                padding-left: 20px;
+                padding-right: 20px;
+                cursor: pointer;
+                border-top-left-radius: 20px;
+                border-bottom-left-radius: 20px;
+            }
+            .btn_next{
+                border:2px solid #39267f;
+                display: inline-block;
+                padding: 8px;
+                padding-left: 20px;
+                padding-right: 20px;
+                cursor: pointer;
+                background: #39267f;
+                border-top-right-radius: 20px;
+                border-bottom-right-radius: 20px;
+                color: #fff;
+            }
+
+            .btn_getstarted{
+                border:2px solid #39267f;
+                display: inline-block;
+                padding: 8px;
+                padding-left: 25px;
+                padding-right: 25px;
+                cursor: pointer;
+                background: #39267f;
+                border-radius: 20px;
+                color: #fff;
+            }
+        }
+    }
+}
+    
\ No newline at end of file

src/app/start/start.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StartPage } from './start.page';
+
+describe('StartPage', () => {
+  let component: StartPage;
+  let fixture: ComponentFixture<StartPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StartPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/start/start.page.ts

+import { Component, OnInit, ViewChild, } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+import { Router,ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-start',
+  templateUrl: './start.page.html',
+  styleUrls: ['./start.page.scss'],
+})
+export class StartPage implements OnInit {
+  @ViewChild(IonSlides) slides: IonSlides;
+  currentIndex: any;
+  constructor(private router: Router,private route: ActivatedRoute) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  slideOpts = {
+    initialSlide: 0,
+    speed: 1000
+  };
+
+
+  next() {
+    this.slides.slideNext();
+  }
+
+  prev() {
+    this.slides.slidePrev();
+  }
+
+   slideChanged() {
+    this.slides.getActiveIndex().then(index => {
+      this.currentIndex = index;
+      console.log(this.currentIndex);
+
+   }); 
+  } 
+
+  
+}

src/app/waiting/waiting.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { WaitingPage } from './waiting.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: WaitingPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [WaitingPage]
+})
+export class WaitingPageModule {}

src/app/waiting/waiting.page.html

+<ion-content>
+  <div class="waiting_wrapper">
+    <div class="logo">
+      <img src="../../assets/img/asset_shop1.png">
+    </div>
+    <h4>Presto Towing Services</h4>
+    <div class="distance">
+      4 km
+    </div>
+    <h3>Request has been Sent</h3>
+    <p>Our customer service representative <br>
+        will update you within 10 to 20 minutes.</p>
+        <button class="back_btn1">Back</button><br>
+        <button class="home">Home</button>
+  </div>
+</ion-content>

src/app/waiting/waiting.page.scss

+.waiting_wrapper{
+    width:100%;
+    height:100vh;
+    background: url("../../assets/img/asset_waiting_background.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding-top:30%;
+    .logo{
+        width:60px;
+        height:60px;
+        border-radius: 50%;
+        background-color: #fff;
+        margin:0 auto;
+        img{
+            width:100%;
+            height:100%;
+            border-radius: 50%;
+            border:1px solid #fbd339;
+        }
+    }
+    h4{
+        color: #fff;
+        padding-bottom: 5px;
+        padding-top: 5px;
+       
+    }
+    h3{
+        color: #fff;
+        padding-top: 10px;
+        font-size: 18px;
+    }
+    p{
+        color: #fff;
+        font-weight: 300;
+        padding-bottom: 10px;
+    }
+
+    .back_btn1{
+        background-color: #8769f4;
+        color: #fff;
+        padding:5px;
+        display: inline-block;
+        padding: 10px;
+        font-size: 18px;
+        padding-left: 25px;
+        padding-right: 25px;
+        border-radius: 20px;
+    }
+
+    .distance{
+        border:1px solid #fff;
+        color: #fff;
+        display: inline-block;
+        padding: 5px;
+        font-size: 18px;
+        padding-left: 35px;
+        padding-right: 25px;
+        border-radius: 20px;
+        background: url("../../assets/img/aaset_loc1.png");
+        background-position: left 15px top 6px;
+        background-repeat: no-repeat;
+        background-size: 18px;
+    }
+
+    .home{
+        margin-top: 20%;
+        color: #8769f4;
+        background: url("../../assets/img/asset_rplay.png");
+        background-position: left;
+        background-repeat: no-repeat;
+        font-size: 18px;
+        background-size: 11px;
+        padding-left: 20px;
+        padding-right:20px;
+    }
+}
\ No newline at end of file

src/app/waiting/waiting.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WaitingPage } from './waiting.page';
+
+describe('WaitingPage', () => {
+  let component: WaitingPage;
+  let fixture: ComponentFixture<WaitingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WaitingPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WaitingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/waiting/waiting.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-waiting',
+  templateUrl: './waiting.page.html',
+  styleUrls: ['./waiting.page.scss'],
+})
+export class WaitingPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/theme/variables.scss

@@ -4,12 +4,12 @@
 /** Ionic CSS Variables **/
 :root {
   /** primary **/
-  --ion-color-primary: #3880ff;
+  --ion-color-primary: #282438;
   --ion-color-primary-rgb: 56, 128, 255;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3171e0;
-  --ion-color-primary-tint: #4c8dff;
+  --ion-color-primary-shade: #282438;
+  --ion-color-primary-tint: #282438;
 
   /** secondary **/
   --ion-color-secondary: #0cd1e8;