Port more content to website-next (#1435)

Summary:
This builds upon https://github.com/facebook/yoga/pull/1433 and starts porting over and fixing some of the code in website-next.

1. Create a hero similar to current https://yogalayout.com hero
2. Start moving from `antd` and harcoded colors to [Infima](https://infima.dev/docs/getting-started/introduction/) primitives provided by Docusaurus
3. Replaced some more stock docusaurus assets, links, and text with the ones for Yoga.

There is still a lot to do here (not the least, adding real content), but it's beginning to look like a website, and is already pretty snappy. Eventually I want to get SSR working correctly with Playground, which is still a little broken in the port.

Pull Request resolved: https://github.com/facebook/yoga/pull/1435

Test Plan:
**Gatsby Original**
<img width="1795" alt="image" src="https://github.com/facebook/yoga/assets/835219/7670d53a-00a8-4146-a100-e4a05dd77488">

**New (light mode)**
<img width="800" alt="image" src="https://github.com/facebook/yoga/assets/835219/ebe11d15-5f6f-445f-bcc8-9ec51ecfac62">

**New (dark mode)**
<img width="800" alt="image" src="https://github.com/facebook/yoga/assets/835219/ca44a492-46df-410a-8303-baec3029ec49">

Reviewed By: yungsters

Differential Revision: D50523462

Pulled By: NickGerleman

fbshipit-source-id: 61b4610104f695a4e38a7d4bb6a0c2488bd6f89e

website-next/src/pages/index.tsx

@@ -8,59 +8,82 @@
 import React, {Suspense} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import styles from './index.module.css';
 
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+function HeroSection() {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+    <header className={clsx('hero', styles.heroBanner)}>
+      <div className={clsx('row', 'container', styles.heroRow)}>
+        <div className="col col--6">
+          <h1 className="hero__title">Yoga Layout</h1>
+          <p className="hero__subtitle">
+            A portable and perfomant layout engine targeting web standards
+          </p>
+
+          <Link className="button button--primary button--lg" to="/docs/intro">
+            Learn more
           </Link>
         </div>
+        <div className={clsx(['col col--6', styles.blueprintColumn])}>
+          <div className={clsx([styles.blueprint, styles.blueprintContainer])}>
+            <div className={styles.blueprintHeader}>
+              <div
+                className={clsx([styles.blueprint, styles.blueprintAvatar])}
+              />
+              <div
+                className={clsx([styles.blueprint, styles.blueprintTitle])}
+              />
+              <div
+                className={clsx([styles.blueprint, styles.blueprintSubtitle])}
+              />
+            </div>
+            <div
+              className={clsx([styles.blueprint, styles.blueprintContent])}
+            />
+          </div>
+        </div>
       </div>
     </header>
   );
 }
 
-const LazyPlayground = React.lazy(() => import('../components/Playground'));
-
-function ClientPlayground() {
-  const fallback = <div className={styles.playgroundFallback} />;
+const LazyPlayground = React.lazy(
+  () => import('../components/Playground/Playground'),
+);
 
+// Docusaurus SSR does not correctly support top-level await
+// 1. https://github.com/facebook/docusaurus/issues/7238
+// 2. https://github.com/facebook/docusaurus/issues/9468
+function BrowserOnlyPlayground() {
   return (
-    <BrowserOnly fallback={fallback}>
+    <BrowserOnly fallback={null}>
       {() => (
-        <Suspense fallback={fallback}>
-          <LazyPlayground />
+        <Suspense fallback={null}>
+          <LazyPlayground className={styles.playground} />
         </Suspense>
       )}
     </BrowserOnly>
   );
 }
 
-export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+function PlaygroundSection() {
   return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-        <ClientPlayground />
-      </main>
+    <main className={styles.playgroundSection}>
+      <div className="container">
+        <BrowserOnlyPlayground />
+      </div>
+    </main>
+  );
+}
+
+export default function Home(): JSX.Element {
+  return (
+    <Layout title="Yoga Layout | A cross-platform layout engine">
+      <HeroSection />
+      <PlaygroundSection />
     </Layout>
   );
 }