@props(['title', 'metaDescription' => null, 'hero' => null])

<x-storefront.layout :title="$title" :metaDescription="$metaDescription">
    <x-slot:header>
        <x-storefront.top-bar />
        <x-storefront.main-header />
    </x-slot:header>

    @if ($hero)
        <x-storefront.page-hero :title="$hero" />
    @endif

    <div class="container py-4">
        <x-storefront.flash />

        {{ $slot }}
    </div>
</x-storefront.layout>