mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-27 04:38:49 +01:00
feat: docs app
This commit is contained in:
Sergey Andrievskiy
parent
713aff561e
commit
2129689f98
203 changed files with 15927 additions and 5 deletions
|
|
@ -0,0 +1,113 @@
|
|||
<ngx-landing-section-title>
|
||||
Backend Bundles
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<div class="section-container">
|
||||
|
||||
<p class="features__description">
|
||||
Looking for a way to integrate Angular ngx-admin with .NET, Node.js, Ruby or PHP? We are here to save your time on painful setup, configuration and routing tasks.
|
||||
Choose starter kit bundle based on a technology of your choice below.
|
||||
</p>
|
||||
|
||||
<div class="package-switcher">
|
||||
<div class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
|
||||
<label *ngFor="let license of licenses"
|
||||
class="package-switcher__btn btn btn-outline-secondary"
|
||||
[class.active]="selectedLicenseType === license">
|
||||
<input type="radio" [value]="license" name="licence-type" [(ngModel)]="selectedLicenseType"> {{ license | ngxCapitalize }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="packages">
|
||||
<li class="packages__item" *ngFor="let product of products | async">
|
||||
<nb-card class="package-card">
|
||||
<nb-card-body>
|
||||
<div class="package-card__image" [ngStyle]="product.imageUrl | backgroundImage"></div>
|
||||
<h4 class="package-card__title">{{ product.title }}</h4>
|
||||
<p class="package-card__description">
|
||||
{{ product.description | slice:0:200 }}...
|
||||
<a class="go-to-button"
|
||||
href="{{ product.storeUrl }}?utm_source=ngx_admin_landing&utm_medium=buy_bundle_{{ selectedLicenseType }}"
|
||||
target="_blank">
|
||||
read more
|
||||
</a>
|
||||
</p>
|
||||
<div class="package-card__price-wrapper">
|
||||
<span class="package-card__price package-card__price--old">${{ (product.variants | license:selectedLicenseType).compare_at_price }}</span>
|
||||
<span class="package-card__price">${{ (product.variants | license:selectedLicenseType).price }}</span>
|
||||
</div>
|
||||
<a href="{{ product.storeUrl }}?utm_source=ngx_admin_landing&utm_medium=buy_bundle_{{ selectedLicenseType }}"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton>
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="request-code-section">
|
||||
<a href="https://github.com/akveo/ngx-admin-bundle-support/tree/master/codeSamples" target="_blank" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
CODE SAMPLE
|
||||
</a>
|
||||
|
||||
<a href="https://store.akveo.com/collections/all?utm_source=ngx_admin_landing&utm_medium=more_bundles" target="_blank" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
BROWSE OTHER BUNDLES
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<table class="features-table">
|
||||
<tr class="header">
|
||||
<th class="left">FEATURES</th>
|
||||
<th>SINGLE APP</th>
|
||||
<th>MULTI APP</th>
|
||||
</tr>
|
||||
<tr *ngFor="let feature of features | async">
|
||||
<td class="left">{{ feature.text }}</td>
|
||||
<td>
|
||||
<ng-container *ngTemplateOutlet="availabilityIcon; context: { $implicit: feature.availableInPersonalLicence }">
|
||||
</ng-container>
|
||||
</td>
|
||||
<td>
|
||||
<ng-container *ngTemplateOutlet="availabilityIcon; context: { $implicit: feature.availableInCommercialLicence }">
|
||||
</ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<ng-template #availabilityIcon let-isAvailable>
|
||||
<i *ngIf="isAvailable; else unavailableIcon"
|
||||
aria-label="available"
|
||||
[innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }">
|
||||
</i>
|
||||
|
||||
<ng-template #unavailableIcon>
|
||||
<i aria-label="unavailable" [innerHTML]="'close-outline' | eva: { width: 24, height: 24, fill: '#ff8588' }"></i>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</table>
|
||||
|
||||
<ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async"></ngx-landing-description-section>
|
||||
|
||||
<div class="bundles-architecture">
|
||||
<ngx-landing-section-title>
|
||||
Architecture Design
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<p class="features__description">The schema describes high-level solution architecture.</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>
|
||||
|
||||
<p class="features__description">Need more details or have a question?</p>
|
||||
|
||||
<div class="request-code-section">
|
||||
<a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
CONTACT US
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
/**
|
||||
* @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;
|
||||
}
|
||||
}
|
||||
|
||||
.bundles-architecture {
|
||||
display: none;
|
||||
margin-bottom: 5rem;
|
||||
|
||||
.bundle-scheme {
|
||||
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%;
|
||||
}
|
||||
|
||||
::ng-deep .flipcard-body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::ng-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;
|
||||
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: 1rem -1rem;
|
||||
display: flex;
|
||||
flex: 0 0 14.125rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
&__price-wrapper {
|
||||
flex: 0 0 2.5rem;
|
||||
margin-top: auto;
|
||||
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 {
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
line-height: 1.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: 0.5rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.go-to-button {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
color: nb-theme(color-active-fg);
|
||||
padding: 0.25rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.request-code-section {
|
||||
margin-bottom: 5rem;
|
||||
|
||||
a:not(:first-child) {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
|
||||
.features-table {
|
||||
.header {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
|
||||
.features__item {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.package-switcher__btn {
|
||||
min-width: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Output } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { delay, filter, take } from 'rxjs/operators';
|
||||
import { NB_WINDOW } from '@nebular/theme';
|
||||
|
||||
import { BUNDLE_LICENSE, BundlesService, Feature, Product } from '../../../@core/data/service/bundles.service';
|
||||
import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-backend-bundles-section',
|
||||
templateUrl: 'backend-bundles-section.component.html',
|
||||
styleUrls: ['./backend-bundles-section.component.scss'],
|
||||
})
|
||||
export class BackendBundlesSectionComponent implements AfterViewInit {
|
||||
|
||||
@Output() loaded = new EventEmitter();
|
||||
|
||||
selectedLicenseType = BUNDLE_LICENSE.single;
|
||||
|
||||
licenses = Object.values(BUNDLE_LICENSE);
|
||||
|
||||
descriptions: Observable<Descriptions[]> = this.descriptionService.getBundleDescriptions();
|
||||
products: Observable<Product[]> = this.bundlesService.getProducts();
|
||||
features: Observable<Feature[]> = this.bundlesService.getFeatures();
|
||||
|
||||
constructor(private descriptionService: DescriptionsService,
|
||||
private bundlesService: BundlesService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private el: ElementRef<HTMLElement>,
|
||||
@Inject(NB_WINDOW) private window) {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.activatedRoute.fragment
|
||||
.pipe(
|
||||
filter(fragment => fragment === 'backend-bundles'),
|
||||
delay(500),
|
||||
take(1),
|
||||
)
|
||||
.subscribe((fragment: string) => {
|
||||
this.window.scrollTo(0, this.el.nativeElement.offsetTop);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({ name: 'backgroundImage' })
|
||||
export class BackgroundImagePipe implements PipeTransform {
|
||||
transform(url: string): any {
|
||||
return {
|
||||
'background-image': `url(\'${url}\')`,
|
||||
};
|
||||
}
|
||||
}
|
||||
11
docs/app/pages/home/backend-bundles-section/license.pipe.ts
Normal file
11
docs/app/pages/home/backend-bundles-section/license.pipe.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { ProductVariant } from '../../../@core/data/service/bundles.service';
|
||||
|
||||
@Pipe({ name: 'license' })
|
||||
export class LicensePipe implements PipeTransform {
|
||||
transform(variants: ProductVariant[], license: string): ProductVariant {
|
||||
const result = variants
|
||||
.filter(variant => variant.title.toLowerCase().includes(license.toLowerCase()));
|
||||
return result.length ? result[0] : undefined;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<ngx-landing-section-title>
|
||||
Stay tuned
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<p class="description">
|
||||
Subscribe to get notified about new versions of ngx-admin and other cool projects that we are working on
|
||||
</p>
|
||||
|
||||
<div class="sending-block">
|
||||
<form id="email-form"
|
||||
#contactForm
|
||||
class="email-form"
|
||||
action="https://akveo.us19.list-manage.com/subscribe/post?u=e8ac0871a095839ba14553eff&id=cd45c56765"
|
||||
method="post"
|
||||
target="_blank"
|
||||
novalidate>
|
||||
<label for="email">Your Email</label>
|
||||
<input id="email"
|
||||
#emailInput
|
||||
type="email"
|
||||
name="EMAIL"
|
||||
class="email"
|
||||
[class.invalid]="invalid"
|
||||
placeholder="johndoe@gmail.com"
|
||||
required>
|
||||
<input class="submit-input"
|
||||
type="button"
|
||||
value="Subscribe"
|
||||
name="subscribe"
|
||||
(click)="submitForm()"
|
||||
[attr.disabled]="disabledControl">
|
||||
</form>
|
||||
<div class="agreement-block">
|
||||
<nb-checkbox [(ngModel)]="isAgree" status="success">
|
||||
<p class="agreement">
|
||||
<span class="highlight">I agree</span> to get news on what’s going on around Akveo products and community.<br />
|
||||
The administrator processes data following <a class="active" href="https://www.akveo.com/privacy-policy?utm_source=ngx_admin_landing&utm_medium=contact_section" target="_blank">the Privacy Policy</a>. I understand that I can opt out at any time
|
||||
</p>
|
||||
</nb-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="separator">
|
||||
<div>or</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-us-container">
|
||||
<a class="contact-us"
|
||||
href="https://www.akveo.com/contacts?utm_source=ngx_admin_landing&utm_medium=contact_section">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
/**
|
||||
* @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() {
|
||||
display: block;
|
||||
padding-top: 5.625rem;
|
||||
padding-bottom: 7.5rem;
|
||||
|
||||
.description {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
width: 40%;
|
||||
margin: 1.375rem auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sending-block {
|
||||
max-width: 33.5rem;
|
||||
margin: 3rem auto 0;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.email {
|
||||
width: 75%;
|
||||
font-size: nb-theme(font-size-sm);
|
||||
padding: 1.125rem 0 1rem 1rem;
|
||||
border: none;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
border-radius: 0.25rem 0 0 0.25rem;
|
||||
|
||||
&.invalid {
|
||||
box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #434a59;
|
||||
opacity: 0.24;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-input {
|
||||
width: 25%;
|
||||
padding: 1rem 0;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
background-color: nb-theme(color-active-bg);
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-block {
|
||||
display: flex;
|
||||
margin-top: 1.25rem;
|
||||
|
||||
::ng-deep nb-checkbox {
|
||||
.customised-control {
|
||||
padding: 0.125rem 0.125rem 0 0;
|
||||
}
|
||||
|
||||
.customised-control-indicator {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-sm);
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-top: 2.875rem;
|
||||
border-top: 0.125rem solid #dde1eb;
|
||||
color: #8994a3;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
|
||||
div {
|
||||
$width: 1.375rem;
|
||||
$block-or-padding: 1.375rem;
|
||||
|
||||
font-size: nb-theme(font-size-sm);
|
||||
padding: 0 $block-or-padding;
|
||||
position: absolute;
|
||||
left: calc(50% - #{$block-or-padding} - #{$width} / 2);
|
||||
top: -0.625rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-us-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-us {
|
||||
display: inline-block;
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
margin-top: 3.625rem;
|
||||
color: nb-theme(color-active-bg);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.description {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
padding: 2.125rem 1rem;
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
font-size: nb-theme(font-size);
|
||||
}
|
||||
|
||||
.sending-block {
|
||||
margin-top: 2.375rem;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
.email {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submit-input {
|
||||
width: 100%;
|
||||
border-radius: 0.25rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-block {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contact-us {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-contact-section',
|
||||
templateUrl: './contact-section.component.html',
|
||||
styleUrls: ['./contact-section.component.scss'],
|
||||
})
|
||||
export class ContactSectionComponent {
|
||||
|
||||
@ViewChild('contactForm', { static: false }) contactForm: HTMLFormElement;
|
||||
@ViewChild('emailInput', { static: false }) emailInput: ElementRef;
|
||||
|
||||
isAgree = false;
|
||||
invalid = false;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
submitForm() {
|
||||
if (!this.emailInput.nativeElement.value) {
|
||||
this.invalid = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.contactForm.nativeElement.submit();
|
||||
this.invalid = false;
|
||||
this.emailInput.nativeElement.value = '';
|
||||
}
|
||||
|
||||
get disabledControl() {
|
||||
return this.isAgree ? null : 'disabled';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<div class="descriptions" *ngFor="let item of descriptions">
|
||||
<div class="icons-block">
|
||||
<i [innerHTML]="item.icon | eva: { width: 48, height: 48, fill: '#00db92' }"></i>
|
||||
</div>
|
||||
<div class="title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<p class="description">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
/**
|
||||
* @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;
|
||||
|
||||
width: calc(#{$content-width} - #{$left-right-offset} * 2);
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-bottom: 5rem;
|
||||
|
||||
.descriptions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 1.375rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-block {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 6.25rem;
|
||||
height: 6.25rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 1.5rem;
|
||||
margin-top: 2.75rem;
|
||||
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
margin-top: 1.25rem;
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
.descriptions {
|
||||
margin-left: 0;
|
||||
padding: 0 1rem;
|
||||
flex: auto;
|
||||
width: 50%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
padding-top: 4.125rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
||||
.descriptions {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
margin: 1.5rem 0 0;
|
||||
|
||||
&:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icons-block {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
::ng-deep svg {
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
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 {
|
||||
@Input() descriptions: Descriptions[];
|
||||
}
|
||||
24
docs/app/pages/home/landing-home-routing.module.ts
Normal file
24
docs/app/pages/home/landing-home-routing.module.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { LandingHomeComponent } from './landing-home.component';
|
||||
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: LandingHomeComponent,
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class LandingHomeRoutingModule {
|
||||
}
|
||||
13
docs/app/pages/home/landing-home.component.html
Normal file
13
docs/app/pages/home/landing-home.component.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<nb-layout>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-landing-header></ngx-landing-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-layout-column>
|
||||
<ngx-landing-sections-container></ngx-landing-sections-container>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-footer class="footer" fixed>
|
||||
<ngx-landing-footer></ngx-landing-footer>
|
||||
</nb-layout-footer>
|
||||
</nb-layout>
|
||||
80
docs/app/pages/home/landing-home.component.scss
Normal file
80
docs/app/pages/home/landing-home.component.scss
Normal file
|
|
@ -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 '../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
$content-width: nb-theme(content-width);
|
||||
|
||||
.contact-us {
|
||||
padding: 5rem 1rem;
|
||||
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
nb-layout-header {
|
||||
background-color: nb-theme(header-background-color);
|
||||
}
|
||||
|
||||
::ng-deep nb-layout .main-container {
|
||||
padding-top: 3rem;
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep nb-layout .layout-container .columns {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
::ng-deep nb-layout-header {
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
background: nb-theme(header-bg);
|
||||
nav {
|
||||
max-width: calc(#{$content-width} - 8.125rem * 2);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .layout .layout-container .content nb-layout-footer.footer {
|
||||
width: 100%;
|
||||
background-color: nb-theme(color-white);
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
|
||||
nav {
|
||||
max-width: $content-width;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
nb-layout-header ::ng-deep nav {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-layout-header ::ng-deep nav {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-layout-header ::ng-deep nav {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
height: 3.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
20
docs/app/pages/home/landing-home.component.ts
Normal file
20
docs/app/pages/home/landing-home.component.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* @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';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-home',
|
||||
templateUrl: './landing-home.component.html',
|
||||
styleUrls: ['./landing-home.component.scss'],
|
||||
})
|
||||
export class LandingHomeComponent {
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
this.themeService.changeTheme('ngx-landing');
|
||||
}
|
||||
}
|
||||
59
docs/app/pages/home/landing-home.module.ts
Normal file
59
docs/app/pages/home/landing-home.module.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
// modules
|
||||
import { NgxLandingThemeModule } from '../../@theme/theme.module';
|
||||
import { SwiperModule } from 'ngx-swiper-wrapper';
|
||||
// modules
|
||||
|
||||
// components
|
||||
import { LandingHomeComponent } from './landing-home.component';
|
||||
import { MainInfoSectionComponent } from './main-info-section/main-info-section.component';
|
||||
import { DescriptionSectionComponent } from './description-section/description-section.component';
|
||||
import { ReasonSectionComponent } from './reason-section/reason-section.component';
|
||||
import { ThemeSectionComponent } from './theme-section/theme-section.component';
|
||||
import { ReviewsSectionComponent } from './reviews-section/reviews-section.component';
|
||||
import { SocialSectionComponent } from './social-section/social-section.component';
|
||||
import { ContactSectionComponent } from './contact-section/contact-section.component';
|
||||
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';
|
||||
import { LicensePipe } from './backend-bundles-section/license.pipe';
|
||||
import { BackgroundImagePipe } from './backend-bundles-section/background-image.pipe';
|
||||
// components
|
||||
|
||||
const PIPES = [LicensePipe, BackgroundImagePipe];
|
||||
|
||||
const COMPONENTS = [
|
||||
LandingHomeComponent,
|
||||
NgxLandingSectionsContainerComponent,
|
||||
MainInfoSectionComponent,
|
||||
DescriptionSectionComponent,
|
||||
ReasonSectionComponent,
|
||||
ThemeSectionComponent,
|
||||
ReviewsSectionComponent,
|
||||
OurProjectsSectionComponent,
|
||||
SocialSectionComponent,
|
||||
ContactSectionComponent,
|
||||
BackendBundlesSectionComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
...COMPONENTS,
|
||||
...PIPES,
|
||||
],
|
||||
imports: [
|
||||
NgxLandingThemeModule,
|
||||
SwiperModule,
|
||||
LandingHomeRoutingModule,
|
||||
],
|
||||
})
|
||||
export class LandingHomeModule {
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="main-img-container">
|
||||
<a href="http://akveo.com/ngx-admin/?utm_source=ngx_admin_landing&utm_medium=main_section_image"
|
||||
target="_blank"
|
||||
class="hero-image-link">
|
||||
<img *ngIf="breakpoint.width >= breakpoints.md"
|
||||
class="main-img"
|
||||
defaultImage="assets/img/default.png"
|
||||
lazyLoad="assets/img/ngx-admin.png"/>
|
||||
</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://akveo.github.io/nebular?utm_source=ngx_admin_landing&utm_medium=main_section" target="_blank">Nebular</a> with
|
||||
<a href="https://eva.design?utm_source=ngx_admin_landing&utm_medium=main_section">Eva Design System</a> support.
|
||||
Free and Open Source for personal and commercial purposes.
|
||||
</p>
|
||||
<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>
|
||||
<div class="badges">
|
||||
<iframe class="stars"
|
||||
src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
|
||||
frameborder="0"
|
||||
width="170px"
|
||||
scrolling="0">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="btn btn-installation-guidelines"
|
||||
[routerLink]="'/docs/getting-started/installation-guidelines'">Installation Docs</a>
|
||||
<a class="btn btn-demo"
|
||||
href="http://akveo.com/ngx-admin?utm_source=ngx_admin_landing&utm_medium=main_section"
|
||||
target="_blank">Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
/**
|
||||
* @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() {
|
||||
$color-active: nb-theme(color-active-fg);
|
||||
|
||||
display: flex;
|
||||
padding: 3.375rem 0 0;
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.description {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-image-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-top: 84%;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(0, #fafafa, transparent);
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.main-img-container {
|
||||
min-width: 60.625rem;
|
||||
min-height: 47.875rem;
|
||||
|
||||
.main-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
width: 44%;
|
||||
margin: 4.625rem 9% 0 6%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Helvetica Neue Bold', sans-serif;
|
||||
font-size: 4rem;
|
||||
color: $color-active;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
line-height: 1.5;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
color: nb-theme(color-active-fg);;
|
||||
}
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
margin-top: 2.75rem;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.stars {
|
||||
width: 6.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
padding: 1.125rem 1em;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.btn-demo {
|
||||
margin-left: 1em;
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
color: #ffffff;
|
||||
background-color: nb-theme(color-active-fg);
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-btn);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
.main-img-container {
|
||||
min-width: 50.625rem;
|
||||
min-height: 47.875rem;
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
width: 100%;
|
||||
margin: 4.625rem 5.875rem 0 2.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.main-img-container {
|
||||
min-width: 39rem;
|
||||
min-height: 36.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-bottom: 6.25rem;
|
||||
|
||||
.main-img-container {
|
||||
min-height: 28.75rem;
|
||||
min-width: 31rem;
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-demo {
|
||||
padding-left: 3.25rem;
|
||||
padding-right: 3.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
.description {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.main-img-container {
|
||||
min-height: 21.875rem;
|
||||
min-width: 23rem;
|
||||
width: 75rem;
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 0.7rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 1.75rem;
|
||||
flex-direction: column;
|
||||
|
||||
.main-inf {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-main-img-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: nb-theme(font-size);
|
||||
text-align: justify;
|
||||
margin: 1.75rem 1rem 0;
|
||||
}
|
||||
|
||||
.main-img-container {
|
||||
margin: 1.375rem 0 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.badges {
|
||||
margin-top: 2.375rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
a {
|
||||
display: block;
|
||||
margin: 0 1rem;
|
||||
|
||||
&.btn-demo {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/**
|
||||
* @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 { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-main-info',
|
||||
templateUrl: './main-info-section.component.html',
|
||||
styleUrls: ['./main-info-section.component.scss'],
|
||||
})
|
||||
export class MainInfoSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<ngx-landing-section-title>
|
||||
More from Akveo
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<ul class="projects">
|
||||
<li class="project">
|
||||
<div class="project-img">
|
||||
<img class="lazy-load-image"
|
||||
defaultImage="assets/img/default.png"
|
||||
lazyLoad="assets/img/nebular.png"
|
||||
alt="Nebular" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">Nebular</div>
|
||||
<div class="description">
|
||||
Nebular is a great toolkit if you build Rich UI web applications based on Angular. Complete with a set of native Angular components, themeable components, authentication and security layers that are easily configurable to your API. Nebular offers a world of possibilities
|
||||
</div>
|
||||
<a class="btn" href="https://akveo.github.io/nebular?utm_source=ngx_admin_landing&utm_medium=more_from_akveo_section" target="_blank">Learn more</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project">
|
||||
<div class="project-img">
|
||||
<img class="lazy-load-image"
|
||||
defaultImage="assets/img/default.png"
|
||||
lazyLoad="assets/img/eva-icons.png"
|
||||
alt="Eva Icons" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">Eva Icons</div>
|
||||
<div class="description">
|
||||
Eva Icons is a pack of more than 480 beautifully crafted Open Source icons. Download for desktop and use them in your creations for Web, iOS, and Android. The icons are available in several formats: PNG, SVG, font, Sketch
|
||||
</div>
|
||||
<a class="btn" href="https://akveo.github.io/eva-icons?utm_source=ngx_admin_landing&utm_medium=more_from_akveo_section" target="_blank">Learn more</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
/**
|
||||
* @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() {
|
||||
$our-projects-section-offset: 7.125rem;
|
||||
|
||||
display: block;
|
||||
padding-top: 5.125rem;
|
||||
|
||||
.project-img {
|
||||
min-width: 39.75rem;
|
||||
min-height: 20.375rem;
|
||||
max-height: 20.375rem;
|
||||
|
||||
.lazy-load-image {
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
&.ng-failed-lazyloaded {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: calc(100% - #{$our-projects-section-offset} * 2);
|
||||
margin: 0 auto;
|
||||
padding: 4rem 0 3.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-top: 5.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-left: 3.75rem;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.project-img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Helvetica Neue Bold', sans-serif;
|
||||
color: #000000;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
margin-top: 1.125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
background-color: nb-theme(color-active-bg);
|
||||
border-radius: 3px;
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
margin-top: 2.625rem;
|
||||
padding: 1rem 0.875rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
ul {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1.375rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.project-img {
|
||||
min-width: 33rem;
|
||||
min-height: 16.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.project-img {
|
||||
min-width: 25rem;
|
||||
min-height: auto;
|
||||
max-height: 17rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 2.5rem;
|
||||
|
||||
.project-img {
|
||||
max-height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 3.625rem;
|
||||
flex-direction: column;
|
||||
|
||||
& > div {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: nb-theme(font-size);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 1rem 0.875rem;
|
||||
margin-top: 2.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* @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-landing-our-projects-section',
|
||||
templateUrl: './our-projects-section.component.html',
|
||||
styleUrls: ['./our-projects-section.component.scss'],
|
||||
})
|
||||
export class OurProjectsSectionComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<ngx-landing-section-title>
|
||||
Why ngx-admin?
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<ul class="reasons">
|
||||
<li class="reason">
|
||||
<div class="number">1</div>
|
||||
<div class="description">
|
||||
Save more than $33,000 using ngx-admin.
|
||||
According to our research ngx-admin optimizes 480 hours of development time. Taking the average hourly rate of a <a class="active" href="https://www.codementor.io/freelance-rates/front-end-developers" target="_blank">front-end engineer</a> in the US – $70
|
||||
</div>
|
||||
</li>
|
||||
<li class="reason">
|
||||
<div class="number">2</div>
|
||||
<div class="description">
|
||||
Create a custom experience by working with one of 3 themes or edit just a few custom variables. Need help? Check <a class="active" href="https://akveo.github.io/ngx-admin/docs/guides/theme-system">out our article</a>, where we describe how you can create a different look in just 2 minutes
|
||||
</div>
|
||||
</li>
|
||||
<li class="reason">
|
||||
<div class="number">3</div>
|
||||
<div class="description">
|
||||
It’s completely FREE and MIT licensed.
|
||||
You don’t have to worry about the legal stuff, ngx-admin is free for personal and commercial purposes, so you can use it to build any product
|
||||
</div>
|
||||
</li>
|
||||
<li class="reason">
|
||||
<div class="number">4</div>
|
||||
<div class="description">
|
||||
<span class="highlight">Do you need more?</span> We can customize! <br/>
|
||||
Visit our <a class="active" href="https://www.akveo.com?utm_source=ngx_admin_landing&utm_medium=reason_section" target="_blank">homepage</a> or simply leave us a note at <a class="active" href="mailto:contact@akveo.com">contact@akveo.com</a>. We’re available for hire and can create custom solutions just for you
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
111
docs/app/pages/home/reason-section/reason-section.component.scss
Normal file
111
docs/app/pages/home/reason-section/reason-section.component.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/**
|
||||
* @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() {
|
||||
$reasons-section-offset: 10.625rem;
|
||||
|
||||
display: block;
|
||||
padding: 5.25rem 0;
|
||||
|
||||
.reasons {
|
||||
width: calc(100% - #{$reasons-section-offset} * 2);
|
||||
margin: 0 auto;
|
||||
margin-top: -1.375rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
|
||||
.reason {
|
||||
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) {
|
||||
.reasons {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
|
||||
.number {
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 2.625rem;
|
||||
padding-bottom: 0;
|
||||
|
||||
.reasons {
|
||||
flex-direction: column;
|
||||
|
||||
.reason {
|
||||
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,16 @@
|
|||
/**
|
||||
* @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-landing-reason-section',
|
||||
templateUrl: './reason-section.component.html',
|
||||
styleUrls: ['./reason-section.component.scss'],
|
||||
})
|
||||
export class ReasonSectionComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<ngx-landing-section-title>
|
||||
What ngx-lovers are saying?
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<div class="carousel-container">
|
||||
<div class="swiper-container reviews" [swiper]="swiperConfig">
|
||||
<div class="swiper-wrapper">
|
||||
<div *ngFor="let review of reviews" class="review-card swiper-slide">
|
||||
<div class="header-card">
|
||||
<div class="social-icon">
|
||||
<i [innerHTML]="review.socialIcon | eva: { width: 26, height: 26, fill: '#3b5998' }"></i>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img alt="Reviewer Avatar"
|
||||
data-src="{{ review.avatar }}"
|
||||
class="swiper-lazy"/>
|
||||
</div>
|
||||
<div class="personal-info">
|
||||
<div class="name">{{ review.firstName }}</div>
|
||||
<div class="surname">{{ review.lastName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-card">
|
||||
{{ review.review }}
|
||||
</div>
|
||||
<div class="footer-card">
|
||||
<a class="go-to-button"
|
||||
href="{{ review.link }}"
|
||||
target="_blank">
|
||||
Go to comment
|
||||
<i [innerHTML]="'arrow-ios-forward' | eva: { width: 24, height: 24, fill: '#e5e5e5' }"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<div class="swiper-button-prev">
|
||||
<i [innerHTML]="'arrow-ios-back' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<i [innerHTML]="'arrow-ios-forward' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
/**
|
||||
* @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() {
|
||||
display: block;
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 7.875rem;
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.reviews {
|
||||
max-width: 55.125rem;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
margin-top: 4.625rem;
|
||||
}
|
||||
|
||||
.review-card {
|
||||
background-color: #ffffff;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-top: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 3.125rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
position: absolute;
|
||||
right: 1.375rem;
|
||||
top: 1.875rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
max-width: 3.375rem;
|
||||
height: 3.375rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.personal-info {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
margin-left: 1.25rem;
|
||||
margin-top: 0.5rem;
|
||||
color: #000000;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.body-card {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
color: #000000;
|
||||
padding: 0 1rem;
|
||||
margin-top: 1.75rem;
|
||||
line-height: 1.8;
|
||||
height: 10.375rem;
|
||||
}
|
||||
|
||||
.footer-card {
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
}
|
||||
|
||||
.go-to-button {
|
||||
display: block;
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
color: nb-theme(color-active-fg);
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
right: 1.375rem;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: none;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
top: 9rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-btn);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 8.125rem;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 8.125rem;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
top: 110%;
|
||||
|
||||
::ng-deep span {
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
opacity: 0.08;
|
||||
background-color: #000000;
|
||||
|
||||
&.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: nb-theme(color-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.swiper-button-prev {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4.375rem;
|
||||
|
||||
.reviews {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
top: 108%;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/**
|
||||
* @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 { SwiperConfigInterface } from 'ngx-swiper-wrapper';
|
||||
import { NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { Review, ReviewsService } from '../../../@core/data/service/reviews.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-reviews-section',
|
||||
templateUrl: './reviews-section.component.html',
|
||||
styleUrls: ['./reviews-section.component.scss'],
|
||||
})
|
||||
export class ReviewsSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
private desktopSwiperConfig: SwiperConfigInterface = {
|
||||
slidesPerView: 3,
|
||||
keyboard: true,
|
||||
navigation: true,
|
||||
};
|
||||
|
||||
private tabletSwiperConfig: SwiperConfigInterface = {
|
||||
...this.desktopSwiperConfig,
|
||||
slidesPerView: 2,
|
||||
};
|
||||
|
||||
private mobileSwiperConfig: SwiperConfigInterface = {
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: true,
|
||||
keyboard: false,
|
||||
navigation: false,
|
||||
};
|
||||
|
||||
swiperConfig: SwiperConfigInterface = {
|
||||
direction: 'horizontal',
|
||||
spaceBetween: 24,
|
||||
mousewheel: false,
|
||||
lazy: true,
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
hideOnClick: false,
|
||||
},
|
||||
};
|
||||
|
||||
breakpoints: any;
|
||||
reviews: Review[];
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService,
|
||||
private reviewsService: ReviewsService) {
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.changeSwiperConfig(newValue.width);
|
||||
});
|
||||
|
||||
this.reviewsService.getReviews()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((reviews) => this.reviews = reviews);
|
||||
}
|
||||
|
||||
changeSwiperConfig(currentWidth: number): void {
|
||||
if (this.isMobile(currentWidth)) {
|
||||
this.swiperConfig = {
|
||||
...this.swiperConfig,
|
||||
...this.mobileSwiperConfig,
|
||||
};
|
||||
} else {
|
||||
const desktopOrTabletConfig = this.isTablet(currentWidth) ? this.tabletSwiperConfig : this.desktopSwiperConfig;
|
||||
|
||||
this.swiperConfig = {
|
||||
...this.swiperConfig,
|
||||
...desktopOrTabletConfig,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
private isMobile(currentWidth: number): boolean {
|
||||
return currentWidth <= this.breakpoints.is;
|
||||
}
|
||||
|
||||
private isTablet(currentWidth: number): boolean {
|
||||
return currentWidth <= this.breakpoints.sm;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="gray-section">
|
||||
<ngx-landing-main-info></ngx-landing-main-info>
|
||||
</div>
|
||||
|
||||
<ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async" ></ngx-landing-description-section>
|
||||
|
||||
<ngx-landing-theme-section></ngx-landing-theme-section>
|
||||
|
||||
<div class="gray-section">
|
||||
<ngx-landing-reason-section></ngx-landing-reason-section>
|
||||
|
||||
<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">
|
||||
<ngx-landing-social-section></ngx-landing-social-section>
|
||||
</div>
|
||||
|
||||
<ngx-landing-contact-section></ngx-landing-contact-section>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* @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);
|
||||
|
||||
.gray-section {
|
||||
background-color: nb-theme(gray-section-bg);
|
||||
}
|
||||
|
||||
ngx-landing-description-section,
|
||||
ngx-landing-reason-section,
|
||||
ngx-landing-reviews-section,
|
||||
ngx-landing-our-projects-section,
|
||||
ngx-landing-social-section,
|
||||
ngx-landing-contact-section,
|
||||
ngx-backend-bundles-section {
|
||||
max-width: $content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ngx-landing-description-section {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-landing-main-info,
|
||||
ngx-landing-description-section,
|
||||
ngx-landing-theme-section,
|
||||
ngx-landing-reason-section,
|
||||
ngx-landing-reviews-section,
|
||||
ngx-landing-our-projects-section,
|
||||
ngx-landing-social-section,
|
||||
ngx-landing-contact-section {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @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';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-sections-container',
|
||||
templateUrl: './ngx-landing-sections-container.component.html',
|
||||
styleUrls: ['./ngx-landing-sections-container.component.scss'],
|
||||
})
|
||||
export class NgxLandingSectionsContainerComponent {
|
||||
|
||||
descriptions: Observable<Descriptions[]> = this.descriptionsService.getDescriptions();
|
||||
|
||||
constructor(private descriptionsService: DescriptionsService) { }
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<ngx-landing-section-title>
|
||||
Help us make our products better for you
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<p>
|
||||
You can support us by creating pull requests, submitting bugs, and suggesting awesome new features you’d like to see
|
||||
</p>
|
||||
|
||||
<a class="social-button github"
|
||||
href="https://github.com/akveo/ngx-admin"
|
||||
target="_blank">
|
||||
<i [innerHTML]="'github' | eva: { width: 42, height: 42 }"></i>
|
||||
<div class="info">
|
||||
<div class="appeal">Star our repo</div>
|
||||
<div class="title">GitHub</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="sub-title">
|
||||
Here's what else you can do:
|
||||
</div>
|
||||
|
||||
<div class="buttons-group">
|
||||
<a class="social-button facebook"
|
||||
href="https://www.facebook.com/akveo"
|
||||
target="_blank">
|
||||
<i [innerHTML]="'facebook' | eva: { width: 44, height: 44, fill: '#3b5998' }"></i>
|
||||
<div class="info">
|
||||
<div class="appeal">
|
||||
Like us
|
||||
</div>
|
||||
<div class="title">
|
||||
Facebook
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="social-button linkedin"
|
||||
href="https://www.linkedin.com/company/akveo"
|
||||
target="_blank">
|
||||
<i [innerHTML]="'linkedin' | eva: { width: 42, height: 42, fill: '#0077b5' }"></i>
|
||||
<div class="info">
|
||||
<div class="appeal">
|
||||
Join us
|
||||
</div>
|
||||
<div class="title">
|
||||
Linkedin
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="social-button twitter"
|
||||
href="https://twitter.com/akveo_inc"
|
||||
target="_blank">
|
||||
<i [innerHTML]="'twitter' | eva: { width: 42, height: 42, fill: '#08a0e9' }"></i>
|
||||
<div class="info">
|
||||
<div class="appeal">
|
||||
Follow us
|
||||
</div>
|
||||
<div class="title">
|
||||
Twitter
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
182
docs/app/pages/home/social-section/social-section.component.scss
Normal file
182
docs/app/pages/home/social-section/social-section.component.scss
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
/**
|
||||
* @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() {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding-top: 4.75rem;
|
||||
padding-bottom: 5.125rem;
|
||||
|
||||
.social-button {
|
||||
width: 19rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
background-color: nb-theme(color-white);
|
||||
padding-left: 2rem;
|
||||
border-radius: 0.25rem;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-btn);
|
||||
}
|
||||
|
||||
> i {
|
||||
width: 2.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 1.625rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.appeal {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
width: 36%;
|
||||
margin: 1.25rem auto 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.github {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem 5rem 1.5rem 1.625rem;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: #000000;
|
||||
margin-top: 2.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.buttons-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 2.5rem;
|
||||
|
||||
.social-button {
|
||||
margin-left: 1.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.facebook {
|
||||
padding: 1.5rem 5rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.625rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.linkedin {
|
||||
padding: 1.5rem 5rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter {
|
||||
padding: 1.5rem 5rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
p {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
//.social-button {
|
||||
// width: auto;
|
||||
//}
|
||||
|
||||
.github {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.facebook {
|
||||
width: 13rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.linkedin {
|
||||
width: 13rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
width: 13rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: 4.25rem 1rem 2.125rem;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
font-size: nb-theme(font-size);
|
||||
}
|
||||
|
||||
.social-button {
|
||||
margin-top: 2rem;
|
||||
margin-left: 0;
|
||||
padding: 1.25rem 0 1.25rem 1.875rem;
|
||||
width: 100%;
|
||||
|
||||
.info {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.buttons-group {
|
||||
margin-top: 1.875rem;
|
||||
flex-direction: column;
|
||||
|
||||
.social-button {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* @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-landing-social-section',
|
||||
templateUrl: './social-section.component.html',
|
||||
styleUrls: ['./social-section.component.scss'],
|
||||
})
|
||||
export class SocialSectionComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<ngx-landing-section-title>
|
||||
Multiple theme
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<div class="carousel-container">
|
||||
<div class="swiper-container reviews"
|
||||
[swiper]="swiperConfig"
|
||||
[(index)]="sliderIndex">
|
||||
<div class="swiper-wrapper">
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/light-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Light Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
lazyLoad="assets/img/light-theme.png"
|
||||
defaultImage="assets/img/default.png"
|
||||
alt="Light Theme" />
|
||||
</a>
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/dark-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Dark Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
lazyLoad="assets/img/dark-theme.png"
|
||||
defaultImage="assets/img/default.png"
|
||||
alt="Dark Theme" />
|
||||
</a>
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/cosmic-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Cosmic Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
lazyLoad="assets/img/cosmic-theme.png"
|
||||
defaultImage="assets/img/default.png"
|
||||
alt="Cosmic Theme" />
|
||||
</a>
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/corporate-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Corporate Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
src="assets/img/corporate-theme.png"
|
||||
alt="Corporate Theme"
|
||||
class="ng-lazyloaded"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<div class="swiper-button-prev">
|
||||
<i [innerHTML]="'arrow-ios-back' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<i [innerHTML]="'arrow-ios-forward' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-demo"
|
||||
href="http://akveo.com/ngx-admin?utm_source=ngx_admin_landing&utm_medium=theme_section"
|
||||
target="_blank">View demo</a>
|
||||
230
docs/app/pages/home/theme-section/theme-section.component.scss
Normal file
230
docs/app/pages/home/theme-section/theme-section.component.scss
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/**
|
||||
* @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() {
|
||||
|
||||
display: block;
|
||||
padding-top: 6.25rem;
|
||||
padding-bottom: 5.125rem;
|
||||
text-align: center;
|
||||
|
||||
.image-container {
|
||||
width: 75.875rem;
|
||||
height: 46.625rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
padding-top: 4.125rem;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: none;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
top: 22.625rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-btn);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 18%;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 18%;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
left: 1.5rem;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
|
||||
::ng-deep .swiper-pagination-bullet {
|
||||
height: 0.25rem;
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
color: nb-theme(color-fg);
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
opacity: 0.56;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eff1f3;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 3.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
color: nb-theme(color-active-fg);
|
||||
|
||||
&::after {
|
||||
border-radius: 0.375rem;
|
||||
background: nb-theme(color-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.btn-demo {
|
||||
margin-top: 0.375rem;
|
||||
padding: 1.125rem 6.25rem;
|
||||
color: #ffffff;
|
||||
background-color: nb-theme(color-active-fg);
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.swiper-button-prev {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
.image-container {
|
||||
width: 64.875rem;
|
||||
height: 39.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-top: 0;
|
||||
|
||||
.image-container {
|
||||
width: 46.875rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
img {
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
padding-top: 2.375rem;
|
||||
padding-bottom: 1.875rem;
|
||||
|
||||
.carousel-container {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
max-width: 19.75rem;
|
||||
max-height: 12rem;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
left: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
::ng-deep .swiper-pagination-bullet {
|
||||
flex: 1;
|
||||
font-size: nb-theme(font-size-sm);
|
||||
|
||||
span {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
&.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
color: nb-theme(color-active-fg);
|
||||
|
||||
&::after {
|
||||
border-radius: 0.375rem;
|
||||
background: nb-theme(color-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
docs/app/pages/home/theme-section/theme-section.component.ts
Normal file
100
docs/app/pages/home/theme-section/theme-section.component.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/**
|
||||
* @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 { SwiperConfigInterface } from 'ngx-swiper-wrapper';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import {
|
||||
NbMediaBreakpoint,
|
||||
NbMediaBreakpointsService,
|
||||
NbThemeService,
|
||||
} from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-theme-section',
|
||||
templateUrl: './theme-section.component.html',
|
||||
styleUrls: ['./theme-section.component.scss'],
|
||||
})
|
||||
export class ThemeSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
private themes: string[] = [
|
||||
'Light',
|
||||
'Dark',
|
||||
'Cosmic',
|
||||
'Corporate',
|
||||
];
|
||||
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
sliderIndex: number = 1;
|
||||
initialSwiperConfig: SwiperConfigInterface = {
|
||||
direction: 'horizontal',
|
||||
spaceBetween: 200,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: true,
|
||||
keyboard: true,
|
||||
navigation: true,
|
||||
|
||||
effect: 'coverflow',
|
||||
grabCursor: true,
|
||||
coverflowEffect: {
|
||||
rotate: 0,
|
||||
stretch: 0,
|
||||
depth: 500,
|
||||
modifier: 1,
|
||||
slideShadows : false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
hideOnClick: false,
|
||||
renderBullet: (index, className) => {
|
||||
return `
|
||||
<span class="${className}">
|
||||
<span>
|
||||
${this.themes[index]}
|
||||
</span>
|
||||
</span>`;
|
||||
},
|
||||
},
|
||||
};
|
||||
swiperConfig: SwiperConfigInterface = {
|
||||
...this.initialSwiperConfig,
|
||||
};
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
|
||||
this.changeSwiperConfig();
|
||||
});
|
||||
}
|
||||
|
||||
changeSwiperConfig(): void {
|
||||
if (this.isMobile) {
|
||||
this.swiperConfig = {
|
||||
...this.swiperConfig,
|
||||
preloadImages: false,
|
||||
lazy: true,
|
||||
};
|
||||
} else {
|
||||
this.swiperConfig = this.initialSwiperConfig;
|
||||
}
|
||||
}
|
||||
|
||||
get isMobile(): boolean {
|
||||
return this.breakpoint.width <= this.breakpoints.sm;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue