Repository: adobe/react-spectrum
File: packages/dev/s2-docs/pages/s2/home/Home.tsx (TypeScript)

Code before:
            <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})}>
        <h1 id={headingId} className={style({font: 'heading-3xl', marginY: 0, color: 'white'})}>
          <span className={swapWrapper} >Build apps </span>
          <span className={swapWrapper}>
            <span className={swapTrack}>
              <span className={swapRow}>with polish</span>
              <span className={swapRow}>with speed</span>
              <span className={swapRow}>with ease</span>
              <span className={swapRow}>with accessibility</span>
              <span className={swapRow}>with consistency</span>
              <span className={swapRow}>with React Spectrum</span>
            </span>
            <span className={swapSizer} aria-hidden>with React Spectrum</span>
          </span>
        </h1>
        <p className={style({font: 'body-3xl', marginY: 0, color: 'white'})}>React Spectrum empowers you to build high quality, accessible, cohesive apps with Adobe's signature look and feel</p>
        <div className={style({display: 'flex', gap: 16, flexDirection: {default: 'column', sm: 'row'}, marginTop: 32, marginBottom: 56})}>
          <LinkButton size="XL" staticColor="white" href="getting-started">Get started</LinkButton>
          <LinkButton size="XL" staticColor="white" variant="secondary" href="react-spectrum">Explore components</LinkButton>
        </div>
        <section aria-label="Example app" className={style({height: 'calc(100svh - 24px)', maxHeight: size(600)})}>
          <ExampleApp showArrows />
        </section>
      </header>
      <main className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, maxWidth: 1600})}>
        <Section
          title="Build Once. Adapt Everywhere."
          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."
            illustration={<Lightbulb />}
            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 4'}})}>
            <DarkMode />
          </Feature>
          <Feature
            title="Touch friendly"
            description="Components automatically scale and adapt for touch or pointer input, ensuring a smooth experience on any device."
            illustration={<Interaction />}
            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
            <Mobile />

Review comment (suggestion):
```suggestion
        <p className={style({font: 'body-3xl', marginY: 0, color: 'white'})}>React Spectrum empowers you to build high quality, accessible, cohesive apps with Adobe's signature design</p>
```

Code after:
            <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 />
        </section>
      </header>
      <main className={style({marginX: 'auto', paddingX: {default: 16, sm: 40}, maxWidth: 1600})}>
        <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.">
          <Feature
            title="Dark mode"
            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 />
          </Feature>
          <Feature
            title="Touch friendly"
            description="Components automatically scale and adapt for touch or pointer input, ensuring a smooth experience on any device."
            illustration={<Interaction />}
            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3', xl: 'span 2'}})}>
            <Mobile />
          </Feature>
          <Feature
            title="Global ready by default"
            description="Components automatically mirror their layout and format text for different languages, currencies, dates, and locales."
            illustration={<Translate />}
            styles={style({gridColumnStart: {default: 'span 6', lg: 'span 3'}})}>
            <Provider
              locale="ar-AE"
              styles={style({
                height: 300,
                containerType: 'inline-size',
                margin: {
                  default: -16,
                  sm: 0
                },
                marginTop: 0,
                '--app-frame-radius-top': {
                  type: 'borderTopStartRadius',
                  value: {
                    default: 'none',
                    sm: 'lg'
                  }
                }
              })}>
              <AppFrame />
            </Provider>
          </Feature>