From 77a569da3dcea2b51e820b32a6ef094f05fae1e7 Mon Sep 17 00:00:00 2001
From: Aaron Stephanus <taoist.futility@pm.me>
Date: Thu, 28 Sep 2023 11:34:47 -0600
Subject: [PATCH] Adds card interactivity for product cards on the platform
 landing page

Signed-off-by: Aaron Stephanus <taoist.futility@pm.me>
---
 _includes/platform-products.html            |  1 +
 _platform_products/data_prepper.md          |  2 +-
 _platform_products/opensearch_core.md       |  3 ++-
 _platform_products/opensearch_dashboards.md |  2 +-
 _sass/_redesign-platform.scss               | 26 +++++++++++++++++++++
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/_includes/platform-products.html b/_includes/platform-products.html
index 8d34e11dd4..f6af7d2529 100644
--- a/_includes/platform-products.html
+++ b/_includes/platform-products.html
@@ -5,3 +5,4 @@
         {{product}}
     {% endfor %}
 </div>
+{% include card-clickability.html card_container_selector=".platform-product-collection" card_classname="platform-product" %}
diff --git a/_platform_products/data_prepper.md b/_platform_products/data_prepper.md
index 418abf484b..5dd0db1619 100644
--- a/_platform_products/data_prepper.md
+++ b/_platform_products/data_prepper.md
@@ -4,7 +4,7 @@ title: Data Prepper
 image: '/assets/media/platform/Data-Prepper.png'
 ---
 
-### Data Prepper
+### [Data Prepper](https://github.com/opensearch-project/data-prepper){:target="_blank"}
 
 Data Prepper is the server-side data collector designed to enrich, transform, and aggregate data for downstream analytics and visualization within OpenSearch. 
 
diff --git a/_platform_products/opensearch_core.md b/_platform_products/opensearch_core.md
index 7515cddac4..73d6c7cd82 100644
--- a/_platform_products/opensearch_core.md
+++ b/_platform_products/opensearch_core.md
@@ -4,7 +4,8 @@ title: OpenSearch Core
 image: '/assets/media/platform/Core.png'
 ---
 
-### OpenSearch Core
+### [OpenSearch Core](https://github.com/opensearch-project/OpenSearch){:target="_blank"}
+
 OpenSearch is a powerful search and analytics engine built on [Apache Lucene](https://lucene.apache.org/){:target="_blank"}. 
 
 At its core sits the fundamental tooling that makes OpenSearch an ideal foundation for a vast range of applications. 
diff --git a/_platform_products/opensearch_dashboards.md b/_platform_products/opensearch_dashboards.md
index 920512ba65..d6cc1dfe89 100644
--- a/_platform_products/opensearch_dashboards.md
+++ b/_platform_products/opensearch_dashboards.md
@@ -4,7 +4,7 @@ title: OpenSearch Dashboards
 image: '/assets/media/platform/Dashboards.png'
 ---
 
-### OpenSearch Dashboards
+### [OpenSearch Dashboards](https://playground.opensearch.org/app/home){:target="_blank"}
 
 OpenSearch Dashboards is the open-source data visualization toolset built to work with OpenSearch. 
 
diff --git a/_sass/_redesign-platform.scss b/_sass/_redesign-platform.scss
index c58149dead..bde127e4e0 100644
--- a/_sass/_redesign-platform.scss
+++ b/_sass/_redesign-platform.scss
@@ -1280,6 +1280,29 @@ $solutions-card-bottom-margin: 36px;
             row-gap: 0;
         }
         margin-bottom: 75px;
+        :has(a[href]) {
+            cursor: pointer;
+        }
+        &:hover {
+            .platform-product--description {
+                a {
+                    border-bottom: 2px solid $primary-pacific-blue;
+                    color: $primary-open-sky;
+                }
+            }
+        }
+        &:has(a:focus) {
+            box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50);
+        }
+        &:has(a:active) {
+            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset;
+        }
+        &.platform-product__focused {
+            box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50);
+        }
+        &.platform-product__active {
+            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset;
+        }
         > .platform-product--image {
             @media screen and (min-width: 835px) {
                 flex-basis: 47.43%;
@@ -1343,6 +1366,9 @@ $solutions-card-bottom-margin: 36px;
             box-sizing: border-box;
             > h3 {
                 @include header-level3($primary-open-sky-s2);
+                > a {
+                    @include header-level3($primary-open-sky-s2);
+                }
                 margin-top: 0;
             }
             > p {