App.jsx

import React, { Suspense, useState, useEffect } from "react";
import Loader from "./components/Loader";
// const Navbar = React.lazy(() => import("./components/Navbar"));
// const LandingHero = React.lazy(() => import("./components/LandingHero"));
// const About = React.lazy(() => import("./components/About"));
// const WhatWeDo = React.lazy(() => import("./components/WhatWeDo"));
// const Services = React.lazy(() => import("./components/Services"));
// const ContactForm = React.lazy(() => import("./components/ContactForm"));
// const ContactUsHero = React.lazy(() => import("./components/ContactUsHero"));
// const Footer = React.lazy(() => import("./components/Footer"));
import Navbar from "./components/Navbar";
import LandingHero from "./components/LandingHero";
import About from "./components/About";
import WhatWeDo from "./components/WhatWeDo";
import Services from "./components/Services";
import ContactForm from "./components/ContactForm";
import ContactUsHero from "./components/ContactUsHero";
import Footer from "./components/Footer";
import PastWork from "./components/PastWork";

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setLoading(false);
    }, 3300);

    return () => clearTimeout(timeout);
  }, []);

  return (
    <React.Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Suspense fallback={<Loader />}>
          <div className="h-screen">
            <Navbar />
            <LandingHero />
          </div>
          <About />
          <WhatWeDo />
          <Services />
          <ContactForm />
          <PastWork />
          <ContactUsHero />
          <Footer />
        </Suspense>
      )}
    </React.Fragment>
  );
};

export default App;