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

Code before:
            <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})}>
        <h1
          id={headingId}
          className={style({
            font: 'heading-3xl',
            '--headingFontSize': {
              type: 'width',
              value: `[round(pow(1.125, ${fontSizeToken('heading-size-xxxl')}) * var(--s2-font-size-base, 14) / 16 * 1rem, 1px)]`
            },
            '--bodyFontSize': {
              type: 'width',
              value: `[round(pow(1.125, ${fontSizeToken('body-size-xxxl')}) * var(--s2-font-size-base, 14) / 16 * 1rem, 1px)]`
            },
            fontSize: '[clamp(var(--bodyFontSize), 6vw, var(--headingFontSize))]',
            marginY: 0,
            color: 'white'
          })}>
          <span className={swapWrapper}>Build apps </span>
          <span className={swapWrapper}>
            <div 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 className={swapRow}>with polish</span>
            </div>
            <span className={swapSizer} aria-hidden>with React Spectrum</span>
          </span>
        </h1>

Review comment (suggestion):
don't have direct access to fontSize and can't use it as the type because fontSize may expand to multiple values `({--fs, fontSize})`

Code after:
              <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})}>
        <HomeH1 id={headingId}>
          <span className={swapWrapper}>Build apps with&nbsp;</span>
          <span className={swapWrapper}>
            <div className={swapTrack}>
              <span className={swapRow}>polish</span>
              <span className={swapRow}>speed</span>
              <span className={swapRow}>ease</span>
              <span className={swapRow}>accessibility</span>
              <span className={swapRow}>consistency</span>
              <span className={swapRow}>React Spectrum</span>
              <span className={swapRow} aria-hidden>polish</span>
            </div>
            <span className={swapSizer} aria-hidden>React Spectrum</span>
          </span>
        </HomeH1>
        <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})}>
          <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)})}>