<template>
    <div>
        <header class="header">
            <div class="flex gap-5 items-center justify-between md:justify-start max-w-screen-xl mx-auto font-thasadith">
                <InertiaLink href="/">
                    <div
                        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-4xl"
                    >Kamil<span class="logo-green">Craft</span></div>
                </InertiaLink>
            </div>
        </header>
        <main class="-my-24 px-2 sm:px-0">
            <slot />
        </main>
    </div>
</template>

<script setup>

</script>

<style lang="css">
.header {
    @apply min-h-[220px];
    background: linear-gradient(237.74deg,#1199a5,#436da7 83%);
}
.logo-green {
    color: rgb(162, 207, 0);
}
</style>
