Function LandingPage

src/pages/LandingPage.jsx:16–65

()

const MIN_LOADER_MS = 800;

const LandingPage = () => {
  useScrollToTop();
  const [loaded, setLoaded] = useState(false);
  const [hiding, setHiding] = useState(false);

  const reveal = useCallback(() => {
    setHiding(true);
    // after the loader fade-out finishes, mark fully loaded & unlock scroll
    setTimeout(() => setLoaded(true), 600);
  }, []);

  useLayoutEffect(() => {
    if (loaded) return;
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
    return () => {
      document.documentElement.style.overflow = '';
      document.body.style.overflow = '';
    };
  }, [loaded]);

  useEffect(() => {
    const start = Date.now();

    document.fonts.ready.then(() => {
      const elapsed = Date.now() - start;
      const remaining = Math.max(0, MIN_LOADER_MS - elapsed);
      setTimeout(reveal, remaining);
    });
  }, [reveal]);

  return (
    <>
      {!loaded && <LandingLoader hiding={hiding} />}
      <section className={`landing-wrapper no-side-fades${loaded ? ' ln-loaded' : ' ln-loading'}`}>
        <title>React Bits - Animated UI Components For React</title>

        <Navbar />
        <Hero />
        <Features />
        <Testimonials />
        <LiveDemo />
        <QuickStart />
        <Sponsors />
        <CTA />
        <Footer />
      </section>
    </>
  );
};

export default LandingPage;