break it out a bit more (#289)

* break it out a bit more

* Fix typo in button label from 'Quick start' to 'Quickstart'

---------

Co-authored-by: Dana Bauer <dana.bauer@gmail.com>

Author: jenningsanderson

docs/getting-data/explore.mdx

@@ -6,29 +6,12 @@ pagination_label: Explorer
 
 ---
 
-import styles from '@site/src/components/home.module.css';
+import { ExplorerEmbed } from '@site/src/components/home';
 
 
 [Overture Maps Explorer](https://explore.overturemaps.org) is a browser-based tool for browsing and inspecting Overture data. No installation, no account, no SQL — just open the link and start exploring.
 
-<div className={styles.explorerSection}>
-  <div className={styles.explorerFrame}>
-    <iframe
-      src="https://explore.overturemaps.org/#map=12/39.9526/-75.1652"
-      title="Overture Maps Explorer"
-      loading="lazy"
-      allow="fullscreen"
-    />
-    <a
-      className={styles.explorerOpen}
-      href="https://explore.overturemaps.org"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      Open full screen ↗
-    </a>
-  </div>
-</div>
+<ExplorerEmbed src="https://explore.overturemaps.org/#map=12/39.9526/-75.1652" />
 
 ## Explore and Inspect modes
 

docs/index.mdx

@@ -1,11 +1,36 @@
 ---
 slug: /
-title: " "
+title: ' '
 sidebar_class_name: hidden
 hide_table_of_contents: true
 className: landing-page
 ---
 
-import Home from '@site/src/components/home';
+import {
+  Hero,
+  HeroHeadline,
+  HeroSubtext,
+  HeroCTAs,
+  PrimaryButton,
+  SecondaryButton,
+  ExplorerEmbed,
+} from '@site/src/components/home';
 
-<Home />
+<Hero>
+  <HeroHeadline />
+
+<HeroSubtext>
+  A platform for bringing together tech companies, mapping organizations, government agencies, open
+  data communities, and researchers to build open, reliable, and interoperable map data
+  infrastructure.
+</HeroSubtext>
+
+  <HeroCTAs>
+    <PrimaryButton to="/getting-data/">Quickstart</PrimaryButton>
+    <SecondaryButton href="https://explore.overturemaps.org">
+      Explore the data and schema →
+    </SecondaryButton>
+  </HeroCTAs>
+</Hero>
+
+<ExplorerEmbed />

src/components/home.jsx

@@ -1,54 +1,72 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
-import RotatingWord from '@site/src/components/RotatingWord';
+import RotatingWord from './RotatingWord';
 import styles from './home.module.css';
 
-export default function Home() {
+export function Hero({ children }) {
+  return <section className={styles.hero}>{children}</section>;
+}
+
+export function HeroHeadline() {
   return (
-    <>
-      <section className={styles.hero}>
-        <div className={styles.headline}>
-          <div className={styles.headlineTop}>
-            <span className={styles.headlineStatic}>Overture</span>
-            <span className={styles.headlineIs}>is</span>
-          </div>
-          <RotatingWord />
-        </div>
+    <div className={styles.headline}>
+      <div className={styles.headlineTop}>
+        <span className={styles.headlineStatic}>Overture</span>
+        <span className={styles.headlineIs}>is</span>
+      </div>
+      <RotatingWord />
+    </div>
+  );
+}
+
+export function HeroSubtext({ children }) {
+  return <p className={styles.subtext}>{children}</p>;
+}
+
+export function HeroCTAs({ children }) {
+  return <div className={styles.ctaRow}>{children}</div>;
+}
 
-        <p className={styles.subtext}>
-          A platform for bringing together tech companies, mapping organizations,
-          government agencies, open data communities, and researchers to build
-          open, reliable, and interoperable map data infrastructure.
-        </p>
+export function PrimaryButton({ to, children }) {
+  return (
+    <Link to={to} className={styles.btnPrimary}>
+      {children}
+    </Link>
+  );
+}
 
-        <div className={styles.ctaRow}>
-          <Link to="/getting-data/" className={styles.btnPrimary}>
-            Quick start
-          </Link>
-          <a href="https://explore.overturemaps.org" className={styles.btnSecondary} target="_blank" rel="noopener noreferrer">
-            Explore the data and schema {'\u2192'}
-          </a>
-        </div>
-      </section>
+export function SecondaryButton({ href, children }) {
+  return (
+    <a
+      href={href}
+      className={styles.btnSecondary}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  );
+}
 
-      <div className={styles.explorerSection}>
-        <div className={styles.explorerFrame}>
-          <iframe
-            src="https://explore.overturemaps.org"
-            title="Overture Maps Explorer"
-            loading="lazy"
-            allow="fullscreen"
-          />
-          <a
-            className={styles.explorerOpen}
-            href="https://explore.overturemaps.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Open full screen {'\u2197'}
-          </a>
-        </div>
+export function ExplorerEmbed({ src = 'https://explore.overturemaps.org' }) {
+  return (
+    <div className={styles.explorerSection}>
+      <div className={styles.explorerFrame}>
+        <iframe
+          src={src}
+          title="Overture Maps Explorer"
+          loading="lazy"
+          allow="fullscreen"
+        />
+        <a
+          className={styles.explorerOpen}
+          href="https://explore.overturemaps.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Open full screen {'\u2197'}
+        </a>
       </div>
-    </>
+    </div>
   );
-}
+}