import { Header, Footer, HeroSection, CreationSection, FeaturesSection, HowItWorksSection, PricingSection, ReviewsSection, FAQSection, CTASection, BlogGrid } from "../../../components/index";
import { useBlogs } from "../../../hooks/useBlog";
import Seo from "../../../components/seo/Seo";
import { HOME_ROUTE } from "../../../helper/routes";

export function LandingPage() {
    const { data: blogData } = useBlogs();
    const posts = blogData?.posts || [];
    return (
        <div className="min-h-screen ">
            <Seo url={HOME_ROUTE} page="home" />
            <Header />
            <HeroSection />
            <CreationSection />
            <FeaturesSection />
            <HowItWorksSection />
            <PricingSection />
            <ReviewsSection />
            <FAQSection />
            <BlogGrid posts={posts} badge={blogData?.badge}
                title={blogData?.title}
                description={blogData?.description} limit={3} />
            <CTASection />
            <Footer />
        </div>
    );
}