Add diagrams to Quick Start (#4377)

* Add diagrams to Quick Start

* Switch to svg

* Switch dark mode image

* Rework file names, minor dark mode updates

* Update alt tags and descriptions

Author: rickhanlonii

beta/public/images/docs/diagrams/sharing_data_child.dark.svg

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import Image from 'next/image';
+
+interface DiagramProps {
+  name: string;
+  alt: string;
+  height: number;
+  width: number;
+  children: string;
+}
+
+export function Diagram({name, alt, height, width, children}: DiagramProps) {
+  return (
+    <figure className="flex flex-col px-0 py-5 sm:p-10">
+      <div className="dark-image">
+        <Image
+          src={`/images/docs/diagrams/${name}.dark.svg`}
+          alt={alt}
+          height={height}
+          width={width}
+        />
+      </div>
+      <div className="light-image">
+        <Image
+          src={`/images/docs/diagrams/${name}.svg`}
+          alt={alt}
+          height={height}
+          width={width}
+        />
+      </div>
+      <figcaption className="p-1 sm:p-4 mt-4 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-6">
+        {children}
+      </figcaption>
+    </figure>
+  );
+}
+
+export default Diagram;

beta/public/images/docs/diagrams/sharing_data_child.svg

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {ReactNode} from 'react';
+
+interface DiagramGroupProps {
+  children: ReactNode;
+}
+
+export function DiagramGroup({children}: DiagramGroupProps) {
+  return (
+    <div className="flex flex-col sm:flex-row px-6 py-2 sm:p-0 space-y-10 sm:space-y-0">
+      {children}
+    </div>
+  );
+}
+
+export default DiagramGroup;