Landing page

The components essential for the landing page are found at: app/page.tsx.

export default function Home() {
    return (
  <div className="min-h-screen flex flex-col">
            <Header />
            <Hero />
            {config.mainSections.map((section, index) => (
                <main
                    className="flex-grow"
                    key={section.value}
                    id={section.value.toLowerCase() + "s"}
                >
                    <MainSectionsHeader
                        index={index}
                        title={section.header.title}
                        description={section.header.description}
                        cta={section.header.cta}
                    />
                    <Container className="flex flex-col min-h-screen mb-20">
                        <div className="flex">
                            <Sidebar
                                className="w-auto max-w-sm hidden xl:block"
                                type={section.value}
                            />
                            <div className="flex-grow flex flex-col">
                                <Filters
                                    className="w-full"
                                    type={section.value}
                                />

                                <Content
                                    items={data[section.value].items}
                                    type={section.value}
                                    perPage={PAGE_SIZE}
                                    className="flex-grow"
                                />
                            </div>
                        </div>
                    </Container>
                </main>
            ))}

            <Footer />
        </div>
    );
}

The following is an alternative hero component that you can use instead of the main one:

• <Hero_Split />