docs(homepage): Homepage copy changes

packages/dev/s2-docs/pages/react-aria/index.mdx

@@ -21,6 +21,7 @@ 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 {SearchMenuButton} from '../../src/SearchMenuWrapper';
 import {getCurrentPage, getPages} from '../../src/getPages';
 import {getBaseUrl} from '../../src/pageUtils';
 
@@ -108,7 +109,7 @@ export const description = 'Accessible, high quality UI components and hooks for
         <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}>
-            <span 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 group-pressed:scale-95 cursor-pointer focus-ring group-focus-visible:outline-2">Explore Components</span>
+            <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>
 
@@ -632,10 +633,10 @@ export const description = 'Accessible, high quality UI components and hooks for
         </a>
 
         <SearchMenuWrapperServer currentPage={props.currentPage}>
-          <span className="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 group-focus-visible:!outline-blue-600 group-focus-visible:dark:!outline-blue-500 group-focus-visible:!outline-2">
+          <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>
-          </span>
+          </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%]">

packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx

@@ -293,6 +293,7 @@ export function AppFrame({children, inert, hidden, page, onPageChange}: any) {
         <Sidebar page={page} onPageChange={onPageChange} />
         <div
           data-content
+          inert={!children}
           className={style({
             gridArea: 'content',
             backgroundColor: 'base',

packages/dev/s2-docs/pages/s2/home/Home.tsx

@@ -1,14 +1,11 @@
 import { size, style } from "@react-spectrum/s2/style" with {type: 'macro'};
-// @ts-ignore
-import { getColorScale } from "../../../src/color.macro" with {type: 'macro'};
-// @ts-ignore
-import { Code } from "../../../src/Code";
-// @ts-ignore
-import { Pre } from "../../../src/CodePlatter";
+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 { Divider, Link, LinkButton, Provider } from "@react-spectrum/s2";
+import { Button, Divider, Link, LinkButton, Provider } from "@react-spectrum/s2";
 import { Mobile } from "./Mobile";
 import { Rems } from "./Rems";
 // import { PressAnimation } from "./Press";
@@ -40,14 +37,15 @@ import { Responsive } from "./Responsive";
 import { mergeStyles } from "../../../../../@react-spectrum/s2/style/runtime";
 import { ReduceMotion } from "./ReduceMotion";
 import { Colors } from "./Colors";
-import '../../../src/footer.css';
+import '@react-spectrum/s2-docs/src/footer.css';
 // @ts-ignore
 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'};
-// @ts-ignore
-import { getBaseUrl } from "../../../src/pageUtils";
+import { getBaseUrl } from "@react-spectrum/s2-docs/src/pageUtils";
+import SearchMenuWrapperServer from "@react-spectrum/s2-docs/src/SearchMenuWrapperServer";
+import type {Page} from "@parcel/rsc";
 
 const container = style({
   backgroundColor: 'layer-2/80',
@@ -141,7 +139,7 @@ const swapRow = style({
   lineHeight: '[1em]'
 });
 
-export function Home() {
+export function Home({currentPage}: {currentPage: Page}) {
   let headingId = useId();
   return (
     <body
@@ -212,10 +210,12 @@ export function Home() {
             <span className={swapSizer} aria-hidden>with React Spectrum</span>
           </span>
         </h1>
-        <p className={style({font: 'body-3xl', marginY: 0, color: 'white'})}>React Spectrum gives you the power to build high quality, accessible UI with the cohesive look and feel of Adobe. </p>
-        <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}, marginTop: 32, marginBottom: 56})}>
+        <p className={style({font: 'body-3xl', marginY: 0, color: 'white', textWrap: 'balance'})}>React Spectrum empowers you to build high quality, accessible, cohesive apps with Adobe's signature design.</p>
+        <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}, marginTop: 32, marginBottom: 96})}>
           <LinkButton size="XL" staticColor="white" href="getting-started">Get started</LinkButton>
-          <LinkButton size="XL" staticColor="white" variant="secondary" href="react-spectrum">Explore components</LinkButton>
+          <SearchMenuWrapperServer currentPage={currentPage}>
+            <Button size="XL" staticColor="white" variant="secondary">Explore components</Button>
+          </SearchMenuWrapperServer>
         </div>
         <section aria-label="Example app" className={style({height: 'calc(100svh - 24px)', maxHeight: size(600)})}>
           <ExampleApp showArrows />
@@ -227,7 +227,7 @@ export function Home() {
           description="React Spectrum makes interfaces more accessible, flexible, and easier to maintain, while giving users a seamless experience no matter where they are.">
           <Feature
             title="Dark mode"
-            description="Deliver effortless dark and light mode support with no extra styling needed."
+            description="Deliver effortless light and dark mode support with no extra styling needed."
             illustration={<Lightbulb />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 4'}})}>
             <DarkMode />
@@ -241,7 +241,7 @@ export function Home() {
           </Feature>
           <Feature
             title="Global ready by default"
-            description="Automatically mirrors component layouts, and formats text for different languages, currencies, dates, and locales."
+            description="Component layouts automatically mirrors, and format text for different languages, currencies, dates, and locales."
             illustration={<Translate />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
             <Provider
@@ -281,14 +281,14 @@ export function Home() {
           </Feature> */}
           <Feature
             title="High contrast mode"
-            description="Support for high contrast mode included, ensuring a clear and readable experience based on preference."
+            description="Support for high contrast mode is included, ensuring a clear and readable experience based on preference."
             illustration={<Accessibility />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
             <HCM />
           </Feature>
           <Feature
             title="Adaptive font sizes"
-            description="Fonts scale automatically according to user preferences and screen size, fully compatible with rem-based typography, allowing your text to scale naturally."
+            description="Fonts scale automatically according to user preferences and screen size using rem-based typography, allowing your text to scale naturally."
             illustration={<TextIcon />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 4'}})}>
             <Rems />
@@ -312,28 +312,28 @@ export function Home() {
             <SubmenuAnimation />
           </Feature>
         </Section> */}
-        <Section title="Everything you need to build beautiful apps" description="Bring your interface to life with expressive icons, Spectrum colors, and rich illustrations. Every detail works together to make your product look polished and on-brand.">
+        <Section title="Everything you need to build beautiful apps." description="Bring your interface to life with expressive icons, Spectrum colors, and rich illustrations. Every detail works together to make your product look polished and on-brand.">
           <Feature
             title="Icons"
-            description="Spectrum icon support for your product. Use the icon search to simplify finding the right icon the right experience."
+            description={<>With hundreds of Spectrum icons to choose from, use our <Link href="icons" variant="secondary">icon search</Link> to find the right icon for the right experience.</>}
             illustration={<VectorDraw />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
             <Icons />
           </Feature>
           <Feature
             title="Illustrations"
-            description="Rich illustrations that help bring your interface to life. Use the illustration search to find the right illustration for your product."
+            description={<>Rich illustrations help bring your interface to life. Use our <Link href="illustrations" variant="secondary">illustration search</Link> to find the right illustration for your product.</>}
             illustration={<IllustrationIcon />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
             <Illustrations />
           </Feature>
         </Section>
         <Section
-          title={<>Rapidly style custom components with Style Macros</>}
+          title={<>Rapidly style custom components with Style Macros.</>}
           description={<>Easily use Spectrum tokens like colors, spacing, and typography in your own custom components with style macros. Styles are <strong>colocated</strong> with your component code, allowing you to <strong>develop more efficiently</strong> and <strong>refactor with confidence</strong> – no more CSS conflicts or specificity issues. Style macros generate atomic CSS at build time, so you get tiny bundle sizes and fast runtime performance.</>}>
           <Feature
             title="Colors"
-            description="Access the full range of Spectrum color tokens when you need them."
+            description="Convenient access to the full range of Spectrum color tokens."
             illustration={<Color />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
             <ColorScales />
@@ -386,7 +386,7 @@ export function Home() {
               <h4 className={style({font: 'title', marginTop: 0})}>Button.tsx</h4>
               <Pre><Code lang="tsx">{`import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {hstack} from './style-utils' with {type: 'macro'};
-            
+
 const buttonStyle = style({
   ...focusRing(),
   ...hstack(4)
@@ -425,37 +425,46 @@ const buttonStyle = style({
           </Feature>
           <Feature
             title="Responsive design"
-            description="Adaptive UI built on Spectrum's responsive layout definitions.... *needs work"
+            description="Adapt your application for any screen size using our built-in breakpoints, or define your own."
             illustration={<Phone />}
             style={{gridColumn: 'span 6'}}>
             <Responsive />
           </Feature>
         </Section>
         <Section
-          title="Built for modern development and the modern web"
+          title="Built for modern development and the modern web."
           description="With AI-ready documentation, server side and runtime performance optimizations, React Spectrum helps you build modern, scalable apps without compromise.">
           <Feature
             title="AI-ready"
             description="Comprehensive markdown docs, llms.txt, and an agent-friendly MCP server."
             illustration={<Sparkles />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 2'}})}>
-              
+
           </Feature>
           <Feature
             title="SSR"
-            description="Server-side rendering and React Server Components support, maximizing Core Web Vitals with zero layout thrashing."
+            description="Server-side rendering and React Server Components support, maximizing Core Web Vitals."
             illustration={<Server />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 2'}})}>
-              
+
           </Feature>
           <Feature
             title="Small bundle"
-            description="Aggressive tree-shaking and atomic CSS resulting in reduced bundle sizes and faster runtime performance."
+            description="Aggressive tree-shaking and atomic CSS result in small bundle sizes and fast runtime performance."
             illustration={<SpeedFast />}
             styles={style({gridColumnStart: {default: 'span 6', lg: 'span 2'}})}>
-              
+
           </Feature>
         </Section>
+        <section className={style({paddingY: 64})}>
+          <h2 className={style({font: 'heading-2xl', color: 'white'})}>Ready to get started?</h2>
+          <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}})}>
+            <LinkButton size="XL" staticColor="white" href="getting-started">Install and setup</LinkButton>
+            <SearchMenuWrapperServer currentPage={currentPage}>
+              <Button size="XL" staticColor="white">Explore components</Button>
+            </SearchMenuWrapperServer>
+          </div>
+        </section>
       </main>
       <footer
         className={style({
@@ -493,7 +502,7 @@ function Section({title, description, children}: any) {
   return (
     <section aria-labelledby={headingId} className={style({paddingY: 64})}>
       <h2 id={headingId} className={style({font: 'heading-2xl', color: 'white'})}>{title}</h2>
-      <p className={style({font: 'body-2xl', color: 'white', maxWidth: '80%', marginBottom: 64})}>{description}</p>
+      <p className={style({font: 'body-2xl', color: 'white', maxWidth: '80%', marginBottom: 64, textWrap: 'balance'})}>{description}</p>
       <div className={style({display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16})}>
         {children}
       </div>

packages/dev/s2-docs/pages/s2/home/States.tsx

@@ -59,8 +59,12 @@ export function States() {
         className={style({
           gridArea: 'props',
           display: 'flex',
-          alignItems: 'center',
-          columnGap: 16
+          flexDirection: 'column',
+          alignItems: {
+            default: 'center',
+            xl: 'start'
+          },
+          gap: 16
         })}>
         <Picker
           label="Variant"

packages/dev/s2-docs/pages/s2/home/app/Ideas.tsx

@@ -14,14 +14,10 @@ import { Arrow, Arrows } from './Arrows';
 export function Ideas() {
   let {locale} = useLocale();
   let list = useAsyncList<Topic, number | null>({
-    async load({signal, cursor}) {
-      let page = cursor || 1;
-      let res = await fetch(
-        `https://api.unsplash.com/topics?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
-        {signal}
-      );
-      let items = (await res.json()).filter((topic: Topic) => !!topic.preview_photos);
-      return {items, cursor: items.length ? page + 1 : null};
+    async load() {
+      let res = await import('./topics.json');
+      let items = res.filter((topic: Topic) => !!topic.preview_photos);
+      return {items};
     }
   });
 

packages/dev/s2-docs/pages/s2/home/app/Photos.tsx

@@ -8,17 +8,25 @@ import { useAsyncList } from 'react-stately';
 import { useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 
+const pages = [
+  () => import('./photos-1.json'),
+  () => import('./photos-2.json'),
+  () => import('./photos-3.json'),
+  () => import('./photos-4.json')
+];
+
 export function Photos(props: any) {
   let [layout, setLayout] = useState<'waterfall' | 'grid'>('waterfall');
   let {direction} = useLocale();
   let list = useAsyncList<any, number | null>({
-    async load({signal, cursor, items}) {
+    async load({cursor, items}) {
       let page = cursor || 1;
-      let res = await fetch(
-        `https://api.unsplash.com/topics/nature/photos?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
-        {signal}
-      );
-      let nextItems = await res.json();
+      let next = pages[page - 1];
+      if (!next) {
+        return {items: []};
+      }
+
+      let nextItems: any[] = await next();
       // Filter duplicates which might be returned by the API.
       let existingKeys = new Set(items.map(i => i.id));
       nextItems = nextItems.filter((i: any) => !existingKeys.has(i.id) && (i.description || i.alt_description));

packages/dev/s2-docs/pages/s2/index.mdx

@@ -1,6 +1,6 @@
 import '../../src/client';
-import '@react-spectrum/s2/page.css';
 import {Home} from './home/Home';
+import {Provider} from '@react-spectrum/s2';
 import rspFavicon from 'url:../../assets/favicon.ico';
 
 export const section = 'Overview';
@@ -9,7 +9,7 @@ export const description = 'Build high quality, accessible UI with the cohesive
 export const omitFromNav = true;
 export const hideFromSearch = true;
 
-<html lang="en">
+<Provider elementType="html" locale="en">
   <head>
     <meta charSet="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -46,5 +46,5 @@ export const hideFromSearch = true;
         }
       )}} />
   </head>
-  <Home />
-</html>
+  <Home currentPage={props.currentPage} />
+</Provider>