From ad432ca31d209dfbcecb56ee4495e73a442dec06 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 13 Oct 2017 12:21:00 +0300
Subject: [PATCH] New pricing page design + Fixed: Some color issues + Fixed:
 Icons and Quick Nav in memory web api related data issues

---
 src/app/core/scss/partials/_colors.scss       |   5 +-
 src/app/core/scss/partials/_material.scss     |   2 +-
 .../sidenavs/main/main-sidenav.component.html |   1 +
 src/app/main/content/pages/pages.module.ts    |   4 +
 .../content/pages/pricing/pricing.module.ts   |  39 ++++
 .../pricing/style-1/style-1.component.html    | 175 ++++++++++++++++++
 .../pricing/style-1/style-1.component.scss    |  95 ++++++++++
 .../pricing/style-1/style-1.component.ts      |  15 ++
 .../pricing/style-2/style-2.component.html    | 161 ++++++++++++++++
 .../pricing/style-2/style-2.component.scss    |  95 ++++++++++
 .../pricing/style-2/style-2.component.ts      |  15 ++
 .../pricing/style-3/style-3.component.html    | 156 ++++++++++++++++
 .../pricing/style-3/style-3.component.scss    |  95 ++++++++++
 .../pricing/style-3/style-3.component.ts      |  15 ++
 .../main/content/ui/icons/icons.component.ts  |   2 +-
 .../main/quick-panel/quick-panel.component.ts |   4 +-
 src/app/navigation.model.ts                   |  22 +++
 17 files changed, 895 insertions(+), 6 deletions(-)
 create mode 100644 src/app/main/content/pages/pricing/pricing.module.ts
 create mode 100644 src/app/main/content/pages/pricing/style-1/style-1.component.html
 create mode 100644 src/app/main/content/pages/pricing/style-1/style-1.component.scss
 create mode 100644 src/app/main/content/pages/pricing/style-1/style-1.component.ts
 create mode 100644 src/app/main/content/pages/pricing/style-2/style-2.component.html
 create mode 100644 src/app/main/content/pages/pricing/style-2/style-2.component.scss
 create mode 100644 src/app/main/content/pages/pricing/style-2/style-2.component.ts
 create mode 100644 src/app/main/content/pages/pricing/style-3/style-3.component.html
 create mode 100644 src/app/main/content/pages/pricing/style-3/style-3.component.scss
 create mode 100644 src/app/main/content/pages/pricing/style-3/style-3.component.ts

diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss
index a4ae2aa3..f2d3a7c5 100644
--- a/src/app/core/scss/partials/_colors.scss
+++ b/src/app/core/scss/partials/_colors.scss
@@ -55,7 +55,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         .secondary-text,
         .mat-icon,
         .icon {
-            color: rgba(0, 0, 0, 0.54);
+            color: rgba(0, 0, 0, 0.54) !important;
         }
 
         &.hint-text,
@@ -80,7 +80,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
         .mat-icon,
         .icon {
-            color: rgba(255, 255, 255, 1);
+            color: rgba(255, 255, 255, 1) !important;
         }
 
         &.secondary-text,
@@ -111,6 +111,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     // If the contrast color is white...
     $fuseForeground: (
         base: white,
+        text: white,
         hint-text: rgba(white, 0.5),
         divider: rgba(white, 0.12),
     );
diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss
index 3232602b..fb6c488e 100644
--- a/src/app/core/scss/partials/_material.scss
+++ b/src/app/core/scss/partials/_material.scss
@@ -196,7 +196,7 @@ mat-icon.status {
         background-color: #FFFFFF;
         width: 280px;
         border-radius: 2px;
-        margin: 24px 24px 0 0;
+        margin: 12px;
         overflow: hidden;
 
         &.style-1 {
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
index 2a4a75b4..b967b4cc 100644
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -1,6 +1,7 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
      class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
+
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
         <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
diff --git a/src/app/main/content/pages/pages.module.ts b/src/app/main/content/pages/pages.module.ts
index 1c852e36..c0ee91de 100644
--- a/src/app/main/content/pages/pages.module.ts
+++ b/src/app/main/content/pages/pages.module.ts
@@ -15,6 +15,7 @@ import { Error500Module } from './errors/500/error-500.module';
 import { InvoiceCompactModule } from './invoices/compact/compact.module';
 import { InvoiceModernModule } from './invoices/modern/modern.module';
 import { MaintenanceModule } from './maintenance/maintenence.module';
+import { PricingModule } from './pricing/pricing.module';
 import { ProfileModule } from './profile/profile.module';
 import { SearchModule } from './search/search.module';
 
@@ -45,6 +46,9 @@ import { SearchModule } from './search/search.module';
         // Maintenance
         MaintenanceModule,
 
+        // Pricing
+        PricingModule,
+
         // Profile
         ProfileModule,
 
diff --git a/src/app/main/content/pages/pricing/pricing.module.ts b/src/app/main/content/pages/pricing/pricing.module.ts
new file mode 100644
index 00000000..8be47e18
--- /dev/null
+++ b/src/app/main/content/pages/pricing/pricing.module.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '../../../../core/modules/shared.module';
+
+import { FusePricingStyle1Component } from './style-1/style-1.component';
+import { FusePricingStyle2Component } from './style-2/style-2.component';
+import { FusePricingStyle3Component } from './style-3/style-3.component';
+
+const routes = [
+    {
+        path     : 'pages/pricing/style-1',
+        component: FusePricingStyle1Component
+    },
+    {
+        path     : 'pages/pricing/style-2',
+        component: FusePricingStyle2Component
+    },
+    {
+        path     : 'pages/pricing/style-3',
+        component: FusePricingStyle3Component
+    }
+];
+
+@NgModule({
+    declarations: [
+        FusePricingStyle1Component,
+        FusePricingStyle2Component,
+        FusePricingStyle3Component
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ]
+})
+
+export class PricingModule
+{
+
+}
diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.html b/src/app/main/content/pages/pricing/style-1/style-1.component.html
new file mode 100644
index 00000000..b63d68e0
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-1/style-1.component.html
@@ -0,0 +1,175 @@
+<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header" fxLayout="row" fxLayoutAlign="start start">
+
+        <div class="hero-text" fxLayout="column" fxLayoutAlign="center center" fxFlex>
+
+            <div class="h1">Simple Pricing!</div>
+            <div class="h3">
+                The most advanced customer support tools with a simple and affordable pricing. And you can always try
+                for 30 days, free!
+            </div>
+
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content" fxLayout="column">
+
+        <!-- PRICE TABLES -->
+        <div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+
+            <div class="price-table style-1 mat-elevation-z4" fxLayout="column">
+
+                <div class="package-type mat-primary-bg">
+                    <span>BASIC</span>
+                </div>
+
+                <div class="price" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div fxLayout="row" fxLayoutAlign="center end">
+                        <div class="value">4</div>
+                        <div class="period">/ month</div>
+                    </div>
+                </div>
+
+                <mat-divider></mat-divider>
+
+                <div class="terms" fxLayout="column">
+                    <div class="term">
+                        <span class="text-bold">10</span>
+                        Projects
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">10</span>
+                        Pages
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">100</span>
+                        Mb Disk Space
+                    </div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">BUY NOW</button>
+
+            </div>
+
+            <div class="price-table style-1 mat-elevation-z12" fxLayout="column">
+
+                <div class="package-type mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
+                    <span>STANDARD</span>
+                    <span class="sale mat-accent-color mat-hue-1">Save 15%</span>
+                </div>
+
+                <div class="price" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div fxLayout="row" fxLayoutAlign="center end">
+                        <div class="value">8</div>
+                        <div class="period">/ month</div>
+                    </div>
+                </div>
+
+                <mat-divider></mat-divider>
+
+                <div class="terms" fxLayout="column">
+                    <div class="term">
+                        <span class="text-bold">20</span>
+                        Projects
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">20</span>
+                        Pages
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">200</span>
+                        Mb Disk Space
+                    </div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">BUY NOW</button>
+
+            </div>
+
+            <div class="price-table style-1 mat-elevation-z4" fxLayout="column">
+
+                <div class="package-type mat-primary-bg" fxLayout="row">
+                    <span>ADVANCED</span>
+                </div>
+
+                <div class="price" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div fxLayout="row" fxLayoutAlign="center end">
+                        <div class="value">12</div>
+                        <div class="period">/ month</div>
+                    </div>
+                </div>
+
+                <mat-divider></mat-divider>
+
+                <div class="terms" fxLayout="column">
+                    <div class="term">
+                        <span class="text-bold">40</span>
+                        Projects
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">40</span>
+                        Pages
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">500</span>
+                        Mb Disk Space
+                    </div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">BUY NOW</button>
+
+            </div>
+
+        </div>
+        <!-- / PRICE TABLES -->
+
+        <div class="faq" fxLayout="row" fxLayoutWrap>
+
+            <div class="title" fxFlex="100">Frequently Asked Questions</div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">How does free trial work?</div>
+                <div class="answer">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
+                    accumsan. In dignissim laoreet ipsum eu interdum.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">Can I cancel any time?</div>
+                <div class="answer">
+                    Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
+                    Donec maximus ipsum in malesuada hendrerit.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">What happens after my trial ended?</div>
+                <div class="answer">
+                    Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
+                    Donec maximus ipsum in malesuada hendrerit.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">Can I have a discount?</div>
+                <div class="answer">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
+                    accumsan. In dignissim laoreet ipsum eu interdum.
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.scss b/src/app/main/content/pages/pricing/style-1/style-1.component.scss
new file mode 100644
index 00000000..067eb772
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-1/style-1.component.scss
@@ -0,0 +1,95 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+
+    #price-tables {
+
+        .header {
+            padding: 24px;
+            height: 600px;
+            min-height: 600px;
+            background: #1A237E;
+            background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+
+            @include media-breakpoint-down('xs') {
+                height: 400px;
+                min-height: 400px;
+            }
+
+            .hero-text {
+                margin: 128px 24px;
+
+                @include media-breakpoint-down('xs') {
+                    margin: 64px 24px;
+                }
+
+                .h1 {
+                    color: white;
+                    font-size: 48px;
+                    font-weight: 300;
+                    letter-spacing: 0.01em;
+                    text-align: center;
+
+                    @include media-breakpoint-down('xs') {
+                        font-size: 32px;
+                    }
+                }
+
+                .h3 {
+                    color: rgba(255, 255, 255, 0.75);
+                    max-width: 480px;
+                    text-align: center;
+                    margin-top: 16px;
+                    font-weight: 300;
+                    letter-spacing: 0.03em;
+
+                    @include media-breakpoint-down('xs') {
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+
+        .price-tables {
+            flex: 1 0 auto;
+            margin-top: -192px;
+
+            @include media-breakpoint-down('xs') {
+                margin-top: -128px;
+            }
+
+            .price-table {
+                margin: 12px;
+            }
+        }
+
+        .faq {
+            flex: 1 0 auto;
+            margin: 96px auto;
+            max-width: 840px;
+
+            .title {
+                font-size: 32px;
+                font-weight: 300;
+                text-align: center;
+                margin-bottom: 64px;
+                padding: 0 16px;
+            }
+
+            .item {
+                padding: 24px;
+
+                .question {
+                    font-size: 18px;
+                    margin-bottom: 8px;
+                }
+
+                .answer {
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.ts b/src/app/main/content/pages/pricing/style-1/style-1.component.ts
new file mode 100644
index 00000000..67cc8863
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-1/style-1.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-pricing-style-1',
+    templateUrl: './style-1.component.html',
+    styleUrls  : ['./style-1.component.scss']
+})
+export class FusePricingStyle1Component
+{
+    constructor()
+    {
+
+    }
+
+}
diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.html b/src/app/main/content/pages/pricing/style-2/style-2.component.html
new file mode 100644
index 00000000..b79554e8
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-2/style-2.component.html
@@ -0,0 +1,161 @@
+<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header" fxLayout="row" fxLayoutAlign="start start">
+
+        <div class="hero-text" fxLayout="column" fxLayoutAlign="center center" fxFlex>
+
+            <div class="h1">Simple Pricing!</div>
+            <div class="h3">
+                The most advanced customer support tools with a simple and affordable pricing. And you can always try
+                for 30 days, free!
+            </div>
+
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content" fxLayout="column">
+
+        <!-- PRICE TABLES -->
+        <div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+
+            <div class="price-table style-2 mat-elevation-z4" fxLayout="column">
+
+                <div class="package-type mat-accent-fg">SILVER PACKAGE</div>
+
+                <div class="price" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div class="value">99</div>
+                </div>
+
+                <div class="period">PER MONTH</div>
+
+                <div class="terms" fxLayout="column" fxLayoutAlign="start center">
+                    <div class="term">
+                        <span class="text-bold">10</span>
+                        Projects
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">10</span>
+                        Pages
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">100</span>
+                        Mb Disk Space
+                    </div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">GET STARTED</button>
+
+            </div>
+
+            <div class="price-table style-2 mat-elevation-z12" fxLayout="column">
+
+                <div class="badge mat-warn-bg">BEST VALUE</div>
+
+                <div class="package-type mat-accent-fg">GOLD PACKAGE</div>
+
+                <div class="price" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div class="value">299</div>
+                </div>
+
+                <div class="period">PER MONTH</div>
+
+                <div class="terms" fxLayout="column" fxLayoutAlign="start center">
+                    <div class="term">
+                        <span class="text-bold">20</span>
+                        Projects
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">20</span>
+                        Pages
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">200</span>
+                        Mb Disk Space
+                    </div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">GET STARTED</button>
+
+            </div>
+
+            <div class="price-table style-2 mat-elevation-z4" fxLayout="column">
+
+                <div class="package-type mat-accent-fg">PLATINUM PACKAGE</div>
+
+                <div class="price" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div class="value">499</div>
+                </div>
+
+                <div class="period">PER MONTH</div>
+
+                <div class="terms" fxLayout="column" fxLayoutAlign="start center">
+                    <div class="term">
+                        <span class="text-bold">40</span>
+                        Projects
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">40</span>
+                        Pages
+                    </div>
+                    <div class="term">
+                        <span class="text-bold">500</span>
+                        Mb Disk Space
+                    </div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">GET STARTED</button>
+
+            </div>
+
+        </div>
+        <!-- / PRICE TABLES -->
+
+        <div class="faq" fxLayout="row" fxLayoutWrap>
+
+            <div class="title" fxFlex="100">Frequently Asked Questions</div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">How does free trial work?</div>
+                <div class="answer">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
+                    accumsan. In dignissim laoreet ipsum eu interdum.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">Can I cancel any time?</div>
+                <div class="answer">
+                    Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
+                    Donec maximus ipsum in malesuada hendrerit.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">What happens after my trial ended?</div>
+                <div class="answer">
+                    Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
+                    Donec maximus ipsum in malesuada hendrerit.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">Can I have a discount?</div>
+                <div class="answer">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
+                    accumsan. In dignissim laoreet ipsum eu interdum.
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.scss b/src/app/main/content/pages/pricing/style-2/style-2.component.scss
new file mode 100644
index 00000000..067eb772
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-2/style-2.component.scss
@@ -0,0 +1,95 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+
+    #price-tables {
+
+        .header {
+            padding: 24px;
+            height: 600px;
+            min-height: 600px;
+            background: #1A237E;
+            background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+
+            @include media-breakpoint-down('xs') {
+                height: 400px;
+                min-height: 400px;
+            }
+
+            .hero-text {
+                margin: 128px 24px;
+
+                @include media-breakpoint-down('xs') {
+                    margin: 64px 24px;
+                }
+
+                .h1 {
+                    color: white;
+                    font-size: 48px;
+                    font-weight: 300;
+                    letter-spacing: 0.01em;
+                    text-align: center;
+
+                    @include media-breakpoint-down('xs') {
+                        font-size: 32px;
+                    }
+                }
+
+                .h3 {
+                    color: rgba(255, 255, 255, 0.75);
+                    max-width: 480px;
+                    text-align: center;
+                    margin-top: 16px;
+                    font-weight: 300;
+                    letter-spacing: 0.03em;
+
+                    @include media-breakpoint-down('xs') {
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+
+        .price-tables {
+            flex: 1 0 auto;
+            margin-top: -192px;
+
+            @include media-breakpoint-down('xs') {
+                margin-top: -128px;
+            }
+
+            .price-table {
+                margin: 12px;
+            }
+        }
+
+        .faq {
+            flex: 1 0 auto;
+            margin: 96px auto;
+            max-width: 840px;
+
+            .title {
+                font-size: 32px;
+                font-weight: 300;
+                text-align: center;
+                margin-bottom: 64px;
+                padding: 0 16px;
+            }
+
+            .item {
+                padding: 24px;
+
+                .question {
+                    font-size: 18px;
+                    margin-bottom: 8px;
+                }
+
+                .answer {
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.ts b/src/app/main/content/pages/pricing/style-2/style-2.component.ts
new file mode 100644
index 00000000..acabe660
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-2/style-2.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-pricing-style-2',
+    templateUrl: './style-2.component.html',
+    styleUrls  : ['./style-2.component.scss']
+})
+export class FusePricingStyle2Component
+{
+    constructor()
+    {
+
+    }
+
+}
diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.html b/src/app/main/content/pages/pricing/style-3/style-3.component.html
new file mode 100644
index 00000000..25e8cfdc
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-3/style-3.component.html
@@ -0,0 +1,156 @@
+<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header" fxLayout="row" fxLayoutAlign="start start">
+
+        <div class="hero-text" fxLayout="column" fxLayoutAlign="center center" fxFlex>
+
+            <div class="h1">Simple Pricing!</div>
+            <div class="h3">
+                The most advanced customer support tools with a simple and affordable pricing. And you can always try
+                for 30 days, free!
+            </div>
+
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content" fxLayout="column">
+
+        <!-- PRICE TABLES -->
+        <div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+
+            <div class="price-table style-3 mat-elevation-z4" fxLayout="column">
+
+                <div class="package-type">
+                    <div class="title">Starter</div>
+                    <div class="subtitle">For small teams</div>
+                </div>
+
+                <div class="price mat-primary-300-bg" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div fxLayout="row" fxLayoutAlign="center end">
+                        <div class="value">29</div>
+                        <div class="period">monthly per user</div>
+                    </div>
+                </div>
+
+                <div class="terms" fxLayout="column" fxLayoutAlign="start center">
+                    <div class="term">Unlimited projects</div>
+                    <div class="term">Unlimited pages</div>
+                    <div class="term">Unlimited disk space</div>
+                    <div class="term">24 / 7 Free support</div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
+
+                <div class="note">7 day free trial to start</div>
+
+            </div>
+
+            <div class="price-table style-3 mat-elevation-z12" fxLayout="column">
+
+                <div class="package-type">
+                    <div class="title">Pro</div>
+                    <div class="subtitle">For larger teams</div>
+                </div>
+
+                <div class="price mat-primary-bg" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div fxLayout="row" fxLayoutAlign="center end">
+                        <div class="value">59</div>
+                        <div class="period">monthly per user</div>
+                    </div>
+                </div>
+
+                <div class="terms" fxLayout="column" fxLayoutAlign="start center">
+                    <div class="term">Unlimited projects</div>
+                    <div class="term">Unlimited pages</div>
+                    <div class="term">Unlimited disk space</div>
+                    <div class="term">24 / 7 Free support</div>
+                    <div class="term mat-warn-fg">Advanced reporting</div>
+                    <div class="term mat-warn-fg">Customizable interface</div>
+                    <div class="term mat-warn-fg">CRM Integration</div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
+
+                <div class="note">30 day free trial to start</div>
+
+            </div>
+
+            <div class="price-table style-3 mat-elevation-z4" fxLayout="column">
+
+                <div class="package-type">
+                    <div class="title">Enterprise</div>
+                    <div class="subtitle">For big teams</div>
+                </div>
+
+                <div class="price mat-primary-300-bg" fxLayout="row" fxLayoutAlign="center start">
+                    <div class="currency">$</div>
+                    <div fxLayout="row" fxLayoutAlign="center end">
+                        <div class="value">99</div>
+                        <div class="period">monthly per user</div>
+                    </div>
+                </div>
+
+                <div class="terms" fxLayout="column" fxLayoutAlign="start center">
+                    <div class="term">Unlimited projects</div>
+                    <div class="term">Unlimited pages</div>
+                    <div class="term">Unlimited disk space</div>
+                    <div class="term">For full feature list, call us</div>
+                </div>
+
+                <button mat-raised-button class="cta-button" color="accent">CALL US</button>
+
+                <div class="note">90 day free trial to start</div>
+
+            </div>
+
+        </div>
+        <!-- / PRICE TABLES -->
+
+        <div class="faq" fxLayout="row" fxLayoutWrap>
+
+            <div class="title" fxFlex="100">Frequently Asked Questions</div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">How does free trial work?</div>
+                <div class="answer">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
+                    accumsan. In dignissim laoreet ipsum eu interdum.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">Can I cancel any time?</div>
+                <div class="answer">
+                    Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
+                    Donec maximus ipsum in malesuada hendrerit.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">What happens after my trial ended?</div>
+                <div class="answer">
+                    Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
+                    Donec maximus ipsum in malesuada hendrerit.
+                </div>
+            </div>
+
+            <div class="item" fxFlex="100" fxFlex.gt-xs="50">
+                <div class="question">Can I have a discount?</div>
+                <div class="answer">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
+                    accumsan. In dignissim laoreet ipsum eu interdum.
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.scss b/src/app/main/content/pages/pricing/style-3/style-3.component.scss
new file mode 100644
index 00000000..067eb772
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-3/style-3.component.scss
@@ -0,0 +1,95 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+
+    #price-tables {
+
+        .header {
+            padding: 24px;
+            height: 600px;
+            min-height: 600px;
+            background: #1A237E;
+            background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+
+            @include media-breakpoint-down('xs') {
+                height: 400px;
+                min-height: 400px;
+            }
+
+            .hero-text {
+                margin: 128px 24px;
+
+                @include media-breakpoint-down('xs') {
+                    margin: 64px 24px;
+                }
+
+                .h1 {
+                    color: white;
+                    font-size: 48px;
+                    font-weight: 300;
+                    letter-spacing: 0.01em;
+                    text-align: center;
+
+                    @include media-breakpoint-down('xs') {
+                        font-size: 32px;
+                    }
+                }
+
+                .h3 {
+                    color: rgba(255, 255, 255, 0.75);
+                    max-width: 480px;
+                    text-align: center;
+                    margin-top: 16px;
+                    font-weight: 300;
+                    letter-spacing: 0.03em;
+
+                    @include media-breakpoint-down('xs') {
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+
+        .price-tables {
+            flex: 1 0 auto;
+            margin-top: -192px;
+
+            @include media-breakpoint-down('xs') {
+                margin-top: -128px;
+            }
+
+            .price-table {
+                margin: 12px;
+            }
+        }
+
+        .faq {
+            flex: 1 0 auto;
+            margin: 96px auto;
+            max-width: 840px;
+
+            .title {
+                font-size: 32px;
+                font-weight: 300;
+                text-align: center;
+                margin-bottom: 64px;
+                padding: 0 16px;
+            }
+
+            .item {
+                padding: 24px;
+
+                .question {
+                    font-size: 18px;
+                    margin-bottom: 8px;
+                }
+
+                .answer {
+                    font-size: 16px;
+                    line-height: 1.5;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.ts b/src/app/main/content/pages/pricing/style-3/style-3.component.ts
new file mode 100644
index 00000000..9327e82d
--- /dev/null
+++ b/src/app/main/content/pages/pricing/style-3/style-3.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-pricing-style-3',
+    templateUrl: './style-3.component.html',
+    styleUrls  : ['./style-3.component.scss']
+})
+export class FusePricingStyle3Component
+{
+    constructor()
+    {
+
+    }
+
+}
diff --git a/src/app/main/content/ui/icons/icons.component.ts b/src/app/main/content/ui/icons/icons.component.ts
index 8cd6f752..188de0dd 100644
--- a/src/app/main/content/ui/icons/icons.component.ts
+++ b/src/app/main/content/ui/icons/icons.component.ts
@@ -20,7 +20,7 @@ export class FuseIconsComponent implements OnInit
     {
         this.http.get('api/icons')
             .subscribe((icons: any) => {
-                this.icons = icons.data;
+                this.icons = icons;
                 this.filteredIcons = this.icons;
                 this.loading = false;
             });
diff --git a/src/app/main/quick-panel/quick-panel.component.ts b/src/app/main/quick-panel/quick-panel.component.ts
index b28e2f20..bd78cd3b 100644
--- a/src/app/main/quick-panel/quick-panel.component.ts
+++ b/src/app/main/quick-panel/quick-panel.component.ts
@@ -29,12 +29,12 @@ export class FuseQuickPanelComponent implements OnInit
     {
         this.http.get('api/quick-panel-notes')
             .subscribe((response: any) => {
-                this.notes = response.data;
+                this.notes = response;
             });
 
         this.http.get('api/quick-panel-events')
             .subscribe((response: any) => {
-                this.events = response.data;
+                this.events = response;
             });
 
     }
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 7056cac7..36fafb2f 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -184,6 +184,28 @@ export class NavigationModel
                         'icon' : 'build',
                         'url'  : '/pages/maintenance'
                     },
+                    {
+                        'title'   : 'Pricing',
+                        'type'    : 'collapse',
+                        'icon'    : 'attach_money',
+                        'children': [
+                            {
+                                'title': 'Style 1',
+                                'type' : 'item',
+                                'url'  : '/pages/pricing/style-1'
+                            },
+                            {
+                                'title': 'Style 2',
+                                'type' : 'item',
+                                'url'  : '/pages/pricing/style-2'
+                            },
+                            {
+                                'title': 'Style 3',
+                                'type' : 'item',
+                                'url'  : '/pages/pricing/style-3'
+                            }
+                        ]
+                    },
                     {
                         'title': 'Profile',
                         'type' : 'item',