docs: add customer stories page (datahub-project#10600)

Co-authored-by: Harshal Sheth <[email protected]>

docs-website/docusaurus.config.js

@@ -98,6 +98,10 @@ module.exports = {
               to: "/champions",
               label: "Champions",
             },
+            {
+              label: "Share Your Journey",
+              href: "/customer-stories-survey",
+            },
           ],
         },
         {

docs-website/sidebars.js

@@ -31,6 +31,7 @@ module.exports = {
           label: "Demo",
           href: "https://demo.datahubproject.io/",
         },
+        "docs/what-is-datahub/customer-stories",
         "docs/what-is-datahub/datahub-concepts",
       ],
     },

docs-website/src/pages/customer-stories-survey/index.js

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import Layout from '@theme/Layout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function CustomerStoriesSurvey() {
+    const { siteConfig = {} } = useDocusaurusContext();
+
+    useEffect(() => {
+        const script = document.createElement('script');
+        script.src = "//js.hsforms.net/forms/embed/v2.js";
+        script.async = true;
+        script.type = 'text/javascript';
+        document.body.appendChild(script);
+
+        script.onload = () => {
+            if (window.hbspt) {
+                window.hbspt.forms.create({
+                    region: "na1",
+                    portalId: "14552909",
+                    formId: "087ef03d-e47e-4814-b458-b30e3e02b623",
+                    target: '#hubspotForm' // Targeting the div with the specific ID
+                });
+            }
+        };
+
+        return () => {
+            document.body.removeChild(script);
+        };
+    }, []);
+
+    return (
+        <Layout
+            title={siteConfig.tagline}
+            description="Description of the page">
+            <header className={"hero"}>
+                <div className="container">
+                    <div className="hero__content">
+                        <h1>We Want To Hear Your Journey!</h1>
+                        <div style={{ fontSize: "18px" }}>Share Your DataHub Journey with Our Community.</div>
+                        <div id="hubspotForm" style={{ width: "90%", maxWidth:"40rem", margin: "3rem auto"}}></div> 
+                    </div>
+                </div>
+            </header>
+        </Layout>
+    );
+}
+
+export default CustomerStoriesSurvey;

docs-website/src/pages/docs/_components/CustomerCard/customercard.module.scss

@@ -0,0 +1,56 @@
+.card {
+  color: var(--ifm-hero-text-color);
+  padding: 0;
+  margin: 0rem 3rem 2rem 0rem;
+  text-decoration: none !important;
+
+  .card_button {
+     padding: 0rem 0rem 0rem 1rem;
+     text-align: right;
+  }
+
+  .card_img {
+    justify-content: center;
+    display: flex;
+    height: 250px;
+    margin: 0;
+    position: relative;
+    text-align: center;
+  }
+
+  .card_body {
+    padding: 2rem 3rem 2rem 3rem;
+
+    .card_description {
+     min-height: 20rem;
+    }
+  }
+
+  .card_overlay_text {
+      position: absolute;
+      text-align: left;
+      width: 80%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+
+    .card_customer {
+       font-size: 3.2rem;
+       font-weight: 800;
+       line-height: 1.2;
+
+    }
+    .card_title {
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+
+  }
+
+  img {
+    object-fit: cover;
+    filter: brightness(50%);
+  }
+
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./customercard.module.scss";
+import Link from "@docusaurus/Link";
+
+const CustomerCard = ({ customer, title, imgUrl, description, to,}) => {
+  return (
+        <div className="col col--6">
+            <div className={clsx("card", styles.card)}>
+              <div className={styles.card_img}>
+                  <img src={imgUrl} alt={customer} />
+                  <div className={styles.card_overlay_text}>
+                    <div class={styles.card_customer}> {customer}</div>
+                    <div class={styles.card_title}> {title}</div>
+                  </div>
+              </div>
+              <div className={styles.card_body}>
+                <p class={styles.card_description}>{description}</p>
+                <div className={styles.card_button}>
+                    <Link className="button button--secondary button--md" href={to} target="_blank">
+                      Discover {customer}'s Story
+                    </Link>
+                </div>
+              </div>
+          </div>
+      </div>
+  );
+};
+
+export default CustomerCard;

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

@@ -0,0 +1,96 @@
+import React from "react";
+import CustomerCard from '../CustomerCard'
+
+const customerCardContent = [
+  {
+    customer: "Netflix",
+    imgUrl: "/img/assets/netflix.jpg",
+    title: "How they are contributing to DataHub to make it more extensible",
+    description: (
+      <>
+        <i>
+          "DataHub gave us the extensibility features we needed to define new
+          entity types easily and augment existing ones.
+          DataHub performed exceptionally well in managing our traffic load and data
+          volume. It offers <b> a great developer experience, a well-documented
+          taxonomy, and — very importantly — solid community support.</b>"
+        <br />
+        <br />
+        — Ajoy Majumdar, Software Architect at Netflix
+        </i>
+        <br />
+      </>
+    ),
+    to: "https://youtu.be/ejcO7hdX0lk?si=8iPjrPeBZq5KNdb-",
+  },
+  {
+    customer: "Visa",
+    imgUrl: "/img/assets/travel.jpg",
+    title: "How to use DataHub to scale your Data Governance",
+    description: (
+      <>
+        <i>
+          "We found DataHub to provide excellent coverage for our needs. What we
+          appreciate most about DataHub is <b>its powerful API platform.</b>"
+        <br />
+        <br />
+        — Jean-Pierre Dijcks, Sr. Dir. Product Management at VISA
+        </i>
+        <br />
+      </>
+    ),
+    to: "https://youtu.be/B6CplqnIkFw?si=jrrr04cV5rdxO6Ra",
+  },
+  {
+    customer: "MediaMarkt Saturn",
+    imgUrl: "/img/assets/business.jpg",
+    title: "Building Data Access Management within DataHub",
+    description: (
+      <>
+        Europe’s #1 consumer electronics retailer implemented DataHub for three reasons:
+        <br />
+        <br />
+        1. DataHub provides an extremely <b>flexible and customizable metadata platform at scale </b>
+        <br />
+        2. Open-source means lower cost to implement and removes the headache of license management
+        <br />
+        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",
+  },
+  {
+    customer: "Airtel",
+    imgUrl: "/img/assets/phonecall.jpg",
+    title: "DataHub is the Bedrock of Data Mesh at Airtel",
+    description: (
+      <>
+        Airtel is a leading global telecommunication provider. DataHub is the
+        bedrock of Data Mesh at Airtel by providing the requisite governance and
+        metadata management functionality to <b>ensure their Data Products should
+        are discoverable, addressable, trustworthy, self-describing, and secure.</b>
+        <br />
+        <br />
+        Get a closer look at how the Airtel team has successfully integrated
+        DataHub to take their data mesh implementation to the next level.
+      </>
+    ),
+    to: "https://youtu.be/wsCFnElN_Wo?si=i-bNAQAsbHJq5O9-",
+  },
+];
+
+const CustomerCardSection = () => {
+  return (
+    <div style={{ padding: "2vh 0" }}>
+      <div className="container" style={{ padding: "0" }}>
+        <div className="row row--no-gutters">
+            {customerCardContent.map((props, idx) => (
+                <CustomerCard key={idx} {...props} />
+              ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerCardSection;

docs/what-is-datahub/customer-stories.md

@@ -0,0 +1,17 @@
+import CustomerCardSection from '@site/src/pages/docs/_components/CustomerCardSection';
+
+# Customer Stories
+
+Meet the DataHub users who have shared their stories with us.
+
+:::note Share Your DataHub Journey
+We're excited to hear about your experience with DataHub. Share your story with us!
+<a
+    className='button button--secondary button--md'
+    style= {{ textDecoration: 'none' }}
+    href="/customer-stories-survey">
+Share Your Story
+</a>
+:::
+
+<CustomerCardSection />