@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}



<div>
    <div class="container">
        <!-- Hero Section -->
        <div class="row valign-wrapper mt-10">
            <div class="col l6 m6 s12">
                <h4 class="text-center"><b>Network and Grow Your Business</b></h4>
                <p class="text-center">
                    Tizibane B2B is a powerful platform that connects businesses of all sizes—startups, SMEs, and enterprises—within the different industries. Whether you're looking to collaborate, trade, or expand your reach, Tizibane B2B helps you build strong, strategic partnerships to drive growth.
                </p>
                <br>
                <a href="{{ route('welcome') }}" class="btn-small rounded-lg waves-effect waves-light black white-text">
                    get started <i class="material-icons right">arrow_forward</i>
                </a>
            </div>

            <div class="col l6 m6 s12">
                <img src="{{ asset('images/network.png') }}" alt="" class="responsive-img breathing-img">
            </div>
        </div>

        <!-- Company Listing Section -->
        <div class="z-depth-0 card p-5 mt-10 rounded-xl transparent">
            <div class="row">

                <div class="mt-4 mb-4">
                    <x-ui-elements.searchbar />
                </div>

                <!-- Company Cards -->
                <!--         @if(count($companies) > 0)
                @foreach ($companies as $company) -->
                <div class="col s12 m4 l4">
                    <a href="#" class="black-text">
                        <div class="card hoverable z-depth-1" style="border-radius: 10px;">
                            <div class="card-content">
                                <div class="row valign-wrapper" style="margin-bottom: 0;">
                                    <div class="col s3">
                                        <img src="{{ asset('storage/company-logos/' . '01JZJ6AR3JADHTFQE71G6MHDVS.png') }}"
                                            alt="{{ $company->company_name }}"
                                            class="circle responsive-img" style="width: 60px; height: 60px;">
                                    </div>
                                    <div class="col s9">
                                        <h6 class="black-text truncate" style="margin: 0;">
                                            Ellisons Solutions Limited
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>



                <div class="col s12 m4 l4">
                    <a href="#" class="black-text">
                        <div class="card hoverable z-depth-1" style="border-radius: 10px;">
                            <div class="card-content">
                                <div class="row valign-wrapper" style="margin-bottom: 0;">
                                    <div class="col s3">
                                        <img src="{{ asset('storage/company-logos/' . '01JZJ6AR3JADHTFQE71G6MHDVS.png') }}"
                                            alt="{{ $company->company_name }}"
                                            class="circle responsive-img" style="width: 60px; height: 60px;">
                                    </div>
                                    <div class="col s9">
                                        <h6 class="black-text truncate" style="margin: 0;">
                                            Binary Pen
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>



                <div class="col s12 m4 l4">
                    <a href="#" class="black-text">
                        <div class="card hoverable z-depth-1" style="border-radius: 10px;">
                            <div class="card-content">
                                <div class="row valign-wrapper" style="margin-bottom: 0;">
                                    <div class="col s3">
                                        <img src="{{ asset('storage/company-logos/' . '01JZJ6AR3JADHTFQE71G6MHDVS.png') }}"
                                            alt="{{ $company->company_name }}"
                                            class="circle responsive-img" style="width: 60px; height: 60px;">
                                    </div>
                                    <div class="col s9">
                                        <h6 class="black-text truncate" style="margin: 0;">
                                            AlphaHill Inc.
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!--                 @endforeach
                @else
                <div class="col s12">
                    <p class="center grey-text">No companies found.</p>
                </div>
                @endif -->
            </div>

            <!-- Pagination -->
            <div class="mt-4 center">
                @if(count($companies) > 0)
                {{ $companies->links() }}
                @endif
            </div>
        </div>
    </div>

    <!-- Styles -->
    <style>
        .breathing-img {
            animation: breathe 6s ease-in-out infinite;
            transform-origin: center center;
        }

        @keyframes breathe {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.02);
            }
        }

        .card {
            margin-bottom: 20px;
        }

        .card-content {
            padding: 16px;
        }
    </style>
</div>