SlideColumns

import { Slide, SlideTitle, SlideColumns } from 'nextjs-slides';

export default function MySlide() {
  return (
    <Slide>
      <SlideTitle>Comparison</SlideTitle>
      <SlideColumns
        left={
          <div>
            <h3>Before</h3>
            <p>Manual slide management</p>
            <p>Complex routing logic</p>
          </div>
        }
        right={
          <div>
            <h3>After</h3>
            <p>Simple component-based slides</p>
            <p>Built-in navigation</p>
          </div>
        }
      />
    </Slide>
  );
}

import { Slide, SlideTitle, SlideColumns, SlideCode } from 'nextjs-slides';

export default function MySlide() {
  return (
    <Slide>
      <SlideTitle>Old vs New</SlideTitle>
      <SlideColumns
        left={
          <SlideCode title="old.js">{`
function oldWay() {
  // Complex setup
  const slides = [];
  return slides;
}
          `}</SlideCode>
        }
        right={
          <SlideCode title="new.tsx">{`
function newWay() {
  return <Slide>Simple!</Slide>;
}
          `}</SlideCode>
        }
      />
    </Slide>
  );
}

import {
  Slide,
  SlideTitle,
  SlideColumns,
  SlideList,
  SlideListItem,
} from 'nextjs-slides';

export default function MySlide() {
  return (
    <Slide>
      <SlideTitle>Features by Category</SlideTitle>
      <SlideColumns
        left={
          <div>
            <h3>Developer Experience</h3>
            <SlideList>
              <SlideListItem>TypeScript support</SlideListItem>
              <SlideListItem>Hot reload</SlideListItem>
              <SlideListItem>Zero config</SlideListItem>
            </SlideList>
          </div>
        }
        right={
          <div>
            <h3>Performance</h3>
            <SlideList>
              <SlideListItem>View Transitions</SlideListItem>
              <SlideListItem>Optimized rendering</SlideListItem>
              <SlideListItem>Fast navigation</SlideListItem>
            </SlideList>
          </div>
        }
      />
    </Slide>
  );
}