diff --git a/docs/navigation/overview.md b/docs/navigation/overview.md
index 69fb9f17..e7bc84aa 100644
--- a/docs/navigation/overview.md
+++ b/docs/navigation/overview.md
@@ -7,6 +7,8 @@ description: "Turn-by-turn navigation for React Native with the Mapbox Navigatio
 image: /img/navigation/social-card.jpg
 ---
 
+import PhoneVideo from '@site/src/components/PhoneVideo';
+
 <head>
   <script type="application/ld+json">
     {JSON.stringify({
@@ -28,6 +30,15 @@ image: /img/navigation/social-card.jpg
 
 It requests routes, runs an active-guidance session and reports route progress. The Navigation SDK draws the route line, the puck and the navigation camera on a regular `@rnmapbox/maps` `MapView`, so your existing layers, sources and annotations keep working on the same map.
 
+<PhoneVideo
+  src="/img/navigation/navigation-demo"
+  poster="/img/navigation/navigation-demo.webp"
+  width={324}
+  height={720}
+  label="Simulated drive to the Ferry Building in San Francisco with the Mapbox Navigation SDK UI: maneuver banner, route line and a camera following the puck"
+  caption="<NavigationView> with a simulated route, on Android."
+/>
+
 :::caution Alpha
 `@rnmapbox/navigation` is in early alpha. The current release is `0.1.0-alpha.1`, published to npm under the `next` tag, and APIs may change between releases.
 :::
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 90db0814..4cd8ce31 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -152,10 +152,6 @@ const config = {
                 label: 'Discord',
                 href: 'https://discord.com/channels/1004826913229000704/1092426983696248893',
               },
-              {
-                label: 'Gitter',
-                href: 'https://twitter.com/docusaurus',
-              },
             ],
           },
           {
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
deleted file mode 100644
index f202ffee..00000000
--- a/src/components/HomepageFeatures/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-const FeatureList = [
-  {
-    title: 'iOS install guide',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures() {
-  return (<></>)
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
deleted file mode 100644
index b248eb2e..00000000
--- a/src/components/HomepageFeatures/styles.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
diff --git a/src/components/LiveMapDemo/index.js b/src/components/LiveMapDemo/index.js
new file mode 100644
index 00000000..9ea9ebe3
--- /dev/null
+++ b/src/components/LiveMapDemo/index.js
@@ -0,0 +1,99 @@
+import React, {useEffect, useRef, useState} from 'react';
+import clsx from 'clsx';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+
+const DEMO_ROUTE = '/example-app/V10/GlobeProjection';
+const TILE_REQUEST = /api\.mapbox\.com\/(v4|tiles)\//;
+const REVEAL_TIMEOUT_MS = 8000;
+
+// The example app's token is URL-restricted, so tiles can fail (e.g. on localhost or previews).
+// Tile response codes are only exposed via Resource Timing in Chromium; elsewhere we reveal after a timeout.
+function tileStatus(frame) {
+  let entries;
+  try {
+    entries = frame.contentWindow.performance.getEntriesByType('resource');
+  } catch {
+    return undefined;
+  }
+  const tile = entries.find((e) => TILE_REQUEST.test(e.name) && e.responseStatus);
+  return tile?.responseStatus;
+}
+
+// The demo is the example app's web export (a ~5 MB bundle), so it only loads after an explicit click.
+export default function LiveMapDemo() {
+  const [state, setState] = useState('poster');
+  const frameRef = useRef(null);
+  const demoUrl = useBaseUrl(DEMO_ROUTE);
+  const posterUrl = useBaseUrl('/img/home/live-demo-globe.webp');
+
+  useEffect(() => {
+    if (state !== 'loading') {
+      return undefined;
+    }
+    const started = Date.now();
+    const timer = setInterval(() => {
+      const status = tileStatus(frameRef.current);
+      if (status >= 200 && status < 300) {
+        setState('live');
+      } else if (status >= 400) {
+        setState('failed');
+      } else if (Date.now() - started > REVEAL_TIMEOUT_MS) {
+        setState('live');
+      }
+    }, 250);
+    return () => clearInterval(timer);
+  }, [state]);
+
+  const showFrame = state === 'loading' || state === 'live';
+
+  return (
+    <figure className={styles.demo}>
+      <div className={styles.phone}>
+        <div className={styles.screen} aria-busy={state === 'loading'}>
+          {showFrame && (
+            <iframe
+              ref={frameRef}
+              className={styles.frame}
+              src={demoUrl}
+              title="Live @rnmapbox/maps globe projection example"
+              allow="fullscreen"
+            />
+          )}
+          {state !== 'live' && (
+            <div className={clsx(styles.cover, state === 'loading' && styles.coverLoading)}>
+              <img
+                className={styles.poster}
+                src={posterUrl}
+                width={300}
+                height={620}
+                fetchpriority="high"
+                alt="Satellite map of northern Europe rendered by the @rnmapbox/maps globe projection example"
+              />
+              {state === 'poster' && (
+                <a
+                  className={styles.play}
+                  href={demoUrl}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setState('loading');
+                  }}>
+                  <span className={styles.playIcon} aria-hidden="true">▶</span>
+                  Run the live map
+                </a>
+              )}
+              {state === 'loading' && <span className={styles.badge}>Loading live map…</span>}
+              {state === 'failed' && <span className={styles.badge}>Live map unavailable here</span>}
+            </div>
+          )}
+        </div>
+      </div>
+      <figcaption className={styles.caption}>
+        The @rnmapbox/maps example app, built for the web.{' '}
+        <a href={demoUrl} target="_blank" rel="noopener">
+          Open full screen
+        </a>
+      </figcaption>
+    </figure>
+  );
+}
diff --git a/src/components/LiveMapDemo/styles.module.css b/src/components/LiveMapDemo/styles.module.css
new file mode 100644
index 00000000..ec77bab8
--- /dev/null
+++ b/src/components/LiveMapDemo/styles.module.css
@@ -0,0 +1,119 @@
+.demo {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.phone {
+  padding: 12px;
+  border-radius: 44px;
+  background: #1c1f26;
+  box-shadow:
+    0 0 0 2px #3a3f4b,
+    0 30px 60px -20px rgba(0, 30, 80, 0.45);
+}
+
+.screen {
+  position: relative;
+  width: 300px;
+  height: 620px;
+  border-radius: 32px;
+  overflow: hidden;
+  background: #0b1a2b;
+}
+
+.poster,
+.frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.poster {
+  object-fit: cover;
+}
+
+.cover {
+  position: absolute;
+  inset: 0;
+}
+
+.coverLoading .poster {
+  filter: saturate(0.6) brightness(0.85);
+}
+
+.badge {
+  position: absolute;
+  left: 50%;
+  bottom: 72px;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  padding: 0.45rem 0.9rem;
+  border-radius: 999px;
+  background: rgba(11, 26, 43, 0.85);
+  color: #fff;
+  font-size: 0.85rem;
+}
+
+.play {
+  position: absolute;
+  left: 50%;
+  bottom: 72px;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  padding: 0.7rem 1.2rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.95);
+  color: #0b1a2b;
+  font-weight: 600;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+  transition: transform 0.15s ease;
+}
+
+.play:hover {
+  color: #0b1a2b;
+  text-decoration: none;
+  transform: translateX(-50%) scale(1.04);
+}
+
+.playIcon {
+  display: inline-grid;
+  place-items: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  background: var(--mbx-blue);
+  color: #fff;
+  font-size: 0.7rem;
+}
+
+.caption {
+  margin-top: 1rem;
+  max-width: 324px;
+  font-size: 0.85rem;
+  text-align: center;
+  color: var(--ifm-color-emphasis-700);
+}
+
+@media screen and (max-width: 996px) {
+  .phone {
+    padding: 10px;
+    border-radius: 36px;
+  }
+
+  .screen {
+    width: 240px;
+    height: 496px;
+    border-radius: 26px;
+  }
+
+  .play,
+  .badge {
+    bottom: 56px;
+  }
+}
diff --git a/src/components/PhoneVideo/index.js b/src/components/PhoneVideo/index.js
new file mode 100644
index 00000000..c7818c76
--- /dev/null
+++ b/src/components/PhoneVideo/index.js
@@ -0,0 +1,53 @@
+import React, {useEffect, useRef} from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+
+// Plays only while on screen, so the video isn't downloaded until it's scrolled into view.
+// Reduced-motion users and no-JS visitors see the poster.
+export default function PhoneVideo({src, poster, width, height, label, caption}) {
+  const videoRef = useRef(null);
+  const webm = useBaseUrl(`${src}.webm`);
+  const mp4 = useBaseUrl(`${src}.mp4`);
+  const posterUrl = useBaseUrl(poster);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          video.play().catch(() => {});
+        } else {
+          video.pause();
+        }
+      },
+      {threshold: 0.25},
+    );
+    observer.observe(video);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <figure className={styles.demo}>
+      <div className={styles.phone}>
+        <video
+          ref={videoRef}
+          className={styles.screen}
+          poster={posterUrl}
+          width={width}
+          height={height}
+          muted
+          loop
+          playsInline
+          preload="none"
+          aria-label={label}>
+          <source src={webm} type="video/webm" />
+          <source src={mp4} type="video/mp4" />
+        </video>
+      </div>
+      {caption && <figcaption className={styles.caption}>{caption}</figcaption>}
+    </figure>
+  );
+}
diff --git a/src/components/PhoneVideo/styles.module.css b/src/components/PhoneVideo/styles.module.css
new file mode 100644
index 00000000..a0b1204c
--- /dev/null
+++ b/src/components/PhoneVideo/styles.module.css
@@ -0,0 +1,43 @@
+.demo {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.phone {
+  padding: 12px;
+  border-radius: 44px;
+  background: #1c1f26;
+  box-shadow:
+    0 0 0 2px #3a3f4b,
+    0 30px 60px -20px rgba(0, 30, 80, 0.45);
+}
+
+.screen {
+  display: block;
+  width: 270px;
+  height: auto;
+  border-radius: 32px;
+  background: #9fd9f7;
+}
+
+.caption {
+  margin-top: 1rem;
+  max-width: 294px;
+  font-size: 0.85rem;
+  text-align: center;
+  color: var(--ifm-color-emphasis-700);
+}
+
+@media screen and (max-width: 996px) {
+  .phone {
+    padding: 10px;
+    border-radius: 36px;
+  }
+
+  .screen {
+    width: 216px;
+    border-radius: 26px;
+  }
+}
diff --git a/src/core/PrismTheme.js b/src/core/PrismTheme.js
index 9e38881b..cd6fd742 100644
--- a/src/core/PrismTheme.js
+++ b/src/core/PrismTheme.js
@@ -15,7 +15,7 @@ const theme = {
     {
       types: ['property'],
       style: {
-        color: '#2aa198',
+        color: '#2fb3a9',
       },
     },
     {
@@ -39,13 +39,13 @@ const theme = {
     {
       types: ['selector', 'char', 'builtin', 'url'],
       style: {
-        color: '#2aa198',
+        color: '#2fb3a9',
       },
     },
     {
       types: ['entity'],
       style: {
-        color: '#2aa198',
+        color: '#2fb3a9',
       },
     },
     {
diff --git a/src/pages/index.js b/src/pages/index.js
index afac8bb8..ce4c6b0e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,46 +1,225 @@
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import CodeBlock from '@theme/CodeBlock';
+import LiveMapDemo from '@site/src/components/LiveMapDemo';
+import PhoneVideo from '@site/src/components/PhoneVideo';
 
 import styles from './index.module.css';
 
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+const PLATFORMS = ['iOS', 'Android', 'Web (experimental)', 'Expo', 'New Architecture'];
+
+const FEATURES = [
+  {
+    title: 'Native Mapbox SDK v11',
+    to: '/docs/install',
+    body: 'Maps are rendered by the Mapbox Maps SDK for iOS and Android, not a WebView, so gestures, 3D terrain and large datasets stay smooth.',
+  },
+  {
+    title: 'Declarative sources and layers',
+    to: '/docs/components/MapView',
+    body: 'Compose ShapeSource, VectorSource, SymbolLayer, CircleLayer and more as React components, styled with Mapbox style-spec expressions.',
+  },
+  {
+    title: 'Camera, markers and location',
+    to: '/docs/examples',
+    body: 'Animate the camera, place React views as markers, show the user location puck and query rendered features.',
+  },
+  {
+    title: 'Offline maps',
+    to: '/docs/examples/CacheOffline/OfflineExample',
+    body: 'Download regions and tile packs for use without a connection, and manage the cache from JavaScript.',
+  },
+  {
+    title: 'Expo config plugin',
+    to: '/docs/install',
+    body: 'Works with Expo prebuild and development builds. Built for the React Native New Architecture (0.79+).',
+  },
+  {
+    title: 'Turn-by-turn navigation',
+    to: '/docs/navigation/overview',
+    body: '@rnmapbox/navigation (alpha) adds routing and guidance on top of the same map, powered by the Mapbox Navigation SDK.',
+  },
+];
+
+const SNIPPET = `import Mapbox, {
+  MapView,
+  Camera,
+  ShapeSource,
+  CircleLayer,
+} from '@rnmapbox/maps';
+
+Mapbox.setAccessToken('<your public token>');
+
+const QUAKES_URL = 'https://example.com/quakes.geojson';
+
+export default function App() {
+  return (
+    <MapView style={{flex: 1}} styleURL={Mapbox.StyleURL.Dark}>
+      <Camera zoomLevel={5} centerCoordinate={[-121.5, 38]} />
+      <ShapeSource id="quakes" url={QUAKES_URL}>
+        <CircleLayer
+          id="quake-dots"
+          style={{circleRadius: 6, circleColor: '#fbb03b'}}
+        />
+      </ShapeSource>
+    </MapView>
+  );
+}`;
+
+function Hero() {
+  return (
+    <header className={styles.hero}>
+      <div className={clsx('container', styles.heroInner)}>
+        <div className={styles.heroText}>
+          <p className={styles.eyebrow}>@rnmapbox/maps</p>
+          <h1 className={styles.title}>Mapbox maps for React Native</h1>
+          <p className={styles.subtitle}>
+            A community-supported, open-source library for building interactive maps with the native Mapbox
+            Maps SDK on iOS and Android.
+          </p>
+          <ul className={styles.platforms} aria-label="Supported platforms">
+            {PLATFORMS.map((p) => (
+              <li key={p}>{p}</li>
+            ))}
+          </ul>
+          <div className={styles.ctas}>
+            <Link className={clsx('button button--primary button--lg', styles.primary)} to="/docs/install">
+              Get started
+            </Link>
+            <Link className="button button--secondary button--outline button--lg" to="/docs/examples">
+              Browse examples
+            </Link>
+          </div>
+          <pre className={styles.install}>
+            <code>npm install @rnmapbox/maps</code>
+          </pre>
+        </div>
+        <LiveMapDemo />
+      </div>
+    </header>
+  );
+}
+
+function Features() {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <section className={styles.section}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div style={{}}>
-          <img src="/img/intro-examples.png" alt="rnmapbox screenshots" />
+        <h2 className={styles.sectionTitle}>Everything you need to ship maps</h2>
+        <div className={styles.features}>
+          {FEATURES.map(({title, to, body}) => (
+            <Link key={title} to={to} className={styles.feature}>
+              <h3>{title}</h3>
+              <p>{body}</p>
+            </Link>
+          ))}
         </div>
-        <div style={{margin: "1rem 0"}}>
-          <Link className="button button--secondary" to="/docs/navigation/overview">
-            Turn-by-turn navigation: @rnmapbox/navigation (alpha)
-          </Link>
+      </div>
+    </section>
+  );
+}
+
+function CodeAndShowcase() {
+  return (
+    <section className={clsx(styles.section, styles.sectionAlt)}>
+      <div className={clsx('container', styles.split)}>
+        <div className={styles.splitText}>
+          <h2 className={styles.sectionTitle}>Maps as React components</h2>
+          <p>
+            Sources and layers are plain components: change props and the native map updates. The same code runs
+            on iOS, Android and, experimentally, the web.
+          </p>
+          <CodeBlock language="jsx">{SNIPPET}</CodeBlock>
         </div>
-        <div style={{display: "flex", flexDirection: "row", justifyContent: "space-around"}}>
-          <img src="/img/react-native-logo.svg" alt="React-Native logo" style={{height: "100px", marginRight: "40px"}} />
-          <img src="/img/mapbox-logo.svg" alt="Mapbox logo" style={{height: "100px"}} />
+        <img
+          className={styles.showcase}
+          src={useBaseUrl('/img/home/intro-examples.webp')}
+          width={1200}
+          height={823}
+          loading="lazy"
+          decoding="async"
+          alt="Three iPhone screenshots: a street map of New York, a topographic map of Yosemite Valley and a 3D terrain view"
+        />
+      </div>
+    </section>
+  );
+}
+
+function Navigation() {
+  return (
+    <section className={styles.section}>
+      <div className={clsx('container', styles.split)}>
+        <div className={styles.splitText}>
+          <h2 className={styles.sectionTitle}>Turn-by-turn navigation</h2>
+          <p>
+            @rnmapbox/navigation (alpha) wraps the Mapbox Navigation SDK v3: request routes, run guidance and get
+            route progress events, with the SDK drawing the route line, puck and navigation camera on your map. Or
+            drop in a complete navigation screen with maneuver banners, lanes and speed limits.
+          </p>
+          <div className={styles.ctas}>
+            <Link className={clsx('button button--primary', styles.primary)} to="/docs/navigation/overview">
+              Navigation overview
+            </Link>
+            <Link className="button button--secondary button--outline" to="/docs/navigation/install">
+              Install
+            </Link>
+          </div>
         </div>
-        
+        <PhoneVideo
+          src="/img/navigation/navigation-demo"
+          poster="/img/navigation/navigation-demo.webp"
+          width={324}
+          height={720}
+          label="Simulated drive to the Ferry Building in San Francisco with the Mapbox Navigation SDK UI: maneuver banner, route line and a camera following the puck"
+          caption="<NavigationView> with a simulated route, on Android."
+        />
       </div>
-    </header>
+    </section>
+  );
+}
+
+function Community() {
+  return (
+    <section className={clsx(styles.section, styles.sectionAlt)}>
+      <div className={clsx('container', styles.community)}>
+        <h2 className={styles.sectionTitle}>Built by the community</h2>
+        <p>
+          @rnmapbox/maps is open source and maintained by the community. Questions, bug reports and pull requests
+          are welcome.
+        </p>
+        <div className={styles.ctas}>
+          <Link className={clsx('button button--primary', styles.primary)} href="https://github.com/rnmapbox/maps">
+            GitHub
+          </Link>
+          <Link
+            className="button button--secondary button--outline"
+            href="https://discord.com/channels/1004826913229000704/1092426983696248893">
+            Discord
+          </Link>
+          <Link
+            className="button button--secondary button--outline"
+            href="https://stackoverflow.com/questions/tagged/react-native+mapbox">
+            Stack Overflow
+          </Link>
+        </div>
+      </div>
+    </section>
   );
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
       title="Mapbox maps and turn-by-turn navigation for React Native"
       description="@rnmapbox/maps is a community-supported React Native library for Mapbox maps on iOS and Android. @rnmapbox/navigation adds turn-by-turn navigation.">
-      <HomepageHeader />
+      <Hero />
       <main>
-        <HomepageFeatures />
+        <Features />
+        <CodeAndShowcase />
+        <Navigation />
+        <Community />
       </main>
     </Layout>
   );
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5da..4305ef6d 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,23 +1,163 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
+.hero {
+  padding: 4rem 0 3.5rem;
+  background:
+    radial-gradient(1200px 500px at 85% 20%, rgba(0, 122, 252, 0.18), transparent 70%),
+    linear-gradient(180deg, var(--mbx-blue-faint), var(--ifm-background-color));
+}
+
+[data-theme='dark'] .hero {
+  background:
+    radial-gradient(1200px 500px at 85% 20%, rgba(0, 122, 252, 0.25), transparent 70%),
+    linear-gradient(180deg, #101a2b, var(--ifm-background-color));
+}
+
+.heroInner {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 3rem;
+  align-items: center;
+}
+
+.eyebrow {
+  margin: 0 0 0.5rem;
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: 600;
+  color: var(--mbx-blue);
+}
+
+.title {
+  margin: 0 0 1rem;
+  font-size: clamp(2.2rem, 5vw, 3.4rem);
+  line-height: 1.1;
+}
+
+.subtitle {
+  max-width: 34rem;
+  font-size: 1.2rem;
+  color: var(--ifm-color-emphasis-800);
+}
+
+.platforms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 1.75rem;
+  padding: 0;
+  list-style: none;
+}
+
+.platforms li {
+  margin: 0;
+  padding: 0.2rem 0.75rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 999px;
+  font-size: 0.85rem;
+  background: var(--ifm-background-surface-color);
+}
+
+.ctas {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.primary {
+  border-color: var(--mbx-deep-blue);
+  background-color: var(--mbx-deep-blue);
+}
+
+.install {
+  display: inline-block;
+  margin: 1.5rem 0 0;
+  padding: 0.6rem 1rem;
+  font-size: 0.95rem;
+}
 
-.heroBanner {
+.section {
   padding: 4rem 0;
+}
+
+.sectionAlt {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.sectionTitle {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+
+.feature {
+  display: block;
+  padding: 1.5rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  color: inherit;
+  background: var(--ifm-background-surface-color);
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.feature:hover {
+  color: inherit;
+  text-decoration: none;
+  border-color: var(--mbx-blue);
+  transform: translateY(-2px);
+}
+
+.feature h3 {
+  margin-bottom: 0.5rem;
+}
+
+.feature p {
+  margin: 0;
+  color: var(--ifm-color-emphasis-800);
+}
+
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 3rem;
+  align-items: center;
+}
+
+.showcase {
+  width: 100%;
+  height: auto;
+}
+
+.community {
+  max-width: 44rem;
   text-align: center;
-  position: relative;
-  overflow: hidden;
+}
+
+.community .ctas {
+  justify-content: center;
 }
 
 @media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
+  .hero {
+    padding: 2.5rem 0;
+  }
+
+  .heroInner,
+  .split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .features {
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+@media screen and (min-width: 600px) and (max-width: 996px) {
+  .features {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
diff --git a/static/img/home/intro-examples.webp b/static/img/home/intro-examples.webp
new file mode 100644
index 00000000..f5bcf845
Binary files /dev/null and b/static/img/home/intro-examples.webp differ
diff --git a/static/img/home/live-demo-globe.webp b/static/img/home/live-demo-globe.webp
new file mode 100644
index 00000000..565cd007
Binary files /dev/null and b/static/img/home/live-demo-globe.webp differ
diff --git a/static/img/navigation/navigation-demo.mp4 b/static/img/navigation/navigation-demo.mp4
new file mode 100644
index 00000000..9b51bb26
Binary files /dev/null and b/static/img/navigation/navigation-demo.mp4 differ
diff --git a/static/img/navigation/navigation-demo.webm b/static/img/navigation/navigation-demo.webm
new file mode 100644
index 00000000..ea31bc5e
Binary files /dev/null and b/static/img/navigation/navigation-demo.webm differ
diff --git a/static/img/navigation/navigation-demo.webp b/static/img/navigation/navigation-demo.webp
new file mode 100644
index 00000000..4b90fa80
Binary files /dev/null and b/static/img/navigation/navigation-demo.webp differ