
<%- include('partials/header_index') %>
<%- include('partials/main_nav') %>

<!-- Carousel for Images -->
<div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./Assets/images/grocery-1.jpg" class="d-block w-100 carousel-image" alt="smiling woman">
        </div>
        <div class="carousel-item">
            <img src="./Assets/images/grocery-2.jpg" class="d-block w-100 carousel-image" alt="Big smile">
        </div>
        <div class="carousel-item">
            <img src="./Assets/images/grocery-3.jpg" class="d-block w-100 carousel-image" alt="smiling balloon and lady">
        </div>
    </div>
</div>

<!-- Menu Section -->
<section class="container mt-5">
    <h1 class="text-center mb-5">Menu</h1>

    <!-- Starters -->
    <div class="mb-4">
        <h2>Starters</h2>
        <ul class="list-unstyled">
            <li>Spring Rolls</li>
            <li>French Onion Soup</li>
            <li>Caesar Salad</li>
        </ul>
    </div>

    <!-- Side Dishes -->
    <div class="mb-4">
        <h2>Side Dishes</h2>
        <ul class="list-unstyled">
            <li>Mixed Green Salad</li>
            <li>French Fries</li>
            <li>Garlic Bread</li>
        </ul>
    </div>

    <!-- Main Course -->
    <div class="mb-4">
        <h2>Main Course</h2>
        <ul class="list-unstyled">
            <li>Grilled Salmon</li>
            <li>Roast Beef</li>
            <li>Eggplant Lasagne</li>
        </ul>
    </div>

    <!-- Desserts -->
    <div class="mb-4">
        <h2>Desserts</h2>
        <ul class="list-unstyled">
            <li>Fruit Salad</li>
            <li>Apple Pie</li>
            <li>Vanilla Icecream</li>
        </ul>
    </div>
</section>

<%- include('partials/bottom_nav') %>
<%- include('partials/footer') %>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
