feat: add cloud main page (#11017)

Co-authored-by: Jay <159848059+jayacryl@users.noreply.github.com>

docs-website/docusaurus.config.js

@@ -76,6 +76,12 @@ module.exports = {
           label: "Docs",
           position: "right",
         },
+        {
+          to: "/cloud",
+          activeBasePath: "cloud",
+          label: "Cloud",
+          position: "right",
+        },
         {
           to: "/learn",
           activeBasePath: "learn",

docs-website/src/pages/cloud/CompanyLogos/customersData.json

@@ -0,0 +1,88 @@
+{
+  "customers": [
+    {
+      "link": {
+        "href": "https://robinhood.com",
+        "blank": true
+      },
+      "logo": {
+        "asset": {
+          "_ref": "/img/logos/scrollingCompanies/acertus.webp"
+        },
+        "alt": "Robinhood"
+      }
+    },
+    {
+      "link": {
+        "href": "https://www.dpgmediagroup.com/",
+        "blank": true
+      },
+      "logo": {
+        "asset": {
+          "_ref": "/img/logos/scrollingCompanies/autoscout24.webp"
+        },
+        "alt": "DPG Media"
+      }
+    },
+    {
+      "link": {
+        "href": "https://www.twilio.com",
+        "blank": true
+      },
+      "logo": {
+        "asset": {
+          "_ref": "/img/logos/scrollingCompanies/betterup.webp"
+        },
+        "alt": "Twilio"
+      }
+    },
+    {
+      "link": {
+        "href": "https://myob.com",
+        "blank": true
+      },
+      "logo": {
+        "asset": {
+          "_ref": "/img/logos/scrollingCompanies/depop.webp"
+        },
+        "alt": "Myob"
+      }
+    },
+    {
+      "link": {
+        "href": "https://regeneron.com",
+        "blank": true
+      },
+      "logo": {
+        "asset": {
+          "_ref": "/img/logos/scrollingCompanies/dpg_media.webp"
+        },
+        "alt": "Regeneron"
+      }
+    },
+    {
+      "link": {
+        "href": "https://riskified.com",
+        "blank": true
+      },
+      "logo": {
+        "asset": {
+          "_ref": "/img/logos/scrollingCompanies/myob.webp"
+        },
+        "alt": "Riskified"
+      }
+    },
+    {
+      "link": {
+        "href": "https://xero.com",
+        "blank": true
+      },
+      "logo": {
+        "asset": {
+          "_ref": "/img/logos/scrollingCompanies/notion.webp"
+        },
+        "alt": "Xero"
+      }
+    }
+  ]
+}

docs-website/src/pages/cloud/CompanyLogos/index.js

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } from 'react';
+import Link from '@docusaurus/Link';
+import styles from './logos.module.scss';
+import customersData from './customersData.json';
+import clsx from 'clsx';
+
+const ScrollingCustomers = ({ noOverlay = true, spacing, ...rest }) => {
+  const customers = customersData.customers;
+  const duplicatedLogos = [...customers, ...customers, ...customers];
+  const scrollingRef = useRef(null);
+
+  useEffect(() => {
+    if (scrollingRef.current) {
+      scrollingRef.current.style.setProperty('--customers-length', customers.length);
+    }
+  }, [customers.length]);
+
+  return (
+    <div
+      className={clsx(styles.scrollingCustomers, {
+        [styles.noOverlay]: noOverlay,
+      })}
+      {...rest}
+    >
+      <div
+        className={clsx(styles.animateScrollingCustomers, styles.scrollingCustomers__inner)}
+        ref={scrollingRef}
+      >
+        {duplicatedLogos.map((customer, index) => (
+          <Link
+            key={`item-${index}`}
+            to={customer.link.href}
+            target={customer.link.blank ? '_blank' : '_self'}
+            rel={customer.link.blank ? 'noopener noreferrer' : ''}
+            style={{ minWidth: 'max-content', padding: '0 3.25rem' }}
+          >
+            <img
+              src={customer.logo.asset._ref}
+              alt={customer.logo.alt}
+              className={styles.logoItem}
+            />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ScrollingCustomers;

docs-website/src/pages/cloud/CompanyLogos/logos.module.scss

@@ -0,0 +1,56 @@
+@keyframes scrollingCustomerAnimate {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(var(--customers-length) * -220px));
+  }
+}
+
+@media (max-width: 767px) {
+  @keyframes scrollingCustomerAnimate {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(calc(var(--customers-length) * -166px));
+    }
+  }
+}
+
+.scrollingCustomers {
+  position: relative;
+  overflow: hidden;
+}
+
+
+.scrollingCustomers__inner {
+  display: flex;
+  padding: 1.25rem 0;
+  position: relative;
+  align-items: center;
+  animation: scrollingCustomerAnimate 15s linear infinite;
+}
+
+.scrollingCustomers__inner img {
+  max-width: 100px!important;
+  min-width: unset;
+  filter: invert(1) brightness(0) contrast(100); // make image black
+}
+
+@media (max-width: 767px) {
+  .scrollingCustomers__inner img {
+    width: 126px !important;
+  }
+}
+
+.animateScrollingCustomers {
+  display: flex;
+  animation: scrollingCustomerAnimate 15s linear infinite;
+}
+
+@media (max-width: 767px) {
+  .animateScrollingCustomers {
+    width: calc(var(--customers-length) * 126px);
+  }
+}

docs-website/src/pages/cloud/Enterprise/index.js

@@ -0,0 +1,48 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.scss";
+
+
+const featuresContent = [
+  {
+    title: "99.5% Uptime SLA",
+    description: "We’ll focus on keeping DataHub running, so you can focus on the things that really matter."
+  },
+  {
+    title: "In-VPC Ingestion and<br/>Data Quality evaluation",
+    description: "So your actual data never leaves your network."
+  },
+  {
+    title: "SOC-2 Compliant",
+    description: "An incredibly high level of security you can trust."
+  },
+];
+
+const Feature = ({ title, description }) => {
+  return (
+    <div className={clsx(styles.feature, "col col--4")}>
+      <h2 dangerouslySetInnerHTML={{ __html: title }}></h2>
+      <p>{description}</p>
+    </div>
+  );
+};
+
+const Features = () =>
+  featuresContent?.length > 0 ? (
+    <div className={clsx(styles.container)}>
+      <div className={clsx(styles.wrapper)}>
+        <div className={clsx(styles.title)}>Enterprise Ready</div>
+        <div className="row">
+          {featuresContent.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+        <a href="http://localhost:3000/docs/managed-datahub/managed-datahub-overview#enterprise-grade" target="_blank" className={clsx(styles.moreBenefits)}>
+          +4 benefits
+        </a>
+      </div>
+    </div>
+  ) : null;
+
+export default Features;

docs-website/src/pages/cloud/Enterprise/styles.module.scss

@@ -0,0 +1,40 @@
+
+.container {
+  padding: 2vh 6vh;
+  padding-bottom: 8vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.wrapper {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 90%;
+  max-width: 1200px;
+
+}
+
+.title {
+  font-size: 2.8rem;
+  font-weight: 600;
+  margin-bottom: 2rem;
+}
+
+.moreBenefits {
+  font-weight: 400;
+  color: var(--ifm-color-primary);
+
+  &:hover {
+    text-decoration: none;
+    opacity: 0.8;
+  }
+
+}
+
+@media (max-width: 767px) {
+
+  .container {
+    padding: 0px 36px;
+  }
+}