@extends('web_layout.app')

@section('web.page-title', 'Explore Canada - New Migrant')

@section('web.main-content')


<!--Page Header Start-->
<section class="page-header">
    <div class="page-header-bg" style="background-image: url({{ asset('web_assets/images/backgrounds/guide-page-header-bg2.jpg') }})">
    </div>
    <div class="container">
        <div class="page-header__inner">
            <h2>Explore Canada</h2>
            <ul class="thm-breadcrumb list-unstyled">
                <li><a href="{{ route('web.home') }}">Home</a></li>
                <li><span>-</span></li>
                <li class="active">Explore Canada</li>
            </ul>
        </div>
    </div>
</section>
<!--Page Header End-->

<!--Blog One Start-->
<section class="blog-page">
    <div class="container">
        <div class="row">


            @foreach ($guides as $guide)

            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="blog-one__single">
                    <div class="blog-one__img-box">
                        <div class="blog-one__img">
                            <img src="{{ asset('web_assets/images/guides/'.$guide->title_image) }}" alt="">
                            <a href="{{ route('web.guide.detail', $guide->page_url) }}">
                                <span class="blog-one__plus"></span>
                            </a>
                        </div>
                    </div>
                    <div class="blog-one__content">
                        <h3 class="blog-one__title"><a href="{{ route('web.guide.detail', $guide->page_url) }}">{{ $guide->title }}</a></h3>
                        <div class="blog-one__comment-and-arrow">
                                <div class="about-one__btn-box" style="width: 100%;">
                                <a style="width: 100%; text-align: center;" href="{{ route('web.guide.detail', $guide->page_url) }}" class="about-one__btn thm-btn">Read Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @endforeach


        </div>
    </div>
</section>
<!--Blog One End-->

@endsection

@section('web.header_script')

@endsection

@section('web.footer_script')

@endsection