import {
    AnimateIn,
    DefinitionsSection,
    Footer,
    HeroSection,
    IntroductionSection,
    MobileNav,
    QuestionsSection,
    Sidebar,
    VerificationSection,
} from '@/app/components'

export default function Home() {
    return (
        <div className="min-h-screen bg-base-100 font-sans">
            <MobileNav />

            <div className="flex gap-x-8 lg:gap-x-16 xl:gap-x-24 justify-center px-8 pt-48 pb-32 md:py-40">
                <section className="hidden md:block shrink-0 w-32">
                    <Sidebar />
                </section>

                <main className="flex flex-col w-xl gap-16 md:gap-24 min-w-0">
                    <HeroSection />

                    <AnimateIn viewportDelay={ 0.4 } className="h-px w-full bg-border" />

                    <IntroductionSection />

                    <div className="h-px w-full bg-border" />

                    <DefinitionsSection />

                    <div className="h-px w-full bg-border" />

                    <VerificationSection />

                    <div className="h-px w-full bg-border" />

                    <QuestionsSection />
                </main>

                <section className="hidden md:flex shrink-0 w-32"></section>
            </div>

            <Footer />
        </div>
    )
}