Merge pull request thingsboard#1432 from ArtemDzhereleiko/AD/imp/achi…

…evement-for-pe-pass

Update header for achievement

_includes/head-header.html

@@ -975,7 +975,7 @@
             </div>
         </div>
     </nav>
-    <div>
+    <div class="head-buttons">
         <a href="/installations/" class="n-button try">Try it now</a>
         <a href="/pricing/" class="n-button price">Pricing</a>
     </div>

_layouts/thingsboard-paas.html

@@ -5,6 +5,13 @@
 <!--  HERO  -->
 <section id="hero" class="light-text">
     <div class="video-cover"></div>
+
+    <div class="achievement">
+        <a href="/blog/top-supplier-retail-2024-2/">
+            <img class="achieve" src="/images/feature-logo/top-supplier-retail-2024.webp" alt="Top supplier retail 2024" width="110" height="160">
+        </a>
+    </div>
+
     <div id="hero-content">
         <span class="header-animation paas-title">ThingsBoard Cloud</span>
         <div class="header-animation">

_layouts/thingsboard-pe.html

@@ -4,7 +4,15 @@
 {% include head-header.html productTag="pe" %}
 <!--  HERO  -->
 <section id="hero" class="light-text">
+
     <div class="video-cover"></div>
+
+    <div class="achievement">
+        <a href="/blog/top-supplier-retail-2024-2/">
+            <img class="achieve" src="/images/feature-logo/top-supplier-retail-2024.webp" alt="Top supplier retail 2024" width="110" height="160">
+        </a>
+    </div>
+
     <div id="hero-content">
         <span class="header-animation pe-title">ThingsBoard Professional Edition</span>
         <div class="header-animation">

_sass/_base.sass

@@ -181,6 +181,19 @@ a
         box-shadow: unset
         background-color: #fff
 
+#home, #thingsboard-paas, #thingsboard-pe
+  #hero
+    .achievement
+      position: absolute
+      top: 90px
+      right: 20px
+      z-index: 100
+      .achieve
+        width: 100%
+        height: auto
+        @media (max-width: 768px)
+          width: 60px
+
 header
   position: fixed
   top: 0
@@ -209,6 +222,16 @@ header
     height: 100%
     align-items: center
 
+  .head-buttons
+    display: flex
+    flex-direction: row
+    .n-button
+      width: 110px
+      padding: 0
+      display: flex
+      align-items: center
+      justify-content: center
+
   .head-menu
     height: inherit
     position: relative
@@ -510,7 +533,8 @@ ul
 
 .burger
   position: absolute
-  top: 16px
+  top: 50%
+  transform: translateY(-50%)
   right: 22px
   display: none
   filter: unset
@@ -519,7 +543,6 @@ ul
   width: 47px
   background-size: cover
   @media screen and (max-width: 1024px)
-    top: 21px
     height: 37px
     width: 37px
     background-image: url(/images/s-burger-icon.svg)
@@ -894,6 +917,9 @@ dd
       .logo, .burger
         filter: unset
 
+      .head-buttons
+        display: flex
+
       .head-menu
         display: block
         margin: 70px -30px 0
@@ -947,7 +973,7 @@ dd
       height: 100%!important
       z-index: 10000
       .logo-burger
-        height: 78px
+        height: 98px
         position: fixed
         z-index: 2
         background-color: #fff
@@ -960,6 +986,9 @@ dd
         @media screen and (max-width: 1024px)
           background-image: url(/images/s-close-icon.svg)
 
+      .head-buttons
+        display: flex
+
       .head-menu
         display: block
         overflow-y: auto
@@ -980,6 +1009,9 @@ dd
     .burger
       display: block
 
+    .head-buttons
+      display: none
+
     .head-menu
       display: none
       margin-top: 80px

home.sass

@@ -78,16 +78,6 @@ $feature-box-div-margin-bottom: 40px
             &.arrow-hidden
                 .tb-arrow
                     display: none
-        .achievement
-            position: absolute
-            top: 90px
-            right: 22px
-            z-index: 100
-            .achieve
-                width: 100%
-                height: auto
-                @media (max-width: 768px)
-                    width: 60px
 
     #overflow
         overflow: hidden