{{ define "main" }}
<div class="min-h-screen bg-white dark:bg-pizza-dark text-gray-900 dark:text-white">
    <div class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
            <!-- Opening Hours Card -->
            <div class="bg-white dark:bg-pizza-darker rounded-xl p-6 shadow-lg lg:-ml-16 lg:-mt-8 relative z-10 slide-in-left">
                {{ partial "opening-hours.html" . }}
            </div>

            <!-- Pizza Image -->
            <div class="rounded-xl overflow-hidden shadow-lg slide-in-right">
                <img src="/images/pizza.webp" alt="Delicious Pizza" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-700">
            </div>
        </div>

        <!-- Menu Section -->
        {{ partial "menu-card.html" . }}
    </div>
</div>


<!-- Scripts -->
{{ $menu := resources.Get "js/menu.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ $menu.RelPermalink }}" integrity="{{ $menu.Data.Integrity }}"></script>
{{ end }}