fix

src/app/home/home.page.html

@@ -1,16 +1,14 @@
+<ion-content [fullscreen]="true" class="home-page">
+  <div class="inner-content">
+    <div class="container">
+      <span>MERMS Providers</span>
+      <h1>Your patient care app</h1>
+      <small>
+        MERMS Providers is your no one mobility toolbox item to manage your patient care with traditional and telemedicine capabilities.
+      </small>
+      <button (click)="startMerms()">Get Started</button>
 
-
-<ion-content [fullscreen]="true" class="home_style" style="background-color:red; background-image: src='./../../assets/imgs/merms-prov-back.jpg';">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">MERMS Provider</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <div id="container">
-    <img src="./../../assets/imgs/merms-prov-back.jpg">
-    <strong>Get Started Now?</strong>
-    <p><ion-button color="tertiary">Log in</ion-button></p>
-   
+      <small class="go-to-login" (click)="goToLogin()">Already have an account?</small>
+    </div>
   </div>
-</ion-content>
+</ion-content>

src/app/home/home.page.scss

@@ -1,3 +1,66 @@
+
+.home-page {
+
+  .inner-content {
+    background: url('./../../assets/imgs/merms-prov-back.jpg') no-repeat;
+    background-size: cover;
+    display: flex;
+    height: 100%;
+    padding: 24px 24px 40px;
+    position: relative;
+  }
+
+  .container {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+    height: 100%;
+    color: #242931;
+    span {
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+    }
+    h1 {
+      margin-top: 0;
+      font-weight: 600;
+      font-size: 25.5px;
+      line-height: 135%;
+      margin-bottom: 16px;
+    }
+    small {
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 154%;
+      letter-spacing: -0.2px;
+      margin-bottom: 32px;
+      &.go-to-login {
+        margin-bottom: 0;
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+    button {
+      align-self: center;
+      padding: 15px 54px;
+      background: #6063ea;
+      border-radius: 26.9817px;
+      font-weight: 600;
+      font-size: 14.3902px;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      color: #fff;
+    }
+  }
+}
+
+/*
+
 #container {
   text-align: center;
 
@@ -6,10 +69,11 @@
   right: 0;
   top: 50%;
   transform: translateY(-50%);
+  background-image: url('../../assets/imgs/merms-prov-back.jpg');
 
 }
 .home_style{
-  background-image: url('./../../assets/imgs//merms-prov-back.jpg');
+  background-image: url('../../assets/imgs/merms-prov-back.jpg');
 }
 
 #container strong {
@@ -28,4 +92,5 @@
 
 #container a {
   text-decoration: none;
-}
+}
+*/

src/app/home/home.page.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router'
+
 
 @Component({
   selector: 'app-home',
@@ -7,6 +9,16 @@ import { Component } from '@angular/core';
 })
 export class HomePage {
 
-  constructor() {}
+  constructor(private router: Router) {}
+
+
+  startMerms() {
+    this.router.navigateByUrl('/why-float')
+  }
+
+  goToLogin() {
+    this.router.navigateByUrl('/float-login')
+  }
+
 
 }