docs: Refactor customer stories section

docs-website/docusaurus.config.js

@@ -141,8 +141,8 @@ module.exports = {
               label: "YouTube",
             },
             {
-              href: "https://www.youtube.com/playlist?list=PLdCtLs64vZvGCKMQC2dJEZ6cUqWsREbFi",
-              label: "Case Studies",
+              href: "/docs/what-is-datahub/customer-stories",
+              label: "Adoption Stories",
             },
             {
               href: "https://www.youtube.com/playlist?list=PLdCtLs64vZvErAXMiqUYH9e63wyDaMBgg",

docs-website/package.json

@@ -48,6 +48,7 @@
     "react-dom": "18.2.0",
     "sass": "^1.43.2",
     "swc-loader": "^0.2.6",
+    "swiper": "^11.1.4",
     "uuid": "^9.0.0"
   },
   "browserslist": {

docs-website/src/pages/_components/Hero/hero.module.scss

@@ -42,58 +42,3 @@
     }
   }
 }
-
-.quickLinks {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  font-weight: bold;
-  margin-bottom: -2.5vh;
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-
-  > * {
-    padding: 0.5rem 1rem;
-    display: inline-block;
-
-    @media (min-width: 768px) {
-      padding: 0 1rem;
-    }
-  }
-}
-
-.quickLinksLabel {
-  display: flex;
-  align-items: center;
-  svg {
-    width: 24px;
-    height: 24px;
-    color: var(--ifm-text-color) !important;
-    margin-right: 0.5rem;
-  }
-}
-
-.quickstartContent {
-  text-align: center;
-  padding: 2rem 0;
-  height: 100%;
-  margin: 2rem 0;
-  background: #34394d;
-  border-radius: var(--ifm-card-border-radius);
-}
-
-.quickstartTitle {
-  color: #fafafa;
-}
-
-.quickstartSubtitle {
-  font-size: 1.1rem;
-  color: gray;
-}
-
-.quickstartCodeblock {
-  text-align: left;
-  padding: 0 20vh;
-}

docs-website/src/pages/_components/Hero/index.js

@@ -7,8 +7,8 @@ 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";
 import TownhallButton from "../TownhallButton";
+import { Section } from "../Section";
 
 const HeroAnnouncement = ({ message, linkUrl, linkText }) => (
   <div className={clsx("hero__alert alert alert--primary", styles.hero__alert)}>
@@ -50,33 +50,6 @@ const Hero = ({}) => {
             <TownhallButton />
           </div>
         </div>
-        <CardCTAs />
-        <div className={styles.quickstartContent}>
-          <h1 className={styles.quickstartTitle}>Get Started Now</h1>
-          <p className={styles.quickstartSubtitle}>Run the following command to get started with DataHub.</p>
-          <div className={styles.quickstartCodeblock}>
-            <CodeBlock className={"language-shell"}>
-              python3 -m pip install --upgrade pip wheel setuptools <br />
-              python3 -m pip install --upgrade acryl-datahub <br />
-              datahub docker quickstart
-            </CodeBlock>
-          </div>
-          <Link className="button button--primary button--md" to={useBaseUrl("docs/quickstart")}>
-            DataHub Quickstart Guide
-          </Link>
-          <Link className="button button--secondary button--md" to={useBaseUrl("docs/deploy/kubernetes")}>
-            Deploying With Kubernetes
-          </Link>
-        </div>
-        <div className={clsx("card", styles.quickLinks)}>
-          <div className={styles.quickLinksLabel}>
-            <QuestionCircleOutlined />
-            Learn
-          </div>
-          <Link to={useBaseUrl("docs/")}>What is DataHub?</Link>
-          <Link to={useBaseUrl("docs/architecture/architecture")}>How is DataHub architected?</Link>
-          <Link to="https://demo.datahubproject.io">See DataHub in action</Link>
-        </div>
       </div>
     </header>
   );