Footer Parallax Text

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

const PROJECTS = [
  { name: "Sheabinta", cat: "Shopify" },
  { name: "PATHS Nonprofit", cat: "Web Design" },
  { name: "Socialstats", cat: "Branding" },
  { name: "Kevin Davis", cat: "Portfolio" },
  { name: "Delivrd", cat: "Web App" },
];

export default function FooterParallaxTextDemo() {
  return (
    <div>
      {/* Hero — dark full-viewport */}
      <section className={styles.hero}>
        <h1 className={styles.heroTitle}>
          <span>Motion-forward</span>
          <span>design studio</span>
        </h1>
        <p className={styles.heroSub}>No-5 Studio · New York</p>
      </section>

      {/* Work section — light, gives vertical space above the footer */}
      <section className={styles.work}>
        <p className={styles.workLabel}>Selected work — 2023/25</p>
        <ul className={styles.workList}>
          {PROJECTS.map((p) => (
            <li key={p.name} className={styles.workItem}>
              <span className={styles.workName}>{p.name}</span>
              <span className={styles.workCat}>{p.cat}</span>
            </li>
          ))}
        </ul>
      </section>

      {/* The actual component — scroll here to see the parallax text */}
      <FooterParallaxText
        backgroundText="no-5.studio"
        navLinks={[
          { label: "Work", href: "#" },
          { label: "About", href: "#" },
          { label: "Contact", href: "#" },
        ]}
        email="hello@no-5.studio"
        copyright="© 2025 No-5 Studio. All rights reserved."
      />
    </div>
  );
}