-
+Open Template Hub
-- {{ BRAND.bio }} -
-
+
+
-
+
+ ![background]()
+ ![img]()
+
-
+
+
+
- ![]()
+
@@ -50,7 +56,8 @@
diff --git a/src/app/page/landing-layout/home-page/home-page.component.scss b/src/app/page/landing-layout/home-page/home-page.component.scss
index 94c5653c..b6faa1b5 100644
--- a/src/app/page/landing-layout/home-page/home-page.component.scss
+++ b/src/app/page/landing-layout/home-page/home-page.component.scss
@@ -4,32 +4,161 @@
@use '../../../../styles/util/util';
@use '../landing-layout.component';
-.hero {
+.swiper {
+ width: 100%;
+ max-width: 2000px;
+ height: 700px;
+}
+
+.swiper-slide {
@include util.flex-layout-row;
+ @include util.flex-center-center;
@include util.margin-x-auto;
- align-items: center;
justify-content: space-evenly;
width: 100%;
- padding-top: 7vh;
+ padding: 7vh 100px 50px;
+ position: relative;
- text-align: center;
+ overflow: hidden;
- & .hero-left,
- & .hero-right {
- @include util.flex-layout-column;
- @include util.flex-center-center;
+ box-sizing: border-box;
+
+ & .hero-left {
+ font-size: 38px;
+ max-width: 50%;
+ min-width: 450px;
+ padding-bottom: 50px;
}
- & .hero-left p {
- font-size: 24px;
+ & .hero-img {
+ max-width: 300px;
+ max-height: 300px;
+ padding-bottom: 100px;
}
- & .hero-right img {
+ & .hero-bg {
+ position: absolute;
width: 100%;
+ left: 0;
height: auto;
+ z-index: -1;
+ opacity: 0.1;
+ }
+
+ & .hero-left {
+ @include util.flex-layout-column;
+
+ align-items: flex-start;
+
+ & h2 {
+ padding-bottom: 5px;
+ margin-bottom: 20px;
+ border-bottom: 3px solid var(--theme-color);
+ }
+
+ & h2, & p {
+ color: var(--darker);
+ }
+
+ & p {
+ font-size: 24px;
+ text-align: left;
+ }
+
+ & .join {
+ @include util.flex-layout-row;
+ @include util.flex-center-center;
+
+ cursor: pointer;
+ gap: 6px;
+
+ border-radius: 5px;
+ width: 200px;
+ height: 40px;
+ background-color: var(--shine);
+ border: 2px solid var(--theme-color-lighter-6);
+
+ & p {
+ font-size: 20px;
+ color: var(--theme-color);
+ }
+
+ & i {
+ font-size: 24px;
+ color: var(--theme-color);
+
+ animation-duration: 2s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: move-x;
+ animation-timing-function: ease-in-out;
+ }
+ }
+ }
+}
+
+.parallax-bg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 130%;
+ height: 100%;
+ -webkit-background-size: cover;
+ background-size: cover;
+ background-position: center;
+}
+
+.swiper-slide .title {
+ font-size: 41px;
+ font-weight: 300;
+}
+
+.swiper-slide .subtitle {
+ font-size: 21px;
+}
+
+.swiper-slide .text {
+ font-size: 14px;
+ max-width: 400px;
+ line-height: 1.3;
+}
+
+.screenshots-wrapper {
+ @include util.flex-layout-column;
+ @include util.flex-center-center;
+
+ box-sizing: border-box;
+
+ width: 100%;
+
+ padding-left: 3vw;
+ padding-right: 3vw;
+
+ padding-bottom: 100px;
+
+ text-align: center;
+
+ .product-card {
+ & .header {
+ text-align: left;
+ font-size: 20px;
+ }
+
+ & .body {
+ justify-content: flex-start;
+ background-color: transparent;
+ box-shadow: none;
+
+ & app-screenshot-swiper {
+ margin-top: 50px;
+ }
+
+ height: 350px;
+ width: 84vw;
+ }
}
}
@@ -122,26 +251,50 @@
}
@media only screen and (max-width: 999px) {
- .hero {
- max-width: 94vw;
+
+ .swiper-slide {
+ width: auto;
flex-direction: column;
+ box-sizing: border-box;
+
+ justify-content: flex-start;
font-size: 25px;
+ text-align: center;
+
+ gap: 10px;
+ padding: 0 3vw 3vh;
+ height: auto;
+
+ & .hero-bg {
+ width: auto;
+ height: 100%;
+ min-height: 100%;
+ }
+
+ & .hero-img {
+ height: 250px;
+ padding-bottom: 0;
+ padding-top: 50px;
+ }
+
& .hero-left {
- & h1 {
- padding: 30px 0;
+ align-items: center;
+
+ padding-bottom: 50px;
+ min-width: 90vw;
+
+ & h2 {
+ padding: 5px 0;
+ font-size: 30px;
}
& p {
+ text-align: center;
font-size: 18px;
}
}
-
- & > * {
- width: 94vw;
- margin-bottom: 40px;
- }
}
.counters {
@@ -191,32 +344,6 @@
}
}
- .hero {
- flex-direction: row;
- padding-bottom: 50px;
-
- box-sizing: border-box;
-
- padding-left: 100px;
- padding-right: 100px;
-
- & .hero-left,
- &.hero-right {
- min-width: 450px;
- }
-
- & .hero-left {
- font-size: 38px;
- max-width: 50%;
-
- padding-bottom: 50px;
-
- & h1 {
- padding: 40px 0;
- }
- }
- }
-
.counters {
box-sizing: border-box;
padding: 180px 50px 50px;
diff --git a/src/app/page/landing-layout/home-page/home-page.component.ts b/src/app/page/landing-layout/home-page/home-page.component.ts
index 4d552ade..ba52c644 100644
--- a/src/app/page/landing-layout/home-page/home-page.component.ts
+++ b/src/app/page/landing-layout/home-page/home-page.component.ts
@@ -8,6 +8,7 @@ import { PARTNERS } from 'src/app/data/partner/partner.data';
import { TESTIMONIALS } from 'src/app/data/testimonial/testimonial.data';
import { Feature } from 'src/app/model/feature/feature.model';
import { Testimonial } from 'src/app/model/testimonial/testimonial.model';
+import Swiper from 'swiper';
import { environment } from '../../../../environments/environment';
import { environmentCommon } from '../../../../environments/environment-common';
import { BRAND } from '../../../data/brand/brand.data';
@@ -18,6 +19,15 @@ import { AnalyticsService } from '../../../service/analytics/analytics.service';
import { LoadingService } from '../../../service/loading/loading.service';
import { GithubProviderService } from '../../../service/provider/github-provider.service';
+export interface SwiperData {
+ title: string;
+ description: string;
+ img: string;
+ background?: string;
+ url?: string;
+ buttonText?: string;
+}
+
@Component( {
selector: 'app-home-page',
templateUrl: './home-page.component.html',
@@ -29,7 +39,6 @@ export class HomePageComponent implements AfterViewInit {
openSourceRatioCounter = { count: 0, id: 'openSourceRatioCounterElement' };
npmCounterLoading = true;
githubCounterLoading = true;
- brandLogoLoaded = false;
BRAND = BRAND;
URLS = URLS;
@@ -37,6 +46,15 @@ export class HomePageComponent implements AfterViewInit {
LIBRARIES = LIBRARIES;
PLUGINS = PLUGINS;
+ slides: SwiperData[] = [ {
+ title: 'Startup Portal',
+ description: 'One central place that helps you to minimize the effort while managing your software projects.',
+ img: './assets/slide/image-1.png',
+ background: './assets/slide/background-1.jpg',
+ url: 'https://portal.opentemplatehub.com',
+ buttonText: 'Try Now'
+ } ];
+
PARTNERS: Partner[] = PARTNERS;
TESTIMONIALS: Testimonial[] = TESTIMONIALS.slice( 0, TESTIMONIALS.length < 3 ? TESTIMONIALS.length : 3 );
@@ -85,10 +103,47 @@ export class HomePageComponent implements AfterViewInit {
private analyticsService: AnalyticsService,
private loadingService: LoadingService
) {
+ for ( const productLine of PRODUCT_LINES ) {
+ for ( const product of productLine.products ) {
+ this.slides.push( {
+ title: product.name,
+ description: product.description,
+ img: product.logo.replace('/min', '').replace('.min', ''),
+ background: './assets/slide/background-1.jpg',
+ url: productLine.key === 'premium' ? URLS.contactUs : product.url,
+ buttonText: product.openSource ? 'Open Source' : 'Contact Us'
+ } );
+ }
+ }
+ for ( const productLine of LIBRARIES ) {
+ for ( const product of productLine.products ) {
+ this.slides.push( {
+ title: product.name,
+ description: product.description,
+ img: product.logo,
+ background: './assets/slide/background-1.jpg',
+ url: productLine.key === 'premium' ? URLS.contactUs : product.url,
+ buttonText: product.openSource ? 'Open Source' : 'Contact Us'
+ } );
+ }
+ }
}
ngAfterViewInit() {
this.initCountUps();
+
+ const swiper = new Swiper( '.mySwiper', {
+ speed: 600,
+ parallax: true,
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true,
+ },
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+ } );
}
countUpFormatter( n: number ) {
@@ -103,10 +158,6 @@ export class HomePageComponent implements AfterViewInit {
}
}
- setBrandLogoLoaded = () => {
- this.brandLogoLoaded = true;
- };
-
getPresentationCardFooter( isOpenSource: boolean ): string {
return isOpenSource ? $localize`:@@productTypeTag.openSource:opensource` : $localize`:@@productTypeTag.premium:premium`;
}
diff --git a/src/app/page/landing-layout/landing-layout.component.html b/src/app/page/landing-layout/landing-layout.component.html
index dc32f05a..2885a499 100644
--- a/src/app/page/landing-layout/landing-layout.component.html
+++ b/src/app/page/landing-layout/landing-layout.component.html
@@ -4,7 +4,6 @@