import { useEffect, useState } from "react";
import Hero from "@/components/ui/hero";

export default function HeroDemo() {
  // The hero holds its entrance until the page signals it is ready.
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const id = window.setTimeout(() => setReady(true), 120);
    return () => window.clearTimeout(id);
  }, []);

  return (
    <div className="w-full overflow-hidden rounded-card border border-line">
      <Hero ready={ready} />
    </div>
  );
}