Rewrite Redact landing page in a conversational voice

src/components/landing/RedactLanding.tsx

@@ -13,18 +13,9 @@ export default function RedactLanding() {
     <LibraryLandingShell
       libraryId="redact"
       headline="React, redacted."
-      description="Keep your components, hooks, and React imports. Swap in a smaller runtime that renders synchronously, with one Vite plugin."
+      description="You shouldn't have to rewrite your app to ship less JavaScript. Keep writing React, add one Vite plugin, and let Redact handle the runtime."
       hero={
         <div className="min-w-0 space-y-5">
-          <div
-            aria-label="React becomes Redact"
-            className="font-ds-display text-ds-heading-1 font-bold tracking-tight"
-          >
-            <span className="text-text-muted line-through decoration-[0.1em]">
-              React
-            </span>{' '}
-            Redact
-          </div>
           <div className="grid grid-cols-2 gap-4">
             <Link
               to="/$libraryId/$version/docs/$"
@@ -39,7 +30,7 @@ export default function RedactLanding() {
                 66.3%
               </span>
               <span className="mt-2 block text-sm text-text-secondary">
-                smaller default runtime than React
+                smaller than React in our default-runtime benchmark
               </span>
             </Link>
             <Link
@@ -59,10 +50,6 @@ export default function RedactLanding() {
               </span>
             </Link>
           </div>
-          <p className="text-xs leading-relaxed text-text-secondary">
-            Redact 0.1.0 measurements. Savings compare all client exports with
-            React 19.3.0. Nano disables all optional features. App sizes vary.
-          </p>
           <CodeBlock dataCodeTitle="vite.config.ts">
             <code className="language-ts">{`import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
@@ -77,10 +64,27 @@ export default defineConfig({
     >
       <LandingSection tone="accent">
         <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
-          <LandingSectionIntro
-            title="One plugin. Same imports."
-            body="Keep writing the React code you know. The Vite plugin handles React, React DOM, server rendering, scheduler, and JSX entrypoints for client and SSR builds."
-          />
+          <div className="space-y-5">
+            <LandingSectionIntro
+              title="You already know how to use it."
+              body="Write your components, call your hooks, import from React. The plugin takes care of swapping the runtime, including server rendering, and Fast Refresh keeps working while you make changes."
+            />
+            <p className="text-ds-body-sm leading-relaxed text-text-secondary">
+              We trade concurrent scheduling for a smaller, synchronous runtime.
+              Streaming SSR, hydration, and Suspense are still on board.
+            </p>
+            <Link
+              to="/$libraryId/$version/docs/$"
+              params={{
+                libraryId: 'redact',
+                version: 'latest',
+                _splat: 'compatibility',
+              }}
+              className="inline-block font-medium text-text-primary underline underline-offset-4"
+            >
+              API differences ↗
+            </Link>
+          </div>
           <CodeBlock dataCodeTitle="Counter.tsx">
             <code className="language-tsx">{`import { useState } from 'react'
 
@@ -98,8 +102,8 @@ export function Counter() {
       <LandingSection tone="raised">
         <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
           <LandingSectionIntro
-            title="Only ship the parts you use."
-            body="Start with the default preset, then leave out behavior your app doesn't need. Or start with nano and turn features on individually, with explicit control over hydration, context, portals, Suspense, and more."
+            title="How small do you want to go?"
+            body="Leave out class components if you don't use them, drop hydration if you're rendering everything on the client, or start with nano and build up from there. Every optional feature starts off, you choose what comes back."
           />
           <div className="min-w-0">
             <CodeBlock dataCodeTitle="Feature selection">
@@ -111,59 +115,26 @@ redact({
 // All optional features off, then context enabled
 redact({ preset: 'nano', features: { context: true } })`}</code>
             </CodeBlock>
-            <p className="mt-4 text-sm leading-relaxed text-text-secondary">
-              Disabling features changes behavior. Nano is not a
-              full-compatibility preset, and feature size savings are not
-              additive.
-            </p>
           </div>
         </div>
       </LandingSection>
       <LandingSection tone="ink">
         <div className="grid gap-10 lg:grid-cols-2 lg:gap-16">
           <LandingSectionIntro
-            title="Know what changes."
-            body="Redact keeps the React component model without concurrent scheduling. Rendering and transitions run synchronously, pending stays false, and deferred values return their input. Actions and optimistic state have limited behavior."
+            title="Keep your DevTools, too."
+            body="Dig through your components and hooks, tweak props and state, and find out what's rendering with the React DevTools you already use."
           />
           <div className="space-y-5 text-ds-body-sm leading-relaxed text-text-secondary">
             <p>
-              Streaming SSR, hydration, Suspense, and Fast Refresh are
-              supported. Server Components stay on upstream React in the RSC
-              environment.
-            </p>
-            <Link
-              to="/$libraryId/$version/docs/$"
-              params={{
-                libraryId: 'redact',
-                version: 'latest',
-                _splat: 'compatibility',
-              }}
-              className="inline-block font-medium text-text-primary underline underline-offset-4"
-            >
-              Read the compatibility guide
-            </Link>
-            <p>
-              Keep your React DevTools, too. Inspect components and hooks, edit
-              props and state, and profile commits in development. DevTools adds
-              zero bytes to production bundles. The public Profiler callback
-              remains a no-op.
+              Debugging tools belong in development, so we leave them out of
+              your production build. All of this adds zero bytes to what your
+              users download.
             </p>
             <a
               href={`${repo}/blob/main/docs/devtools-implementation-status.md`}
               className="inline-block font-medium text-text-primary underline underline-offset-4"
             >
-              DevTools checks and timings ↗
-            </a>
-            <p>
-              Performance depends on the workload. Published measurements
-              include faster state updates and slower hydration and Suspense
-              retries, they do not establish whole-app speedups.
-            </p>
-            <a
-              href={`${repo}/blob/main/benchmarks/SHIP_MEASUREMENTS.md`}
-              className="inline-block font-medium text-text-primary underline underline-offset-4"
-            >
-              Performance measurements ↗
+              React DevTools support ↗
             </a>
           </div>
         </div>