diff --git a/docs/.vitepress/theme/fonts/OFL.txt b/docs/.vitepress/theme/fonts/OFL.txt
new file mode 100644
index 0000000..ba41e11
--- /dev/null
+++ b/docs/.vitepress/theme/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2023 The Schibsted-Grotesk Project Authors (https://github.com/schibsted/schibsted-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/docs/.vitepress/theme/fonts/schibsted-grotesk-latin.woff2 b/docs/.vitepress/theme/fonts/schibsted-grotesk-latin.woff2
new file mode 100644
index 0000000..dbca3fd
Binary files /dev/null and b/docs/.vitepress/theme/fonts/schibsted-grotesk-latin.woff2 differ
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..44b82ea
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,7 @@
+import DefaultTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+} satisfies Theme
diff --git a/docs/.vitepress/theme/landing/ClosingCta.vue b/docs/.vitepress/theme/landing/ClosingCta.vue
new file mode 100644
index 0000000..945e22d
--- /dev/null
+++ b/docs/.vitepress/theme/landing/ClosingCta.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { VPButton } from 'vitepress/theme'
+</script>
+
+<template>
+  <section class="l-section cta" aria-labelledby="cta-title">
+    <div class="l-wrap inner">
+      <h2 id="cta-title" class="l-h2">You already wrote the app</h2>
+      <p class="l-lede">Add the native shells and open it in the simulator.</p>
+      <div class="actions">
+        <VPButton size="big" theme="brand" text="Get started" href="/guide/quick-start" />
+        <VPButton
+          size="big"
+          theme="alt"
+          text="GitHub"
+          href="https://github.com/inertia-native/inertia-native"
+        />
+      </div>
+    </div>
+    <footer class="foot l-wrap">
+      MIT licensed. A community project, not affiliated with the Inertia.js or
+      Hotwire teams.
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.cta {
+  padding-bottom: 40px;
+}
+
+.inner {
+  text-align: center;
+}
+
+.inner .l-lede {
+  margin-inline: auto;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 32px;
+}
+
+.foot {
+  margin-top: 96px;
+  padding-top: 24px;
+  border-top: 1px solid var(--vp-c-divider);
+  text-align: center;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--vp-c-text-2);
+}
+</style>
diff --git a/docs/.vitepress/theme/landing/CopyCommand.vue b/docs/.vitepress/theme/landing/CopyCommand.vue
new file mode 100644
index 0000000..cf408f9
--- /dev/null
+++ b/docs/.vitepress/theme/landing/CopyCommand.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{ command: string }>()
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.command)
+    copied.value = true
+    clearTimeout(timer)
+    timer = setTimeout(() => (copied.value = false), 1600)
+  } catch {
+    // Clipboard blocked: the command is still selectable text.
+  }
+}
+</script>
+
+<template>
+  <div class="cmd">
+    <code><span class="ps" aria-hidden="true">$</span>{{ command }}</code>
+    <button type="button" :aria-label="`Copy “${command}”`" @click="copy">
+      <span aria-live="polite">{{ copied ? 'Copied' : 'Copy' }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.cmd {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  font-family: var(--vp-font-family-mono);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.cmd code {
+  overflow-x: auto;
+  padding: 11px 4px 11px 14px;
+  white-space: nowrap;
+  color: var(--vp-c-text-1);
+  background: none;
+  font-size: inherit;
+  border-radius: 0;
+}
+
+.ps {
+  margin-right: 10px;
+  color: var(--vp-c-text-3);
+  user-select: none;
+}
+
+button {
+  flex: none;
+  align-self: stretch;
+  padding: 0 12px;
+  border-left: 1px solid var(--vp-c-divider);
+  font-family: var(--vp-font-family-base);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.2s, background-color 0.2s;
+  border-radius: 0 7px 7px 0;
+}
+
+button:hover {
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-default-soft);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: -2px;
+}
+</style>
diff --git a/docs/.vitepress/theme/landing/Foundation.vue b/docs/.vitepress/theme/landing/Foundation.vue
new file mode 100644
index 0000000..1d749c9
--- /dev/null
+++ b/docs/.vitepress/theme/landing/Foundation.vue
@@ -0,0 +1,126 @@
+<template>
+  <section class="l-section alt" aria-labelledby="foundation-title">
+    <div class="l-wrap grid">
+      <div>
+        <h2 id="foundation-title" class="l-h2">Built on Hotwire Native</h2>
+        <p class="l-lede">
+          Hotwire Native is the open-source framework 37signals uses for its
+          HEY and Basecamp mobile apps. Inertia Native connects your Inertia
+          app to it. The native side is a regular Hotwire Native app, so the
+          Hotwire Native docs apply to it.
+        </p>
+        <p class="link">
+          <a class="l-link" href="https://native.hotwired.dev" target="_blank" rel="noreferrer">
+            Hotwire Native docs
+          </a>
+        </p>
+      </div>
+
+      <!-- The middle layer is thin on purpose: it is a shim. -->
+      <ol class="cake" aria-label="How the pieces fit, top to bottom">
+        <li class="tier web">
+          <strong>Your Inertia app</strong>
+          <span>React, Vue or Svelte pages, served by Laravel, Rails or any other backend.</span>
+        </li>
+        <li class="tier shim">
+          <code>inertia-native</code>
+          <span>Hands Inertia visits to Hotwire Native. Does nothing in a browser.</span>
+        </li>
+        <li class="tier native">
+          <strong>Hotwire Native</strong>
+          <span>The iOS and Android apps: native screens, modals and bridge components.</span>
+        </li>
+      </ol>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  gap: 48px;
+  align-items: center;
+}
+
+.link {
+  margin-top: 24px;
+}
+
+.cake {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 16px;
+  background: var(--vp-c-bg);
+  overflow: hidden;
+  box-shadow: 0 24px 48px -32px rgba(30, 24, 60, 0.25);
+}
+
+.tier {
+  display: grid;
+  gap: 6px;
+  padding: 28px 28px 30px;
+}
+
+.tier strong {
+  font-family: var(--l-display);
+  font-size: 22px;
+  font-weight: 750;
+  letter-spacing: -0.01em;
+}
+
+.tier span {
+  max-width: 40ch;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--vp-c-text-2);
+}
+
+.web {
+  background: var(--l-web-soft);
+}
+
+.web strong {
+  color: var(--l-web);
+}
+
+.native {
+  background: var(--l-native-soft);
+}
+
+.native strong {
+  color: var(--l-native);
+}
+
+.tier.shim {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 14px;
+  padding: 10px 28px;
+  border-block: 1px dashed var(--vp-c-divider);
+  background: var(--vp-c-bg);
+}
+
+.shim code {
+  padding: 0 !important;
+  background: none !important;
+  font-size: 13px !important;
+  font-weight: 600;
+  color: var(--vp-c-text-1) !important;
+}
+
+.shim span {
+  max-width: none;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 960px) {
+  .grid {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 80px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/landing/LandingHero.vue b/docs/.vitepress/theme/landing/LandingHero.vue
new file mode 100644
index 0000000..c82a0a3
--- /dev/null
+++ b/docs/.vitepress/theme/landing/LandingHero.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { VPButton } from 'vitepress/theme'
+import Phone from './Phone.vue'
+import CopyCommand from './CopyCommand.vue'
+</script>
+
+<template>
+  <section class="hero" aria-labelledby="hero-title">
+    <div class="glow" aria-hidden="true" />
+    <div class="inner l-wrap">
+      <div class="copy">
+        <p class="name"><span class="logo" aria-hidden="true" />Inertia Native</p>
+        <h1 id="hero-title">
+          Your Inertia app,<br class="br" /> as a real iOS <span class="nw">and Android app</span>
+        </h1>
+        <p class="lede">
+          Inertia Native opens the pages you already have as native screens,
+          with the platform’s own navigation and modals. In a browser it does
+          nothing, so your website keeps working.
+        </p>
+        <div class="actions">
+          <VPButton size="big" theme="brand" text="Get started" href="/guide/quick-start" />
+          <VPButton
+            size="big"
+            theme="alt"
+            text="GitHub"
+            href="https://github.com/inertia-native/inertia-native"
+          />
+        </div>
+        <CopyCommand class="install" command="npx inertia-native init" />
+        <p class="stack">
+          Inertia 3 with React, Vue or Svelte. Laravel, Rails or any other backend.
+        </p>
+      </div>
+
+      <figure class="devices">
+        <div class="dev-ios">
+          <Phone
+            platform="ios"
+            src="/landing/ios-push.webp"
+            alt="iOS app showing a pushed screen titled Basic Navigation, with a native back button"
+            eager
+          />
+          <div class="mark native" aria-hidden="true"><span>Native navigation</span></div>
+          <div class="mark web" aria-hidden="true"><span>Your Inertia page</span></div>
+        </div>
+        <div class="dev-android">
+          <Phone
+            platform="android"
+            src="/landing/android-push.webp"
+            alt="The same screen on Android, with a native toolbar and back arrow"
+            eager
+          />
+        </div>
+        <figcaption>The same Inertia page on iOS and Android</figcaption>
+      </figure>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.hero {
+  position: relative;
+  padding: 40px var(--l-gutter) 72px;
+  isolation: isolate;
+}
+
+.glow {
+  position: absolute;
+  inset: -64px 0 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(60% 26% at 40% 76%, var(--l-web-soft), transparent 70%),
+    radial-gradient(44% 18% at 70% 90%, var(--l-native-soft), transparent 70%);
+}
+
+.inner {
+  display: grid;
+  gap: 56px;
+}
+
+.name {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--l-display);
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.005em;
+  color: var(--vp-c-text-1);
+}
+
+/* Two screens, one on top of the other: your app and the phone. */
+.logo {
+  position: relative;
+  width: 18px;
+  height: 18px;
+}
+
+.logo::before,
+.logo::after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+
+.logo::before {
+  left: 0;
+  top: 0;
+  background: var(--l-web);
+}
+
+.logo::after {
+  right: 0;
+  bottom: 0;
+  background: var(--l-native);
+  box-shadow: 0 0 0 2px var(--vp-c-bg);
+}
+
+.nw {
+  white-space: nowrap;
+}
+
+.br {
+  display: none;
+}
+
+@media (min-width: 480px) {
+  .br {
+    display: inline;
+  }
+}
+
+h1 {
+  margin-top: 14px;
+  font-family: var(--l-display);
+  font-size: clamp(40px, 6.4vw, 68px);
+  font-weight: 800;
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  color: var(--vp-c-text-1);
+  text-wrap: balance;
+}
+
+.lede {
+  margin-top: 22px;
+  max-width: 34em;
+  font-size: 19px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  text-wrap: pretty;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 32px;
+}
+
+.install {
+  margin-top: 16px;
+}
+
+.stack {
+  margin-top: 20px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+/* Devices */
+.devices {
+  --phone: min(46vw, 230px);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 0;
+}
+
+.dev-ios,
+.dev-android {
+  flex: none;
+  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+/* iOS sits behind and higher; Android in front, so both back buttons show. */
+.dev-ios {
+  position: relative;
+  z-index: 1;
+  width: var(--phone);
+}
+
+.dev-android {
+  position: relative;
+  z-index: 2;
+  width: calc(var(--phone) * 0.95);
+  margin-top: calc(var(--phone) * 0.52);
+  margin-left: calc(var(--phone) * -0.32);
+  animation-delay: 0.12s;
+}
+
+figcaption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -36px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.mark {
+  display: none;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (min-width: 960px) {
+  .hero {
+    padding-top: 64px;
+    padding-bottom: 96px;
+  }
+
+  .glow {
+    background:
+      radial-gradient(36% 44% at 72% 36%, var(--l-web-soft), transparent 70%),
+      radial-gradient(26% 32% at 86% 72%, var(--l-native-soft), transparent 70%);
+  }
+
+  .inner {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: center;
+    gap: 32px;
+  }
+
+  h1 {
+    font-size: clamp(46px, 4.7vw, 68px);
+  }
+
+  .devices {
+    --phone: clamp(200px, 18vw, 250px);
+    justify-content: flex-end;
+    padding-left: 150px;
+  }
+
+  .mark {
+    display: block;
+    position: absolute;
+    right: calc(100% + 14px);
+    width: 10px;
+    border: 1.5px solid currentColor;
+    border-right: 0;
+    border-radius: 3px 0 0 3px;
+    animation: fade 0.6s ease-out 0.7s both;
+  }
+
+  .mark span {
+    position: absolute;
+    right: calc(100% + 10px);
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.3;
+    text-align: right;
+  }
+
+  .mark.native {
+    top: 1.5%;
+    height: 11%;
+    color: var(--l-native);
+  }
+
+  .mark.native span {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .mark.web {
+    top: 14%;
+    bottom: 1.5%;
+    color: var(--l-web);
+  }
+
+  .mark.web span {
+    top: 24px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .inner {
+    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/landing/NativeFeatures.vue b/docs/.vitepress/theme/landing/NativeFeatures.vue
new file mode 100644
index 0000000..0dd7c1f
--- /dev/null
+++ b/docs/.vitepress/theme/landing/NativeFeatures.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+/** The default slot is the bridge component example, a code block in index.md. */
+import Phone from './Phone.vue'
+</script>
+
+<template>
+  <section class="l-section" aria-labelledby="native-title">
+    <div class="l-wrap">
+      <h2 id="native-title" class="l-h2">What your pages do inside the app</h2>
+      <p class="l-lede">
+        Your Inertia code stays as it is. Hotwire Native handles the screens.
+      </p>
+
+      <div class="map-grid">
+        <div class="map">
+          <div class="cols" aria-hidden="true">
+            <span class="web">In your Inertia app</span>
+            <span class="native">On the phone</span>
+          </div>
+          <dl>
+            <div class="row">
+              <dt><code>&lt;Link href="/orders/42"&gt;</code></dt>
+              <dd>Pushes a native screen with a back button.</dd>
+            </div>
+            <div class="row">
+              <dt>Going back, by button or swipe</dt>
+              <dd>Pops the screen. Inertia restores the page from its history.</dd>
+            </div>
+            <div class="row">
+              <dt><code>router.visit(url, { replace: true })</code></dt>
+              <dd>Swaps the current screen for the new one.</dd>
+            </div>
+            <div class="row">
+              <dt><code>"context": "modal"</code> in your path configuration</dt>
+              <dd>Opens matching pages as native modals.</dd>
+            </div>
+            <div class="row">
+              <dt><code>form.post('/orders')</code></dt>
+              <dd>
+                Submits in place. With <code>proposeFormRedirects</code>, native
+                can close the modal and show the result.
+              </dd>
+            </div>
+            <div class="row">
+              <dt>A 404, a 500 or no connection</dt>
+              <dd>Shows the native error screen.</dd>
+            </div>
+            <div class="row">
+              <dt>Pull to refresh</dt>
+              <dd>Reloads the current page.</dd>
+            </div>
+          </dl>
+        </div>
+
+        <figure class="shot">
+          <Phone
+            platform="ios"
+            src="/landing/ios-modal.webp"
+            alt="iOS app showing a page presented as a native modal sheet over the previous screen"
+          />
+          <figcaption>A page opened as a modal on iOS</figcaption>
+        </figure>
+      </div>
+
+      <div class="bridge">
+        <figure class="shot">
+          <Phone
+            platform="android"
+            src="/media/button-android.mp4"
+            alt="Android app with a Tap me button in the native toolbar. Each tap updates the count on the web page below."
+          />
+          <figcaption>A web page adds a button to the Android toolbar</figcaption>
+        </figure>
+
+        <div class="bridge-copy">
+          <h3 class="l-h3">Native controls from your pages</h3>
+          <p class="l-text">
+            Bridge components let a page put native UI on screen, like a button
+            in the navigation bar or an alert, and react when someone taps it.
+            Copy ready-made ones from the
+            <a href="https://github.com/inertia-native/bridge-components" target="_blank" rel="noreferrer">registry</a>,
+            or build your own with
+            <code>useBridgeComponent</code> in React, Vue or Svelte.
+          </p>
+          <div class="vp-doc l-code code"><slot /></div>
+          <p class="l-text note">
+            Inside the app, <strong>Tap me</strong> goes in the navigation bar.
+            In a browser, the page shows its own button instead.
+          </p>
+          <p><a class="l-link" href="/components/button">See the Button component</a></p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.map-grid {
+  display: grid;
+  gap: 56px;
+  margin-top: 48px;
+}
+
+/* Column labels: violet is your app, amber is the phone. */
+.cols {
+  display: none;
+}
+
+.cols span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.cols span::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background: currentColor;
+}
+
+.web {
+  color: var(--l-web);
+}
+
+.native {
+  color: var(--l-native);
+}
+
+dl {
+  margin: 0;
+}
+
+.row {
+  display: grid;
+  gap: 6px;
+  padding: 16px 0;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.row:last-child {
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+dt {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--vp-c-text-1);
+}
+
+dt code {
+  color: var(--l-web) !important;
+  background: var(--l-web-soft) !important;
+}
+
+dd {
+  margin: 0;
+  position: relative;
+  padding-left: 22px;
+  font-size: 15px;
+  line-height: 1.55;
+  color: var(--vp-c-text-2);
+}
+
+dd::before {
+  content: '\2192';
+  position: absolute;
+  left: 0;
+  color: var(--l-native);
+  font-weight: 600;
+}
+
+.shot {
+  margin: 0;
+  width: min(62vw, 250px);
+  justify-self: center;
+}
+
+.shot figcaption {
+  margin-top: 16px;
+  text-align: center;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+/* Bridge components */
+.bridge {
+  display: grid;
+  gap: 48px;
+  margin-top: 96px;
+}
+
+.bridge-copy {
+  min-width: 0;
+}
+
+.bridge-copy .l-text {
+  margin-top: 12px;
+  max-width: 56ch;
+}
+
+.code {
+  margin-top: 24px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.code :deep(div[class*='language-']) {
+  border-radius: 12px;
+}
+
+.note {
+  font-size: 14px !important;
+}
+
+.bridge-copy .l-text a {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.bridge-copy p:last-child {
+  margin-top: 20px;
+}
+
+@media (min-width: 768px) {
+  .row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 24px;
+    align-items: baseline;
+  }
+
+  .cols {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 24px;
+    padding-bottom: 12px;
+  }
+
+  .cols .native {
+    padding-left: 22px;
+  }
+}
+
+@media (min-width: 960px) {
+  .map-grid {
+    grid-template-columns: minmax(0, 1fr) 260px;
+    gap: 72px;
+    align-items: start;
+  }
+
+  .map-grid .shot {
+    position: sticky;
+    top: calc(var(--vp-nav-height) + 32px);
+    width: 100%;
+  }
+
+  .bridge {
+    grid-template-columns: 260px minmax(0, 1fr);
+    gap: 72px;
+    align-items: center;
+    margin-top: 120px;
+  }
+
+  .bridge .shot {
+    width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/landing/Phone.vue b/docs/.vitepress/theme/landing/Phone.vue
new file mode 100644
index 0000000..313baef
--- /dev/null
+++ b/docs/.vitepress/theme/landing/Phone.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+/**
+ * A phone frame around a screenshot or a screen recording (.mp4, muted and looped).
+ * Media must have the device's aspect ratio: iOS 1206×2622, Android 1080×2400.
+ */
+import { computed, onMounted, ref } from 'vue'
+import { withBase } from 'vitepress'
+
+const props = withDefaults(
+  defineProps<{
+    src: string
+    alt: string
+    platform?: 'ios' | 'android'
+    /** Load right away (above the fold). */
+    eager?: boolean
+  }>(),
+  { platform: 'ios', eager: false },
+)
+
+const isVideo = computed(() => /\.(mp4|webm|mov)$/i.test(props.src.split(/[?#]/)[0]))
+const video = ref<HTMLVideoElement>()
+const playing = ref(false)
+
+function toggle() {
+  const el = video.value
+  if (!el) return
+  if (el.paused) el.play().catch(() => {})
+  else el.pause()
+}
+
+onMounted(() => {
+  const el = video.value
+  if (!el) return
+  el.addEventListener('play', () => (playing.value = true))
+  el.addEventListener('pause', () => (playing.value = false))
+  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) el.play().catch(() => {})
+})
+</script>
+
+<template>
+  <div class="phone" :class="platform">
+    <div class="body">
+      <div class="screen">
+        <video
+          v-if="isVideo"
+          ref="video"
+          :src="withBase(src)"
+          :aria-label="alt"
+          muted
+          loop
+          playsinline
+          :preload="eager ? 'auto' : 'metadata'"
+        />
+        <img
+          v-else
+          :src="withBase(src)"
+          :alt="alt"
+          :loading="eager ? 'eager' : 'lazy'"
+          decoding="async"
+        />
+        <span class="cutout" aria-hidden="true" />
+        <button
+          v-if="isVideo"
+          type="button"
+          class="toggle"
+          :aria-label="playing ? 'Pause video' : 'Play video'"
+          @click="toggle"
+        >
+          <svg v-if="playing" viewBox="0 0 16 16" aria-hidden="true">
+            <rect x="4" y="3" width="3" height="10" rx="1" />
+            <rect x="9" y="3" width="3" height="10" rx="1" />
+          </svg>
+          <svg v-else viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M5 3.2v9.6a.7.7 0 0 0 1.06.6l7.6-4.8a.7.7 0 0 0 0-1.2l-7.6-4.8A.7.7 0 0 0 5 3.2Z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.phone {
+  container-type: inline-size;
+  width: 100%;
+}
+
+.body {
+  position: relative;
+  padding: 2.6cqw;
+  border-radius: 15cqw;
+  background:
+    linear-gradient(145deg, #3a3a3e 0%, #1c1c1f 22%, #121214 70%, #2b2b2f 100%);
+  box-shadow:
+    inset 0 0 0 0.45cqw #4a4a50,
+    inset 0 0 0 0.9cqw #0c0c0d,
+    0 1px 2px rgba(15, 15, 30, 0.12),
+    0 24px 48px -16px rgba(30, 24, 60, 0.35),
+    0 60px 90px -40px rgba(30, 24, 60, 0.3);
+}
+
+.dark .body {
+  box-shadow:
+    inset 0 0 0 0.45cqw #55555c,
+    inset 0 0 0 0.9cqw #0c0c0d,
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 24px 48px -16px rgba(0, 0, 0, 0.6),
+    0 60px 90px -40px rgba(0, 0, 0, 0.55);
+}
+
+.body::before,
+.body::after {
+  content: '';
+  position: absolute;
+  width: 0.9cqw;
+  border-radius: 0.5cqw;
+  background: #2a2a2e;
+}
+
+.body::before {
+  right: -0.7cqw;
+  top: 30%;
+  height: 14%;
+}
+
+.body::after {
+  left: -0.7cqw;
+  top: 22%;
+  height: 8%;
+  box-shadow: 0 14cqw 0 #2a2a2e;
+}
+
+.screen {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 1206 / 2622;
+  border-radius: 12.6cqw;
+  background: #f2f2f4;
+  /* Keeps Safari from drawing square corners over the rounded mask. */
+  isolation: isolate;
+}
+
+.screen img,
+.screen video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+}
+
+.cutout {
+  position: absolute;
+  left: 50%;
+  top: 3.4cqw;
+  width: 29.4cqw;
+  height: 8.8cqw;
+  border-radius: 99px;
+  background: #050505;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.toggle {
+  position: absolute;
+  right: 5cqw;
+  bottom: 5cqw;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: rgba(20, 20, 24, 0.55);
+  color: #fff;
+  opacity: 0.75;
+  backdrop-filter: blur(6px);
+  transition: opacity 0.2s;
+}
+
+.toggle:hover,
+.toggle:focus-visible {
+  opacity: 1;
+}
+
+.toggle:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+
+.toggle svg {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+}
+
+/* Android: squarer corners, punch-hole camera. */
+.android .body {
+  padding: 2.4cqw;
+  border-radius: 9cqw;
+}
+
+.android .body::after {
+  display: none;
+}
+
+.android .body::before {
+  top: 24%;
+  height: 10%;
+}
+
+.android .screen {
+  aspect-ratio: 1080 / 2400;
+  border-radius: 7cqw;
+}
+
+.android .cutout {
+  top: 2.6cqw;
+  width: 3.4cqw;
+  height: 3.4cqw;
+}
+</style>
diff --git a/docs/.vitepress/theme/landing/QuickStart.vue b/docs/.vitepress/theme/landing/QuickStart.vue
new file mode 100644
index 0000000..167df1f
--- /dev/null
+++ b/docs/.vitepress/theme/landing/QuickStart.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+/**
+ * The default slot is the entrypoint diff, written as a code block in
+ * index.md so it gets the site's syntax highlighting.
+ *
+ * The terminal output mirrors `npx inertia-native init`. The dev server URL,
+ * the next-step command and the Vite prompt depend on the stack.
+ */
+import { computed, ref } from 'vue'
+import CopyCommand from './CopyCommand.vue'
+
+const stacks = {
+  laravel: {
+    label: 'Laravel',
+    entry: 'resources/js/app.tsx',
+    url: 'http://localhost:8000',
+    dev: 'composer run dev',
+    vite: true,
+  },
+  rails: {
+    label: 'Rails',
+    entry: 'app/frontend/entrypoints/inertia.tsx',
+    url: 'http://localhost:3000',
+    dev: 'bin/dev',
+    vite: false,
+  },
+} as const
+
+type Stack = keyof typeof stacks
+const current = ref<Stack>('laravel')
+const s = computed(() => stacks[current.value])
+</script>
+
+<template>
+  <section class="l-section alt" aria-labelledby="quick-start-title">
+    <div class="l-wrap">
+      <header class="head">
+        <div>
+          <h2 id="quick-start-title" class="l-h2">Two commands and your dev server</h2>
+          <p class="l-lede">Run them in the root of your Inertia app.</p>
+        </div>
+        <div class="switch" role="group" aria-label="Show commands for">
+          <button
+            v-for="(stack, key) in stacks"
+            :key="key"
+            type="button"
+            :aria-pressed="current === key"
+            @click="current = key"
+          >
+            {{ stack.label }}
+          </button>
+        </div>
+      </header>
+
+      <div class="grid">
+        <ol class="steps">
+          <li>
+            <h3 class="l-h3">Run init</h3>
+            <CopyCommand command="npx inertia-native init" />
+            <p class="l-text">
+              It adds the package, puts two lines in your Inertia entrypoint
+              and creates the <code>ios/</code> and <code>android/</code> projects.
+            </p>
+          </li>
+          <li>
+            <h3 class="l-h3">Start your dev server</h3>
+            <CopyCommand :command="s.dev" />
+            <p class="l-text">Keep it running. The apps load your pages from it.</p>
+          </li>
+          <li>
+            <h3 class="l-h3">Run the app</h3>
+            <div class="cmds">
+              <CopyCommand command="npm run ios" />
+              <CopyCommand command="npm run android" />
+            </div>
+            <p class="l-text">
+              Builds the app and opens it in the iOS Simulator or an Android
+              emulator. You need Xcode for iOS, and the Android SDK and a JDK for Android.
+            </p>
+          </li>
+        </ol>
+
+        <div class="output">
+          <div class="terminal" role="region" aria-label="Output of npx inertia-native init">
+            <div class="bar" aria-hidden="true"><i /><i /><i /></div>
+            <pre tabindex="0"><code><span class="dim">$</span> npx inertia-native init
+<span class="ask">?</span> Platforms <span class="dim">›</span> <b>both</b>
+<span class="ok">✓</span> Found entrypoint {{ s.entry }}
+<span class="ask">?</span> App name <span class="dim">›</span> <b>Acme Shop</b>
+<span class="ask">?</span> Bundle ID <span class="dim">›</span> <b>com.example.acmeshop</b>
+<span class="ask">?</span> Dev server URL <span class="dim">›</span> <b>{{ s.url }}</b>
+<template v-if="s.vite"><span class="ask">?</span> Set server.host to 127.0.0.1 in vite.config.ts, so Android can load scripts from Vite? <span class="dim">(Y/n)</span>
+</template><span class="ok">✓</span> Added inertia-native to package.json (npm)
+<span class="ok">✓</span> Patched {{ s.entry }}
+<template v-if="s.vite"><span class="ok">✓</span> Set server.host to 127.0.0.1 in vite.config.ts
+</template><span class="ok">✓</span> Created ios/ and android/
+<span class="ok">✓</span> Added "ios" and "android" scripts to package.json
+
+<b>Next:</b> start your dev server ({{ s.dev }}), then run: <b>npm run ios</b> (or npm run android)</code></pre>
+          </div>
+
+          <div class="diff">
+            <div class="file">
+              <span>{{ s.entry }}</span>
+              <span class="added">Two lines added by init</span>
+            </div>
+            <div class="vp-doc l-code"><slot /></div>
+          </div>
+        </div>
+      </div>
+
+      <p class="more"><a class="l-link" href="/guide/quick-start">Read the quick start</a></p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.switch {
+  display: inline-flex;
+  padding: 3px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  background: var(--vp-c-bg);
+}
+
+.switch button {
+  padding: 6px 14px;
+  border-radius: 7px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.switch button:hover {
+  color: var(--vp-c-text-1);
+}
+
+.switch button[aria-pressed='true'] {
+  background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-1);
+}
+
+.switch button:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 1px;
+}
+
+.grid {
+  display: grid;
+  gap: 48px;
+  margin-top: 48px;
+}
+
+/* Steps */
+.steps {
+  list-style: none;
+  counter-reset: step;
+  margin: 0;
+  padding: 0;
+}
+
+.steps li {
+  position: relative;
+  counter-increment: step;
+  padding: 0 0 36px 52px;
+}
+
+.steps li:last-child {
+  padding-bottom: 0;
+}
+
+.steps li::before {
+  content: counter(step);
+  position: absolute;
+  left: 0;
+  top: -2px;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1.5px solid var(--vp-c-brand-1);
+  font-family: var(--l-display);
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg-alt);
+}
+
+/* The thread between step numbers */
+.steps li:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 15.5px;
+  top: 34px;
+  bottom: 2px;
+  width: 1px;
+  background: var(--vp-c-divider);
+}
+
+.steps .l-h3 {
+  font-size: 20px;
+}
+
+.steps .cmd,
+.cmds {
+  margin-top: 12px;
+}
+
+.cmds {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.cmds .cmd {
+  margin-top: 0;
+}
+
+.steps .l-text {
+  margin-top: 10px;
+  max-width: 44ch;
+}
+
+/* Terminal */
+.output {
+  display: grid;
+  gap: 16px;
+  align-content: start;
+  min-width: 0;
+}
+
+.terminal {
+  border-radius: 12px;
+  background: #16161a;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 20px 40px -24px rgba(20, 16, 50, 0.45);
+  overflow: hidden;
+}
+
+.dark .terminal {
+  background: #0f0f12;
+  box-shadow: 0 0 0 1px var(--vp-c-divider);
+}
+
+.bar {
+  display: flex;
+  gap: 6px;
+  padding: 12px 14px 0;
+}
+
+.bar i {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #3a3a40;
+}
+
+.terminal pre {
+  margin: 0;
+  padding: 14px 20px 20px;
+  overflow-x: auto;
+}
+
+.terminal code {
+  display: block;
+  width: max-content;
+  font-family: var(--vp-font-family-mono);
+  font-size: 13px;
+  line-height: 1.75;
+  color: #c9c9d1;
+  background: none;
+  padding: 0;
+}
+
+.terminal b {
+  font-weight: 600;
+  color: #fff;
+}
+
+.terminal .dim {
+  color: #74747e;
+}
+
+.terminal .ask {
+  color: #8fb4ff;
+}
+
+.terminal .ok {
+  color: #4ccf82;
+}
+
+/* Entrypoint diff */
+.diff {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-code-block-bg);
+  overflow: hidden;
+}
+
+.file {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 4px 16px;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--vp-c-divider);
+  font-family: var(--vp-font-family-mono);
+  font-size: 12.5px;
+  color: var(--vp-c-text-2);
+}
+
+.added {
+  font-family: var(--vp-font-family-base);
+  color: var(--vp-c-text-2);
+}
+
+.diff :deep(div[class*='language-']) {
+  border-radius: 0;
+}
+
+.diff :deep(span.lang) {
+  display: none;
+}
+
+.more {
+  margin-top: 40px;
+}
+
+@media (min-width: 960px) {
+  .grid {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    gap: 64px;
+    margin-top: 56px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
new file mode 100644
index 0000000..f7084b0
--- /dev/null
+++ b/docs/.vitepress/theme/style.css
@@ -0,0 +1,167 @@
+/* Schibsted Grotesk, SIL Open Font License 1.1 (see fonts/OFL.txt). Latin subset. */
+@font-face {
+  font-family: 'Schibsted Grotesk';
+  font-style: normal;
+  font-weight: 400 900;
+  font-display: swap;
+  src: url('./fonts/schibsted-grotesk-latin.woff2') format('woff2');
+}
+
+/* Brand: a violet in the Inertia family. Buttons use brand-3 with white text. */
+:root {
+  --vp-c-brand-1: #5332c4;
+  --vp-c-brand-2: #5f43d6;
+  --vp-c-brand-3: #6b4fe0;
+  --vp-c-brand-soft: rgba(107, 79, 224, 0.14);
+}
+
+.dark {
+  --vp-c-brand-1: #b3a4ff;
+  --vp-c-brand-2: #7a62ee;
+  --vp-c-brand-3: #6248dc;
+  --vp-c-brand-soft: rgba(122, 98, 238, 0.16);
+}
+
+/*
+ * Home page. Two colours carry meaning across the page:
+ * --l-web is your Inertia app (the web side), --l-native is the phone.
+ */
+.landing {
+  --l-display: 'Schibsted Grotesk', var(--vp-font-family-base);
+  --l-web: var(--vp-c-brand-1);
+  --l-web-soft: var(--vp-c-brand-soft);
+  --l-native: #b45309;
+  --l-native-soft: rgba(217, 119, 6, 0.12);
+  --l-wrap: 1152px;
+  --l-gutter: 24px;
+
+  overflow-x: clip;
+}
+
+.dark .landing {
+  --l-native: #f5b544;
+  --l-native-soft: rgba(245, 181, 68, 0.12);
+}
+
+/* The closing section has its own footer; drop the default home margin. */
+.VPHome:has(.landing) {
+  margin-bottom: 0 !important;
+}
+
+@media (min-width: 640px) {
+  .landing {
+    --l-gutter: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .landing {
+    --l-gutter: 64px;
+  }
+}
+
+.landing .l-section {
+  padding: 80px var(--l-gutter);
+}
+
+.landing .l-section.alt {
+  background: var(--vp-c-bg-alt);
+}
+
+@media (min-width: 960px) {
+  .landing .l-section {
+    padding-top: 112px;
+    padding-bottom: 112px;
+  }
+}
+
+.landing .l-wrap {
+  max-width: var(--l-wrap);
+  margin: 0 auto;
+}
+
+.landing .l-h2 {
+  font-family: var(--l-display);
+  font-size: clamp(30px, 4.2vw, 44px);
+  font-weight: 760;
+  line-height: 1.08;
+  letter-spacing: -0.025em;
+  color: var(--vp-c-text-1);
+  text-wrap: balance;
+}
+
+.landing .l-h3 {
+  font-family: var(--l-display);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--vp-c-text-1);
+}
+
+.landing .l-lede {
+  margin-top: 16px;
+  max-width: 58ch;
+  font-size: 18px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  text-wrap: pretty;
+}
+
+.landing .l-text {
+  font-size: 16px;
+  line-height: 1.65;
+  color: var(--vp-c-text-2);
+  text-wrap: pretty;
+}
+
+.landing :not(pre) > code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  background: var(--vp-code-bg);
+  color: var(--vp-code-color);
+}
+
+.landing .l-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.landing .l-link::after {
+  content: '\2192';
+  transition: transform 0.2s;
+}
+
+.landing .l-link:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.landing .l-link:hover::after {
+  transform: translateX(3px);
+}
+
+/* Code blocks rendered from index.md inside landing components. */
+.landing .l-code div[class*='language-'] {
+  margin: 0;
+  border-radius: 0 0 10px 10px;
+}
+
+.landing .l-code div[class*='language-'] pre {
+  padding: 16px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .landing *,
+  .landing *::before,
+  .landing *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
diff --git a/docs/index.md b/docs/index.md
index fdd3cc7..ddfc43c 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,26 +1,63 @@
 ---
 layout: home
-
-hero:
-  name: Inertia Native
-  text: Native navigation for Inertia.js apps
-  tagline: Native screens and bridge components for your Inertia.js app — iOS & Android.
-  actions:
-    - theme: brand
-      text: Get started
-      link: /guide/introduction
-    - theme: alt
-      text: Installation
-      link: /guide/installation
-    - theme: alt
-      text: GitHub
-      link: https://github.com/inertia-native/inertia-native
-
-features:
-  - title: Native navigation
-    details: push / pop / replace / restore, modals, forms, error screens, and pull-to-refresh — your Inertia pages become native screens.
-  - title: Bridge components
-    details: Use native UI (submit buttons, menus, …) from your web pages.
-  - title: Inert in the browser
-    details: With no native adapter connected, Inertia navigates exactly as usual. One package, both worlds.
+markdownStyles: false
+title: Inertia Native
+titleTemplate: Your Inertia app as an iOS and Android app
+description: Run your Inertia.js app inside native iOS and Android apps built on Hotwire Native. In a browser it does nothing, so your website keeps working.
 ---
+
+<script setup>
+import LandingHero from './.vitepress/theme/landing/LandingHero.vue'
+import QuickStart from './.vitepress/theme/landing/QuickStart.vue'
+import NativeFeatures from './.vitepress/theme/landing/NativeFeatures.vue'
+import Foundation from './.vitepress/theme/landing/Foundation.vue'
+import ClosingCta from './.vitepress/theme/landing/ClosingCta.vue'
+</script>
+
+<div class="landing">
+
+<LandingHero />
+
+<QuickStart>
+
+```tsx
+import { createInertiaApp } from '@inertiajs/react'
+import { initInertiaNative } from 'inertia-native' // [!code ++]
+
+initInertiaNative() // [!code ++]
+
+createInertiaApp({
+  // ...unchanged
+})
+```
+
+</QuickStart>
+
+<NativeFeatures>
+
+```jsx
+import { useState } from 'react'
+import { BridgeButton } from '@/bridge/BridgeButton'
+
+function Counter() {
+  const [taps, setTaps] = useState(0)
+  const tap = () => setTaps((n) => n + 1)
+
+  return (
+    <>
+      <BridgeButton title="Tap me" onTap={tap}>
+        <button type="button" onClick={tap}>Tap me</button>
+      </BridgeButton>
+      <h2>Tapped {taps} times</h2>
+    </>
+  )
+}
+```
+
+</NativeFeatures>
+
+<Foundation />
+
+<ClosingCta />
+
+</div>
diff --git a/docs/public/landing/android-push.webp b/docs/public/landing/android-push.webp
new file mode 100644
index 0000000..53e7e86
Binary files /dev/null and b/docs/public/landing/android-push.webp differ
diff --git a/docs/public/landing/ios-modal.webp b/docs/public/landing/ios-modal.webp
new file mode 100644
index 0000000..d89bd03
Binary files /dev/null and b/docs/public/landing/ios-modal.webp differ
diff --git a/docs/public/landing/ios-push.webp b/docs/public/landing/ios-push.webp
new file mode 100644
index 0000000..312c468
Binary files /dev/null and b/docs/public/landing/ios-push.webp differ