chore(app-launcher): added getting started page to demo

This simulates the “Import Existing Application” and “Create a New Application” work flows

src/demo/app-routing.module.ts

@@ -1,14 +1,23 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { WelcomeComponent } from './components/welcome.component';
+import { CreateAppComponent } from './create-app/create-app.component';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { ImportAppComponent } from './import-app/import-app.component';
 
 const routes: Routes = [{
     path: '',
-    component: WelcomeComponent,
+    component: GettingStartedComponent,
     pathMatch: 'full'
-  }
-];
+  }, {
+    path: '_createapp',
+    component: CreateAppComponent,
+    pathMatch: 'full'
+  }, {
+    path: '_importapp',
+    component: ImportAppComponent,
+    pathMatch: 'full'
+}];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, { useHash: true })],

src/demo/app.component.html

@@ -6,6 +6,5 @@
       </div>
     </div>
   </nav>
-  <hr />
   <router-outlet></router-outlet>
 </main>

src/demo/app.component.less

@@ -0,0 +1 @@
+@import (reference) '../assets/stylesheets/shared/main.less';

src/demo/app.module.ts

@@ -10,7 +10,9 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
 // Main areas
-import { WelcomeComponent } from './components/welcome.component';
+import { CreateAppComponent } from './create-app/create-app.component';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { ImportAppComponent } from './import-app/import-app.component';
 
 import { DemoDependencyCheckService } from './service/demo-dependency-check.service';
 import { DemoGitProviderService } from './service/demo-git-provider.service';
@@ -51,7 +53,9 @@ import {
   ],
   declarations: [
     AppComponent,
-    WelcomeComponent
+    CreateAppComponent,
+    GettingStartedComponent,
+    ImportAppComponent
   ],
   providers: [
     HelperService,

src/demo/components/welcome.component.html → src/demo/create-app/create-app.component.html

@@ -1,7 +1,7 @@
 <div class="padding-15">
   <div>
     <div>
-      <f8launcher [importApp]="false"></f8launcher>
+      <f8launcher></f8launcher>
     </div>
   </div>
 </div>

src/demo/create-app/create-app.component.ts

@@ -0,0 +1,16 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+@Component({
+  selector: 'create-app',
+  templateUrl: './create-app.component.html'
+})
+export class CreateAppComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}

src/demo/getting-started/getting-started.component.html

@@ -0,0 +1,59 @@
+<div class="getting-started">
+  <div>
+    <div class="container-fluid">
+      <h1>
+        Getting Started
+      </h1>
+      <p>
+        When getting started with setting up a project, there are two different set up paths you can take.
+        You can either choose to import an existing project or create a new project.
+      </p>
+    </div>
+  </div>
+  <div>
+    <div class="container-fluid container-cards-pf">
+      <div class="row row-cards-pf">
+        <div class="col-xs-12 col-md-6">
+          <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select card-pf--medium"
+               [routerLink]="['/_importapp']">
+            <div class="card-title">
+              <h2 class="card-pf-title--title">Import Existing Application</h2>
+            </div>
+            <div class="card-pf-body--body">
+              <p class="card-description">
+                I have an existing project that I would like to import to use as the base for my application.
+              </p>
+              <div class="card-icon">
+                <i class="pficon pficon-import"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select card-pf--medium"
+               [routerLink]="['/_createapp']">
+            <div class="card-title">
+              <h2 class="card-pf-title--title">Create a New Application</h2>
+            </div>
+            <div>
+              <p class="card-description">
+                I want to create a new project from scratch. I would like to use the preset technologies and missions
+                within Openshift.io to help me create a new project.
+              </p>
+              <div class="card-icon">
+                <i class="fa fa-plus-square"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="container-fluid">
+      <div class="getting-started-return">
+        <button class="btn btn-link">Return to my dashboard</button>
+      </div>
+    </div>
+  </div>
+</div>

src/demo/getting-started/getting-started.component.less

@@ -0,0 +1,28 @@
+@import (reference) '../../assets/stylesheets/shared/main.less';
+
+.getting-started {
+  background-color: @color-pf-black-200;
+  height: 100vh;
+  .card-pf {
+    height: 300px;
+  }
+  .card-description {
+    min-height: 40px;
+  }
+  .card-icon {
+    padding-top: 40px;
+    text-align: center;
+    i {
+      margin-top: 5px;
+      font-size: 7em;
+      &.fa {
+        margin-top: 0;
+        font-size: 8em;
+      }
+    }
+  }
+}
+
+.getting-started-return {
+  text-align: center;
+}

src/demo/getting-started/getting-started.component.ts

@@ -0,0 +1,17 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+@Component({
+  selector: 'getting-started',
+  styleUrls: ['./getting-started.component.less'],
+  templateUrl: './getting-started.component.html'
+})
+export class GettingStartedComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}

src/demo/import-app/import-app.component.html

@@ -0,0 +1,7 @@
+<div class="padding-15">
+  <div>
+    <div>
+      <f8launcher [importApp]="true"></f8launcher>
+    </div>
+  </div>
+</div>

src/demo/import-app/import-app.component.ts

@@ -0,0 +1,16 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+@Component({
+  selector: 'import-app',
+  templateUrl: './import-app.component.html'
+})
+export class ImportAppComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}