diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
index c4fc926fd..5b3283131 100644
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -1,30 +1,20 @@
 // @flow
 
 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 {
   usePreloadImageAssets(imageAssetMetaData);
   const [hero] = imageAssetMetaData;
 
   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>
   );
 }
 
 export default AppLanding;
diff --git a/landing/landing.css b/landing/hero.css
similarity index 67%
copy from landing/landing.css
copy to landing/hero.css
index a464e947a..9d6cd4763 100644
--- a/landing/landing.css
+++ b/landing/hero.css
@@ -1,98 +1,70 @@
-.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;
 }
 
 .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;
   }
 }
diff --git a/landing/hero.react.js b/landing/hero.react.js
new file mode 100644
index 000000000..8a9c88f3c
--- /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
index a464e947a..600331bc7 100644
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -1,98 +1,27 @@
 .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;
-}
-
-.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;
-  }
-}