Page transition

import { useState } from 'react';
import { AnimatePresence, motion, MotionConfig } from 'motion/react';

const pages = {
  home: {
    title: 'Build apps by describing them',
    text: 'Tell the agent what you need and watch it come together.'
  },
  pricing: {
    title: 'Simple pricing',
    text: 'Start free. Upgrade when your app takes off.'
  },
  docs: {
    title: 'Documentation',
    text: 'Guides for building, previewing, and publishing.'
  }
};
type Page = keyof typeof pages;

export function SiteShell() {
  const [page, setPage] = useState<Page>('home');

  return (
    // reducedMotion='user' drops the slide and keeps a plain fade.
    <MotionConfig reducedMotion='user'>
      {/* The header stays still; only the main content transitions. */}
      <header className='flex gap-6 border-b px-6 py-4 text-sm'>
        {(Object.keys(pages) as Page[]).map((key) => (
          <button
            key={key}
            type='button'
            aria-current={key === page ? 'page' : undefined}
            onClick={() => setPage(key)}
            className='font-medium text-muted-foreground capitalize aria-[current=page]:text-foreground'
          >
            {key}
          </button>
        ))}
      </header>
      {/* With a router, key on the pathname. popLayout lets the old and new pages overlap. */}
      <div className='relative'>
        <AnimatePresence mode='popLayout' initial={false}>
          <motion.main
            key={page}
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
            className='px-6 py-10'
          >
            <h1 className='text-2xl font-semibold'>{pages[page].title}</h1>
            <p className='mt-2 text-muted-foreground'>{pages[page].text}</p>
          </motion.main>
        </AnimatePresence>
      </div>
    </MotionConfig>
  );
}