diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -3,9 +3,7 @@
 import * as React from 'react';
 
 import { imageAssetMetaData } from './asset-meta-data.js';
-import HeroContent from './hero-content.react.js';
-import css from './landing.css';
-import Picture from './Picture.react.js';
+import Hero from './hero.react.js';
 import usePreloadImageAssets from './use-pre-load-image-assets.react.js';
 
 function AppLanding(): React.Node {
@@ -14,15 +12,7 @@
 
   return (
     <main>
-      <section className={css.heroSection}>
-        <div className={css.heroContainer}>
-          <div className={css.heroImage}>
-            <Picture url={hero.url} alt={hero.alt} />
-            <div className={css.glow} />
-          </div>
-          <HeroContent />
-        </div>
-      </section>
+      <Hero {...hero} />
     </main>
   );
 }
diff --git a/landing/landing.css b/landing/hero.css
copy from landing/landing.css
copy to landing/hero.css
--- a/landing/landing.css
+++ b/landing/hero.css
@@ -1,31 +1,3 @@
-.container {
-  background: radial-gradient(ellipse at bottom, #1f252e, #111827) fixed;
-  font-family: var(--sans-serif);
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  color: white;
-  word-break: break-word;
-  height: 100%;
-  position: relative;
-  z-index: var(--landing-page-z-index);
-}
-
-.innerContainer {
-  background-color: var(--page-background);
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: auto;
-}
-
-.innerContainerMobileNav {
-  overflow-y: hidden;
-}
-
-.pageContentContainer {
-  position: relative;
-}
-
 .heroSection {
   display: flex;
   justify-content: center;
diff --git a/landing/hero.react.js b/landing/hero.react.js
new file mode 100644
--- /dev/null
+++ b/landing/hero.react.js
@@ -0,0 +1,30 @@
+// @flow
+
+import * as React from 'react';
+
+import HeroContent from './hero-content.react.js';
+import css from './hero.css';
+import Picture from './Picture.react.js';
+
+type Props = {
+  +url: string,
+  +alt: string,
+};
+
+function Hero(props: Props): React.Node {
+  const { url, alt } = props;
+
+  return (
+    <section className={css.heroSection}>
+      <div className={css.heroContainer}>
+        <div className={css.heroImage}>
+          <Picture url={url} alt={alt} />
+          <div className={css.glow} />
+        </div>
+        <HeroContent />
+      </div>
+    </section>
+  );
+}
+
+export default Hero;
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -25,74 +25,3 @@
 .pageContentContainer {
   position: relative;
 }
-
-.heroSection {
-  display: flex;
-  justify-content: center;
-}
-
-.heroContainer {
-  width: 1850px;
-  display: flex;
-  flex-direction: row-reverse;
-  overflow: hidden;
-}
-
-.heroImage {
-  flex: 1;
-  position: relative;
-}
-
-.glow {
-  position: absolute;
-  width: 448px;
-  height: 360px;
-  border-radius: 50%;
-  background-color: var(--violet-dark-40);
-  top: 200px;
-  left: 224px;
-  filter: blur(80px);
-}
-
-.heroImage picture img {
-  object-fit: cover;
-  object-position: left center;
-  position: absolute;
-  left: 120px;
-  top: 120px;
-  width: 624px;
-  height: 472px;
-  z-index: var(--glow-z-index);
-}
-
-@media screen and (max-width: 1280px) {
-  .heroContainer {
-    flex-direction: column;
-    align-items: center;
-    padding: 16px 32px;
-  }
-
-  .heroImage {
-    margin-bottom: 24px;
-    max-width: 600px;
-  }
-
-  .glow {
-    position: absolute;
-    width: 70%;
-    height: 70%;
-    border-radius: 50%;
-    background-color: var(--violet-dark-40);
-    top: 112px;
-    left: 100px;
-    filter: blur(80px);
-  }
-
-  .heroImage picture img {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-}