mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-21 18:00:13 +01:00
feat(demo): add landing page with docs (#1951)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
67c9587b87
commit
43cc3a1556
190 changed files with 15425 additions and 21 deletions
|
|
@ -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;
|
||||
|
||||
/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') contactForm: HTMLFormElement;
|
||||
@ViewChild('emailInput') 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,107 @@
|
|||
/**
|
||||
* @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;
|
||||
top: -3.25rem;
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/deep/ svg {
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-description-section',
|
||||
templateUrl: './description-section.component.html',
|
||||
styleUrls: ['./description-section.component.scss'],
|
||||
})
|
||||
export class DescriptionSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
descriptions: Descriptions[];
|
||||
|
||||
constructor(private descriptionsService: DescriptionsService) {
|
||||
this.descriptionsService.getDescriptions()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((descriptions) => this.descriptions = descriptions);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
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 {
|
||||
}
|
||||
14
docs/app/pages/home/landing-home.component.html
Normal file
14
docs/app/pages/home/landing-home.component.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<nb-layout>
|
||||
<nb-layout-header>
|
||||
<ngx-landing-header></ngx-landing-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-layout-column>
|
||||
<ngx-landing-sections-container></ngx-landing-sections-container>
|
||||
<ngx-landing-ribbon></ngx-landing-ribbon>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-footer class="footer" fixed>
|
||||
<ngx-landing-footer></ngx-landing-footer>
|
||||
</nb-layout-footer>
|
||||
</nb-layout>
|
||||
76
docs/app/pages/home/landing-home.component.scss
Normal file
76
docs/app/pages/home/landing-home.component.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* @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;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ nb-layout .main-container {
|
||||
padding-top: 3rem;
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ nb-layout .layout-container .columns {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/deep/ nb-layout-header {
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
|
||||
nav {
|
||||
max-width: calc(#{$content-width} - 8.125rem * 2);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/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 /deep/ nav {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-layout-header /deep/ nav {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-layout-header /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');
|
||||
}
|
||||
}
|
||||
54
docs/app/pages/home/landing-home.module.ts
Normal file
54
docs/app/pages/home/landing-home.module.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* @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 { RibbonComponent } from './ribbon/ribbon.component';
|
||||
// components
|
||||
|
||||
const COMPONENTS = [
|
||||
LandingHomeComponent,
|
||||
NgxLandingSectionsContainerComponent,
|
||||
MainInfoSectionComponent,
|
||||
DescriptionSectionComponent,
|
||||
ReasonSectionComponent,
|
||||
ThemeSectionComponent,
|
||||
ReviewsSectionComponent,
|
||||
OurProjectsSectionComponent,
|
||||
SocialSectionComponent,
|
||||
ContactSectionComponent,
|
||||
RibbonComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
...COMPONENTS,
|
||||
],
|
||||
imports: [
|
||||
NgxLandingThemeModule,
|
||||
SwiperModule,
|
||||
LandingHomeRoutingModule,
|
||||
],
|
||||
})
|
||||
export class LandingHomeModule {
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<div class="main-img-container">
|
||||
<a href="http://akveo.com/ngx-admin/?utm_source=ngx_admin_landing&utm_medium=main_section_image"
|
||||
target="_blank">
|
||||
<img *ngIf="breakpoint.width >= breakpoints.md"
|
||||
class="main-img"
|
||||
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 7+</strong>, Bootstrap 4+ and
|
||||
<a href="https://akveo.github.io/nebular/?utm_source=ngx_admin_landing&utm_medium=main_section" target="_blank">Nebular</a>.
|
||||
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,237 @@
|
|||
/**
|
||||
* @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;
|
||||
|
||||
.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(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: 100%;
|
||||
|
||||
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,147 @@
|
|||
/**
|
||||
* @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;
|
||||
|
||||
.lazy-load-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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%;
|
||||
|
||||
/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;
|
||||
}
|
||||
}
|
||||
8
docs/app/pages/home/ribbon/ribbon.component.html
Normal file
8
docs/app/pages/home/ribbon/ribbon.component.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="ribbon-dont-hunt">
|
||||
<svg style="padding-right:8px;" width="30" height="30" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20" fill="#DA552F"></path>
|
||||
<path d="M22.667 20H17v-6h5.667a3 3 0 0 1 0 6m0-10H13v20h4v-6h5.667a7 7 0 1 0 0-14" fill="#FFF"></path>
|
||||
</g>
|
||||
</svg>Please, don't hunt me!
|
||||
</div>
|
||||
19
docs/app/pages/home/ribbon/ribbon.component.scss
Normal file
19
docs/app/pages/home/ribbon/ribbon.component.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.ribbon-dont-hunt {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
width: 300px;
|
||||
color: rgb(218, 85, 47);
|
||||
background: rgb(255, 255, 255);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
transform: rotate(40deg);
|
||||
box-shadow: rgba(50, 69, 93, 0.15) 0px 4px 7px 0px, rgba(0, 0, 0, 0.08) 0px -1px 4px 0px;
|
||||
top: 55px;
|
||||
right: -60px;
|
||||
}
|
||||
15
docs/app/pages/home/ribbon/ribbon.component.ts
Normal file
15
docs/app/pages/home/ribbon/ribbon.component.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
* @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-ribbon',
|
||||
templateUrl: './ribbon.component.html',
|
||||
styleUrls: ['./ribbon.component.scss'],
|
||||
})
|
||||
export class RibbonComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<div class="gray-section">
|
||||
<ngx-landing-main-info></ngx-landing-main-info>
|
||||
</div>
|
||||
|
||||
<ngx-landing-description-section></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-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,41 @@
|
|||
/**
|
||||
* @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 {
|
||||
max-width: $content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@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,18 @@
|
|||
/**
|
||||
* @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-sections-container',
|
||||
templateUrl: './ngx-landing-sections-container.component.html',
|
||||
styleUrls: ['./ngx-landing-sections-container.component.scss'],
|
||||
})
|
||||
export class NgxLandingSectionsContainerComponent {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
166
docs/app/pages/home/social-section/social-section.component.scss
Normal file
166
docs/app/pages/home/social-section/social-section.component.scss
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
/**
|
||||
* @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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 2rem;
|
||||
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;
|
||||
margin-left: 1.25rem;
|
||||
padding-right: 6.5rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.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 6.625rem 1.25rem 1.375rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.linkedin {
|
||||
padding: 1.5rem 7rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter {
|
||||
padding: 1.5rem 8rem 1.25rem 1.625rem;
|
||||
|
||||
.info {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
p {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.facebook {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.linkedin {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: 4.25rem 1rem 2.125rem;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
font-size: nb-theme(font-size);
|
||||
}
|
||||
|
||||
.github {
|
||||
margin-top: 2rem;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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,55 @@
|
|||
<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">
|
||||
<div 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" />
|
||||
</div>
|
||||
<div 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" />
|
||||
</div>
|
||||
<div 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)"
|
||||
lazyLoad="assets/img/corporate-theme.png"
|
||||
defaultImage="assets/img/default.png"
|
||||
alt="Corporate Theme" />
|
||||
</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>
|
||||
|
||||
<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>
|
||||
229
docs/app/pages/home/theme-section/theme-section.component.scss
Normal file
229
docs/app/pages/home/theme-section/theme-section.component.scss
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
/**
|
||||
* @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;
|
||||
|
||||
/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%;
|
||||
|
||||
/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
99
docs/app/pages/home/theme-section/theme-section.component.ts
Normal file
99
docs/app/pages/home/theme-section/theme-section.component.ts
Normal file
|
|
@ -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 { 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',
|
||||
'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