Merge branch 'main' into fix-docker-down

Author: wslulciuc

docs/v2/docs/quickstart/search-view-job.png

@@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 /** @type {import('@docusaurus/types').Config} */
 const config = {
     title: 'Marquez Project',
-    tagline: 'Data lineage for every pipeline.',
+    tagline: 'The complete OpenLineage solution',
     favicon: 'img/favicon.ico',
 
     // Set the production url of your site here
@@ -115,6 +115,11 @@ const config = {
                         label: 'GitHub',
                         position: 'right',
                     },
+                    {
+                        href: 'https://openlineage.io',
+                        label: 'OpenLineage',
+                        position: 'right',
+                    },
                 ],
             },
             footer: {
@@ -144,6 +149,10 @@ const config = {
                                 label: 'Twitter/X',
                                 href: 'https://twitter.com/marquezproject',
                             },
+                            {
+                                label: 'OpenLineage',
+                                href: 'https://openlineage.io',
+                            }
                         ],
                     },
                     {

docs/v2/docs/quickstart/tab-view-dataset-metadata.png

@@ -4,30 +4,30 @@ import styles from './styles.module.css';
 
 const featureList: FeatureItem[] = [
     {
-        title: 'What does Marquez do?',
-        subTitle: 'Real-time metadata collection',
+        title: 'One Service for Lineage',
+        subTitle: 'Real-time metadata server',
         imgSrc: 'img/stack.svg',
         description: <>
             <p>
-                Marquez is a metadata server, offering an OpenLineage-compatible endpoint for real-time
+                Marquez includes a metadata server offering an OpenLineage-compatible endpoint for real-time
                 collection of information from running jobs and applications.
             </p>
             <p>
                 As the reference implementation of
-                OpenLineage, the Marquez API server already works with all of its integrations developed by the
-                community.
-                This includes Apache Airflow, Apache Spark, dbt, Dagster, and Great Expectations.
+                OpenLineage, the Marquez API server already works with all the integrations developed by the
+                OpenLineage community.
+                This includes Apache Airflow, Apache Spark, Apache Flink, dbt, and Dagster.
             </p>
         </>,
         side: 'left',
     },
     {
         subTitle: 'Unified visual graph',
-        imgSrc: 'img/screenshot.png',
+        imgSrc: 'img/unified_graph.png',
         side: 'right',
         description: <>
             <p>
-                Through a web user interface, Marquez can provide a visual map that shows complex interdependencies
+                Through a web user interface, Marquez provides a visual map that shows complex interdependencies
                 within your data ecosystem.
             </p>
             <p>
@@ -43,7 +43,7 @@ const featureList: FeatureItem[] = [
         side: 'left',
         description: <>
             <p>
-                Lineage metadata can be queried using the lineage API, allowing for automation of key tasks like
+                Through a lineage API, metadata can be queried for automation of key tasks like
                 backfills and root cause analysis.
             </p>
             <p>

docs/v2/docs/quickstart/tab-view-job-metadata.png

@@ -9,8 +9,8 @@
 }
 
 .constrain {
-    max-width: 400px;
-    padding: 0 16px;
+    max-width: 600px;
+    padding: 0 32px;
 }
 
 .flexContainer {

docs/v2/docusaurus.config.js

@@ -7,8 +7,8 @@ export default function HomepageTextBox(): JSX.Element {
         <section className={clsx(styles.container, 'dashed')}>
             <div className="container">
                 <div>
-                    <h1 className="text--center">What is Marquez?</h1>
-                    <p className={clsx("text--center", styles.constrain)}>Marquez is an open source metadata service. It maintains data provenance, shows how datasets are consumed and produced, provides global visibility into job runtimes, centralizes dataset lifecycle management, and much more.</p>
+                    <h1 className="text--center">One Source of Truth</h1>
+                    <p className={clsx("text--center", styles.constrain)}>Marquez enables consuming, storing, and visualizing <a target={"_blank"} href={"https://openlineage.io"}>OpenLineage</a> metadata from across an organization, serving use cases including data governance, data quality monitoring, and performance analytics.</p>
                     <h5 className="text--center">Marquez was released and open sourced by <a target={"_blank"} href={"https://wework.com"}>WeWork</a>.</h5>
                 </div>
             </div>

docs/v2/src/components/HomepageFeatures/index.tsx

@@ -4,41 +4,62 @@
  */
 
 .heroBanner {
+    display: flex;
+    width: 100%;
     padding: 4rem 0;
-    text-align: center;
     position: relative;
     overflow: hidden;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-direction: row;
 }
 
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 767px) {
     .heroBanner {
+        margin-top: 4rem;
         padding: 2rem;
-    }
-    .flexContainer {
         flex-direction: column;
     }
+    
+    .titleContainer {
+        max-width: 100% !important;
+    }
 }
 
-.buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.heroBanner {
+    max-width: 100%;
 }
 
-.flexContainer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
+.titleContainer {
+    text-align: center;
+    max-width: 100%;
+    margin: auto;
 }
 
-.imageContainer {
-    flex: 1 1 0;
-    height: 100%;
-    width: 100%;
+.imageSubDiv {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-right: 5%;
 }
 
 .image {
+    margin: 0 auto;
+    height: 35rem;
+    width: auto;
+}
+
+.logo {
     height: auto;
-    width: 100%;
+    width: 25rem;
+}
+
+.btn_logos {
+    height: 1rem;
+    margin-top: 0.15rem;
+    margin-right: 0.4rem;
+    position: absolute;
+}
+
+.btn_text {
+    margin-left: 1.4rem;
 }

docs/v2/src/components/HomepageFeatures/styles.module.css

@@ -8,38 +8,49 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import styles from './index.module.css';
 import HomepageTextBox from "@site/src/components/HomepageTextBox";
 
+
 function HomepageHeader() {
     const {siteConfig} = useDocusaurusContext();
     return (
         <header className={clsx('hero', 'dashed', styles.heroBanner)}>
-            <div className="container">
-                <div className={styles.flexContainer}>
-                    <div className={styles.imageContainer}>
-                        <img className={styles.image} src="img/screenshot.svg" alt="Lineage Diagram"/>
-                    </div>
-                    <div>
-                        <h1 className="hero__title">{siteConfig.title}</h1>
-                        <p className="hero__subtitle">{siteConfig.tagline}</p>
-                        <div className={styles.buttons}>
-                            <Link
-                                className="button button--secondary button--md"
-                                href="/docs/quickstart">
-                                Quickstart
-                            </Link>
-                            <Link
-                                className="button button--secondary button--md margin-left--md"
-                                href="https://github.com/MarquezProject/marquez">
-                                GitHub
-                            </Link>
-                            <Link
-                                className="button button--secondary button--md margin-left--md"
-                                href="https://bit.ly/Mqz_invite">
-                                Slack
-                            </Link>
-                        </div>
-                    </div>
+            <div className={styles.titleContainer}>
+                <img className={styles.logo} src="img/logo_txt_grn.svg"/>
+                <p className="hero__subtitle">{siteConfig.tagline}</p>
+                <div className={styles.buttons}>
+                    <Link
+                        className="button button--secondary button--md"
+                        href="docs/quickstart">
+                        Quickstart
+                    </Link>
+                    <Link
+                        className="button button--secondary button--md margin-left--md"
+                        href="https://github.com/MarquezProject/marquez">
+                        <img 
+                            className={styles.btn_logos} 
+                            src="img/github.svg" 
+                            alt="GitHub logo" 
+                        />
+                        <span className={styles.btn_text}>GitHub</span>
+                    </Link>
+                    <Link
+                        className="button button--secondary button--md margin-left--md"
+                        href="https://bit.ly/Mqz_invite">
+                        <img 
+                            className={styles.btn_logos} 
+                            src="img/slack.svg" 
+                            alt="Slack logo" 
+                        />
+                        <span className={styles.btn_text}>Slack</span>
+                    </Link>
                 </div>
             </div>
+            <div className={styles.imageSubDiv}>
+                <img 
+                    className={styles.image} 
+                    src="img/marquez_caps_couple.svg" 
+                    alt="Marquez UI Screencaps"
+                />
+            </div>
         </header>
     );
 }