mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-20 09:20:12 +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';
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue