Rotating Text

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

export default function RotatingTextDemo() {
  return (
    <div className={styles.page}>

      {/* Hero — full sentence with rotating word */}
      <section className={styles.hero}>
        <p className={styles.label}>[ Rotating Text ]</p>
        <RotatingText
          as="h1"
          before="We build"
          words={["websites", "experiences", "brands", "products"]}
          after="that scale."
          stepDuration={1.75}
          className={styles.heroHeading}
        />
      </section>

      {/* Standalone — rotating word only */}
      <section className={styles.section}>
        <p className={styles.label}>[ Standalone ]</p>
        <RotatingText
          as="h2"
          words={["Creative", "Bold", "Minimal", "Modern"]}
          stepDuration={2}
          className={styles.subHeading}
        />
        <p className={styles.body}>
          Drop it into any heading. Pass <code>before</code> and <code>after</code> to build a
          full sentence, or use <code>words</code> alone as a cycling label.
        </p>
      </section>

    </div>
  );
}