forked from datahub-project/datahub
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs-site) datahub homepage v2 (datahub-project#11342)
Co-authored-by: yoonhyejin <[email protected]> Co-authored-by: Sumit Patil <[email protected]> Co-authored-by: kushagra-apptware <[email protected]>
- Loading branch information
4 people
authored
Sep 18, 2024
1 parent
8972270
commit cc36c96
Showing
64 changed files
with
3,529 additions
and
231 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
209 changes: 209 additions & 0 deletions
209
docs-website/src/pages/_components/CaseStudy/case-study.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } | ||
| } |
74 changes: 74 additions & 0 deletions
74
docs-website/src/pages/_components/CaseStudy/caseStudyContent.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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*[email protected]", | ||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.