---
import { SITE } from "src/config";
import Breadcrumbs from "@components/Breadcrumbs.astro";
import Footer from "@components/Footer.astro";
import Header from "@components/Header.astro";
import Layout from "./Layout.astro";

export interface Props {
  frontmatter: {
    title: string;
    description?: string;
  };
}

const { frontmatter } = Astro.props;
---

<Layout title={`${frontmatter.title} | ${SITE.title}`}>
  <Header activeNav="about" />
  <Breadcrumbs />
  <main id="main-content">
    <section id="about" class="mb-28 prose max-w-3xl prose-img:border-0">
      <h1 class="text-2xl sm:text-3xl tracking-wider">{frontmatter.title}</h1>
      <slot />
    </section>
  </main>
  <Footer />
</Layout>