feat(docs-site) datahub homepage v2

docs-website/adoptionStoriesIndexes.json

@@ -37,7 +37,7 @@
     {
       "name": "Optum",
       "slug": "optum",
-      "imageUrl": "/img/logos/companies/optum.jpg",
+      "imageUrl": "/img/logos/companies/optum.png",
       "imageSize": "medium",
       "link": "https://opensource.optum.com/blog/2022/03/23/data-mesh-via-datahub",
       "linkType": "blog",

docs-website/docusaurus.config.js

@@ -3,7 +3,7 @@ const isSaas = process.env.DOCUSAURUS_IS_SAAS === "true";
 
 module.exports = {
   title: process.env.DOCUSAURUS_CONFIG_TITLE || "DataHub",
-  tagline: "A Metadata Platform for the Modern Data Stack",
+  tagline: "The #1 Open Source Metadata Platform",
   url: process.env.DOCUSAURUS_CONFIG_URL || "https://datahubproject.io",
   baseUrl: process.env.DOCUSAURUS_CONFIG_BASE_URL || "/",
   onBrokenLinks: "throw",
@@ -55,16 +55,16 @@ module.exports = {
   },
 
   themeConfig: {
-    ...(!isSaas && {
-      announcementBar: {
-        id: "announcement",
-        content:
-          '<div><img src="/img/acryl-logo-white-mark.svg" /><p><strong>DataHub Cloud</strong><span> &nbsp;Acryl Data delivers an easy to consume DataHub platform for the enterprise</span></p></div> <a href="https://www.acryldata.io/datahub-sign-up?utm_source=datahub&utm_medium=referral&utm_campaign=acryl_signup" target="_blank" class="button button--primary">Sign Up for DataHub Cloud&nbsp;→</a>',
-        backgroundColor: "#070707",
-        textColor: "#ffffff",
-        isCloseable: false,
-      },
-    }),
+    // ...(!isSaas && {
+    //   announcementBar: {
+    //     id: "announcement",
+    //     content:
+    //       '<div><img src="/img/acryl-logo-white-mark.svg" /><p><strong>DataHub Cloud</strong><span> &nbsp;Acryl Data delivers an easy to consume DataHub platform for the enterprise</span></p></div> <a href="https://www.acryldata.io/datahub-sign-up?utm_source=datahub&utm_medium=referral&utm_campaign=acryl_signup" target="_blank" class="button button--primary">Sign Up for DataHub Cloud&nbsp;→</a>',
+    //     backgroundColor: "#070707",
+    //     textColor: "#ffffff",
+    //     isCloseable: false,
+    //   },
+    // }),
     navbar: {
       title: null,
       logo: {

docs-website/package.json

@@ -42,6 +42,7 @@
     "docusaurus-graphql-plugin": "0.5.0",
     "docusaurus-plugin-sass": "^0.2.1",
     "dotenv": "^16.0.1",
+    "framer-motion": "^11.5.4",
     "markdown-link-check": "^3.11.2",
     "markprompt": "^0.1.7",
     "react": "^18.2.0",

docs-website/src/pages/_components/CaseStudy/case-study.module.scss

@@ -0,0 +1,209 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  background: #F4F4F5;
+  font-family: "Manrope";
+}
+.case_study {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  margin: 5rem auto;
+
+  .case_study_heading {
+    text-align: center;
+    font-family: "Manrope";
+
+    div {
+      font-size: 2.5rem;
+      line-height: normal;
+    }
+    p {
+      font-size: 1.25rem;
+      margin-top: 10px;
+    }
+  }
+
+  .card_row::-webkit-scrollbar {
+    display: none;
+  }
+  .card_row {
+    margin-top: 8px;
+    overflow-x: scroll;
+    width: 100vw;
+    scrollbar-width: none;
+    display: flex;
+
+    .card_row_wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 10vw;
+      flex: 1;
+    }
+    .cardLink {
+      color: #000;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    .card {
+      display: flex !important;
+      flex-shrink: 0;
+      justify-content: space-between;
+      flex-direction: column;
+      position: relative;
+      width: 340px !important;
+      height: 320px !important;
+      border-radius: 24px;
+      background: white;
+      padding: 8px;
+      margin-right: 20px;
+      transition: box-shadow .2s ease-in-out;
+      transition: opacity .2s ease-in-out;
+
+      &:hover {
+        box-shadow: 0px 0px 4px 0px #0000001C;
+        opacity: .9;
+      }
+
+      .card_image  {
+        width: 100%;
+        height: 14rem;
+
+        border-radius: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+        background-color: #25252e;
+
+        img {
+          object-fit: center;
+          max-width: 40%;
+          max-height: 40%;
+          z-index: 10;
+          filter: brightness(2);
+          opacity: .9;
+        }
+        .cardImageBackground {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          z-index: 0;
+          background-size: cover;
+          opacity: .15;
+        }
+      }
+
+      .card_tag {
+        position: absolute;
+        right: 1.2rem;
+        top: 1.2rem;
+        background-color: #edf2ff80;
+        color: #FFF;
+        font-size: 0.75rem;
+        font-family: 'Manrope';
+        font-weight: 600;
+        padding: 0.1rem 0.5rem;
+        border-radius: 0.5rem;
+        z-index: 10;
+      }
+      .card_heading_div {
+        text-align: start;
+        padding: 12px;
+
+        .card_heading {
+          font-family: "Manrope";
+          font-size: 1.1rem;
+          font-weight: 600;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          margin-bottom: 2px;
+        }
+        .card_para {
+          font-size: .9rem;
+          line-height: normal;
+          display: -webkit-box;
+          line-clamp: 2;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          opacity: .75;
+        }
+      }
+    }
+  }
+
+  .bottom_line {
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #12b0fb;
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin-top: 50px;
+    margin-bottom: 10px;
+
+    span {
+      line-height: 10px;
+      font-size: 1.5rem;
+      margin-left: 10px;
+    }
+  }
+}
+
+@media (max-width: 800px) {
+  .case_study {
+    .case_study_heading {
+      text-align: center;
+      font-family: "Manrope";
+
+      div {
+        width: 70%;
+        margin: auto;
+        font-size: 2rem;
+        line-height: normal;
+        font-weight: 400;
+      }
+      p {
+        width: 60%;
+        margin: auto;
+        font-size: 1.1rem;
+        line-height: 1.5rem;
+        margin-top: 12px;
+      }
+    }
+
+    .card_row {
+      margin-top: 24px;
+
+      .card_row_wrapper {
+        padding: 0 5vw;
+      }
+    }
+
+    .bottom_line {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #12b0fb;
+      font-size: 1.1rem;
+      font-weight: 500;
+      margin-top: 50px;
+      margin-bottom: 10px;
+
+      span {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}

docs-website/src/pages/_components/CaseStudy/caseStudyContent.js

@@ -0,0 +1,74 @@
+const caseStudyData = [
+  {
+    title: "Enhancing Extensibility",
+    description:
+      "How Netflix is Collaborating with DataHub to Enhance its Extensibility.",
+    tag: "Technology",
+    backgroundImage:
+      "https://miro.medium.com/v2/resize:fit:1400/format:webp/1*iUnFujzVqMBpK41z32-Ctw.png",
+    image: "https://datahubproject.io/img/logos/companies/netflix.png",
+    link: "https://datahubproject.io/adoption-stories/#netflix",
+  },
+  {
+    title: "Scaling Data Governance",
+    description:
+      "How VISA Uses DataHub to Scale Data Governance.",
+    tag: "Finance",
+    backgroundImage:
+      "https://miro.medium.com/v2/resize:fit:2000/format:webp/1*mtC4j8J-jumJKWg8RuR6xQ@2x.png",
+    image: "https://datahubproject.io/img/logos/companies/visa.png",
+    link: "https://datahubproject.io/adoption-stories/#visa",
+  },
+  {
+    title: "Ensuring Data Reliability",
+    description:
+      "How Notion Uses DataHub Cloud to Ensure Data Reliability.",
+    tag: "Technology",
+    backgroundImage:
+      "https://www.notion.so/cdn-cgi/image/format=webp,width=1920/front-static/pages/product/super-duper/hero-illo.png",
+    image: "https://boost.space/wp-content/uploads/2023/08/notion.png",
+    link: "https://datahubproject.io/adoption-stories/#notion",
+  },
+  {
+    title: "Working with Petabyte Scale Healthcare Data",
+    description:
+      "Enabling the Data Mesh via DataHub to do work on some of healthcare’s more impactful problems.",
+    tag: "Healthcare",
+    backgroundImage:
+      "https://opensource.optum.com/static/images/mesh-overview-e26ea2aaa8d3dbb1f1771b50f4e31449.png",
+    image: "/img/logos/companies/optum.png",
+    link: "https://datahubproject.io/adoption-stories/#optum",
+  },
+  {
+    title: "Exploring Airtel's shift to a decentralized data architecture.",
+    description:
+      "Discover how DataHub has become integral to Airtel's datamesh architecture.",
+    tag: "Telecommunications",
+    backgroundImage:
+      "https://upload.wikimedia.org/wikipedia/commons/3/3a/Airtel_logo-01.png",
+    image: "/img/logos/companies/airtel.png",
+    link: "https://datahubproject.io/adoption-stories/#airtel",
+  },
+  {
+    title: "Leveling Up Data Management.",
+    description:
+      "DataHub's role in improving data management, tracing data lineage, and ensuring quality.",
+    tag: "Gaming",
+    backgroundImage:
+      "https://upload.wikimedia.org/wikipedia/en/thumb/7/7b/Zynga.svg/1200px-Zynga.svg.png",
+    image: "/img/logos/companies/zynga.png",
+    link: "https://datahubproject.io/adoption-stories/#zynga",
+  },
+  {
+    title: "And many more...",
+    description:
+      "See our adoption stories page for more.",
+    tag: "",
+    backgroundImage:
+      "",
+    image: "",
+    link: "https://datahubproject.io/adoption-stories/",
+  },
+];
+
+export default caseStudyData;

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

@@ -0,0 +1,54 @@
+import React from "react";
+import styles from "./case-study.module.scss";
+import Link from '@docusaurus/Link'
+import { Carousel } from "antd";
+import caseStudyData from "./caseStudyContent";
+
+
+const CaseStudy = () => {
+  return (
+    <div className={styles.container}>
+      {/* Section-1 */}
+      <div className={styles.case_study}>
+        <div className={styles.case_study_heading}>
+          <div>See how industry leaders use Datahub</div>
+          <p>Across finance, healthcare, e-commerce, and countless more.</p>
+        </div>
+
+        <div className={styles.card_row}>
+          <div className={styles.card_row_wrapper} >
+            {caseStudyData.map((caseStudy) => (
+              <div className={styles.card} key={caseStudy.link}>
+                <a className={styles.cardLink} href={caseStudy.link} style={caseStudy.backgroundImage ? null : {
+                  opacity: .5
+                }}>
+                  {caseStudy.tag ? <span className={styles.card_tag}>{caseStudy.tag}</span> : null}
+                  <div className={styles.card_image} style={{ backgroundColor: caseStudy.backgroundImage ? null : '#eee' }}>
+                    <img src={caseStudy.image} alt="" />
+                    <div className={styles.cardImageBackground} style={{ backgroundImage: `url(${caseStudy.backgroundImage})` }} />
+                  </div>
+                  <div className={styles.card_heading_div}>
+                    <div className={styles.card_heading}>
+                      <span>{caseStudy.title}</span>
+                    </div>
+                    <div
+                      className={styles.card_para}
+                      dangerouslySetInnerHTML={{
+                        __html: caseStudy.description,
+                      }}
+                    />
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+        <Link className={styles.bottom_line} to="/adoption-stories">
+          See all adoption stories →
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default CaseStudy;