docs: Refactor customer stories section

docs-website/docusaurus.config.js

@@ -130,8 +130,8 @@ module.exports = {
               label: "YouTube",
             },
             {
-              href: "https://www.youtube.com/playlist?list=PLdCtLs64vZvGCKMQC2dJEZ6cUqWsREbFi",
-              label: "Case Studies",
+              href: "/docs/what-is-datahub/customer-stories",
+              label: "Customer 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/index.js

@@ -9,6 +9,8 @@ import styles from "./hero.module.scss";
 import CodeBlock from "@theme/CodeBlock";
 import CardCTAs from "../CardCTAs";
 import TownhallButton from "../TownhallButton";
+import { CompanyLogos } from "../Logos";
+import { Section } from "../Section";
 
 const HeroAnnouncement = ({ message, linkUrl, linkText }) => (
   <div className={clsx("hero__alert alert alert--primary", styles.hero__alert)}>
@@ -50,6 +52,17 @@ const Hero = ({}) => {
             <TownhallButton />
           </div>
         </div>
+        <Section title="Trusted Across the Industry">
+          <CompanyLogos />
+          <div style={{ textAlign: "center" }}>
+            <Link
+              className="button button--secondary button--md"
+              to={useBaseUrl("docs/what-is-datahub/customer-stories")}
+            >
+              Check Out Adoption Stories →
+            </Link>
+          </div>
+        </Section>
         <CardCTAs />
         <div className={styles.quickstartContent}>
           <h1 className={styles.quickstartTitle}>Get Started Now</h1>

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

@@ -1,10 +1,13 @@
-import React from "react";
 import clsx from "clsx";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-
+import React, { useRef, useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Pagination } from "swiper/modules";
 import styles from "./logos.module.scss";
 
 const companiesByIndustry = [
@@ -25,16 +28,19 @@ const companiesByIndustry = [
         name: "Airtel",
         imageUrl: "/img/logos/companies/airtel.png",
         imageSize: "large",
+        link: "https://www.youtube.com/watch?v=yr24mM91BN4&list=PLdCtLs64vZvGCKMQC2dJEZ6cUqWsREbFi&index=9",
       },
       {
         name: "Coursera",
         imageUrl: "/img/logos/companies/coursera.svg",
         imageSize: "small",
+        link: "https://www.youtube.com/watch?v=bd5v4fn4d4s",
       },
       {
         name: "Geotab",
         imageUrl: "/img/logos/companies/geotab.jpg",
         imageSize: "small",
+        link: "https://www.youtube.com/watch?v=boyjT2OrlU4",
       },
       {
         name: "ThoughtWorks",
@@ -60,11 +66,13 @@ const companiesByIndustry = [
         name: "Zynga",
         imageUrl: "/img/logos/companies/zynga.png",
         imageSize: "default",
+        link: "https://www.youtube.com/watch?v=VCU3-Hd_glI",
       },
       {
         name: "Hurb",
         imageUrl: "/img/logos/companies/hurb.png",
         imageSize: "medium",
+        link: "https://www.youtube.com/watch?v=G-xOe5OGGw4",
       },
       {
         name: "Razer",
@@ -85,6 +93,7 @@ const companiesByIndustry = [
         name: "Saxo Bank",
         imageUrl: "/img/logos/companies/saxobank.svg",
         imageSize: "default",
+        link: "https://www.youtube.com/watch?v=8EsgE8urqHI",
       },
       {
         name: "Klarna",
@@ -125,6 +134,7 @@ const companiesByIndustry = [
         name: "Adevinta",
         imageUrl: "/img/logos/companies/adevinta.png",
         imageSize: "medium",
+        link: "https://www.youtube.com/watch?v=u9DRa_5uPIM",
       },
       {
         name: "VanMoof",
@@ -135,6 +145,7 @@ const companiesByIndustry = [
         name: "Grofers",
         imageUrl: "/img/logos/companies/grofers.png",
         imageSize: "medium",
+        link: "https://www.youtube.com/watch?v=m9kUYAuezFI",
       },
       {
         name: "SpotHero",
@@ -150,6 +161,7 @@ const companiesByIndustry = [
         name: "Wolt",
         imageUrl: "/img/logos/companies/wolt.png",
         imageSize: "default",
+        link: "https://www.youtube.com/watch?v=D8XsfoZuwt0&t=75s",
       },
       {
         name: "Showroomprive.com",
@@ -180,6 +192,7 @@ const companiesByIndustry = [
         name: "Viasat",
         imageUrl: "/img/logos/companies/viasat.png",
         imageSize: "medium",
+        link: "https://www.youtube.com/watch?v=2SrDAJnzkjE",
       },
       {
         name: "DFDS",
@@ -195,6 +208,7 @@ const companiesByIndustry = [
         name: "Optum",
         imageUrl: "/img/logos/companies/optum.jpg",
         imageSize: "medium",
+        link: "https://www.youtube.com/watch?v=NuLLc88ij-s",
       },
     ],
   },
@@ -315,31 +329,74 @@ const platformLogos = [
 ];
 
 export const PlatformLogos = () => (
-  <Link to={useBaseUrl("docs/metadata-ingestion#installing-plugins/")} className={styles.marquee}>
+  <Link
+    to={useBaseUrl("docs/metadata-ingestion#installing-plugins/")}
+    className={styles.marquee}
+  >
     <div>
       {[...platformLogos, ...platformLogos].map((logo, idx) => (
-        <img src={useBaseUrl(logo.imageUrl)} alt={logo.name} title={logo.name} key={idx} className={styles.platformLogo} />
+        <img
+          src={useBaseUrl(logo.imageUrl)}
+          alt={logo.name}
+          title={logo.name}
+          key={idx}
+          className={styles.platformLogo}
+        />
       ))}
     </div>
   </Link>
 );
 
 export const CompanyLogos = () => (
   <div className={clsx("container", styles.companyLogoContainer)}>
-    <Tabs className="pillTabs">
+    <Tabs className={clsx(styles.pillTabs)}>
       {companiesByIndustry.map((industry, idx) => (
-        <TabItem value={`industry-${idx}`} label={industry.name} key={idx} default={idx === 0}>
-          <div className={styles.companyWrapper}>
+        <TabItem
+          value={`industry-${idx}`}
+          label={industry.name}
+          key={idx}
+          default={idx === 0}
+        >
+          <Swiper
+            slidesPerView={6}
+            spaceBetween={30}
+            pagination={{ clickable: true }}
+            modules={[Pagination]}
+            className={clsx("mySwiper", styles.companyWrapper)}
+          >
             {industry.companies.map((company, idx) => (
-              <img
-                src={useBaseUrl(company.imageUrl)}
-                alt={company.name}
-                title={company.name}
-                key={idx}
-                className={clsx(styles.companyLogo, styles[company.imageSize])}
-              />
+              <SwiperSlide key={idx}>
+                {company.link ? (
+                  <a
+                    href={company.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <img
+                      src={useBaseUrl(company.imageUrl)}
+                      alt={company.name}
+                      title={company.name}
+                      className={clsx(
+                        styles.companyLogo,
+                        styles.companyLogoWithLink,
+                        styles[company.imageSize]
+                      )}
+                    />
+                  </a>
+                ) : (
+                  <img
+                    src={useBaseUrl(company.imageUrl)}
+                    alt={company.name}
+                    title={company.name}
+                    className={clsx(
+                      styles.companyLogo,
+                      styles[company.imageSize]
+                    )}
+                  />
+                )}
+              </SwiperSlide>
             ))}
-          </div>
+          </Swiper>
         </TabItem>
       ))}
     </Tabs>

docs-website/src/pages/_components/Logos/logos.module.scss

@@ -1,3 +1,7 @@
+.pillTabs {
+  justify-content: center;
+}
+
 .marquee {
   width: 100%;
   overflow: hidden;
@@ -35,7 +39,6 @@
 }
 
 .companyWrapper {
-  background: #fff;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -48,13 +51,8 @@
 }
 
 .companyLogoContainer {
-  display: flex;
-  align-items: center;
   justify-content: center;
   > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     ul[role="tablist"] {
       padding: 0 1rem;
       overflow-x: auto;
@@ -79,10 +77,18 @@
   }
 }
 
+.companyLogoWithLink {
+  &:hover {
+    opacity: 1;
+    filter: grayscale(0%);
+  }
+}
+
 .companyLogo {
   width: auto;
   mix-blend-mode: luminosity;
   opacity: 0.66;
+  filter: grayscale(100%);
   margin: 2.5rem;
   height: 60px;
 

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

@@ -32,7 +32,7 @@ const quotesContent = [
 
 const Quote = ({ quote, company }) => {
   return (
-    <div className="col col--4">
+    <div className="col col--4" style={{ paddingLeft: "0", paddingRight: "2rem" }}>
       <div className={clsx("card", styles.quote)}>
         {quote}
         <div className={styles.companyLogoWrapper}>

docs-website/src/pages/_components/Quotes/quotes.module.scss

@@ -8,6 +8,7 @@
 
 .companyLogoWrapper {
   background: #fff;
+  height: 100px;
   html[data-theme="dark"] & {
     filter: invert(1);
     mix-blend-mode: exclusion;

docs-website/src/pages/index.js

@@ -6,9 +6,8 @@ import CodeBlock from "@theme/CodeBlock";
 
 import Hero from "./_components/Hero";
 import Features from "./_components/Features";
-import Quotes from "./_components/Quotes";
 import { Section, PromoSection } from "./_components/Section";
-import { PlatformLogos, CompanyLogos } from "./_components/Logos";
+import { PlatformLogos } from "./_components/Logos";
 import RoundedImage from "./_components/RoundedImage";
 
 const example_recipe = `
@@ -157,10 +156,6 @@ function Home() {
           </div>
         </div>
       </Section>
-      <Section title="Trusted Across the Industry">
-        <CompanyLogos />
-        <Quotes />
-      </Section>
     </Layout>
   ) : null;
 }

docs-website/yarn.lock

@@ -1827,7 +1827,7 @@
     "@docusaurus/theme-search-algolia" "2.4.3"
     "@docusaurus/types" "2.4.3"
 
-"@docusaurus/[email protected]":
+"@docusaurus/[email protected]", "react-loadable@npm:@docusaurus/[email protected]":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -9705,14 +9705,6 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-"react-loadable@npm:@docusaurus/[email protected]":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 react-markdown@^8.0.6:
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
@@ -10866,6 +10858,11 @@ swc-loader@^0.2.6:
   dependencies:
     "@swc/counter" "^0.1.3"
 
+swiper@^11.1.4:
+  version "11.1.4"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.4.tgz#2f8e303e8bf9e5bc40a3885fc637ae60ff27996c"
+  integrity sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==
+
 symbol-observable@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"

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

@@ -1,8 +1,10 @@
 import CustomerCardSection from '@site/src/pages/docs/_components/CustomerCardSection';
+import Quotes from "@site/src/pages/_components/Quotes";
 
 # Customer Stories
 
 Meet the DataHub users who have shared their stories with us.
+Check more stories on [DataHub YouTutbe](https://www.youtube.com/playlist?list=PLdCtLs64vZvGCKMQC2dJEZ6cUqWsREbFi).
 
 :::note Share Your DataHub Journey
 We're excited to hear about your experience with DataHub. Share your story with us!
@@ -15,3 +17,4 @@ Share Your Story
 :::
 
 <CustomerCardSection />
+<Quotes />