"use client"
import { SetStateAction, Suspense } from 'react'
import Header from "@/components/Header";
import   HomeGradient   from '@/components/HomeGradient';
import Hero from "@/components/Hero";
import Pricing from "@/components/Pricing";
import FAQ from "@/components/FAQ";
import FeaturesListicle from "@/components/FeaturesListicle";
import Footer from "@/components/Footer";
import Testimonials11 from "@/components/Testimonials11";
import TypewriterFunding from "@/components/TypewriterFunding";
import RevealEffect from "@/components/RevealEffect";
import CardHoverEffect from "@/components/CardHoverEffect";
import MultiStepLoader from "@/components/MultiStepLoader"
 
 
 
export default function Home() {
  return (
    <>
      <Suspense>
      <Header />
      </Suspense>
      <main>
        <HomeGradient/>
        <Hero />
        <div className='pt-[20px] sm:pt-[50px]   lg:pt-[120px] '>
          <div className="mockup-browser border border-base-300">
            <div className="mockup-browser-toolbar"></div>
            <h1 className='text-center pt-[40px] text-5xl lg:pt-[70px] font-bold'> 
             <span className="bg-blue-800 text-neutral-content px-2 md:px-4 ml-1 md:ml-1.5 leading-relaxed whitespace-nowrap font-bold">
                Dream It
             </span>
              &
             <span className="bg-blue-800 text-neutral-content px-2 md:px-4 ml-1 md:ml-1.5 leading-relaxed whitespace-nowrap font-bold">
               Build It
             </span>
             In Less Than 
            <span className="bg-blue-800 text-neutral-content px-2 md:px-4 ml-1 md:ml-1.5 leading-relaxed whitespace-nowrap font-bold"> 
              5 Minutes
            </span>
         </h1>
         <h1 className='text-center py-10 px-0 pt-[40px] text-5xl lg:pt-[150px]'>👇🏼</h1>
        <MultiStepLoader/>
       </div>
    </div>
        <FeaturesListicle />
        <CardHoverEffect />
        <Pricing />
        <FAQ />
        <TypewriterFunding />
        <RevealEffect /> 
        <Testimonials11 />
       </main>
      <Footer />
    </>
  );
}