@extends('frontend.layouts.app')
@section('content')
    <!-- Hero Slider Area Start -->
    <section class="hero-slider-area">
        <div class="hero-slider">
            <div class="hero-slider-inner owl-carousel">
                @foreach ($sliders as $slider)
                    <div class="hero-slider-item">
                        <img src="{{ $slider->image }}" width="100%" height="auto">
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- End Hero Slider Area -->


    <!-- About Section -->
    <div class="about-us-section p-30">
        <div class="container">
            <div class="row">
                <div class="col-md-4 m-auto">
                    <div class="about-bottom">
                        <img src="{{ $information->image }}" width="100%" alt="About Us" class="img-fluid">
                    </div>
                </div>
                <div class="col-md-8">
                    <div>
                        <div class="content-part text-center">
                            <h3 class="pb-4">About GHI International</h3>
                        </div>
                        <p>
                            {!! $information->message !!}
                        </p>
                    </div>
                    <div class="text-center">
                        <a class="content-button mb-2" href="/about">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sister-concern-section p-30">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="content-part text-center">
                        <h3 class="pb-4">Our Services</h3>
                    </div>
                </div>
                @foreach ($home_concerns as $concern)
                    <div class="col-md-4 pb-4">
                        <a href="/service/{{ $concern->slug }}">
                            <div class="breadcumb-box">
                                <div class="logo-section">
                                    <img src="/{{ $concern->image }}" width="100%" height="auto">
                                </div>
                                <div class="content-section text-center">
                                    <h2>{{ $concern->concern_name }}</h2>
                                    <p class="text-center">{{ $concern->short_details }}</p>
                                    <a href="/service/{{ $concern->slug }}">Read More</a>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
                <div class="col-12">
                    <div class="text-center">
                        <a class="content-button mb-2" href="/service">View More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="quick-section bg-overlay p-50 mt-5">
        <div class="container">
            <div class="row">
                <div class="quick-background bg-white">
                    <h1 class="quick-text text-center text-dark pb-3">
                        Wanna Trade with GHI International?
                    </h1>
                    <p class="pb-3 text-center">Reach us quickly, we are commited to provide best service ever.</p>

                    <div class="text-center">
                        <a class="content-button mb-2" href="/connect-with-us">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="members-section p-30">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="content-part text-center">
                        <h3 class="pb-4">GHI previously Worked with them</h3>
                    </div>
                </div>
            </div>
            <div class="member-slider-inner owl-carousel">
                @foreach ($members as $member)
                    <div class="member-slider-item" style="background: #fff;
                    padding: 10px;">
                        <img src="{{ $member->image }}" width="auto" height="140" style="object-fit: contain">
                        <h3
                            style="font-weight: 500;
                        font-size: 17px;
                        text-align: center;
                        padding: 10px 0px;">
                            {{ $member->name }}</h3>
                    </div>
                @endforeach
            </div>
        </div>
    </div>


    <div class="location-section mt-5">
        <div class="content-part text-center">
            <h3 class="pb-4">Find us on Google Map</h3>
        </div>

        {!! $information->location !!}
    </div>
@endsection