update hero

open-template-hub · Mar 27, 2023 · 24a081c · 24a081c
1 parent 0e20b90
commit 24a081c
Show file tree

Hide file tree

Showing 9 changed files with 258 additions and 73 deletions.
diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html
@@ -64,4 +64,3 @@ <h2>{{ BRAND.name }}</h2>
     </a>
   </div>
 </nav>
-<div [class.landing-layout-top-nav-loading-bar]="loading"></div>
diff --git a/src/app/component/popup/cookie-popup/cookie-popup.component.scss b/src/app/component/popup/cookie-popup/cookie-popup.component.scss
@@ -39,6 +39,7 @@
   & p {
     margin: 0;
     white-space: nowrap;
+    color: var(--theme-color);
   }
 }
 

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,23 +1,29 @@
-<div class="hero">
-  <div class="hero-left">
-    <h1>Open Template Hub</h1>
-    <p>
-      {{ BRAND.bio }}
-    </p>
-  </div>
+<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>
+  <div class="swiper-wrapper">
+    <div class="swiper-slide" *ngFor="let slide of slides">
+      <img class="hero-bg" [src]="slide.background" alt="background"/>
+      <img [src]="slide.img" alt="img" class="hero-img"/>
+      <div class="hero-left">
+        <h2>{{ slide.title }}</h2>
+        <p>
+          {{ slide.description }}
+        </p>
+        <br/>
+        <a *ngIf="slide.url" [href]="slide.url" target="_blank" class="join">
+          <p>
+            {{ slide.buttonText }}
+          </p>
+          <i class="fas fa-caret-right" aria-hidden="true"></i>
+        </a>
+      </div>
 
-  <div class="hero-right">
-    <app-image-content-loader
-        *ngIf="!brandLogoLoaded"
-        [imageContentLoaderClass]="'brand-logo-main'"></app-image-content-loader>
-    <img
-        (load)="setBrandLogoLoaded()"
-        [alt]="BRAND.heroImage.description"
-        [src]="BRAND.heroImage.src"
-        [style]="'display:' + (!brandLogoLoaded ? 'none;' : 'block;')"
-        height="450"
-        width="800"/>
+    </div>
   </div>
+  <div class="swiper-button-next"></div>
+  <div class="swiper-button-prev"></div>
+  <div class="swiper-pagination"></div>
 </div>
 
 <div class="counters">
@@ -50,7 +56,8 @@ <h1>Open Template Hub</h1>
       *ngFor="let testimonial of TESTIMONIALS"
       [testimonial]="testimonial">
   </app-testimonial-card>
-  <oth-button [buttonClasses]="['lighter-contrast-border-color', 'lighter-contrast-font-color', 'transparent-button']" [routerLink]="URLS.customers" i18n-text="@@productPage.readMoreStories"
+  <oth-button [buttonClasses]="['lighter-contrast-border-color', 'lighter-contrast-font-color', 'transparent-button']"
+              [routerLink]="URLS.customers" i18n-text="@@productPage.readMoreStories"
               text="Read More Stories">
   </oth-button>
 </div>

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
@@ -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;