fix: Revamp features page

docs-website/src/pages/docs/_components/FeatureCard/featurecard.module.scss

@@ -0,0 +1,38 @@
+.feature {
+  flex-direction: row;
+  padding: 1.75rem;
+  color: var(--ifm-hero-text-color);
+  margin: 0rem 2rem 1rem 0rem;
+  min-height: 14rem;
+  max-height: 15rem; 
+  overflow: hidden;
+  text-decoration: none !important;
+
+  img {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.75rem;
+  }
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.75rem;
+  }
+  strong,
+  span {
+    display: block;
+    margin-bottom: 0.75rem;
+  }
+  strong {
+    font-weight: 600;
+    font-size: 1.1rem;
+  }
+
+  span {
+    font-size: 1rem;
+    line-height: 1.25em;
+  }
+  &:hover {
+    border-color: var(--ifm-color-primary);
+  }
+}

docs-website/src/pages/docs/_components/FeatureCard/index.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./featurecard.module.scss";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Link from "@docusaurus/Link";
+
+const FeatureCard = ({icon, title, description, to}) => {
+return (
+    <div className="col col--4">
+      <Link to={useBaseUrl(to)} className={clsx("card", styles.feature)}>
+        <div> 
+          {icon}
+          <strong>{title}&nbsp;→</strong>
+          <span>{description}</span>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default FeatureCard;

docs-website/src/pages/docs/_components/FeatureCardSection/featurecardsection.module.scss

@@ -0,0 +1,36 @@
+
+
+.feature {
+  flex-direction: row;
+  padding: 0.675rem;
+  color: var(--ifm-text-color);
+  margin: 0.5rem;
+  min-height: calc(100% - 1rem);
+  text-decoration: none !important;
+  img {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.75rem;
+  }
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.75rem;
+  }
+  strong,
+  span {
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+  strong {
+    font-weight: 600;
+  }
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+  }
+  &:hover {
+    border-color: var(--ifm-color-primary);
+  }
+}

docs-website/src/pages/docs/_components/FeatureCardSection/index.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+import FeatureCard from '../FeatureCard'
+import {
+  EyeTwoTone,
+  HeartTwoTone,
+  ApiTwoTone,
+  AlertTwoTone,
+  CompassTwoTone,
+  ProfileTwoTone,
+} from "@ant-design/icons";
+
+const featureCardContent =  [
+{
+    title: "Data Discovery",
+    description: "Search your entire data ecosystem, including dashboards, datasets, ML models, and raw files.",
+    to: "docs/how/search",
+    icon: <EyeTwoTone />
+  },
+{
+    title: "Data Governance",
+    description: "Define ownership and track PII.",
+    to: "https://www.acryldata.io/blog/the-3-must-haves-of-metadata-management-part-2?utm_source=datahub&utm_medium=referral&utm_content=blog",
+    icon: <CompassTwoTone />
+  },
+{
+    title: "Data Quality Control",
+    description: "Improve data quality through metadata tests, assertions, data freshness checks, and data contracts.",
+    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",
+    icon: <AlertTwoTone />
+  },
+{
+  title: "UI-based Ingestion",
+  description: "Easily set up integrations in minutes using DataHub's intuitive UI-based ingestion feature.",
+  to: "docs/ui-ingestion",
+  icon: <ProfileTwoTone />
+},
+{
+  title: "APIs and SDKs",
+  description: "For users who prefer programmatic control, DataHub offers a comprehensive set of APIs and SDKs.",
+  to: "docs/api/datahub-apis",
+  icon: <ApiTwoTone />
+},
+{
+  title: "Vibrant Community",
+  description: "Our community provides support through office hours, workshops, and a Slack channel.",
+  to: "docs/slack",
+  icon: <HeartTwoTone />
+}
+]
+
+const FeatureCards = () => {
+return (
+    <div style={{ padding: "2vh 0" }}>
+      <div className="container" style={{ padding: "0"}}>
+        <div className="row row--no-gutters">
+          {featureCardContent.map((props, idx) => (
+            <FeatureCard key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureCards;

docs-website/src/pages/docs/_components/QuickstartCard/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./quickstartcard.module.scss";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+
+const QuickstartCard = ({ icon, title, to, color, fontColor }) => {
+  return (
+    <div className="col col--6">
+      <Link to={to} className={clsx("card", styles.feature)} style={{ background: color, color: fontColor}}>
+        <img src={useBaseUrl(`/img/${icon}.svg`)} />
+        <div style={{ margin: "auto 0"}}>
+          <strong>{title}&nbsp;→</strong>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+
+export default QuickstartCard;

docs-website/src/pages/docs/_components/QuickstartCard/quickstartcard.module.scss

@@ -0,0 +1,48 @@
+.feature {
+  flex-direction: row;
+  height: 10rem;
+  flex-shrink: 0;
+  padding: 3rem;
+  color: var(--ifm-text-color);
+  margin: 0rem 2rem 1rem 0rem;
+  min-height: calc(100% - 1rem);
+  text-decoration: none !important;
+
+
+  img {
+    width: 3rem;
+    height: 3rem;
+    margin: auto 1rem;
+  }
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.75rem;
+  }
+  strong,
+  span {
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+  strong {
+    font-weight: 600;
+    padding: auto 0;
+  }
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+  }
+  &:hover {
+    border-color: var(--ifm-color-primary);
+  }
+
+  .quickstart-text {
+    margin: auto 0;
+  }
+
+}
+
+.quickstart-text {
+  margin: auto 0;
+}

docs-website/src/pages/docs/_components/QuickstartCards/index.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import QuickstartCard from '../QuickstartCard'
+
+const quickstartContent =  [
+{
+    title: "Quickstart with DataHub",
+    icon: "datahub-logo-color-mark",
+    to: "quickstart",
+    color: '#FFF',
+    fontColor: '#091013',
+  },
+{
+    title: "Learn about Managed DataHub",
+    icon: "acryl-logo-transparent-mark",
+    to: "managed-datahub/managed-datahub-overview",
+    color: '#091013',
+    fontColor: '#FFF',
+}
+]
+
+const QuickstartCards = () => {
+return (
+    <div style={{ padding: "2vh 0" }}>
+      <div className="container" style={{ padding: "0"}}>
+        <div className="row row--no-gutters">
+          {quickstartContent.map((props, idx) => (
+            <QuickstartCard key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuickstartCards;

docs-website/src/pages/docs/_components/QuickstartCards/quickstartcards.module.scss

@@ -0,0 +1,34 @@
+.feature {
+  flex-direction: row;
+  padding: 0.675rem;
+  color: var(--ifm-text-color);
+  margin: 0.5rem;
+  min-height: calc(100% - 1rem);
+  text-decoration: none !important;
+  img {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.75rem;
+  }
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.75rem;
+  }
+  strong,
+  span {
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+  strong {
+    font-weight: 600;
+  }
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1.25em;
+  }
+  &:hover {
+    border-color: var(--ifm-color-primary);
+  }
+}