mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
fix(landing): add contact section and fix landing image
This commit is contained in:
parent
64b38da5ae
commit
00f0e4a2ba
24 changed files with 351 additions and 19 deletions
6
docs/app/pages/home/contact-form/contact.component.html
Normal file
6
docs/app/pages/home/contact-form/contact.component.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="contact">
|
||||
<h1>Need customization?</h1>
|
||||
<p>Thinking of building something outstanding based on ngx-admin or just need some Angular/React experts?</p>
|
||||
<a class="btn btn-demo" href="https://hubs.ly/H0nJf_b0"
|
||||
target="_blank">Contact us</a>
|
||||
</div>
|
||||
53
docs/app/pages/home/contact-form/contact.component.scss
Normal file
53
docs/app/pages/home/contact-form/contact.component.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
$color-active: nb-theme(color-active-fg);
|
||||
|
||||
.contact {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Helvetica Neue Bold', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
color: $color-active;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'), sans-serif;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
13
docs/app/pages/home/contact-form/contact.component.ts
Normal file
13
docs/app/pages/home/contact-form/contact.component.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-contact-form',
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrls: ['./contact.component.scss'],
|
||||
})
|
||||
export class ContactFormComponent {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -31,6 +31,8 @@ import { LandingSharedModule } from '../../shared/landing-shared.module';
|
|||
import {MaterialFeaturesSectionComponent} from './material-features/material-features.component';
|
||||
import {DefaultAdminInfoComponent} from './main-info-section/default-admin-main-info/default-info.component';
|
||||
import {MaterialAdminInfoComponent} from './main-info-section/material-admin-main-info/material-info.component';
|
||||
import {ContactFormComponent} from './contact-form/contact.component';
|
||||
import {NbButtonModule} from '@nebular/theme';
|
||||
// components
|
||||
|
||||
const PIPES = [LicensePipe, BackgroundImagePipe];
|
||||
|
|
@ -51,6 +53,7 @@ const COMPONENTS = [
|
|||
ContactSectionComponent,
|
||||
BackendBundlesSectionComponent,
|
||||
MaterialFeaturesSectionComponent,
|
||||
ContactFormComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -63,6 +66,7 @@ const COMPONENTS = [
|
|||
SwiperModule,
|
||||
LandingHomeRoutingModule,
|
||||
LandingSharedModule,
|
||||
NbButtonModule,
|
||||
],
|
||||
providers: [
|
||||
...PIPES,
|
||||
|
|
|
|||
|
|
@ -9,20 +9,6 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="main-inf">
|
||||
<!-- <h1>ngx-admin</h1>-->
|
||||
<!-- <p class="description">-->
|
||||
<!-- The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and-->
|
||||
<!-- <a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with-->
|
||||
<!-- <a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.-->
|
||||
<!-- Free and Open Source for personal and commercial purposes.-->
|
||||
<!-- <br>-->
|
||||
<!-- <span class="bundles">-->
|
||||
<!-- Never start from scratch again.-->
|
||||
<!-- <a href="https://hubs.ly/H0n5NVz0" target="_blank">-->
|
||||
<!-- Integrate ready-made solution: ngx-admin with backend.-->
|
||||
<!-- </a>-->
|
||||
<!-- </span>-->
|
||||
<!-- </p>-->
|
||||
<ng-container *ngIf="forMaterialTheme === false">
|
||||
<ngx-default-admin-info></ngx-default-admin-info>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy, Input, OnInit } from '@angular/core';
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { Component, OnDestroy, Input } from '@angular/core';
|
||||
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
|
|
@ -34,7 +33,7 @@ export class MainInfoSectionComponent implements OnDestroy {
|
|||
}
|
||||
|
||||
public get imageUrl(): string {
|
||||
return this.forMaterialTheme
|
||||
return this.forMaterialTheme !== false
|
||||
? 'assets/img/ngx-admin-material.png'
|
||||
: '/assets/img/ngx-admin.png';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<ngx-landing-main-info material></ngx-landing-main-info>
|
||||
<ngx-material-features></ngx-material-features>
|
||||
<ngx-landing-theme-section material></ngx-landing-theme-section>
|
||||
<ngx-contact-form></ngx-contact-form>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-footer class="footer" fixed>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<a [href]="materialDarkDemoUrl" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/material-dark-theme.png"
|
||||
class="swiper-lazy"
|
||||
class="swiper-lazy"
|
||||
alt="Material Dark Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
lazyLoad="assets/img/material-dark-theme.png"
|
||||
|
|
|
|||
|
|
@ -13,4 +13,4 @@ const pipes = [CapitalizePipe, EvaIconsPipe];
|
|||
declarations: [...component, ...pipes],
|
||||
exports: [NbPopoverModule, ...component, ...pipes],
|
||||
})
|
||||
export class LandingSharedModule {}
|
||||
export class LandingSharedModule {}
|
||||
|
|
|
|||
BIN
docs/assets/img/ngx-admin-material-dark.png
Normal file
BIN
docs/assets/img/ngx-admin-material-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
Loading…
Add table
Add a link
Reference in a new issue