From aff1e7a620352071f3b2e12c5598ec689652cc9d Mon Sep 17 00:00:00 2001
From: Jeff Merrick <jeff@wireform.io>
Date: Fri, 22 Sep 2023 00:53:42 -0500
Subject: [PATCH] docs: add homepage ctas (#8866)

Co-authored-by: Harshal Sheth <hsheth2@gmail.com>
---
 .../_components/CardCTAs/cardCTAs.module.scss | 24 +++++++++
 .../src/pages/_components/CardCTAs/index.js   | 52 +++++++++++++++++++
 .../src/pages/_components/Hero/index.js       |  9 +++-
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 docs-website/src/pages/_components/CardCTAs/cardCTAs.module.scss
 create mode 100644 docs-website/src/pages/_components/CardCTAs/index.js

diff --git a/docs-website/src/pages/_components/CardCTAs/cardCTAs.module.scss b/docs-website/src/pages/_components/CardCTAs/cardCTAs.module.scss
new file mode 100644
index 00000000000000..fcd3666d03ddc9
--- /dev/null
+++ b/docs-website/src/pages/_components/CardCTAs/cardCTAs.module.scss
@@ -0,0 +1,24 @@
+.flexCol {
+  display: flex;
+}
+
+.ctaCard {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  row-gap: 1rem;
+  padding: 1rem;
+  &:hover {
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-primary);
+    background-color: var(--ifm-background-surface-color);
+  }
+  margin-bottom: 1rem;
+  flex: 1;
+}
+
+.ctaHeading {
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+}
diff --git a/docs-website/src/pages/_components/CardCTAs/index.js b/docs-website/src/pages/_components/CardCTAs/index.js
new file mode 100644
index 00000000000000..d87c803b428182
--- /dev/null
+++ b/docs-website/src/pages/_components/CardCTAs/index.js
@@ -0,0 +1,52 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./cardCTAs.module.scss";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { ArrowRightOutlined } from "@ant-design/icons";
+
+const cardsContent = [
+  {
+    label: "Data Mesh",
+    title: "Data Products, Delivered",
+    url: "https://www.acryldata.io/blog/data-products-in-datahub-everything-you-need-to-know",
+  },
+  {
+    label: "Data Contracts",
+    title: "End-to-end Reliability in Data",
+    url: "https://www.acryldata.io/blog/data-contracts-in-datahub-combining-verifiability-with-holistic-data-management",
+  },
+  {
+    label: "Shift Left",
+    title: "Developer-friendly Data Governance",
+    url: "https://www.acryldata.io/blog/the-3-must-haves-of-metadata-management-part-2",
+  },
+];
+
+const Card = ({ label, title, url }) => {
+  return (
+    <div className={clsx("col col--4 flex", styles.flexCol)}>
+      <a href={url} target="_blank" className={clsx("card", styles.ctaCard)}>
+        <div>
+          <strong>{label}</strong>
+          <h3 className={styles.ctaHeading}>{title}&nbsp;</h3>
+        </div>
+        <ArrowRightOutlined />
+      </a>
+    </div>
+  );
+};
+
+const CardCTAs = () =>
+  cardsContent?.length > 0 ? (
+    <div style={{ padding: "2vh 0" }}>
+      <div className="container">
+        <div className="row">
+          {cardsContent.map((props, idx) => (
+            <Card key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+export default CardCTAs;
diff --git a/docs-website/src/pages/_components/Hero/index.js b/docs-website/src/pages/_components/Hero/index.js
index b5fa04c80faee1..22b406dce037ef 100644
--- a/docs-website/src/pages/_components/Hero/index.js
+++ b/docs-website/src/pages/_components/Hero/index.js
@@ -7,6 +7,7 @@ import { useColorMode } from "@docusaurus/theme-common";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import styles from "./hero.module.scss";
 import CodeBlock from "@theme/CodeBlock";
+import CardCTAs from "../CardCTAs";
 
 const HeroAnnouncement = ({ message, linkUrl, linkText }) => (
   <div className={clsx("hero__alert alert alert--primary", styles.hero__alert)}>
@@ -33,7 +34,12 @@ const Hero = ({}) => {
               complexity of your data ecosystem.
             </p>
             <p className="hero__subtitle">
-Built with ❤️ by <img src="https://datahubproject.io/img/acryl-logo-light-mark.png" style={{'vertical-align': 'text-top;'}} width="25"/> <a href="https://acryldata.io" target="blank" rel="noopener noreferrer">Acryl Data</a> and <img src="https://datahubproject.io/img/LI-In-Bug.png" width="25"/> LinkedIn.
+              Built with ❤️ by{" "}
+              <img src="https://datahubproject.io/img/acryl-logo-light-mark.png" style={{ "vertical-align": "text-top;" }} width="25" />{" "}
+              <a href="https://acryldata.io" target="blank" rel="noopener noreferrer">
+                Acryl Data
+              </a>{" "}
+              and <img src="https://datahubproject.io/img/LI-In-Bug.png" width="25" /> LinkedIn.
             </p>
             <Link className="button button--primary button--md" to={useBaseUrl("docs/")}>
               Get Started →
@@ -43,6 +49,7 @@ Built with ❤️ by <img src="https://datahubproject.io/img/acryl-logo-light-ma
             </Link>
           </div>
         </div>
+        <CardCTAs />
         <Image className="hero__image" img={require(`/img/diagrams/datahub-flow-diagram-${colorMode}.png`)} alt="DataHub Flow Diagram" />
         <div className="quickstart__content">
           <h1 className="quickstart__title">Get Started Now</h1>