From 32247dac9fbd0b7865b97f04b21cbf5afa137406 Mon Sep 17 00:00:00 2001
From: Hyejin Yoon <0327jane@gmail.com>
Date: Wed, 31 Jul 2024 09:09:02 +0900
Subject: [PATCH] docs: fix learning center color scheme & typo (#11043)

---
 .../src/learn/_components/LearnListPage/index.jsx        | 3 ++-
 .../learn/_components/LearnListPage/styles.module.scss   | 8 +++++++-
 docs-website/src/learn/business-metric.md                | 9 +++++----
 .../pages/docs/_components/CustomerCardSection/index.jsx | 4 ++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/docs-website/src/learn/_components/LearnListPage/index.jsx b/docs-website/src/learn/_components/LearnListPage/index.jsx
index 4df87a340f21ee..1ceec9afa1e8a3 100644
--- a/docs-website/src/learn/_components/LearnListPage/index.jsx
+++ b/docs-website/src/learn/_components/LearnListPage/index.jsx
@@ -58,8 +58,9 @@ function BlogListPageContent(props) {
             <strong>For: </strong>
             {audiences.map((audience) => (
               <button
-                className={`button button--secondary ${activeFilters.includes(audience) && "button--active"}`}
+                className={clsx(styles.button, "button button--secondary", { [styles.buttonActive]: activeFilters.includes(audience) })}
                 onClick={() => handleFilterToggle(audience)}
+                key={audience}
               >
                 {audience}
               </button>
diff --git a/docs-website/src/learn/_components/LearnListPage/styles.module.scss b/docs-website/src/learn/_components/LearnListPage/styles.module.scss
index d08b48a011de07..ce86e124afdb81 100644
--- a/docs-website/src/learn/_components/LearnListPage/styles.module.scss
+++ b/docs-website/src/learn/_components/LearnListPage/styles.module.scss
@@ -4,4 +4,10 @@
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
-}
\ No newline at end of file
+
+  .buttonActive {
+    background-color: var(--ifm-color-primary);
+    border: 1px solid var(--ifm-color-primary);
+    color: #ffffff;
+  }
+}
diff --git a/docs-website/src/learn/business-metric.md b/docs-website/src/learn/business-metric.md
index ff8677b998eada..1378168f42195e 100644
--- a/docs-website/src/learn/business-metric.md
+++ b/docs-website/src/learn/business-metric.md
@@ -72,13 +72,14 @@ DataHub Cloud offers comprehensive features designed to tackle the challenges of
 </p>
 
 - **[Approval Flows](https://datahubproject.io/docs/managed-datahub/approval-workflows):** Structured workflows for approving changes to metric definitions, maintaining accuracy and reliability.
-    - 
 
-![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/f818df0d-1067-44ab-99e1-8cf45d930c01/33ebd070-32a1-4875-b220-c31373f5eedf/Untitled.png)
+<p align="center">
+  <img width="80%"  src="https://raw.githubusercontent.com/datahub-project/static-assets/main/imgs/blogs/data-freshness/lineage.png"/>
+ <br />
+  <i style={{color:"grey"}}>Lineage Tracking</i>
+</p>
 
 - **[Lineage Tracking](https://datahubproject.io/docs/generated/lineage/lineage-feature-guide):** Tools to track the origin and transformations of metrics, ensuring they align with standardized definitions.
-    -
-![Screenshot 2024-07-10 at 12.07.28 PM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f818df0d-1067-44ab-99e1-8cf45d930c01/39503957-ad64-4d2d-a5b2-b140abfc1f6c/Screenshot_2024-07-10_at_12.07.28_PM.png)
 
 By implementing these solutions, you can ensure that your business metrics are consistently defined and accurately used across all teams, supporting reliable analysis and decision-making.
 
diff --git a/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx b/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx
index ca34d89df8701d..27067cb3930ebc 100644
--- a/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx
+++ b/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx
@@ -57,7 +57,7 @@ const customerCardContent = [
         3. Community-driven project which continually evolves with industry trends and best practices
       </>
     ),
-    to: "https://www.acryldata.io/blog/data-contracts-in-datahub-combining-verifiability-with-holistic-data-management?utm_source=datahub&utm_medium=referral&utm_content=blog",
+    to: "https://youtu.be/wsCFnElN_Wo?si=i-bNAQAsbHJq5O9-",
   },
   {
     customer: "Airtel",
@@ -75,7 +75,7 @@ const customerCardContent = [
         DataHub to take their data mesh implementation to the next level.
       </>
     ),
-    to: "https://youtu.be/wsCFnElN_Wo?si=i-bNAQAsbHJq5O9-",
+    to: "https://www.youtube.com/watch?v=yr24mM91BN4",
   },
 ];