Parallax Gallery

import ParallaxGallery from './index.jsx';
import styles from './demo.module.css';

// 9 model images — cols 4 reuses model0–model2
const IMAGES = [
  { src: '/demo-assets/models/model0.png', alt: '' },
  { src: '/demo-assets/models/model1.png', alt: '' },
  { src: '/demo-assets/models/model2.png', alt: '' },
  { src: '/demo-assets/models/model3.png', alt: '' },
  { src: '/demo-assets/models/model4.png', alt: '' },
  { src: '/demo-assets/models/model5.png', alt: '' },
  { src: '/demo-assets/models/model6.png', alt: '' },
  { src: '/demo-assets/models/model7.png', alt: '' },
  { src: '/demo-assets/models/model8.png', alt: '' },
  { src: '/demo-assets/models/model0.png', alt: '' },
  { src: '/demo-assets/models/model1.png', alt: '' },
  { src: '/demo-assets/models/model2.png', alt: '' },
];

export default function ParallaxGalleryDemo() {
  return (
    <div className={styles.demo}>
      <section className={styles.intro}>
        <p className={styles.label}>Parallax Gallery</p>
        <h1 className={styles.heading}>Scroll to explore</h1>
      </section>
      <ParallaxGallery images={IMAGES} />
    </div>
  );
}