<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>

        <?= css([
            'assets/css/styles.css',
            'assets/css/png4web.css',
        ]) ?>

        <link rel="shortcut icon" type="image/x-icon"
              href="<?= url('assets/favicon.ico') ?>">
    </head>

    <body class="font-sans antialiased bg-sf_grau-400 text-gray-900">
        <header>
            <?php snippet('navbar') ?>
        </header>

        <main>

            <?php if ($page->isHomePage()): ?>
                <?php snippet('hero') ?>
            <?php endif ?>

            <?php if ($page->heroText()->isNotEmpty()): ?>
                <?php snippet('titel') ?>
            <?php endif ?>

            <section class="py-24 bg-sf_grau-50">
                <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <?= $slot ?>
                </div>
            </section>
        </main>

        <footer class="bg-sf_grau-400 w-full" id="footer">
            <?php snippet('footer') ?>
        </footer>
        <?= js('assets/js/navbar.js') ?>
    </body>
</html>
