mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
feat(landing): add backend bundles section
This commit is contained in:
u.ahmetvaliyev
parent
a3f5d4f32b
commit
be65f95645
8 changed files with 647 additions and 1 deletions
|
|
@ -0,0 +1,244 @@
|
||||||
|
<ngx-landing-section-title>
|
||||||
|
Backend Bundles
|
||||||
|
</ngx-landing-section-title>
|
||||||
|
|
||||||
|
<div class="section-container">
|
||||||
|
<ul class="features">
|
||||||
|
<li class="features__item">
|
||||||
|
<h3 class="features__title title">Convenient</h3>
|
||||||
|
<p class="features__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.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li class="features__item">
|
||||||
|
<h3 class="features__title">Functional</h3>
|
||||||
|
<p class="features__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.</p>
|
||||||
|
</li>
|
||||||
|
<li class="features__item">
|
||||||
|
<h3 class="features__title">Efficient</h3>
|
||||||
|
<p class="features__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.</p>
|
||||||
|
</li>
|
||||||
|
<li class="features__item">
|
||||||
|
<h3 class="features__title">Ready to use</h3>
|
||||||
|
<p class="features__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…</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="package-switcher">
|
||||||
|
<div [(ngModel)]="licenseType" ngbRadioGroup
|
||||||
|
#selectedLicense="ngModel"
|
||||||
|
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="personal" name="1"> Personal
|
||||||
|
</label>
|
||||||
|
<label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
|
||||||
|
<input ngbButton type="radio" value="commercial" name="2"> Commercial
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="packages">
|
||||||
|
<li class="packages__item">
|
||||||
|
<nb-flip-card [showToggleButton]="false" [flipped]="firstCardFlipped" (click)="firstCardFlipped = !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>
|
||||||
|
<div class="package-card__price-wrapper">
|
||||||
|
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span>
|
||||||
|
<span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="package-card__title">{{ firstBundleName }} + NGX Admin</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>
|
||||||
|
<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">{{ licenseType === 'commercial' ? 'Commercial' : 'Personal' }}</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" (click)="secondCardFlipped = !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>
|
||||||
|
<div class="package-card__price-wrapper">
|
||||||
|
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span>
|
||||||
|
<span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="package-card__title">{{ secondBundleName }} + NGX Admin</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>
|
||||||
|
<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">{{ licenseType === 'commercial' ? 'Commercial' : 'Personal' }}</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" (click)="thirdCardFlipped = !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>
|
||||||
|
<div class="package-card__price-wrapper">
|
||||||
|
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span>
|
||||||
|
<span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="package-card__title">{{ thirdBundleName }} + NGX Admin</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>
|
||||||
|
<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">{{ licenseType === 'commercial' ? 'Commercial' : 'Personal' }}</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" (click)="fourthCardFlipped = !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>
|
||||||
|
<div class="package-card__price-wrapper">
|
||||||
|
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span>
|
||||||
|
<span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="package-card__title">{{ fourthBundleName }} + NGX Admin</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>
|
||||||
|
<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">{{ licenseType === 'commercial' ? 'Commercial' : 'Personal' }}</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>
|
||||||
|
</div>
|
||||||
|
<ng-template #bundleFeaturesList>
|
||||||
|
<ul class="included">
|
||||||
|
<li class="included__item">
|
||||||
|
<p class="included__text">NGX Admin admin template with 100+ UI components integrated with Backend</p>
|
||||||
|
</li>
|
||||||
|
<li class="included__item">
|
||||||
|
<p class="included__text">.NET backend Services and Repository layers with data access</p>
|
||||||
|
</li>
|
||||||
|
<li class="included__item">
|
||||||
|
<p class="included__text">JWT Authentication setup for UI and Backend</p>
|
||||||
|
</li>
|
||||||
|
<li class="included__item">
|
||||||
|
<p class="included__text">Running instructions and code documentation</p>
|
||||||
|
</li>
|
||||||
|
<li class="included__item">
|
||||||
|
<p class="included__text">Unit Tests</p>
|
||||||
|
</li>
|
||||||
|
<ng-container *ngIf="isCommercial()">
|
||||||
|
<li class="included__item">
|
||||||
|
<p class="included__text">Commercial Usage</p>
|
||||||
|
</li>
|
||||||
|
<li class="included__item">
|
||||||
|
<p class="included__text">One Year Support and Bug Fixes by Request</p>
|
||||||
|
</li>
|
||||||
|
</ng-container>
|
||||||
|
</ul>
|
||||||
|
</ng-template>
|
||||||
|
|
@ -0,0 +1,326 @@
|
||||||
|
/**
|
||||||
|
* @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;
|
||||||
|
margin-top: 5rem;
|
||||||
|
margin-left: -11px;
|
||||||
|
margin-right: -11px;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
flex: 0 0 25%;
|
||||||
|
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: 1rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-switcher {
|
||||||
|
margin: 2.375rem 0 5rem;
|
||||||
|
|
||||||
|
&__btn-group {
|
||||||
|
box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
flex: 0 0 25%;
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 11px;
|
||||||
|
padding-right: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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: 0.875rem;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
&__description {
|
||||||
|
font-family: nb-theme(font-secondary), sans-serif;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin: 0 0 0 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(xl) {
|
||||||
|
|
||||||
|
.features {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
flex-basis: 50%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.packages {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
flex-basis: 50%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
|
||||||
|
.packages__item {
|
||||||
|
flex-basis: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(is) {
|
||||||
|
|
||||||
|
.features__item {
|
||||||
|
flex-basis: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Akveo. All Rights Reserved.
|
||||||
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Component} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-backend-bundles-section',
|
||||||
|
templateUrl: 'backend-bundles-section.component.html',
|
||||||
|
styleUrls: ['./backend-bundles-section.component.scss'],
|
||||||
|
})
|
||||||
|
|
||||||
|
export class BackendBundlesSectionComponent {
|
||||||
|
|
||||||
|
licenseType = 'commercial';
|
||||||
|
|
||||||
|
firstBundleName = 'E-commerce: .NET';
|
||||||
|
secondBundleName = 'IoT: .NET';
|
||||||
|
thirdBundleName = 'E-commerce: .NET Core';
|
||||||
|
fourthBundleName = 'IoT: .NET Core';
|
||||||
|
|
||||||
|
firstBundleMail: string = 'mailto:support@akveo.com' +
|
||||||
|
'?subject=.NET E-commerce Bundle' +
|
||||||
|
'&body=Dear Akveo, %0D%0A%0D%0A' +
|
||||||
|
'I would like to purchase .NET E-commerce Bundle. ' +
|
||||||
|
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
|
||||||
|
'Thanks and regards';
|
||||||
|
|
||||||
|
secondBundleMail: string = 'mailto:support@akveo.com' +
|
||||||
|
'?subject=.NET IoT Bundle' +
|
||||||
|
'&body=Dear Akveo, %0D%0A%0D%0A' +
|
||||||
|
'I would like to purchase .NET IoT Bundle. ' +
|
||||||
|
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
|
||||||
|
'Thanks and regards';
|
||||||
|
|
||||||
|
thirdBundleMail: string = 'mailto:support@akveo.com' +
|
||||||
|
'?subject=.NET Core E-commerce Bundle' +
|
||||||
|
'&body=Dear Akveo, %0D%0A%0D%0A' +
|
||||||
|
'I would like to purchase .NET Core E-commerce Bundle. ' +
|
||||||
|
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
|
||||||
|
'Thanks and regards';
|
||||||
|
|
||||||
|
fourthBundleMail: string = 'mailto:support@akveo.com' +
|
||||||
|
'?subject=.NET Core IoT Bundle' +
|
||||||
|
'&body=Dear Akveo, %0D%0A%0D%0A' +
|
||||||
|
'I would like to purchase .NET Core IoT Bundle. ' +
|
||||||
|
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
|
||||||
|
'Thanks and regards';
|
||||||
|
|
||||||
|
firstCardFlipped: boolean = false;
|
||||||
|
secondCardFlipped: boolean = false;
|
||||||
|
thirdCardFlipped: boolean = false;
|
||||||
|
fourthCardFlipped: boolean = false;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
stopPropagation(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
isCommercial() {
|
||||||
|
return this.licenseType === 'commercial';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,7 @@ import { SwiperModule } from 'ngx-swiper-wrapper';
|
||||||
// modules
|
// modules
|
||||||
|
|
||||||
// components
|
// components
|
||||||
|
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||||
import { LandingHomeComponent } from './landing-home.component';
|
import { LandingHomeComponent } from './landing-home.component';
|
||||||
import { MainInfoSectionComponent } from './main-info-section/main-info-section.component';
|
import { MainInfoSectionComponent } from './main-info-section/main-info-section.component';
|
||||||
import { DescriptionSectionComponent } from './description-section/description-section.component';
|
import { DescriptionSectionComponent } from './description-section/description-section.component';
|
||||||
|
|
@ -23,6 +24,8 @@ import { ContactSectionComponent } from './contact-section/contact-section.compo
|
||||||
import { OurProjectsSectionComponent } from './our-projects-section/our-projects-section.component';
|
import { OurProjectsSectionComponent } from './our-projects-section/our-projects-section.component';
|
||||||
import { LandingHomeRoutingModule } from './landing-home-routing.module';
|
import { LandingHomeRoutingModule } from './landing-home-routing.module';
|
||||||
import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-landing-sections-container.component';
|
import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-landing-sections-container.component';
|
||||||
|
import { BannerComponent } from './banner/banner.component';
|
||||||
|
import { BackendBundlesSectionComponent } from './backend-bundles-section/backend-bundles-section.component';
|
||||||
// components
|
// components
|
||||||
|
|
||||||
const COMPONENTS = [
|
const COMPONENTS = [
|
||||||
|
|
@ -36,6 +39,8 @@ const COMPONENTS = [
|
||||||
OurProjectsSectionComponent,
|
OurProjectsSectionComponent,
|
||||||
SocialSectionComponent,
|
SocialSectionComponent,
|
||||||
ContactSectionComponent,
|
ContactSectionComponent,
|
||||||
|
BannerComponent,
|
||||||
|
BackendBundlesSectionComponent,
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -43,6 +48,7 @@ const COMPONENTS = [
|
||||||
...COMPONENTS,
|
...COMPONENTS,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
|
NgbModule,
|
||||||
NgxLandingThemeModule,
|
NgxLandingThemeModule,
|
||||||
SwiperModule,
|
SwiperModule,
|
||||||
LandingHomeRoutingModule,
|
LandingHomeRoutingModule,
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,8 @@
|
||||||
<ngx-landing-reviews-section></ngx-landing-reviews-section>
|
<ngx-landing-reviews-section></ngx-landing-reviews-section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ngx-backend-bundles-section id="backend-bundles"></ngx-backend-bundles-section>
|
||||||
|
|
||||||
<ngx-landing-our-projects-section></ngx-landing-our-projects-section>
|
<ngx-landing-our-projects-section></ngx-landing-our-projects-section>
|
||||||
|
|
||||||
<div class="gray-section">
|
<div class="gray-section">
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,8 @@
|
||||||
ngx-landing-reviews-section,
|
ngx-landing-reviews-section,
|
||||||
ngx-landing-our-projects-section,
|
ngx-landing-our-projects-section,
|
||||||
ngx-landing-social-section,
|
ngx-landing-social-section,
|
||||||
ngx-landing-contact-section {
|
ngx-landing-contact-section,
|
||||||
|
ngx-backend-bundles-section {
|
||||||
max-width: $content-width;
|
max-width: $content-width;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
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: 79 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: 81 KiB |
Loading…
Add table
Add a link
Reference in a new issue