<!DOCTYPE html>
<html
  lang="en"
  x-data="layout()"
  :class="{
  'dark': $store.app.isDark,
  '': !$store.app.isDark
}"
>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/img/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mistral - Tailwind CSS Landing Page</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" type="text/css" href="/postcss/main.postcss" />
  </head>
  <body class="w-full h-full bg-white dark:bg-muted-900">
    <!-- prettier-ignore -->

    <!--Site navbar-->
    {{> navigation/navbar}}

    <!--Site search-->
    {{> navigation/navbar-search}}

    <main class="w-full">
      <!-- Renders the page body -->
      {{> @partial-block }}
    </main>

    <!--Site footer-->
    {{> footer/footer}}

    <!--Back to top button-->
    {{> misc/backtotop}}

    <script type="module" src="/scripts/main.js"></script>
  </body>
</html>
