import {
  ImageComparison,
  ImageComparisonImage,
  ImageComparisonSlider,
} from "./components/ImageComparison";

export default function Page() {
  return (
    <ImageComparison className="aspect-[16/10] w-full rounded-lg border border-zinc-200 dark:border-zinc-800">
      <ImageComparisonImage
        src="/mp_dark.png"
        alt="UI Forge Dark"
        position="left"
      />
      <ImageComparisonImage
        src="/mp_light.png"
        alt="UI Forge Light"
        position="right"
      />
      <ImageComparisonSlider className="bg-white" />
    </ImageComparison>
  );
}

import {
  ImageComparison,
  ImageComparisonImage,
  ImageComparisonSlider,
} from "./components/ImageComparison";

export default function Page() {
  return (
    <ImageComparison
      className="aspect-[16/10] w-full rounded-lg border border-zinc-200 dark:border-zinc-800"
      enableHover
    >
      <ImageComparisonImage
        src="/mp_dark.png"
        alt="UI Forge Dark"
        position="left"
      />
      <ImageComparisonImage
        src="/mp_light.png"
        alt="UI Forge Light"
        position="right"
      />
      <ImageComparisonSlider className="bg-white" />
    </ImageComparison>
  );
}

import {
  ImageComparison,
  ImageComparisonImage,
  ImageComparisonSlider,
} from "./components/ImageComparison";

export default function Page() {
  return (
    <ImageComparison
      className="aspect-[16/10] w-full rounded-lg border border-zinc-200 dark:border-zinc-800"
      enableHover
      springOptions={{
        bounce: 0.3,
      }}
    >
      <ImageComparisonImage
        src="/mp_dark.png"
        alt="UI Forge Dark"
        position="left"
      />
      <ImageComparisonImage
        src="/mp_light.png"
        alt="UI Forge Light"
        position="right"
      />
      <ImageComparisonSlider className="w-0.5 bg-white/30 backdrop-blur-sm" />
    </ImageComparison>
  );
}

import {
  ImageComparison,
  ImageComparisonImage,
  ImageComparisonSlider,
} from "./components/ImageComparison";

export default function Page() {
  return (
    <ImageComparison className="aspect-[16/10] w-full rounded-lg border border-zinc-200 dark:border-zinc-800">
      <ImageComparisonImage
        src="/mp_dark.png"
        alt="UI Forge Dark"
        position="left"
      />
      <ImageComparisonImage
        src="/mp_light.png"
        alt="UI Forge Light"
        position="right"
      />
      <ImageComparisonSlider className="w-2 bg-white/50 backdrop-blur-sm transition-colors hover:bg-white/80">
        <div className="absolute left-1/2 top-1/2 h-8 w-6 -translate-x-1/2 -translate-y-1/2 rounded-[4px] bg-white" />
      </ImageComparisonSlider>
    </ImageComparison>
  );
}