diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html new file mode 100644 index 00000000..a6003b82 --- /dev/null +++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html @@ -0,0 +1,244 @@ + + Backend Bundles + + +
+ + +
+
+ + +
+
+ + +
+ + + diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss new file mode 100644 index 00000000..ab2b17bd --- /dev/null +++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss @@ -0,0 +1,326 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../../../@theme/styles/themes'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + $content-width: nb-theme(content-width); + $left-right-offset: 8.125rem; + + display: block; + padding-top: 5.125rem; + + .section-container { + width: calc(#{$content-width} - #{$left-right-offset} * 2); + max-width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .features { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0; + margin-top: 5rem; + margin-left: -11px; + margin-right: -11px; + + &__item { + flex: 0 0 25%; + width: 25%; + display: flex; + flex-direction: column; + text-align: center; + list-style: none; + padding-left: 11px; + padding-right: 11px; + margin-bottom: 1.625rem; + } + &__title { + display: flex; + justify-content: center; + align-items: center; + min-height: 60px; + font-weight: bold; + font-size: 24px; + line-height: 30px; + text-align: center; + color: rgba(0, 0, 0, 0.87); + } + &__description { + font-family: nb-theme(font-secondary), sans-serif; + color: #8994a3; + font-size: 1rem; + line-height: 1.75; + } + } + + .package-switcher { + margin: 2.375rem 0 5rem; + + &__btn-group { + box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5); + } + + &__btn { + min-width: 10.625rem; + color: #bdc3cb; + border-color: #e6e8eb; + text-transform: none; + cursor: pointer; + &:active { + color: #ffffff; + } + &.active { + color: #000000; + background-color: #fafafa; + } + } + } + + .packages { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0; + margin-left: -11px; + margin-right: -11px; + margin-bottom: 4rem; + + &__item { + flex: 0 0 25%; + width: 25%; + display: flex; + flex-direction: column; + list-style: none; + padding-left: 11px; + padding-right: 11px; + } + } + + nb-flip-card { + display: flex; + height: 100%; + } + + /deep/ .flipcard-body { + height: 100%; + width: 100%; + } + + /deep/ .front-container, .back-container { + height: 100%; + } + + nb-card-front, nb-card-back { + display: flex; + height: 100%; + } + + nb-card { + height: 100%; + border: 0; + background-color: #ffffff; + box-shadow: 0 7px 17px 0 rgba(218, 224, 235, 0.5); + margin-bottom: 0; + } + + nb-card-body { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; + padding: 1rem; + } + + .package-card { + width: 100%; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; + cursor: pointer; + + &--front { + text-align: center; + } + + &__header { + display: flex; + flex-direction: column; + flex: 0 0 auto; + margin-bottom: 0.5625rem; + } + &__demo-link { + align-self: flex-end; + color: #ff8588; + font-weight: bold; + font-size: 0.75rem; + line-height: 1rem; + text-align: center; + text-transform: uppercase; + padding: 0.25rem 1rem; + border: 1px solid #ff8588; + border-radius: 0.75rem; + &--secondary { + color: #ad7efa; + border-color: #ad7efa; + } + } + &__image { + margin: 0 -1rem; + display: flex; + flex: 0 0 14.125rem; + background-repeat: no-repeat; + background-position: center center; + background-size: auto 100%; + &--dot-net { + background-image: url('/assets/img/bundle-dot-net.png'); + } + &--dot-net-core { + background-image: url('/assets/img/bundle-dot-net-core.png'); + } + } + &__price-wrapper { + flex: 0 0 2.5rem; + margin-bottom: 0.5rem; + } + &__price { + font-weight: bold; + font-size: 1.75rem; + line-height: 2.5rem; + color: rgba(0, 0, 0, 0.87); + vertical-align: middle; + &--old { + font-size: 1.5rem; + color: #ff4d6b; + text-decoration: line-through; + vertical-align: middle; + margin-right: 1rem; + } + } + &__title { + min-height: 2rem; + font-weight: bold; + font-size: 0.875rem; + color: rgba(0, 0, 0, 0.87); + margin-bottom: 0.5rem; + } + &__description { + font-family: nb-theme(font-secondary), sans-serif; + font-size: 0.875rem; + color: rgba(0, 0, 0, 0.87); + margin-bottom: 1.675rem; + } + &__buy-link { + font-family: nb-theme(font-secondary), sans-serif; + font-size: 0.75rem; + color: #ffffff; + text-transform: uppercase; + background-color: #18cb90; + box-shadow: 0 5px 29px 0 rgba(0, 219, 146, 0.32); + border-radius: 3px; + margin-top: auto; + cursor: pointer; + &:hover { + box-shadow: 0 0.375rem 2.125rem 0 rgba(0, 219, 146, 0.32); + } + } + &__type { + font-weight: bold; + font-size: 1rem; + line-height: 1.25rem; + color: rgba(0, 0, 0, 0.87); + text-align: center; + margin-top: 0.25rem; + margin-bottom: 0.5rem; + } + } + + .included { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + padding: 0; + margin: 1rem 0 0; + + &__item { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + list-style: none; + margin: 0 0 1rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 300; + padding-left: 0.5rem; + + &::before { + content: ''; + display: inline-flex; + width: 10px; + height: 14px; + border: solid #00db92; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + } + + &__text { + margin: 0 0 0 1.5rem; + } + } + + @include media-breakpoint-down(xl) { + + .features { + width: 100%; + padding-left: 1rem; + padding-right: 1rem; + + &__item { + flex-basis: 50%; + width: 50%; + } + } + + .packages { + width: 100%; + padding-left: 1rem; + padding-right: 1rem; + + &__item { + flex-basis: 50%; + width: 50%; + } + } + } + + @include media-breakpoint-down(sm) { + + .packages__item { + flex-basis: 100%; + width: 100%; + } + } + + @include media-breakpoint-down(is) { + + .features__item { + flex-basis: 100%; + width: 100%; + } + } +} diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts new file mode 100644 index 00000000..76a0ba4c --- /dev/null +++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts @@ -0,0 +1,67 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component} from '@angular/core'; + +@Component({ + selector: 'ngx-backend-bundles-section', + templateUrl: 'backend-bundles-section.component.html', + styleUrls: ['./backend-bundles-section.component.scss'], +}) + +export class BackendBundlesSectionComponent { + + licenseType = 'commercial'; + + firstBundleName = 'E-commerce: .NET'; + secondBundleName = 'IoT: .NET'; + thirdBundleName = 'E-commerce: .NET Core'; + fourthBundleName = 'IoT: .NET Core'; + + firstBundleMail: string = 'mailto:support@akveo.com' + + '?subject=.NET E-commerce Bundle' + + '&body=Dear Akveo, %0D%0A%0D%0A' + + 'I would like to purchase .NET E-commerce Bundle. ' + + 'Please give me details how I can proceed with that. %0D%0A%0D%0A' + + 'Thanks and regards'; + + secondBundleMail: string = 'mailto:support@akveo.com' + + '?subject=.NET IoT Bundle' + + '&body=Dear Akveo, %0D%0A%0D%0A' + + 'I would like to purchase .NET IoT Bundle. ' + + 'Please give me details how I can proceed with that. %0D%0A%0D%0A' + + 'Thanks and regards'; + + thirdBundleMail: string = 'mailto:support@akveo.com' + + '?subject=.NET Core E-commerce Bundle' + + '&body=Dear Akveo, %0D%0A%0D%0A' + + 'I would like to purchase .NET Core E-commerce Bundle. ' + + 'Please give me details how I can proceed with that. %0D%0A%0D%0A' + + 'Thanks and regards'; + + fourthBundleMail: string = 'mailto:support@akveo.com' + + '?subject=.NET Core IoT Bundle' + + '&body=Dear Akveo, %0D%0A%0D%0A' + + 'I would like to purchase .NET Core IoT Bundle. ' + + 'Please give me details how I can proceed with that. %0D%0A%0D%0A' + + 'Thanks and regards'; + + firstCardFlipped: boolean = false; + secondCardFlipped: boolean = false; + thirdCardFlipped: boolean = false; + fourthCardFlipped: boolean = false; + + constructor() { + } + + stopPropagation(e) { + e.stopPropagation(); + } + + isCommercial() { + return this.licenseType === 'commercial'; + } +} diff --git a/docs/app/pages/home/landing-home.module.ts b/docs/app/pages/home/landing-home.module.ts index 7e744f95..18ea85b2 100644 --- a/docs/app/pages/home/landing-home.module.ts +++ b/docs/app/pages/home/landing-home.module.ts @@ -12,6 +12,7 @@ import { SwiperModule } from 'ngx-swiper-wrapper'; // modules // components +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { LandingHomeComponent } from './landing-home.component'; import { MainInfoSectionComponent } from './main-info-section/main-info-section.component'; import { DescriptionSectionComponent } from './description-section/description-section.component'; @@ -23,6 +24,8 @@ import { ContactSectionComponent } from './contact-section/contact-section.compo import { OurProjectsSectionComponent } from './our-projects-section/our-projects-section.component'; import { LandingHomeRoutingModule } from './landing-home-routing.module'; import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-landing-sections-container.component'; +import { BannerComponent } from './banner/banner.component'; +import { BackendBundlesSectionComponent } from './backend-bundles-section/backend-bundles-section.component'; // components const COMPONENTS = [ @@ -36,6 +39,8 @@ const COMPONENTS = [ OurProjectsSectionComponent, SocialSectionComponent, ContactSectionComponent, + BannerComponent, + BackendBundlesSectionComponent, ]; @NgModule({ @@ -43,6 +48,7 @@ const COMPONENTS = [ ...COMPONENTS, ], imports: [ + NgbModule, NgxLandingThemeModule, SwiperModule, LandingHomeRoutingModule, diff --git a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html index b0423650..dde51faf 100644 --- a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html +++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html @@ -12,6 +12,8 @@ + +
diff --git a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.scss b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.scss index 78764e5c..65f8945a 100644 --- a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.scss +++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.scss @@ -19,7 +19,8 @@ ngx-landing-reviews-section, ngx-landing-our-projects-section, ngx-landing-social-section, - ngx-landing-contact-section { + ngx-landing-contact-section, + ngx-backend-bundles-section { max-width: $content-width; margin: 0 auto; } diff --git a/docs/assets/img/bundle-dot-net-core.png b/docs/assets/img/bundle-dot-net-core.png new file mode 100644 index 00000000..0d4b1221 Binary files /dev/null and b/docs/assets/img/bundle-dot-net-core.png differ diff --git a/docs/assets/img/bundle-dot-net.png b/docs/assets/img/bundle-dot-net.png new file mode 100644 index 00000000..de0ea6b6 Binary files /dev/null and b/docs/assets/img/bundle-dot-net.png differ