Parallax Image in Card

import ParallaxImageInCard from "./index.jsx";
import styles from "./demo.module.css";

const CARDS = [
  { title: "Sheabinta", description: "Headless Shopify storefront", image: "/demo-assets/kickandbass.png", href: "#" },
  { title: "PATHS", description: "Nonprofit website", image: "/demo-assets/westend.png", href: "#" },
  { title: "Socialstats", description: "Brand identity & web", image: "/demo-assets/socialstats.png", href: "#" },
  { title: "Kevin Davis", description: "Artist portfolio", image: "/demo-assets/keviindavis.png", href: "#" },
];

export default function ParallaxImageInCardDemo() {
  return (
    <div>
      {/* Header section — cards start below the fold */}
      <section className={styles.header}>
        <p className={styles.headerLabel}>Selected work</p>
        <h2 className={styles.headerTitle}>Scroll down to see the parallax images in each card.</h2>
      </section>

      {/* Component — cards scroll into view with parallax background */}
      <section className={styles.content}>
        <ParallaxImageInCard cards={CARDS} />
      </section>
    </div>
  );
}