<Layout seo={SEO}>
  <div class="max-w-7xl mx-auto space-y-4 px-4">
    <Hero />

    <Breadcrumbs
      data={BREADCRUMBS_DATA}
      className="bg-base-200/70 rounded-lg p-4 shadow-sm"
    />

    <div class="flex flex-col md:flex-row gap-4">
      <div
        id="content"
        class="flex-1 order-1 md:order-0 bg-base-200/70 rounded-lg p-4 shadow-sm p-4 md:p-8"
      >
        <YoutubeEmbed
          className="max-w-2xl mx-auto my-16"
          id={YOUTUBE_VIDEO.id}
          title={YOUTUBE_VIDEO.title}
        />

        <WikiContent>
          <HomeMDX />
        </WikiContent>
      </div>

      <AsidePanel className="order-0 md:order-1" />
    </div>
  </div>
</Layout>