mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
feat(core): add backend bundles section for landing
This commit is contained in:
Valentin Kononov
commit
92acc44a32
24 changed files with 936 additions and 42 deletions
|
|
@ -38,4 +38,33 @@ export class DescriptionsService {
|
|||
getDescriptions(): Observable<Descriptions[]> {
|
||||
return observableOf(this.descriptions);
|
||||
}
|
||||
|
||||
/* tslint:disable:max-line-length */
|
||||
private bundleDescriptions: Descriptions[] = [
|
||||
{
|
||||
icon: 'umbrella-outline',
|
||||
title: 'Convenient',
|
||||
description: 'Complete pack of well known Angular based ngx-admin template, integrated with Backend Solution. Finally, you can get fully backend integrated solution out of the box. Flexibility of Ngx Admin, the variety of Nebular features and convenience of integrated Backend in one pack.',
|
||||
},
|
||||
{
|
||||
icon: 'settings-2-outline',
|
||||
title: 'Functional',
|
||||
description: 'Functional Backend Solution with Designed and Implemented Services and Data Flow. Deploy it as ready to use solution for a particular case, or give it to your development team to incrementally add functionality for the bigger system. it gives you a significant boost on start and solid development structure.',
|
||||
},
|
||||
{
|
||||
icon: 'clock-outline',
|
||||
title: 'Efficient',
|
||||
description: 'Save more than $21,000 using Backend Bundle. According to our research usage of a ready Backend Bundle optimizes 300 hours of development time. Taking the average hourly rate of a full stack developer in the US - $70.',
|
||||
},
|
||||
{
|
||||
icon: 'checkmark-circle-2-outline',
|
||||
title: 'Ready to use',
|
||||
description: 'We prepared this backend pack as development basement which lets your team concentrate on business logic and data models. Now .NET and .NET Core are available as frameworks of choice. More are in progress…',
|
||||
},
|
||||
];
|
||||
/* tslint:enable:max-line-length */
|
||||
|
||||
getBundleDescriptions(): Observable<Descriptions[]> {
|
||||
return observableOf(this.bundleDescriptions);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,11 @@ export class HeaderMenuService {
|
|||
title: 'Home',
|
||||
link: '/',
|
||||
},
|
||||
{
|
||||
title: 'Backend Bundles',
|
||||
link: '/',
|
||||
fragment: 'backend-bundles',
|
||||
},
|
||||
{
|
||||
title: 'Docs',
|
||||
link: '/docs',
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const routes: Routes = [
|
|||
|
||||
const config: ExtraOptions = {
|
||||
useHash: false,
|
||||
anchorScrolling: 'enabled',
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,306 @@
|
|||
<ngx-landing-section-title>
|
||||
Backend Bundles
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<div class="section-container">
|
||||
|
||||
<p class="features__description">Akveo new product created after a number of community and clients requests. We did all backend integration in ngx-admin for you! Now you can buy a complete UI + backend solution based on the backend framework of choice to use it as a template for your solution implementation.
|
||||
</p>
|
||||
|
||||
<div class="package-switcher">
|
||||
<div [(ngModel)]="selectedLicenseType" ngbRadioGroup
|
||||
class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
|
||||
<label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
|
||||
<input ngbButton type="radio" [value]="personalLicense"> {{ personalLicense }}
|
||||
</label>
|
||||
<label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
|
||||
<input ngbButton type="radio" [value]="commercialLicense"> {{ commercialLicense }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="packages">
|
||||
<li class="packages__item">
|
||||
<nb-flip-card [showToggleButton]="false" [flipped]="firstCardFlipped">
|
||||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net"></div>
|
||||
<h4 class="package-card__title">{{ ecomName }}</h4>
|
||||
<h4 class="package-card__title">{{ netName }}</h4>
|
||||
<p class="package-card__description">
|
||||
E-Commerce Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
|
||||
</p>
|
||||
<div class="package-card__price-wrapper">
|
||||
<span class="package-card__price package-card__price--old">${{ isCommercial() ? '2000' : '200' }}</span>
|
||||
<span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
|
||||
</div>
|
||||
<a [href]="firstBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back class="package-card package-card--back">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="firstBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card>
|
||||
</li>
|
||||
<li class="packages__item">
|
||||
<nb-flip-card [showToggleButton]="false" [flipped]="secondCardFlipped">
|
||||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net"></div>
|
||||
<h4 class="package-card__title">{{ iotName }}</h4>
|
||||
<h4 class="package-card__title">{{ netName }}</h4>
|
||||
<p class="package-card__description">
|
||||
IoT Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
|
||||
</p>
|
||||
<div class="package-card__price-wrapper">
|
||||
<span class="package-card__price package-card__price--old">${{ isCommercial() ? '2000' : '200' }}</span>
|
||||
<span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
|
||||
</div>
|
||||
<a [href]="secondBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back class="package-card package-card--back">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="secondBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card>
|
||||
</li>
|
||||
<li class="packages__item">
|
||||
<nb-flip-card [showToggleButton]="false" [flipped]="thirdCardFlipped">
|
||||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link package-card__demo-link--secondary">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net-core"></div>
|
||||
<h4 class="package-card__title">{{ ecomName }}</h4>
|
||||
<h4 class="package-card__title">{{ netCoreName }}</h4>
|
||||
<p class="package-card__description">
|
||||
E-Commerce Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
|
||||
</p>
|
||||
<div class="package-card__price-wrapper">
|
||||
<span class="package-card__price package-card__price--old">${{ isCommercial() ? '1800' : '180' }}</span>
|
||||
<span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
|
||||
</div>
|
||||
<a [href]="thirdBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back class="package-card package-card--back">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="thirdBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card>
|
||||
</li>
|
||||
<li class="packages__item">
|
||||
<nb-flip-card [showToggleButton]="false" [flipped]="fourthCardFlipped">
|
||||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link package-card__demo-link--secondary">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net-core"></div>
|
||||
<h4 class="package-card__title">{{ iotName }}</h4>
|
||||
<h4 class="package-card__title">{{ netCoreName }}</h4>
|
||||
<p class="package-card__description">
|
||||
IoT Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
|
||||
</p>
|
||||
<div class="package-card__price-wrapper">
|
||||
<span class="package-card__price package-card__price--old">${{ isCommercial() ? '1800' : '180' }}</span>
|
||||
<span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
|
||||
</div>
|
||||
<a [href]="fourthBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back class="package-card package-card--back">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="fourthBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table class="features-table">
|
||||
<tr>
|
||||
<th class="left">FEATURES</th>
|
||||
<th>PERSONAL</th>
|
||||
<th>COMMERCIAL</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">NGX Admin template with 100+ UI components integrated with Backend</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">.NET backend Services and Repository layers with data access</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">JWT Authentication setup for UI and Backend</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Running instructions and code documentation</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Commercial Usage</td>
|
||||
<td>
|
||||
<ul class="not-included">
|
||||
<li class="not-included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">One Year Support and Bug Fixes by Request</td>
|
||||
<td>
|
||||
<ul class="not-included">
|
||||
<li class="not-included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<ngx-landing-description-section *ngIf="descriptions" [descriptions]="descriptions" ></ngx-landing-description-section>
|
||||
|
||||
|
||||
<ngx-landing-section-title>
|
||||
Architecture Design
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<p class="features__description">The schema describes the idea of how backend part of the .NET solution is organized.
|
||||
</p>
|
||||
|
||||
<picture class="bundle-scheme">
|
||||
<source type="image/webp" srcset="/assets/img/bundle-scheme@1x.webp 1x, /assets/img/bundle-scheme@2x.webp 2x">
|
||||
<img class="bundle-scheme__image" src="/assets/img/bundle-scheme@1x.png" srcset="/assets/img/bundle-scheme@2x.png 2x" alt="Backend bundles">
|
||||
</picture>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,447 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
$content-width: nb-theme(content-width);
|
||||
$left-right-offset: 8.125rem;
|
||||
|
||||
display: block;
|
||||
padding-top: 5.125rem;
|
||||
|
||||
.section-container {
|
||||
width: calc(#{$content-width} - #{$left-right-offset} * 2);
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 11px;
|
||||
margin-top: 5rem;
|
||||
margin-left: -11px;
|
||||
margin-right: -11px;
|
||||
width: 100%;
|
||||
width: calc(100% + 22px);
|
||||
|
||||
&__item {
|
||||
flex: 0 0 25%;
|
||||
width: 25%;
|
||||
max-width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
&__title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60px;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
&__description {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
color: #8994a3;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
line-height: 1.75;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bundle-scheme {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 2.5rem auto;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.package-switcher {
|
||||
margin: 2.375rem 0 5rem;
|
||||
|
||||
&__btn-group {
|
||||
box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5);
|
||||
border-radius: 1.5rem;
|
||||
&:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):first-child {
|
||||
border-top-left-radius: 1.5rem;
|
||||
border-bottom-left-radius: 1.5rem;
|
||||
}
|
||||
&:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):last-child {
|
||||
border-top-right-radius: 1.5rem;
|
||||
border-bottom-right-radius: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-width: 10.625rem;
|
||||
color: #bdc3cb;
|
||||
border-color: #e6e8eb;
|
||||
text-transform: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
color: #ffffff;
|
||||
}
|
||||
&.active {
|
||||
color: #000000;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.packages {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
margin-left: -11px;
|
||||
margin-right: -11px;
|
||||
margin-bottom: 4rem;
|
||||
width: 100%;
|
||||
width: calc(100% + 22px);
|
||||
|
||||
&__item {
|
||||
flex: 0 0 25%;
|
||||
width: 25%;
|
||||
max-width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
nb-flip-card {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .flipcard-body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .front-container, .back-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nb-card-front, nb-card-back {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nb-card {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 7px 17px 0 rgba(218, 224, 235, 0.5);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
cursor: pointer;
|
||||
|
||||
&--front {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
&__demo-link {
|
||||
align-self: flex-end;
|
||||
color: #ff8588;
|
||||
font-weight: bold;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 1rem;
|
||||
border: 1px solid #ff8588;
|
||||
border-radius: 0.75rem;
|
||||
&--secondary {
|
||||
color: #ad7efa;
|
||||
border-color: #ad7efa;
|
||||
}
|
||||
}
|
||||
&__image {
|
||||
margin: 0 -1rem;
|
||||
display: flex;
|
||||
flex: 0 0 14.125rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto 100%;
|
||||
&--dot-net {
|
||||
background-image: url('assets/img/bundle-dot-net.png');
|
||||
}
|
||||
&--dot-net-core {
|
||||
background-image: url('assets/img/bundle-dot-net-core.png');
|
||||
}
|
||||
}
|
||||
&__price-wrapper {
|
||||
flex: 0 0 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
&__price {
|
||||
font-weight: bold;
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.5rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
vertical-align: middle;
|
||||
&--old {
|
||||
font-size: 1.5rem;
|
||||
color: #ff4d6b;
|
||||
text-decoration: line-through;
|
||||
vertical-align: middle;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
// min-height: 2rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
// margin-bottom: 0.5rem;
|
||||
}
|
||||
&__description {
|
||||
margin-top: 0.5rem;
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
margin-bottom: 1.675rem;
|
||||
}
|
||||
&__buy-link {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: 0.75rem;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
background-color: #18cb90;
|
||||
box-shadow: 0 5px 29px 0 rgba(0, 219, 146, 0.32);
|
||||
border-radius: 3px;
|
||||
margin-top: auto;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: 0 0.375rem 2.125rem 0 rgba(0, 219, 146, 0.32);
|
||||
}
|
||||
}
|
||||
&__type {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
text-align: center;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.included {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 1rem 0 0;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
list-style: none;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 300;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-flex;
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
border: solid #00db92;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
// ff3d71
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0 0 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.not-included {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 1rem 0 0;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
list-style: none;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 300;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-flex;
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
border: solid #ff8588;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0 0 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.section-container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.bundle-scheme {
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
.features {
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
|
||||
&__item {
|
||||
flex-basis: 50%;
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.packages {
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
|
||||
&__item {
|
||||
flex-basis: 50%;
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-table {
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
|
||||
box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5);
|
||||
background-color: #fafafa;
|
||||
|
||||
th, td {
|
||||
//border: 0.5px solid #dae0eb;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: lighter;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
td ul {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
.packages__item {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
|
||||
.features__item {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.package-switcher__btn {
|
||||
min-width: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-backend-bundles-section',
|
||||
templateUrl: 'backend-bundles-section.component.html',
|
||||
styleUrls: ['./backend-bundles-section.component.scss'],
|
||||
})
|
||||
|
||||
export class BackendBundlesSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
descriptions: Descriptions[];
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
|
||||
selectedLicenseType = 'Personal';
|
||||
personalLicense = 'Personal';
|
||||
commercialLicense = 'Commercial';
|
||||
|
||||
ecomName = 'E-Commerce:';
|
||||
iotName = 'IoT:';
|
||||
|
||||
netName = '.NET + NGX Admin';
|
||||
netCoreName = '.NET Core + NGX Admin';
|
||||
|
||||
|
||||
constructor(private descriptionsService: DescriptionsService) {
|
||||
this.descriptionsService.getBundleDescriptions()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((descriptions) => this.descriptions = descriptions);
|
||||
}
|
||||
|
||||
get firstBundleMail(): string {
|
||||
return this.getMailToText('.NET E-commerce');
|
||||
}
|
||||
|
||||
get secondBundleMail(): string {
|
||||
return this.getMailToText('.NET IoT');
|
||||
}
|
||||
|
||||
get thirdBundleMail(): string {
|
||||
return this.getMailToText('.NET Core E-commerce');
|
||||
}
|
||||
|
||||
get fourthBundleMail(): string {
|
||||
return this.getMailToText('.NET Core IoT');
|
||||
}
|
||||
|
||||
firstCardFlipped: boolean = false;
|
||||
secondCardFlipped: boolean = false;
|
||||
thirdCardFlipped: boolean = false;
|
||||
fourthCardFlipped: boolean = false;
|
||||
|
||||
stopPropagation(e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
isCommercial() {
|
||||
return this.selectedLicenseType === 'Commercial';
|
||||
}
|
||||
|
||||
private getMailToText(bundleName: string) {
|
||||
return 'mailto:support@akveo.com' +
|
||||
`?subject=${this.selectedLicenseType} ${bundleName} Bundle` +
|
||||
'&body=Dear Akveo, %0D%0A%0D%0A' +
|
||||
`I would like to purchase ${this.selectedLicenseType} ${bundleName} Bundle. ` +
|
||||
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
|
||||
'Thanks and regards';
|
||||
}
|
||||
}
|
||||
|
|
@ -48,6 +48,7 @@
|
|||
}
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
margin-top: 1.25rem;
|
||||
|
|
|
|||
|
|
@ -4,28 +4,14 @@
|
|||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Descriptions } from '../../../@core/data/service/descriptions.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-description-section',
|
||||
templateUrl: './description-section.component.html',
|
||||
styleUrls: ['./description-section.component.scss'],
|
||||
})
|
||||
export class DescriptionSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
descriptions: Descriptions[];
|
||||
|
||||
constructor(private descriptionsService: DescriptionsService) {
|
||||
this.descriptionsService.getDescriptions()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((descriptions) => this.descriptions = descriptions);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
export class DescriptionSectionComponent {
|
||||
@Input() descriptions: Descriptions[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { SwiperModule } from 'ngx-swiper-wrapper';
|
|||
// modules
|
||||
|
||||
// components
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { LandingHomeComponent } from './landing-home.component';
|
||||
import { MainInfoSectionComponent } from './main-info-section/main-info-section.component';
|
||||
import { DescriptionSectionComponent } from './description-section/description-section.component';
|
||||
|
|
@ -23,6 +24,7 @@ import { ContactSectionComponent } from './contact-section/contact-section.compo
|
|||
import { OurProjectsSectionComponent } from './our-projects-section/our-projects-section.component';
|
||||
import { LandingHomeRoutingModule } from './landing-home-routing.module';
|
||||
import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-landing-sections-container.component';
|
||||
import { BackendBundlesSectionComponent } from './backend-bundles-section/backend-bundles-section.component';
|
||||
// components
|
||||
|
||||
const COMPONENTS = [
|
||||
|
|
@ -36,6 +38,7 @@ const COMPONENTS = [
|
|||
OurProjectsSectionComponent,
|
||||
SocialSectionComponent,
|
||||
ContactSectionComponent,
|
||||
BackendBundlesSectionComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -43,6 +46,7 @@ const COMPONENTS = [
|
|||
...COMPONENTS,
|
||||
],
|
||||
imports: [
|
||||
NgbModule,
|
||||
NgxLandingThemeModule,
|
||||
SwiperModule,
|
||||
LandingHomeRoutingModule,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
target="_blank">
|
||||
<img *ngIf="breakpoint.width >= breakpoints.md"
|
||||
class="main-img"
|
||||
defaultImage="assets/img/default.png"
|
||||
lazyLoad="assets/img/ngx-admin.png"/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@
|
|||
|
||||
.mobile-main-img-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@
|
|||
.project-img {
|
||||
min-width: 39.75rem;
|
||||
min-height: 20.375rem;
|
||||
max-height: 20.375rem;
|
||||
|
||||
.lazy-load-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
|
@ -28,6 +28,9 @@
|
|||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
&.ng-failed-lazyloaded {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<ngx-landing-main-info></ngx-landing-main-info>
|
||||
</div>
|
||||
|
||||
<ngx-landing-description-section></ngx-landing-description-section>
|
||||
<ngx-landing-description-section *ngIf="descriptions" [descriptions]="descriptions" ></ngx-landing-description-section>
|
||||
|
||||
<ngx-landing-theme-section></ngx-landing-theme-section>
|
||||
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
<ngx-landing-reviews-section></ngx-landing-reviews-section>
|
||||
</div>
|
||||
|
||||
<ngx-backend-bundles-section id="backend-bundles"></ngx-backend-bundles-section>
|
||||
|
||||
<ngx-landing-our-projects-section></ngx-landing-our-projects-section>
|
||||
|
||||
<div class="gray-section">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
ngx-landing-reviews-section,
|
||||
ngx-landing-our-projects-section,
|
||||
ngx-landing-social-section,
|
||||
ngx-landing-contact-section {
|
||||
ngx-landing-contact-section,
|
||||
ngx-backend-bundles-section {
|
||||
max-width: $content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,27 @@
|
|||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-sections-container',
|
||||
templateUrl: './ngx-landing-sections-container.component.html',
|
||||
styleUrls: ['./ngx-landing-sections-container.component.scss'],
|
||||
})
|
||||
export class NgxLandingSectionsContainerComponent {
|
||||
export class NgxLandingSectionsContainerComponent implements OnDestroy {
|
||||
|
||||
constructor() {
|
||||
private alive = true;
|
||||
descriptions: Descriptions[];
|
||||
|
||||
constructor(private descriptionsService: DescriptionsService) {
|
||||
this.descriptionsService.getDescriptions()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((descriptions) => this.descriptions = descriptions);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
padding-bottom: 5.125rem;
|
||||
|
||||
.social-button {
|
||||
width: 19rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
|
|
@ -32,8 +33,13 @@
|
|||
box-shadow: nb-theme(shadow-active-btn);
|
||||
}
|
||||
|
||||
> i {
|
||||
width: 2.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 2rem;
|
||||
margin-left: 1.625rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -56,10 +62,7 @@
|
|||
|
||||
.github {
|
||||
margin-top: 2rem;
|
||||
margin-left: 1.25rem;
|
||||
padding-right: 6.5rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding: 1.5rem 5rem 1.5rem 1.625rem;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
|
|
@ -83,10 +86,10 @@
|
|||
}
|
||||
|
||||
.facebook {
|
||||
padding: 1.5rem 6.625rem 1.25rem 1.375rem;
|
||||
padding: 1.5rem 5rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.125rem;
|
||||
margin-left: 1.625rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -95,18 +98,18 @@
|
|||
}
|
||||
|
||||
.linkedin {
|
||||
padding: 1.5rem 7rem 1.25rem 1.625rem;
|
||||
padding: 1.5rem 5rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.75rem;
|
||||
margin-left: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter {
|
||||
padding: 1.5rem 8rem 1.25rem 1.625rem;
|
||||
padding: 1.5rem 5rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.75rem;
|
||||
margin-left: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,16 +118,27 @@
|
|||
width: 80%;
|
||||
}
|
||||
|
||||
//.social-button {
|
||||
// width: auto;
|
||||
//}
|
||||
|
||||
.github {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.facebook {
|
||||
width: 13rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.linkedin {
|
||||
width: 13rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
padding-right: 3rem;
|
||||
width: 13rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,13 +150,15 @@
|
|||
font-size: nb-theme(font-size);
|
||||
}
|
||||
|
||||
.github {
|
||||
.social-button {
|
||||
margin-top: 2rem;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
padding: 1.25rem 0 1.25rem 1.875rem;
|
||||
width: 100%;
|
||||
|
||||
.info {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
|
|
|
|||
BIN
docs/assets/img/bundle-dot-net-core.png
Normal file
BIN
docs/assets/img/bundle-dot-net-core.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
docs/assets/img/bundle-dot-net.png
Normal file
BIN
docs/assets/img/bundle-dot-net.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
docs/assets/img/bundle-scheme@1x.png
Normal file
BIN
docs/assets/img/bundle-scheme@1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/assets/img/bundle-scheme@1x.webp
Normal file
BIN
docs/assets/img/bundle-scheme@1x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/assets/img/bundle-scheme@2x.png
Normal file
BIN
docs/assets/img/bundle-scheme@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
docs/assets/img/bundle-scheme@2x.webp
Normal file
BIN
docs/assets/img/bundle-scheme@2x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 83 B |
|
|
@ -5,7 +5,7 @@
|
|||
<title>ngx-admin: Free Open Source admin dashboard template based on Angular, Bootstrap</title>
|
||||
|
||||
<meta name="description" content="Get Free Open Source admin dashboard template, based on Angular, Bootstrap and Nebular. ngx-admin includes 3 responsive themes, 30+ UI components with 60+ examples.">
|
||||
<meta name="keywords" content="ngx-admin LP, admin panel template, admin dashboard, bootstrap templates, angular bootstrap, admin template, free dashboard emplates, angular dashboard, angular templates free, angular template admin, angular template admin free, create a template ngular, angular template builder, angular template download, angular template dashboard, angular ecommerce template, angular emplate free download, angular template github, angular template guide, angular ng-template, angular template in component, angular template theme, angular template ui, angular template website, angular template with bootstrap, angular template 2017, angular template 2018, angular 6 template free, angular 6 template free download, angular 6 template github, angular 6 template dmin, angular 6 template, angular 6 templates free download, open source template, open source responsive admin templates, admin anel template free download, angular admin panel template, dashboard templates, angular admin panel template github">
|
||||
<meta name="keywords" content="ngx-admin LP, admin panel template, admin dashboard, bootstrap templates, angular bootstrap, admin template, free dashboard emplates, angular dashboard, angular templates free, angular template admin, angular template admin free, create a template ngular, angular template builder, angular template download, angular template dashboard, angular ecommerce template, angular emplate free download, angular template github, angular template guide, angular ng-template, angular template in component, angular template theme, angular template ui, angular template website, angular template with bootstrap, angular template 2017, angular template 2018, angular 6 template free, angular 6 template free download, angular 6 template github, angular 6 template dmin, angular 6 template, angular 6 templates free download, open source template, open source responsive admin templates, admin anel template free download, angular admin panel template, dashboard templates, angular admin panel template github backend bundle net core entity framework rest api">
|
||||
|
||||
<base href="/">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue