From 72c0ed10af9b00be806b47484dc0a49cea38de6b Mon Sep 17 00:00:00 2001
From: kolchfa-aws <105444904+kolchfa-aws@users.noreply.github.com>
Date: Wed, 31 Jan 2024 11:54:59 -0500
Subject: [PATCH] Refactor home page layout (#6307)

* Refactor home page layout

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Remove hover from last link

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

---------

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>
---
 _includes/banner.html      | 2 +-
 _includes/cards.html       | 8 ++++----
 _layouts/home.html         | 2 +-
 _sass/_home.scss           | 7 +++----
 assets/js/home-listener.js | 5 +++++
 assets/js/listener.js      | 3 ---
 6 files changed, 14 insertions(+), 13 deletions(-)
 create mode 100644 assets/js/home-listener.js

diff --git a/_includes/banner.html b/_includes/banner.html
index dadf93f578..95869b6cbe 100644
--- a/_includes/banner.html
+++ b/_includes/banner.html
@@ -5,7 +5,7 @@
             <p class="banner-text-description">Learn to use OpenSearch, the highly scalable and extensible open-source software suite for search, analytics, observability, and other data-intensive applications.</p>
         </div>
         <div>
-            <button class="btn-contribute"><span>Contribute<svg width="20" viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></span></button>
+            <button id="contribute" class="btn-contribute"><span>Contribute<svg width="20" viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></span></button>
         </div>
     </header>
 </section>   
\ No newline at end of file
diff --git a/_includes/cards.html b/_includes/cards.html
index f5f2c960e8..a92366c489 100644
--- a/_includes/cards.html
+++ b/_includes/cards.html
@@ -5,7 +5,7 @@
       <a href="{{site.url}}{{site.baseurl}}/about/" class='card-link'></a>
         <p class="heading">OpenSearch and OpenSearch Dashboards</p>
         <p class="description">Learn how to power up your search</p>
-        <button class="last-link">Documentation &#x2192;</button>
+        <p class="last-link">Documentation &#x2192;</p>
       </div>
   
   
@@ -13,14 +13,14 @@
       <a href="{{site.url}}/docs/latest/data-prepper/" class='card-link'></a>
         <p class="heading">Data Prepper</p>
         <p class="description">Prepare your data for OpenSearch</p>
-        <button class="last-link" >Documentation &#x2192;</button>
+        <p class="last-link" >Documentation &#x2192;</p>
       </div>
   
     <div class="card">
       <a href="{{site.url}}/docs/latest/clients/" class='card-link'></a>
         <p class="heading">Clients</p>
         <p class="description">OpenSearch in your programming language</p>
-        <button class="last-link">Documentation &#x2192;</button>
+        <p class="last-link">Documentation &#x2192;</p>
       </div>
   
     
@@ -28,7 +28,7 @@
       <a href="{{site.url}}/docs/latest/benchmark/" class='card-link'></a>
         <p class="heading">Benchmark</p>
         <p class="description">Track OpenSearch performance</p>
-        <button class="last-link">Documentation &#x2192;</button>
+        <p class="last-link">Documentation &#x2192;</p>
       </div>  
   </div>
   
diff --git a/_layouts/home.html b/_layouts/home.html
index 983cde7b1e..0b13e44e23 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -31,6 +31,6 @@
 
   {% include footer.html %}
   <script src="{{ '/assets/js/search.js' | relative_url }}"></script>
-  <script src="{{ '/assets/js/listener.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/home-listener.js' | relative_url }}"></script>
 </body>
 </html>
diff --git a/_sass/_home.scss b/_sass/_home.scss
index a529aa910c..9b5dd864a9 100644
--- a/_sass/_home.scss
+++ b/_sass/_home.scss
@@ -61,7 +61,6 @@
             color: $blue-vibrant-300;
         }
         > .last-link {
-            transform: translateY(-1px);
             text-decoration: underline;
             text-underline-offset: 3px;
         }
@@ -145,7 +144,7 @@
   }
   
   .banner-text-header {
-    font-size: 2.3rem;
+    font-size: 2.1rem;
     font-family: "Open Sans";
     font-weight: 300;
     @include mq(md) {
@@ -154,12 +153,12 @@
   }
   
   .banner-text-description {
-    font-size: 1.3rem;
+    font-size: 1rem;
     font-weight: 700;
     font-style: normal;
     line-height: 2.25rem;
     @include mq(md) {
-        font-size: 1rem;
+        font-size: 1.3rem;
     }
   }
   
diff --git a/assets/js/home-listener.js b/assets/js/home-listener.js
new file mode 100644
index 0000000000..160414f132
--- /dev/null
+++ b/assets/js/home-listener.js
@@ -0,0 +1,5 @@
+const contributeButton = document.getElementById('contribute');
+
+contributeButton.addEventListener('click', function(event) {
+    window.open('https://github.com/opensearch-project', '_blank');
+});
\ No newline at end of file
diff --git a/assets/js/listener.js b/assets/js/listener.js
index 2d7221c73d..029e042419 100644
--- a/assets/js/listener.js
+++ b/assets/js/listener.js
@@ -28,9 +28,6 @@ document.addEventListener('click', function(event) {
     else if (target.matches('.copy-button')) {
         window.navigator.clipboard.writeText(target.getAttribute('data-text'));
     }
-    else if (target.matches('.btn-contribute')) {
-        window.open('https://github.com/opensearch-project', '_blank');
-    }
 });
 
 nav.addEventListener('scroll',(e)=>{