update landing

open-template-hub · Apr 1, 2023 · c5cf1f2 · c5cf1f2
1 parent a3cd0ee
commit c5cf1f2
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/src/app/page/landing-layout/home-page/home-page.component.html b/src/app/page/landing-layout/home-page/home-page.component.html
@@ -1,6 +1,6 @@
 <div style="--swiper-navigation-color: var(--theme-color); --swiper-pagination-color: var(--theme-color)"
-     class="swiper mySwiper">
-  <div class="parallax-bg" data-swiper-parallax="-23%"></div>
+     class="swiper hero-swiper">
+  <div data-swiper-parallax="-23%"></div>
   <div class="swiper-wrapper">
     <div class="swiper-slide" *ngFor="let slide of slides">
       <img class="hero-bg" [src]="slide.background" alt="background"/>
@@ -11,7 +11,7 @@ <h2>{{ slide.title }}</h2>
           {{ slide.description }}
         </p>
         <br/>
-        <a *ngIf="slide.url" [href]="slide.url" target="_blank" class="join">
+        <a *ngIf="slide.url" [href]="slide.url" target="_blank" class="slide-button">
           <p>
             {{ slide.buttonText }}
           </p>

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
@@ -68,7 +68,7 @@
       text-align: left;
     }
 
-    & .join {
+    & .slide-button {
       @include util.flex-layout-row;
       @include util.flex-center-center;
 
@@ -100,32 +100,6 @@
   }
 }
 
-.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;
@@ -364,3 +338,29 @@
     margin: 80px 0 50px;
   }
 }
+
+@media (hover: hover) {
+
+  .swiper {
+    & .swiper-wrapper {
+      & .swiper-slide {
+        & .hero-left {
+          & .slide-button {
+            &:hover {
+              box-shadow: 0 0 8px -3px var(--theme-color-blue);
+              border-color: var(--theme-color-blue);
+              transition-property: border-color;
+              transition-duration: 400ms;
+
+              & p, & i {
+                transition-property: color;
+                transition-duration: 400ms;
+                color: var(--theme-color-blue);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
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
@@ -39,6 +39,7 @@ export class HomePageComponent implements AfterViewInit {
   openSourceRatioCounter = { count: 0, id: 'openSourceRatioCounterElement' };
   npmCounterLoading = true;
   githubCounterLoading = true;
+  swiper: Swiper;
 
   BRAND = BRAND;
   URLS = URLS;
@@ -48,11 +49,11 @@ export class HomePageComponent implements AfterViewInit {
 
   slides: SwiperData[] = [ {
     title: 'Startup Portal',
-    description: 'One central place that helps you to minimize the effort while managing your software projects.',
+    description: 'Transform your data into insights',
     img: './assets/slide/image-1.png',
     background: './assets/slide/background-1.jpg',
     url: 'https://portal.opentemplatehub.com',
-    buttonText: 'Try Now'
+    buttonText: 'Try For Free'
   } ];
 
   PARTNERS: Partner[] = PARTNERS;
@@ -132,7 +133,7 @@ export class HomePageComponent implements AfterViewInit {
   ngAfterViewInit() {
     this.initCountUps();
 
-    const swiper = new Swiper( '.mySwiper', {
+    this.swiper = new Swiper( '.hero-swiper', {
       speed: 600,
       parallax: true,
       pagination: {