Add initial Getting Started pages framework

.node-version

@@ -1 +1 @@
-16
+16.20.2

src/components/Typography.jsx

@@ -95,6 +95,21 @@ const HorizontalRule = styled.hr`
   background: ${(props) => props.theme.colors.border};
 `;
 
+const NameWrapper = styled(TypographyContainer)`
+  font-size: 2.5rem;
+  box-sizing: border-box;
+  text-align: left;
+  margin-bottom: 0;
+`;
+
+const TitleWrapper = styled(TypographyContainer)`
+  font-size: 1.5rem;
+  box-sizing: border-box;
+  text-align: left;
+  margin: 5px;
+  margin-left: 5px;
+`;
+
 const elements = {
   p: Paragraph,
   p2: Secondary,
@@ -108,6 +123,8 @@ const elements = {
   ul: UnorderedList,
   li: ListItem,
   hr: HorizontalRule,
+  nw: NameWrapper,
+  tw: TitleWrapper,
 };
 
 const Typography = (props) => {

src/components/pages/gettingstarted/ApiSection/index.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable react/no-danger */
+import * as React from "react";
+import Section from "src/components/Section";
+import Typography from "src/components/Typography";
+import ApiTiles from "src/components/pages/gettingstarted/ApiTiles";
+
+const ApiSection = () => (
+  <Section
+    title="Step 2: Try one or all of the APIs"
+    subtitle={
+      <Typography variant="p">
+        Now that you are up and running with Docker, try out your favorite Delta
+        Lake API.
+        <br />
+      </Typography>
+    }
+    background="#cdd9f4"
+    centeredHeader
+    padding="xl"
+  >
+    <ApiTiles alignCenter dark />
+
+    <Typography variant="p">
+      <br />
+      <br />
+    </Typography>
+  </Section>
+);
+
+export default ApiSection;

src/components/pages/gettingstarted/ApiTiles/index.jsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { bool } from "prop-types";
+import styled from "styled-components";
+import Tiles from "src/components/Tiles";
+import rustLogo from "./logos/delta-rust-square.png";
+import sparkLogo from "./logos/delta-spark-square.png";
+import pythonLogo from "./logos/python-logo.png";
+import jupyterLogo from "./logos/1200px-Jupyter_logo.svg.png";
+
+const deltaApis = [
+  {
+    thumbnail: pythonLogo,
+    label: "Python",
+    url: "/learn/getting-started-pages/rs-python",
+  },
+  {
+    thumbnail: rustLogo,
+    label: "Rust",
+    url: "/learn/getting-started-pages/rust",
+  },
+  {
+    thumbnail: sparkLogo,
+    label: "PySpark",
+    url: "/learn/getting-started-pages/pyspark-shell",
+  },
+  {
+    thumbnail: sparkLogo,
+    label: "Spark (Scala)",
+    url: "/learn/getting-started-pages/spark-shell",
+  },
+  {
+    thumbnail: jupyterLogo,
+    label: "Jupyter",
+    url: "/learn/getting-started-pages/jupyterlab-notebook",
+  },
+  {
+    thumbnail: rustLogo,
+    label: "ROAPI",
+    url: "/learn/getting-started-pages/roapi",
+  },
+];
+
+const CenteredApiTiles = styled(Tiles)`
+  justify-content: center;
+`;
+
+const ApiTiles = (props) => {
+  const { dark, alignCenter } = props;
+
+  const TilesComponent = alignCenter ? CenteredApiTiles : Tiles;
+
+  return (
+    <TilesComponent
+      columns={{
+        xs: 1,
+        md: deltaApis.map(() => "150px"),
+      }}
+      gutter="xl"
+      maxImageWidth={75}
+      tiles={deltaApis}
+      dark={dark}
+      showLabels
+    />
+  );
+};
+
+ApiTiles.defaultProps = {
+  dark: undefined,
+  alignCenter: undefined,
+};
+
+ApiTiles.propTypes = {
+  dark: bool,
+  alignCenter: bool,
+};
+
+export default ApiTiles;

src/components/pages/gettingstarted/DockerSection/index.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/no-danger */
+import * as React from "react";
+import Section from "src/components/Section";
+import Typography from "src/components/Typography";
+import DockerTiles from "src/components/pages/gettingstarted/DockerTiles";
+
+const DockerSection = () => (
+  <Section
+    title="Step 1: Setup and use Docker"
+    subtitle={
+      <Typography variant="p">
+        The fastest way to get started with Delta Lake is to use <b>one</b> of
+        our Docker options.
+        <br />
+        If you want to build Delta Lake, please choose the GitHub options.
+      </Typography>
+    }
+    centeredHeader
+    padding="xl"
+  >
+    <DockerTiles alignCenter dark />
+  </Section>
+);
+
+export default DockerSection;

src/components/pages/gettingstarted/DockerTiles/index.jsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { bool } from "prop-types";
+import styled from "styled-components";
+import Tiles from "src/components/Tiles";
+import dockerLogo from "./logos/docker-logo.png";
+import githubLogo from "./logos/github_2048_black.png";
+
+const deltaApis = [
+  {
+    thumbnail: dockerLogo,
+    label: "DockerHub",
+    url: "/learn/docker-pages/docker-hub",
+  },
+  {
+    thumbnail: dockerLogo,
+    label: "Docker Build",
+    url: "/learn/docker-pages/docker-build",
+  },
+  {
+    thumbnail: githubLogo,
+    label: "Delta Lake GitHub",
+    url: "http://github.com/delta-io/delta/",
+  },
+  {
+    thumbnail: githubLogo,
+    label: "delta-rs GitHub",
+    url: "http://github.com/delta-io/delta-rs/",
+  },
+];
+
+const CenteredApiTiles = styled(Tiles)`
+  justify-content: center;
+`;
+
+const ApiTiles = (props) => {
+  const { dark, alignCenter } = props;
+
+  const TilesComponent = alignCenter ? CenteredApiTiles : Tiles;
+
+  return (
+    <TilesComponent
+      columns={{
+        xs: 1,
+        md: deltaApis.map(() => "150px"),
+      }}
+      gutter="xl"
+      maxImageWidth={75}
+      tiles={deltaApis}
+      dark={dark}
+      showLabels
+    />
+  );
+};
+
+ApiTiles.defaultProps = {
+  dark: undefined,
+  alignCenter: undefined,
+};
+
+ApiTiles.propTypes = {
+  dark: bool,
+  alignCenter: bool,
+};
+
+export default ApiTiles;

src/components/pages/gettingstarted/HeaderSection/index.jsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Typography from "src/components/Typography";
+import LakeSection from "src/components/pages/shared/LakeSection";
+
+const HeaderSection = () => (
+  <LakeSection
+    title="Getting Started with Delta Lake"
+    subtitle={
+      <Typography variant="p">
+        This guide contains instructions and materials to get started with Delta
+        Lake <br /> and work through the quickstart materials using a
+        self-contained Docker image.
+      </Typography>
+    }
+    padding="xxl"
+    centeredHeader
+  />
+);
+
+export default HeaderSection;

src/components/pages/gettingstarted/VideoSection/index.jsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import Grid from "src/components/Grid";
+import Link from "src/components/Link";
+import Section from "src/components/Section";
+import Typography from "src/components/Typography";
+import img1 from "src/images/getting-started/tb_making-apache-spark-better-with-delta-lake.png";
+import img2 from "src/images/getting-started/tb_Simplify-and-Scale-Data-Engineering-Pipelines-with-Delta-Lake.jpg";
+import img3 from "src/images/getting-started/tb_Beyond-Lambda-Introducing-Delta-Architecture.jpeg";
+import img4 from "src/images/getting-started/tb_Getting-Data-Ready-for-Data-Science-with-Delta-Lake.jpeg";
+import img5 from "src/images/getting-started/tb_The-Genesis-of-Delta-Lake--An-Interview-with-Burak-Yavuz.jpeg";
+
+const VideoSection = () => (
+  <Section
+    title="Getting Started with Delta Lake Videos"
+    subtitle={
+      <Typography variant="p">
+        Check out these videos to learn more about how to use Delta Lake
+        <br />
+      </Typography>
+    }
+    background="white"
+    centeredHeader
+    padding="xl"
+  >
+    <Grid columns={{ md: 5 }} gutter="xl">
+      <Typography variant="p2">
+        <Link href="https://youtu.be/LJtShrQqYZY" muted>
+          <img src={img1} alt="" width="200" />
+          Making Apache Spark™ Better with Delta Lake
+        </Link>
+      </Typography>
+      <Typography variant="p2">
+        <Link href="https://youtube.com/live/qtCxNSmTejk" muted>
+          <img src={img2} alt="" width="200" />
+          Simplify and Scale Data Engineering Pipelines with Delta Lake
+        </Link>
+      </Typography>
+      <Typography variant="p2">
+        <Link href="https://youtube.com/live/FePv0lro0z8" muted>
+          <img src={img3} alt="" width="200" />
+          Beyond Lambda: Introducing Delta Architecture
+        </Link>
+      </Typography>
+      <Typography variant="p2">
+        <Link href="https://youtube.com/live/hQaENo78za0" muted>
+          <img src={img4} alt="" width="200" />
+          Getting Data Ready for Data Science with Delta Lake
+        </Link>
+      </Typography>
+      <Typography variant="p2">
+        <Link href="https://youtube.com/live/F-5t3QCI96g" muted>
+          <img src={img5} alt="" width="200" />
+          The Genesis of Delta Lake - An Interview with Burak Yavuz
+        </Link>
+      </Typography>
+    </Grid>
+  </Section>
+);
+
+export default VideoSection;