diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index e816cdbfcc6..19935ea2488 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/packages/@react-spectrum/s2/src/Avatar.tsx
@@ -17,6 +17,7 @@ import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Image} from './Image';
+import {isDocsEnv} from './macros' with {type: 'macro'};
 import {style} from '../style' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -77,7 +78,7 @@ export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef
   const domProps = filterDOMProps(otherProps);
 
   // In the docs build, we need to be able to simulate font scaling.
-  let remSize = process.env.DOCS_ENV ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
+  let remSize = isDocsEnv() ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
   let isLarge = size >= 64;
   return (
     <Image
diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx
index 9fc66e4a032..8f14a9bbe88 100644
--- a/packages/@react-spectrum/s2/src/Image.tsx
+++ b/packages/@react-spectrum/s2/src/Image.tsx
@@ -310,7 +310,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
 
     if (Array.isArray(srcProp)) {
       img = (
-        <picture>
+        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>
           {srcProp.map((source, i) => {
             let {colorScheme: sourceColorScheme, ...sourceProps} = source;
             if (sourceColorScheme) {
diff --git a/packages/@react-spectrum/s2/src/macros.ts b/packages/@react-spectrum/s2/src/macros.ts
new file mode 100644
index 00000000000..25e97ac59ad
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/macros.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export function isDocsEnv(): boolean {
+  return !!process.env.DOCS_ENV;
+}
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index 5fdeae863f8..8ee6bd62a7f 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -209,7 +209,7 @@ export function ExampleApp(): React.ReactNode {
         </DialogTrigger>
         <MenuTrigger>
           <TooltipTrigger>
-            <Button aria-label="Columns" variant="secondary" className="!h-9 shrink-0 p-0 hidden sm:inline-flex">
+            <Button aria-label="Columns" variant="secondary" className="!w-9 !h-9 shrink-0 p-0 hidden sm:inline-flex">
               <SlidersIcon aria-hidden className="block w-5 h-5" />
             </Button>
             <Tooltip>Columns</Tooltip>
@@ -222,7 +222,7 @@ export function ExampleApp(): React.ReactNode {
           </Menu>
         </MenuTrigger>
         <DialogTrigger>
-          <Button aria-label="Add plant" variant="secondary" className="!h-9 shrink-0 p-0 col-start-5">
+          <Button aria-label="Add plant" variant="secondary" className="!w-9 !h-9 shrink-0 p-0 col-start-5">
             <PlusIcon aria-hidden className="block w-5 h-5" />
           </Button>
           <PlantModal>
@@ -506,7 +506,7 @@ function PlantModal(props: ModalOverlayProps) {
       // Use position: absolute instead of fixed to avoid
       // being clipped to the "inner" viewport in iOS 26
       className={({isEntering, isExiting}) => `
-      absolute top-0 left-0 w-full h-(--page-height) isolate z-20 bg-black/[15%] backdrop-blur-lg
+      absolute top-0 left-0 w-full h-(--page-height) max-h-[5000px] isolate z-20 bg-black/[15%] backdrop-blur-lg
       ${isEntering ? 'animate-in fade-in duration-200 ease-out' : ''}
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>
diff --git a/packages/dev/docs/pages/react-aria/home/components.tsx b/packages/dev/docs/pages/react-aria/home/components.tsx
index 13329811e3c..6f26ba0d99a 100644
--- a/packages/dev/docs/pages/react-aria/home/components.tsx
+++ b/packages/dev/docs/pages/react-aria/home/components.tsx
@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 import {ArrowRight} from 'lucide-react';
+import {BaseLink} from '@react-spectrum/s2-docs/src/Link';
 import React, {ForwardedRef, HTMLAttributes, ReactNode} from 'react';
+import {twMerge} from 'tailwind-merge';
 
 export function Window({children, className = '', isBackground = false, toolbar}: {children: ReactNode, className?: string, isBackground?: boolean, toolbar: ReactNode}): ReactNode {
   return (
@@ -33,7 +35,7 @@ export function FileTab({children, className = ''}: {children: ReactNode, classN
 }
 
 export function AddressBar({children}: {children: ReactNode}): ReactNode {
-  return <div className="bg-gray-400/40 dark:bg-zinc-500/40 px-5 md:px-10 py-1 ml-20 sm:mx-auto my-2.5 rounded-md text-slate-600 dark:text-slate-300 text-xs">{children}</div>;
+  return <div className="bg-gray-400/40 dark:bg-zinc-500/40 px-5 md:px-10 py-1 ml-20 flex-1 text-center sm:flex-none sm:mx-auto my-2.5 rounded-md text-slate-600 dark:text-slate-300 text-xs">{children}</div>;
 }
 
 export function GradientText({children}: {children: ReactNode}): ReactNode {
@@ -74,7 +76,7 @@ export function Arrow({href, children, textX, x1, x2, points, y, marker = 'marke
         ? <polyline points={points} {...markerProps} className="stroke-slate-800 dark:stroke-white fill-none" />
         : <line x1={x1} y1={y} x2={x2} y2={y} {...markerProps} className="stroke-slate-800 dark:stroke-white" />
       }
-      <a href={href} target="_blank" className="pointer-events-auto outline-hidden rounded-xs focus:outline-blue-600 dark:focus:outline-blue-500 outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
+      <a href={href} target="_blank" className="pointer-events-auto outline-hidden rounded-xs outline-0 outline-solid focus-visible:outline-2 focus-visible:outline-black dark:focus-visible:outline-white outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
     </>
   );
 }
@@ -85,8 +87,8 @@ React.forwardRef((props: HTMLAttributes<HTMLDivElement>, ref: ForwardedRef<HTMLD
   return <div ref={ref} className="z-10 pointer-events-none absolute w-10 h-10 rounded-full border border-black/80 bg-black/80 dark:border-white/80 dark:bg-white/80 dark:mix-blend-difference opacity-0 [--hover-opacity:0.15] [--pressed-opacity:0.3] forced-colors:[--hover-opacity:0.5] forced-colors:[--pressed-opacity:1] forced-colors:bg-[Highlight]! forced-colors:mix-blend-normal!" {...props} />;
 });
 
-export function LearnMoreLink({href, className}: {href: string, className: string}): ReactNode {
-  return <a href={href} className={`group inline-block mt-6 mb-12 no-underline text-xl rounded-full px-4 -mx-4 py-1 transition focus-ring active:scale-95 ${className}`}>Learn more<ArrowRight aria-hidden className="inline w-5 h-5 align-middle ml-1 will-change-transform group-hover:translate-x-0.5 transition -mt-1" /></a>;
+export function LearnMoreLink({children, href, className}: {children?: string, href: string, className: string}): ReactNode {
+  return <BaseLink href={href} className={twMerge('group inline-block mt-6 mb-12 no-underline text-xl rounded-full px-4 -mx-4 py-1 transition focus-ring active:scale-95', className)}>{children || 'Learn more'}<ArrowRight aria-hidden className="inline w-5 h-5 align-middle ml-1 will-change-transform group-hover:translate-x-0.5 transition -mt-1" /></BaseLink>;
 }
 
 export function Scrollable({children, className = ''}: {children: ReactNode, className?: string}): ReactNode {
diff --git a/packages/dev/docs/pages/react-aria/home/home.css b/packages/dev/docs/pages/react-aria/home/home.css
index 8be86213c8a..eff70a47920 100644
--- a/packages/dev/docs/pages/react-aria/home/home.css
+++ b/packages/dev/docs/pages/react-aria/home/home.css
@@ -14,33 +14,35 @@
   @apply outline outline-0 outline-blue-600 dark:outline-blue-500 focus-visible:outline-2;
 }
 
-body {
+.home body {
   background: var(--page-bg);
   color-scheme: dark light;
   @apply [--page-bg:var(--color-zinc-50)] dark:[--page-bg:var(--color-zinc-900)];
 }
 
-.header-background {
-  @apply [--l:91%] [--c:0.11] dark:[--l:32%] dark:[--c:0.13];
-  background: linear-gradient(to bottom, transparent 0% 80%, var(--page-bg)),
-    radial-gradient(circle at 50% 60%, transparent 0% 50%, var(--page-bg)),
-    conic-gradient(from 30deg at 50% 60%,
-      oklch(var(--l) var(--c) 220),
-      oklch(min(var(--l), 86%) var(--c) 260),
-      oklch(var(--l) var(--c) 300),
-      oklch(var(--l) var(--c) 340),
-      oklch(var(--l) var(--c) 0),
-      oklch(var(--l) var(--c) 40),
-      oklch(var(--l) var(--c) 60),
-      oklch(max(var(--l), 44%) var(--c) 100),
-      oklch(max(var(--l), 38%) var(--c) 140),
-      oklch(var(--l) var(--c) 180),
-      oklch(var(--l) var(--c) 220)
-    );
-  background-repeat: no-repeat;
-}
-
-main > section > h2 {
+.home .header-background {
+  --pink: light-dark(oklch(from #DA8DE9 calc(l * 1.25) c h), oklch(from #BF67D0 calc(l * 0.9) c h));
+  --orange: light-dark(#FACA85, oklch(from #EDB35F calc(l * 0.82) c h));
+  --purple: light-dark(#EDE8FF, #6D33F7);
+
+  background:
+    linear-gradient(to bottom, transparent 0% 80%, var(--page-bg)),
+    radial-gradient(50% 22% at 25% 72%, var(--pink), transparent),
+    radial-gradient(50% 22% at 62% 75%, var(--orange), transparent),
+    radial-gradient(150% 30% at 50% 70%, var(--purple), transparent),
+    linear-gradient(to bottom, transparent, light-dark(#EDE8FF, transparent) 60%, transparent);
+
+  @media (width < 768px) {
+    background:
+      linear-gradient(to bottom, transparent 0% 87%, var(--page-bg)),
+      radial-gradient(100% 10% at 45% 71%, var(--pink), transparent),
+      radial-gradient(100% 10% at 55% 84%, var(--orange), transparent),
+      radial-gradient(150% 30% at 50% 70%, var(--purple), transparent),
+      linear-gradient(to bottom, transparent, light-dark(#EDE8FF, transparent) 60%, transparent);
+  }
+}
+
+.home main > section > h2 {
   @apply text-4xl md:text-5xl font-semibold m-0 mb-4 pb-2 text-transparent;
 
   + p {
@@ -49,19 +51,19 @@ main > section > h2 {
   }
 }
 
-pre {
+.home pre {
   margin: 0;
 }
 
-.no-scrollbar::-webkit-scrollbar {
+.home .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
 
-.no-scrollbar {
+.home .no-scrollbar {
   scrollbar-width: none;
 }
 
-:root {
+.home {
   --hljs-color: theme(colors.gray.800);
   --hljs-background: transparent;
   --hljs-keyword-color: theme(colors.fuchsia.700);
@@ -79,7 +81,7 @@ pre {
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  .home {
     --hljs-color: theme(colors.gray.300);
     --hljs-keyword-color: theme(colors.fuchsia.300);
     --hljs-section-color: theme(colors.red.400);
@@ -95,38 +97,41 @@ pre {
   }
 }
 
-pre .source {
-  @apply p-5 text-xs sm:text-sm min-h-[250px] h-full min-w-fit;
+.home pre {
   font-family: source-code-pro, 'Source Code Pro', Monaco, monospace;
 }
 
-pre.large {
+.home pre .source {
+  @apply p-5 text-xs sm:text-sm min-h-[250px] h-full min-w-fit;
+}
+
+.home pre.large {
   @apply hidden lg:block;
 }
 
-pre.medium {
+.home pre.medium {
   @apply hidden sm:block lg:hidden;
 }
 
-pre.small {
+.home pre.small {
   @apply sm:hidden
 }
 
-.card-shadow {
+.home .card-shadow {
   box-shadow: 0 0 2px rgb(0 0 0 / 12%), 0 3px 6px rgb(0 0 0 / 4%), 0 4px 8px 0 rgba(0 0 0 / 8%);
   outline: 1px solid transparent; /* WHCM */
   @apply dark:border dark:border-zinc-200/10 dark:bg-clip-padding;
 }
 
-.card-shadow-hover:hover {
+.home .card-shadow-hover:hover {
   box-shadow: 0 0 2px rgb(0 0 0 / 18%), 0 3px 8px rgb(0 0 0 / 6%), 0 4px 16px 0 rgba(0 0 0 / 10%);
 }
 
-.card-shadow-hover:focus-visible {
+.home .card-shadow-hover:focus-visible {
   @apply focus-ring;
 }
 
-.edge-mask {
+.home .edge-mask {
   mask-image: linear-gradient(to right, transparent, white 8px calc(100% - 8px), transparent);
 }
 
@@ -258,12 +263,12 @@ pre.small {
   }
 }
 
-.iphone-frame {
+.home .iphone-frame {
   background-image: url(../../assets/iphone-frame.webp);
   background-size: contain;
 }
 
-.iphone-mask {
+.home .iphone-mask {
   mask-image: url(../../assets/iphone-mask.webp), linear-gradient(#fff 0 0);
   mask-size: contain;
   mask-composite: exclude;
@@ -297,12 +302,12 @@ pre.small {
   }
 }
 
-.cross-fade {
+.home .cross-fade {
   animation: cross-fade 5s infinite;
   mix-blend-mode: plus-lighter;
 }
 
-.highlight-tags {
+.home .highlight-tags {
   .tag:nth-child(1 of .tag),
   .tag:nth-child(n+4 of .tag):nth-child(-n+8 of .tag),
   .tag:nth-last-child(1 of .tag) {
@@ -320,11 +325,11 @@ pre.small {
   }
 }
 
-.code-mask {
+.home .code-mask {
   mask: linear-gradient(to bottom, white 0% 70%, transparent);
 }
 
-.cyan-gradient-background {
+.home .cyan-gradient-background {
   --a: oklch(90% 0.05 200);
   --a-shape: ellipse 30% 23% at 30% 56%;
   --b: oklch(94% 0.09 175);
@@ -337,7 +342,7 @@ pre.small {
 }
 
 @media (width < 768px) {
-  .cyan-gradient-background {
+  .home .cyan-gradient-background {
     --a-shape: circle 250px at 26% 65%;
     --b-shape: circle 250px at 73% 64%;
     --c-shape: circle 250px at 50% 70%;
@@ -345,14 +350,14 @@ pre.small {
 }
 
 @media (prefers-color-scheme: dark) {
-  .cyan-gradient-background {
+  .home .cyan-gradient-background {
     --a: oklch(25% 0.1 200);
     --b: oklch(27% 0.1 175);
     --c: oklch(26% 0.08 218);
   }
 }
 
-.blue-gradient-background {
+.home .blue-gradient-background {
   --a: oklch(94% 0.08 250);
   --b: oklch(94% 0.12 275);
   --c: oklch(91% 0.15 290);
@@ -362,32 +367,32 @@ pre.small {
 }
 
 @media (prefers-color-scheme: dark) {
-  .blue-gradient-background {
+  .home .blue-gradient-background {
     --a: oklch(25% 0.08 250);
     --b: oklch(25% 0.07 275);
     --c: oklch(28% 0.1 280);
   }
 }
 
-.orange-gradient-background {
+.home .orange-gradient-background {
   --color: oklch(96% 0.1 75);
   --shape: ellipse 50% 35% at 50% 58%;
   background: radial-gradient(var(--shape), var(--color), transparent);
 }
 
 @media (width < 1080px) {
-  .orange-gradient-background {
+  .home .orange-gradient-background {
     --shape: ellipse 60% 40% at 50% 63%;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  .orange-gradient-background {
+  .home .orange-gradient-background {
     --color: oklch(27% 0.09 71);
   }
 }
 
-.red-gradient-background {
+.home .red-gradient-background {
   --a: oklch(96% 0.1 350);
   --a-shape: ellipse 30% 30% at 29% 54%;
   --b: oklch(96% 0.11 6);
@@ -400,7 +405,7 @@ pre.small {
 }
 
 @media (width < 768px) {
-  .red-gradient-background {
+  .home .red-gradient-background {
     --a-shape: circle 300px at 20% 72%;
     --b-shape: circle 300px at 50% 72%;
     --c-shape: circle 300px at 80% 72%;
@@ -408,14 +413,14 @@ pre.small {
 }
 
 @media (prefers-color-scheme: dark) {
-  .red-gradient-background {
+  .home .red-gradient-background {
     --a: oklch(27% 0.11 350);
     --b: oklch(26% 0.11 6);
     --c: oklch(26% 0.1 20);
   }
 }
 
-.pink-gradient-background {
+.home .pink-gradient-background {
   --a: oklch(92% 0.11 300);
   --a-shape: ellipse 30% 30% at 29% 57%;
   --b: oklch(96% 0.11 320);
@@ -428,7 +433,7 @@ pre.small {
 }
 
 @media (width < 768px) {
-  .pink-gradient-background {
+  .home .pink-gradient-background {
     --a-shape: circle 400px at 50% 40%;
     --b-shape: circle 400px at 50% 60%;
     --c-shape: circle 400px at 50% 80%;
@@ -436,7 +441,7 @@ pre.small {
 }
 
 @media (prefers-color-scheme: dark) {
-  .pink-gradient-background {
+  .home .pink-gradient-background {
     --a: oklch(30% 0.11 300);
     --b: oklch(30% 0.11 320);
     --c: oklch(27% 0.1 340);
@@ -444,7 +449,7 @@ pre.small {
 }
 
 
-.green-gradient-background {
+.home .green-gradient-background {
   --a: oklch(96% 0.1 120);
   --a-shape: ellipse 30% 30% at 29% 54%;
   --b: oklch(91% 0.12 140);
@@ -457,7 +462,7 @@ pre.small {
 }
 
 @media (width < 768px) {
-  .green-gradient-background {
+  .home .green-gradient-background {
     --a-shape: circle 400px at 20% 63%;
     --b-shape: circle 400px at 50% 63%;
     --c-shape: circle 400px at 80% 63%;
@@ -465,7 +470,7 @@ pre.small {
 }
 
 @media (prefers-color-scheme: dark) {
-  .green-gradient-background {
+  .home .green-gradient-background {
     --a: oklch(28% 0.1 130);
     --b: oklch(28% 0.12 145);
     --c: oklch(26% 0.06 150);
diff --git a/packages/dev/s2-docs/.parcelrc-s2-docs b/packages/dev/s2-docs/.parcelrc-s2-docs
index 26820460399..6440769442d 100644
--- a/packages/dev/s2-docs/.parcelrc-s2-docs
+++ b/packages/dev/s2-docs/.parcelrc-s2-docs
@@ -8,7 +8,7 @@
     "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"],
     "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],
     "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
-    "url:*.svg": ["@parcel/transformer-svg"],
+    "url:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-raw"],
     "data-url:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
     "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
diff --git a/packages/dev/s2-docs/assets/ReactAriaOpenGraph.webp b/packages/dev/s2-docs/assets/ReactAriaOpenGraph.webp
index e93039f111d..23516cb7889 100644
Binary files a/packages/dev/s2-docs/assets/ReactAriaOpenGraph.webp and b/packages/dev/s2-docs/assets/ReactAriaOpenGraph.webp differ
diff --git a/packages/dev/s2-docs/assets/favicon.ico b/packages/dev/s2-docs/assets/favicon.ico
deleted file mode 100644
index 8f9fd41df6f..00000000000
Binary files a/packages/dev/s2-docs/assets/favicon.ico and /dev/null differ
diff --git a/packages/dev/s2-docs/assets/internationalized.ico b/packages/dev/s2-docs/assets/internationalized.ico
deleted file mode 100644
index 8aec276c938..00000000000
Binary files a/packages/dev/s2-docs/assets/internationalized.ico and /dev/null differ
diff --git a/packages/dev/s2-docs/assets/react-aria-favicon.svg b/packages/dev/s2-docs/assets/react-aria-favicon.svg
new file mode 100644
index 00000000000..c7a64003dfb
--- /dev/null
+++ b/packages/dev/s2-docs/assets/react-aria-favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="200 206 800 790" fill="none">
+  <path d="M720.977 206C867.87 206 986.95 325.079 986.951 471.971C986.951 590.705 909.147 691.263 801.743 725.455L996.496 969.116C1004.8 979.509 997.403 994.897 984.099 994.897H783.931C774.667 994.897 765.864 990.85 759.834 983.817L697.676 911.329L493.465 653.333C457.478 607.867 489.857 540.938 547.842 540.936L720.977 540.93C759.061 540.93 789.934 510.054 789.934 471.971C789.933 433.888 759.06 403.016 720.977 403.016H430.286C405.305 403.016 388.975 391.865 374.349 373.604L277.717 252.964C262.564 234.046 276.032 206.001 300.27 206H720.977Z M396.955 720.641C408.147 705.343 430.789 704.78 442.726 719.504L504.152 796.942H503.124L535.902 838.852C548.405 854.274 550.274 877.104 538.38 893.001L469.156 982.565C463.145 990.343 453.87 994.897 444.041 994.897H215.9C202.668 994.897 195.246 979.656 203.405 969.239L338.351 796.942H338.281L396.955 720.641Z" fill="light-dark(#6733FF, #7F57FF)" style="color-scheme: light dark" />
+</svg>
diff --git a/packages/dev/s2-docs/assets/react-aria.ico b/packages/dev/s2-docs/assets/react-aria.ico
deleted file mode 100644
index f2df355f0df..00000000000
Binary files a/packages/dev/s2-docs/assets/react-aria.ico and /dev/null differ
diff --git a/packages/dev/s2-docs/assets/rsp-favicon.svg b/packages/dev/s2-docs/assets/rsp-favicon.svg
new file mode 100644
index 00000000000..d37852e085c
--- /dev/null
+++ b/packages/dev/s2-docs/assets/rsp-favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501.71 444.05">
+  <path
+    d="m297.58 444.05-36.45-101.4h-91.46l76.87-193.53 116.65 294.93h138.52L316.8 0H186.23L0 444.05h297.58z"
+    fill="#EB1000" />
+</svg>
diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json
index 49a7619da5b..adba8bf4fc0 100644
--- a/packages/dev/s2-docs/package.json
+++ b/packages/dev/s2-docs/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "parcel 'pages/**/*.mdx' --config .parcelrc-s2-docs",
+    "start": "DOCS_ENV=dev parcel 'pages/**/*.mdx' --config .parcelrc-s2-docs",
     "start:s2": "DOCS_ENV=dev LIBRARY=s2 parcel 'pages/s2/**/*.mdx' -p 4321 --config .parcelrc-s2-docs --dist-dir dist/s2 --cache-dir ../../../.parcel-cache/s2",
     "start:react-aria": "DOCS_ENV=dev LIBRARY=react-aria parcel 'pages/react-aria/**/*.mdx' -p 1234 --config .parcelrc-s2-docs --dist-dir dist/react-aria --cache-dir ../../../.parcel-cache/react-aria",
     "build": "yarn build:s2 --public-url $PUBLIC_URL && yarn build:react-aria --public-url $PUBLIC_URL",
diff --git a/packages/dev/s2-docs/pages/WelcomeHeader.tsx b/packages/dev/s2-docs/pages/WelcomeHeader.tsx
index d9228c53a2b..7e2467e45f0 100644
--- a/packages/dev/s2-docs/pages/WelcomeHeader.tsx
+++ b/packages/dev/s2-docs/pages/WelcomeHeader.tsx
@@ -56,17 +56,6 @@ export function LibraryCards() {
           <LinkButton href="react-aria/" variant="accent">Explore</LinkButton>
         </Footer>
       </ProductCard>
-
-      <ProductCard size="L">
-        {TAB_DEFS['internationalized'].icon}
-        <Content>
-          <Text slot="title">{TAB_DEFS['internationalized'].label}</Text>
-          <Text slot="description">{TAB_DEFS['internationalized'].description}</Text>
-        </Content>
-        <Footer>
-          <LinkButton href="internationalized/date/" variant="accent">Show Packages</LinkButton>
-        </Footer>
-      </ProductCard>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/pages/react-aria/HomeHeader.tsx b/packages/dev/s2-docs/pages/react-aria/HomeHeader.tsx
new file mode 100644
index 00000000000..d6b1af71e85
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/HomeHeader.tsx
@@ -0,0 +1,149 @@
+'use client';
+
+import {CSSProperties, useId, useRef, useState} from 'react';
+import SearchMenuTrigger, {preloadSearchMenu} from '@react-spectrum/s2-docs/src/SearchMenuTrigger';
+import {useLayoutEffect} from '@react-aria/utils';
+import {HeaderLink} from '@react-spectrum/s2-docs/src/Link';
+import { ReactAriaLogo } from '@react-spectrum/s2-docs/src/icons/ReactAriaLogo';
+import { space, style } from '@react-spectrum/s2/style' with {type: 'macro'};
+import GithubLogo from '@react-spectrum/s2-docs/src/icons/GithubLogo';
+import { NpmLogo } from '@react-spectrum/s2-docs/src/icons/NpmLogo';
+
+export default function HomeHeader() {
+  const [searchOpen, setSearchOpen] = useState(false);
+  const searchMenuId = useId();
+  let renderCallback = useRef<(() => void) | null>(null);
+  let iconRef = useRef<HTMLDivElement | null>(null);
+  let labelRef = useRef<HTMLDivElement | null>(null);
+  let searchRef = useRef<HTMLDivElement | null>(null);
+
+  let openSearchMenu = async () => {
+    if (!document.startViewTransition) {
+      setSearchOpen((prev) => !prev);
+      return;
+    }
+
+    // Preload SearchMenu so it is ready to render immediately.
+    await preloadSearchMenu();
+
+    // Don't transition the entire page.
+    document.documentElement.style.viewTransitionName = 'none';
+    if (window.scrollY === 0) {
+      iconRef.current!.style.viewTransitionName = 'search-menu-icon';
+      labelRef.current!.style.viewTransitionName = 'search-menu-label';
+      searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
+    }
+
+    let viewTransition = document.startViewTransition(() => {
+      // Wait until next render. Using flushSync causes flickering.
+      return new Promise<void>(resolve => {
+        iconRef.current!.style.viewTransitionName = '';
+        labelRef.current!.style.viewTransitionName = '';
+        searchRef.current!.style.viewTransitionName = '';
+        renderCallback.current = resolve;
+        setSearchOpen((prev) => !prev);
+      });
+    });
+
+    viewTransition.finished.then(() => {
+      document.documentElement.style.viewTransitionName = '';
+    });
+  };
+
+  let closeSearchMenu = () => {
+    if (!document.startViewTransition) {
+      setSearchOpen(false);
+      return;
+    }
+
+    document.documentElement.style.viewTransitionName = 'none';
+    let viewTransition = document.startViewTransition(() => {
+      return new Promise<void>(resolve => {
+        renderCallback.current = resolve;
+        setSearchOpen(false);
+
+        if (window.scrollY === 0) {
+          iconRef.current!.style.viewTransitionName = 'search-menu-icon';
+          labelRef.current!.style.viewTransitionName = 'search-menu-label';
+          searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
+        }
+      });
+    });
+
+    viewTransition.finished.then(() => {
+      document.documentElement.style.viewTransitionName = '';
+      iconRef.current!.style.viewTransitionName = '';
+      labelRef.current!.style.viewTransitionName = '';
+      searchRef.current!.style.viewTransitionName = '';
+    });
+  };
+
+  useLayoutEffect(() => {
+    renderCallback.current?.();
+    renderCallback.current = null;
+  });  
+
+  return (
+    <nav 
+      className={style({
+        position: 'absolute',
+        top: {
+          default: 12,
+          lg: 20
+        },
+        insetX: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 16,
+        maxWidth: 1440,
+        marginX: {
+          lg: 'auto'
+        },
+        paddingX: 12
+      })}>
+      <a
+        href="."
+        className={style({
+          outlineColor: 'transparent-overlay-1000',
+          textDecoration: 'none',
+          display: 'inline-flex',
+          alignItems: 'center',
+          columnGap: {
+            default: 12,
+            lg: space(10)
+          },
+          marginStart: {
+            default: 0,
+            '@media (width >= 1440px)': space(38)
+          },
+          zIndex: 2,
+          borderRadius: 'default'
+        })}>
+        <div ref={iconRef} style={{display: searchOpen ? 'none' : undefined} as CSSProperties}>
+          <ReactAriaLogo />
+        </div>
+        <h2 className={style({marginY: 0, font: 'heading-sm', fontWeight: 'extra-bold', color: 'transparent-overlay-800'})} ref={labelRef} style={{display: searchOpen ? 'none' : undefined} as CSSProperties}>React Aria</h2>
+      </a>
+
+      <div className={style({position: 'absolute', insetStart: 0, width: 'full', display: {default: 'none', xl: 'flex'}, justifyContent: 'center'})}>
+        <div ref={searchRef}>
+          <SearchMenuTrigger
+            onOpen={openSearchMenu}
+            onClose={closeSearchMenu}
+            isSearchOpen={searchOpen}
+            overlayId={searchMenuId}
+            staticColor="auto" />
+        </div>
+      </div>
+
+      <div className={style({display: 'flex', alignItems: 'center', gap: 4, justifySelf: 'end'})}>
+        <HeaderLink staticColor="auto" href="getting-started" styles={style({display: {default: 'none', sm: 'flex'}})}>Docs</HeaderLink>
+        <HeaderLink staticColor="auto" href="releases/" styles={style({display: {default: 'none', sm: 'flex'}})}>Releases</HeaderLink>
+        <HeaderLink staticColor="auto" href="blog/" rel="noopener noreferrer" styles={style({display: {default: 'none', sm: 'flex'}})}>Blog</HeaderLink>
+        <HeaderLink staticColor="auto" aria-label="GitHub" href="https://github.com/adobe/react-spectrum" target="_blank" rel="noopener noreferrer"><GithubLogo /></HeaderLink>
+        <HeaderLink staticColor="auto" aria-label="npm" href="https://npmjs.com/react-aria-components" target="_blank" rel="noopener noreferrer"><NpmLogo /></HeaderLink>
+      </div>
+    </nav>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/assets/website.mp4 b/packages/dev/s2-docs/pages/react-aria/assets/website.mp4
new file mode 100644
index 00000000000..ee3840123e4
Binary files /dev/null and b/packages/dev/s2-docs/pages/react-aria/assets/website.mp4 differ
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/plants/App.tsx b/packages/dev/s2-docs/pages/react-aria/examples/plants/App.tsx
index f3d152ca4d1..8bffeb63f4d 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/plants/App.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/plants/App.tsx
@@ -167,7 +167,7 @@ export default function App(): React.ReactNode {
         {/* Columns */}
         <MenuTrigger>
           <TooltipTrigger>
-            <Button aria-label="Columns" variant="secondary" className="!h-9 shrink-0 hidden sm:flex">
+            <Button aria-label="Columns" variant="secondary" className="!w-9 !h-9 shrink-0 hidden sm:flex">
               <SlidersIcon aria-hidden className="block w-5 h-5" />
             </Button>
             <Tooltip>Columns</Tooltip>
@@ -181,7 +181,7 @@ export default function App(): React.ReactNode {
         </MenuTrigger>
 
         <DialogTrigger>
-          <Button aria-label="Add plant" variant="secondary" className="!h-9 shrink-0 col-start-5">
+          <Button aria-label="Add plant" variant="secondary" className="!w-9 !h-9 shrink-0 col-start-5">
             <PlusIcon aria-hidden className="block w-5 h-5" />
           </Button>
           <Modal>
diff --git a/packages/dev/s2-docs/pages/react-aria/index.mdx b/packages/dev/s2-docs/pages/react-aria/index.mdx
index d73168747cb..f27c63ac710 100644
--- a/packages/dev/s2-docs/pages/react-aria/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/index.mdx
@@ -1,4 +1,4 @@
-import '../../tailwind/home.global.css';
+import '../../tailwind/tailwind.css';
 import '../../src/client';
 import '@react-spectrum/docs/src/syntax-highlight.css';
 import {Keyboard} from '@react-spectrum/docs/pages/react-aria/home/Keyboard';
@@ -19,11 +19,16 @@ import {TextField} from 'tailwind-starter/TextField';
 import {Popover} from 'tailwind-starter/Popover';
 import {Button} from 'tailwind-starter/Button';
 import ogImage from 'url:../../assets/ReactAriaOpenGraph.webp';
-import reactAriaFavicon from 'url:../../assets/react-aria.ico';
-import SearchMenuWrapperServer from '../../src/SearchMenuWrapperServer';
+import reactAriaFavicon from 'url:../../assets/react-aria-favicon.svg';
+import SearchMenuWrapperServer,  {RouterWrapperServer} from '../../src/SearchMenuWrapperServer';
 import {SearchMenuButton} from '../../src/SearchMenuWrapper';
 import {getCurrentPage, getPages} from '../../src/getPages';
 import {getBaseUrl} from '../../src/pageUtils';
+import {Provider, Button as S2Button} from '@react-spectrum/s2';
+import {LinkButton} from '../../src/Link';
+import HomeHeader from './HomeHeader';
+import {Video} from '../../src/Video';
+import videoUrl from 'url:./assets/website.mp4';
 
 export const section = 'Overview';
 export const title = 'Home';
@@ -31,632 +36,616 @@ export const omitFromNav = true;
 export const hideFromSearch = true;
 export const description = 'Accessible, high quality UI components and hooks for building design systems.';
 
-<html>
-  <head>
-    <meta charSet="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href={reactAriaFavicon} />
-    <title>React Aria</title>
-    <meta rel="preload" as="font" href="https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" crossOrigin="" />
-    <meta name="description" content="Craft world-class accessible components with custom styles." />
-    <meta name="keywords" content="accessibility,components,react,headless,style-free" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:image" content={ogImage} />
-    <meta property="og:title" content="React Aria" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content={getCurrentPage(props.currentPage).url} />
-    <meta property="og:image" content={ogImage} />
-    <meta property="og:description" content="Craft world-class accessible components with custom styles." />
-    <meta property="og:locale" content="en_US" />
-    <link rel="canonical" href={getCurrentPage(props.currentPage).url} />
-    <script
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{__html: JSON.stringify(
-        {
-          '@context': 'http://schema.org',
-          '@type': 'WebPage',
-          author: 'Adobe Inc',
-          name: 'React Aria',
-          description: 'Craft world-class accessible components with custom styles.',
-          image: ogImage,
-          publisher: {
-            '@type': 'Organization',
-            url: 'https://www.adobe.com',
-            name: 'Adobe',
-            logo: 'https://www.adobe.com/favicon.ico'
+<RouterWrapperServer currentPage={props.currentPage}>
+  <Provider elementType="html" locale="en" UNSAFE_className="home font-spectrum">
+    <head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="icon" href={reactAriaFavicon} />
+      <title>React Aria</title>
+      <meta rel="preload" as="font" href="https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" crossOrigin="" />
+      <meta name="description" content="Craft world-class accessible components with custom styles." />
+      <meta name="keywords" content="accessibility,components,react,headless,style-free" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:image" content={ogImage} />
+      <meta property="og:title" content="React Aria" />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={getCurrentPage(props.currentPage).url} />
+      <meta property="og:image" content={ogImage} />
+      <meta property="og:description" content="Craft world-class accessible components with custom styles." />
+      <meta property="og:locale" content="en_US" />
+      <link rel="canonical" href={getCurrentPage(props.currentPage).url} />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{__html: JSON.stringify(
+          {
+            '@context': 'http://schema.org',
+            '@type': 'WebPage',
+            author: 'Adobe Inc',
+            name: 'React Aria',
+            description: 'Craft world-class accessible components with custom styles.',
+            image: ogImage,
+            publisher: {
+              '@type': 'Organization',
+              url: 'https://www.adobe.com',
+              name: 'Adobe',
+              logo: 'https://www.adobe.com/favicon.ico'
+            }
           }
-        }
-      )}} />
-  </head>
-  <body className="m-0">
-    <header className="relative header-background">
-      <nav className="absolute top-4 left-4 right-4 flex justify-between gap-4">
-        <a href="." className="no-underline inline-flex items-center gap-4 font-bold px-4 py-2.5 rounded-xl bg-white/70 dark:bg-white/20 dark:backdrop-saturate-200 dark:backdrop-brightness-125 dark:text-white/80 ring-1 ring-black/5 focus-ring dark:outline-white">
-          <svg viewBox="0 0 30 26" fill="#E1251B" aria-label="Adobe" height="22">
-            <polygon points="19,0 30,0 30,26" />
-            <polygon points="11.1,0 0,0 0,26" />
-            <polygon points="15,9.6 22.1,26 17.5,26 15.4,20.8 10.2,20.8" />
-          </svg>
-          <h2 className="text-lg m-0 text-black dark:text-white/80">React Aria</h2>
-        </a>
-
-        <div className="px-4 py-3 inline-flex items-center gap-4 rounded-xl bg-white/70 dark:bg-white/20 dark:backdrop-saturate-200 dark:backdrop-brightness-125 font-semibold ring-1 ring-black/5">
-          <a href="blog/" className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Blog</a>
-          <a href="releases/" className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Releases</a>
-          <a href={getBaseUrl('s2') + '/'} className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">React Spectrum</a>
-          <a href="internationalized/date/" className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Internationalized</a>
-          <a href="https://github.com/adobe/react-spectrum" target="_blank" title="GitHub" className="no-underline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">
-            <svg aria-hidden="true" viewBox="0 0 16 16" height="22" fill="currentColor">
-              <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-            </svg>
-          </a>
-          <a href="https://npmjs.com/react-aria-components" target="_blank" title="NPM" className="no-underline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">
-            <svg viewBox="0 0 27.23 27.23" aria-hidden="true" height="22" fill="currentColor">
-              <rect width="27.23" height="27.23" rx="2" mask="url(#npm-mask)" />
-              <mask id="npm-mask">
-                <rect width="27.23" height="27.23" rx="2" fill="white" />
-                <polygon fill="black" points="5.8 21.75 13.66 21.75 13.67 9.98 17.59 9.98 17.58 21.76 21.51 21.76 21.52 6.06 5.82 6.04 5.8 21.75" />
-              </mask>
-            </svg>
-          </a>
-        </div>
-      </nav>
+        )}} />
+    </head>
+    <body className="m-0" style={{'--s2-container-bg': 'light-dark(white, black)'}}>
+      <header className="relative header-background isolate pt-20 md:pt-32">
+        <HomeHeader />
+        <section className="p-4 md:p-6 box-border overflow-clip bg-white dark:bg-zinc-800/80 dark:backdrop-saturate-200 card-shadow w-fit max-w-[calc(100%-40px)] mx-auto rounded-xl flex items-center flex-col xl:flex-row gap-8">
+          <div>
+            <h2 className="text-3xl md:text-4xl my-0 text-balance"><GradientText>Meet our new docs!</GradientText></h2>
+            <p className="mt-4 mb-0 md:mb-4 text-balance text-lg md:text-xl max-w-xl text-slate-700 dark:text-slate-400">All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations.</p>
+            <LearnMoreLink href="getting-started" className="text-indigo-600 dark:text-indigo-400 hover:bg-indigo-400/[15%] mt-3 mb-0">Check it out</LearnMoreLink>
+          </div>
+          <div className="flex-1">
+            <div className="w-fit -m-2 md:m-0 rounded-lg overflow-clip justify-self-end outline outline-0 outline-blue-600 dark:outline-blue-500 has-focus-visible:outline-2">
+              <Video src={videoUrl} muted autoPlay loop preload="metadata" playsInline aria-label="Video of docs features" className="block w-full max-w-xl xl:w-auto xl:h-[250px] bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center outline-none" style={{aspectRatio: '16/9'}} />
+            </div>
+          </div>
+        </section>
 
-      <section className="max-w-6xl mx-auto pt-32 px-4 sm:px-8 md:px-20 pb-48 sm:pb-60">
-        <h1 className="text-3xl md:text-5xl lg:text-6xl font-semibold m-0 mb-4 text-center [text-wrap:balance] [filter:drop-shadow(0_0_0.25em_var(--page-bg))] dark:filter-none"><GradientText>Craft world-class accessible components with custom styles.</GradientText></h1>
-        <p className="m-0 text-slate-800 dark:text-slate-300 text-center text-lg md:text-2xl max-w-3xl mx-auto [text-wrap:balance]">Over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</p>
+        <section className="max-w-6xl mx-auto pt-24 px-4 sm:px-8 md:px-20 pb-48 sm:pb-60">
+          <h1 className="text-3xl md:text-5xl lg:text-6xl font-semibold m-0 mb-4 text-center [text-wrap:balance] [filter:drop-shadow(0_0_0.25em_var(--page-bg))] dark:filter-none"><GradientText>Craft world-class accessible components with custom styles.</GradientText></h1>
+          <p className="m-0 text-slate-800 dark:text-slate-300 text-center text-lg md:text-2xl max-w-3xl mx-auto [text-wrap:balance]">Over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</p>
 
-        <div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center">
-          <a href="getting-started" className="no-underline bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring  dark:outline-white outline-offset-2 active:scale-95 cursor-pointer">Get Started</a>
-          <SearchMenuWrapperServer currentPage={props.currentPage}>
-            <SearchMenuButton className="block font-spectrum no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring  dark:outline-white outline-offset-2 pressed:scale-95 focus-ring focus-visible:outline-2">Explore Components</SearchMenuButton>
-          </SearchMenuWrapperServer>
-        </div>
+          <div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center">
+            <LinkButton size="XL" staticColor="auto" href="getting-started">Get started</LinkButton>
+            <SearchMenuWrapperServer currentPage={props.currentPage}>
+              <S2Button size="XL" staticColor="auto" variant="secondary">Explore Components</S2Button>
+            </SearchMenuWrapperServer>
+          </div>
 
-        <div className="relative pt-10 md:pt-20 md:mt-20">
-          <Window toolbar={<AddressBar>https://your-app.com</AddressBar>} className="h-[450px] max-w-[600px] mx-auto">
-            <div className="flex-1 overflow-auto bg-white dark:bg-zinc-800/90 backdrop-blur-2xl backdrop-saturate-200">
-              <ExampleApp />
+          <div className="relative pt-10 md:pt-20 md:mt-20">
+            <Window toolbar={<AddressBar>https://your-app.com</AddressBar>} className="h-[450px] max-w-[600px] mx-auto">
+              <div className="flex-1 overflow-auto bg-white dark:bg-zinc-800/90 backdrop-blur-2xl backdrop-saturate-200">
+                <ExampleApp />
+              </div>
+            </Window>
+            <svg viewBox="0 0 832 450" width={832} className="absolute top-0 left-[50%] -translate-x-[50%] z-20 pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none hidden md:block">
+              <defs>
+                <marker
+                  id="arrow"
+                  viewBox="0 0 6 6"
+                  refX={3}
+                  refY={3}
+                  markerWidth={6}
+                  markerHeight={6}
+                  orient="auto-start-reverse"
+                  className="fill-slate-500 dark:fill-white">
+                  <circle r={3} cx={3} cy={3} />
+                </marker>
+              </defs>
+              <Arrow href="Popover" points="310,50 310,132 383,132 383,142" textX={290} y={41}>Popover</Arrow>
+              <Arrow href="Tooltip" points="522,50 522,132 427,132 427,142" textX={504} y={41}>Tooltip</Arrow>
+              <g transform="translate(0 80)">
+                <Arrow href="SearchField" textX={28} x1={88} x2={132} y={80}>SearchField</Arrow>
+                <Arrow href="Table" textX={58} x1={88} x2={132} y={170}>Table</Arrow>
+                <Arrow href="Modal" textX={748} x1={700} x2={742} y={80} marker="markerStart">Modal</Arrow>
+              </g>
+              <g transform="translate(0 80)" id="hideOnScroll" className="transition duration-300">
+                <Arrow href="Checkbox" textX={36} x1={88} x2={142} y={294}>Checkbox</Arrow>
+                <Arrow href="ToggleButton" textX={20} x1={88} x2={180} y={362}>ToggleButton</Arrow>
+                <Arrow href="Menu" textX={748} x1={690} x2={744} y={180} marker="markerStart">Menu</Arrow>
+              </g>
+            </svg>
+            <div className="max-w-[600px] mx-auto">
+              <a href="examples/crud" target="_blank" className="flex items-center gap-1 w-fit mt-4 ms-auto text-sm text-gray-900 dark:text-white hover:bg-black/10 hover:dark:bg-white/10 group no-underline rounded-full px-3 -me-3 py-1 transition focus-ring active:scale-95">View example source<ArrowRight aria-hidden className="inline w-4 h-4 will-change-transform group-hover:translate-x-0.5 transition" /></a>
             </div>
-          </Window>
-          <svg viewBox="0 0 832 450" width={832} className="absolute top-0 left-[50%] -translate-x-[50%] z-20 pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none hidden md:block">
-            <defs>
-              <marker
-                id="arrow"
-                viewBox="0 0 6 6"
-                refX={3}
-                refY={3}
-                markerWidth={6}
-                markerHeight={6}
-                orient="auto-start-reverse"
-                className="fill-slate-500 dark:fill-white">
-                <circle r={3} cx={3} cy={3} />
-              </marker>
-            </defs>
-            <Arrow href="Popover" points="310,50 310,132 383,132 383,142" textX={290} y={41}>Popover</Arrow>
-            <Arrow href="Tooltip" points="522,50 522,132 427,132 427,142" textX={504} y={41}>Tooltip</Arrow>
-            <g transform="translate(0 80)">
-              <Arrow href="SearchField" textX={28} x1={88} x2={132} y={80}>SearchField</Arrow>
-              <Arrow href="Table" textX={58} x1={88} x2={132} y={170}>Table</Arrow>
-              <Arrow href="Modal" textX={748} x1={700} x2={742} y={80} marker="markerStart">Modal</Arrow>
-            </g>
-            <g transform="translate(0 80)" id="hideOnScroll" className="transition duration-300">
-              <Arrow href="Checkbox" textX={36} x1={88} x2={142} y={294}>Checkbox</Arrow>
-              <Arrow href="ToggleButton" textX={20} x1={88} x2={180} y={362}>ToggleButton</Arrow>
-              <Arrow href="Menu" textX={748} x1={690} x2={744} y={180} marker="markerStart">Menu</Arrow>
-            </g>
-          </svg>
-          <div className="max-w-[600px] mx-auto">
-            <a href="examples/crud" target="_blank" className="flex items-center gap-1 w-fit mt-4 ms-auto text-sm text-gray-900 dark:text-white hover:bg-black/10 hover:dark:bg-white/10 group no-underline rounded-full px-3 -me-3 py-1 transition focus-ring active:scale-95">View example source<ArrowRight aria-hidden className="inline w-4 h-4 will-change-transform group-hover:translate-x-0.5 transition" /></a>
           </div>
-        </div>
-      </section>
-    </header>
-
-    <main className="max-w-6xl mx-auto">
-
-    <Section className="pink-gradient-background">
-      <h2><GradientText>Bring your own</GradientText> <span className="bg-clip-text bg-linear-to-t from-fuchsia-600 to-pink-600">styles</span><GradientText>.</GradientText></h2>
-      <p className="m-0">React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze.</p>
-      <LearnMoreLink href="styling" className="text-fuchsia-600 dark:text-fuchsia-500 hover:bg-fuchsia-400/[15%]" />
-
-      <Styles>
-
-        ```tsx
-        <DatePicker>
-          <Label>Date Planted</Label>
-          <Group>
-            <DateInput>
-              {segment => <DateSegment segment={segment} />}
-            </DateInput>
-            <Button><CalendarIcon /></Button>
-          </Group>
-          <Popover>
-            <Dialog>
-              <Calendar>
-                <Button slot="previous"><LeftIcon /></Button>
-                <Heading />
-                <Button slot="next"><RightIcon /></Button>
-                <CalendarGrid>
-                  {date => <CalendarCell date={date} />}
-                </CalendarGrid>
-              </Calendar>
-            </Dialog>
-          </Popover>
-        </DatePicker>
-        ```
-
-        ```css
-        /* Consistent default classes for each component */
-        .react-aria-DatePicker {
-          /* ... */
-
-          .react-aria-Group {
-            border: 2px solid var(--gray-300);
+        </section>
+      </header>
+
+      <main className="max-w-6xl mx-auto">
+
+      <Section className="pink-gradient-background">
+        <h2><GradientText>Bring your own</GradientText> <span className="bg-clip-text bg-linear-to-t from-fuchsia-600 to-pink-600">styles</span><GradientText>.</GradientText></h2>
+        <p className="m-0">React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze.</p>
+        <LearnMoreLink href="styling" className="text-fuchsia-600 dark:text-fuchsia-500 hover:bg-fuchsia-400/[15%]" />
+
+        <Styles>
+
+          ```tsx
+          <DatePicker>
+            <Label>Date Planted</Label>
+            <Group>
+              <DateInput>
+                {segment => <DateSegment segment={segment} />}
+              </DateInput>
+              <Button><CalendarIcon /></Button>
+            </Group>
+            <Popover>
+              <Dialog>
+                <Calendar>
+                  <Button slot="previous"><LeftIcon /></Button>
+                  <Heading />
+                  <Button slot="next"><RightIcon /></Button>
+                  <CalendarGrid>
+                    {date => <CalendarCell date={date} />}
+                  </CalendarGrid>
+                </Calendar>
+              </Dialog>
+            </Popover>
+          </DatePicker>
+          ```
+
+          ```css
+          /* Consistent default classes for each component */
+          .react-aria-DatePicker {
+            /* ... */
+
+            .react-aria-Group {
+              border: 2px solid var(--gray-300);
+            }
           }
-        }
 
-        .react-aria-CalendarCell {
-          color: var(--gray-900);
+          .react-aria-CalendarCell {
+            color: var(--gray-900);
 
-          /* Style interactive states with data attributes */
-          &[data-pressed] {
-            background: var(--gray-100);
-          }
+            /* Style interactive states with data attributes */
+            &[data-pressed] {
+              background: var(--gray-100);
+            }
 
-          &[data-selected] {
-            color: var(--gray-50);
-            background: var(--blue-600);
-          }
-        }
-        ```
-
-        ```tsx
-        <ComboBox className="group flex ...">
-          <Label>Assignee</Label>
-          {/* Tailwind plugin for all UI states. */}
-          <Group className="... focus-visible:outline-blue-600">
-            <Input className="flex-1 ..." />
-            <Button className="... pressed:bg-gray-100">
-              <ChevronsUpDownIcon />
-            </Button>
-          </Group>
-          {/* Built-in entry and exit animation states. */}
-          <Popover className="w-(--trigger-width) ... entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
-            <ListBox items={people}>
-              {item => (
-                <ListBoxItem textValue={item.name} className="group text-gray-900 ... focus:bg-blue-600 focus:text-white">
-                  {/* Use render props to customize children based on state. */}
-                  {({ isSelected }) => <>
-                    <img alt="" src={item.avatar} />
-                    <span className="... font-normal group-selected:font-semibold">{item.name}</span>
-                    {isSelected &&
-                      <CheckIcon />
-                    }
-                  </>}
-                </ListBoxItem>
-              )}
-            </ListBox>
-          </Popover>
-        </ComboBox>
-        ```
-
-        ```tsx
-        const StyledSlider = styled(Slider)`
-          display: grid;
-          /* ... */
-        `;
-
-        const StyledSliderTrack = styled(SliderTrack)`
-          background: var(--gray-300);
-        `;
-
-        const StyledSliderThumb = styled(SliderThumb)`
-          width: 24px;
-          height: 24px;
-          border-radius: 50%;
-          background: var(--gray-50);
-          border: 2px solid var(--gray-600);
-
-          &[data-dragging] {
-            background: var(--gray-600);
+            &[data-selected] {
+              color: var(--gray-50);
+              background: var(--blue-600);
+            }
           }
-        `;
-
-        <StyledSlider defaultValue={30}>
-          <Label>Opacity</Label>
-          <SliderOutput />
-          <StyledSliderTrack>
-            <StyledSliderThumb />
-          </StyledSliderTrack>
-        </StyledSlider>
-        ```
-
-        ```tsx
-        import {Button} from 'react-aria-components';
-        import {styled} from '../styled-system/jsx';
-
-        const StyledButton = styled(Button, {
-          base: {
+          ```
+
+          ```tsx
+          <ComboBox className="group flex ...">
+            <Label>Assignee</Label>
+            {/* Tailwind plugin for all UI states. */}
+            <Group className="... focus-visible:outline-blue-600">
+              <Input className="flex-1 ..." />
+              <Button className="... pressed:bg-gray-100">
+                <ChevronsUpDownIcon />
+              </Button>
+            </Group>
+            {/* Built-in entry and exit animation states. */}
+            <Popover className="w-(--trigger-width) ... entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
+              <ListBox items={people}>
+                {item => (
+                  <ListBoxItem textValue={item.name} className="group text-gray-900 ... focus:bg-blue-600 focus:text-white">
+                    {/* Use render props to customize children based on state. */}
+                    {({ isSelected }) => <>
+                      <img alt="" src={item.avatar} />
+                      <span className="... font-normal group-selected:font-semibold">{item.name}</span>
+                      {isSelected &&
+                        <CheckIcon />
+                      }
+                    </>}
+                  </ListBoxItem>
+                )}
+              </ListBox>
+            </Popover>
+          </ComboBox>
+          ```
+
+          ```tsx
+          const StyledSlider = styled(Slider)`
+            display: grid;
             /* ... */
-          },
-          variants: {
-            variant: {
-              primary: {
-                background: 'blue.600',
-                '&[data-pressed]': {
-                  background: 'blue.700',
-                }
-              },
-              secondary: {
-                background: 'gray.300',
-                '&[data-pressed]': {
-                  background: 'gray.400',
+          `;
+
+          const StyledSliderTrack = styled(SliderTrack)`
+            background: var(--gray-300);
+          `;
+
+          const StyledSliderThumb = styled(SliderThumb)`
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: var(--gray-50);
+            border: 2px solid var(--gray-600);
+
+            &[data-dragging] {
+              background: var(--gray-600);
+            }
+          `;
+
+          <StyledSlider defaultValue={30}>
+            <Label>Opacity</Label>
+            <SliderOutput />
+            <StyledSliderTrack>
+              <StyledSliderThumb />
+            </StyledSliderTrack>
+          </StyledSlider>
+          ```
+
+          ```tsx
+          import {Button} from 'react-aria-components';
+          import {styled} from '../styled-system/jsx';
+
+          const StyledButton = styled(Button, {
+            base: {
+              /* ... */
+            },
+            variants: {
+              variant: {
+                primary: {
+                  background: 'blue.600',
+                  '&[data-pressed]': {
+                    background: 'blue.700',
+                  }
+                },
+                secondary: {
+                  background: 'gray.300',
+                  '&[data-pressed]': {
+                    background: 'gray.400',
+                  }
                 }
               }
             }
-          }
-        });
-
-        <StyledButton variant="primary">
-          Initiate launch sequence…
-        </StyledButton>
-        ```
-
-      </Styles>
-    </Section>
-
-    <Section className="red-gradient-background">
-      <h2><span className="bg-clip-text bg-linear-to-b from-pink-600 to-rose-600">Advanced features</span> <GradientText>for ambitious apps.</GradientText></h2>
-      <p className="m-0">Make your web app feel native with rich interactions that adapt to the device, platform, and user. React Aria supports advanced features like accessible drag and drop, keyboard multi-selection, built-in form validation, table column resizing, and a ton more.</p>
-      <LearnMoreLink href="dnd" className="text-rose-700 dark:text-rose-500 hover:bg-rose-400/[15%]" />
-      <KanbanBoard />
-      <a href="examples/kanban" target="_blank" className="flex items-center gap-1 w-fit ms-auto text-sm text-gray-900 dark:text-white hover:bg-black/10 hover:dark:bg-white/10 group no-underline rounded-full px-3 -me-3 py-1 transition focus-ring active:scale-95">View example source<ArrowRight aria-hidden className="inline w-4 h-4 will-change-transform group-hover:translate-x-0.5 transition" /></a>
-    </Section>
-
-    <Section className="cyan-gradient-background">
-      <h2><GradientText>High quality</GradientText> <span className="bg-clip-text bg-linear-to-t from-cyan-600 to-green-600">interactions</span> <GradientText>on all devices.</GradientText></h2>
-      <p className="m-0">React Aria ensures a great experience for users, no matter their device. All components are optimized for mouse, touch, keyboard, and screen reader interactions, with a meticulous attention to detail that makes your app feel responsive and natural on every platform.</p>
-      <LearnMoreLink href="quality#interactions" className="text-cyan-700 dark:text-cyan-600 hover:bg-cyan-400/[15%]" />
-
-      <PaginatedCarousel className="grid gap-4 md:gap-6 grid-cols-[repeat(4,100%)] md:grid-cols-2 md:grid-rows-2 -mx-8 md:mx-0 px-8 md:px-0 py-4 md:py-0 overflow-auto md:overflow-visible snap-x snap-mandatory no-scrollbar" paginationClassName="md:hidden">
-        <Card>
-          <CardTitle>Touch optimized.</CardTitle>
-          <CardDescription>Micro-interactions like dragging off to cancel a press, long pressing to select, preventing text selection on interactive elements, scroll locking, and multi-touch handling make your app feel native.</CardDescription>
-
-          <div className="flex-1 flex items-center justify-center -mb-6 will-change-transform">
-            <SwitchAnimation />
-          </div>
-        </Card>
-
-        <Card>
-          <CardTitle>Mouse enhanced.</CardTitle>
-          <CardDescription>Hover interactions only apply when using a mouse – no sticky touch hover states. Mouse features like double click, scroll wheel, tooltips, and cursor feedback enhance your app on desktop.</CardDescription>
+          });
+
+          <StyledButton variant="primary">
+            Initiate launch sequence…
+          </StyledButton>
+          ```
+
+        </Styles>
+      </Section>
+
+      <Section className="red-gradient-background">
+        <h2><span className="bg-clip-text bg-linear-to-b from-pink-600 to-rose-600">Advanced features</span> <GradientText>for ambitious apps.</GradientText></h2>
+        <p className="m-0">Make your web app feel native with rich interactions that adapt to the device, platform, and user. React Aria supports advanced features like accessible drag and drop, keyboard multi-selection, built-in form validation, table column resizing, and a ton more.</p>
+        <LearnMoreLink href="dnd" className="text-rose-700 dark:text-rose-500 hover:bg-rose-400/[15%]" />
+        <KanbanBoard />
+        <a href="examples/kanban" target="_blank" className="flex items-center gap-1 w-fit ms-auto text-sm text-gray-900 dark:text-white hover:bg-black/10 hover:dark:bg-white/10 group no-underline rounded-full px-3 -me-3 py-1 transition focus-ring active:scale-95">View example source<ArrowRight aria-hidden className="inline w-4 h-4 will-change-transform group-hover:translate-x-0.5 transition" /></a>
+      </Section>
+
+      <Section className="cyan-gradient-background">
+        <h2><GradientText>High quality</GradientText> <span className="bg-clip-text bg-linear-to-t from-cyan-600 to-green-600">interactions</span> <GradientText>on all devices.</GradientText></h2>
+        <p className="m-0">React Aria ensures a great experience for users, no matter their device. All components are optimized for mouse, touch, keyboard, and screen reader interactions, with a meticulous attention to detail that makes your app feel responsive and natural on every platform.</p>
+        <LearnMoreLink href="quality#interactions" className="text-cyan-700 dark:text-cyan-600 hover:bg-cyan-400/[15%]" />
+
+        <PaginatedCarousel className="grid gap-4 md:gap-6 grid-cols-[repeat(4,100%)] md:grid-cols-2 md:grid-rows-2 -mx-8 md:mx-0 px-8 md:px-0 py-4 md:py-0 overflow-auto md:overflow-visible snap-x snap-mandatory no-scrollbar" paginationClassName="md:hidden">
+          <Card>
+            <CardTitle>Touch optimized.</CardTitle>
+            <CardDescription>Micro-interactions like dragging off to cancel a press, long pressing to select, preventing text selection on interactive elements, scroll locking, and multi-touch handling make your app feel native.</CardDescription>
+
+            <div className="flex-1 flex items-center justify-center -mb-6 will-change-transform">
+              <SwitchAnimation />
+            </div>
+          </Card>
 
-          <div className="flex-1 flex items-center justify-center will-change-transform">
-            <MouseAnimation />
-          </div>
-        </Card>
+          <Card>
+            <CardTitle>Mouse enhanced.</CardTitle>
+            <CardDescription>Hover interactions only apply when using a mouse – no sticky touch hover states. Mouse features like double click, scroll wheel, tooltips, and cursor feedback enhance your app on desktop.</CardDescription>
 
-        <Card>
-          <CardTitle>Keyboard friendly.</CardTitle>
-          <CardDescription>Keyboard interactions are first-class, including arrow key navigation, typeahead, multiple selection modifiers,  landmark navigation, and much more.</CardDescription>
+            <div className="flex-1 flex items-center justify-center will-change-transform">
+              <MouseAnimation />
+            </div>
+          </Card>
 
-          <div className="mt-8 flex gap-2 sm:gap-4 items-center">
-            <Keyboard />
-            <ListBoxExample />
-          </div>
-        </Card>
+          <Card>
+            <CardTitle>Keyboard friendly.</CardTitle>
+            <CardDescription>Keyboard interactions are first-class, including arrow key navigation, typeahead, multiple selection modifiers,  landmark navigation, and much more.</CardDescription>
 
-        <Card className="[&>:last-child]:flex-1">
-          <CardTitle>Focus managed.</CardTitle>
-          <CardDescription>Focus is automatically contained within overlays, restored on close, and moved when list items are deleted. Focus rings appear only when using the keyboard to help users navigate.</CardDescription>
-          <FocusExample />
-        </Card>
-      </PaginatedCarousel>
-    </Section>
-
-    <Section className="blue-gradient-background">
-      <h2><span className="bg-clip-text bg-linear-to-b from-sky-500 to-indigo-600">Accessibility</span> <GradientText>that's truly first-class.</GradientText></h2>
-      <p className="m-0">React Aria is designed with accessibility as a top priority, and battle tested in production applications. All components are built to work across a wide variety of devices and assistive technologies to ensure the best experience possible for all users.</p>
-      <LearnMoreLink href="quality#accessibility" className="text-blue-600 dark:text-blue-500 hover:bg-blue-400/[15%]" />
-
-      <div className="grid gap-y-6 gap-x-20 md:grid-cols-[min-content_auto] md:grid-flow-col place-items-center">
-        <div className="w-full max-w-xs md:w-auto md:max-w-none md:row-span-3 md:h-full aspect-1/2 iphone-frame md:order-4">
-          <div className="w-full h-full bg-white dark:bg-zinc-900 box-border p-[8%] pb-[11%] iphone-mask *:h-full">
-            <A11y />
+            <div className="mt-8 flex gap-2 sm:gap-4 items-center">
+              <Keyboard />
+              <ListBoxExample />
+            </div>
+          </Card>
+
+          <Card className="[&>:last-child]:flex-1">
+            <CardTitle>Focus managed.</CardTitle>
+            <CardDescription>Focus is automatically contained within overlays, restored on close, and moved when list items are deleted. Focus rings appear only when using the keyboard to help users navigate.</CardDescription>
+            <FocusExample />
+          </Card>
+        </PaginatedCarousel>
+      </Section>
+
+      <Section className="blue-gradient-background">
+        <h2><span className="bg-clip-text bg-linear-to-b from-sky-500 to-indigo-600">Accessibility</span> <GradientText>that's truly first-class.</GradientText></h2>
+        <p className="m-0">React Aria is designed with accessibility as a top priority, and battle tested in production applications. All components are built to work across a wide variety of devices and assistive technologies to ensure the best experience possible for all users.</p>
+        <LearnMoreLink href="quality#accessibility" className="text-blue-600 dark:text-blue-500 hover:bg-blue-400/[15%]" />
+
+        <div className="grid gap-y-6 gap-x-20 md:grid-cols-[min-content_auto] md:grid-flow-col place-items-center">
+          <div className="w-full max-w-xs md:w-auto md:max-w-none md:row-span-3 md:h-full aspect-1/2 iphone-frame md:order-4">
+            <div className="w-full h-full bg-white dark:bg-zinc-900 box-border p-[8%] pb-[11%] iphone-mask *:h-full">
+              <A11y />
+            </div>
           </div>
-        </div>
 
-        <Card className="md:w-80">
-          <CardTitle>ARIA Semantics.</CardTitle>
-          <CardDescription>Components implement semantics and keyboard behavior according to the W3C <a href="https://www.w3.org/WAI/ARIA/apg/" target="_blank">ARIA Authoring Practices Guide</a>. React Aria builds on this foundation with real-world testing and device support.</CardDescription>
-        </Card>
+          <Card className="md:w-80">
+            <CardTitle>ARIA Semantics.</CardTitle>
+            <CardDescription>Components implement semantics and keyboard behavior according to the W3C <a href="https://www.w3.org/WAI/ARIA/apg/" target="_blank">ARIA Authoring Practices Guide</a>. React Aria builds on this foundation with real-world testing and device support.</CardDescription>
+          </Card>
 
-        <Card className="md:w-80">
-          <CardTitle>Mobile ready.</CardTitle>
-          <CardDescription>All behaviors work without a keyboard, ensuring touch screen reader users have full access. Additional features such as hidden dismiss buttons in dialogs enable a great experience for mobile users.</CardDescription>
-        </Card>
+          <Card className="md:w-80">
+            <CardTitle>Mobile ready.</CardTitle>
+            <CardDescription>All behaviors work without a keyboard, ensuring touch screen reader users have full access. Additional features such as hidden dismiss buttons in dialogs enable a great experience for mobile users.</CardDescription>
+          </Card>
 
-        <Card className="md:w-80">
-          <CardTitle>Tested. Like, really.</CardTitle>
-          <CardDescription>All components are extensively tested using many popular screen readers and devices. React Aria normalizes differing behavior between browsers and assistive technologies to ensure all users have equal access.</CardDescription>
-        </Card>
-      </div>
-    </Section>
-
-    <Section className="orange-gradient-background">
-      <h2><GradientText>Ready for an</GradientText> <span className="bg-clip-text bg-linear-to-b from-yellow-500 to-orange-600">international</span> <GradientText>audience.</GradientText></h2>
-      <p className="m-0">React Aria is engineered for internationalization out of the box, including translations in over 30 languages, localized date and number formatting and parsing, support for 13 calendar systems, 5 numbering systems, right-to-left layout, and more.</p>
-      <LearnMoreLink href="quality#internationalization" className="text-orange-700 dark:text-orange-600 hover:bg-orange-400/[15%]" />
-      <I18n />
-    </Section>
-
-    <Section className="green-gradient-background">
-      <h2><span className="bg-clip-text bg-linear-to-b from-lime-600 to-green-600">Customizable</span> <GradientText>to the max.</GradientText></h2>
-      <p className="m-0">React Aria offers a flexible and scalable API that lets you dive as deep into the details as you like. Start with high-level components with a built-in DOM structure and simple styling API, compose custom patterns with contexts, and for the ultimate control, drop down to the low-level Hook-based API. Mix and match as needed.</p>
-      <LearnMoreLink href="customization" className="text-green-700 dark:text-green-600 hover:bg-green-400/[15%]" />
-
-    <PaginatedCarousel className="grid gap-4 md:gap-6 grid-cols-[repeat(4,100%)] lg:grid-cols-2 lg:auto-rows-[1rem] -mx-8 px-8 lg:px-12 lg:-mx-12 py-4 overflow-auto snap-x snap-mandatory no-scrollbar edge-mask" paginationClassName="max-w-3xl lg:hidden">
-      <Card className="lg:row-end-[span_13]">
-        <CardTitle>Reuse styles.</CardTitle>
-        <CardDescription>React Aria's API is designed around composition, enabling you to share common components between patterns, or even use them standalone. No need to duplicate styling code.</CardDescription>
-
-        <Scrollable className="relative flex-1 -mx-6 -mb-6 mt-6 [&_pre]:m-0 [&_.source]:px-6 [&_.source]:text-[15px] [&_.source]:leading-snug lg:[&_.source]:text-sm isolate rounded-b-2xl">
-
-          <div className="highlight-tags [--delay:2.5s] h-full *:h-full cross-fade [--fade-from:1] [--fade-to:0]">
-            <div className="hidden md:contents">
-              ```tsx
-              <Select>
-                <Label>Permissions</Label>
-                <Button>
-                  <SelectValue />
-                  <span>▼</span>
-                </Button>
-                <Popover>
-                  <ListBox>
-                    <ListBoxItem>Read Only</ListBoxItem>
-                    <ListBoxItem>Edit</ListBoxItem>
-                    <ListBoxItem>Admin</ListBoxItem>
-                  </ListBox>
-                </Popover>
-              </Select>
-              ```
-            </div>
-            <div className="contents md:hidden">
-              ```tsx
-              <Select>
-                <Label>
-                  Permissions
-                </Label>
-                <Button>
-                  <SelectValue />
-                  <span>▼</span>
-                </Button>
-                <Popover>
-                  <ListBox>
-                    <ListBoxItem>
-                      Read Only
-                    </ListBoxItem>
-                    <ListBoxItem>
-                      Edit
-                    </ListBoxItem>
-                    <ListBoxItem>
-                      Admin
-                    </ListBoxItem>
-                  </ListBox>
-                </Popover>
-              </Select>
-              ```
-            </div>
-          </div>
-          <div className="absolute top-0 left-0 highlight-tags cross-fade">
-            <div className="hidden md:contents">
-              ```tsx
-              <ComboBox>
-                <Label>Permissions</Label>
-                <Group>
-                  <Input />
-                  <Button>▼</Button>
-                </Group>
-                <Popover>
-                  <ListBox>
-                    <ListBoxItem>Read Only</ListBoxItem>
-                    <ListBoxItem>Edit</ListBoxItem>
-                    <ListBoxItem>Admin</ListBoxItem>
-                  </ListBox>
-                </Popover>
-              </ComboBox>
-              ```
+          <Card className="md:w-80">
+            <CardTitle>Tested. Like, really.</CardTitle>
+            <CardDescription>All components are extensively tested using many popular screen readers and devices. React Aria normalizes differing behavior between browsers and assistive technologies to ensure all users have equal access.</CardDescription>
+          </Card>
+        </div>
+      </Section>
+
+      <Section className="orange-gradient-background">
+        <h2><GradientText>Ready for an</GradientText> <span className="bg-clip-text bg-linear-to-b from-yellow-500 to-orange-600">international</span> <GradientText>audience.</GradientText></h2>
+        <p className="m-0">React Aria is engineered for internationalization out of the box, including translations in over 30 languages, localized date and number formatting and parsing, support for 13 calendar systems, 5 numbering systems, right-to-left layout, and more.</p>
+        <LearnMoreLink href="quality#internationalization" className="text-orange-700 dark:text-orange-600 hover:bg-orange-400/[15%]" />
+        <I18n />
+      </Section>
+
+      <Section className="green-gradient-background">
+        <h2><span className="bg-clip-text bg-linear-to-b from-lime-600 to-green-600">Customizable</span> <GradientText>to the max.</GradientText></h2>
+        <p className="m-0">React Aria offers a flexible and scalable API that lets you dive as deep into the details as you like. Start with high-level components with a built-in DOM structure and simple styling API, compose custom patterns with contexts, and for the ultimate control, drop down to the low-level Hook-based API. Mix and match as needed.</p>
+        <LearnMoreLink href="customization" className="text-green-700 dark:text-green-600 hover:bg-green-400/[15%]" />
+
+      <PaginatedCarousel className="grid gap-4 md:gap-6 grid-cols-[repeat(4,100%)] lg:grid-cols-2 lg:auto-rows-[1rem] -mx-8 px-8 lg:px-12 lg:-mx-12 py-4 overflow-auto snap-x snap-mandatory no-scrollbar edge-mask" paginationClassName="max-w-3xl lg:hidden">
+        <Card className="lg:row-end-[span_13]">
+          <CardTitle>Reuse styles.</CardTitle>
+          <CardDescription>React Aria's API is designed around composition, enabling you to share common components between patterns, or even use them standalone. No need to duplicate styling code.</CardDescription>
+
+          <Scrollable className="relative flex-1 -mx-6 -mb-6 mt-6 [&_pre]:m-0 [&_.source]:px-6 [&_.source]:text-[15px] [&_.source]:leading-snug lg:[&_.source]:text-sm isolate rounded-b-2xl">
+
+            <div className="highlight-tags [--delay:2.5s] h-full *:h-full cross-fade [--fade-from:1] [--fade-to:0]">
+              <div className="hidden md:contents">
+                ```tsx
+                <Select>
+                  <Label>Permissions</Label>
+                  <Button>
+                    <SelectValue />
+                    <span>▼</span>
+                  </Button>
+                  <Popover>
+                    <ListBox>
+                      <ListBoxItem>Read Only</ListBoxItem>
+                      <ListBoxItem>Edit</ListBoxItem>
+                      <ListBoxItem>Admin</ListBoxItem>
+                    </ListBox>
+                  </Popover>
+                </Select>
+                ```
+              </div>
+              <div className="contents md:hidden">
+                ```tsx
+                <Select>
+                  <Label>
+                    Permissions
+                  </Label>
+                  <Button>
+                    <SelectValue />
+                    <span>▼</span>
+                  </Button>
+                  <Popover>
+                    <ListBox>
+                      <ListBoxItem>
+                        Read Only
+                      </ListBoxItem>
+                      <ListBoxItem>
+                        Edit
+                      </ListBoxItem>
+                      <ListBoxItem>
+                        Admin
+                      </ListBoxItem>
+                    </ListBox>
+                  </Popover>
+                </Select>
+                ```
+              </div>
             </div>
-            <div className="contents md:hidden">
-              ```tsx
-              <ComboBox>
-                <Label>
-                  Permissions
-                </Label>
-                <Group>
-                  <Input />
-                  <Button>▼</Button>
-                </Group>
-                <Popover>
-                  <ListBox>
-                    <ListBoxItem>
-                      Read Only
-                    </ListBoxItem>
-                    <ListBoxItem>
-                      Edit
-                    </ListBoxItem>
-                    <ListBoxItem>
-                      Admin
-                    </ListBoxItem>
-                  </ListBox>
-                </Popover>
-              </ComboBox>
-              ```
+            <div className="absolute top-0 left-0 highlight-tags cross-fade">
+              <div className="hidden md:contents">
+                ```tsx
+                <ComboBox>
+                  <Label>Permissions</Label>
+                  <Group>
+                    <Input />
+                    <Button>▼</Button>
+                  </Group>
+                  <Popover>
+                    <ListBox>
+                      <ListBoxItem>Read Only</ListBoxItem>
+                      <ListBoxItem>Edit</ListBoxItem>
+                      <ListBoxItem>Admin</ListBoxItem>
+                    </ListBox>
+                  </Popover>
+                </ComboBox>
+                ```
+              </div>
+              <div className="contents md:hidden">
+                ```tsx
+                <ComboBox>
+                  <Label>
+                    Permissions
+                  </Label>
+                  <Group>
+                    <Input />
+                    <Button>▼</Button>
+                  </Group>
+                  <Popover>
+                    <ListBox>
+                      <ListBoxItem>
+                        Read Only
+                      </ListBoxItem>
+                      <ListBoxItem>
+                        Edit
+                      </ListBoxItem>
+                      <ListBoxItem>
+                        Admin
+                      </ListBoxItem>
+                    </ListBox>
+                  </Popover>
+                </ComboBox>
+                ```
+              </div>
             </div>
-          </div>
-        </Scrollable>
-      </Card>
+          </Scrollable>
+        </Card>
 
-      <Card className="lg:row-end-[span_17]">
-        <CardTitle>Build custom patterns.</CardTitle>
-        <CardDescription>Use the exported contexts for each component to build your own custom patterns with compositional APIs just like React Aria's built-in components.</CardDescription>
+        <Card className="lg:row-end-[span_17]">
+          <CardTitle>Build custom patterns.</CardTitle>
+          <CardDescription>Use the exported contexts for each component to build your own custom patterns with compositional APIs just like React Aria's built-in components.</CardDescription>
 
-        <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 *:h-full [&_pre]:m-0 [&_.source]:pl-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
+          <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 *:h-full [&_pre]:m-0 [&_.source]:pl-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
 
-    ```tsx
-    // A Stepper component with customizable buttons.
-    function Stepper({children}) {
-      let [value, setValue] = useState(0);
+      ```tsx
+      // A Stepper component with customizable buttons.
+      function Stepper({children}) {
+        let [value, setValue] = useState(0);
 
-      return (
-        <ButtonContext.Provider value={{
-          slots: {
-            decrement: {onPress: () => setValue(value - 1)},
-            increment: {onPress: () => setValue(value + 1)}
-          }
-        }}>
-          <TextContext.Provider value={{children: value}}>
-            {children}
-          </TextContext.Provider>
-        </ButtonContext.Provider>
-      );
-    }
-
-    <Stepper>
-      <Button slot="decrement">-</Button>
-      <Text />
-      <Button slot="increment">+</Button>
-    </Stepper>
-    ```
-
-        </Scrollable>
-      </Card>
-
-      <Card className="lg:row-end-[span_22]">
-        <CardTitle>Customize component parts.</CardTitle>
-        <CardDescription>React Aria's contexts let you extend components with new features, or even replace individual parts with totally custom implementations.</CardDescription>
-
-        <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 max-h-[30rem] lg:max-h-none [--code-padding:--spacing(6)] [&_pre]:m-0 [&_.source]:px-6 lg:[&_.source]:text-[13px] code-mask rounded-b-2xl">
-
-    ```tsx
-    // Add a clear button to a DatePicker.
-    function DatePickerClearButton() {
-      let state = useContext(DatePickerStateContext);
-
-      return (
-        <Button
-          slot={null}
-          aria-label="Clear"
-          onPress={() => state.setValue(null)}>
-          ✕
-        </Button>
-      );
-    }
-
-    <DatePicker>
-      <Label>Date</Label>
-      <Group>
-        <DateInput>
-          {segment => <DateSegment segment={segment} />}
-        </DateInput>
-        <DatePickerClearButton />
-        <Button>▼</Button>
-      </Group>
-      <Popover>
-        <Dialog>
-          <Calendar>
-            <header>
-              <Button slot="previous">◀</Button>
-              <Heading />
-              <Button slot="next">▶</Button>
-            </header>
-            <CalendarGrid>
-              {date => <CalendarCell date={date} />}
-            </CalendarGrid>
-          </Calendar>
-        </Dialog>
-      </Popover>
-    </DatePicker>
-    ```
-
-        </Scrollable>
-      </Card>
-
-      <Card className="lg:row-end-[span_18]">
-        <CardTitle>Get complete control with hooks.</CardTitle>
-        <CardDescription>Drop down to the low-level Hook-based API to intercept events, override behavior, customize DOM elements, and much more. Mix and match components and hooks as needed.</CardDescription>
-
-        <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 *:h-full [--code-padding:--spacing(6)] [&_pre]:m-0 [&_.source]:px-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
-
-    ```tsx
-    import {useCalendarGrid} from 'react-aria';
-
-    // Custom calendar that displays one week at a time.
-    function WeekCalendarGrid(props) {
-      let state = useContext(CalendarStateContext);
-      let {gridProps} = useCalendarGrid(props, state);
-
-      return (
-        <table {...gridProps}>
-          <tbody>
-            <tr>
-              {state.getDatesInWeek(0).map((date, i) =>
-                <CalendarCell key={i} date={date} />
-              )}
-            </tr>
-          </tbody>
-        </table>
-      );
-    }
-
-    <Calendar visibleDuration={{weeks: 1}}>
-      <Button slot="previous">◀</Button>
-      <WeekCalendarGrid />
-      <Button slot="next">▶</Button>
-    </Calendar>
-    ```
+        return (
+          <ButtonContext.Provider value={{
+            slots: {
+              decrement: {onPress: () => setValue(value - 1)},
+              increment: {onPress: () => setValue(value + 1)}
+            }
+          }}>
+            <TextContext.Provider value={{children: value}}>
+              {children}
+            </TextContext.Provider>
+          </ButtonContext.Provider>
+        );
+      }
+
+      <Stepper>
+        <Button slot="decrement">-</Button>
+        <Text />
+        <Button slot="increment">+</Button>
+      </Stepper>
+      ```
 
           </Scrollable>
         </Card>
-      </PaginatedCarousel>
-    </Section>
-
-    <section className="max-w-6xl mx-auto px-8 md:px-20 pb-20">
-      <h2 className="pb-8"><GradientText>Ready to get started?</GradientText></h2>
-
-      <div className="grid md:grid-cols-3 gap-6">
-        <a href="getting-started" className="no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%]">
-          <CardTitle>Install and Setup <ArrowRight aria-hidden className="inline w-5 h-5 mb-1 align-middle" /></CardTitle>
-          <CardDescription>Learn how to install and setup React Aria in your project, and build and style a component.</CardDescription>
-        </a>
-
-        <SearchMenuWrapperServer currentPage={props.currentPage}>
-          <SearchMenuButton className="font-[inherit] block text-start no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%] cursor-pointer">
-            <CardTitle>View Components <ArrowRight aria-hidden className="inline w-5 h-5 mb-1 align-middle" /></CardTitle>
-            <CardDescription>See an overview of all of the components and hooks offered by React Aria.</CardDescription>
-          </SearchMenuButton>
-        </SearchMenuWrapperServer>
-
-        <a href="examples/" className="no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%]">
-          <CardTitle>Explore Examples <ArrowRight aria-hidden className="inline w-5 h-5 mb-1 align-middle" /></CardTitle>
-          <CardDescription>Check out some fully styled examples showing what is possible with React Aria.</CardDescription>
-        </a>
-      </div>
-    </section>
-
-    </main>
-
-    <footer className="max-w-6xl mx-auto text-[11px] box-border px-8 md:px-20 py-4">
-      <hr className="border-0 border-b border-gray-300 dark:border-zinc-700 m-0 mb-2" />
-      <ul className="flex flex-wrap gap-1 lg:justify-end text-zinc-500 dark:text-zinc-400 list-none">
-        <li>Copyright © {new Date().getFullYear()} Adobe. All rights reserved.</li>
-        <li><a href="//www.adobe.com/privacy.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Privacy</a><span className="ml-1">/</span></li>
-        <li><a href="//www.adobe.com/legal/terms.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Terms of Use</a><span className="ml-1">/</span></li>
-        <li><a href="//www.adobe.com/privacy/cookies.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Cookies</a><span className="ml-1">/</span></li>
-        <li><a href="//www.adobe.com/privacy/ca-rights.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Do not sell my personal information</a></li>
-      </ul>
-    </footer>
-  </body>
-</html>
+
+        <Card className="lg:row-end-[span_22]">
+          <CardTitle>Customize component parts.</CardTitle>
+          <CardDescription>React Aria's contexts let you extend components with new features, or even replace individual parts with totally custom implementations.</CardDescription>
+
+          <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 max-h-[30rem] lg:max-h-none [--code-padding:--spacing(6)] [&_pre]:m-0 [&_.source]:px-6 lg:[&_.source]:text-[13px] code-mask rounded-b-2xl">
+
+      ```tsx
+      // Add a clear button to a DatePicker.
+      function DatePickerClearButton() {
+        let state = useContext(DatePickerStateContext);
+
+        return (
+          <Button
+            slot={null}
+            aria-label="Clear"
+            onPress={() => state.setValue(null)}>
+            ✕
+          </Button>
+        );
+      }
+
+      <DatePicker>
+        <Label>Date</Label>
+        <Group>
+          <DateInput>
+            {segment => <DateSegment segment={segment} />}
+          </DateInput>
+          <DatePickerClearButton />
+          <Button>▼</Button>
+        </Group>
+        <Popover>
+          <Dialog>
+            <Calendar>
+              <header>
+                <Button slot="previous">◀</Button>
+                <Heading />
+                <Button slot="next">▶</Button>
+              </header>
+              <CalendarGrid>
+                {date => <CalendarCell date={date} />}
+              </CalendarGrid>
+            </Calendar>
+          </Dialog>
+        </Popover>
+      </DatePicker>
+      ```
+
+          </Scrollable>
+        </Card>
+
+        <Card className="lg:row-end-[span_18]">
+          <CardTitle>Get complete control with hooks.</CardTitle>
+          <CardDescription>Drop down to the low-level Hook-based API to intercept events, override behavior, customize DOM elements, and much more. Mix and match components and hooks as needed.</CardDescription>
+
+          <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 *:h-full [--code-padding:--spacing(6)] [&_pre]:m-0 [&_.source]:px-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
+
+      ```tsx
+      import {useCalendarGrid} from 'react-aria';
+
+      // Custom calendar that displays one week at a time.
+      function WeekCalendarGrid(props) {
+        let state = useContext(CalendarStateContext);
+        let {gridProps} = useCalendarGrid(props, state);
+
+        return (
+          <table {...gridProps}>
+            <tbody>
+              <tr>
+                {state.getDatesInWeek(0).map((date, i) =>
+                  <CalendarCell key={i} date={date} />
+                )}
+              </tr>
+            </tbody>
+          </table>
+        );
+      }
+
+      <Calendar visibleDuration={{weeks: 1}}>
+        <Button slot="previous">◀</Button>
+        <WeekCalendarGrid />
+        <Button slot="next">▶</Button>
+      </Calendar>
+      ```
+
+            </Scrollable>
+          </Card>
+        </PaginatedCarousel>
+      </Section>
+
+      <section className="max-w-6xl mx-auto px-8 md:px-20 pb-20">
+        <h2 className="pb-8"><GradientText>Ready to get started?</GradientText></h2>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          <a href="getting-started" className="no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%]">
+            <CardTitle>Install and Setup <ArrowRight aria-hidden className="inline w-5 h-5 mb-1 align-middle" /></CardTitle>
+            <CardDescription>Learn how to install and setup React Aria in your project, and build and style a component.</CardDescription>
+          </a>
+
+          <SearchMenuWrapperServer currentPage={props.currentPage}>
+            <SearchMenuButton className="font-[inherit] block text-start no-underline card-shadow border-0 bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%] cursor-pointer">
+              <CardTitle>View Components <ArrowRight aria-hidden className="inline w-5 h-5 mb-1 align-middle" /></CardTitle>
+              <CardDescription>See an overview of all of the components and hooks offered by React Aria.</CardDescription>
+            </SearchMenuButton>
+          </SearchMenuWrapperServer>
+
+          <a href="examples/" className="no-underline card-shadow bg-white dark:bg-zinc-800 rounded-xl p-6 transition duration-300 card-shadow-hover hover:scale-[101%]">
+            <CardTitle>Explore Examples <ArrowRight aria-hidden className="inline w-5 h-5 mb-1 align-middle" /></CardTitle>
+            <CardDescription>Check out some fully styled examples showing what is possible with React Aria.</CardDescription>
+          </a>
+        </div>
+      </section>
+
+      </main>
+
+      <footer className="max-w-6xl mx-auto text-[11px] box-border px-8 md:px-20 py-4">
+        <hr className="border-0 border-b border-gray-300 dark:border-zinc-700 m-0 mb-2" />
+        <ul className="flex flex-wrap gap-1 lg:justify-end text-zinc-500 dark:text-zinc-400 list-none">
+          <li>Copyright © {new Date().getFullYear()} Adobe. All rights reserved.</li>
+          <li><a href="//www.adobe.com/privacy.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Privacy</a><span className="ml-1">/</span></li>
+          <li><a href="//www.adobe.com/legal/terms.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Terms of Use</a><span className="ml-1">/</span></li>
+          <li><a href="//www.adobe.com/privacy/cookies.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Cookies</a><span className="ml-1">/</span></li>
+          <li><a href="//www.adobe.com/privacy/ca-rights.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Do not sell my personal information</a></li>
+        </ul>
+      </footer>
+    </body>
+  </Provider>
+</RouterWrapperServer>
diff --git a/packages/dev/s2-docs/pages/react-aria/internationalized/date/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/internationalized/date/Calendar.mdx
index 9e0edb94ce3..b057698d818 100644
--- a/packages/dev/s2-docs/pages/react-aria/internationalized/date/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/internationalized/date/Calendar.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 import {StaticTable} from '../../../../src/StaticTable';
 
 export const section = 'Date and Time';
+export const title = 'Calendar Interface';
 export const group = 'Internationalized';
 export const description = 'Calendar systems for international date calculations.';
 
diff --git a/packages/dev/s2-docs/pages/react-aria/internationalized/date/index.mdx b/packages/dev/s2-docs/pages/react-aria/internationalized/date/index.mdx
index fde4c50c0e4..55fb1fd0ebb 100644
--- a/packages/dev/s2-docs/pages/react-aria/internationalized/date/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/internationalized/date/index.mdx
@@ -13,12 +13,10 @@ export default Layout;
 import {InstallCommand} from '../../../../src/InstallCommand';
 
 export const section = 'Date and Time';
-export const title = 'Internationalized Date';
-export const pageTitle = 'Internationalized | Date and Time';
 export const description = 'Introduction to @internationalized/date';
 export const group = 'Internationalized';
 
-# Introduction
+# Internationalized Date
 
 The `@internationalized/date` package provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/internationalized/number/index.mdx b/packages/dev/s2-docs/pages/react-aria/internationalized/number/index.mdx
index 3472ddc394b..2fd8efc8ff1 100644
--- a/packages/dev/s2-docs/pages/react-aria/internationalized/number/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/internationalized/number/index.mdx
@@ -13,12 +13,10 @@ export default Layout;
 import {InstallCommand} from '../../../../src/InstallCommand';
 
 export const section = 'Numbers';
-export const title = 'Internationalized Number';
-export const pageTitle = 'Internationalized | Numbers';
 export const description = 'Introduction to @internationalized/number';
 export const group = 'Internationalized';
 
-# Introduction
+# Internationalized Number
 
 The `@internationalized/number` package provides utilities for formatting and parsing numbers across locales and numbering systems.
 
diff --git a/packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx b/packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx
index bca6462cebc..1bd454047bb 100644
--- a/packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx
+++ b/packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx
@@ -224,7 +224,7 @@ export function AppFrame({children, inert, hidden, page, onPageChange}: any) {
           {/* <ActionButton isQuiet aria-label="Menu">
             <MenuHamburger />
           </ActionButton> */}
-          <AdobeLogo size={24} className={style({flexShrink: 0})} />
+          <AdobeLogo size={24} />
           <span
             className={style({
               font: 'title',
diff --git a/packages/dev/s2-docs/pages/s2/home/Header.tsx b/packages/dev/s2-docs/pages/s2/home/Header.tsx
new file mode 100644
index 00000000000..bdf54c63cc2
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/Header.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import {CSSProperties, useId, useRef, useState} from 'react';
+import SearchMenuTrigger, {preloadSearchMenu} from '@react-spectrum/s2-docs/src/SearchMenuTrigger';
+import {useLayoutEffect} from '@react-aria/utils';
+import { HeaderLink, Link } from '@react-spectrum/s2-docs/src/Link';
+import { space, style } from '@react-spectrum/s2/style' with {type: 'macro'};
+import { getBaseUrl } from '@react-spectrum/s2-docs/src/pageUtils';
+import GithubLogo from '@react-spectrum/s2-docs/src/icons/GithubLogo';
+import { NpmLogo } from '@react-spectrum/s2-docs/src/icons/NpmLogo';
+
+export default function HomeHeader() {
+  const [searchOpen, setSearchOpen] = useState(false);
+  const searchMenuId = useId();
+  let renderCallback = useRef<(() => void) | null>(null);
+  let iconRef = useRef<SVGSVGElement | null>(null);
+  let labelRef = useRef<HTMLDivElement | null>(null);
+  let searchRef = useRef<HTMLDivElement | null>(null);
+
+  let openSearchMenu = async () => {
+    if (!document.startViewTransition) {
+      setSearchOpen((prev) => !prev);
+      return;
+    }
+
+    // Preload SearchMenu so it is ready to render immediately.
+    await preloadSearchMenu();
+
+    // Don't transition the entire page.
+    document.documentElement.style.viewTransitionName = 'none';
+    if (window.scrollY === 0) {
+      iconRef.current!.style.viewTransitionName = 'search-menu-icon';
+      labelRef.current!.style.viewTransitionName = 'search-menu-label';
+      searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
+    }
+
+    let viewTransition = document.startViewTransition(() => {
+      // Wait until next render. Using flushSync causes flickering.
+      return new Promise<void>(resolve => {
+        iconRef.current!.style.viewTransitionName = '';
+        labelRef.current!.style.viewTransitionName = '';
+        searchRef.current!.style.viewTransitionName = '';
+        renderCallback.current = resolve;
+        setSearchOpen((prev) => !prev);
+      });
+    });
+
+    viewTransition.finished.then(() => {
+      document.documentElement.style.viewTransitionName = '';
+    });
+  };
+
+  let closeSearchMenu = () => {
+    if (!document.startViewTransition) {
+      setSearchOpen(false);
+      return;
+    }
+
+    document.documentElement.style.viewTransitionName = 'none';
+    let viewTransition = document.startViewTransition(() => {
+      return new Promise<void>(resolve => {
+        renderCallback.current = resolve;
+        setSearchOpen(false);
+
+        if (window.scrollY === 0) {
+          iconRef.current!.style.viewTransitionName = 'search-menu-icon';
+          labelRef.current!.style.viewTransitionName = 'search-menu-label';
+          searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
+        }
+      });
+    });
+
+    viewTransition.finished.then(() => {
+      document.documentElement.style.viewTransitionName = '';
+      iconRef.current!.style.viewTransitionName = '';
+      labelRef.current!.style.viewTransitionName = '';
+      searchRef.current!.style.viewTransitionName = '';
+    });
+  };
+
+  useLayoutEffect(() => {
+    renderCallback.current?.();
+    renderCallback.current = null;
+  });
+
+  return (
+    <nav
+      className={style({
+        marginX: 'auto',
+        paddingTop: {
+          default: 12,
+          lg: 20
+        },
+        paddingBottom: 16,
+        paddingX: 12,
+        maxWidth: 1440,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        position: 'relative',
+        isolation: 'isolate'
+      })}>
+      <Link
+        href="."
+        staticColor="white"
+        UNSAFE_style={{lineHeight: '0'}}
+        styles={style({
+          zIndex: 2,
+          marginStart: {
+            default: 0,
+            '@media (width >= 1440px)': space(38)
+          }
+        })}>
+        <span 
+          className={style({
+            display: 'inline-flex',
+            alignItems: 'center',
+            columnGap: {
+              default: 12,
+              lg: space(10)
+            },
+            textDecoration: 'none'
+          })}>
+          <svg
+            ref={iconRef}
+            style={{display: searchOpen ? 'none' : undefined} as CSSProperties}
+            aria-label="Adobe"
+            className={style({size: 28})}
+            viewBox="0 0 501.71 444.05">
+            <path
+              d="m297.58 444.05-36.45-101.4h-91.46l76.87-193.53 116.65 294.93h138.52L316.8 0H186.23L0 444.05h297.58z"
+              fill="#fff" />
+          </svg>
+          <span ref={labelRef} className={style({font: 'heading-sm', fontWeight: 'extra-bold', color: 'white'})} style={{display: searchOpen ? 'none' : undefined} as CSSProperties}>React Spectrum</span>
+        </span>
+      </Link>
+      <div className={style({position: 'absolute', insetStart: 0, width: 'full', display: {default: 'none', xl: 'flex'}, justifyContent: 'center'})}>
+        <div ref={searchRef}>
+          <SearchMenuTrigger
+            onOpen={openSearchMenu}
+            onClose={closeSearchMenu}
+            isSearchOpen={searchOpen}
+            overlayId={searchMenuId}
+            staticColor="white" />
+        </div>
+      </div>
+      <div className={style({display: 'flex', alignItems: 'center', gap: 4, justifySelf: 'end'})}>
+        <HeaderLink staticColor="white" href="getting-started" styles={style({display: {default: 'none', sm: 'flex'}})}>Docs</HeaderLink>
+        <HeaderLink staticColor="white" href="releases/" styles={style({display: {default: 'none', sm: 'flex'}})}>Releases</HeaderLink>
+        <HeaderLink staticColor="white" href={getBaseUrl('react-aria') + '/blog/'} rel="noopener noreferrer" styles={style({display: {default: 'none', sm: 'flex'}})}>Blog</HeaderLink>
+        <HeaderLink staticColor="white" aria-label="GitHub" href="https://github.com/adobe/react-spectrum" target="_blank" rel="noopener noreferrer"><GithubLogo /></HeaderLink>
+        <HeaderLink staticColor="white" aria-label="npm" href="https://npmjs.com/@react-spectrum/s2" target="_blank" rel="noopener noreferrer"><NpmLogo /></HeaderLink>
+      </div>
+    </nav>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/home/Home.tsx b/packages/dev/s2-docs/pages/s2/home/Home.tsx
index fb480591563..c872f8d2f59 100644
--- a/packages/dev/s2-docs/pages/s2/home/Home.tsx
+++ b/packages/dev/s2-docs/pages/s2/home/Home.tsx
@@ -1,11 +1,12 @@
-import { size, style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { lightDark, size, style } from "@react-spectrum/s2/style" with {type: 'macro'};
 import { getColorScale } from "@react-spectrum/s2-docs/src//color.macro" with {type: 'macro'};
 import { Code } from "@react-spectrum/s2-docs/src//Code";
 import { Pre } from "@react-spectrum/s2-docs/src/CodePlatter";
 import { ObjectStyles } from "./ObjectStyles";
 import { DarkMode } from "./DarkMode";
 import { AppFrame, ExampleApp } from "./ExampleApp";
-import { Button, Divider, Link, LinkButton, Provider } from "@react-spectrum/s2";
+import { Button, Divider, Provider } from "@react-spectrum/s2";
+import {Link, LinkButton} from '@react-spectrum/s2-docs/src/Link';
 import { Mobile } from "./Mobile";
 import { Rems } from "./Rems";
 // import { PressAnimation } from "./Press";
@@ -43,13 +44,14 @@ import bg from 'data-url:./bg.svg';
 // import { SubmenuAnimation } from "./SubmenuAnimation";
 // @ts-ignore
 import { keyframes } from "../../../../../@react-spectrum/s2/style/style-macro" with {type: 'macro'};
-import { getBaseUrl } from "@react-spectrum/s2-docs/src/pageUtils";
 import SearchMenuWrapperServer from "@react-spectrum/s2-docs/src/SearchMenuWrapperServer";
 import type {Page} from "@parcel/rsc";
 // @ts-ignore
 import { fontSizeToken } from "../../../../../@react-spectrum/s2/style/tokens" with {type: 'macro'};
 // @ts-ignore
 import { letters } from "../../../src/textWidth";
+import HomeHeader from "./Header";
+import {ReleaseLink} from "./ReleaseLink";
 
 const container = style({
   backgroundColor: 'layer-2/80',
@@ -63,7 +65,10 @@ const container = style({
   overflow: 'clip',
   display: 'flex',
   flexDirection: 'column',
-  rowGap: 12
+  rowGap: 12,
+  outlineStyle: 'solid',
+  outlineColor: lightDark('transparent', 'transparent-white-100'),
+  outlineWidth: 1
 });
 
 // Animated heading sliding in from the top.
@@ -168,50 +173,9 @@ export function Home({currentPage}: {currentPage: Page}) {
         backgroundRepeat: 'no-repeat',
         backgroundSize: '100%'
       }}>
-      <nav
-        className={style({
-          marginX: 'auto',
-          paddingY: 16,
-          paddingX: {default: 16, sm: 40},
-          maxWidth: 1600,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        })}>
-        <Link href="." staticColor="white">
-          <span className={style({font: 'title', color: 'white', display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none'})}>
-            <svg viewBox="0 0 30 26" fill="white" aria-label="Adobe" height="22">
-              <polygon points="19,0 30,0 30,26" />
-              <polygon points="11.1,0 0,0 0,26" />
-              <polygon points="15,9.6 22.1,26 17.5,26 15.4,20.8 10.2,20.8" />
-            </svg>
-            <span>React Spectrum</span>
-          </span>
-        </Link>
-        <div className={style({display: 'flex', alignItems: 'center', columnGap: 16})}>
-          <div className={style({display: {default: 'none', sm: 'contents'}})}>
-            <Link staticColor="white" isQuiet isStandalone href={getBaseUrl('react-aria') + '/blog/'}>Blog</Link>
-            <Link staticColor="white" isQuiet isStandalone href="../releases/">Releases</Link>
-            <Link staticColor="white" isQuiet isStandalone href={getBaseUrl('react-aria') + '/'}>React Aria</Link>
-            <Link staticColor="white" isQuiet isStandalone href={getBaseUrl('react-aria') + '/internationalized/date/'}>Internationalized</Link>
-          </div>
-          <Link staticColor="white" isQuiet isStandalone href="https://github.com/adobe/react-spectrum" target="_blank" aria-label="GitHub">
-            <svg aria-hidden="true" viewBox="0 0 16 16" height="22" fill="currentColor">
-              <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-            </svg>
-          </Link>
-          <Link staticColor="white" isQuiet isStandalone href="https://npmjs.com/@react-spectrum/s2" target="_blank" aria-label="NPM">
-            <svg viewBox="0 0 27.23 27.23" aria-hidden="true" height="22" fill="currentColor">
-              <rect width="27.23" height="27.23" rx="2" mask="url(#npm-mask)" />
-              <mask id="npm-mask">
-                <rect width="27.23" height="27.23" rx="2" fill="white" />
-                <polygon fill="black" points="5.8 21.75 13.66 21.75 13.67 9.98 17.59 9.98 17.58 21.76 21.51 21.76 21.52 6.06 5.82 6.04 5.8 21.75" />
-              </mask>
-            </svg>
-          </Link>
-        </div>
-      </nav>
-      <header aria-labelledby={headingId} className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, paddingY: 96, maxWidth: 1024})}>
+      <HomeHeader />
+      <header aria-labelledby={headingId} className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, paddingY: 96, maxWidth: 1024, isolation: 'isolate'})}>
+        <ReleaseLink />
         <HomeH1 id={headingId}>
           <span className={swapWrapper}>Build apps with&nbsp;</span>
           <span className={swapWrapper}>
@@ -238,7 +202,7 @@ export function Home({currentPage}: {currentPage: Page}) {
           <ExampleApp showArrows />
         </section>
       </header>
-      <main className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, maxWidth: 1600})}>
+      <main className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, maxWidth: 1600, isolation: 'isolate'})}>
         <Section
           title="Build Once. Adapt Everywhere."
           description="React Spectrum makes interfaces more accessible, flexible, and maintainable, giving users a seamless experience no matter where they are.">
diff --git a/packages/dev/s2-docs/pages/s2/home/ReleaseLink.tsx b/packages/dev/s2-docs/pages/s2/home/ReleaseLink.tsx
new file mode 100644
index 00000000000..385b0465a83
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/home/ReleaseLink.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
+import { BaseLink } from "@react-spectrum/s2-docs/src/Link";
+import { StatusLight, pressScale } from "@react-spectrum/s2";
+import { useRef } from "react";
+
+export function ReleaseLink() {
+  let ref = useRef(null);
+  return (
+    <BaseLink
+      href="releases/v1-0-0"
+      ref={ref}
+      style={pressScale(ref, {backdropFilter: 'blur(20px)'})}
+      className={style({
+        backgroundColor: 'black/45',
+        boxShadow: 'elevated',
+        borderRadius: 'full',
+        padding: 16,
+        paddingX: 24,
+        marginStart: {
+          default: 0,
+          sm: -24
+        },
+        marginBottom: 32,
+        position: 'relative',
+        overflow: 'clip',
+        display: 'flex',
+        flexDirection: 'row',
+        columnGap: 8,
+        alignItems: 'center',
+        outlineStyle: 'solid',
+        outlineColor: 'transparent-white-100',
+        outlineWidth: 1,
+        width: 'fit',
+        color: 'neutral',
+        colorScheme: 'dark',
+        transition: 'default',
+        textDecoration: {
+          default: 'none',
+          isHovered: 'underline'
+        }
+      })}>
+      <StatusLight variant="positive" size="XL">Spectrum 2 is now stable!</StatusLight>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="currentColor" aria-hidden="true" aria-label="" width="16" height="16">
+        <path d="M9.26 4.406 6.528 1.672A.84.84 0 0 0 5.34 2.859l1.3 1.301H1.396a.84.84 0 0 0 0 1.68H6.64l-1.301 1.3a.84.84 0 0 0 1.188 1.188l2.734-2.734a.84.84 0 0 0 0-1.188z" />
+      </svg>
+    </BaseLink>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/s2/index.mdx b/packages/dev/s2-docs/pages/s2/index.mdx
index 2db1bcd9135..5a344331021 100644
--- a/packages/dev/s2-docs/pages/s2/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/index.mdx
@@ -1,7 +1,9 @@
 import '../../src/client';
 import {Home} from './home/Home';
 import {Provider} from '@react-spectrum/s2';
-import rspFavicon from 'url:../../assets/favicon.ico';
+import rspFavicon from 'url:../../assets/rsp-favicon.svg';
+import {RouterWrapperServer} from "@react-spectrum/s2-docs/src/SearchMenuWrapperServer";
+import {getBaseUrl} from '../../src/pageUtils';
 
 export const section = 'Overview';
 export const title = 'Home';
@@ -9,42 +11,44 @@ export const description = 'Build high quality, accessible UI with the cohesive
 export const omitFromNav = true;
 export const hideFromSearch = true;
 
-<Provider elementType="html" locale="en">
-  <head>
-    <meta charSet="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href={rspFavicon} />
-    <title>React Spectrum</title>
-    <meta rel="preload" as="font" href="https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" crossOrigin="" />
-    <meta name="description" content={description} />
-    <meta name="keywords" content="accessibility,components,react,headless,style-free" />
-    <meta name="twitter:card" content="summary_large_image" />
-    {/* <meta name="twitter:image" content={ogImage} /> */}
-    <meta property="og:title" content="React Spectrum" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content={props.currentPage.url} />
-    {/* <meta property="og:image" content={ogImage} /> */}
-    <meta property="og:description" content={description} />
-    <meta property="og:locale" content="en_US" />
-    <link rel="canonical" href={props.currentPage.url} />
-    <script
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{__html: JSON.stringify(
-        {
-          '@context': 'http://schema.org',
-          '@type': 'Article',
-          author: 'Adobe Inc',
-          headline: 'React Spectrum',
-          description,
-          // image: ogImage,
-          publisher: {
-            '@type': 'Organization',
-            url: 'https://www.adobe.com',
-            name: 'Adobe',
-            logo: rspFavicon
+<RouterWrapperServer currentPage={props.currentPage}>
+  <Provider elementType="html" locale="en">
+    <head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="icon" href={rspFavicon} />
+      <title>React Spectrum</title>
+      <meta rel="preload" as="font" href="https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" crossOrigin="" />
+      <meta name="description" content={description} />
+      <meta name="keywords" content="accessibility,components,react,headless,style-free" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:image" content={`${getBaseUrl('s2')}/og/index.png`} />
+      <meta property="og:title" content="React Spectrum" />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={props.currentPage.url} />
+      <meta property="og:image" content={`${getBaseUrl('s2')}/og/index.png`} />
+      <meta property="og:description" content={description} />
+      <meta property="og:locale" content="en_US" />
+      <link rel="canonical" href={props.currentPage.url} />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{__html: JSON.stringify(
+          {
+            '@context': 'http://schema.org',
+            '@type': 'Article',
+            author: 'Adobe Inc',
+            headline: 'React Spectrum',
+            description,
+            // image: ogImage,
+            publisher: {
+              '@type': 'Organization',
+              url: 'https://www.adobe.com',
+              name: 'Adobe',
+              logo: rspFavicon
+            }
           }
-        }
-      )}} />
-  </head>
-  <Home currentPage={props.currentPage} />
-</Provider>
+        )}} />
+    </head>
+    <Home currentPage={props.currentPage} />
+  </Provider>
+</RouterWrapperServer>
diff --git a/packages/dev/s2-docs/src/CodeFold.tsx b/packages/dev/s2-docs/src/CodeFold.tsx
index 4c515d71287..0077b76aeab 100644
--- a/packages/dev/s2-docs/src/CodeFold.tsx
+++ b/packages/dev/s2-docs/src/CodeFold.tsx
@@ -125,7 +125,7 @@ export function CodeFold({tokens}) {
             <Chevron size="S" aria-hidden className={chevronStyles({isExpanded, isHovered, isPressed, isFocusVisible})} />
             <CodeClient tokens={firstLine} />
             {!isExpanded 
-              ? <><span ref={ref} style={pressScale(ref)({isPressed})} className={more({isHovered, isPressed, isFocusVisible})}><More UNSAFE_style={{width: 14}} /></span><CodeClient tokens={lastLine} /></> 
+              ? <><span ref={ref} style={pressScale(ref)({isPressed})} className={more({isHovered, isPressed, isFocusVisible})}><More UNSAFE_style={{width: 14}} /></span><span data-no-copy><CodeClient tokens={lastLine} /></span></> 
               : null}
           </>)}
         </Button>
diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index 654dd7a6398..af51367e36e 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -73,7 +73,7 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
   let codeRef = useRef<HTMLDivElement | null>(null);
   let [showShadcn, setShowShadcn] = useState(false);
   // let [showCodeSandbox, setShowCodeSandbox] = useState(false);
-  let getText = () => codeRef.current!.querySelector('pre')!.textContent!;
+  let getText = () => getTextContent(codeRef.current!.querySelector('pre')!);
   let {library} = useContext(CodePlatterContext);
   if (!type) {
     if (library === 'react-aria') {
@@ -240,13 +240,33 @@ function getExampleFiles(codeRef: RefObject<HTMLDivElement | null>, files: Downl
   return files;
 }
 
+function getTextContent(element: Element) {
+  // Manually walk over text nodes inside the element and concatenate them.
+  // This is like element.textContent except we skip anything inside an element with data-no-copy.
+  let result = '';
+  let walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, node => {
+    if (node.nodeType === Node.ELEMENT_NODE && (node as Element).hasAttribute('data-no-copy')) {
+      result += '\n';
+      return NodeFilter.FILTER_REJECT;
+    }
+    return node.nodeType === Node.TEXT_NODE ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+  });
+
+  let node = walker.nextNode();
+  while (node) {
+    result += node.nodeValue || '';
+    node = walker.nextNode();
+  }
+  return result;
+}
+
 function getExampleCode(codeRef: RefObject<HTMLDivElement | null>, urls: {[name: string]: string}) {
-  let code = codeRef.current!.querySelector('pre')!.textContent!;
+  let code = getTextContent(codeRef.current!.querySelector('pre')!);
   let fileTabs = codeRef.current!.closest('[data-files]');
   if (fileTabs) {
     let example = fileTabs.querySelector('[data-example] pre');
     if (example) {
-      code = example.textContent!;
+      code = getTextContent(example);
     }
   }
 
diff --git a/packages/dev/s2-docs/src/ComponentCard.tsx b/packages/dev/s2-docs/src/ComponentCard.tsx
index bc5f38db9fa..01467202cbc 100644
--- a/packages/dev/s2-docs/src/ComponentCard.tsx
+++ b/packages/dev/s2-docs/src/ComponentCard.tsx
@@ -78,7 +78,7 @@ import DragAndDropDark from 'url:../assets/component-illustrations/dark/DragAndD
 import DragAndDropLight from 'url:../assets/component-illustrations/light/DragAndDrop.avif';
 import DropZoneDark from 'url:../assets/component-illustrations/dark/DropZone.avif';
 import DropZoneLight from 'url:../assets/component-illustrations/light/DropZone.avif';
-import {ExampleImage} from './ExampleList';
+import {ExampleImage, images as exampleImages} from './ExampleList';
 import FileTriggerDark from 'url:../assets/component-illustrations/dark/FileTrigger.avif';
 import FileTriggerLight from 'url:../assets/component-illustrations/light/FileTrigger.avif';
 import FocusRingDark from 'url:../assets/component-illustrations/dark/FocusRing.avif';
@@ -128,6 +128,7 @@ import PickerDark from 'url:../assets/component-illustrations/dark/Picker.avif';
 import PickerLight from 'url:../assets/component-illustrations/light/Picker.avif';
 import PopoverDark from 'url:../assets/component-illustrations/dark/Popover.avif';
 import PopoverLight from 'url:../assets/component-illustrations/light/Popover.avif';
+import {preload} from 'react-dom';
 import PressDark from 'url:../assets/component-illustrations/dark/Press.avif';
 import PressLight from 'url:../assets/component-illustrations/light/Press.avif';
 import ProgressBarDark from 'url:../assets/component-illustrations/dark/ProgressBar.avif';
@@ -212,6 +213,7 @@ const componentIllustrations: Record<string, [string, string] | undefined> = {
   'Breadcrumbs': [BreadcrumbsLight, BreadcrumbsDark],
   'Button': [ButtonLight, ButtonDark],
   'ButtonGroup': [ButtonGroupLight, ButtonGroupDark],
+  'Calendar': [CalendarLight, CalendarDark],
   'Card': [CardLight, CardDark],
   'CardView': [CardViewLight, CardViewDark],
   'Checkbox': [CheckboxLight, CheckboxDark],
@@ -246,7 +248,7 @@ const componentIllustrations: Record<string, [string, string] | undefined> = {
   'InlineAlert': [InlineAlertLight, InlineAlertDark],
   'Link': [LinkLight, LinkDark],
   'LinkButton': [LinkButtonLight, LinkButtonDark],
-  'ListBox': [CardViewLight, CardViewDark],
+  'ListBox': [SelectionLight, SelectionDark],
   'Menu': [MenuLight, MenuDark],
   'Meter': [MeterLight, MeterDark],
   'Migrating to Spectrum 2': [MigratingLight, MigratingDark],
@@ -283,7 +285,7 @@ const componentIllustrations: Record<string, [string, string] | undefined> = {
   'Tooltip': [TooltipLight, TooltipDark],
   'Tree': [TreeLight, TreeDark],
   'TreeView': [TreeLight, TreeDark],
-  'Virtualizer': [CardViewLight, CardViewDark],
+  'Virtualizer': [CollectionLight, CollectionDark],
   'VisuallyHidden': [AccessibilityLight, AccessibilityDark],
   // Guides
   'Collections': [CollectionLight, CollectionDark],
@@ -335,13 +337,13 @@ const componentIllustrations: Record<string, [string, string] | undefined> = {
   'Taming the dragon: Accessible drag and drop': [DragAndDropLight, DragAndDropDark],
   'Date and Time Pickers for All': [DatePickerLight, DatePickerDark],
   'How we internationalized our number field': [NumberFieldLight, NumberFieldDark],
-  'Improving Internationalization Support in Our Date and Time Components': [DatePickerLight, DatePickerDark],
+  'Improving Internationalization Support in Our Date and Time Components': [DateFieldLight, DateFieldDark],
   'Accessible Color Descriptions for Improved Color Pickers': [ColorPickerLight, ColorPickerDark],
   'Creating a pointer-friendly submenu experience': [MenuLight, MenuDark],
   'Introducing React Spectrum': [AdobeLight, AdobeDark],
   // Internationalized
   'Internationalized Date': [DateRangePickerLight, DateRangePickerDark],
-  'Calendar': [CalendarLight, CalendarDark],
+  'Calendar Interface': [CalendarLight, CalendarDark],
   'CalendarDate': [CalendarLight, CalendarDark],
   'CalendarDateTime': [DateFieldLight, DateFieldDark],
   'Time': [TimeFieldLight, TimeFieldDark],
@@ -349,9 +351,42 @@ const componentIllustrations: Record<string, [string, string] | undefined> = {
   'DateFormatter': [DatePickerLight, DatePickerDark],
   'Internationalized Number': [NumberFieldLight, NumberFieldDark],
   'NumberFormatter': [NumberFieldLight, NumberFieldDark],
-  'NumberParser': [NumberFieldLight, NumberFieldDark]
+  'NumberParser': [NumberFieldLight, NumberFieldDark],
+  // Examples
+  'Emoji Picker': exampleImages['emoji-picker'],
+  'Filterable CRUD Table': exampleImages['crud'],
+  'Gesture Driven Sheet': exampleImages['sheet'],
+  'iOS List View': exampleImages['ios-list'],
+  'Kanban Board': exampleImages['kanban'],
+  'Photo Library': exampleImages['photos'],
+  'Ripple Button': exampleImages['ripple-button'],
+  'Swipeable Tabs': exampleImages['swipeable-tabs']
 };
 
+function preloadImage(light: string, dark: string) {
+  preload(light, {
+    as: 'image',
+    media: '(prefers-color-scheme: light)'
+  });
+
+  preload(dark, {
+    as: 'image',
+    media: '(prefers-color-scheme: dark)'
+  });
+}
+
+export function preloadComponentImages(names: string[]) {
+  for (let key of names) {
+    let v = componentIllustrations[key];
+    if (v) {
+      let [light, dark] = v;
+      preloadImage(light, dark);
+    } else if (/^v\d/.test(key)) {
+      preloadImage(BackgroundLight, BackgroundDark);
+    }
+  }
+}
+
 const illustrationContainer = style({
   width: 'full',
   aspectRatio: '8/5',
diff --git a/packages/dev/s2-docs/src/ExampleList.tsx b/packages/dev/s2-docs/src/ExampleList.tsx
index 821fe699d2a..49369fb931e 100644
--- a/packages/dev/s2-docs/src/ExampleList.tsx
+++ b/packages/dev/s2-docs/src/ExampleList.tsx
@@ -1,29 +1,31 @@
 import {Card, CardPreview, Content, Image, ImageCoordinator, Text} from '@react-spectrum/s2';
-import crud from 'url:../pages/react-aria/examples/crud.png';
-import crudDark from 'url:../pages/react-aria/examples/crud-dark.png';
-import emojiPicker from 'url:../pages/react-aria/examples/emoji-picker.png';
-import emojiPickerDark from 'url:../pages/react-aria/examples/emoji-picker-dark.png';
-import iosList from 'url:react-aria-components/docs/examples/ios-list.png';
-import iosListDark from 'url:../pages/react-aria/examples/ios-list-dark.png';
-import kanban from 'url:../pages/react-aria/examples/kanban.png';
-import kanbanDark from 'url:../pages/react-aria/examples/kanban-dark.png';
+import crud from 'url:../pages/react-aria/examples/crud.png?as=avif&quality=50';
+import crudDark from 'url:../pages/react-aria/examples/crud-dark.png?as=avif&quality=50';
+import emojiPicker from 'url:../pages/react-aria/examples/emoji-picker.png?as=avif&quality=50';
+import emojiPickerDark from 'url:../pages/react-aria/examples/emoji-picker-dark.png?as=avif&quality=50';
+// eslint-disable-next-line
+import iosList from 'url:/packages/react-aria-components/docs/examples/ios-list.png?as=avif&quality=50';
+import iosListDark from 'url:../pages/react-aria/examples/ios-list-dark.png?as=avif&quality=50';
+import kanban from 'url:../pages/react-aria/examples/kanban.png?as=avif&quality=50';
+import kanbanDark from 'url:../pages/react-aria/examples/kanban-dark.png?as=avif&quality=50';
 import path from 'path';
-import photos from 'url:../pages/react-aria/examples/photos.png';
-import photosDark from 'url:../pages/react-aria/examples/photos-dark.png';
-import rippleButton from 'url:react-aria-components/docs/examples/ripple-button.png';
-import sheet from 'url:../pages/react-aria/examples/sheet.png';
-import sheetDark from 'url:../pages/react-aria/examples/sheet-dark.png';
+import photos from 'url:../pages/react-aria/examples/photos.png?as=avif&quality=50';
+import photosDark from 'url:../pages/react-aria/examples/photos-dark.png?as=avif&quality=50';
+// eslint-disable-next-line
+import rippleButton from 'url:/packages/react-aria-components/docs/examples/ripple-button.png?as=avif&quality=50';
+import sheet from 'url:../pages/react-aria/examples/sheet.png?as=avif&quality=50';
+import sheetDark from 'url:../pages/react-aria/examples/sheet-dark.png?as=avif&quality=50';
 import {size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
-import swipeableTabs from 'url:../pages/react-aria/examples//swipeable-tabs.png';
-import swipeableTabsDark from 'url:../pages/react-aria/examples//swipeable-tabs-dark.png';
+import swipeableTabs from 'url:../pages/react-aria/examples//swipeable-tabs.png?as=avif&quality=50';
+import swipeableTabsDark from 'url:../pages/react-aria/examples//swipeable-tabs-dark.png?as=avif&quality=50';
 
-const images = {
+export const images: Record<string, [string, string]> = {
   'ios-list': [iosList, iosListDark],
   'emoji-picker': [emojiPicker, emojiPickerDark],
   'kanban': [kanban, kanbanDark],
   'photos': [photos, photosDark],
   'crud': [crud, crudDark],
-  'ripple-button': rippleButton,
+  'ripple-button': [rippleButton, rippleButton],
   'sheet': [sheet, sheetDark],
   'swipeable-tabs': [swipeableTabs, swipeableTabsDark]
 };
diff --git a/packages/dev/s2-docs/src/Header.tsx b/packages/dev/s2-docs/src/Header.tsx
index e5bbe425027..a0db85bfa0c 100644
--- a/packages/dev/s2-docs/src/Header.tsx
+++ b/packages/dev/s2-docs/src/Header.tsx
@@ -4,10 +4,12 @@ import {baseColor, focusRing, space, style} from '@react-spectrum/s2/style' with
 import {getBaseUrl} from './pageUtils';
 import {getLibraryFromPage, getLibraryIcon, getLibraryLabel} from './library';
 import GithubLogo from './icons/GithubLogo';
-import {Link} from 'react-aria-components';
+import {HeaderLink} from './Link';
 // @ts-ignore
+import {Link} from 'react-aria-components';
+import {NpmLogo} from './icons/NpmLogo';
 import {pressScale} from '@react-spectrum/s2';
-import React, {CSSProperties, useId, useRef, useState} from 'react';
+import React, {useId, useRef, useState} from 'react';
 import SearchMenuTrigger, {preloadSearchMenu} from './SearchMenuTrigger';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useRouter} from './Router';
@@ -24,6 +26,11 @@ const libraryStyles = style({
   ...focusRing(),
   paddingX: 12, 
   display: 'flex',
+  alignItems: 'center',
+  columnGap: {
+    default: 12,
+    lg: space(10)
+  },
   textDecoration: 'none',
   minHeight: 48,
   borderRadius: 'lg',
@@ -37,41 +44,14 @@ const libraryStyles = style({
   marginStart: space(26)
 });
 
-const linkStyle = {
-  ...focusRing(),
-  font: 'ui',
-  textDecoration: 'none',
-  transition: 'default',
-  backgroundColor: {
-    default: {
-      ...baseColor('gray-100'),
-      default: 'transparent'
-    }
-  },
-  height: 32,
-  paddingX: 'edge-to-text',
-  display: 'flex',
-  alignItems: 'center',
-  borderRadius: 'lg'
-} as const;
-
-const linkStyles = style({
-  ...linkStyle
-});
-
-const iconStyles = style({
-  ...linkStyle,
-  paddingX: space(6)
-});
-
 export default function Header() {
   const {currentPage} = useRouter();
   const [searchOpen, setSearchOpen] = useState(false);
   const searchMenuId = useId();
   let ref = useRef(null);
-  let docsRef = useRef(null);
-  let releasesRef = useRef(null);
-  let blogRef = useRef(null);
+  let iconRef = useRef<HTMLDivElement | null>(null);
+  let labelRef = useRef<HTMLDivElement | null>(null);
+  let searchRef = useRef<HTMLDivElement | null>(null);
   let renderCallback = useRef<(() => void) | null>(null);
 
   let openSearchMenu = async () => {
@@ -85,9 +65,15 @@ export default function Header() {
 
     // Don't transition the entire page.
     document.documentElement.style.viewTransitionName = 'none';
+    iconRef.current!.style.viewTransitionName = 'search-menu-icon';
+    labelRef.current!.style.viewTransitionName = 'search-menu-label';
+    searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
     let viewTransition = document.startViewTransition(() => {
       // Wait until next render. Using flushSync causes flickering.
       return new Promise<void>(resolve => {
+        iconRef.current!.style.viewTransitionName = '';
+        labelRef.current!.style.viewTransitionName = '';
+        searchRef.current!.style.viewTransitionName = '';
         renderCallback.current = resolve;
         setSearchOpen((prev) => !prev);
       });
@@ -109,11 +95,17 @@ export default function Header() {
       return new Promise<void>(resolve => {
         renderCallback.current = resolve;
         setSearchOpen(false);
+        iconRef.current!.style.viewTransitionName = 'search-menu-icon';
+        labelRef.current!.style.viewTransitionName = 'search-menu-label';
+        searchRef.current!.style.viewTransitionName = 'search-menu-search-field';
       });
     });
 
     viewTransition.finished.then(() => {
       document.documentElement.style.viewTransitionName = '';
+      iconRef.current!.style.viewTransitionName = '';
+      labelRef.current!.style.viewTransitionName = '';
+      searchRef.current!.style.viewTransitionName = '';
     });
   };
 
@@ -124,7 +116,7 @@ export default function Header() {
 
   let library = getLibraryFromPage(currentPage);
   let subdirectory: 's2' | 'react-aria' = 's2';
-  if (library === 'internationalized' || library === 'react-aria') {
+  if (library === 'react-aria') {
     // the internationalized library has no homepage so i've chosen to route it to the react aria homepage
     subdirectory = 'react-aria';
   }
@@ -134,6 +126,7 @@ export default function Header() {
   let docs = `${baseUrl}/getting-started`;
   let release = `${baseUrl}/releases/`;
   let blog = `${getBaseUrl('react-aria')}/blog/`;
+  let npm = subdirectory === 's2' ? '@react-spectrum/s2' : 'react-aria-components';
 
   return (
     <>
@@ -152,26 +145,27 @@ export default function Header() {
               ref={ref}
               style={pressScale(ref, {visibility: searchOpen ? 'hidden' : 'visible'})}
               className={renderProps => libraryStyles({...renderProps})}>
-              <div className={style({display: 'flex', alignItems: 'center'})}>
-                <div className={style({marginTop: 4})} style={{viewTransitionName: !searchOpen ? 'search-menu-icon' : 'none'} as CSSProperties}>
-                  {getButtonIcon(currentPage)}
-                </div>
-                <span className={style({font: 'ui-2xl', marginStart: 8})} style={{viewTransitionName: !searchOpen ? 'search-menu-label' : 'none'} as CSSProperties}>
-                  {getButtonText(currentPage)}
-                </span>
+              <div ref={iconRef}>
+                {getButtonIcon(currentPage)}
               </div>
+              <span className={style({font: 'heading-sm', fontWeight: 'extra-bold'})} ref={labelRef}>
+                {getButtonText(currentPage)}
+              </span>
             </Link>
           </div>
-          <SearchMenuTrigger
-            onOpen={openSearchMenu}
-            onClose={closeSearchMenu}
-            isSearchOpen={searchOpen}
-            overlayId={searchMenuId} />
+          <div ref={searchRef}>
+            <SearchMenuTrigger
+              onOpen={openSearchMenu}
+              onClose={closeSearchMenu}
+              isSearchOpen={searchOpen}
+              overlayId={searchMenuId} />
+          </div>
           <div className={style({display: 'flex', alignItems: 'center', gap: 4, justifySelf: 'end'})}>
-            <Link className={renderProps => linkStyles({...renderProps})} href={docs} ref={docsRef} style={pressScale(docsRef)} >Docs</Link>
-            <Link className={renderProps => linkStyles({...renderProps})} href={release} ref={releasesRef} style={pressScale(releasesRef)} >Releases</Link>
-            <Link className={renderProps => linkStyles({...renderProps})} href={blog} target={subdirectory === 's2' ? '_blank' : ''} rel="noopener noreferrer" ref={blogRef} style={pressScale(blogRef)} >Blog</Link>
-            <Link aria-label="React Spectrum GitHub repo" className={renderProps => iconStyles({...renderProps})} href="https://github.com/adobe/react-spectrum" target="_blank" rel="noopener noreferrer" ><GithubLogo /></Link>
+            <HeaderLink href={docs}>Docs</HeaderLink>
+            <HeaderLink href={release}>Releases</HeaderLink>
+            <HeaderLink href={blog} target={subdirectory === 's2' ? '_blank' : ''} rel="noopener noreferrer">Blog</HeaderLink>
+            <HeaderLink aria-label="GitHub" href="https://github.com/adobe/react-spectrum" target="_blank" rel="noopener noreferrer" ><GithubLogo /></HeaderLink>
+            <HeaderLink aria-label="npm" href={`https://npmjs.com/${npm}`} target="_blank" rel="noopener noreferrer"><NpmLogo /></HeaderLink>
           </div>
         </div>
       </header>
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index b31cc5d36d7..e5006e3659b 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -5,11 +5,9 @@ import type {Page, PageProps} from '@parcel/rsc';
 import React, {ReactElement, ReactNode} from 'react';
 import '../src/client';
 // @ts-ignore
-import internationalizedFavicon from 'url:../assets/internationalized.ico';
+import reactAriaFavicon from 'url:../assets/react-aria-favicon.svg';
 // @ts-ignore
-import reactAriaFavicon from 'url:../assets/react-aria.ico';
-// @ts-ignore
-import rspFavicon from 'url:../assets/favicon.ico';
+import rspFavicon from 'url:../assets/rsp-favicon.svg';
 import './anatomy.css';
 import './footer.css';
 import {ClassAPI} from './ClassAPI';
@@ -77,11 +75,12 @@ const getTitle = (currentPage: Page): string => {
 
 const getOgImageUrl = (currentPage: Page): string => {
   let currentURL = new URL(currentPage.url);
+  let publicUrl = process.env.PUBLIC_URL || '';
   let path = currentURL.pathname || '/';
   if (path.endsWith('/')) {
     path += 'index';
   }
-  return new URL(`/og${path}.png`, currentURL).href;
+  return new URL(`${publicUrl}/og${path}.png`, currentURL).href;
 };
 
 const getDescription = (currentPage: Page): string => {
@@ -102,8 +101,6 @@ const getFaviconUrl = (currentPage: Page): string => {
   switch (library) {
     case 'react-aria':
       return reactAriaFavicon;
-    case 'internationalized':
-      return internationalizedFavicon;
     default:
       return rspFavicon;
   }
diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
index e54e58194f7..17e606cef11 100644
--- a/packages/dev/s2-docs/src/Link.tsx
+++ b/packages/dev/s2-docs/src/Link.tsx
@@ -1,14 +1,15 @@
 'use client';
 
-import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {baseColor, focusRing, space, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {getBaseUrl} from './pageUtils';
-import {LinkProps, Link as S2Link} from '@react-spectrum/s2';
+import {LinkButtonProps, LinkProps, pressScale, Link as S2Link, LinkButton as S2LinkButton} from '@react-spectrum/s2';
 import {mergeRefs} from '@react-aria/utils';
+import {mergeStyles} from '../../../@react-spectrum/s2/style/runtime';
 import {Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
-import React, {Ref, useMemo} from 'react';
+import React, {Ref, useMemo, useRef} from 'react';
 import {registerLink, registerSpectrumLink} from './prefetch';
 
-export function BaseLink({ref, ...props}: LinkProps & {ref?: Ref<HTMLAnchorElement>}) {
+export function BaseLink({ref, ...props}: RACLinkProps & {ref?: Ref<HTMLAnchorElement>}) {
   return (
     <RACLink
       {...props}
@@ -27,6 +28,17 @@ export function Link({href, ...props}: LinkProps) {
   );
 }
 
+export function LinkButton({href, ...props}: LinkButtonProps) {
+  if (href?.startsWith('s2:') || href?.startsWith('react-aria:')) {
+    let url = new URL(href);
+    href = getBaseUrl(url.protocol.slice(0, -1) as any) + '/' + url.pathname;
+  }
+
+  return (
+    <S2LinkButton {...props} ref={registerSpectrumLink} href={href} {...getAnchorProps(href)} />
+  );
+}
+
 const baseUrl = getBaseUrl((process.env.LIBRARY as any) || 'react-aria');
 export function getAnchorProps(href) {
   if (!/^http/.test(href) || href.startsWith(baseUrl)) {
@@ -74,3 +86,60 @@ const titleLink = style({
 export function TitleLink(props: RACLinkProps) {
   return <RACLink {...props} className={titleLink} />;
 }
+
+const linkStyle = style({
+  ...focusRing(),
+  outlineColor: {
+    default: 'focus-ring',
+    staticColor: {
+      auto: 'transparent-overlay-1000',
+      white: 'white'
+    }
+  },
+  font: 'ui',
+  color: {
+    default: 'neutral',
+    staticColor: {
+      auto: 'transparent-overlay-800',
+      white: 'white'
+    }
+  },
+  textDecoration: 'none',
+  transition: 'default',
+  backgroundColor: {
+    default: {
+      ...baseColor('gray-100'),
+      default: 'transparent'
+    },
+    staticColor: {
+      auto: {
+        ...baseColor('transparent-overlay-100'),
+        default: 'transparent'
+      },
+      white: {
+        ...baseColor('transparent-white-100'),
+        default: 'transparent'
+      }
+    }
+  },
+  height: 32,
+  paddingX: {
+    default: 'edge-to-text',
+    ':has(svg:only-child)': space(6)
+  },
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: 'lg'
+});
+
+export function HeaderLink(props: RACLinkProps & {staticColor?: 'auto' | 'white', styles?: StyleString}) {
+  let {staticColor, styles, ...otherProps} = props;
+  let ref = useRef(null);
+  return (
+    <BaseLink
+      {...otherProps}
+      ref={ref}
+      className={renderProps => mergeStyles(linkStyle({...renderProps, staticColor}), styles)}
+      style={pressScale(ref)} />
+  );
+}
diff --git a/packages/dev/s2-docs/src/MarkdownMenu.tsx b/packages/dev/s2-docs/src/MarkdownMenu.tsx
index a902c7955a5..41660e3020b 100644
--- a/packages/dev/s2-docs/src/MarkdownMenu.tsx
+++ b/packages/dev/s2-docs/src/MarkdownMenu.tsx
@@ -9,10 +9,11 @@ import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 interface MarkdownMenuProps {
+  name: string,
   url: string | undefined
 }
 
-export function MarkdownMenu({url}: MarkdownMenuProps) {
+export function MarkdownMenu({name, url}: MarkdownMenuProps) {
   let mdUrl = (url ?? '').replace(/\.html?$/i, '') + '.md';
   let [isCopied, setIsCopied] = useState(false);
   let [isPending, setPending] = useState(false);
@@ -20,7 +21,7 @@ export function MarkdownMenu({url}: MarkdownMenuProps) {
   
   let pageUrl = typeof window !== 'undefined' && url ? new URL(url, window.location.origin).href : url ?? '';
   let fullMdUrl = typeof window !== 'undefined' && mdUrl ? new URL(mdUrl, window.location.origin).href : mdUrl;
-  let library = url ? getLibraryLabel(getLibraryFromUrl(url)) : '';
+  let library = url ? getLibraryLabel(getLibraryFromUrl(name)) : '';
   let aiPrompt = `Answer questions about the following ${library} documentation page: ${pageUrl}\nMarkdown source: ${fullMdUrl}`;
   let chatGptUrl = `https://chatgpt.com/?q=${encodeURIComponent(aiPrompt)}`;
   let claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(aiPrompt)}`;
diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index e11a12d2914..f5b47de7230 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/packages/dev/s2-docs/src/MobileHeader.tsx
@@ -3,7 +3,7 @@
 import {ActionButton, DialogTrigger, pressScale} from '@react-spectrum/s2';
 import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {getBaseUrl} from './pageUtils';
-import {getLibraryFromPage} from './library';
+import {getLibraryFromPage, getLibraryIcon} from './library';
 import {keyframes} from '../../../@react-spectrum/s2/style/style-macro' with {type: 'macro'};
 import {Link, Modal, ModalOverlay} from 'react-aria-components';
 import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger';
@@ -90,9 +90,9 @@ export function MobileHeader({toc}) {
 
   let {currentPage} = useRouter();
   let library = getLibraryFromPage(currentPage);
-  let icon = TAB_DEFS[library].icon;
+  let icon = getLibraryIcon(library);
   let subdirectory: 's2' | 'react-aria' = 's2';
-  if (library === 'internationalized' || library === 'react-aria') {
+  if (library === 'react-aria') {
     // the internationalized library has no homepage so i've chosen to route it to the react aria homepage
     subdirectory = 'react-aria';
   }
@@ -122,8 +122,8 @@ export function MobileHeader({toc}) {
     }
 
     let viewTransition = document.startViewTransition(() => {
-      if (labelRef.current) {
-        labelRef.current.style.viewTransitionName = '';
+      if (labelRef.current && window.scrollY === 0) {
+        labelRef.current.style.viewTransitionName = !isOpen ? 'search-menu-label' : '';
       }
 
       // Wait until next render. Using flushSync causes flickering.
@@ -139,6 +139,7 @@ export function MobileHeader({toc}) {
 
     viewTransition.finished.then(() => {
       document.documentElement.style.viewTransitionName = '';
+      labelRef.current!.style.viewTransitionName = '';
       setTransitioning(false);
     });
   };
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 576e8fd0062..ac95c20f36b 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -12,7 +12,7 @@ import {
 } from './searchUtils';
 import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
 import {type Library} from './constants';
-import React, {CSSProperties, ReactNode, Suspense, useContext, useEffect, useRef, useState} from 'react';
+import React, {cloneElement, CSSProperties, ReactElement, ReactNode, Suspense, useContext, useEffect, useRef, useState} from 'react';
 import {SearchTagGroups} from './SearchTagGroups';
 import {useId} from '@react-aria/utils';
 import {useRouter} from './Router';
@@ -90,7 +90,7 @@ const mobileTab = style<TabRenderProps>({
     }
   },
   borderRadius: 'sm',
-  paddingX: 12,
+  paddingX: 8,
   paddingY: 8,
   alignItems: 'center',
   position: 'relative',
@@ -100,10 +100,7 @@ const mobileTab = style<TabRenderProps>({
   disableTapHighlight: true,
   whiteSpace: 'nowrap',
   fontSize: 'body',
-  fontWeight: {
-    default: 'normal',
-    isSelected: 'medium'
-  }
+  fontWeight: 'bold'
 });
 
 const mobileSelectionIndicator = style({
@@ -293,7 +290,7 @@ function MobileNav({initialTag}: {initialTag?: string}) {
                   <div
                     className={style({display: 'flex', alignItems: 'center', gap: 8})}
                     style={{viewTransitionName: (i === 0 && isOpen) ? 'search-menu-icon' : 'none'} as CSSProperties}>
-                    {library.icon}
+                    {cloneElement(library.icon as ReactElement<any>, {styles: style({size: 20})})}
                   </div>
                   <span style={{viewTransitionName: (i === 0 && isOpen && window.scrollY === 0) ? 'search-menu-label' : 'none'} as CSSProperties}>
                     {library.label}
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index 780f6ec37ff..eaa6002bbaf 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -34,7 +34,7 @@ export function Nav() {
 
     let library = getLibraryFromPage(page);
 
-    if ((currentLibrary === 'internationalized' || currentLibrary === 'react-spectrum') && library !== currentLibrary) {
+    if (currentLibrary === 'react-spectrum' && library !== currentLibrary) {
       continue;
     }
 
@@ -49,7 +49,7 @@ export function Nav() {
       continue;
     }
 
-    if (group && section && currentLibrary !== 'internationalized') {
+    if (group && section) {
       let value = sections.get(group);
       let groupMap: Map<string, Page[]>;
       if (value instanceof Map) {
@@ -79,14 +79,6 @@ export function Nav() {
       return 1;
     }
 
-    if (a[0] === 'Guides') {
-      return 1;
-    }
-
-    if (b[0] === 'Guides') {
-      return -1;
-    }
-
     return a[0].localeCompare(b[0]);
   });
 
@@ -165,15 +157,15 @@ export function Nav() {
           );
         }
 
-        if ((name === 'Overview' && Array.isArray(pages)) || (currentLibrary === 'internationalized' && Array.isArray(pages))) {
+        if (name === 'Overview' && Array.isArray(pages)) {
           return (
             <div className={style({paddingStart: space(26)})} key={name}>
               <SideNavSection title={name}>
                 <SideNav>
                   {pages
                     .sort((a, b) => {
-                      const aIntro = isIntroduction(a);
-                      const bIntro = isIntroduction(b);
+                      const aIntro = a.url.endsWith('getting-started');
+                      const bIntro = b.url.endsWith('getting-started');
                       if (aIntro && !bIntro) {
                         return -1;
                       }
@@ -214,12 +206,7 @@ function title(page) {
 }
 
 function isIntroduction(page) {
-  let navTitle = page.exports?.navigationTitle;
-  if (typeof navTitle === 'string' && /introduction|home/i.test(navTitle)) {
-    return true;
-  }
-  let t = title(page);
-  return typeof t === 'string' && /introduction|home/i.test(t);
+  return page.url.endsWith('/');
 }
 
 function SideNavSection({title, children}) {
diff --git a/packages/dev/s2-docs/src/OptimisticToc.tsx b/packages/dev/s2-docs/src/OptimisticToc.tsx
index ded3c2f0c29..ff9b89e37c8 100644
--- a/packages/dev/s2-docs/src/OptimisticToc.tsx
+++ b/packages/dev/s2-docs/src/OptimisticToc.tsx
@@ -77,7 +77,7 @@ export function OptimisticToc() {
       </ScrollableToc>
       <div className={style({flexShrink: 0})}>
         <Divider size="S" styles={style({marginY: 12})} />
-        <MarkdownMenu url={currentPage.url} />
+        <MarkdownMenu name={currentPage.name} url={currentPage.url} />
       </div>
     </aside>
   );
diff --git a/packages/dev/s2-docs/src/SearchMenu.css b/packages/dev/s2-docs/src/SearchMenu.css
index 70935bdc00d..ee19b71adc2 100644
--- a/packages/dev/s2-docs/src/SearchMenu.css
+++ b/packages/dev/s2-docs/src/SearchMenu.css
@@ -2,8 +2,12 @@
   z-index: 0;
 }
 
+::view-transition-group(search-menu) {
+  z-index: 1;
+}
+
 ::view-transition-group(search-menu-icon),
 ::view-transition-group(search-menu-label),
 ::view-transition-group(search-menu-search-field) {
-  z-index: 1;
+  z-index: 2;
 }
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 449cb718f11..f8390175028 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -19,6 +19,7 @@ import {Tab, TabList, TabPanel, Tabs} from './Tabs';
 import {TextFieldRef} from '@react-types/textfield';
 import {useRouter} from './Router';
 import './SearchMenu.css';
+import {preloadComponentImages} from './ComponentCard';
 
 export const divider = style({
   marginY: 8,
@@ -77,7 +78,8 @@ export function SearchMenu(props: SearchMenuProps) {
     isIconsSelected,
     selectedItems,
     selectedSectionName,
-    getPlaceholderText
+    getPlaceholderText,
+    sections
   } = useSearchMenuState({
     pages,
     currentPage,
@@ -135,14 +137,14 @@ export function SearchMenu(props: SearchMenuProps) {
           {orderedTabs.map((tab, i) => (
             <Tab key={tab.id} id={tab.id}>
               <div className={style({display: 'flex', gap: 12, marginTop: 4})}>
-                <div style={{viewTransitionName: (i === 0 && isSearchOpen) ? 'search-menu-icon' : 'none'} as CSSProperties}>
+                <div className={style({width: 26, flexShrink: 0, display: 'flex', justifyContent: 'center'})} style={{viewTransitionName: (i === 0 && isSearchOpen && window.scrollY === 0) ? 'search-menu-icon' : undefined} as CSSProperties}>
                   {tab.icon}
                 </div>
                 <div>
-                  <span style={{viewTransitionName: (i === 0 && isSearchOpen) ? 'search-menu-label' : 'none'} as CSSProperties} className={style({font: 'ui-2xl'})}>
+                  <span style={{viewTransitionName: (i === 0 && isSearchOpen && window.scrollY === 0) ? 'search-menu-label' : undefined} as CSSProperties} className={style({font: 'heading-sm', fontWeight: 'bold'})}>
                     {tab.label}
                   </span>
-                  <div className={style({fontSize: 'ui-sm'})}>{tab.description}</div>
+                  <div className={style({fontSize: 'ui', marginTop: 2})}>{tab.description}</div>
                 </div>
               </div>
             </Tab>
@@ -163,7 +165,7 @@ export function SearchMenu(props: SearchMenuProps) {
                       size="L"
                       aria-label={`Search ${tab.label}`}
                       placeholder={placeholderText}
-                      UNSAFE_style={{marginInlineEnd: 296, viewTransitionName: (i === 0 && isSearchOpen) ? 'search-menu-search-field' : 'none'} as CSSProperties}
+                      UNSAFE_style={{marginInlineEnd: 296, viewTransitionName: (i === 0 && isSearchOpen && window.scrollY === 0) ? 'search-menu-search-field' : undefined} as CSSProperties}
                       styles={style({width: 500})} />
                   </div>
 
@@ -174,7 +176,10 @@ export function SearchMenu(props: SearchMenuProps) {
                     resourceTags={tabResourceTags}
                     selectedTagId={selectedTagId}
                     onSectionSelectionChange={handleTagSelectionChange}
-                    onResourceSelectionChange={handleTagSelectionChange} />
+                    onResourceSelectionChange={handleTagSelectionChange}
+                    onHover={tag => {
+                      preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []);
+                    }} />
                   {isIconsSelected ? (
                     <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
                       <Suspense fallback={<IconSearchSkeleton />}>
diff --git a/packages/dev/s2-docs/src/SearchMenuTrigger.tsx b/packages/dev/s2-docs/src/SearchMenuTrigger.tsx
index baab07aeb55..5b79c16b0d4 100644
--- a/packages/dev/s2-docs/src/SearchMenuTrigger.tsx
+++ b/packages/dev/s2-docs/src/SearchMenuTrigger.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import {Button, ButtonProps, Modal, ModalOverlay} from 'react-aria-components';
-import {fontRelative, style} from '@react-spectrum/s2/style' with { type: 'macro' };
+import {fontRelative, lightDark, style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {getLibraryFromPage, getLibraryLabel} from './library';
-import React, {CSSProperties, lazy, useCallback, useEffect, useRef, useState} from 'react';
+import React, {lazy, useCallback, useEffect, useRef, useState} from 'react';
+import {Button as S2Button, ButtonProps as S2ButtonProps} from '@react-spectrum/s2';
 import Search from '@react-spectrum/s2/icons/Search';
 import {useRouter} from './Router';
 
@@ -20,21 +21,19 @@ export interface SearchMenuTriggerProps extends Omit<ButtonProps, 'children' | '
   onOpen: () => void,
   onClose: () => void,
   isSearchOpen: boolean,
-  overlayId: string
+  overlayId: string,
+  staticColor?: 'auto' | 'white'
 }
 
 let underlayStyle = style({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: 'full',
-  height: '--page-height',
+  position: 'fixed',
+  inset: 0,
   isolation: 'isolate',
   backgroundColor: 'transparent-black-500'
 });
 
 let modalStyle = style({
-  position: 'absolute',
+  position: 'fixed',
   top: 8,
   width: 'full',
   // 1280px matches body
@@ -43,9 +42,9 @@ let modalStyle = style({
   paddingX: 16,
   paddingY: 8,
   zIndex: 10,
-  borderWidth: 1,
-  borderColor: 'gray-300',
-  borderStyle: 'solid',
+  outlineWidth: 1,
+  outlineColor: lightDark('transparent-white-25', 'transparent-white-100'),
+  outlineStyle: 'solid',
   borderRadius: 'xl',
   boxShadow: 'elevated',
   left: 0,
@@ -54,7 +53,7 @@ let modalStyle = style({
   height: '[90vh]'
 });
 
-export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overlayId, ...props}: SearchMenuTriggerProps) {
+export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overlayId, staticColor, ...props}: SearchMenuTriggerProps) {
   let {currentPage} = useRouter();
   let [initialSearchValue, setInitialSearchValue] = useState('');
   let open = useCallback((value: string) => {
@@ -62,6 +61,9 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
     onOpen();
   }, [onOpen]);
 
+  useEffect(() => {
+    preloadSearchMenu();
+  }, []);
 
   // Type to search handler
   let onKeyDown = useCallback((e: React.KeyboardEvent<HTMLButtonElement>) => {
@@ -105,8 +107,16 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
       }
     };
 
+    let handleCustomEvent = () => {
+      open('');
+    };
+
     document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
+    window.addEventListener('show-search-menu', handleCustomEvent);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('show-search-menu', handleCustomEvent);
+    };
   }, [isSearchOpen, onClose, open]);
 
   let [wasOpen, setWasOpen] = useState(isSearchOpen);
@@ -126,13 +136,7 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
   }, [isSearchOpen]);
     
   return (
-    <div
-      className={style({
-        display: 'grid',
-        gridTemplateColumns: 'auto 1fr',
-        alignItems: 'center',
-        gap: 16
-      })}>
+    <>
       <Button
         {...props}
         ref={buttonRef}
@@ -155,10 +159,34 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
           borderColor: {
             default: 'gray-300',
             isHovered: 'gray-400',
-            isFocusVisible: 'gray-900'
+            isFocusVisible: 'gray-900',
+            staticColor: {
+              auto: {
+                default: lightDark('transparent-black-200', 'transparent-white-300'),
+                isHovered: lightDark('transparent-black-300', 'transparent-white-400'),
+                isFocusVisible: lightDark('transparent-black-900', 'transparent-white-900')
+              },
+              white: {
+                default: 'transparent-white-300',
+                isHovered: 'transparent-white-400',
+                isFocusVisible: 'transparent-white-900'
+              }
+            }
+          },
+          backgroundColor: {
+            default: 'gray-25',
+            staticColor: {
+              auto: 'transparent-white-50',
+              white: 'transparent-white-50'
+            }
+          },
+          color: {
+            default: 'neutral-subdued',
+            staticColor: {
+              auto: lightDark('transparent-black-600', 'transparent-white-800'),
+              white: 'transparent-white-800'
+            }
           },
-          backgroundColor: 'gray-25',
-          color: 'neutral-subdued',
           cursor: 'text',
           width: '[500px]',
           display: 'flex',
@@ -177,29 +205,48 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
             default: 0,
             isFocusVisible: 2
           }
-        })({isHovered, isFocusVisible})}
-        style={{viewTransitionName: !isSearchOpen ? 'search-menu-search-field' : 'none', visibility: isSearchOpen ? 'hidden' : 'visible'} as CSSProperties}>
+        })({isHovered, isFocusVisible, staticColor})}
+        style={{visibility: isSearchOpen ? 'hidden' : 'visible', backdropFilter: 'blur(8px)'}}>
         <Search
           UNSAFE_className={String(style({
             size: fontRelative(20),
             '--iconPrimary': {type: 'fill', value: 'currentColor'},
             flexShrink: 0
           }))} />
-        <span className={style({font: 'ui-lg', color: 'gray-600'})}>Search {getLibraryLabel(getLibraryFromPage(currentPage))}</span>
+        <span className={style({font: 'ui-lg', color: {default: 'gray-600', staticColor: {auto: lightDark('transparent-black-600', 'transparent-white-800'), white: 'transparent-white-800'}}})({staticColor})}>Search {getLibraryLabel(getLibraryFromPage(currentPage))}</span>
         <kbd
           className={style({
             marginStart: 'auto',
             font: 'detail',
-            backgroundColor: 'layer-1',
+            color: {
+              default: 'detail',
+              staticColor: {
+                auto: lightDark('transparent-black-600', 'transparent-white-800'),
+                white: 'transparent-white-800'
+              }
+            },
+            backgroundColor: {
+              default: 'layer-1',
+              staticColor: {
+                auto: lightDark('transparent-black-50', 'transparent-white-50'),
+                white: 'transparent-white-50'
+              }
+            },
             paddingY: 2,
             paddingX: 8,
             borderRadius: 'xl',
             borderWidth: 1,
-            borderColor: 'gray-300',
+            borderColor: {
+              default: 'gray-300',
+              staticColor: {
+                auto: lightDark('transparent-black-200', 'transparent-white-300'),
+                white: 'transparent-white-300'
+              }
+            },
             borderStyle: 'solid',
             pointerEvents: 'none',
             alignSelf: 'center'
-          })}>⌘K</kbd>
+          })({staticColor})}>⌘K</kbd>
       </Button>
       <ModalOverlay
         isDismissable
@@ -213,7 +260,12 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
           // @ts-ignore
           viewTransitionName: 'search-menu-underlay'
         }}>
-        <Modal className={modalStyle}>
+        <Modal
+          className={modalStyle}
+          style={{
+            // @ts-ignore
+            viewTransitionName: 'search-menu'
+          }}>
           <SearchMenu
             onClose={onClose}
             overlayId={overlayId}
@@ -221,6 +273,25 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
             isSearchOpen={isSearchOpen} />
         </Modal>
       </ModalOverlay>
-    </div>
+    </>
+  );
+}
+
+export function SearchMenuButton(props: S2ButtonProps) {
+  let onPress = () => {
+    window.dispatchEvent(new CustomEvent('show-search-menu'));
+  };
+
+  return (
+    <S2Button
+      size="XL"
+      staticColor="white"
+      variant="secondary"
+      {...props}
+      onPress={onPress}
+      // @ts-ignore
+      onHoverStart={() => preloadSearchMenu()}>
+      Explore components
+    </S2Button>
   );
 }
diff --git a/packages/dev/s2-docs/src/SearchMenuWrapper.tsx b/packages/dev/s2-docs/src/SearchMenuWrapper.tsx
index d591dc0bafd..879d3dec337 100644
--- a/packages/dev/s2-docs/src/SearchMenuWrapper.tsx
+++ b/packages/dev/s2-docs/src/SearchMenuWrapper.tsx
@@ -1,111 +1,20 @@
 'use client';
 
-import {Button, ButtonContext, ButtonProps, DialogTrigger, Modal, ModalOverlay} from 'react-aria-components';
-import {flushSync} from 'react-dom';
+import {Button, ButtonContext, ButtonProps, DialogTrigger} from 'react-aria-components';
 import {preloadSearchMenu} from './SearchMenuTrigger';
-import React, {lazy, ReactNode, useState} from 'react';
+import React, {lazy, ReactNode} from 'react';
 import {Modal as S2Modal} from '../../../@react-spectrum/s2/src/Modal';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 
-const SearchMenu = lazy(() => import('./SearchMenu').then(({SearchMenu}) => ({default: SearchMenu})));
 const MobileSearchMenu = lazy(() => import('./SearchMenu').then(({MobileSearchMenu}) => ({default: MobileSearchMenu})));
 
-let underlayStyle = style({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: 'full',
-  height: '--page-height',
-  isolation: 'isolate',
-  backgroundColor: 'transparent-black-500',
-  opacity: {
-    isEntering: 0,
-    isExiting: 0
-  },
-  transition: 'opacity',
-  transitionDuration: {
-    default: 250,
-    isExiting: 130
-  }
-});
-
-let modalStyle = style({
-  position: 'sticky',
-  top: 8,
-  width: 'full',
-  // 1280px matches body
-  maxWidth: '[min(1280px, 95vw)]',
-  backgroundColor: 'layer-1',
-  paddingX: 16,
-  paddingY: 8,
-  zIndex: 10,
-  borderWidth: 1,
-  borderColor: 'gray-300',
-  borderStyle: 'solid',
-  borderRadius: 'xl',
-  boxShadow: 'elevated',
-  left: 0,
-  right: 0,
-  margin: 'auto',
-  height: '[90vh]'
-});
-
-
 export default function SearchMenuWrapper({children}: {children: ReactNode}) {
-  const [searchOpen, setSearchOpen] = useState(false);
-
-  let openSearchMenu = async () => {
-    if (!document.startViewTransition) {
-      setSearchOpen((prev) => !prev);
-      return;
-    }
-
-    // Preload SearchMenu so it is ready to render immediately.
-    await preloadSearchMenu();
-    document.startViewTransition(() => {
-      flushSync(() => {
-        setSearchOpen((prev) => !prev);
-      });
-    });
-  };
-
-  let closeSearchMenu = () => {
-    if (!document.startViewTransition) {
-      setSearchOpen(false);
-      return;
-    }
-
-    document.startViewTransition(() => {
-      flushSync(() => {
-        setSearchOpen(false);
-      });
-    });
-  };
-
   return (
     <>
       <div className={style({display: {default: 'none', lg: 'flex'}})}>
-        <DialogTrigger isOpen={searchOpen} onOpenChange={() => {openSearchMenu();}}>
-          <ButtonContext value={{onHoverStart: () => preloadSearchMenu()}}>
-            {children}
-          </ButtonContext>
-          <ModalOverlay
-            style={{
-              zIndex: 21,
-              // @ts-ignore
-              viewTransitionName: 'search-menu-underlay'
-            }}
-            isDismissable
-            className={underlayStyle}>
-            <Modal className={modalStyle}>
-              <SearchMenu
-                onClose={closeSearchMenu}
-                initialSearchValue=""
-                initialTag="components"
-                isSearchOpen={searchOpen} />
-            </Modal>
-          </ModalOverlay>
-        </DialogTrigger>
+        <ButtonContext value={{onHoverStart: () => preloadSearchMenu(), onPress: () => window.dispatchEvent(new CustomEvent('show-search-menu'))}}>
+          {children}
+        </ButtonContext>
       </div>
       <div className={style({display: {default: 'flex', lg: 'none'}})}>
         <DialogTrigger>
diff --git a/packages/dev/s2-docs/src/SearchMenuWrapperServer.tsx b/packages/dev/s2-docs/src/SearchMenuWrapperServer.tsx
index d93cb770770..99ea2566a83 100644
--- a/packages/dev/s2-docs/src/SearchMenuWrapperServer.tsx
+++ b/packages/dev/s2-docs/src/SearchMenuWrapperServer.tsx
@@ -5,11 +5,19 @@ import {Router} from './Router';
 import SearchMenuWrapper from './SearchMenuWrapper';
 
 export default async function SearchMenuWrapperServer(props: {currentPage: Page, children: ReactNode}) {
+  return (
+    <RouterWrapperServer currentPage={props.currentPage}>
+      <SearchMenuWrapper>{props.children}</SearchMenuWrapper>
+    </RouterWrapperServer>
+  );
+}
+
+export async function RouterWrapperServer(props) {
   let pages = await getPages();
   let currentPage = getCurrentPage(props.currentPage);
   return (
     <Router pages={pages} currentPage={currentPage}>
-      <SearchMenuWrapper>{props.children}</SearchMenuWrapper>
+      {props.children}
     </Router>
   );
 }
diff --git a/packages/dev/s2-docs/src/SearchTagGroups.tsx b/packages/dev/s2-docs/src/SearchTagGroups.tsx
index 579eea84431..521d0335d1d 100644
--- a/packages/dev/s2-docs/src/SearchTagGroups.tsx
+++ b/packages/dev/s2-docs/src/SearchTagGroups.tsx
@@ -20,7 +20,8 @@ interface SearchTagGroupsProps {
   onResourceSelectionChange?: (keys: Iterable<Key>) => void,
   isMobile?: boolean,
   wrapperClassName?: string,
-  contentClassName?: string
+  contentClassName?: string,
+  onHover?: (id: Key) => void
 }
 
 export function SearchTagGroups({
@@ -31,7 +32,8 @@ export function SearchTagGroups({
   onResourceSelectionChange,
   isMobile = false,
   wrapperClassName,
-  contentClassName
+  contentClassName,
+  onHover
 }: SearchTagGroupsProps) {
   if (sectionTags.length === 0 && resourceTags.length === 0) {
     return null;
@@ -58,7 +60,7 @@ export function SearchTagGroups({
                 items={sectionTags}
                 UNSAFE_style={isMobile ? {whiteSpace: 'nowrap'} : undefined}>
                 {(tag) => (
-                  <Tag key={tag.id} id={tag.id}>
+                  <Tag key={tag.id} id={tag.id} onHoverStart={() => onHover?.(tag.id)} onPressStart={() => onHover?.(tag.id)}>
                     {tag.name}
                   </Tag>
                 )}
diff --git a/packages/dev/s2-docs/src/Video.tsx b/packages/dev/s2-docs/src/Video.tsx
new file mode 100644
index 00000000000..615151468ea
--- /dev/null
+++ b/packages/dev/s2-docs/src/Video.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import {VideoHTMLAttributes} from 'react';
+
+export function Video(props: VideoHTMLAttributes<HTMLVideoElement>) {
+  return (
+    // eslint-disable-next-line
+    <video
+      {...props}
+      tabIndex={props.autoPlay && !props.controls ? 0 : undefined}
+      onClick={(e) => {
+        if (props.autoPlay && !props.controls) {
+          e.currentTarget.paused ? e.currentTarget.play() : e.currentTarget.pause();
+        }
+      }}
+      onKeyDown={(e) => {
+        if (props.autoPlay && !props.controls && e.key === ' ') {
+          e.preventDefault();
+          e.currentTarget.paused ? e.currentTarget.play() : e.currentTarget.pause();
+        }
+      }} />
+  );
+}
diff --git a/packages/dev/s2-docs/src/constants.tsx b/packages/dev/s2-docs/src/constants.tsx
index 97b97a8b479..ab199c9e323 100644
--- a/packages/dev/s2-docs/src/constants.tsx
+++ b/packages/dev/s2-docs/src/constants.tsx
@@ -1,9 +1,8 @@
 import {AdobeLogo} from './icons/AdobeLogo';
-import {InternationalizedLogo} from './icons/InternationalizedLogo';
 import {ReactAriaLogo} from './icons/ReactAriaLogo';
 import {ReactNode} from 'react';
 
-export type Library = 'react-spectrum' | 'react-aria' | 'internationalized';
+export type Library = 'react-spectrum' | 'react-aria';
 
 type TabDef = {
   label: string,
@@ -21,11 +20,6 @@ export const TAB_DEFS: Record<Library, TabDef> = {
     label: 'React Aria',
     description: 'Style-free components and hooks for building accessible UIs',
     icon: <ReactAriaLogo />
-  },
-  'internationalized': {
-    label: 'Internationalized',
-    description: 'Framework-agnostic internationalization utilities',
-    icon: <InternationalizedLogo />
   }
 };
 
diff --git a/packages/dev/s2-docs/src/getPages.ts b/packages/dev/s2-docs/src/getPages.ts
index c2bd80ceeb4..edd3f485b5f 100644
--- a/packages/dev/s2-docs/src/getPages.ts
+++ b/packages/dev/s2-docs/src/getPages.ts
@@ -60,7 +60,7 @@ function getUrl(name: string) {
     return `${baseUrl}/${name.slice(11)}`;
   } else if (library === 's2') {
     return `${baseUrl}/${name.slice(3)}`;
-  } else if (!process.env.DOCS_ENV) {
+  } else if (!process.env.LIBRARY) {
     return `http://localhost:1234/${name}`;
   } else {
     throw new Error('Unknown page: ' + name);
diff --git a/packages/dev/s2-docs/src/icons/AdobeLogo.tsx b/packages/dev/s2-docs/src/icons/AdobeLogo.tsx
index c1f29a92a45..d9d49937769 100644
--- a/packages/dev/s2-docs/src/icons/AdobeLogo.tsx
+++ b/packages/dev/s2-docs/src/icons/AdobeLogo.tsx
@@ -1,10 +1,11 @@
+import {mergeStyles} from '../../../../@react-spectrum/s2/style/runtime';
 import React from 'react';
-import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
+import {style, StyleString} from '@react-spectrum/s2/style' with { type: 'macro' };
 
-export const AdobeLogo = ({className = '', size = 32}) => {
+export const AdobeLogo = ({styles, size}: {styles?: StyleString, size?: number}) => {
   return (
     <svg
-      className={className}
+      className={mergeStyles(style({size: 26, flexShrink: 0}), styles)}
       style={{display: 'block', width: size, height: size}}
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden
diff --git a/packages/dev/s2-docs/src/icons/NpmLogo.tsx b/packages/dev/s2-docs/src/icons/NpmLogo.tsx
new file mode 100644
index 00000000000..aa3148ef281
--- /dev/null
+++ b/packages/dev/s2-docs/src/icons/NpmLogo.tsx
@@ -0,0 +1,15 @@
+import {createIcon} from '@react-spectrum/s2';
+import {useId} from 'react';
+
+export const NpmLogo = createIcon(props => {
+  let maskId = useId();
+  return (
+    <svg {...props} viewBox="0 0 27.23 27.23" aria-hidden="true" height="22" fill="currentColor">
+      <rect width="27.23" height="27.23" rx="2" mask={`url(#${maskId})`} />
+      <mask id={maskId}>
+        <rect width="27.23" height="27.23" rx="2" fill="white" />
+        <polygon fill="black" points="5.8 21.75 13.66 21.75 13.67 9.98 17.59 9.98 17.58 21.76 21.51 21.76 21.52 6.06 5.82 6.04 5.8 21.75" />
+      </mask>
+    </svg>
+  );
+});
diff --git a/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx b/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx
index f5f0e357752..d65379067ee 100644
--- a/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx
+++ b/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx
@@ -1,36 +1,11 @@
-import React, {useId} from 'react';
-
-export const ReactAriaLogo = ({size = 32}) => {
-  const clipPathId = `react-aria-logo-clip-${useId()}`;
+import {mergeStyles} from '../../../../@react-spectrum/s2/style/runtime';
+import React from 'react';
+import {style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 
+export const ReactAriaLogo = ({styles}: {styles?: StyleString}) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="15.79 17.64 131.21 126.14" aria-hidden style={{display: 'block', width: size, height: size}}>
-      <defs>
-        <clipPath id={clipPathId}>
-          <path
-            d="M80 136c30.93 0 56-25.07 56-56s-25.07-56-56-56-56 25.07-56 56 25.07 56 56 56Zm8.48-86.3c0 4.69-3.8 8.48-8.48 8.48s-8.48-3.8-8.48-8.48 3.8-8.48 8.48-8.48 8.48 3.8 8.48 8.48ZM51.09 61.78c.52-1.8 2.39-2.85 4.2-2.33a89.865 89.865 0 0 0 48.82.17l.64-.18c1.81-.5 3.68.55 4.18 2.36a3.39 3.39 0 0 1-2.36 4.18l-.64.18a97.139 97.139 0 0 1-15.51 2.98c-1.03.11-1.82.97-1.82 2.01v14.89c0 .18.03.37.08.55 1.37 4.83 2.94 10.39 4.32 15.27.98 3.46 1.86 6.58 2.49 8.85.32 1.14.58 2.06.76 2.71l.04.15c.13.48.27.97.31 1.16a3.38 3.38 0 0 1-2.66 3.99 3.38 3.38 0 0 1-3.99-2.66c.02.09 0 .04-.08-.27-.04-.13-.09-.31-.15-.54-.18-.65-.44-1.57-.76-2.7-.64-2.27-1.52-5.39-2.49-8.85l-3.74-13.21a1.992 1.992 0 0 0-1.92-1.45h-1.6c-.89 0-1.68.59-1.92 1.45-1.22 4.3-2.55 9.01-3.74 13.21-.98 3.46-1.85 6.58-2.49 8.85-.32 1.13-.58 2.06-.76 2.7-.06.23-.11.41-.15.54-.09.31-.1.36-.08.27a3.39 3.39 0 1 1-6.65-1.33c.04-.18.18-.68.31-1.16l.04-.15c.18-.65.44-1.58.76-2.71.64-2.27 1.52-5.39 2.49-8.85 1.38-4.88 2.95-10.44 4.32-15.27.05-.18.08-.36.08-.55V71.16c0-1.04-.79-1.9-1.82-2.01a96.504 96.504 0 0 1-16.17-3.17 3.395 3.395 0 0 1-2.33-4.2Z"
-            style={{
-              fill: 'none'
-            }} />
-        </clipPath>
-      </defs>
-      <circle
-        cx={80}
-        cy={80}
-        r={50.83}
-        style={{
-          fill: '#fff'
-        }} />
-      <g
-        style={{
-          clipPath: `url(#${clipPathId})`
-        }}>
-        <path
-          d="M15.79 17.64H147v126.14H15.79z"
-          style={{
-            fill: '#269ff4'
-          }} />
-      </g>
+    <svg className={mergeStyles(style({size: 24, flexShrink: 0, display: 'block'}), styles)}  viewBox="200 206 800 790" fill="none">
+      <path d="M720.977 206C867.87 206 986.95 325.079 986.951 471.971C986.951 590.705 909.147 691.263 801.743 725.455L996.496 969.116C1004.8 979.509 997.403 994.897 984.099 994.897H783.931C774.667 994.897 765.864 990.85 759.834 983.817L697.676 911.329L493.465 653.333C457.478 607.867 489.857 540.938 547.842 540.936L720.977 540.93C759.061 540.93 789.934 510.054 789.934 471.971C789.933 433.888 759.06 403.016 720.977 403.016H430.286C405.305 403.016 388.975 391.865 374.349 373.604L277.717 252.964C262.564 234.046 276.032 206.001 300.27 206H720.977Z M396.955 720.641C408.147 705.343 430.789 704.78 442.726 719.504L504.152 796.942H503.124L535.902 838.852C548.405 854.274 550.274 877.104 538.38 893.001L469.156 982.565C463.145 990.343 453.87 994.897 444.041 994.897H215.9C202.668 994.897 195.246 979.656 203.405 969.239L338.351 796.942H338.281L396.955 720.641Z" fill="light-dark(#6733FF, #7F57FF)" />
     </svg>
   );
 };
diff --git a/packages/dev/s2-docs/src/library.tsx b/packages/dev/s2-docs/src/library.tsx
index 6cd8da5d402..35cacf1b490 100644
--- a/packages/dev/s2-docs/src/library.tsx
+++ b/packages/dev/s2-docs/src/library.tsx
@@ -1,14 +1,10 @@
 import {AdobeLogo} from './icons/AdobeLogo';
-import {InternationalizedLogo} from './icons/InternationalizedLogo';
 import React from 'react';
 import {ReactAriaLogo} from './icons/ReactAriaLogo';
 
-export type Library = 'react-spectrum' | 'react-aria' | 'internationalized';
+export type Library = 'react-spectrum' | 'react-aria';
 
 export function getLibraryFromUrl(name: string): Library {
-  if (name.startsWith('react-aria/internationalized/')) {
-    return 'internationalized';
-  }
   if (name.startsWith('react-aria/')) {
     return 'react-aria';
   }
@@ -26,8 +22,6 @@ export function getLibraryLabel(library: Library): string {
   switch (library) {
     case 'react-aria':
       return 'React Aria';
-    case 'internationalized':
-      return 'Internationalized';
     default:
       return 'React Spectrum';
   }
@@ -37,8 +31,6 @@ export function getLibraryIcon(library: Library): React.ReactNode {
   switch (library) {
     case 'react-aria':
       return <ReactAriaLogo />;
-    case 'internationalized':
-      return <InternationalizedLogo />;
     default:
       return <AdobeLogo />;
   }
diff --git a/packages/dev/s2-docs/src/pageUtils.ts b/packages/dev/s2-docs/src/pageUtils.ts
index cd42a0f8165..a4144676d3f 100644
--- a/packages/dev/s2-docs/src/pageUtils.ts
+++ b/packages/dev/s2-docs/src/pageUtils.ts
@@ -15,7 +15,7 @@ const BASE_URL = {
 
 export function getBaseUrl(library: 'react-aria' | 's2') {
   let env = process.env.DOCS_ENV;
-  let base = env 
+  let base = env && process.env.LIBRARY 
     ? BASE_URL[env][library]
     : `http://localhost:1234/${library}`;
   let publicUrl = process.env.PUBLIC_URL;
diff --git a/packages/dev/s2-docs/src/prefetch.ts b/packages/dev/s2-docs/src/prefetch.ts
index 9930a4ea035..1417a3017a5 100644
--- a/packages/dev/s2-docs/src/prefetch.ts
+++ b/packages/dev/s2-docs/src/prefetch.ts
@@ -44,11 +44,23 @@ export function getPrefetchedPromise(rscPath: string): Promise<ReactElement> | u
   return prefetchPromises.get(rscPath);
 }
 
+function waitForIdle(fn) {
+  // Wait for view transition to finish before pre-fetching.
+  // Otherwise try to wait for idle time so we don't interrupt interactions/animations.
+  if ('activeViewTransition' in document && document.activeViewTransition) {
+    (document.activeViewTransition as ViewTransition).finished.then(() => fn());
+  } else if (typeof requestIdleCallback === 'function') {
+    requestIdleCallback(fn);
+  } else {
+    setTimeout(fn, 0);
+  }
+}
+
 let observer = typeof IntersectionObserver !== 'undefined' ? new IntersectionObserver(entries => {
   for (let entry of entries) {
     if (entry.isIntersecting && entry.target instanceof HTMLAnchorElement) {
       let link = entry.target;
-      prefetchRoute(link.pathname + link.search + link.hash);
+      waitForIdle(() => prefetchRoute(link.pathname + link.search + link.hash));
     }
   }
 }) : null;
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
index a9b63399a91..6a322fbb0fb 100644
--- a/packages/dev/s2-docs/src/searchUtils.tsx
+++ b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -70,6 +70,8 @@ export function transformPageToComponentItem(page: Page): ComponentItem {
   };
 }
 
+const END_SECTIONS = ['blog', 'releases'];
+
 /**
  * Builds sections from pages for a given library.
  * Sorts sections with 'Components' first.
@@ -97,7 +99,15 @@ export function buildSectionsFromPages(pages: Page[], library: Library): Section
       if (b.id === 'components') {
         return 1;
       }
-      return 0;
+      let ai = END_SECTIONS.indexOf(a.id);
+      let bi = END_SECTIONS.indexOf(b.id);
+      if (ai >= 0) {
+        return bi < 0 ? 1 : (ai - bi);
+      }
+      if (bi >= 0) {
+        return ai < 0 ? -1 : (bi - ai);
+      }
+      return a.name.localeCompare(b.name);
     });
 }
 
@@ -335,7 +345,7 @@ export function getPageTitle(page: Page): string {
  * This allows pages to appear in a different section in search results than in navigation.
  */
 export function getSearchSection(page: Page): string {
-  return (page.exports?.searchSection as string) ?? (page.exports?.section as string) ?? 'Components';
+  return (page.exports?.searchSection as string) ?? (page.exports?.group as string) ?? (page.exports?.section as string) ?? 'Components';
 }
 
 export function getOrderedLibraries(currentPage: Page) {
diff --git a/packages/dev/s2-docs/tailwind/home.global.css b/packages/dev/s2-docs/tailwind/home.global.css
deleted file mode 100644
index 80a05cbb6b9..00000000000
--- a/packages/dev/s2-docs/tailwind/home.global.css
+++ /dev/null
@@ -1,41 +0,0 @@
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source(none);
-@source "../../../../starters/tailwind/src/*.{ts,tsx}";
-@source "../pages/**/*.mdx";
-@plugin 'tailwindcss-react-aria-components';
-@plugin 'tailwindcss-animate';
-@source "../../docs/pages/react-aria/home/*.tsx";
-@import "../../docs/pages/react-aria/home/home.css";
-@source "../src/SearchMenuWrapper.tsx";
-
-@font-face {
-  font-family: "adobe-clean-spectrum-vf";
-  src: url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("opentype");
-  font-display: auto;
-  font-style: normal;
-  font-weight: 100 900;
-  font-stretch: normal;
-}
-
-body {
-  font-family: "adobe-clean-spectrum-vf", system-ui, sans-serif;
-}
-
-@media (min-resolution: 200dpi) {
-  :root {
-    --spacing: calc(0.25rem * 1.25);
-    --text-xs: calc(0.75rem * 1.25);
-    --text-sm: round(down, 0.875rem * 1.25, 1px);
-    --text-base: calc(1rem * 1.25);
-    --text-lg: round(1.125rem * 1.25, 1px);
-    --text-xl: calc(1.25rem * 1.25);
-    --text-2xl: calc(1.5rem * 1.25);
-    --text-3xl: calc(1.875rem * 1.25);
-  }
-}
-
-@layer utilities {
-  .font-spectrum {
-    font-family: "adobe-clean-spectrum-vf", system-ui, sans-serif;
-  }
-}
\ No newline at end of file
diff --git a/packages/dev/s2-docs/tailwind/tailwind.css b/packages/dev/s2-docs/tailwind/tailwind.css
index faa52c7911b..0187248c721 100644
--- a/packages/dev/s2-docs/tailwind/tailwind.css
+++ b/packages/dev/s2-docs/tailwind/tailwind.css
@@ -7,6 +7,9 @@
 @source "../pages/react-aria/examples/Tab*.tsx";
 @plugin 'tailwindcss-react-aria-components';
 @plugin 'tailwindcss-animate';
+@source "../../docs/pages/react-aria/home/*.tsx";
+@import "../../docs/pages/react-aria/home/home.css";
+@source "../src/SearchMenuWrapper.tsx";
 
 @media (min-resolution: 200dpi) {
   :root {
@@ -20,3 +23,9 @@
     --text-3xl: calc(1.875rem * 1.25);
   }
 }
+
+@layer utilities {
+  .font-spectrum {
+    font-family: "adobe-clean-spectrum-vf", system-ui, sans-serif;
+  }
+}
diff --git a/patches/@parcel+transformer-css+2.0.0-dev.1601.patch b/patches/@parcel+transformer-css+2.0.0-dev.1601.patch
index 67a46d99bc7..8619ddf51dd 100644
--- a/patches/@parcel+transformer-css+2.0.0-dev.1601.patch
+++ b/patches/@parcel+transformer-css+2.0.0-dev.1601.patch
@@ -6,7 +6,7 @@ index b8dd9f2..0bad8ab 100644
      } else if (Array.isArray(contents === null || contents === void 0 || (_contents$cssModules4 = contents.cssModules) === null || _contents$cssModules4 === void 0 ? void 0 : _contents$cssModules4.exclude)) {
        contents.cssModules.exclude = contents.cssModules.exclude.map(exclude => typeof exclude === 'string' ? (0, _utils().globToRegex)(exclude) : exclude);
      }
-+    if (config.searchPath.endsWith('home.global.css') || /packages.@react-spectrum.s2/.test(config.searchPath)) {
++    if (config.searchPath.endsWith('home.global.css') || /s2-docs/.test(config.searchPath) || /packages.@react-spectrum.s2/.test(config.searchPath)) {
 +      contents = {...contents, pseudoClasses: null};
 +    }
      return contents;
diff --git a/starters/docs/src/ListBox.css b/starters/docs/src/ListBox.css
index e7e82f34ed6..dc9674b5470 100644
--- a/starters/docs/src/ListBox.css
+++ b/starters/docs/src/ListBox.css
@@ -262,6 +262,7 @@
   display: block;
   max-height: inherit;
   overflow: auto;
+  border-radius: inherit;
   forced-color-adjust: none;
   outline: none;
   box-sizing: border-box;
diff --git a/starters/docs/src/Tabs.css b/starters/docs/src/Tabs.css
index a7b91fbc247..6d610d553fd 100644
--- a/starters/docs/src/Tabs.css
+++ b/starters/docs/src/Tabs.css
@@ -35,7 +35,7 @@
 
     .react-aria-SelectionIndicator {
       left: 0;
-      bottom: -1.5px;
+      bottom: 0px;
       width: 100%;
       height: 3px;
       transition-property: translate, width;
@@ -48,7 +48,7 @@
 
     .react-aria-SelectionIndicator {
       top: 0;
-      right: -1.5px;
+      right: 0px;
       height: 100%;
       width: 3px;
       transition-property: translate, height;
diff --git a/starters/tailwind/src/Button.tsx b/starters/tailwind/src/Button.tsx
index 1e59fb0544a..d7cda47d091 100644
--- a/starters/tailwind/src/Button.tsx
+++ b/starters/tailwind/src/Button.tsx
@@ -11,7 +11,7 @@ export interface ButtonProps extends RACButtonProps {
 
 let button = tv({
   extend: focusRing,
-  base: 'relative inline-flex items-center justify-center gap-2 border border-transparent dark:border-white/10 h-9 box-border px-3.5 py-0 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:aspect-square font-sans text-sm text-center transition rounded-lg cursor-default [-webkit-tap-highlight-color:transparent]',
+  base: 'relative inline-flex items-center justify-center gap-2 border border-transparent dark:border-white/10 h-9 box-border px-3.5 py-0 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:w-8 font-sans text-sm text-center transition rounded-lg cursor-default [-webkit-tap-highlight-color:transparent]',
   variants: {
     variant: {
       primary: 'bg-blue-600 hover:bg-blue-700 pressed:bg-blue-800 text-white',
diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx
index 2b23739cc77..57c5740d57d 100644
--- a/starters/tailwind/src/ListBox.tsx
+++ b/starters/tailwind/src/ListBox.tsx
@@ -54,7 +54,7 @@ export function ListBoxItem(props: ListBoxItemProps) {
 }
 
 export const dropdownItemStyles = tv({
-  base: 'group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]',
+  base: 'group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-3 selected:pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]',
   variants: {
     isDisabled: {
       false: 'text-neutral-900 dark:text-neutral-100',
diff --git a/starters/tailwind/src/ProgressBar.tsx b/starters/tailwind/src/ProgressBar.tsx
index fed9ab8d896..727471257e2 100644
--- a/starters/tailwind/src/ProgressBar.tsx
+++ b/starters/tailwind/src/ProgressBar.tsx
@@ -13,14 +13,14 @@ export interface ProgressBarProps extends AriaProgressBarProps {
 
 export function ProgressBar({ label, ...props }: ProgressBarProps) {
   return (
-    <AriaProgressBar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans max-w-full')}>
+    <AriaProgressBar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans w-64 max-w-full')}>
       {({ percentage, valueText, isIndeterminate }) => (
         <>
           <div className="flex justify-between gap-2">
             <Label>{label}</Label>
             <span className="text-sm text-neutral-600 dark:text-neutral-400">{valueText}</span>
           </div>
-          <div className="w-64 max-w-full h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden">
+          <div className="max-w-full h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden">
             <div className={`absolute top-0 h-full rounded-full bg-blue-500 forced-colors:bg-[Highlight] ${isIndeterminate ? 'left-full animate-in duration-1000 slide-in-from-left-[20rem] repeat-infinite ease-out' : 'left-0'}`} style={{ width: (isIndeterminate ? 40 : percentage) + '%' }} />
           </div>
         </>
diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx
index 21c7bd62d36..df713c57bb8 100644
--- a/starters/tailwind/src/Table.tsx
+++ b/starters/tailwind/src/Table.tsx
@@ -135,7 +135,7 @@ export function Row<T extends object>(
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'box-border [-webkit-tap-highlight-color:transparent] border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2 group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg'
+  base: 'box-border [-webkit-tap-highlight-color:transparent] border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) [:is(:has(+[data-selected])_*)]:border-(--selected-border) p-2 truncate -outline-offset-2 group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg'
 });
 
 export function Cell(props: CellProps) {
diff --git a/starters/tailwind/src/TagGroup.tsx b/starters/tailwind/src/TagGroup.tsx
index a21debe93d3..addd849c29e 100644
--- a/starters/tailwind/src/TagGroup.tsx
+++ b/starters/tailwind/src/TagGroup.tsx
@@ -93,7 +93,7 @@ export function TagGroup<T extends object>(
 
 const removeButtonStyles = tv({
   extend: focusRing,
-  base: 'cursor-default rounded-full transition-[background-color] p-0.5 flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10 pressed:bg-black/20 dark:pressed:bg-white/20'
+  base: 'cursor-default rounded-full transition-[background-color] p-0.5 flex items-center justify-center bg-transparent text-[inherit] border-0 hover:bg-black/10 dark:hover:bg-white/10 pressed:bg-black/20 dark:pressed:bg-white/20'
 });
 
 export function Tag({ children, color, ...props }: TagProps) {