Image Comparison Slider

import { Component as ImageComparison } from "@/components/ui/image-comparison-slider";

export default function Demo() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-16 bg-background py-20">
      <div className="text-center px-4">
        <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-3">
          See the difference
        </h2>
        <p className="text-muted-foreground text-base md:text-lg max-w-md mx-auto">
          Drag the slider to compare before and after.
        </p>
      </div>

      <ImageComparison
        beforeSrc="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1600&auto=format&fit=crop&sat=-100"
        afterSrc="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1600&auto=format&fit=crop"
        beforeLabel="Original"
        afterLabel="Enhanced"
        initialPosition={50}
      />

      <ImageComparison
        beforeSrc="https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1600&auto=format&fit=crop&sat=-100"
        afterSrc="https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1600&auto=format&fit=crop"
        beforeLabel="B&W"
        afterLabel="Color"
        initialPosition={35}
      />
    </div>
  );
}