docs: Improve root page

packages/dev/s2-docs/pages/WelcomeHeader.tsx

@@ -0,0 +1,71 @@
+import {ProductCard, Content, Footer, Text, LinkButton} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {TAB_DEFS} from '../src/constants';
+// @ts-ignore
+import url from 'url:../assets/wallpaper_collaborative_S2_desktop.webp';
+
+export function WelcomeHeader() {
+  return (
+    <header
+      style={{
+        backgroundImage: `url(${url})`,
+        backgroundSize: 'cover'
+      }}
+      className={style({
+        paddingX: 48,
+        paddingY: 96,
+        marginTop: {
+          default: -12,
+          lg: -40
+        },
+        marginX: {
+          default: -12,
+          lg: -40
+        },
+        marginBottom: 48
+      })}>
+      <h1 className={style({font: 'heading-2xl', color: 'white'})}>
+        React Spectrum Libraries
+      </h1>
+    </header>
+  );
+}
+
+export function LibraryCards() {
+  return (
+    <div className={style({display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: {default: 'center', lg: 'start'}})}>
+      <ProductCard size="L">
+        {TAB_DEFS['react-spectrum'].icon}
+        <Content>
+          <Text slot="title">{TAB_DEFS['react-spectrum'].label}</Text>
+          <Text slot="description">{TAB_DEFS['react-spectrum'].description}</Text>
+        </Content>
+        <Footer>
+          <LinkButton href="s2/index.html" variant="accent">Get started</LinkButton>
+        </Footer>
+      </ProductCard>
+
+      <ProductCard size="L">
+        {TAB_DEFS['react-aria'].icon}
+        <Content>
+          <Text slot="title">{TAB_DEFS['react-aria'].label}</Text>
+          <Text slot="description">{TAB_DEFS['react-aria'].description}</Text>
+        </Content>
+        <Footer>
+          <LinkButton href="react-aria/Autocomplete.html" 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/index.html" variant="accent">Show Packages</LinkButton>
+        </Footer>
+      </ProductCard>
+    </div>
+  );
+}

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

@@ -1,14 +1,15 @@
 import {Layout} from '../src/Layout';
-import {LinkButton} from '@react-spectrum/s2';
+import {WelcomeHeader, LibraryCards} from './WelcomeHeader';
 export default Layout;
 
 export const section = 'Getting started';
+export const hideNav = true;
 
-# Welcome!
+<WelcomeHeader />
 
 The React Spectrum docs have a new look! This is a **beta preview** so keep in mind that we will be continuing to make improvements before the full release.
 
-<LinkButton href="s2/getting-started.html" variant="accent" size="L">Get Started with Spectrum 2</LinkButton>
+<LibraryCards />
 
 ## What's new?
 
@@ -22,4 +23,4 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m
 
 ## Roadmap
 
-The existing docs are still available [here](https://react-spectrum.adobe.com/react-spectrum/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!
+The existing docs are still available [here](https://react-spectrum.adobe.com/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!

packages/dev/s2-docs/src/Layout.tsx

@@ -101,7 +101,7 @@ let articleStyles = style({
 
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {pages, currentPage, children} = props;
-  let hasToC = currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents[0].children.length > 0;
+  let hasToC = !currentPage.exports?.hideNav && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
   return (
     <Provider elementType="html" locale="en" background="layer-1" styles={style({scrollPaddingTop: {default: 64, lg: 0}})}>
       <head>
@@ -150,7 +150,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             pages={pages}
             currentPage={currentPage} />
           <div className={style({display: 'flex', width: 'full'})}>
-            <Nav pages={pages} currentPage={currentPage} />
+            {currentPage.exports?.hideNav ? null : <Nav pages={pages} currentPage={currentPage} />}
             <main
               key={currentPage.url}
               style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}

packages/dev/s2-docs/src/Nav.tsx

@@ -11,6 +11,10 @@ export function Nav({pages, currentPage}: PageProps) {
   let currentLibrary = getLibraryFromPage(currentPage);
   let sections = new Map();
   for (let page of pages) {
+    if (page.exports?.hideNav) {
+      continue;
+    }
+
     let library = getLibraryFromPage(page);
     if (library !== currentLibrary) {
       continue;