---
import Layout from "@layouts/Layout.astro";
import FeaturedPost from "@components/blog/FeaturedPost.astro";
import BlogSection from "@components/blog/BlogSection.astro";
import { BLOG_PAGE_SEO } from "@constants/constants.ts";
---

<Layout
  title={BLOG_PAGE_SEO.title}
  description={BLOG_PAGE_SEO.description}
  pagePath={Astro.url.pathname}
  bodyClass="bg-[#F8F9FA] text-gray-900"
  noContainer={true}
>
  <main class="min-h-screen bg-[#F8F9FA] -mx-4 md:mx-0 overflow-x-hidden">
    <!-- Декоративный фон -->
    <div class="fixed inset-0 pointer-events-none">
      <div
        class="absolute top-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-5 rounded-full blur-3xl"
      >
      </div>
      <div
        class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl"
      >
      </div>
    </div>

    <div class="relative z-10">
      <FeaturedPost />
      <BlogSection />
    </div>
  </main>
</Layout>
