Merge pull request #102 from couchbase/FEWD-5215-update-header-and-search-dropdown

update free trial button with GA event

Author: amarantha-k

src/css/header.css

@@ -133,6 +133,18 @@
   margin-left: var(--column-space);
 }
 
+.free-trial-link {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-brand-blue-secondary);
+  text-decoration: none;
+  margin-left: 35px;
+}
+
+.free-trial-link:hover {
+  text-decoration: none;
+}
+
 .parent-site {
   /* margin: 0 10px;
   padding: 0 10px; */
@@ -297,13 +309,25 @@
 
   .search {
     margin: 10px 0;
+    width: 100%;
+    text-align: center;
   }
 
+  .search input,
   .search .query {
-    border: 1px solid var(--color-brand-gray5);
-    padding: 10px 20px;
+    height: 35px;
+    padding: 7px;
+    font-size: 15px;
+    line-height: 21px;
+    border: 1px solid #FFFFFFBF;
+    border-radius: 4px;
+    margin-right: 5px;
   }
 
+  .search .fa-search {
+    font-size: 18px;
+    color: #FFFFFFBF;
+  }
   /* .parent-site {
     border-left: none;
   }
@@ -317,6 +341,9 @@
     color: var(--color-brand-blue);
     margin: 0;
   }
+  .free-trial-link {
+    color: var(--color-brand-white);
+  }
 
   .header-bottom-row.is-active {
     display: block;

src/partials/header-content.hbs

@@ -71,10 +71,14 @@
               <div class="primary-action">
                 {{#if env.ALGOLIA_API_KEY}}
                 <form class="navbar-item search" id="search">
-                  <input class="query" type="text" placeholder="Search Docs"{{#if page.home}} autofocus{{/if}}><i class="fas fa-search"></i>
+                  <input class="dataLayer query" type="text" placeholder="Search Docs"{{#if page.home}} autofocus{{/if}}><i class="fas fa-search"></i>
                 </form>
                 {{/if}}
-                <a class="btn btn-primary try-btn" href="https://www.couchbase.com/downloads">
+                <a href="https://cloud.couchbase.com/sign-up" class="free-trial-link" onclick="(window.dataLayer=window.dataLayer||[]).push({'event':'customEvent', 'category':'CTA', 'action':'Button Click',  'label':'Free Trial'});" >
+                  <i class="fas fa-cloud"></i>
+                  Free Trial
+                </a>
+                <a class="btn btn-primary try-btn"  onclick="(window.dataLayer=window.dataLayer||[]).push({'event':'customEvent', 'category':'CTA', 'action':'Button Click',  'label':'Download'});" href="https://www.couchbase.com/downloads">
                   Downloads
                 </a>
               </div>