mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
fix(landing): change landing content
This commit is contained in:
Alex
Sergey Andrievskiy
parent
2b768b0191
commit
64b38da5ae
15 changed files with 264 additions and 20 deletions
|
|
@ -19,6 +19,10 @@ export const routes: Routes = [
|
|||
path: 'material',
|
||||
component: MaterialLandingComponent,
|
||||
},
|
||||
// {
|
||||
// path: 'overview',
|
||||
// component: OverviewComponent,
|
||||
// },
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@ import { LicensePipe } from './backend-bundles-section/license.pipe';
|
|||
import { BackgroundImagePipe } from './backend-bundles-section/background-image.pipe';
|
||||
import { MaterialLandingComponent } from './material-landing/material-landing.component';
|
||||
import { LandingSharedModule } from '../../shared/landing-shared.module';
|
||||
import {MaterialFeaturesSectionComponent} from './material-features/material-features.component';
|
||||
import {DefaultAdminInfoComponent} from './main-info-section/default-admin-main-info/default-info.component';
|
||||
import {MaterialAdminInfoComponent} from './main-info-section/material-admin-main-info/material-info.component';
|
||||
// components
|
||||
|
||||
const PIPES = [LicensePipe, BackgroundImagePipe];
|
||||
|
|
@ -37,6 +40,8 @@ const COMPONENTS = [
|
|||
MaterialLandingComponent,
|
||||
NgxLandingSectionsContainerComponent,
|
||||
MainInfoSectionComponent,
|
||||
DefaultAdminInfoComponent,
|
||||
MaterialAdminInfoComponent,
|
||||
DescriptionSectionComponent,
|
||||
ReasonSectionComponent,
|
||||
ThemeSectionComponent,
|
||||
|
|
@ -45,6 +50,7 @@ const COMPONENTS = [
|
|||
SocialSectionComponent,
|
||||
ContactSectionComponent,
|
||||
BackendBundlesSectionComponent,
|
||||
MaterialFeaturesSectionComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<div>
|
||||
<h1>ngx-admin</h1>
|
||||
<p class="description">
|
||||
The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and
|
||||
<a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with
|
||||
<a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.
|
||||
Free and Open Source for personal and commercial purposes.
|
||||
<br>
|
||||
<span class="bundles">
|
||||
Never start from scratch again.
|
||||
<a href="https://hubs.ly/H0n5NVz0" target="_blank">
|
||||
Integrate ready-made solution: ngx-admin with backend.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-admin-info',
|
||||
templateUrl: './default-info.component.html',
|
||||
styleUrls: ['./../main-info-section.component.scss'],
|
||||
})
|
||||
export class DefaultAdminInfoComponent {
|
||||
}
|
||||
|
|
@ -9,20 +9,28 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="main-inf">
|
||||
<h1>ngx-admin</h1>
|
||||
<p class="description">
|
||||
The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and
|
||||
<a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with
|
||||
<a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.
|
||||
Free and Open Source for personal and commercial purposes.
|
||||
<br>
|
||||
<span class="bundles">
|
||||
Never start from scratch again.
|
||||
<a href="https://hubs.ly/H0n5NVz0" target="_blank">
|
||||
Integrate ready-made solution: ngx-admin with backend.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
<!-- <h1>ngx-admin</h1>-->
|
||||
<!-- <p class="description">-->
|
||||
<!-- The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and-->
|
||||
<!-- <a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with-->
|
||||
<!-- <a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.-->
|
||||
<!-- Free and Open Source for personal and commercial purposes.-->
|
||||
<!-- <br>-->
|
||||
<!-- <span class="bundles">-->
|
||||
<!-- Never start from scratch again.-->
|
||||
<!-- <a href="https://hubs.ly/H0n5NVz0" target="_blank">-->
|
||||
<!-- Integrate ready-made solution: ngx-admin with backend.-->
|
||||
<!-- </a>-->
|
||||
<!-- </span>-->
|
||||
<!-- </p>-->
|
||||
<ng-container *ngIf="forMaterialTheme === false">
|
||||
<ngx-default-admin-info></ngx-default-admin-info>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="forMaterialTheme !== false">
|
||||
<ngx-material-admin-info></ngx-material-admin-info>
|
||||
</ng-container>
|
||||
|
||||
<div class="mobile-main-img-container">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm" class="main-img" lazyLoad="assets/img/corporate-theme.png" alt="Light theme Dashboard"/>
|
||||
</div>
|
||||
|
|
@ -42,3 +50,4 @@
|
|||
target="_blank">Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,11 @@
|
|||
margin: 4.625rem 9% 0 6%;
|
||||
}
|
||||
|
||||
ngx-default-admin-info,
|
||||
ngx-material-admin-info {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Helvetica Neue Bold', sans-serif;
|
||||
font-size: 4rem;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export class MainInfoSectionComponent implements OnDestroy {
|
|||
public breakpoint: NbMediaBreakpoint;
|
||||
|
||||
@Input() public set material(value: any) {
|
||||
this.forMaterialTheme = coerceBooleanProperty(value);
|
||||
this.forMaterialTheme = (value);
|
||||
}
|
||||
|
||||
public get imageUrl(): string {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<div>
|
||||
<h1>material ngx-admin</h1>
|
||||
<p class="description">
|
||||
Material admin theme based on the most popular Angular dashboard template - <a href="https://hubs.ly/H0nJjJ00"
|
||||
target="_blank">ngx-admin</a>.
|
||||
Included: <strong>Angular 9+</strong>,
|
||||
<a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> and
|
||||
<a href="https://hubs.ly/H0n5PKH0">Eva Design System</a>.
|
||||
Free for personal and commercial usage.
|
||||
<br>
|
||||
<span class="bundles">
|
||||
Get material ngx-admin integrated with backend technology of your choice.
|
||||
<a href="https://hubs.ly/H0nJfXB0" target="_blank">
|
||||
Check out our store.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-material-admin-info',
|
||||
templateUrl: './material-info.component.html',
|
||||
styleUrls: ['./../main-info-section.component.scss'],
|
||||
})
|
||||
export class MaterialAdminInfoComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<ngx-landing-section-title>
|
||||
Features and benefits
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<ul class="features">
|
||||
<li class="feature">
|
||||
<div class="number">1</div>
|
||||
<div class="description">
|
||||
The most popular and trusted Angular open source dashboard template is out there. Used by hundreds of thousands developers worldwide and Fortune 500 companies*
|
||||
</div>
|
||||
</li>
|
||||
<li class="feature">
|
||||
<div class="number">2</div>
|
||||
<div class="description">
|
||||
Over 40+ Angular Components and 60+ Usage Examples. Kick off your project and save money by using ngx-admin.
|
||||
</div>
|
||||
</li>
|
||||
<li class="feature">
|
||||
<div class="number">3</div>
|
||||
<div class="description">
|
||||
Already using ngx-admin and willing to switch to material theme? Material theme is backward-compatible. Check out the article describing how to do that
|
||||
</div>
|
||||
</li>
|
||||
<li class="feature">
|
||||
<div class="number">4</div>
|
||||
<div class="description">
|
||||
ngx-admin material works perfectly with Angular Material and Nebular. Take the best from both!
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
$features-section-offset: 10.625rem;
|
||||
|
||||
display: block;
|
||||
padding: 5.25rem 0;
|
||||
|
||||
.features {
|
||||
width: calc(100% - #{$features-section-offset} * 2);
|
||||
margin: -1.375rem auto 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
list-style: none;
|
||||
padding-right: 3.75rem;
|
||||
padding-left: 0.25rem;
|
||||
margin-top: 7.875rem;
|
||||
|
||||
&:nth-child(2n) {
|
||||
padding-right: 0;
|
||||
padding-left: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: 'Helvetica Neue Bold', sans-serif;
|
||||
font-size: 8.75rem;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0.5rem 1rem #dae0eb;
|
||||
line-height: 0.3;
|
||||
}
|
||||
|
||||
.description {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0.25rem;
|
||||
width: 3.5rem;
|
||||
margin-bottom: 0.375rem;
|
||||
background-color: nb-theme(color-active-bg);
|
||||
}
|
||||
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
line-height: 1.5;
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
}
|
||||
|
||||
.active {
|
||||
text-decoration: none;
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
color: nb-theme(color-active-fg);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.features {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
|
||||
.number {
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 2.625rem;
|
||||
padding-bottom: 0;
|
||||
|
||||
.features {
|
||||
flex-direction: column;
|
||||
|
||||
.feature {
|
||||
width: 100%;
|
||||
margin: 1.625rem 0 0.375rem;
|
||||
padding: 0;
|
||||
|
||||
&:nth-child(2n) {
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-material-features',
|
||||
templateUrl: './material-features.component.html',
|
||||
styleUrls: ['./material-features.component.scss'],
|
||||
})
|
||||
export class MaterialFeaturesSectionComponent {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -3,8 +3,9 @@
|
|||
<ngx-landing-header></ngx-landing-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-layout-column>
|
||||
<nb-layout-column class="main-section">
|
||||
<ngx-landing-main-info material></ngx-landing-main-info>
|
||||
<ngx-material-features></ngx-material-features>
|
||||
<ngx-landing-theme-section material></ngx-landing-theme-section>
|
||||
</nb-layout-column>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
$content-width: nb-theme(content-width);
|
||||
|
||||
::ng-deep {
|
||||
.version {
|
||||
color: nb-theme(color-basic-500) !important;
|
||||
|
|
@ -12,4 +15,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-section {
|
||||
background-color: nb-theme(gray-section-bg);
|
||||
}
|
||||
|
||||
ngx-material-features {
|
||||
max-width: $content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-material-features {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -6,8 +6,8 @@ import { NbThemeService } from '@nebular/theme';
|
|||
templateUrl: './material-landing.component.html',
|
||||
styleUrls: [
|
||||
'./material-landing.component.scss',
|
||||
'../landing-home.component.scss'
|
||||
]
|
||||
'../landing-home.component.scss',
|
||||
],
|
||||
})
|
||||
export class MaterialLandingComponent {
|
||||
constructor(private themeService: NbThemeService) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue