mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-11-04 09:23:35 +00:00
price tables done...
This commit is contained in:
Sercan Yemen
parent
3ac16afd8f
commit
fd0f132f17
@ -392,6 +392,12 @@ export class FuseNavigation
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'title': 'Price Tables',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'view_carousel',
|
||||
'url' : '/components/price-tables'
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,16 @@ import { NgModule } from '@angular/core';
|
||||
import { SharedModule } from '../../../core/modules/shared.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgxDatatableComponent } from './datatable/ngx-datatable.component';
|
||||
import { FusePriceTablesComponent } from './price-tables/price-tables.component';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path : 'components/datatables/ngx-datatable',
|
||||
component: NgxDatatableComponent
|
||||
},
|
||||
{
|
||||
path : 'components/price-tables',
|
||||
component: FusePriceTablesComponent
|
||||
}
|
||||
];
|
||||
|
||||
@ -16,7 +21,8 @@ const routes = [
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [
|
||||
NgxDatatableComponent
|
||||
NgxDatatableComponent,
|
||||
FusePriceTablesComponent
|
||||
]
|
||||
})
|
||||
export class ComponentsModule
|
||||
|
||||
@ -0,0 +1,320 @@
|
||||
<div id="price-tables" class="page-layout simple fullwidth">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div fxLayout="column" fxLayoutAlign="center start">
|
||||
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||
<md-icon class="secondary-text s-16">home</md-icon>
|
||||
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
||||
<span class="secondary-text">Tables</span>
|
||||
</div>
|
||||
<div class="h2 mt-16">Price Tables</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" fxLayout="column">
|
||||
|
||||
<!-- STYLE 1 -->
|
||||
<div fxLayout="column">
|
||||
|
||||
<div class="mat-title">Style 1</div>
|
||||
|
||||
<div class="price-tables" fxLayout="row" fxLayoutWrap>
|
||||
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
|
||||
<div class="package-type md-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>
|
||||
|
||||
<md-divider></md-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 md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
||||
</div>
|
||||
|
||||
<div class="price-table style-1 mat-elevation-z8" fxLayout="column">
|
||||
<div class="package-type md-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<span>STANDARD</span>
|
||||
<span class="sale md-accent-color md-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>
|
||||
|
||||
<md-divider></md-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 md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
||||
</div>
|
||||
|
||||
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
|
||||
<div class="package-type md-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>
|
||||
|
||||
<md-divider></md-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 md-raised-button class="cta-button" color="accent">BUY NOW</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / STYLE 1 -->
|
||||
|
||||
<!-- STYLE 2 -->
|
||||
<div fxLayout="column" class="mt-48">
|
||||
|
||||
<div class="mat-title">Style 2</div>
|
||||
|
||||
<div class="price-tables" fxLayout="row" fxLayoutWrap>
|
||||
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
|
||||
<div class="package-type md-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 md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
||||
</div>
|
||||
|
||||
<div class="price-table style-2 mat-elevation-z8" fxLayout="column">
|
||||
<div class="badge md-warn-bg">BEST VALUE</div>
|
||||
|
||||
<div class="package-type md-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 md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
||||
</div>
|
||||
|
||||
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
|
||||
<div class="package-type md-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 md-raised-button class="cta-button" color="accent">GET STARTED</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / STYLE 2 -->
|
||||
|
||||
<!-- STYLE 3 -->
|
||||
<div fxLayout="column" class="mt-48">
|
||||
|
||||
<div class="mat-title">Style 3</div>
|
||||
|
||||
<div class="price-tables" fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
|
||||
<div class="price-table style-3 mat-elevation-z1" fxLayout="column">
|
||||
<div class="package-type">
|
||||
<div class="title">Starter</div>
|
||||
<div class="subtitle">For small teams</div>
|
||||
</div>
|
||||
|
||||
<div class="price md-primary-bg md-hue-3" 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 md-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-z8" fxLayout="column">
|
||||
<div class="package-type">
|
||||
<div class="title">Pro</div>
|
||||
<div class="subtitle">For larger teams</div>
|
||||
</div>
|
||||
|
||||
<div class="price md-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 md-warn-fg">Advanced reporting</div>
|
||||
<div class="term md-warn-fg">Customizable interface</div>
|
||||
<div class="term md-warn-fg">CRM Integration</div>
|
||||
</div>
|
||||
|
||||
<button md-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-z1" fxLayout="column">
|
||||
<div class="package-type">
|
||||
<div class="title">Enterprise</div>
|
||||
<div class="subtitle">For big teams</div>
|
||||
</div>
|
||||
|
||||
<div class="price md-primary-bg md-hue-3" 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 md-raised-button class="cta-button" color="accent">CALL US</button>
|
||||
|
||||
<div class="note">90 day free trial to start</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / STYLE 3 -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
:host {
|
||||
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-price-tables',
|
||||
templateUrl: './price-tables.component.html',
|
||||
styleUrls : ['./price-tables.component.scss']
|
||||
})
|
||||
export class FusePriceTablesComponent
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user