---
import Footer from "@/components/Footer.astro";
import Header from "@/components/Header.astro";
import Metadata from "@/components/Metadata.astro";
import Particles from "@/components/Particles.astro";
import "@/styles/global.css"

type Props = {
  title: string;
  description: string;
};

const { title, description }: Props = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <Metadata title={title} description={description} />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

    <title>{title}</title>
  </head>
  <body class="font-body bg-background text-foreground relative">
    <div class="w-11/12 max-w-[1075px] mx-auto">
      <Header />
      <main>
        <slot />
      </main>
      <Footer />
    </div>
    <Particles
      class="hidden md:block absolute left-0 top-0 z-[-2] h-full w-full"
    />
  </body>
</html>
