Clip-Path Inset Reveal

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

const ITEMS = [
  { label: "Brand Identity", image: "/demo-assets/kickandbass.png", description: "Visual systems that define who you are." },
  { label: "Web Design", image: "/demo-assets/westend.png", description: "Motion-forward websites that convert." },
  { label: "Branding", image: "/demo-assets/socialstats.png", description: "Identity systems for ambitious brands." },
  { label: "Portfolio", image: "/demo-assets/keviindavis.png", description: "Showcasing creative work with intention." },
];

export default function ClipPathInsetRevealDemo() {
  return (
    <div>
      {/* Intro — items start below fold so they animate in on scroll */}
      <section className={styles.intro}>
        <p className={styles.introLabel}>Services</p>
        <h2 className={styles.introTitle}>Each item reveals from inset as you scroll it into view.</h2>
      </section>

      {/* Component */}
      <section className={styles.content}>
        <ClipPathInsetReveal items={ITEMS} />
      </section>
    </div>
  );
}