Video Hero

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

export default function VideoHeroDemo() {
  return (
    <div className={styles.wrapper}>

      <VideoHero src="/demo-assets/videos/HomeHeroexample1.mp4" aspectRatio="16 / 9" />

      <section className={styles.intro}>
        <p className={styles.eyebrow}>Est. 2024</p>
        <h2 className={styles.heading}>Designed for motion.</h2>
        <p className={styles.body}>
          We build web experiences that move — scroll-driven, video-led, and built to last.
        </p>
      </section>

      <VideoHero src="/demo-assets/videos/Novatrexexample.mp4" aspectRatio="16 / 9" />

      <section className={styles.works}>
        <p className={styles.eyebrow}>Selected Work</p>
        <div className={styles.grid}>
          {["Novatrex", "Flow State", "Westend", "Kickbass"].map((title) => (
            <div key={title} className={styles.card}>
              <div className={styles.thumb} />
              <span className={styles.cardTitle}>{title}</span>
            </div>
          ))}
        </div>
      </section>

      <VideoHero imgSrc="/demo-assets/videos/HomeImageexample2.webp" aspectRatio="16 / 9" />

      <section className={styles.about}>
        <p className={styles.eyebrow}>About</p>
        <h2 className={styles.heading}>Built different.</h2>
        <p className={styles.body}>
          Every project starts with intent — understanding the brand, the audience, and the moment.
        </p>
      </section>

    </div>
  );
}