<x-header />
<div class="container-fluid p-0">
    <div class="bg-primary text-white d-flex flex-column justify-content-center align-items-center" style="height: 70vh;">
        <div class="container text-center px-3 px-md-5">
            <h1 class="h1 display-md-1 fw-bold mb-3">Клининговая компания «Мой Не Сам»</h1>
            <a href="{{Route('apply')}}" class="btn btn-light btn-lg px-5 rounded-pill shadow">Оформить заказ</a>
        </div>
    </div>
</div>

<div class="container py-5">
    <section>
        <h2 class="text-center mb-5 fw-bold">Наши услуги</h2>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4">
            @foreach($categories as $category)
            <div class="col">
                <div class="card h-100 shadow border-0">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center">
                        <i class="fas fa-broom fa-4x text-primary mb-4"></i>
                        <h5 class="card-title text-center">{{ $category->name }}</h5>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </section>
</div>

<x-footer />
<x-scripts />
