diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js index 734c6aef3375d..308c359e23ecb 100644 --- a/docs-website/docusaurus.config.js +++ b/docs-website/docusaurus.config.js @@ -88,7 +88,26 @@ module.exports = { }, items: [ { - to: "cloud/", + type: "dropdown", + label: "Solutions", + position: "right", + items: [ + { + to: "/solutions/discovery", + label: "Discovery", + }, + { + to: "/solutions/observability", + label: "Observability", + }, + { + to: "/solutions/governance", + label: "Governance", + }, + ] + }, + { + to: "/cloud", activeBasePath: "cloud", label: "Cloud", position: "right", diff --git a/docs-website/src/pages/_components/Community/index.js b/docs-website/src/pages/_components/Community/index.js index a4f2b2304e51e..20917332c443d 100644 --- a/docs-website/src/pages/_components/Community/index.js +++ b/docs-website/src/pages/_components/Community/index.js @@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react"; import styles from "./community.module.scss"; import useBaseUrl from "@docusaurus/useBaseUrl"; -const TARGET_COUNT = 11535; +const TARGET_COUNT = 12219; const INCREMENT = 1; const Community = () => { diff --git a/docs-website/src/pages/_components/Hero/hero.module.scss b/docs-website/src/pages/_components/Hero/hero.module.scss index c7f4ec6a0b78f..1850757bd454c 100644 --- a/docs-website/src/pages/_components/Hero/hero.module.scss +++ b/docs-website/src/pages/_components/Hero/hero.module.scss @@ -233,6 +233,9 @@ } .hero__cta { margin-top: 12px; + .cta__primary { + margin-bottom: 4px; + } } .hero__footer_cta { margin-top: 12px; diff --git a/docs-website/src/pages/_components/Hero/index.js b/docs-website/src/pages/_components/Hero/index.js index ca94203e94c06..a61b9d8a402bd 100644 --- a/docs-website/src/pages/_components/Hero/index.js +++ b/docs-website/src/pages/_components/Hero/index.js @@ -69,7 +69,7 @@ const Hero = ({ onOpenTourModal }) => {
- Book a Demo + Get Cloud {
- Get started with Core → + Get started with Open Source →
diff --git a/docs-website/src/pages/_components/QuickstartContent/index.js b/docs-website/src/pages/_components/QuickstartContent/index.js index 302fe7f5e8382..44410a3838e26 100644 --- a/docs-website/src/pages/_components/QuickstartContent/index.js +++ b/docs-website/src/pages/_components/QuickstartContent/index.js @@ -47,7 +47,7 @@ const QuickstartContent = ({}) => { >
The only platform you need.
- Unified Discovery, Observability, and Governance for Data and AI. + Unified discovery, observability, and governance for data and AI.
Eliminate breaking changes with detailed cross-platform and column-level lineage. Build confidence in your data with a comprehensive view of business, operational, and technical context, all in one place.", - image: "/img/quickstart_discovery.png", - }, - { - heading: "Observability", - title: "Build trust in your data", - description: - "Effortlessly detect data quality issues with automated checks and AI-driven anomaly detection. Notify your team where they work when issues arise and keep stakeholders in the loop with centralized incident tracking. Spend minutes, not days, resolving issues with detailed lineage, documentation, and ownership information all in one place.", - image: "/img/quickstart_observability.png", - }, - { - heading: "Governance", - title: "Minimize compliance risk, effortlessly", - description: - "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. Automate your governance program to automatically classify assets as they evolve over time. Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.", - image: "/img/quickstart_governance.png", - }, - ]; - - export default quickstartData; \ No newline at end of file + { + heading: "Discovery", + title: "Make data democratization a reality", + description: + "Enable everyone in your organization to effortlessly discover trustworthy data, with experiences tailored for each persona.Eliminate breaking changes with detailed cross-platform and column-level lineage. Build confidence in your data with a comprehensive view of business, operational, and technical context, all in one place.", + image: "/img/quickstart_discovery.png", + }, + { + heading: "Observability", + title: "Build trust in your data", + description: + "Effortlessly detect data quality issues with automated checks and AI-driven anomaly detection. Notify your team where they work when issues arise and keep stakeholders in the loop with centralized incident tracking. Spend minutes, not days, resolving issues with detailed lineage, documentation, and ownership information all in one place.", + image: "/img/quickstart_observability.png", + }, + { + heading: "Governance", + title: "Minimize compliance risk, effortlessly", + description: + "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. Automate your governance program to automatically classify assets as they evolve over time. Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.", + image: "/img/quickstart_governance.png", + }, +]; + +export default quickstartData; \ No newline at end of file diff --git a/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss b/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss index 57a3037efda19..2e0bc41af278f 100644 --- a/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss +++ b/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss @@ -259,4 +259,4 @@ } } } -} +} \ No newline at end of file diff --git a/docs-website/src/pages/_components/Trial/index.js b/docs-website/src/pages/_components/Trial/index.js index 9fc71b50336b0..bd170f3d21e6b 100644 --- a/docs-website/src/pages/_components/Trial/index.js +++ b/docs-website/src/pages/_components/Trial/index.js @@ -20,7 +20,7 @@ const Trial = ({onOpenTourModal}) => { onClick={onOpenTourModal} >Product Tour
- Get started with Core → + Get started with Open Source →
diff --git a/docs-website/src/pages/cloud/FeatureCards/index.js b/docs-website/src/pages/cloud/FeatureCards/index.js index 4a45cbcbe1717..52c7a5eec46b4 100644 --- a/docs-website/src/pages/cloud/FeatureCards/index.js +++ b/docs-website/src/pages/cloud/FeatureCards/index.js @@ -9,7 +9,7 @@ const data = { { title: "Data Discovery", icon: "/img/assets/data-discovery.svg", - cloudPageLink: "https://www.acryldata.io/acryl-datahub", + cloudPageLink: "/solutions/discovery", cloudBenefits: [ { text: "Enhanced search ranking", link: "" }, // → { text: "Personalization for every persona", link: "" }, // → @@ -27,7 +27,7 @@ const data = { { title: "Data Observability", icon: "/img/assets/data-ob.svg", - cloudPageLink: "https://www.acryldata.io/observe", + cloudPageLink: "/solutions/observability", cloudBenefits: [ { text: "Continuous data quality monitors", link: "" }, // → { text: "End-to-end data incident tracking & management", link: "" }, // → @@ -45,7 +45,7 @@ const data = { { title: "Data Governance", icon: "/img/assets/data-governance.svg", - cloudPageLink: "https://www.acryldata.io/acryl-datahub#governance", + cloudPageLink: "/solutions/governance", cloudBenefits: [ { text: "Human-assisted asset certification workflows", link: "" }, // → { text: "Automations to enforce governance standards", link: "" }, // → diff --git a/docs-website/src/pages/solutions/_components/CaseStudy/case-study.module.scss b/docs-website/src/pages/solutions/_components/CaseStudy/case-study.module.scss new file mode 100644 index 0000000000000..c41a3bde6a52a --- /dev/null +++ b/docs-website/src/pages/solutions/_components/CaseStudy/case-study.module.scss @@ -0,0 +1,176 @@ +.container { + display: flex; + flex-direction: column; + font-family: "Manrope"; +} +.case_study { + display: flex; + flex-direction: column; + width: 100vw; + margin: 5rem auto; + + .case_study_heading { + color: var(--primitives-text-text-heading, #373A47); + text-align: center; + font-family: Manrope; + font-size: 29.177px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.292px; + } + + .card_row::-webkit-scrollbar { + display: none; + } + .card_row { + overflow-x: scroll; + width: 100vw; + scrollbar-width: none; + display: flex; + margin-top: 2rem; + + .card_row_wrapper { + display: flex; + flex-direction: row; + align-items: center; + margin: auto; + } + .cardLink { + color: #000; + + &:hover { + text-decoration: none; + } + } + + .card { + max-width: 419px; + max-height: 148px; + padding: 1.2rem; + margin: 1rem 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + border-radius: var(--number-scales-2s-32, 32px); + border: 1px solid var(--semantics-bg-bg-white, #99999930); + background: var(--primitives-grays-1, #9999991a); + + transition: all .3s ease-in-out; + &:hover { + box-shadow: 0px 1px 4px 1px #0000001C; + border-color: #33333340; + background: var(--primitives-grays-1, #dddddd1a); + } + + .card_image { + border-radius: 16px; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + margin: auto; + margin-right: 16px; + + } + + .card_heading_div { + width: 70%; + padding: 12px; + + .card_heading { + color: var(--primitives-grays-9, #484C5C); + font-family: Manrope; + font-size: 1.3rem; + font-style: normal; + font-weight: 400; + line-height: normal; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + display: -webkit-box; + + } + } + } + + } + + a:hover { + text-decoration: none !important; + } + + .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"; + width: 80%; + margin: auto; + font-size: 1.5rem; + line-height: normal; + font-weight: 400; + } + + .card_row { + margin-top: 16px; + display: flex; + justify-content: flex-start; + + .card_row_wrapper { + padding: 0 0; + width: 100vh; + align-items: flex-start; + justify-content: flex-start; + } + + .card { + min-width: 240px; + padding: 0.8rem; + margin: 0.5rem; + display: flex; + + .card_image { + width: 50px; + height: 50px; + margin: 16px auto; + } + + .card_heading_div { + text-align: left; + padding: 8px; + + .card_heading { + font-size: 1rem; + line-height: 1.2rem; + } + } + } + } + + .bottom_line { + font-size: 1rem; + margin-top: 40px; + } + } +} diff --git a/docs-website/src/pages/solutions/_components/CaseStudy/index.js b/docs-website/src/pages/solutions/_components/CaseStudy/index.js new file mode 100644 index 0000000000000..9ebffa006e570 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/CaseStudy/index.js @@ -0,0 +1,34 @@ +import React from "react"; +import styles from "./case-study.module.scss"; +import clsx from "clsx"; +import Link from '@docusaurus/Link' + +const CaseStudy = ({ caseStudyContent }) => { + const { title, backgroundColor, items } = caseStudyContent; + return ( +
+
+
+ {title} +
+ +
+
+ {items.map((caseStudy) => ( + +
+ {caseStudy.alt} +
+
+
{caseStudy.title}
+
+ + ))} +
+
+
+
+ ); +}; + +export default CaseStudy; diff --git a/docs-website/src/pages/solutions/_components/Hero/hero.module.scss b/docs-website/src/pages/solutions/_components/Hero/hero.module.scss new file mode 100644 index 0000000000000..ef2d90404ed08 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Hero/hero.module.scss @@ -0,0 +1,181 @@ +.hero__container { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + background-color: #F9F9FA; + background-image: url(/img/solutions/hero-background.png); + background-position: bottom 0rem center; + background-size: contain; + background-repeat: no-repeat; + max-height: 890px; + min-height: 85vh; + border-radius: 48px; + margin: 3rem 3rem 12rem 3rem; + padding: 5rem; + + .hero__topQuote { + color: var(--primitives-text-tex-subtext, #777E99); + font-family: Manrope; + font-size: 1.2rem; + font-style: normal; + font-weight: 500; + line-height: normal; + letter-spacing: 0.2rem; + text-transform: uppercase; + margin-top: 5vh; + } + + .hero__title { + color: #373A47; + font-family: Manrope; + font-size: 4rem; + font-style: normal; + font-weight: 300; + line-height: 4.25rem; + max-width: 720px; + text-align: center; + } + + .hero__description { + color: var(--primitives-text-text-heading, #373A47); + text-align: center; + font-family: Manrope; + font-size: 1.25rem; + font-style: normal; + font-weight: 400; + line-height: 2.25rem; + max-width: 800px; + margin-top: 1rem; + } + + .cta__tertiary { + color: black; + font-size: 1rem; + margin-top: .5rem; + font-weight: 500; + } + + .cta__tertiary:hover { + color: black; + text-decoration: none; + opacity: .8; + } + + .hero__cta { + margin-top: 0rem; + display: flex; + + a { + cursor: pointer; + font-size: 1rem; + background-color: white; + padding: 4px 20px; + border-radius: 50px; + margin: 0 10px 0 0; + font-weight: 600; + text-decoration: none; + transition: background-color .2s ease-in-out; + &:hover { + opacity : 0.8; + } + } + + .cta__primary { + padding: var(--number-scales-2s-12, 8px) var(--number-scales-2s-24, 24px); + justify-content: center; + align-items: center; + gap: var(--number-scales-2s-8, 8px); + border-radius: var(--number-scales-2s-full, 999px); + background: var(--semantics-surface-default, #1890FF); + color: white; + } + + .cta__secondary { + padding: var(--number-scales-2s-12, 8px) var(--number-scales-2s-24, 24px); + justify-content: center; + align-items: center; + gap: var(--number-scales-2s-8, 8px); + border-radius: var(--number-scales-2s-full, 999px); + border: 1px solid var(--semantics-border-default, #1890FF); + background: var(--semantics-bg-bg-white, #FFF); + } + } + + .hero__img_container { + position: relative; + + .hero__img { + z-index: 10; + height: 40vh; + min-height: 320px; + margin-bottom: -8rem; + } + + .hero__img_gradient { + position: absolute; + right: 0; + left: 0; + bottom: 0; + margin-bottom: -8rem; + height: 60%; + width: min-content; + background: linear-gradient(to top, #FFFFFF 15.52%, transparent); + } + } + + // Mobile adjustments + @media (max-width: 768px) { + max-height: auto; + padding: 1.25rem; + margin: 1rem .5rem 6rem .5rem; + border-radius: 24px; + + .hero__topQuote { + font-size: 1rem; + margin-top: 3vh; + text-align: center; + } + + .hero__title { + font-size: 3rem; + line-height: 3.5rem; + max-width: 100%; + } + + .hero__description { + font-size: 1rem; + line-height: 1.75rem; + max-width: 100%; + } + + .hero__img_container { + .hero__img { + height: 30vh; + min-height: 200px; + margin-bottom: -6rem; + object-fit: contain; + } + } + + .cta__tertiary { + font-size: 0.9rem; + } + + .hero__cta { + a { + margin: 0.5rem; + padding: 8px 16px; + font-size: 0.9rem; + } + + .cta__primary { + background: #1890FF; + } + + .cta__secondary { + border: 1px solid #1890FF; + } + } + } +} diff --git a/docs-website/src/pages/solutions/_components/Hero/index.js b/docs-website/src/pages/solutions/_components/Hero/index.js new file mode 100644 index 0000000000000..fd50f2871b9eb --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Hero/index.js @@ -0,0 +1,45 @@ +import React from 'react'; +import styles from './hero.module.scss'; +import Link from "@docusaurus/Link"; + +const Hero = ({ onOpenTourModal, heroContent }) => { + const { topQuote, title, description, imgSrc } = heroContent + return ( +
+
+
+ {topQuote} +
+
+ {title} +
+

{description}

+
+ + Get Cloud + + + Product Tour + +
+ + Start with Open Source → + +
+
+ DataHub Platform Preview +
+
+
+
+ ); +}; + +export default Hero; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/_components/Integrations/index.js b/docs-website/src/pages/solutions/_components/Integrations/index.js new file mode 100644 index 0000000000000..77f028eb4cf74 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Integrations/index.js @@ -0,0 +1,54 @@ +import React, { useRef, useEffect } from "react"; +import styles from "./integrations.module.scss"; +import useBaseUrl from "@docusaurus/useBaseUrl"; + +const Integrations = () => { + const integrationsPath = 'img/solutions/integrations'; + const hasAnimatedRef = useRef(false); + const counterRef = useRef(null); + const handleScroll = () => { + if (hasAnimatedRef.current) return; + if (!counterRef.current) return; + + const { top } = counterRef.current.getBoundingClientRect(); + const windowHeight = window.innerHeight; + + if (top <= windowHeight) { + hasAnimatedRef.current = true; + animateNumber(); + } + }; + + useEffect(() => { + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + } + }, []) + + return ( +
+
+ Integrates with your data stack +
+
+
+
+
+ {[...Array(3)].map((_, i) => ( + + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => ( +
+
+ ))} +
+ ))} +
+
+
+
+
+ ); +}; + +export default Integrations; diff --git a/docs-website/src/pages/solutions/_components/Integrations/integrations.module.scss b/docs-website/src/pages/solutions/_components/Integrations/integrations.module.scss new file mode 100644 index 0000000000000..da0c6964e8775 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Integrations/integrations.module.scss @@ -0,0 +1,127 @@ +.container { + display: flex; + flex-direction: column; + + .section_header { + color: var(--primitives-text-tex-subtext, #777E99); + text-align: center; + font-family: "Helvetica Neue"; + font-size: 1.5rem; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.5px; + + margin-bottom: 2rem; + position: relative; + padding: 0 2rem; + display: block; + width: 100%; + + &:before, &:after { + content: " "; + height: 1px; + width: calc((100vw - 48rem)/2); + background: #D9DBE4; + display: block; + position: absolute; + top: 50%; + } + + &:before { + left: 8rem; + } + + &:after { + right: 8rem; + } + } +} + + +.carouselContainer { + width: 100%; + min-height: 100px; + min-width: 400px; + overflow: hidden; +} +@media screen and (max-width: 800px) { + .carouselContainer { + min-width: auto; + } +} + +.slider { + height: 100px; + margin: 1rem auto; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + width: 100%; + + &::before, + &::after { + position: absolute; + content: ''; + width: 90%; + height: 100%; + z-index: 9; + } + +} + +.slider { + position: relative; +} + +.slide_track { + display: flex; + width: max-content; + animation: scroll 30s linear infinite; +} + +.slide { + width: 100px; + height: 100px; + margin-left: 52px; + display: flex; + justify-content: space-between; + overflow: hidden; + flex-direction: column; + align-items: center; + position: relative; + background-size: cover; + background-repeat: no-repeat; +} + +@keyframes scroll { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-50%); + } +} + + +@keyframes slideIn { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +@media only screen and (max-width: 800px) { + .slide { + width: 80px; + height: 80px; + margin: auto 1rem; + } +} \ No newline at end of file diff --git a/docs-website/src/pages/solutions/_components/IntegrationsStatic/index.js b/docs-website/src/pages/solutions/_components/IntegrationsStatic/index.js new file mode 100644 index 0000000000000..76b99b156704e --- /dev/null +++ b/docs-website/src/pages/solutions/_components/IntegrationsStatic/index.js @@ -0,0 +1,34 @@ +import React, { useRef, useEffect } from "react"; +import styles from "./integrations.module.scss"; +import useBaseUrl from "@docusaurus/useBaseUrl"; + +const Integrations = () => { + const integrationsPath = 'img/solutions/integrations-observe'; + + + return ( +
+
+ Integrates with your data stack +
+
+
+
+
+ {[...Array(1)].map((_, i) => ( + + {[1, 2, 3, 4, 5, 6].map((item, index) => ( +
+
+ ))} +
+ ))} +
+
+
+
+
+ ); +}; + +export default Integrations; diff --git a/docs-website/src/pages/solutions/_components/IntegrationsStatic/integrations.module.scss b/docs-website/src/pages/solutions/_components/IntegrationsStatic/integrations.module.scss new file mode 100644 index 0000000000000..aa2201fd0185c --- /dev/null +++ b/docs-website/src/pages/solutions/_components/IntegrationsStatic/integrations.module.scss @@ -0,0 +1,107 @@ +.container { + display: flex; + flex-direction: column; + + .section_header { + color: var(--primitives-text-tex-subtext, #777E99); + text-align: center; + font-family: "Helvetica Neue"; + font-size: 1.5rem; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.5px; + + margin-bottom: 2rem; + position: relative; + padding: 0 2rem; + display: block; + width: 100%; + + &:before, &:after { + content: " "; + height: 1px; + width: calc((100vw - 65rem)/2); + background: #D9DBE4; + display: block; + position: absolute; + top: 50%; + } + + &:before { + left: 20rem; + } + + &:after { + right: 20rem; + } + } +} + + +.carouselContainer { + width: 100%; + min-height: 100px; + min-width: 400px; +} + +.slider { + height: 100px; + margin: 1rem auto; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + width: 100%; + + &::before, + &::after { + position: absolute; + content: ''; + width: 90%; + height: 100%; + z-index: 9; + } + +} + +.carouselContainer { + overflow: hidden; +} + +.slider { + position: relative; +} + +.slide_track { + display: flex; + width: max-content; + margin: auto; +} + +.slide { + width: 100px; + height: 100px; + margin: auto 3rem; + display: flex; + justify-content: space-between; + overflow: hidden; + flex-direction: column; + align-items: center; + position: relative; + background-size: cover; + background-repeat: no-repeat; +} + + +@media only screen and (max-width: 800px) { + .slider { + max-width: 100vw; + min-width: auto; + } + .slide { + width: 80px; + height: 80px; + margin: auto 1rem; + } +} \ No newline at end of file diff --git a/docs-website/src/pages/solutions/_components/Persona/index.js b/docs-website/src/pages/solutions/_components/Persona/index.js new file mode 100644 index 0000000000000..d377de28525bd --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Persona/index.js @@ -0,0 +1,46 @@ +import React from "react"; +import styles from "./styles.module.scss"; +import clsx from "clsx"; + +const Persona = ({ personaContent }) => { + const { title, personas } = personaContent; + + return ( +
+
+
{title}
+ +
+
+
+ {personas.map((persona, index) => ( +
+
+ {persona.alt} +
+
+ + + + +
+
+ ))} +
+
+
+ Persona +
+
+
+
+ ); +}; + +const FeatureItem = ({ text }) => ( +
+ {text} +
+); + +export default Persona; diff --git a/docs-website/src/pages/solutions/_components/Persona/styles.module.scss b/docs-website/src/pages/solutions/_components/Persona/styles.module.scss new file mode 100644 index 0000000000000..3568cc2b75611 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Persona/styles.module.scss @@ -0,0 +1,163 @@ +.container { + padding: 5rem; + padding-bottom: 0; + display: flex; + position: relative; + justify-content: center; + align-items: center; + background: linear-gradient(30deg, #EBEBEB 15.52%, #FFF 85.84%); +} + +.personas { + width: 100%; +} + +.persona_heading { + color: var(--primitives-text-tex-subtext, #777E99); + text-align: center; + font-family: Manrope; + font-size: 2rem; + font-style: normal; + font-weight: 500; + line-height: normal; + letter-spacing: 0.34px; + margin-bottom: 2rem; + position: relative; + padding: 0 2rem; + display: block; + width: 100%; + + &:before, &:after { + content: " "; + height: 2px; + width: calc((100vw - 1500px)/2); + background: #D9DBE4; + display: block; + position: absolute; + top: 50%; + } + + &:before { + left: 8rem; + } + + &:after { + right: 8rem; + } +} + +.persona_row { + display: flex; + justify-content: center; + gap: 50px; + position: relative; + padding-top: 20px; /* Add some padding to give space above the line */ +} + +.persona_row_mobile { + display: none; +} + +.persona_row_wrapper { + display: flex; + justify-content: center; + align-items: center; + background: inherit; /* Inherit the container's gradient */ +} + +.persona { + display: flex; + flex-direction: column; + align-items: center; + min-width: 365px; + margin: 2rem; + margin-bottom: 0; + height: 100%; + background: inherit; /* Allow persona card to have gradient */ +} + +.persona_img { + margin-bottom: 12px; + z-index: 1; +} + +.persona_img img { + height: 200px; +} + +.features { + display: flex; + flex-direction: column; + align-items: center; +} + +.featureItem { + display: flex; + padding: 0.625rem; + border-radius: 0.375rem; + background: white; + opacity: 0.8; + color: var(--primitives-text-tex-subtext, #777E99); + font-family: Manrope; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.01rem; + text-transform: capitalize; + margin: 0.5rem; + justify-content: center; + width: max-content; +} + +.card_gradient { + position: absolute; + right: 0; + left: 0; + bottom: 0; + height: 40%; + background: linear-gradient(to top, #EBEBEB 15.52%, transparent); +} + +.persona_bg_line { + width: 100%; + max-width: 900px; + height: 0; + border-bottom: 1px dashed #aaa; + background-size: contain; + position: absolute; + top: 28%; + margin: auto; +} + + +@media (max-width: 768px) { + .container { + padding: 4rem 2rem; + max-width: 100vw; + } + + .persona_heading { + font-size: 1.4rem; + } + .persona_row { + display: none !important; + } + .persona_row_mobile { + display: flex !important; + flex-direction: column; + align-items: center; + } + + .persona_row_wrapper { + display: block !important; + } + + .persona { + margin: 3rem auto; + } + + .card_gradient { + height: 15%; + } +} diff --git a/docs-website/src/pages/solutions/_components/QuickstartContent/index.js b/docs-website/src/pages/solutions/_components/QuickstartContent/index.js new file mode 100644 index 0000000000000..422a7b16cc216 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/QuickstartContent/index.js @@ -0,0 +1,63 @@ +import React, { useEffect, useRef, useState } from "react"; +import clsx from "clsx"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./quickstartcontent.module.scss"; +import { motion, useScroll, useTransform} from 'framer-motion'; + +const QuickstartContent = ({ quickstartContent }) => { + const scrollableElement = useRef(null) + const { scrollYProgress } = useScroll({ + target: scrollableElement, + offset: ["start end", "end end"] + }) + const scaleBar = useTransform(scrollYProgress, [0, 0.2, .9, 1], [0, 0, .8, 1]); + const opacityBar = useTransform(scrollYProgress, [0, 0.2, 0.4], [0, 0, 1]); + + return ( +
+
+ + {quickstartContent.map((data, idx) => ( + +
+ +
+
+
{data.title}
+
+
+ ))} +
+
+ ); +}; + +export default QuickstartContent; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/_components/QuickstartContent/quickstartcontent.module.scss b/docs-website/src/pages/solutions/_components/QuickstartContent/quickstartcontent.module.scss new file mode 100644 index 0000000000000..bf9369929112a --- /dev/null +++ b/docs-website/src/pages/solutions/_components/QuickstartContent/quickstartcontent.module.scss @@ -0,0 +1,118 @@ +@media only screen and (max-width: 800px) { + .quickstart { + margin: 6rem auto!important; + width: 95vw!important; + } +} +.quickstart { + width: 80vw; + margin: 12rem auto; + display: flex; + flex-direction: column; + + :global { + + .quickstart__bar { + width: 4px; + height: 100%; + position: absolute; + + background: linear-gradient(180deg, #546167 0.71%, #58595f 95.37%, #69cfff 100%); + border-radius: 10px; + transform-origin: top; + // transition: transform 0.3s; + // animation: progress 0.3s linear; + + /* Inside auto layout */ + display: block; + } + + .quickstart__container { + position: relative; + } + + .quickstart__content { + display: flex; + margin: 3rem; + width: 100%; + + .quickstart__text { + width: 60%; + min-width: 600px; + padding-right: 2rem; + display: flex; + justify-content: center; + flex-direction: column; + + div { + padding-left: 1rem; + } + + .quickstart__text__head { + + /* H4 | Semibold */ + font-family: 'Manrope'; + font-style: normal; + font-weight: 400; + font-size: 2rem; + line-height: 2.5rem; + + color: #171B2B; + margin-top: 1rem; + } + + } + + .quickstart__img { + display: flex; + align-items: flex-start; + justify-content: center; + width: 20%; + + img { + width: 2rem; + min-width: 100px; + } + } + } + + + @media only screen and (max-width: 800px) { + .quickstart__bar { + display: none; + } + + .quickstart__container { + max-width: 95% !important; + } + + .quickstart__content { + display: flex; + margin: 2rem; + + .quickstart__text { + min-width: 0; + width: 100%; + padding-left: 40px; + padding-right: 0; + + div { + padding-left: 0; + } + .quickstart__text__head { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.75rem; + margin: 0 !important; + padding-right: 1.5rem; + } + } + .quickstart__img { + display: flex; + min-width: 50px; + margin: auto; + } + } + } + } +} diff --git a/docs-website/src/pages/solutions/_components/SlidingTabs/index.js b/docs-website/src/pages/solutions/_components/SlidingTabs/index.js new file mode 100644 index 0000000000000..2dca5f63ae765 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/SlidingTabs/index.js @@ -0,0 +1,69 @@ +import React, { useState } from 'react'; +import styles from './styles.module.scss'; +import clsx from 'clsx'; + +const TabbedComponent = () => { + const [activeTab, setActiveTab] = useState(0); + + const tabs = [ + { + title: 'Deploy with enterprise-grade security', + description: 'Acryl Observe deploys and runs in your own VPC, offering pre-configured support for advanced networking features—like AWS PrivateLink, or Private Google Access—to facilitate secure, private connectivity to cloud services. Plus, both Observe and Acryl Cloud are certified to meet rigorous compliance and security standards, like SOC 2.', + icon: "/img/solutions/lock.png", + }, + { + title: 'Scale from Zero to Infinity', + description: 'Acryl Observe is built for any scale. Leveraging the power of Acryl Cloud, Observe can scale to support data warehouses with petabytes of data in tens of thousands of tables—and tens of billions of rows. And because it’s a fully managed SaaS offering, it’s also ideal for small organizations still building out their data ecosystems.', + icon: "/img/solutions/rocket-launch.png", + }, + { + title: 'Reduce tool clutter and operational burden', + description: 'Simplify your stack. Avoid duplication across tools by unifying data discovery, data governance, and data quality into one central tool. Skip spending countless engineering hours maintaining inaccessible, code-first data quality frameworks', + icon: "/img/solutions/communities.png", + }, + { + title: 'Reduce the risk of vendor lock-in', + description: 'Get the benefits of open source in a fully managed, limitlessly scalable SaaS offering. Acryl Observe and Acryl Cloud are built on top of the DataHub Project, proven open-source technology with an active, thriving community of contributors and users. Customers get 100% compatibility with open-source DataHub, plus regular updates and improvements, source code transparency, community-based support, proven security, and protection against vendor lock-in.', + icon: "/img/solutions/water-lock.png", + } + ]; + + return ( +
+
+
+
+ Secure. Scalable.
Simple. Open. +
+
+ {tabs.map((tab, index) => ( + +
+ + {activeTab === index && ( +
+ {tab.description} +
+ )} +
+
+ ))} +
+
+
+
+
+
+
+ ); +}; + +export default TabbedComponent; diff --git a/docs-website/src/pages/solutions/_components/SlidingTabs/styles.module.scss b/docs-website/src/pages/solutions/_components/SlidingTabs/styles.module.scss new file mode 100644 index 0000000000000..982234a2b721e --- /dev/null +++ b/docs-website/src/pages/solutions/_components/SlidingTabs/styles.module.scss @@ -0,0 +1,171 @@ +.tabbedComponent { + padding-top: 48px; + display: flex; + flex-direction: column; + align-items: center; +} + +.leftSection { + padding-left: 4rem; +} + +.title { + color: #373A47; + font-family: Manrope; + font-size: 3.6rem; + font-style: normal; + font-weight: 500; + line-height: 4.5rem; + letter-spacing: -0.18rem; + text-align: left; + margin-bottom: 3rem; + + .titleBlue { + color: var(--semantics-border-default, #1890FF); + } +} + +.container { + display: flex; + flex-direction: column; // Changed to column for mobile view + background: white; + overflow: hidden; + width: 100vw; +} + +.tabs { + display: flex; + flex-direction: column; + justify-content: flex-start; + text-align: left !important; +} + +.tab { + align-items: center; + margin: 0.5rem 0; + position: relative; + + &.activeTab { + border-left: 3px solid #4C49E4; + .tabTitle { + color: black !important; + } + .icon { + filter: brightness(0); + } + + } + + .tabButton { + padding: 0rem 1rem 1rem 1rem; + background: none; + border: none; + cursor: pointer; + display: flex; + align-items: center; + width: 100%; + justify-content: left; + text-align: left; + + .tabTitle { + color: var(--primitives-text-tex-subtext, #777E99); + font-family: Manrope; + font-size: 1.45rem; + font-style: normal; + font-weight: 600; + line-height: normal; + padding-left: 1rem; + transition: all .3s; + } + .icon { + transition: all .3s; + } + &:hover { + .tabTitle { + color: black; + } + .icon { + filter: brightness(0); + } + } + } + + .dropdown { + background-color: #ffffff; + margin-top: 5px; + padding: 0rem 1.5rem 0.5rem 1.5rem; + color: #777E99; + font-family: Manrope; + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 2rem; /* 160% */ + } +} + +.imageContainer { + justify-content: right; + background-color: transparent; + margin: 1rem 0; + height: 520px; + align-self: center; + width: 40%; + border-radius: 24px; + display: flex; + flex-grow: 1; +} + +.tabImage { + width: 100%; + height: 100%; + display: flex; + background-size: contain; + background-repeat: no-repeat; + background-position: right center; +} + + + +@media (min-width: 799px) { + .container { + flex-direction: row; // Change back to row for larger screens + padding: 40px 0px; + } + .tabs { + width: 800px; + } + + .imageContainer { + margin: 1rem 0rem 1rem 1rem; + } +} + +@media (max-width: 800px) { + .title { + font-size: 2.5rem; + line-height: 3rem; + } + .tabButton { + .icon { + height: 24px; + width: 24px; + } + .tabTitle { + font-size: 1rem!important; + padding-left: .25rem!important; + } + } + .dropdown { + font-size: .9rem!important; + line-height: 1.5rem!important; + } + + .imageContainer { + display: none !important; + } + + .leftSection { + padding: 2rem; + } + +} \ No newline at end of file diff --git a/docs-website/src/pages/solutions/_components/Testimonials/index.js b/docs-website/src/pages/solutions/_components/Testimonials/index.js new file mode 100644 index 0000000000000..54aaca0ebb5f8 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Testimonials/index.js @@ -0,0 +1,29 @@ +import React, { useEffect, useRef, useState } from "react"; +import clsx from "clsx"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./styles.module.scss"; + +const Testimonials = ({ testimonialsData }) => { + const { title, feature1, feature2, feature1Link, feature2Link, imgSrc } = testimonialsData; + return ( +
+
+
+
+
+ {title} +
+ + Seamlessly integrated with DataHub Cloud's
{feature1} and {feature2} solutions. +
+
+
+ +
+
+
+
+ ); +}; + +export default Testimonials; diff --git a/docs-website/src/pages/solutions/_components/Testimonials/styles.module.scss b/docs-website/src/pages/solutions/_components/Testimonials/styles.module.scss new file mode 100644 index 0000000000000..ce49d7b4f6fa1 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Testimonials/styles.module.scss @@ -0,0 +1,99 @@ +.testimonials { + background: linear-gradient(90deg, #F8F9F9 0%, #E9EAEC 100%); + + :global { + .testimonials__content { + width: 80vw; + max-width: 1200px; + margin: 0 auto; + position: relative; + padding: 4.5rem 0; + + .testimonials__card { + margin: 0rem 4rem; + display: flex; + + .testimonials__logo { + min-width: 100px; + margin: 2rem auto; + img { + max-width: 100%; + } + } + + .testimonials__text { + width: 94%; + padding-left: 2rem; + color: #2e2e38; + + .testimonials__quote_title { + font-family: "Manrope"; + font-style: normal; + font-weight: 500; + font-size: 3.5rem; + line-height: 120%; + position: relative; + margin: 1.8rem auto; + } + + .testimonials__quote_description { + font-size: 1.8rem; + margin-top: 0.5rem; + color: #656c77; + font-weight: 300; + line-height: normal; + } + + .testimonials__quote_black { + color: #2E2E38; + + &:hover { + text-decoration: none; + opacity: 0.8; + cursor: pointer; + } + } + } + } + } + + @media only screen and (max-width: 800px) { + .testimonials__content { + width: 100vw; + padding: 2rem 0; + text-align: center; + + .testimonials__card { + flex-direction: column; + margin: 2rem 1rem; + + .testimonials__logo { + max-width: 40px; + margin-bottom: 16px; + } + + .testimonials__text { + width: 100%; + padding-left: 0; + max-width: 100%; + .testimonials__quote_title { + font-size: 2.25rem; + } + .testimonials__quote_description { + font-size: 1.5rem; + } + .testimonials__quote { + font-size: 1.1rem; + line-height: 1.75rem; + } + .testimonials__company { + font-size: 1rem; + } + } + } + } + + } + } + } + \ No newline at end of file diff --git a/docs-website/src/pages/solutions/_components/Tiles/index.js b/docs-website/src/pages/solutions/_components/Tiles/index.js new file mode 100644 index 0000000000000..3b087e97ae20b --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Tiles/index.js @@ -0,0 +1,80 @@ +import React from "react"; +import styles from "./tiles.module.scss"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import clsx from "clsx"; + +const Tiles = ({ tilesContent }) => { + const { title, theme, tileItems } = tilesContent; + + const sectionThemeClass = theme === "dark" ? styles.darkSection : styles.lightSection; + const itemThemeClass = theme === "dark" ? styles.darkItem : styles.lightItem; + const diagramItemThemeClass = theme === "dark" ? styles.darkDiagramItem : styles.lightDiagramItem; + + return ( +
+
+
+
+
+
+
+
+ {tileItems.map((item, index) => ( +
+ {index % 2 !== 0 ? ( + <> +
+ {item.title} +
+
+
+
{item.title}
+
{item.subtitle}
+
+
+ + ) : ( + <> +
+
+
{item.title}
+
{item.subtitle}
+
+
+
+ {item.title} +
+ + )} +
+ ))} +
+
+
+
+
+ ); +}; + +export default Tiles; diff --git a/docs-website/src/pages/solutions/_components/Tiles/tiles.module.scss b/docs-website/src/pages/solutions/_components/Tiles/tiles.module.scss new file mode 100644 index 0000000000000..a71b0b8445541 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Tiles/tiles.module.scss @@ -0,0 +1,203 @@ +.lightSection { + background: #FAFAFA; +} + +.darkSection { + background: white; +} + +.ecosystem_section { + padding: 4vh 0; + padding-bottom: 6vh; + display: flex; + justify-content: center; + + .ecosystem_section_content { + width: 70%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 2rem 0rem; + text-align: left; + + .ecosystem_section_upper_content { + padding-top: 1rem; + padding-left: 0; + display: flex; + justify-content: flex-start; + + .ecosystem_section_heading { + line-height: 4rem; + font-family: Manrope; + font-family: Manrope; + font-size: 3.25rem; + font-style: normal; + font-weight: 500; + line-height: normal; + mix-blend-mode: luminosity; + width: 100%; + } + } + + .ecosystem_section_lower_content { + margin-top: 48px; + display: flex; + flex-direction: row; + justify-content: center; + + .itemWrappers { + display: flex; + flex-direction: column; + align-self: stretch; + + .itemWrapper { + display: flex; + padding: 4rem 0px; + width: 100%; + align-items: center; + justify-content: space-between; + flex-direction: row; + flex-wrap: nowrap; + } + + .alternate { + .item { + margin-right: 2rem; + margin-left: 0; + } + } + + .item { + display: flex; + justify-content: center; + align-items: flex-start; + padding: 0; + margin: 0; + margin-left: 4rem; + flex-grow: 1; + max-width: 520px; + + .item__title { + font-family: Manrope; + font-size: 2.25rem; + font-style: normal; + font-weight: 500; + line-height: normal; + margin-bottom: 1rem; + } + + .item__subtitle { + font-family: Manrope; + font-size: 1.25rem; + font-style: normal; + font-weight: 400; + line-height: normal; + color: #777E99; + } + } + + .diagramItem { + display: flex; + overflow: hidden; + height: 400px; + min-width: 400px; + max-width: 400px; + justify-content: flex-end; + align-items: center; + border-radius: var(--number-scales-2s-20, 32px); + border: 0.5px solid #1890FF; + background: #FAFAFA; + } + } + } + + .item, .diagramItem { + margin: 8px; + } + } +} +@media only screen and (max-width: 800px) { + .ecosystem_section { + padding: 1rem 0; + .ecosystem_section_content { + width: 90%; + min-width: 0; + height: auto !important; + padding-bottom: 48px; + padding-top: 48px; + + .ecosystem_section_upper_content { + height: auto !important; + + .ecosystem_section_heading { + font-size: 1.75rem; + line-height: 2.25rem; + font-weight: 600; + text-align: center; + width: 90%; + margin: auto; + } + } + + .ecosystem_section_lower_content { + height: auto; + margin-top: 8px; + + .diagramItem { + width: 100%; + height: auto; + border: none; + } + .itemWrappers { + .itemWrapper { + flex-direction: column-reverse; + &.alternate { + flex-direction: column; + } + width: 95vw; + padding: 2rem 0; + align-items: center; + margin: auto; + + } + + .diagramItem { + height: auto; + width: 95vw; + aspect-ratio: 1; + min-width: auto; + margin: auto; + } + + .item { + text-align: center; + padding : 1rem; + margin: 2rem 0!important; + + .item__title { + font-size: 1.5rem; + } + .item__subtitle { + font-size: 1rem; + } + } + } + } + } + } +} + +.darkDiagramItem { + background: linear-gradient(180deg, #F5EFF8 0%, #F1F4F4 100%); +} + +.lightDiagramItem { + background: linear-gradient(37deg, rgba(238, 240, 242, 0.90) 2.81%, rgba(253, 249, 241, 0.90) 107.71%); +} + +.diagramItem__img { + overflow: hidden; + width: 100%; + height: auto; +} diff --git a/docs-website/src/pages/solutions/_components/Trials/index.js b/docs-website/src/pages/solutions/_components/Trials/index.js new file mode 100644 index 0000000000000..ecca6685810b8 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Trials/index.js @@ -0,0 +1,79 @@ +import React from "react"; +import styles from "./styles.module.scss"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; + +const Trials = ({ onOpenTourModal, trialsContent }) => { + const { title, trialsCardItems } = trialsContent; + + return ( +
+
+
+
+ Discover. Observe. Govern. +

{title}

+
+ Book a Demo + Product Tour +
+ + Get started with Open Source → + +
+
+
+
+
+
+
+ {trialsCardItems.slice(0, 2).map((item, index) => ( +
+ {item.title} + {item.title.split("\n").map((line, idx) => ( + + {line} +
+
+ ))} +
+ ))} +
+
+ {trialsCardItems.slice(2).map((item, index) => ( +
+ {item.title} + {item.title.split("\n").map((line, idx) => ( + + {line} +
+
+ ))} +
+ ))} +
+
+
+
+
+ ); +}; + +export default Trials; diff --git a/docs-website/src/pages/solutions/_components/Trials/styles.module.scss b/docs-website/src/pages/solutions/_components/Trials/styles.module.scss new file mode 100644 index 0000000000000..9a991c4af36ab --- /dev/null +++ b/docs-website/src/pages/solutions/_components/Trials/styles.module.scss @@ -0,0 +1,259 @@ +.container { + display: flex; + flex-direction: column; + background: #fafafa; + width: 80vw; + min-width: 900px; + max-width: 1200px; + margin: 0 auto; +} +.trial { + height: 600px; + background: white; + display: flex; + justify-content: space-between; + + .trial_left { + width: 55%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + .left_content { + flex-grow: 1; + padding-right: 24px; + + .trial_title { + font-weight: 300; + } + + span { + color: #8088a3; + font-size: 1.5rem; + font-weight: 400; + } + p { + color: #2e2e38; + font-size: 3rem; + font-weight: 400; + line-height: normal; + } + .btn_div { + display: flex; + gap: 1rem; + margin-bottom: 1rem; + + a:first-child { + cursor: pointer; + text-decoration: none; + display: inline-block; + font-size: 1rem; + background-color: #1890ff; + padding: 4px 20px; + border-radius: 50px; + margin: 0 0 0 0; + color: white; + transition: opacity .2s ease-in-out; + &:hover { + opacity: .9; + } + } + + a:nth-child(2) { + cursor: pointer; + text-decoration: none; + display: inline-block; + font-size: 1rem; + padding: 4px 20px; + border-radius: 50px; + margin: 0 0 0 0; + background-color: transparent; + color: #1890ff; + border: 1px solid #1890ff; + transition: background-color .2s ease-in-out; + &:hover { + background-color: #1890ff1A; + } + } + } + + .start_arrow { + margin-top: .5rem; + display: inline-block; + font-size: 1.1rem; + color: #1890ff; + font-weight: 500; + cursor: pointer; + text-decoration: none; + } + } + } + .trial_right { + width: 45%; + max-width: 520px; + height: 100%; + position: relative; + overflow: hidden; + + .gradientTop, .gradientBottom { + position: absolute; + background: linear-gradient(#FFFFFF, #FFFFFF00); + height: 100px; + width: 100%; + z-index: 10; + } + .gradientBottom { + transform: rotate(180deg); + bottom: 0; + } + + .right_content { + height: 100%; + display: flex; + gap: 2rem; + .right_l { + width: 50%; + height: 95%; + margin-top: -.5rem; + display: flex; + flex-direction: column; + gap: 1rem; + + div { + font-size: 1.25rem; + font-weight: 400; + color: #000; + line-height: 1.5rem; + img { + margin-bottom: 8px; + } + } + + div:first-child { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 2rem; + padding-right: 1.5rem; + height: 49%; + border-radius: 35px; + background-color: #fff; + border: 1px solid #ddd; + // background-image: linear-gradient(to bottom, #FC526333, #FC5263); + } + + div:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 2rem; + padding-right: 1.5rem; + background-color: #fff; + border: 1px solid #ddd; + // background-image: linear-gradient( + // to bottom, + // #77B750, + // #77B75080 + // ); + height: 49%; + border-radius: 35px; + } + } + .right_r { + width: 50%; + height: calc(100% - 2rem); + margin-top: 2.5rem; + display: flex; + flex-direction: column; + gap: 1rem; + + div { + font-size: 1.25rem; + font-weight: 400; + color: #000; + line-height: 1.5rem; + img { + margin-bottom: 8px; + } + } + + div:first-child { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 2rem; + padding-right: 1.5rem; + // background-image: linear-gradient(to bottom, #1890FF80, #1890FF); + background-color: #fff; + border: 1px solid #ddd; + height: 49%; + border-radius: 35px; + } + + div:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 2rem; + padding-right: 1.5rem; + background-color: #fff; + border: 1px solid #ddd; + // background-image: linear-gradient( + // to bottom, + // #EFB300, + // #EFB30033 + // ); + height: 49%; + border-radius: 35px; + } + } + } + } +} + +// Responsiveness +@media (max-width: 800px) { + + .container { + flex-direction: column; + width: 90vw; + min-width: 0; + margin: 4rem auto; + } + .trial { + flex-direction: column; + justify-content: flex-start; + height: auto; + .trial_left { + width: 100%; + .left_content { + span { + font-size: 1.3rem; + } + p { + font-size: 2.5rem; + } + } + .start_arrow { + margin-top: 0; + margin-bottom: 1rem; + } + } + .trial_right { + width: 100%; + max-width: none; + height: 500px; + margin: auto; + } + .right_content { + .right_l, .right_r { + div { + font-size: .9rem!important; + line-height: 1.2rem !important; + color: #333!important; + } + } + } + } +} diff --git a/docs-website/src/pages/solutions/_components/UnifiedTabs/index.js b/docs-website/src/pages/solutions/_components/UnifiedTabs/index.js new file mode 100644 index 0000000000000..0ccf0501670a3 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/UnifiedTabs/index.js @@ -0,0 +1,42 @@ +import React, { useState } from 'react'; +import styles from './styles.module.scss'; +import clsx from 'clsx'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +const TabbedComponent = ({ unifiedTabsData }) => { + const [activeTab, setActiveTab] = useState(0); + + return ( +
+
+
+ {unifiedTabsData.map((tab, index) => ( +
setActiveTab(index)} + > +
+ {tab.tabName} +
+
+ ))} +
+
+
+
+
{unifiedTabsData[activeTab].title}
+
{unifiedTabsData[activeTab].description}
+
+ +
+
+ {unifiedTabsData[activeTab].imagetabName} +
+
+
+
+ ); +}; + +export default TabbedComponent; diff --git a/docs-website/src/pages/solutions/_components/UnifiedTabs/styles.module.scss b/docs-website/src/pages/solutions/_components/UnifiedTabs/styles.module.scss new file mode 100644 index 0000000000000..a3a1a455af3d3 --- /dev/null +++ b/docs-website/src/pages/solutions/_components/UnifiedTabs/styles.module.scss @@ -0,0 +1,124 @@ +.tabbedComponent { + text-align: left; + padding: 20px; + padding-top: 48px; + padding-bottom: 48px; + display: flex; + flex-direction: column; + align-items: center; +} + +.tabsContainer { + width: 100%; // Ensure full width + max-width: 1200px; // Limit to the same max-width as content + margin-bottom: 1rem; + display: flex; +} + +.tabs { + display: flex; + justify-content: space-between; // Space out tabs across the container + width: 100%; // Ensure tabs take full width +} + +.tabButton { + flex: 1; + padding: 0.8rem 1.5rem; + background: none; + border: none; + cursor: pointer; + font-size: 1.5rem; + font-weight: 500; + color: #777e99; + text-align: center; + + + .tabButtonText { + width: min-content; + margin: auto; + transition: color 0.2s, border-bottom 0.2s; + } + .tabButtonText:hover, .active { + color: #1890ff; + border-bottom: 3px solid #1890ff; + } +} + +.container { + display: flex; + flex-direction: row; + background: white; + max-width: 1200px; // Same max-width as tabs + width: 100%; // Full width to align with tabs + overflow: hidden; +} + +.tabContent { + flex: 1; + padding: 2rem; + margin: auto; +} + +.tabTitle { + font-size: 2.5rem; + font-weight: 500; + color: #373A47; + line-height: 120%; + margin-bottom: 1rem; +} + +.tabTitle.active { + color: #1890ff; + text-decoration: underline; +} + +.tabDescription { + font-size: 1.4rem; + color: #777e99; + line-height: 2rem; + font-weight: 300; +} + +.imageContainer { + display: flex; + justify-content: center; + align-items: center; + margin: 1rem 0; + width: 30rem; +} + +.tabImage { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0px 2px 4px 0px #0000001C; + border-radius: 2.2rem; +} + +@media (min-width: 768px) { + .container { + flex-direction: row; + padding: 40px 32px; + } + + .imageContainer { + margin: 1rem; + } +} + +@media (max-width: 768px) { + .container { + display: block; + } + + .imageContainer { + margin: auto; + max-width: 100%; + } + + .tabTitle { + font-size: 1.8rem; + } +} \ No newline at end of file diff --git a/docs-website/src/pages/solutions/discovery/_content/discoveryCaseStudyContent.js b/docs-website/src/pages/solutions/discovery/_content/discoveryCaseStudyContent.js new file mode 100644 index 0000000000000..95bbfde0bd12a --- /dev/null +++ b/docs-website/src/pages/solutions/discovery/_content/discoveryCaseStudyContent.js @@ -0,0 +1,26 @@ +const caseStudyContent = { + title: "See how industry leaders are using DataHub for Discovery today.", + backgroundColor: "#F3F3F6", + items: [ + { + imgSrc: "/img/solutions/logo-notion.png", + title: "How Notion Used DataHub to harness their sprawling data.", + link: "https://www.notion.so/blog/a-brief-history-of-notions-data-catalog", + alt: "notion" + }, + { + imgSrc: "/img/solutions/logo-myob.png", + title: "How MYOB eliminated breaking changes with DataHub.", + link: "/adoption-stories/#myob", + alt: "MYOB", + }, + { + imgSrc: "/img/solutions/logo-dpg-media.png", + title: "How Acryl Data Helped DPG Media Save 25% Per Mo in Snowflake.", + link: "/adoption-stories/#dpg-media", + alt: "DPG Media", + } + ] + }; + +export default caseStudyContent; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/discovery/_content/discoveryHeroContent.js b/docs-website/src/pages/solutions/discovery/_content/discoveryHeroContent.js new file mode 100644 index 0000000000000..085e94085126b --- /dev/null +++ b/docs-website/src/pages/solutions/discovery/_content/discoveryHeroContent.js @@ -0,0 +1,8 @@ +const heroContent = { + topQuote: "Discovery in DATAHUB", + title: "Make data \n\n democratization a reality", + description: "Enable everyone in your organization to effortlessly discover trustworthy data, tailor experiences for each persona, eliminate breaking changes with lineage, and build confidence in your data with a unified view of business and technical context.", + imgSrc: "/img/solutions/hero-discovery.png", + }; + + export default heroContent; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/discovery/_content/discoveryQuickstartContent.js b/docs-website/src/pages/solutions/discovery/_content/discoveryQuickstartContent.js new file mode 100644 index 0000000000000..e1c6a84512fd5 --- /dev/null +++ b/docs-website/src/pages/solutions/discovery/_content/discoveryQuickstartContent.js @@ -0,0 +1,16 @@ +const quickstartData = [ + { + title: "Where can I find our quarterly revenue reporting?", + image: "/img/solutions/icon-revenue.png", + }, + { + title: "This metric looks wrong. How was it calculated?", + image: "/img/solutions/icon-metric.png", + }, + { + title: "What reports will be impacted during a data migration?", + image: "/img/solutions/icon-migration.png", + } +]; + +export default quickstartData; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/discovery/_content/discoveryTestimonialsContent.js b/docs-website/src/pages/solutions/discovery/_content/discoveryTestimonialsContent.js new file mode 100644 index 0000000000000..e9c72175ffcb7 --- /dev/null +++ b/docs-website/src/pages/solutions/discovery/_content/discoveryTestimonialsContent.js @@ -0,0 +1,10 @@ +const testimonialsData = { + title: "Enter end-to-end Data Discovery.", + feature1: "Data Observability", + feature1Link: "/solutions/observability", + feature2: "Governance", + feature2Link: "/solutions/governance", + imgSrc: "/img/solutions/discovery-icons-group.png", +}; + +export default testimonialsData; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/discovery/_content/discoveryTilesContent.js b/docs-website/src/pages/solutions/discovery/_content/discoveryTilesContent.js new file mode 100644 index 0000000000000..c15042ea1c8db --- /dev/null +++ b/docs-website/src/pages/solutions/discovery/_content/discoveryTilesContent.js @@ -0,0 +1,67 @@ +const tilesContent = [ + { + title: "Enable self-service
data discovery.", + theme: "dark", + tileItems: [ + { + title: "Your role, your view: discover data that matters to you.", + subtitle: "Tailor search experiences for every user type, from analysts to executives. Foster company-wide engagement and turn every employee into a data champion.", + imgSrc: "/img/solutions/discovery-tile-1.png", + }, + { + title: "Silence the irrelevant. Amplify what counts.", + subtitle: "Cut through data clutter to reveal the assets that truly move the needle for your organization.", + imgSrc: "/img/solutions/discovery-tile-2.png", + }, + { + title: "Maximize relevance. Minimize time-to-discovery.", + subtitle: "Tailor search results to reflect your organization's trust signals. Boost user confidence by prioritizing results that meet your standards of reliability and relevance.", + imgSrc: "/img/solutions/discovery-tile-3.png", + } + ] + }, + { + title: "Unlock the full potential of
automated data lineage.", + theme: "light", + tileItems: [ + { + title: "Demystify complex, cross-platform dependency chains.", + subtitle: "Find out when things go wrong, with alerts that reach your team where they work—whether it’s Slack, email, or anywhere else.", + imgSrc: "/img/solutions/discovery-tile-4.png", + }, + { + title: "Know your data’s Impact.", + subtitle: "Instantly identify downstream consumers of your data. Enable seamless communication and collaboration across your data ecosystem.", + imgSrc: "/img/solutions/discovery-tile-5.png", + }, + { + title: "Illuminate the black box of data transformations.", + subtitle: "Shine a light on how your key metrics are derived. Automated lineage provides transparency, fostering trust in your data-driven decisions.", + imgSrc: "/img/solutions/discovery-tile-6.png", + } + ] + }, + { + title: "Build trust in the relevance
and accuracy of your data.", + theme: "dark", + tileItems: [ + { + title: "Increase your data confidence.", + subtitle: "Tailor search experiences for every user type, from analysts to executives. Foster company-wide engagement and turn every employee into a data champion.", + imgSrc: "/img/solutions/discovery-tile-7.png", + }, + { + title: "Time travel through your data's evolution.", + subtitle: "View the shape and content of your data as it changes over time. Gain confidence in your current data by understanding its past.", + imgSrc: "/img/solutions/discovery-tile-8.png", + }, + { + title: "Your data quality companion, everywhere you work.", + subtitle: "Seamlessly integrate DataHub's insights into your BI tools and communication channels. Keep data trust at the forefront of every decision.", + imgSrc: "/img/solutions/discovery-tile-9.png", + } + ] + } +] + + export default tilesContent; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/discovery/_content/discoveryTrialsContent.js b/docs-website/src/pages/solutions/discovery/_content/discoveryTrialsContent.js new file mode 100644 index 0000000000000..b9b695549210d --- /dev/null +++ b/docs-website/src/pages/solutions/discovery/_content/discoveryTrialsContent.js @@ -0,0 +1,24 @@ +const trialsContent = { + title: "Make data democratization a reality today.", + trialsCardItems: [ + { + title: "Unlock self-service data discovery.", + imgSrc: "/img/solutions/trial-icon-lock.svg", + + }, + { + title: "Stop breaking changes before they happen.", + imgSrc: "/img/solutions/trial-icon-alert.svg", + }, + { + title: "Build trust in the relevance and accuracy of your data.", + imgSrc: "/img/solutions/trial-icon-star.svg", + }, + { + title: "Unify Discovery, Observability and Governance in one tool.", + imgSrc: "/img/solutions/trial-icon-link.svg", + } + ] +}; + +export default trialsContent; \ No newline at end of file diff --git a/docs-website/src/pages/solutions/discovery/index.js b/docs-website/src/pages/solutions/discovery/index.js new file mode 100644 index 0000000000000..01efca1e0e7c6 --- /dev/null +++ b/docs-website/src/pages/solutions/discovery/index.js @@ -0,0 +1,62 @@ +import React, { useState } from "react"; +import Layout from "@theme/Layout"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Hero from "../_components/Hero"; +import QuickstartContent from "../_components/QuickstartContent"; +import Tiles from "../_components/Tiles"; +import Trials from "../_components/Trials"; +import Testimonials from "../_components/Testimonials"; +import CaseStudy from "../_components/CaseStudy"; +import CloseButton from "@ant-design/icons/CloseCircleFilled"; +import quickstartData from "./_content/discoveryQuickstartContent"; +import heroContent from "./_content/discoveryHeroContent"; +import caseStudyContent from "./_content/discoveryCaseStudyContent"; +import Integrations from "../_components/Integrations"; +import tilesContent from "./_content/discoveryTilesContent"; +import testimonialsData from "./_content/discoveryTestimonialsContent"; +import trialsContent from "./_content/discoveryTrialsContent"; + +function Home() { + const context = useDocusaurusContext(); + const { siteConfig = {} } = context; + + if (siteConfig.customFields.isSaas) { + window.location.replace("/docs"); + } + + const [isTourModalVisible, setIsTourModalVisible] = useState(false); + const onOpenTourModal = () => { + setIsTourModalVisible(true); + }; + const onCloseTourModal = () => { + setIsTourModalVisible(false); + }; + return !siteConfig.customFields.isSaas ? ( + + {isTourModalVisible ? ( +
+
+ +
+