feat(demo): integration of angular material extensions jumbotron lib #165

Author: AnthonyNahas

demo/package-lock.json

@@ -27,6 +27,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-material-extensions/jumbotron": "^1.0.1",
     "@angular-material-extensions/pages": "^2.1.0",
     "@angular/animations": "7.2.13",
     "@angular/cdk": "^7.3.7",

demo/package.json

@@ -1,29 +1,37 @@
-<div class="jumbotron jumbotron-fluid">
-  <div class="container">
-    <div class="row">
-      <div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
-        <img src="assets/angular-material-extensions-logo.svg" alt="@angular-material-extensions/password-strength logo"
-             class="logo">
-      </div>
-      <div class="col-sm-8 text-center text-md-left">
-        <h1>@angular-material-extensions/password-strength</h1>
-        <p>Material password strength meter to indicate how secure is the provided password</p>
-        <p>Scroll down to see it in action!</p>
-        <p class="buttons">
-          <a class="btn btn-outline-primary btn-lg"
-             href="https://github.com/angular-material-extensions/password-strength" target="_blank"><i
-            class="fa fa-github fa-lg"></i> Code on Github</a>
-          <a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i
-            class="fa fa-book fa-lg"></i> Documentation</a>
-        </p>
-      </div>
+<mat-jumbotron imgURL="assets/logo.svg">
+  <mat-jumbotron-content>
+    <h1>
+      @angular-material-extensions/password-strength
+    </h1>
+    <p class="headline" ngClass.xs="text-center">
+      Material password strength meter to indicate how secure is the provided password
+    </p>
+
+    <p> Scroll down to see it in action!</p>
+
+    <div fxLayout="row" fxLayout.xs="column"
+         fxLayoutGap.xs="1rem">
+      <a mat-stroked-button
+         color="accent"
+         target="_blank"
+         href="https://github.com/angular-material-extensions/password-strength">
+        <mat-icon>code</mat-icon>
+        Code on Github
+      </a>
+      <a mat-stroked-button
+         color="accent"
+         target="_blank"
+         href="doc/index.html">
+        <mat-icon>note</mat-icon>
+        Documentation
+      </a>
     </div>
 
-  </div>
-</div>
+  </mat-jumbotron-content>
+</mat-jumbotron>
 
 <section class="home">
-  <div class="container">
+  <div class="container mt-3">
 
     <div fxLayout="column">
       <mat-toolbar>

demo/src/app/home/home.component.html

@@ -6,13 +6,15 @@ import {HomeComponent} from './home.component';
 import {AppSharedModule} from '../shared';
 import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
 import {MarkdownModule} from 'ngx-markdown';
+import {MatJumbotronModule} from '@angular-material-extensions/jumbotron';
 
 @NgModule({
   imports: [
     CommonModule,
     HomeRoutingModule,
     AppSharedModule,
     MarkdownModule.forChild(),
+    MatJumbotronModule,
     MatPasswordStrengthModule
   ],
   declarations: [HomeComponent],