Some pages

- Trainings
- Professional services
- Some fix for "Media Kit"
- Some fix for page "/docs/iot-video-tutorials/"

Author: andreihoncharuk

_layouts/common.html

@@ -35,10 +35,10 @@
     });
 </script>
 <script>
-    function dropContent() {
-        var dContent = $('.drop-content');
-        var dCard = $('.card-drop');
-        var text = $('.drop-content > p').height();
+    function dropContent(dropId) {
+        var dContent = $('.drop-content#'+dropId);
+        var dCard = $('.card-drop#'+dropId);
+        var text = $('.drop-content#'+dropId+' > div').height();
         if (dContent.hasClass('opened')) {
             dContent.removeClass('opened');
             dContent.css('height', '0');

docs/iot-video-tutorials.md

@@ -319,7 +319,7 @@ You will learn how to:
 
 ####  ThingsBoard PE: Data Converters Configuration Guide
 
-Data Converters are a part of the Platform Integration feature. ThignsBoard uses two types of data converters:
+Data Converters are a part of the Platform Integration feature. ThingsBoard uses two types of data converters:
 
  - Uplink data converters: to parse the payload of the incoming message and transform it to the same format used by ThingsBoard. 
  - Downlink data converters: to transform the incoming rule engine message and its metadata to the format that is used by the corresponding Integration.

docs/services/consulting.md

@@ -1,26 +1,41 @@
 ---
 layout: common
 title: Professional services
+notitle: "true"
 description: Professional services
 
 ---
 
-### Proof of Concept
-In short terms, our team will implement your most critical business processes on top of ThingsBoard platform. It allows to quickly evaluate ThingsBoard Platform and develop further Solution Architecture.
-
-### DevOps services
-Our experienced DevOps team take over the administration of your ThingsBoard cluster that is deployed in the cloud or on premises. It includes installation and upgrades to latest versions, platform maintenance and optimization.
-
-### Consulting
-Our core team will review your business use cases, existing environment,  SLA requirements and develop solution architecture based on a synergy of existing infrastructure and ThignsBoard platform.
-
-### Solution Development
-Our experienced engineering team enables rapid application development for your software solutions.
-Review and improve your current solution architecture or design it completely from scratch based on your business strategy.
-ThingsBoard platform customization to meet your business requirements.
-
-### Managed Services
-We are able to completely take over the administration of your ThingsBoard cluster that is deployed in the cloud or on premises. Our engineers will be responsible for monitoring, elastic scalability and optimization of your ThingsBoard cluster.
-
-
-<a class="button" href="/docs/contact-us/">Contact us</a> 
+<h1 class="mainTitle">Professional services</h1>
+
+<div class="service-info-blocks">
+  <div class="card">
+    <h3 class="title">Proof of Concept</h3>
+    <p class="description">In short terms, our team will implement your most critical business processes on top of ThingsBoard platform. It allows to quickly evaluate ThingsBoard Platform and develop further Solution Architecture.</p>
+  </div>
+
+  <div class="card">
+    <h3 class="title">DevOps services</h3>
+    <p class="description">Our experienced DevOps team take over the administration of your ThingsBoard cluster that is deployed in the cloud or on premises. It includes installation and upgrades to latest versions, platform maintenance and optimization.</p>
+  </div>
+
+  <div class="card">
+    <h3 class="title">Consulting</h3>
+    <p class="description">Our core team will review your business use cases, existing environment, SLA requirements and develop solution architecture based on a synergy of existing infrastructure and ThignsBoard platform.</p>
+  </div>
+
+  <div class="card">
+    <h3 class="title">Solution Development</h3>
+    <p class="description">Our experienced engineering team enables rapid application development for your software solutions. Review and improve your current solution architecture or design it completely from scratch based on your business strategy. ThingsBoard platform customization to meet your business requirements.</p>
+  </div>
+
+  <div class="card">
+    <h3 class="title">Managed Services</h3>
+    <p class="description">We are able to completely take over the administration of your ThingsBoard cluster that is deployed in the cloud or on premises. Our engineers will be responsible for monitoring, elastic scalability and optimization of your ThingsBoard cluster.</p>
+  </div>
+</div>
+
+<div class="bottom">
+    <a href="/docs/contact-us/" class="contact-button">Contact Us</a>
+    <p>Contact us to get the ThingsBoard Professional services</p>
+</div>

docs/services/services.sass

@@ -13,7 +13,7 @@
         padding: 31px
         border: 1px solid #ebebeb
     .service-info-blocks
-      margin: 12px 0 56px
+      margin: 24px 0 56px
       .card
         width: 100%
         .title
@@ -41,6 +41,23 @@
               background: url(/images/services/length-icon.svg)
             &.audience:after
               background: url(/images/services/audience-icon.svg)
+          @media screen and (max-width: 768px)
+            padding-bottom: 48px
+            p
+              text-align: left
+              &:after
+                content: none
+              &:before
+                display: inline-block
+                content: ""
+                vertical-align: middle
+                width: 24px
+                height: 24px
+                margin-right: 12px
+              &.length:before
+                background: url(/images/services/length-icon.svg)
+              &.audience:before
+                background: url(/images/services/audience-icon.svg)
           .card-drop
             -webkit-touch-callout: none
             -webkit-user-select: none
@@ -67,6 +84,7 @@
             &.opened:after
               transform: rotate(-90deg)
         .drop-content
+          overflow: hidden
           margin-top: 0
           opacity: 0
           height: 0
@@ -81,6 +99,14 @@
             -o-transition: opacity 0.3s, height 0.3s
             -moz-transition: opacity 0.3s, height 0.3s
             opacity: 1
+          div
+            p
+              margin-bottom: 12px
+              font-weight: 600
+            li
+              list-style: unset
+              margin-left: 12px
+              font-weight: 400
     .service-cards
       display: flex
       flex-wrap: wrap
@@ -111,4 +137,29 @@
       @media screen and (max-width: 768px)
         flex-direction: column
         .card
-          width: 100%
+          width: 100%
+    .bottom
+      display: flex
+      flex-direction: column
+      text-align: center
+      margin: 0 0 -50px -50%
+      background-color: #F9FBFE
+      width: 200%
+      padding: 50px 0
+      .contact-button
+        cursor: pointer
+        width: 350px
+        background-color: #2A7DEC
+        font-size: 24px
+        font-weight: 400
+        text-align: center
+        color: #fff
+        border-radius: 4px
+        text-decoration: none
+        padding: 16px 20px
+        margin: 0 auto 48px
+        box-shadow: 0 18px 16px -10px rgba(42, 125, 236, 0.25)
+        &:hover
+          background-color: #4F97F8
+      p
+        color: #899AAB